Merge pull request #2012 from navikt/rewrite-types-press

Stories press-landing

Author: bdahle

src/components/_common/metatags/HeadWithMetatags.tsx

@@ -40,7 +40,7 @@ const getCanonicalUrl = (content: ContentProps) => {
         return content.data.canonicalUrl;
     }
 
-    const path = getPublicPathname(content);
+    const path = getPublicPathname({ _path: content._path });
 
     return `${appOrigin}${path}`;
 };

src/components/_common/press-landing/PressNews.module.scss

@@ -13,7 +13,6 @@
 }
 
 .newsList {
-    list-style-type: none;
     margin: 1rem 0 2rem 0;
     padding: 0;
 }

src/components/_common/press-landing/PressNews.tsx

@@ -7,7 +7,7 @@ import { PressNewsItem } from './PressNewsItem';
 import styles from './PressNews.module.scss';
 
 type PressNewsProps = {
-    page: PressLandingPageProps;
+    page: Pick<PressLandingPageProps, 'language' | 'data'>;
 };
 
 export const PressNews = (props: PressNewsProps) => {

src/components/_common/press-landing/PressNewsItem.module.scss

@@ -2,6 +2,7 @@
 
 .newsItem {
     margin-bottom: 1.5rem;
+    list-style-type: none;
 
     a {
         text-decoration-thickness: 0.05em;

src/components/_common/press-landing/PressNewsItem.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ContentType } from 'types/content-props/_content-common';
+import { PressNewsItem } from './PressNewsItem';
+
+const meta = {
+    component: PressNewsItem,
+    args: {
+        newsItem: {
+            _path: '',
+            language: 'no',
+            type: ContentType.MainArticle,
+            displayName: '1 av 5 står utenfor arbeidslivet',
+            data: {
+                ingress:
+                    '685 000 personer mellom 20 og 66 år sto utenfor arbeid eller utdanning ved utgangen av 2023, viser nye tall fra NAV.',
+            },
+            createdTime: '2023-03-01T00:00:00Z',
+            publish: { from: '2023-03-02T00:00:00Z', first: '2023-03-03T00:00:00Z' },
+        },
+    },
+} satisfies Meta<typeof PressNewsItem>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const News = {
+    args: {
+        newsItem: {
+            ...meta.args.newsItem,
+            data: {
+                ...meta.args.newsItem.data,
+                contentType: 'news',
+            },
+        },
+    },
+};
+
+export const English = { args: { newsItem: { ...meta.args.newsItem, language: 'en' } } };
+
+export const EnglishNews = {
+    args: {
+        newsItem: {
+            ...News.args.newsItem,
+            language: 'en',
+            data: {
+                ...meta.args.newsItem.data,
+                contentType: 'news',
+            },
+        },
+    },
+};
+
+export const Nynorsk = { args: { newsItem: { ...meta.args.newsItem, language: 'nn' } } };
+
+export const NynorskNews = {
+    args: {
+        newsItem: {
+            ...News.args.newsItem,
+            language: 'nn',
+            data: {
+                ...meta.args.newsItem.data,
+                contentType: 'news',
+            },
+        },
+    },
+};

src/components/_common/press-landing/PressNewsItem.tsx

@@ -14,28 +14,35 @@ import newsIcon from '/public/gfx/news-paper-icon-black.svg';
 import style from './PressNewsItem.module.scss';
 
 type Props = {
-    newsItem: ContentProps;
+    newsItem: Pick<
+        ContentProps,
+        'language' | 'type' | 'data' | '_path' | 'displayName' | 'publish' | 'createdTime'
+    >;
 };
 
+function hasContentType(data: any): data is { contentType: string } {
+    return data && typeof data.contentType === 'string';
+}
+
 export const PressNewsItem = ({ newsItem }: Props) => {
     const { language } = newsItem;
     const getTranslations = translator('pressLanding', language);
 
-    const getTaglineElements = (newsItem: ContentProps) => {
+    const getTaglineElements = ({ newsItem }: Props) => {
         if (newsItem.type === ContentType.MainArticle) {
-            const isNews = newsItem.data.contentType === 'news';
+            const isNews = hasContentType(newsItem.data) && newsItem.data.contentType === 'news';
             const icon = isNews ? newsIcon : pressIcon;
             const tagName = getTranslations(isNews ? 'news' : 'press');
             return { icon, tagName };
         }
         return { icon: null, tagName: null };
     };
 
-    const { icon, tagName } = getTaglineElements(newsItem);
+    const { icon, tagName } = getTaglineElements({ newsItem });
 
     return (
         <li key={newsItem._path} className={style.newsItem}>
-            <LenkeBase href={getPublicPathname(newsItem)}>
+            <LenkeBase href={getPublicPathname({ _path: newsItem._path })}>
                 <Heading level={'3'} size={'medium'}>
                     {newsItem.displayName}
                 </Heading>

src/components/_common/press-landing/PressShortcuts.tsx

@@ -6,7 +6,7 @@ import { getPublicPathname } from 'utils/urls';
 import styles from './PressShortcuts.module.scss';
 
 type PressShortcutsProps = {
-    page: PressLandingPageProps;
+    page: Pick<PressLandingPageProps, 'language' | 'data'>;
 };
 
 export const PressShortcuts = (props: PressShortcutsProps) => {
@@ -30,7 +30,7 @@ export const PressShortcuts = (props: PressShortcutsProps) => {
                         return (
                             <li key={shortcut._path}>
                                 <LinkPanel
-                                    href={getPublicPathname(shortcut)}
+                                    href={getPublicPathname({ _path: shortcut._path })}
                                     className={styles.shortcutItem}
                                 >
                                     {shortcut.displayName}

src/components/_common/press-landing/PressTopSection.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { PressTopSection } from './PressTopSection';
+
+const meta = {
+    component: PressTopSection,
+} satisfies Meta<typeof PressTopSection>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        page: {
+            displayName: 'PressTopSection',
+            data: {
+                title: 'Presse',
+                pressCall: {
+                    processedHtml:
+                        '<h2>Pressevakt</h2>\n\n<p><strong>E-post</strong>: <a href="mailto:[email protected]">[email protected]</a><br />\n<strong>Telefon</strong>: <a href="tel:40003144">40 00 31 44</a> (SMS besvares ikke) <br />\n<a href="https://www.nav.no/samarbeidspartner/pressevakt#pressevakt-direktoratet">Åpningstider pressevakt m.m.</a> </p>\n\n<p><a href="https://www.nav.no/samarbeidspartner/pressevakt#pressevakt-fylke">Pressevakter i fylkene</a></p>\n',
+                    macros: [],
+                },
+            },
+        },
+    },
+};

src/components/_common/press-landing/PressTopSection.tsx

@@ -5,7 +5,7 @@ import { ParsedHtml } from 'components/_common/parsed-html/ParsedHtml';
 import styles from './PressTopSection.module.scss';
 
 type PressTopSectionProps = {
-    page: PressLandingPageProps;
+    page: Pick<PressLandingPageProps, 'displayName' | 'data'>;
 };
 
 export const PressTopSection = (props: PressTopSectionProps) => {

src/utils/urls.ts

@@ -114,7 +114,8 @@ export function getMediaUrl(
     );
 }
 
-export const getPublicPathname = (content: ContentProps) => stripXpPathPrefix(content._path);
+export const getPublicPathname = ({ _path }: Pick<ContentProps, '_path'>) =>
+    stripXpPathPrefix(_path);
 
 export const isUUID = (id: string) =>
     id && /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/i.test(id);