Legger til støtte for forhåndsvisning av varsel i kontekst

Author: terjeofnorway

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/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,16 @@
+import React from 'react';
+import { ComponentMapper } from '../../ComponentMapper';
+
+import { AlertInContextPageProps } from 'types/content-props/alerts';
+import { ThemedPageHeader } from '../../_common/headers/themed-page-header/ThemedPageHeader';
+
+import style from './AlertInContextPage.module.scss';
+import { AlertInContext } from 'components/_common/alert-in-context/AlertInContext';
+
+export const AlertInContextPage = (props: AlertInContextPageProps) => {
+    return (
+        <div className={style.alertInContextPage}>
+            <AlertInContext alert={props} />
+        </div>
+    );
+};