Merge pull request #1033 from navikt/alert-and-html-fixes

htm and alert fixes

Author: lotorvik

packages/fyllut-backend/src/routers/api/helpers/htmlBuilder.ts

@@ -87,9 +87,8 @@ const sectionContent = (components: Summary.Component[], level: number): string
         case 'image':
           return img(component);
         case 'alertstripe':
-          return alert(component);
         case 'htmlelement':
-          return htmlelement(component);
+          return html(component);
         case 'activities':
           return activity(component);
         default:
@@ -121,16 +120,13 @@ const field = (component: Summary.Field) =>
 const activity = (component: Summary.Activity) =>
   `<div class="spm">${component.label}</div><div class="svar">: ${component.value.text}</div>`;
 
-const htmlelement = (component: Summary.Field) => {
+const html = (component: Summary.Field) => {
   if (component.label) {
     return field(component);
   }
   return `<div>${component.value}</div>`;
 };
 
-const alert = (component: Summary.Field) =>
-  `<div class="label">${component.label}</div><div class="alert">${component.value}</div>`;
-
 const img = (component: Summary.Image) => `
 <div>
 <div class="spm">${component.label}</div>

packages/shared-components/src/components/summary/component/ComponentSummary.tsx

@@ -36,6 +36,7 @@ const ComponentSummary = ({ components, formUrl = '', panelValidationList = [] }
           case 'image':
             return <ImageSummary key={key} component={comp} />;
           case 'htmlelement':
+          case 'alertstripe':
             return <SummaryField key={key} component={comp as Summary.Field} html={true} />;
           case 'activities':
             return <ActivitySummary key={key} component={comp as Summary.Activity} />;

packages/shared-components/src/formio/components/base/BaseComponent.tsx

@@ -138,6 +138,29 @@ class BaseComponent extends FormioReactComponent {
     return this.options?.appConfig?.config?.isLoggedIn;
   }
 
+  /**
+   * Get textDisplay tag for custom component renderReact()
+   */
+  getTextDisplayTag() {
+    if (!this.builderMode) {
+      return <></>;
+    }
+
+    if (this.component?.textDisplay === 'pdf') {
+      return (
+        <Tag variant="alt3" className="mb-4" size="xsmall">
+          PDF
+        </Tag>
+      );
+    } else if (this.component?.textDisplay === 'formPdf') {
+      return (
+        <Tag variant="alt3" className="mb-4" size="xsmall">
+          Skjema og PDF
+        </Tag>
+      );
+    }
+  }
+
   /**
    * Used to set focus when clicking error summary.
    */

packages/shared-components/src/formio/components/core/alert/Alert.form.ts

@@ -13,6 +13,7 @@ const alertForm = () => {
       editFormDisplay.alertType(),
       editFormDisplay.inline(),
       editFormDisplay.textDisplay(),
+      editFormDisplay.hidden('value = data.textDisplay === "pdf"'),
       editFormDisplay.contentForPdf(),
     ]),
     api([

packages/shared-components/src/formio/components/core/alert/Alert.tsx

@@ -42,7 +42,8 @@ class Alert extends BaseComponent {
 
   renderReact(element) {
     element.render(
-      <>
+      <div>
+        {this.getTextDisplayTag()}
         {this.getDiffTag()}
         <NavAlert
           id={this.getId()}
@@ -51,9 +52,9 @@ class Alert extends BaseComponent {
           fullWidth={false} // Removes border-radius if true
           size="medium"
         >
-          <div dangerouslySetInnerHTML={{ __html: this.t(this.getContent()) }} />
+          <div dangerouslySetInnerHTML={{ __html: this.getContent() }} />
         </NavAlert>
-      </>,
+      </div>,
     );
   }
 }

packages/shared-components/src/formio/components/core/html-element/HtmlElement.tsx

@@ -1,4 +1,3 @@
-import { Tag } from '@navikt/ds-react';
 import React from 'react';
 import BaseComponent from '../../base/BaseComponent';
 import htmlElementBuilder from './HtmlElement.builder';
@@ -30,26 +29,11 @@ class HtmlElement extends BaseComponent {
     return this.component?.tag as string;
   }
 
-  getTextDisplayTag() {
-    if (this.component?.textDisplay === 'pdf') {
-      return (
-        <Tag variant="alt3" className="mb-4" size="xsmall">
-          PDF
-        </Tag>
-      );
-    } else if (this.component?.textDisplay === 'formPdf') {
-      return (
-        <Tag variant="alt3" className="mb-4" size="xsmall">
-          Skjema og PDF
-        </Tag>
-      );
-    }
-  }
-
   renderReact(element) {
     element.render(
       <div>
         {this.getTextDisplayTag()}
+        {this.getDiffTag()}
         {React.createElement(this.getTag(), {
           dangerouslySetInnerHTML: {
             __html: this.getContent(),

packages/shared-components/src/styles/global/labelTrackChanges.ts

@@ -3,11 +3,11 @@ const labelTrackChanges = {
     display: 'flex',
     alignItems: 'baseline',
     '& .navds-tag': {
-      marginLeft: '1rem',
+      marginLeft: '0.5rem',
     },
   },
-  '& .navds-label .navds-tag': {
-    marginLeft: '1rem',
+  '& .navds-label .navds-tag, & .navds-tag + .navds-tag': {
+    marginLeft: '0.5rem',
   },
 };