init

Author: taniaholst

packages/nextjs/src/components/ContentMapper.tsx

@@ -30,6 +30,7 @@ import { FormIntermediateStepPage } from './pages/form-intermediate-step-page/Fo
 import { CalculatorPage } from './pages/calculator-page/CalculatorPage';
 import { AlertInContextPage } from './pages/alert-in-context-page/AlertInContextPage';
 import { OfficePage } from './pages/office-page/OfficePage';
+import { ContactStepPage } from './pages/contact-step-page/ContactStepPage';
 
 const contentToReactComponent: {
     [key in ContentType]?: React.FunctionComponent<ContentProps<key>>;
@@ -61,6 +62,7 @@ const contentToReactComponent: {
     [ContentType.Calculator]: CalculatorPage,
     [ContentType.UserTestsConfig]: UserTestsConfigPreviewPage,
     [ContentType.AlertInContext]: AlertInContextPage,
+    [ContentType.ContactStepPage]: ContactStepPage,
 
     [ContentType.AreaPage]: DynamicPage,
     [ContentType.FrontPage]: DynamicPage,

packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx

@@ -0,0 +1,38 @@
+import { BodyShort, Heading } from '@navikt/ds-react';
+import { Illustration } from 'components/_common/illustration/Illustration';
+import { ProductDataMixin } from 'types/component-props/_mixins';
+import { ContentProps } from 'types/content-props/_content-common';
+
+// type Props = {
+//     pageProps: Pick<ContentProps, 'type'> & {
+//         data: Pick<ProductDataMixin, 'title' | 'illustration' | 'textAboveTitle'>;        // data: Pick<ProductDataMixin, 'title'>;
+//     };
+// };
+
+type Props = {
+        data: Pick<
+            ProductDataMixin,
+            'title' | 'illustration'
+        >;
+    textAboveTitle?: string;
+};
+
+export const ContactPageHeader = (props: Props) => {
+    // const { textAboveTitle } = contentProps;
+    const { title, illustration } = props.data;
+
+    //const { pageProps } = props;
+    //const { textAboveTitle, title, illustration } = pageProps.data;
+
+    
+
+    return (
+        <div>
+            <Illustration illustration={illustration} />
+            <BodyShort textColor="subtle">{props.textAboveTitle}</BodyShort>
+            <Heading level="1" size="large" spacing>
+                {title}
+            </Heading>
+        </div>
+    );
+};

packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { ContentCommonProps, ContentType } from '../../../types/content-props/_content-common';
+import { PictogramsProps } from '../../../types/content-props/pictograms';
+import { ContactPageHeader } from '../../_common/headers/contactPageHeader/ContactPageHeader';
+import { ParsedHtml } from '../../_common/parsedHtml/ParsedHtml';
+
+export type ContactStepPageProps = ContentCommonProps & {
+    type: ContentType.ContactStepPage;
+    data: {
+        title: string;
+        illustration: PictogramsProps;
+        textAboveTitle?: string;
+        html: string;
+    };
+};
+
+export const ContactStepPage = (props: ContactStepPageProps) => {
+    const { data, type } = props;
+    const { title, illustration, textAboveTitle, html } = data;
+
+    return (
+        <div>
+            <ContactPageHeader
+                pageProps={{
+                    type,
+                    data: {
+                        title,
+                        illustration,
+                        textAboveTitle,
+                    },
+                }}
+            />
+            <ParsedHtml htmlProps={html} />
+
+            {/* <ul>
+                {currentStepData.steps.map((step) => (
+                    <li key={step.label}>
+                        <FormIntermediateStepLink
+                            {...step}
+                            analyticsComponent={'mellomsteg'}
+                            analyticsLinkGroup={currentStepData.stepsHeadline}
+                            analyticsLabel={step.label}
+                        />
+                    </li>
+                ))}
+            </ul> */}
+
+            {/*        <ul className={style.stepList}>*/}
+            {/*            {currentStepData.steps.map((step) => (*/}
+            {/*                <li key={step.label} className={style.stepItem}>*/}
+            {/*                    <FormIntermediateStepLink*/}
+            {/*                        {...step}*/}
+            {/*                        className={style.stepAction}*/}
+            {/*                        analyticsComponent={'mellomsteg'}*/}
+            {/*                        analyticsLinkGroup={currentStepData.stepsHeadline}*/}
+            {/*                        analyticsLabel={step.label}*/}
+            {/*                    />*/}
+            {/*                </li>*/}
+            {/*            ))}*/}
+            {/*        </ul>*/}
+            {/*    </div>*/}
+            {/*    {backUrl && (*/}
+            {/*        <div className={style.buttonGroup}>*/}
+            {/*            <Button*/}
+            {/*                href={backUrl}*/}
+            {/*                shallow={true}*/}
+            {/*                as={LenkeBase}*/}
+            {/*                variant={'tertiary'}*/}
+            {/*                className={style.backButton}*/}
+            {/*                analyticsComponent={'mellomsteg'}*/}
+            {/*                analyticsLinkGroup={currentStepData.stepsHeadline}*/}
+            {/*                analyticsLabel={'Tilbake'}*/}
+            {/*            >*/}
+            {/*                {getTranslations('back')}*/}
+            {/*            </Button>*/}
+            {/*        </div>*/}
+            {/*    )}*/}
+            {/*</div>*/}
+        </div>
+    );
+};

packages/nextjs/src/types/content-props/_content-common.ts

@@ -44,6 +44,7 @@ import { AreaPageProps, FrontPageNestedProps, FrontPageProps } from './index-pag
 import { FormDetailsPageProps } from './form-details';
 import { FormIntermediateStepPageProps } from './form-intermediate-step';
 import { FallbackPageProps } from './fallback-page-props';
+import { ContactStepPageProps } from '../../components/pages/contact-step-page/ContactStepPage';
 
 export enum ContentType {
     Error = 'error',
@@ -93,6 +94,7 @@ export enum ContentType {
     AlertInContext = 'no.nav.navno:alert-in-context',
     OfficePage = 'no.nav.navno:office-page',
     FallbackPage = 'no.nav.navno:fallback-page',
+    ContactStepPage = 'no.nav.navno:contact-step-page',
 }
 
 export const innholdsTypeMap: Record<ContentType, string> = {
@@ -137,6 +139,7 @@ export const innholdsTypeMap: Record<ContentType, string> = {
     [ContentType.Video]: 'Qbrick Video',
     [ContentType.AlertInContext]: 'Varsel i kontekst',
     [ContentType.OfficePage]: 'Kontorside (gammel)',
+    [ContentType.ContactStepPage]: 'Mellomsteg for kontaktside',
 
     [ContentType.Error]: `Ugyldig type: [${ContentType.Error}]`,
     [ContentType.Site]: `Ugyldig type: [${ContentType.Site}]`,
@@ -209,6 +212,7 @@ type SpecificContentProps =
     | SiteProps
     | TemplateProps
     | ContentListProps
+    | ContactStepPageProps
     | ErrorProps
     | ExternalLinkProps
     | InternalLinkProps