From 0d68c739d8fd3219957b3513eb6184137649e82e Mon Sep 17 00:00:00 2001 From: taniaholst Date: Mon, 10 Mar 2025 13:59:52 +0100 Subject: [PATCH 01/42] init --- .../nextjs/src/components/ContentMapper.tsx | 2 + .../contactPageHeader/ContactPageHeader.tsx | 38 +++++++++ .../contact-step-page/ContactStepPage.tsx | 81 +++++++++++++++++++ .../types/content-props/_content-common.ts | 4 + 4 files changed, 125 insertions(+) create mode 100644 packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx create mode 100644 packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx diff --git a/packages/nextjs/src/components/ContentMapper.tsx b/packages/nextjs/src/components/ContentMapper.tsx index 3b9b05875..31065a4f7 100644 --- a/packages/nextjs/src/components/ContentMapper.tsx +++ b/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>; @@ -61,6 +62,7 @@ const contentToReactComponent: { [ContentType.Calculator]: CalculatorPage, [ContentType.UserTestsConfig]: UserTestsConfigPreviewPage, [ContentType.AlertInContext]: AlertInContextPage, + [ContentType.ContactStepPage]: ContactStepPage, [ContentType.AreaPage]: DynamicPage, [ContentType.FrontPage]: DynamicPage, diff --git a/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx b/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx new file mode 100644 index 000000000..11287ffed --- /dev/null +++ b/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 & { +// data: Pick; // data: Pick; +// }; +// }; + +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 ( +
+ + {props.textAboveTitle} + + {title} + +
+ ); +}; diff --git a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx new file mode 100644 index 000000000..fc21c3b2b --- /dev/null +++ b/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 ( +
+ + + + {/*
    + {currentStepData.steps.map((step) => ( +
  • + +
    • + ))} +
*/} + + {/*
    */} + {/* {currentStepData.steps.map((step) => (*/} + {/*
  • */} + {/* */} + {/*
    • */} + {/* ))}*/} + {/*
*/} + {/*
*/} + {/* {backUrl && (*/} + {/*
*/} + {/* */} + {/* {getTranslations('back')}*/} + {/* */} + {/*
*/} + {/* )}*/} + {/**/} + + ); +}; \ No newline at end of file diff --git a/packages/nextjs/src/types/content-props/_content-common.ts b/packages/nextjs/src/types/content-props/_content-common.ts index 837d9a114..887a49fc8 100644 --- a/packages/nextjs/src/types/content-props/_content-common.ts +++ b/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 = { @@ -137,6 +139,7 @@ export const innholdsTypeMap: Record = { [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 From f7927d185f5846fb0310429416b1ca77bcde9728 Mon Sep 17 00:00:00 2001 From: taniaholst Date: Mon, 10 Mar 2025 14:01:14 +0100 Subject: [PATCH 02/42] init --- .../headers/contactPageHeader/ContactPageHeader.tsx | 1 - .../pages/contact-step-page/ContactStepPage.tsx | 8 ++++---- .../nextjs/src/types/content-props/_content-common.ts | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx b/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx index 11287ffed..ac8b89ccf 100644 --- a/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx +++ b/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx @@ -1,7 +1,6 @@ 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 & { diff --git a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx index fc21c3b2b..6dbac8c8d 100644 --- a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx +++ b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx @@ -1,8 +1,8 @@ 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'; +import { ContentCommonProps, ContentType } from 'types/content-props/_content-common'; +import { PictogramsProps } from 'types/content-props/pictograms'; +import { ContactPageHeader } from 'components/_common/headers/contactPageHeader/ContactPageHeader'; +import { ParsedHtml } from 'components/_common/parsedHtml/ParsedHtml'; export type ContactStepPageProps = ContentCommonProps & { type: ContentType.ContactStepPage; diff --git a/packages/nextjs/src/types/content-props/_content-common.ts b/packages/nextjs/src/types/content-props/_content-common.ts index 887a49fc8..98bffe8ef 100644 --- a/packages/nextjs/src/types/content-props/_content-common.ts +++ b/packages/nextjs/src/types/content-props/_content-common.ts @@ -9,6 +9,7 @@ import { TemplateProps } from 'types/content-props/template-props'; import { SiteProps } from 'types/content-props/site-props'; import { FormsOverviewProps } from 'types/content-props/forms-overview'; import { OverviewPageProps } from 'types/content-props/overview-props'; +import { ContactStepPageProps } from 'components/pages/contact-step-page/ContactStepPage'; import { ExternalLinkProps } from './external-link-props'; import { InternalLinkProps } from './internal-link-props'; import { ContentListProps } from './content-list-props'; @@ -44,7 +45,6 @@ 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', From fe63e806bc87a63ea2bcf18a3baa00bad8b2a0b4 Mon Sep 17 00:00:00 2001 From: bdahle Date: Tue, 11 Mar 2025 12:12:28 +0100 Subject: [PATCH 03/42] Refactor ContactStepPage component with enhanced type safety and step rendering --- .../contact-step-page/ContactStepPage.tsx | 157 +++++++++++------- 1 file changed, 93 insertions(+), 64 deletions(-) diff --git a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx index 6dbac8c8d..29708e192 100644 --- a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx +++ b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx @@ -1,81 +1,110 @@ import React from 'react'; -import { ContentCommonProps, ContentType } from 'types/content-props/_content-common'; +import { ContentCommonProps } from 'types/content-props/_content-common'; import { PictogramsProps } from 'types/content-props/pictograms'; -import { ContactPageHeader } from 'components/_common/headers/contactPageHeader/ContactPageHeader'; -import { ParsedHtml } from 'components/_common/parsedHtml/ParsedHtml'; + +// Type for the external next step +export interface ExternalNextStep { + externalUrl: string; +} + +// Type for the internal next step +export interface InternalNextStep { + internalContent: string; // UUID reference to internal content +} + +// Using discriminated unions for better type safety +export type NextStepExternal = { + external: ExternalNextStep; + internal?: never; + _selected: 'external'; +}; + +export type NextStepInternal = { + external?: never; + internal: InternalNextStep; + _selected: 'internal'; +}; + +// Union type for the next step +export type NextStep = NextStepExternal | NextStepInternal; + +// Type for an individual step +export interface Step { + label: string; + explanation: string; + nextStep: NextStep; +} + +// Type for the entire data structure +// export interface StepsData { +// steps: Step[]; +// title: string; +// sortTitle: string; +// illustration: string; // UUID reference to an illustration +// customPath: string; +// } export type ContactStepPageProps = ContentCommonProps & { - type: ContentType.ContactStepPage; + // type: ContentType.ContactStepPage; data: { title: string; illustration: PictogramsProps; textAboveTitle?: string; html: string; + steps: Step[]; }; }; export const ContactStepPage = (props: ContactStepPageProps) => { - const { data, type } = props; - const { title, illustration, textAboveTitle, html } = data; + const { data } = props; + const { title, illustration, textAboveTitle, html, steps } = data; return ( -
- - - - {/*
    - {currentStepData.steps.map((step) => ( -
  • - -
    • - ))} -
*/} - - {/*
    */} - {/* {currentStepData.steps.map((step) => (*/} - {/*
  • */} - {/* */} - {/*
    • */} - {/* ))}*/} - {/*
*/} - {/*
*/} - {/* {backUrl && (*/} - {/*
*/} - {/* */} - {/* {getTranslations('back')}*/} - {/* */} - {/*
*/} - {/* )}*/} - {/**/} +
+ {illustration && ( +
{/* Render illustration component */}
+ )} + + {textAboveTitle &&
{textAboveTitle}
} + +

{title}

+ + {html &&
} + + {steps && steps.length > 0 && ( +
+
    + {steps.map((step, index) => ( +
  • +

    {step.label}

    +

    {step.explanation}

    + + {step.nextStep._selected === 'external' && + step.nextStep.external && ( + + Gå til ekstern side + + )} + + {step.nextStep._selected === 'internal' && + step.nextStep.internal && ( + + Gå til intern side + + )} +
    • + ))} +
+
+ )}
); -}; \ No newline at end of file +}; From e24d35987efb1b2c5e94a67e3fdd28293c365f9e Mon Sep 17 00:00:00 2001 From: taniaholst Date: Tue, 11 Mar 2025 14:48:32 +0100 Subject: [PATCH 04/42] oppsett header og htmlarea --- .../ContactPageHeader.module.scss | 20 ++++++ .../contactPageHeader/ContactPageHeader.tsx | 44 ++++++------- .../ContactStepPage.module.scss | 3 + .../contact-step-page/ContactStepPage.tsx | 63 +++---------------- .../types/content-props/_content-common.ts | 3 +- 5 files changed, 54 insertions(+), 79 deletions(-) create mode 100644 packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.module.scss create mode 100644 packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.module.scss diff --git a/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.module.scss b/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.module.scss new file mode 100644 index 000000000..30b0fb567 --- /dev/null +++ b/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.module.scss @@ -0,0 +1,20 @@ +.contactPageHeader { + display: flex; + justify-content: center; + padding-top: 1.25rem; + padding-bottom: 1.25rem; + border-bottom: 4px solid transparent; + + .textAboveTitle { + font-family: Source Sans Pro; + font-weight: 400; + font-size: 20px; + line-height: 28px; + letter-spacing: -0.1%; + } + + .header { + font-size: 40px; + line-height: 52px; + } +} diff --git a/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx b/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx index ac8b89ccf..891041525 100644 --- a/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx +++ b/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx @@ -1,37 +1,33 @@ import { BodyShort, Heading } from '@navikt/ds-react'; import { Illustration } from 'components/_common/illustration/Illustration'; import { ProductDataMixin } from 'types/component-props/_mixins'; - -// type Props = { -// pageProps: Pick & { -// data: Pick; // data: Pick; -// }; -// }; +import { ContentProps } from 'types/content-props/_content-common'; +import style from './ContactPageHeader.module.scss'; type Props = { - data: Pick< - ProductDataMixin, - 'title' | 'illustration' - >; + contentProps: Pick & { + data: Pick; + }; textAboveTitle?: string; }; -export const ContactPageHeader = (props: Props) => { - // const { textAboveTitle } = contentProps; - const { title, illustration } = props.data; - - //const { pageProps } = props; - //const { textAboveTitle, title, illustration } = pageProps.data; - - +export const ContactPageHeader = ({ contentProps, textAboveTitle }: Props) => { + const { data } = contentProps; + const { title, illustration } = data; return ( -
- - {props.textAboveTitle} - - {title} - +
+
+ +
+
+ + {textAboveTitle} + + + {title} + +
); }; diff --git a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.module.scss b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.module.scss new file mode 100644 index 000000000..d7f2baca6 --- /dev/null +++ b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.module.scss @@ -0,0 +1,3 @@ +.contactStepPage { + padding-bottom: 1rem; +} diff --git a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx index 6dbac8c8d..351dff7b5 100644 --- a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx +++ b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx @@ -1,8 +1,9 @@ import React from 'react'; -import { ContentCommonProps, ContentType } from 'types/content-props/_content-common'; -import { PictogramsProps } from 'types/content-props/pictograms'; import { ContactPageHeader } from 'components/_common/headers/contactPageHeader/ContactPageHeader'; import { ParsedHtml } from 'components/_common/parsedHtml/ParsedHtml'; +import { ContentType, ContentCommonProps } from 'types/content-props/_content-common'; +import { PictogramsProps } from 'types/content-props/pictograms'; +import style from './ContactStepPage.module.scss'; export type ContactStepPageProps = ContentCommonProps & { type: ContentType.ContactStepPage; @@ -15,67 +16,21 @@ export type ContactStepPageProps = ContentCommonProps & { }; export const ContactStepPage = (props: ContactStepPageProps) => { - const { data, type } = props; - const { title, illustration, textAboveTitle, html } = data; + const { data } = props; + const { title, html, textAboveTitle, illustration } = data; return ( -
+
- - {/*
    - {currentStepData.steps.map((step) => ( -
  • - -
    • - ))} -
*/} - - {/*
    */} - {/* {currentStepData.steps.map((step) => (*/} - {/*
  • */} - {/* */} - {/*
    • */} - {/* ))}*/} - {/*
*/} - {/*
*/} - {/* {backUrl && (*/} - {/*
*/} - {/* */} - {/* {getTranslations('back')}*/} - {/* */} - {/*
*/} - {/* )}*/} - {/*
*/}
); -}; \ No newline at end of file +}; diff --git a/packages/nextjs/src/types/content-props/_content-common.ts b/packages/nextjs/src/types/content-props/_content-common.ts index 98bffe8ef..b9b27b2e3 100644 --- a/packages/nextjs/src/types/content-props/_content-common.ts +++ b/packages/nextjs/src/types/content-props/_content-common.ts @@ -251,7 +251,8 @@ type SpecificContentProps = | FormDetailsPageProps | FormIntermediateStepPageProps | FormsOverviewProps - | FallbackPageProps; + | FallbackPageProps + | ContactStepPageProps; export type ContentProps = ContentCommonProps & SpecificContentProps; From 922578ba7ee1013139e050845867d450e2e67742 Mon Sep 17 00:00:00 2001 From: taniaholst Date: Wed, 12 Mar 2025 13:39:51 +0100 Subject: [PATCH 05/42] Styling for header med piktogram og ingress --- .../ContactPageHeader.module.scss | 4 +- .../contactPageHeader/ContactPageHeader.tsx | 19 +++------- .../ContactStepPage.module.scss | 38 +++++++++++++++++++ .../contact-step-page/ContactStepPage.tsx | 26 ++++++++----- packages/nextjs/src/utils/appearance.ts | 1 + 5 files changed, 62 insertions(+), 26 deletions(-) diff --git a/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.module.scss b/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.module.scss index 30b0fb567..e9d513ff5 100644 --- a/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.module.scss +++ b/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.module.scss @@ -1,9 +1,7 @@ .contactPageHeader { display: flex; + flex-direction: column; justify-content: center; - padding-top: 1.25rem; - padding-bottom: 1.25rem; - border-bottom: 4px solid transparent; .textAboveTitle { font-family: Source Sans Pro; diff --git a/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx b/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx index 891041525..ef37d6227 100644 --- a/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx +++ b/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.tsx @@ -1,5 +1,4 @@ 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'; import style from './ContactPageHeader.module.scss'; @@ -13,21 +12,15 @@ type Props = { export const ContactPageHeader = ({ contentProps, textAboveTitle }: Props) => { const { data } = contentProps; - const { title, illustration } = data; return (
-
- -
-
- - {textAboveTitle} - - - {title} - -
+ + {textAboveTitle} + + + {data.title} +
); }; diff --git a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.module.scss b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.module.scss index d7f2baca6..348b0cbbf 100644 --- a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.module.scss +++ b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.module.scss @@ -1,3 +1,41 @@ +@use 'common' as common; + .contactStepPage { padding-bottom: 1rem; + display: grid; + row-gap: var(--a-spacing-5); + margin: 1.25rem auto var(--a-spacing-10); + grid-template-areas: + 'header' + 'content'; + + @media #{common.$mq-screen-tablet-and-desktop} { + grid-template-columns: 6rem 2fr 6rem; + grid-template-areas: + 'pictogram header .' + '. content .'; + column-gap: var(--a-spacing-10); + } +} + +.pictogram { + grid-area: pictogram; +} +.header { + grid-area: header; +} + +.content { + grid-area: content; + + & > * { + border-radius: common.$border-radius-large; + } +} + +/* Innrykk i ekspanderende paneler */ +.header :global(.navds-expansioncard__content) { + @media #{common.$mq-screen-desktop} { + padding-left: 82px; + } } diff --git a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx index 351dff7b5..9a29889cf 100644 --- a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx +++ b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { ContactPageHeader } from 'components/_common/headers/contactPageHeader/ContactPageHeader'; import { ParsedHtml } from 'components/_common/parsedHtml/ParsedHtml'; import { ContentType, ContentCommonProps } from 'types/content-props/_content-common'; +import { IllustrationStatic } from 'components/_common/illustration/static/IllustrationStatic'; import { PictogramsProps } from 'types/content-props/pictograms'; import style from './ContactStepPage.module.scss'; @@ -21,16 +22,21 @@ export const ContactStepPage = (props: ContactStepPageProps) => { return (
- - + +
+ +
+
+ +
); }; diff --git a/packages/nextjs/src/utils/appearance.ts b/packages/nextjs/src/utils/appearance.ts index fdbdce8bd..45c75ec09 100644 --- a/packages/nextjs/src/utils/appearance.ts +++ b/packages/nextjs/src/utils/appearance.ts @@ -11,6 +11,7 @@ const contentTypeWithWhiteBackground: ReadonlySet = new Set([ ContentType.ThemedArticlePage, ContentType.GenericPage, ContentType.SituationPage, + ContentType.ContactStepPage, ]); const contentTypesWithWhiteHeader: ReadonlySet = new Set([ From 00f843c0c7fe1b08c685536d1c8d3080ae3cbac4 Mon Sep 17 00:00:00 2001 From: taniaholst Date: Wed, 12 Mar 2025 13:46:02 +0100 Subject: [PATCH 06/42] sonar --- .../headers/contactPageHeader/ContactPageHeader.module.scss | 2 +- packages/nextjs/src/types/content-props/_content-common.ts | 3 +-- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.module.scss b/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.module.scss index e9d513ff5..90044a3c3 100644 --- a/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.module.scss +++ b/packages/nextjs/src/components/_common/headers/contactPageHeader/ContactPageHeader.module.scss @@ -4,7 +4,7 @@ justify-content: center; .textAboveTitle { - font-family: Source Sans Pro; + color: var(--a-text-subtle); font-weight: 400; font-size: 20px; line-height: 28px; diff --git a/packages/nextjs/src/types/content-props/_content-common.ts b/packages/nextjs/src/types/content-props/_content-common.ts index b9b27b2e3..98bffe8ef 100644 --- a/packages/nextjs/src/types/content-props/_content-common.ts +++ b/packages/nextjs/src/types/content-props/_content-common.ts @@ -251,8 +251,7 @@ type SpecificContentProps = | FormDetailsPageProps | FormIntermediateStepPageProps | FormsOverviewProps - | FallbackPageProps - | ContactStepPageProps; + | FallbackPageProps; export type ContentProps = ContentCommonProps & SpecificContentProps; From c8fc5a078f3360db08c1ab0741e3ef9b36ab76ba Mon Sep 17 00:00:00 2001 From: taniaholst <21334782+taniaholst@users.noreply.github.com> Date: Wed, 12 Mar 2025 12:52:28 +0000 Subject: [PATCH 07/42] Update screenshots --- test-results/.last-run.json | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 test-results/.last-run.json diff --git a/test-results/.last-run.json b/test-results/.last-run.json new file mode 100644 index 000000000..5fca3f84b --- /dev/null +++ b/test-results/.last-run.json @@ -0,0 +1,4 @@ +{ + "status": "failed", + "failedTests": [] +} \ No newline at end of file From fda82a364561c79f305ad0c0f13efe79bc9d41f7 Mon Sep 17 00:00:00 2001 From: taniaholst <21334782+taniaholst@users.noreply.github.com> Date: Wed, 12 Mar 2025 12:59:53 +0000 Subject: [PATCH 08/42] Update screenshots --- test-results/.last-run.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test-results/.last-run.json b/test-results/.last-run.json index 5fca3f84b..cbcc1fbac 100644 --- a/test-results/.last-run.json +++ b/test-results/.last-run.json @@ -1,4 +1,4 @@ { - "status": "failed", + "status": "passed", "failedTests": [] } \ No newline at end of file From cbaedc09450de76df4317eab5f91b09b3a0ebcea Mon Sep 17 00:00:00 2001 From: bdahle Date: Wed, 12 Mar 2025 15:15:19 +0100 Subject: [PATCH 09/42] intern lenke funker --- .../pages/contact-step-page/ContactStepPage.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx index a7510a7d6..5be996c84 100644 --- a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx +++ b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx @@ -5,6 +5,8 @@ import { ParsedHtml } from 'components/_common/parsedHtml/ParsedHtml'; import { ContentType, ContentCommonProps } from 'types/content-props/_content-common'; import { IllustrationStatic } from 'components/_common/illustration/static/IllustrationStatic'; import { PictogramsProps } from 'types/content-props/pictograms'; +import { stripXpPathPrefix } from 'utils/urls'; +import { LenkeBase } from 'components/_common/lenke/lenkeBase/LenkeBase'; import style from './ContactStepPage.module.scss'; // Type for the external next step @@ -63,6 +65,8 @@ export type ContactStepPageProps = ContentCommonProps & { export const ContactStepPage = (props: ContactStepPageProps) => { const { data } = props; const { title, illustration, textAboveTitle, html, steps } = data; + // console.log('internalContent', steps[0].nextStep?.internal?.internalContent); + // console.log('steps', steps); return ( <> @@ -101,12 +105,14 @@ export const ContactStepPage = (props: ContactStepPageProps) => { {step.nextStep._selected === 'internal' && step.nextStep.internal && ( - Gå til intern side - + )} ))} From c5e044bff388a49a44c08272bb150997e4b47c06 Mon Sep 17 00:00:00 2001 From: bdahle Date: Wed, 12 Mar 2025 15:20:56 +0100 Subject: [PATCH 10/42] fjern boilerplate-html --- .../contact-step-page/ContactStepPage.tsx | 128 +++++++----------- 1 file changed, 51 insertions(+), 77 deletions(-) diff --git a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx index 5be996c84..53f5f4345 100644 --- a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx +++ b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx @@ -42,15 +42,6 @@ export interface Step { nextStep: NextStep; } -// Type for the entire data structure -// export interface StepsData { -// steps: Step[]; -// title: string; -// sortTitle: string; -// illustration: string; // UUID reference to an illustration -// customPath: string; -// } - export type ContactStepPageProps = ContentCommonProps & { type: ContentType.ContactStepPage; data: { @@ -69,75 +60,58 @@ export const ContactStepPage = (props: ContactStepPageProps) => { // console.log('steps', steps); return ( - <> -
- {illustration && ( -
{/* Render illustration component */}
- )} - - {textAboveTitle &&
{textAboveTitle}
} - -

{title}

- - {html && ( -
- )} - - {steps && steps.length > 0 && ( -
-
    - {steps.map((step, index) => ( -
  • -

    {step.label}

    -

    {step.explanation}

    - - {step.nextStep._selected === 'external' && - step.nextStep.external && ( - - Gå til ekstern side - - )} - - {step.nextStep._selected === 'internal' && - step.nextStep.internal && ( - - Gå til intern side - - )} -
    • - ))} -
-
- )} +
+ +
+
- -
- -
- -
-
- -
+
+
- + {steps && steps.length > 0 && ( +
+
    + {steps.map((step, index) => ( +
  • +

    {step.label}

    +

    {step.explanation}

    + + {step.nextStep._selected === 'external' && + step.nextStep.external && ( + + Gå til ekstern side + + )} + + {step.nextStep._selected === 'internal' && + step.nextStep.internal && ( + + Gå til intern side + + )} +
    • + ))} +
+
+ )} +
); }; From c8635eaffc26ca7b955acd8cf658f21a4f874512 Mon Sep 17 00:00:00 2001 From: bdahle Date: Wed, 12 Mar 2025 15:21:28 +0100 Subject: [PATCH 11/42] fjern div --- .../contact-step-page/ContactStepPage.tsx | 58 +++++++++---------- 1 file changed, 27 insertions(+), 31 deletions(-) diff --git a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx index 53f5f4345..01799c4f8 100644 --- a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx +++ b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx @@ -77,40 +77,36 @@ export const ContactStepPage = (props: ContactStepPageProps) => {
{steps && steps.length > 0 && ( -
-
    - {steps.map((step, index) => ( -
  • -

    {step.label}

    -

    {step.explanation}

    +
      + {steps.map((step, index) => ( +
    • +

      {step.label}

      +

      {step.explanation}

      - {step.nextStep._selected === 'external' && - step.nextStep.external && ( - - Gå til ekstern side - - )} + {step.nextStep._selected === 'external' && step.nextStep.external && ( + + Gå til ekstern side + + )} - {step.nextStep._selected === 'internal' && - step.nextStep.internal && ( - - Gå til intern side - + {step.nextStep._selected === 'internal' && step.nextStep.internal && ( + - ))} -
    -
+ className="step-link internal" + > + Gå til intern side + + )} + + ))} + )}
); From cf88d5eac4305dc01a3108df3ae9dfbd52dd5e03 Mon Sep 17 00:00:00 2001 From: bdahle Date: Wed, 12 Mar 2025 15:30:19 +0100 Subject: [PATCH 12/42] bruk LinkPanel --- .../contact-step-page/ContactStepPage.tsx | 30 +++++++------------ 1 file changed, 11 insertions(+), 19 deletions(-) diff --git a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx index 01799c4f8..1a068b017 100644 --- a/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx +++ b/packages/nextjs/src/components/pages/contact-step-page/ContactStepPage.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import { LinkPanel } from '@navikt/ds-react'; import { ContactPageHeader } from 'components/_common/headers/contactPageHeader/ContactPageHeader'; import { ParsedHtml } from 'components/_common/parsedHtml/ParsedHtml'; import { ContentType, ContentCommonProps } from 'types/content-props/_content-common'; @@ -77,32 +78,23 @@ export const ContactStepPage = (props: ContactStepPageProps) => {
{steps && steps.length > 0 && ( -