Merge pull request #2036 from navikt/contact-option-stories

Stories for kontaktmodul

Author: bdahle

public/gfx/coronavirus.svg

@@ -77,7 +77,10 @@ export const AlternativeAudience = () => {
     }
 
     const productName =
-        showProductName === false ? getStringPart('this') : displayName.toLowerCase();
+        showProductName === false
+            ? getStringPart('this')
+            : displayName.charAt(0).toLowerCase() + displayName.slice(1);
+
     const audienceLinks = buildAudienceLinks(alternativeAudience, language);
 
     return (

public/gfx/external-link-icon.svg

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CallOption } from './CallOption';
+
+const meta = {
+    component: CallOption,
+    parameters: {
+        backgrounds: {
+            values: [{ name: 'ContactBackground', value: '#f2f3f5' }],
+            default: 'ContactBackground',
+        },
+    },
+} satisfies Meta<typeof CallOption>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithAlert: Story = { args: { alertText: 'Alert!' } };

public/gfx/globe.svg

@@ -5,15 +5,15 @@ import { LenkeBase } from 'components/_common/lenke/LenkeBase';
 import { AnalyticsEvents } from 'utils/amplitude';
 import { useLayoutConfig } from 'components/layouts/useLayoutConfig';
 import { ParsedHtml } from 'components/_common/parsed-html/ParsedHtml';
-import { OpeningInfo } from 'components/_common/contact-option/opening-info/OpeningInfo';
+import { OpeningInfo } from 'components/_common/contact-option/openingInfo/OpeningInfo';
 import { Audience, getAudience } from 'types/component-props/_mixins';
 import { ProcessedHtmlProps } from 'types/processed-html-props';
 import { usePageContentProps } from 'store/pageContext';
 import { TelephoneData } from 'components/parts/contact-option/ContactOptionPart';
 import { Icon } from 'components/_common/contact-option/icon/Icon';
 
-import sharedStyle from './ContactOption.module.scss';
-import alertStyle from './Alert.module.scss';
+import sharedStyle from 'components/_common/contact-option/ContactOption.module.scss';
+import alertStyle from 'components/_common/contact-option/Alert.module.scss';
 import style from './CallOption.module.scss';
 
 const contactURLs: Record<Audience, Record<'no' | 'en', string>> = {

public/gfx/google-search-nav-logo.png

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ChatOption } from './ChatOption';
+
+const meta = {
+    component: ChatOption,
+    parameters: {
+        backgrounds: {
+            values: [{ name: 'ContactBackground', value: '#f2f3f5' }],
+            default: 'ContactBackground',
+        },
+    },
+} satisfies Meta<typeof ChatOption>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { args: {} };
+
+export const WithAlert: Story = { args: { alertText: 'Alert!' } };

src/components/_common/alternativeAudience/AlternativeAudience.tsx

@@ -10,10 +10,10 @@ import { ParsedHtml } from 'components/_common/parsed-html/ParsedHtml';
 import TextWithIndicator from 'components/_common/textWithIndicator/TextWithIndicator';
 import { ChatData } from 'components/parts/contact-option/ContactOptionPart';
 import { Icon } from 'components/_common/contact-option/icon/Icon';
-import { OpeningInfo } from './opening-info/OpeningInfo';
+import { OpeningInfo } from 'components/_common/contact-option/openingInfo/OpeningInfo';
 
-import sharedStyle from './ContactOption.module.scss';
-import alertStyle from './Alert.module.scss';
+import sharedStyle from 'components/_common/contact-option/ContactOption.module.scss';
+import alertStyle from 'components/_common/contact-option/Alert.module.scss';
 
 export const ChatOption = (props: ChatData) => {
     const { ingress, title, alertText, regularOpeningHours, specialOpeningHours } = props;

src/components/_common/contact-option/CallOption.module.scss src/components/_common/contact-option/CallOption/CallOption.module.scss

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DefaultOption } from './DefaultOption';
+
+const meta = {
+    component: DefaultOption,
+    parameters: {
+        backgrounds: {
+            values: [{ name: 'ContactBackground', value: '#f2f3f5' }],
+            default: 'ContactBackground',
+        },
+    },
+} satisfies Meta<typeof DefaultOption>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const AidCentral: Story = { args: { channel: 'aidcentral' } };
+
+export const NavOffice: Story = { args: { channel: 'navoffice' } };

src/components/_common/contact-option/CallOption/CallOption.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { WriteOption } from './WriteOption';
+
+const meta = {
+    component: WriteOption,
+    parameters: {
+        backgrounds: {
+            values: [{ name: 'ContactBackground', value: '#f2f3f5' }],
+            default: 'ContactBackground',
+        },
+    },
+} satisfies Meta<typeof WriteOption>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithAlert: Story = { args: { alertText: 'Alert!' } };

src/components/_common/contact-option/CallOption.tsx src/components/_common/contact-option/CallOption/CallOption.tsx

@@ -9,8 +9,8 @@ import Config from 'config';
 import { WriteData } from 'components/parts/contact-option/ContactOptionPart';
 import { Icon } from 'components/_common/contact-option/icon/Icon';
 
-import sharedStyle from './ContactOption.module.scss';
-import alertStyle from './Alert.module.scss';
+import sharedStyle from 'components/_common/contact-option/ContactOption.module.scss';
+import alertStyle from 'components/_common/contact-option/Alert.module.scss';
 
 type Props = WriteData;
 

src/components/_common/contact-option/ChatOption/ChatOption.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { OpeningInfo } from './OpeningInfo';
+
+const meta = {
+    component: OpeningInfo,
+} satisfies Meta<typeof OpeningInfo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Closed: Story = {
+    args: {
+        regularOpeningHours: {
+            hours: [
+                { status: 'CLOSED', dayName: 'monday' },
+                { status: 'CLOSED', dayName: 'tuesday' },
+                { status: 'CLOSED', dayName: 'wednesday' },
+                { status: 'CLOSED', dayName: 'thursday' },
+                { status: 'CLOSED', dayName: 'friday' },
+                { status: 'CLOSED', dayName: 'saturday' },
+                { status: 'CLOSED', dayName: 'sunday' },
+            ],
+        },
+        specialOpeningHours: {
+            validFrom: '2023-03-01T00:00:00Z',
+            validTo: '2050-03-01T00:00:00Z',
+        },
+    },
+};
+
+export const Open: Story = {
+    args: {
+        regularOpeningHours: {
+            hours: [
+                { status: 'OPEN', dayName: 'monday', from: '00:00', to: '23:59' },
+                { status: 'OPEN', dayName: 'tuesday', from: '00:00', to: '23:59' },
+                { status: 'OPEN', dayName: 'wednesday', from: '00:00', to: '23:59' },
+                { status: 'OPEN', dayName: 'thursday', from: '00:00', to: '23:59' },
+                { status: 'OPEN', dayName: 'friday', from: '00:00', to: '23:59' },
+                { status: 'OPEN', dayName: 'saturday', from: '00:00', to: '23:59' },
+                { status: 'OPEN', dayName: 'sunday', from: '00:00', to: '23:59' },
+            ],
+        },
+        specialOpeningHours: {
+            validFrom: '2023-01-01T00:00:00Z',
+            validTo: '2050-01-01T00:00:00Z',
+        },
+    },
+};

src/components/_common/contact-option/ChatOption.tsx src/components/_common/contact-option/ChatOption/ChatOption.tsx

@@ -1,10 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { Loader } from '@navikt/ds-react';
-import { getCurrentOpeningHours } from 'components/_common/contact-option/opening-info/helpers/openingInfoUtils';
+import { getCurrentOpeningHours } from 'components/_common/contact-option/openingInfo/helpers/openingInfoUtils';
 import { usePageContentProps } from 'store/pageContext';
-import { OpeningHours } from 'components/_common/contact-option/opening-info/helpers/openingInfoTypes';
-import { getOpeningInfoText } from 'components/_common/contact-option/opening-info/helpers/openingInfoText';
-import { processOpeningHours } from 'components/_common/contact-option/opening-info/helpers/processOpeningHours';
+import { OpeningHours } from 'components/_common/contact-option/openingInfo/helpers/openingInfoTypes';
+import { getOpeningInfoText } from 'components/_common/contact-option/openingInfo/helpers/openingInfoText';
+import { processOpeningHours } from 'components/_common/contact-option/openingInfo/helpers/processOpeningHours';
 
 import TextWithIndicator from 'components/_common/textWithIndicator/TextWithIndicator';
 import {

src/components/_common/contact-option/DefaultOption.stories.tsx

@@ -1,6 +1,6 @@
-import { processOpeningHours } from 'components/_common/contact-option/opening-info/helpers/processOpeningHours';
-import { getCurrentOpeningHours } from 'components/_common/contact-option/opening-info/helpers/openingInfoUtils';
-import { getOpeningInfoText } from 'components/_common/contact-option/opening-info/helpers/openingInfoText';
+import { processOpeningHours } from 'components/_common/contact-option/openingInfo/helpers/processOpeningHours';
+import { getCurrentOpeningHours } from 'components/_common/contact-option/openingInfo/helpers/openingInfoUtils';
+import { getOpeningInfoText } from 'components/_common/contact-option/openingInfo/helpers/openingInfoText';
 import { translator } from 'translations';
 import {
     OpeningHourRegularRaw,

src/components/_common/contact-option/WriteOption/WriteOption.stories.tsx

@@ -4,14 +4,14 @@ import timezone from 'dayjs/plugin/timezone';
 import {
     OpeningHours,
     OpeningHoursOpen,
-} from 'components/_common/contact-option/opening-info/helpers/openingInfoTypes';
+} from 'components/_common/contact-option/openingInfo/helpers/openingInfoTypes';
 import { Language, translator } from 'translations';
 import { norwayTz } from 'utils/datetime';
 import {
     getOpeningHoursForDateTime,
     openingHourDateFormat,
     openingHourTimeFormat,
-} from 'components/_common/contact-option/opening-info/helpers/openingInfoUtils';
+} from 'components/_common/contact-option/openingInfo/helpers/openingInfoUtils';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);

src/components/_common/contact-option/WriteOption.tsx src/components/_common/contact-option/WriteOption/WriteOption.tsx

@@ -3,7 +3,7 @@ import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import { daysNameArray, norwayTz } from 'utils/datetime';
-import { OpeningHours } from 'components/_common/contact-option/opening-info/helpers/openingInfoTypes';
+import { OpeningHours } from 'components/_common/contact-option/openingInfo/helpers/openingInfoTypes';
 
 dayjs.extend(utc);
 dayjs.extend(timezone);

src/components/_common/contact-option/opening-info/OpeningInfo.module.scss src/components/_common/contact-option/openingInfo/OpeningInfo.module.scss

@@ -3,9 +3,9 @@ import customParseFormat from 'dayjs/plugin/customParseFormat';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import utc from 'dayjs/plugin/utc';
 import timezone from 'dayjs/plugin/timezone';
-import { openingHourDateFormat } from 'components/_common/contact-option/opening-info/helpers/openingInfoUtils';
+import { openingHourDateFormat } from 'components/_common/contact-option/openingInfo/helpers/openingInfoUtils';
 import { dayNameToIndex, daysNameArray } from 'utils/datetime';
-import { OpeningHours } from 'components/_common/contact-option/opening-info/helpers/openingInfoTypes';
+import { OpeningHours } from 'components/_common/contact-option/openingInfo/helpers/openingInfoTypes';
 import {
     OpeningHourRaw,
     OpeningHourRegularRaw,

src/components/_common/contact-option/openingInfo/OpeningInfo.stories.tsx

@@ -3,6 +3,18 @@
     flex-direction: column;
     margin: 1rem 0;
 
+    :global(.uxsignals-embed) {
+        h2 {
+            font-size: var(--a-font-size-heading-large) !important;
+            line-height: 1.5 !important;
+        }
+        p,
+        span {
+            font-size: var(--a-font-size-large) !important;
+            line-height: 1.5 !important;
+        }
+    }
+
     &:empty {
         display: none;
     }

src/components/_common/contact-option/opening-info/OpeningInfo.tsx src/components/_common/contact-option/openingInfo/OpeningInfo.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { Alert } from '@navikt/ds-react';
 import { ContactInformationProps } from 'types/content-props/contact-information-props';
-import { CallOption } from 'components/_common/contact-option/CallOption';
-import { WriteOption } from 'components/_common/contact-option/WriteOption';
-import { ChatOption } from 'components/_common/contact-option/ChatOption';
+import { CallOption } from 'components/_common/contact-option/CallOption/CallOption';
+import { WriteOption } from 'components/_common/contact-option/WriteOption/WriteOption';
+import { ChatOption } from 'components/_common/contact-option/ChatOption/ChatOption';
 
 import style from './ContactInformationPage.module.scss';
 

src/components/_common/contact-option/opening-info/helpers/iconUtils.tsx src/components/_common/contact-option/openingInfo/helpers/iconUtils.tsx

@@ -6,7 +6,7 @@ import { usePageContentProps } from 'store/pageContext';
 import {
     hoverFocusIcon,
     useHoverAndFocus,
-} from 'components/_common/contact-option/opening-info/helpers/iconUtils';
+} from 'components/_common/contact-option/openingInfo/helpers/iconUtils';
 
 import style from './SosialeMedier.module.scss';
 

src/components/_common/contact-option/opening-info/helpers/openingInfo.test.ts src/components/_common/contact-option/openingInfo/helpers/openingInfo.test.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Table, BodyLong } from '@navikt/ds-react';
 import { PublishingCalendarEntryProps } from 'types/content-props/publishing-calendar-props';
 import { ContentProps, ContentType } from 'types/content-props/_content-common';
+import { LenkeInline } from 'components/_common/lenke/LenkeInline';
 
 // eslint-disable-next-line css-modules/no-unused-class
 import style from './PublishingCalendar.module.scss';
@@ -12,6 +13,7 @@ interface PublishingCalendarEntryData {
     publDate: Date;
     day: string;
     month: string;
+    link?: string;
 }
 
 const monthShortName = [
@@ -47,6 +49,7 @@ const processEntry = (item: PublishingCalendarEntryProps): PublishingCalendarEnt
         publDate,
         day: publDate.getDate().toString() + '.',
         month: monthShortName[publDate.getMonth()],
+        link: item.data.link?._path,
     };
 };
 
@@ -56,6 +59,7 @@ export const PublishingCalendarEntryLegacyPart = (props: ContentProps) => {
     }
 
     const entry = processEntry(props);
+
     return (
         <Table.Row>
             <Table.DataCell>
@@ -66,7 +70,11 @@ export const PublishingCalendarEntryLegacyPart = (props: ContentProps) => {
             </Table.DataCell>
             <Table.DataCell>
                 <BodyLong className={style.dateInfo}>{entry.period}</BodyLong>
-                <BodyLong>{entry.displayName}</BodyLong>
+                {entry.link ? (
+                    <LenkeInline href={entry.link}>{entry.displayName}</LenkeInline>
+                ) : (
+                    <BodyLong>{entry.displayName}</BodyLong>
+                )}
             </Table.DataCell>
         </Table.Row>
     );

src/components/_common/contact-option/opening-info/helpers/openingInfoText.ts src/components/_common/contact-option/openingInfo/helpers/openingInfoText.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { DefaultOption } from 'components/_common/contact-option/DefaultOption';
-import { CallOption } from 'components/_common/contact-option/CallOption';
+import { CallOption } from 'components/_common/contact-option/CallOption/CallOption';
 import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
-import { WriteOption } from 'components/_common/contact-option/WriteOption';
+import { WriteOption } from 'components/_common/contact-option/WriteOption/WriteOption';
 import { usePageContentProps } from 'store/pageContext';
-import { ChatOption } from 'components/_common/contact-option/ChatOption';
+import { ChatOption } from 'components/_common/contact-option/ChatOption/ChatOption';
 import { PartComponentProps, PartType } from 'types/component-props/parts';
 import { OptionSetSingle } from 'types/util-types';
 import { DayName } from 'utils/datetime';

src/components/_common/contact-option/opening-info/helpers/openingInfoTypes.ts src/components/_common/contact-option/openingInfo/helpers/openingInfoTypes.ts

@@ -6,6 +6,9 @@ export type PublishingCalendarEntryProps = ContentCommonProps & {
     data: {
         date: string;
         period: string;
+        link?: {
+            _path: string;
+        };
     };
 };