ny komponent klar, men er fortsatt bug med at ikke alle elementer vises. testes

Author: taniaholst

src/components/_common/linkpanel/LinkPanelNavnoSimple/LinkPanelNavnoSimple.tsx

@@ -1,17 +1,15 @@
 import React from 'react';
-import { Heading } from '@navikt/ds-react';
 import { classNames } from 'utils/classnames';
 import { LenkeBase } from 'components/_common/lenke/lenkeBase/LenkeBase';
 
 import style from './LinkPanelNavnoSimple.module.scss';
 
-type DsHeadingSize = React.ComponentProps<typeof Heading>['size'];
-
 type Props = {
     href: string;
     analyticsLinkGroup?: string;
     icon?: React.ReactNode;
     children: React.ReactNode;
+    iconClassname?: string;
 } & React.ComponentProps<typeof LenkeBase>;
 
 // This component is meant to be used with "simple" content, ie just a line of text
@@ -23,6 +21,7 @@ export const LinkPanelNavnoSimple = ({
     icon,
     children,
     className,
+    iconClassname,
     ...rest
 }: Props) => {
     return (
@@ -33,7 +32,7 @@ export const LinkPanelNavnoSimple = ({
             analyticsComponent={'Lenkepanel navno enkel'}
             analyticsLinkGroup={analyticsLinkGroup}
         >
-            {icon && <div className={style.icon}>{icon}</div>}
+            {icon && <div className={classNames(iconClassname, style.icon)}>{icon}</div>}
             <div className={classNames('navds-heading', 'navds-heading--medium')}>
                 <span className={style.text}>{children}</span>
             </div>

src/components/parts/frontpage-person-shortcuts/FrontpagePersonShortcutsPart.module.scss

@@ -0,0 +1,63 @@
+@use 'common' as common;
+
+.personShortcuts {
+    @include common.full-width-mixin();
+    padding-top: 2.25rem;
+    padding-bottom: 2.25rem;
+    background-color: var(--bg-color, var(--a-red-50));
+
+    @media #{common.$mq-screen-mobile} {
+        padding-top: 2rem;
+        padding-bottom: 1.75rem;
+    }
+
+    .header {
+        margin-bottom: 0.5rem;
+    }
+
+    .list {
+        display: grid;
+        grid-template-columns: auto auto;
+        list-style: none;
+        padding: 0;
+        column-gap: 2rem;
+
+        @media #{common.$mq-screen-mobile} {
+            grid-template-columns: auto;
+        }
+
+        .listItem {
+            width: 100%;
+            display: flex;
+            padding: 0.75rem 0;
+            border-top: 1px solid var(--Global-Gray-300, #cbcfd5);
+
+            &:nth-child(1),
+            &:nth-child(2) {
+                border-top: none;
+            }
+
+            @media #{common.$mq-screen-mobile} {
+                &:nth-child(2) {
+                    border-top: 1px solid var(--Global-Gray-300, #cbcfd5);
+                }
+            }
+
+            a {
+                padding: 0;
+                gap: 0.5rem;
+            }
+        }
+
+        .link {
+            .icon {
+                width: 2.25rem;
+                height: 100%;
+                color: black;
+                display: flex;
+                margin: 4px;
+                align-items: flex-start;
+            }
+        }
+    }
+}

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

@@ -1,22 +1,27 @@
 import React from 'react';
+import {
+    BriefcaseClockIcon,
+    CalendarIcon,
+    FolderFileIcon,
+    TasklistStartIcon,
+    WalletIcon,
+} from '@navikt/aksel-icons';
 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';
+import style from './FrontpagePersonShortcutsPart.module.scss';
 
 type Shortcut = {
     target: {
         _path: string;
         displayName: string;
         data: {
             url?: string;
-            icon?: Icon;
             title?: string;
         };
     };
     customTitle: string;
-    customIcon?: Icon;
 };
 
 export type PartConfigFrontpagePersonShortcuts = {
@@ -34,13 +39,13 @@ export const FrontpagePersonShortcutsPart = ({
     }
 
     return (
-        <div>
+        <div className={style.personShortcuts}>
             {sectionTitle && (
-                <Header size="large" level="2">
+                <Header size="large" level="2" className={style.header}>
                     {sectionTitle}
                 </Header>
             )}
-            <ul>
+            <ul className={style.list}>
                 {shortcuts.map((item) => {
                     const { target, customTitle } = item;
                     if (!target?.data) {
@@ -49,14 +54,33 @@ export const FrontpagePersonShortcutsPart = ({
 
                     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}>
+                        <li key={title} className={style.listItem}>
                             <LinkPanelNavnoSimple
                                 href={href}
                                 analyticsLinkGroup={title}
-                                // icon={<IllustrationStatic illustration={illustration} />}
+                                className={style.link}
+                                //Hardkoder ikonene istedenfor å legge de inn i Enonic da det
+                                //kun er her vi bruker ikoner
+                                icon={
+                                    <>
+                                        {title === 'Saksbehandlingstider' && (
+                                            <BriefcaseClockIcon title="Koffert med klokke" />
+                                        )}
+                                        {title === 'Utbetalingsdatoer' && (
+                                            <CalendarIcon title="Kalender" />
+                                        )}
+                                        {title === 'Satser' && <WalletIcon title="Lommebok" />}
+                                        {title === 'Søknad og skjema' && (
+                                            <TasklistStartIcon title="Oppgaveliste start" />
+                                        )}
+                                        {title === 'Ettersendelse' && (
+                                            <FolderFileIcon title="Mappefil" />
+                                        )}
+                                    </>
+                                }
+                                iconClassname={style.icon}
                             >
                                 {title}
                             </LinkPanelNavnoSimple>