init

Author: taniaholst

src/components/parts/PartsMapper.tsx

@@ -32,6 +32,7 @@ import { MainArticleLegacyPart } from 'components/parts/_legacy/main-article/Mai
 import { PublishingCalendarLegacyPart } from 'components/parts/_legacy/publishing-calendar/PublishingCalendarLegacyPart';
 import { PublishingCalendarEntryLegacyPart } from 'components/parts/_legacy/publishing-calendar/PublishingCalendarEntryLegacyPart';
 import { ComponentEditorProps } from 'components/ComponentMapper';
+import { FrontpagePersonShortcutsPart } from 'components/parts/frontpage-person-shortcuts/FrontpagePersonShortcutsPart';
 import { AlertBoxPart } from './alert-box/AlertBoxPart';
 import { LinkPanelPart } from './linkPanelPart/LinkPanelPart';
 import { LinkPanelsLegacyPart } from './_legacy/link-panels/LinkPanelsLegacyPart';
@@ -95,6 +96,8 @@ const PartComponentMapper = ({
             return <FrontpageCurrentTopicsPart {...partProps} />;
         case PartType.FrontpageShortcuts:
             return <FrontpageShortcutsPart {...partProps} />;
+        case PartType.FrontpagePersonShortcuts:
+            return <FrontpagePersonShortcutsPart {...partProps} />;
         case PartType.Header:
             return <HeaderPart {...partProps} />;
         case PartType.HtmlArea:

src/components/parts/frontpage-person-shortcuts/FrontpagePersonShortcutsPart.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { Header } from 'components/_common/headers/Header';
+import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
+import { LinkPanelNavnoSimple } from 'components/_common/linkpanel/LinkPanelNavnoSimple/LinkPanelNavnoSimple';
+import { PartComponentProps, PartType } from 'types/component-props/parts';
+import { Icon } from 'types/content-props/pictograms';
+
+type Shortcut = {
+    target: {
+        _path: string;
+        displayName: string;
+        data: {
+            url?: string;
+            icon?: Icon;
+            title?: string;
+        };
+    };
+    customTitle: string;
+    customIcon?: Icon;
+};
+
+export type PartConfigFrontpagePersonShortcuts = {
+    title?: string;
+    shortcuts: Shortcut[];
+};
+
+export const FrontpagePersonShortcutsPart = ({
+    config,
+}: PartComponentProps<PartType.FrontpagePersonShortcuts>) => {
+    const { shortcuts, title: sectionTitle } = config;
+
+    if (!shortcuts || shortcuts.length === 0) {
+        return <EditorHelp text={'Velg minst en snarvei'} />;
+    }
+
+    return (
+        <div>
+            {sectionTitle && (
+                <Header size="large" level="2">
+                    {sectionTitle}
+                </Header>
+            )}
+            <ul>
+                {shortcuts.map((item) => {
+                    const { target, customTitle } = item;
+                    if (!target?.data) {
+                        return null;
+                    }
+
+                    const href = target.data.url || target._path;
+                    const title = customTitle || target.data.title || target.displayName;
+                    // const illustration = customIllustration || target.data.illustration;
+
+                    return (
+                        <li key={title}>
+                            <LinkPanelNavnoSimple
+                                href={href}
+                                analyticsLinkGroup={title}
+                                // icon={<IllustrationStatic illustration={illustration} />}
+                            >
+                                {title}
+                            </LinkPanelNavnoSimple>
+                        </li>
+                    );
+                })}
+            </ul>
+        </div>
+    );
+};

src/types/component-props/parts.ts

@@ -12,6 +12,7 @@ import { PartConfigFormDetails } from 'components/parts/form-details/FormDetails
 import { PartConfigFrontpageContact } from 'components/parts/frontpage-contact/FrontpageContactPart';
 import { PartConfigFrontpageCurrentTopics } from 'components/parts/frontpage-current-topics/FrontpageCurrentTopicsPart';
 import { PartConfigFrontpageShortcuts } from 'components/parts/frontpage-shortcuts/FrontpageShortcutsPart';
+import { PartConfigFrontpagePersonShortcuts } from 'components/parts/frontpage-person-shortcuts/FrontpagePersonShortcutsPart';
 import { PartConfigHeader } from 'components/parts/header/HeaderPart';
 import { PartConfigHtmlArea } from 'components/parts/html-area/HtmlAreaPart';
 import { PartConfigLinkList } from 'components/parts/link-list/LinkListPart';
@@ -60,6 +61,7 @@ export enum PartType {
     FrontpageContact = 'no.nav.navno:frontpage-contact',
     FrontpageCurrentTopics = 'no.nav.navno:frontpage-current-topics',
     FrontpageShortcuts = 'no.nav.navno:frontpage-shortcuts',
+    FrontpagePersonShortcuts = 'no.nav.navno:frontpage-person-shortcuts',
     UxSignalsWidget = 'no.nav.navno:uxsignals-widget',
     UserTests = 'no.nav.navno:user-tests',
     ReadMore = 'no.nav.navno:read-more',
@@ -103,6 +105,7 @@ type PartConfigs = {
     [PartType.FrontpageContact]: PartConfigFrontpageContact;
     [PartType.FrontpageCurrentTopics]: PartConfigFrontpageCurrentTopics;
     [PartType.FrontpageShortcuts]: PartConfigFrontpageShortcuts;
+    [PartType.FrontpagePersonShortcuts]: PartConfigFrontpagePersonShortcuts;
     [PartType.Header]: PartConfigHeader;
     [PartType.HtmlArea]: PartConfigHtmlArea;
     [PartType.LinkList]: PartConfigLinkList;