Varsel i kontekst

src/components/ContentMapper.tsx

@@ -29,6 +29,7 @@ import { FormsOverviewPage } from 'components/pages/forms-overview-page/FormsOve
 import { VideoPage } from './pages/video-page/VideoPage';
 import { CalculatorPage } from './pages/calculator-page/CalculatorPage';
 import { UserTestsConfigPreviewPage } from 'components/pages/user-tests-config-preview-page/UserTestsConfigPreviewPage';
+import { AlertInContextPage } from './pages/alert-in-context-page/AlertInContextPage';
 
 const contentToReactComponent: {
     [key in ContentType]?: React.FunctionComponent<ContentProps<key>>;
@@ -59,6 +60,7 @@ const contentToReactComponent: {
     [ContentType.FormsOverview]: FormsOverviewPage,
     [ContentType.Calculator]: CalculatorPage,
     [ContentType.UserTestsConfig]: UserTestsConfigPreviewPage,
+    [ContentType.AlertInContext]: AlertInContextPage,
 
     [ContentType.AreaPage]: DynamicPage,
     [ContentType.FrontPage]: DynamicPage,

src/components/_common/alert-in-context/AlertInContext.module.scss

@@ -0,0 +1,6 @@
+.alertInContext {
+    margin: 0 0 1rem 0;
+    border: 0;
+    padding-top: var(--a-spacing-3);
+    padding-bottom: var(--a-spacing-3);
+}

src/components/_common/alert-in-context/AlertInContext.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { AlertData } from 'types/content-props/alerts';
+import { AlertBox } from '../alert-box/AlertBox';
+
+import style from './AlertInContext.module.scss';
+
+type Props = {
+    alert: AlertData;
+};
+
+export const AlertInContext = ({ alert }: Props) => {
+    if (!alert) {
+        return null;
+    }
+
+    const variant = alert.data.type === 'critical' ? 'warning' : 'info';
+
+    return (
+        <AlertBox className={style.alertInContext} variant={variant}>
+            {alert.data.text}
+        </AlertBox>
+    );
+};

src/components/_common/form-details/FormDetails.tsx

@@ -5,6 +5,7 @@ import { ParsedHtml } from '../parsed-html/ParsedHtml';
 import { FormDetailsData, Variation } from 'types/content-props/form-details';
 import { FormDetailsButton } from './FormDetailsButton';
 import { InfoBox } from '../info-box/InfoBox';
+import { AlertInContext } from '../alert-in-context/AlertInContext';
 
 import style from './FormDetails.module.scss';
 
@@ -39,8 +40,14 @@ export const FormDetails = ({
         showTitleAsLevel4 = false, // Temporary solution until all product pages have been re-organized.
     } = displayConfig;
 
-    const { formNumbers, formType, languageDisclaimer, ingress, title } =
-        formDetails;
+    const {
+        formNumbers,
+        formType,
+        languageDisclaimer,
+        ingress,
+        title,
+        alerts,
+    } = formDetails;
 
     const variations = formType.reduce((acc, cur) => {
         const { _selected } = cur;
@@ -111,6 +118,10 @@ export const FormDetails = ({
                 </div>
             )}
             {languageDisclaimer && <InfoBox>{languageDisclaimer}</InfoBox>}
+            {alerts &&
+                alerts.map((alert, index) => (
+                    <AlertInContext key={index} alert={alert} />
+                ))}
             {variations.length > 0 && (
                 <div className={style.variation}>
                     {variations.map((variation, index) => (

src/components/pages/alert-in-context-page/AlertInContextPage.module.scss

@@ -0,0 +1,9 @@
+@use 'common' as common;
+
+$margin: 2rem;
+
+.alertInContextPage {
+    display: flex;
+    flex-direction: column;
+    max-width: common.$sectionMaxWidth;
+}

src/components/pages/alert-in-context-page/AlertInContextPage.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { AlertInContext } from 'components/_common/alert-in-context/AlertInContext';
+import { AlertData } from 'types/content-props/alerts';
+
+import style from './AlertInContextPage.module.scss';
+
+export const AlertInContextPage = (props: AlertData) => {
+    return (
+        <div className={style.alertInContextPage}>
+            <AlertInContext alert={props} />
+        </div>
+    );
+};

src/components/parts/form-details/FormDetailsPart.tsx

@@ -3,9 +3,7 @@ import { FormDetailsProps } from 'types/component-props/parts/form-details';
 import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
 import { FormDetails } from 'components/_common/form-details/FormDetails';
 import { FilteredContent } from '../../_common/filtered-content/FilteredContent';
-import {
-    ContentType,
-} from 'types/content-props/_content-common';
+import { ContentType } from 'types/content-props/_content-common';
 
 export const FormDetailsPart = ({ config, pageProps }: FormDetailsProps) => {
     const { targetFormDetails, ...displayConfig } = config;

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

@@ -100,6 +100,7 @@ export enum ContentType {
     FormsOverview = 'no.nav.navno:forms-overview',
     UserTestsConfig = 'no.nav.navno:user-tests-config',
     Video = 'no.nav.navno:video',
+    AlertInContext = 'no.nav.navno:alert-in-context',
 }
 
 export type ContentAndMediaCommonProps = {

src/types/content-props/alerts.ts

@@ -0,0 +1,14 @@
+import { OptionSetSingle } from 'types/util-types';
+
+export interface AlertData {
+    data: {
+        type: 'information' | 'critical';
+        text: string;
+        target: {
+            _selected: string;
+            formDetails: OptionSetSingle<{
+                targetContent: string;
+            }>;
+        };
+    };
+}

src/types/content-props/form-details.ts

@@ -2,6 +2,7 @@ import { OptionSetSingle } from 'types/util-types';
 import { ContentCommonProps, ContentType } from './_content-common';
 import { ProcessedHtmlProps } from 'types/processed-html-props';
 import { LinkSelectable } from 'types/component-props/_mixins';
+import { AlertData } from './alerts';
 
 export type FormComplaintTypes = 'complaint' | 'appeal';
 
@@ -16,6 +17,7 @@ export interface FormDetailsData {
     title?: string;
     ingress?: ProcessedHtmlProps;
     languageDisclaimer?: string;
+    alerts: AlertData[];
     formType: OptionSetSingle<{
         application: {
             variations: Variation[];