✨ new FormSummary component

@navikt/core/css/config/_mappings.js

@@ -178,6 +178,11 @@ const StyleMappings = {
     { component: "Tag", main: "tag.css", dependencies: [typoCss] },
     { component: "TextField", main: formCss, dependencies: [typoCss] },
     { component: "Textarea", main: formCss, dependencies: [typoCss] },
+    {
+      component: "FormSummary",
+      main: formCss,
+      dependencies: ["form-summary.css", typoCss],
+    },
     {
       component: "ToggleGroup",
       main: "toggle-group.css",

@navikt/core/css/form/form-summary.css

@@ -0,0 +1,22 @@
+.form-summary__answers {
+  padding: var(--a-spacing-5) var(--a-spacing-6) var(--a-spacing-6);
+  margin: 0;
+}
+
+.form-summary__value {
+  margin: var(--a-spacing-1) 0 0;
+  line-height: var(--a-font-line-height-xlarge); /* TODO: Skal vi heller bruke BodyLong? */
+}
+
+.form-summary__value .form-summary__answers {
+  margin-top: var(--a-spacing-2);
+  padding: var(--a-spacing-4);
+  background: var(--a-surface-action-subtle);
+  border-radius: var(--a-border-radius-large);
+}
+
+.form-summary__edit-button {
+  flex-shrink: 0;
+  margin-top: var(--a-spacing-1);
+  align-self: flex-start;
+}

@navikt/core/css/form/index.css

@@ -13,3 +13,4 @@
 @import "textarea.css";
 @import "search.css";
 @import "combobox.css";
+@import "form-summary.css";

@navikt/core/css/primitives/hr.css

@@ -0,0 +1,6 @@
+.navds-hr {
+  border-color: var(--a-grayalpha-300);
+  border-bottom-width: 1px;
+  border-top-width: 0;
+  margin: var(--a-spacing-4) 0;
+}

@navikt/core/css/primitives/index.css

@@ -4,3 +4,4 @@
 @import "hgrid.css";
 @import "stack.css";
 @import "responsive.css";
+@import "hr.css";

@navikt/core/react/src/form-summary/FormSummary.stories.tsx

@@ -0,0 +1,179 @@
+import { Meta, StoryFn } from "@storybook/react";
+import React from "react";
+import FormSummary from "./FormSummary";
+
+const meta: Meta<typeof FormSummary> = {
+  title: "ds-react/FormSummary",
+  component: FormSummary,
+  decorators: [
+    (story) => (
+      <div style={{ width: 600, maxWidth: "100%", margin: "0 auto" }}>
+        {story()}
+      </div>
+    ),
+  ],
+  parameters: { layout: "padded" },
+};
+export default meta;
+
+export const Default: StoryFn<typeof FormSummary> = () => (
+  <FormSummary>
+    <FormSummary.Header>
+      <FormSummary.Heading>Personalia</FormSummary.Heading>
+      <FormSummary.EditButton />
+    </FormSummary.Header>
+
+    <FormSummary.Answers>
+      <FormSummary.Answer>
+        <FormSummary.Label>Navn</FormSummary.Label>
+        <FormSummary.Value>Ola Nordmann</FormSummary.Value>
+      </FormSummary.Answer>
+
+      <FormSummary.Answer>
+        <FormSummary.Label>Fødselsnummer</FormSummary.Label>
+        <FormSummary.Value>12345678910</FormSummary.Value>
+      </FormSummary.Answer>
+
+      <FormSummary.Answer>
+        <FormSummary.Label>Barn nr 1</FormSummary.Label>
+        <FormSummary.Value>
+          <FormSummary.Answers>
+            <FormSummary.Answer>
+              <FormSummary.Label>Navn</FormSummary.Label>
+              <FormSummary.Value>Kari Nordmann</FormSummary.Value>
+            </FormSummary.Answer>
+            <FormSummary.Answer>
+              <FormSummary.Label>Kjønn</FormSummary.Label>
+              <FormSummary.Value>Jente</FormSummary.Value>
+            </FormSummary.Answer>
+            <FormSummary.Answer>
+              <FormSummary.Label>Alder</FormSummary.Label>
+              <FormSummary.Value>6</FormSummary.Value>
+            </FormSummary.Answer>
+          </FormSummary.Answers>
+        </FormSummary.Value>
+      </FormSummary.Answer>
+    </FormSummary.Answers>
+  </FormSummary>
+);
+
+export const LongTexts: StoryFn<typeof FormSummary> = () => (
+  <FormSummary>
+    <FormSummary.Header>
+      <FormSummary.Heading>
+        Arbeidsforhold som du har i eller utenfor EØS-området
+      </FormSummary.Heading>
+      <FormSummary.EditButton />
+    </FormSummary.Header>
+    <FormSummary.Answers>
+      <FormSummary.Answer>
+        <FormSummary.Label>
+          Har du jobbet i et annet EØS-land, Sveits eller Storbritannia i løpet
+          av de siste 36 månedene? Om ja, hvilket land og hvor lenge jobbet du
+          der? Kan du fortelle litt om hva du jobbet med?
+        </FormSummary.Label>
+        <FormSummary.Value>
+          Nei, jeg har ikke jobbet i et annet EØS-land, Sveits eller
+          Storbritannia i løpet av de siste 36 månedene. Og jeg har heller ikke
+          jobbet i Norge i løpet av de siste 36 månedene. Men jeg har jobbet i
+          et annet land utenfor EØS-området. Det var i Sør-Korea, og jeg jobbet
+          som lærer på en internasjonal skole. Jeg jobbet der i 12 måneder, og
+          det var en veldig spennende opplevelse. Jeg lærte mye om koreansk
+          kultur og språk, og jeg fikk mange nye venner. Jeg savner Sør-Korea
+          veldig mye, og jeg håper å kunne dra tilbake.
+          <FormSummary.Answers>
+            <FormSummary.Answer>
+              <FormSummary.Label>
+                Har du jobbet i et annet EØS-land, Sveits eller Storbritannia i
+                løpet av de siste 36 månedene? Om ja, hvilket land og hvor lenge
+                jobbet du der? Kan du fortelle litt om hva du jobbet med?
+              </FormSummary.Label>
+              <FormSummary.Value>
+                Nei, jeg har ikke jobbet i et annet EØS-land, Sveits eller
+                Storbritannia i løpet av de siste 36 månedene. Og jeg har heller
+                ikke jobbet i Norge i løpet av de siste 36 månedene. Men jeg har
+                jobbet i et annet land utenfor EØS-området. Det var i Sør-Korea,
+                og jeg jobbet som lærer på en internasjonal skole. Jeg jobbet
+                der i 12 måneder, og det var en veldig spennende opplevelse. Jeg
+                lærte mye om koreansk kultur og språk, og jeg fikk mange nye
+                venner. Jeg savner Sør-Korea veldig mye, og jeg håper å kunne
+                dra tilbake.
+              </FormSummary.Value>
+            </FormSummary.Answer>
+          </FormSummary.Answers>
+        </FormSummary.Value>
+      </FormSummary.Answer>
+    </FormSummary.Answers>
+  </FormSummary>
+);
+
+const answers = [
+  {
+    label: "Fortell din livshistorie",
+    value: `Det hele startet da jeg ble født en kald vinterdag i desember.
+     Jeg var en litt spesiell baby, for jeg hadde masse hår på hodet. Mamma 
+     og pappa ble veldig overrasket da de så meg for første gang. De hadde egentlig
+     forventet at jeg skulle være helt normal og kjedelig. Du vil kanskje ikke høre resten
+     av historien min, for den er ganske lang og kjedelig...`,
+  },
+  {
+    label: "Fødselsnummer",
+    value: "12345678910",
+  },
+  {
+    label: "Ting du har i sekken.",
+    value: [
+      {
+        label: "Saks x2",
+        value: `Jeg liker å ha med meg en saks i sekken min. Det er alltid kjekt å ha en saks. Jeg pakker gjerne med meg to saks. Da har jeg en reserve hvis den første saksen min skulle bli borte. Det er veldig kjekt.`,
+      },
+      {
+        label: "Blyant",
+        value:
+          "Det er ikke mulig å skrive uten en blyant. Da blir det bare rot.",
+      },
+      {
+        label: "Kake",
+        value: `Jeg har alltid en kake i sekken min. Den blir litt most etter en
+        stund i sekken min men det gjør ingenting. Jeg liker moste kaker. Det er veldig godt.`,
+      },
+      {
+        label: "Kaffekopp",
+        value: "Dette har jeg ikke i sekken min",
+      },
+    ],
+  },
+];
+
+export const ComplexData: StoryFn<typeof FormSummary> = () => (
+  <FormSummary>
+    <FormSummary.Header>
+      <FormSummary.Heading>
+        Diverse informasjon om forskjellige ting og tang. Kjekt å vite.
+      </FormSummary.Heading>
+      <FormSummary.EditButton />
+    </FormSummary.Header>
+
+    <FormSummary.Answers>
+      {answers.map((answer, index) => (
+        <FormSummary.Answer key={index}>
+          <FormSummary.Label>{answer.label}</FormSummary.Label>
+          <FormSummary.Value>
+            {Array.isArray(answer.value) ? (
+              <FormSummary.Answers>
+                {answer.value.map((subAnswer, subIndex) => (
+                  <FormSummary.Answer key={subIndex}>
+                    <FormSummary.Label>{subAnswer.label}</FormSummary.Label>
+                    <FormSummary.Value>{subAnswer.value}</FormSummary.Value>
+                  </FormSummary.Answer>
+                ))}
+              </FormSummary.Answers>
+            ) : (
+              answer.value
+            )}
+          </FormSummary.Value>
+        </FormSummary.Answer>
+      ))}
+    </FormSummary.Answers>
+  </FormSummary>
+);

@navikt/core/react/src/form-summary/FormSummary.tsx

@@ -0,0 +1,112 @@
+import React, { HTMLAttributes, forwardRef } from "react";
+import { Box } from "../layout/box";
+import FormSummaryAnswer from "./FormSummaryAnswer";
+import FormSummaryAnswers from "./FormSummaryAnswers";
+import FormSummaryEditButton from "./FormSummaryEditButton";
+import FormSummaryHeader from "./FormSummaryHeader";
+import FormSummaryHeading from "./FormSummaryHeading";
+import FormSummaryLabel from "./FormSummaryLabel";
+import FormSummaryValue from "./FormSummaryValue";
+
+interface FormSummaryComponent
+  extends React.ForwardRefExoticComponent<
+    FormSummaryProps & React.RefAttributes<HTMLDivElement>
+  > {
+  /**
+   * Wrapper component.
+   */
+  Header: typeof FormSummaryHeader;
+  /**
+   * Typographic Heading to use in the `FormSummary.Header` component.
+   */
+  Heading: typeof FormSummaryHeading;
+  /**
+   * Button to edit the Answers.
+   */
+  EditButton: typeof FormSummaryEditButton;
+  /**
+   * Wrapper component for the Answers.
+   */
+  Answers: typeof FormSummaryAnswers;
+  /**
+   * Wrapper component for each Answer.
+   */
+  Answer: typeof FormSummaryAnswer;
+  /**
+   * Corresponds to the question in the form.
+   */
+  Label: typeof FormSummaryLabel;
+  /**
+   * Corresponds to the answer in the form.
+   */
+  Value: typeof FormSummaryValue;
+}
+
+export interface FormSummaryProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Children of the FormSummary component, must be of type FormSummary.Header, FormSummary.Answers.
+   *
+   * @example
+   * ```jsx
+   * <FormSummary>
+   *  <FormSummary.Header>
+   *   <FormSummary.Heading>HeadingTekst</FormSummary.Heading>
+   *  <FormSummary.EditButton />
+   * </FormSummary.Header>
+   * <FormSummary.Answers>
+   *   <FormSummary.Answer>
+   *     <FormSummary.Label>Navn</FormSummary.Label>
+   *     <FormSummary.Value>Ola Nordmann</FormSummary.Value>
+   *   </FormSummary.Answer>
+   * </FormSummary.Answers>
+   * </FormSummary>
+   * ```
+   */
+  children: React.ReactNode;
+}
+
+/**
+ * A summary of a previously answered form.
+ *
+ * @example
+ * ```jsx
+ * <FormSummary>
+ *  <FormSummary.Header>
+ *   <FormSummary.Heading>HeadingTekst</FormSummary.Heading>
+ *  <FormSummary.EditButton />
+ * </FormSummary.Header>
+ * <FormSummary.Answers>
+ *   <FormSummary.Answer>
+ *     <FormSummary.Label>Navn</FormSummary.Label>
+ *     <FormSummary.Value>Ola Nordmann</FormSummary.Value>
+ *   </FormSummary.Answer>
+ * </FormSummary.Answers>
+ * </FormSummary>
+ * ```
+ */
+export const FormSummary = forwardRef<HTMLDivElement, FormSummaryProps>(
+  ({ children, ...rest }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        {...rest}
+        as="section"
+        borderRadius="large"
+        borderColor="border-subtle"
+        borderWidth="1"
+      >
+        {children}
+      </Box>
+    );
+  },
+) as FormSummaryComponent;
+
+FormSummary.Header = FormSummaryHeader;
+FormSummary.Heading = FormSummaryHeading;
+FormSummary.EditButton = FormSummaryEditButton;
+FormSummary.Answers = FormSummaryAnswers;
+FormSummary.Answer = FormSummaryAnswer;
+FormSummary.Label = FormSummaryLabel;
+FormSummary.Value = FormSummaryValue;
+
+export default FormSummary;

@navikt/core/react/src/form-summary/FormSummaryAnswer.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+export interface FormSummaryAnswerProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export default function FormSummaryAnswer({
+  children,
+}: FormSummaryAnswerProps) {
+  return <>{children}</>;
+}

@navikt/core/react/src/form-summary/FormSummaryAnswers.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { injectHRBetween } from "./utils";
+
+export interface FormSummaryAnswersProps
+  extends React.HTMLAttributes<HTMLDListElement> {
+  children: React.ReactNode;
+}
+
+export default function FormSummaryAnswers({
+  children,
+  ...rest
+}: FormSummaryAnswersProps) {
+  return (
+    <dl className="form-summary__answers" {...rest}>
+      {injectHRBetween(children)}
+    </dl>
+  );
+}

@navikt/core/react/src/form-summary/FormSummaryEditButton.tsx

@@ -0,0 +1,19 @@
+import cl from "clsx";
+import React from "react";
+import { Link, LinkProps } from "../link";
+
+export interface FormSummaryEditButtonProps extends Partial<LinkProps> {}
+
+export default function FormSummaryEditButton({
+  children = "Endre svar",
+  className,
+  ...rest
+}: FormSummaryEditButtonProps) {
+  return (
+    <Link {...rest} className={cl("form-summary__edit-button", className)}>
+      {children}
+    </Link>
+  );
+}
+
+// TODO Bør den hete EditLink?