Merge pull request #2029 from navikt/header-types-and-stories

Stories og types Themed Page Header

Author: bdahle

.storybook/modes.ts

@@ -0,0 +1,8 @@
+export const allModes = {
+    small: {
+        viewport: 'small',
+    },
+    large: {
+        viewport: 'large',
+    },
+};

.storybook/preview.tsx

@@ -1,9 +1,21 @@
 import type { Preview } from '@storybook/react';
+import { allModes } from '../.storybook/modes';
 import '../src/global.scss';
 
 const preview: Preview = {
     parameters: {
-        layout: 'centered',
+        viewport: {
+            viewports: {
+                small: { name: 'small', styles: { width: '390px', height: '100%' } },
+                large: { name: 'large', styles: { width: '820px', height: '100%' } },
+            },
+        },
+        chromatic: {
+            modes: {
+                small: allModes['small'],
+                large: allModes['large'],
+            },
+        },
     },
     tags: ['autodocs'],
 };

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 { 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!' } };

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

@@ -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>> = {

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

@@ -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/contact-option/ChatOption/ChatOption.stories.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/ChatOption.tsx src/components/_common/contact-option/ChatOption/ChatOption.tsx

@@ -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/DefaultOption.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/WriteOption/WriteOption.stories.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/WriteOption.tsx src/components/_common/contact-option/WriteOption/WriteOption.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/opening-info/OpeningInfo.module.scss src/components/_common/contact-option/openingInfo/OpeningInfo.module.scss

@@ -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/openingInfo/OpeningInfo.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/opening-info/OpeningInfo.tsx src/components/_common/contact-option/openingInfo/OpeningInfo.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/opening-info/helpers/iconUtils.tsx src/components/_common/contact-option/openingInfo/helpers/iconUtils.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/helpers/openingInfo.test.ts src/components/_common/contact-option/openingInfo/helpers/openingInfo.test.ts

@@ -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/opening-info/helpers/openingInfoText.ts src/components/_common/contact-option/openingInfo/helpers/openingInfoText.ts

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { DateLine } from './DateLine';
+
+const meta = {
+    component: DateLine,
+} satisfies Meta<typeof DateLine>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        content: {
+            modifiedTime: '2023-07-03T07:02:26.724412Z',
+            createdTime: '2023-07-03T07:02:26.724412Z',
+            language: 'no',
+        },
+    },
+};
+
+export const English: Story = {
+    args: {
+        content: {
+            ...Default.args.content,
+            language: 'en',
+        },
+    },
+};

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

@@ -0,0 +1,16 @@
+import { Detail } from '@navikt/ds-react';
+import { getPublishedAndModifiedString, GetPublishedAndModifiedStringProps } from 'utils/datetime';
+
+import styles from './DateLine.module.scss';
+
+export const DateLine = ({ content }: GetPublishedAndModifiedStringProps) => {
+    const dateString = getPublishedAndModifiedString({ content });
+
+    return (
+        <div className={styles.dateLine}>
+            <div className={styles.container}>
+                <Detail className={styles.dateLabel}>{dateString}</Detail>
+            </div>
+        </div>
+    );
+};

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { FeaturedHeader } from './FeaturedHeader';
+
+const meta = {
+    component: FeaturedHeader,
+} satisfies Meta<typeof FeaturedHeader>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        contentProps: {
+            displayName: 'displayNameFallback',
+            modifiedTime: '2023-07-03T07:02:26.724412Z',
+            createdTime: '2023-07-03T07:02:26.724412Z',
+            data: {
+                title: 'Featured Header',
+            },
+        },
+    },
+};