@helsenorge/designsystem-react 7.0.0-beta.2 → 7.0.0-beta.6

package/components/FormExample/FormExample.js

@@ -1,241 +1,161 @@
 import e from "react";
-import { useForm as H } from "react-hook-form";
-import { isTest as L } from "../../utils/environment.js";
-import B from "../Button/Button.js";
-import a from "../Checkbox/Checkbox.js";
-import m from "../FormGroup/FormGroup.js";
-import F, { FormLayoutColumns as G } from "../FormLayout/FormLayout.js";
-import S from "../Icons/Hospital.js";
-import D from "../Input/Input.js";
-import i from "../Label/Label.js";
-import x from "../RadioButton/RadioButton.js";
-import z from "../Select/Select.js";
-import V from "../Spacer/Spacer.js";
-import I from "../Textarea/Textarea.js";
+import { useForm as h } from "react-hook-form";
+import { isTest as q } from "../../utils/environment.js";
+import H from "../Button/Button.js";
+import s from "../Checkbox/Checkbox.js";
+import a from "../FormGroup/FormGroup.js";
+import w, { FormLayoutColumns as C } from "../FormLayout/FormLayout.js";
+import L from "../Icons/Hospital.js";
+import B from "../Input/Input.js";
+import n from "../Label/Label.js";
+import p from "../RadioButton/RadioButton.js";
+import N from "../Select/Select.js";
+import R from "../Spacer/Spacer.js";
+import G from "../Textarea/Textarea.js";
 import _ from "../Validation/Validation.js";
-var j = /* @__PURE__ */ ((r) => (r.formgroup = "formgroup", r.checkbox = "checkbox", r.radiobutton = "radiobutton", r.textarea = "textarea", r.input = "input", r.select = "select", r))(j || {});
-const $ = (r) => {
+var j = /* @__PURE__ */ ((t) => (t.formgroup = "formgroup", t.checkbox = "checkbox", t.radiobutton = "radiobutton", t.textarea = "textarea", t.input = "input", t.select = "select", t))(j || {});
+const P = (t) => {
   const {
-    exampleType: s = "formgroup"
+    exampleType: l = "formgroup"
     /* formgroup */
-  } = r, {
-    register: l,
-    handleSubmit: O,
-    formState: { errors: t }
-  } = H(), d = /* @__PURE__ */ new Date();
-  d.setHours(0), d.setMinutes(0), d.setSeconds(0);
+  } = t, {
+    register: o,
+    handleSubmit: z,
+    formState: { errors: r }
+  } = h(), i = /* @__PURE__ */ new Date();
+  i.setHours(0), i.setMinutes(0), i.setSeconds(0);
   const c = /* @__PURE__ */ new Date();
-  c.setDate(d.getDate() - 5), c.setHours(6), c.setMinutes(10), c.setSeconds(0);
+  c.setDate(i.getDate() - 5), c.setHours(6), c.setMinutes(10), c.setSeconds(0);
   const u = /* @__PURE__ */ new Date();
-  u.setDate(d.getDate() + 5), u.setHours(22), u.setMinutes(0), u.setSeconds(0);
-  const f = "field1", p = "field2", b = "field3", k = "field4", g = "field5", v = "field6", C = t.field1 || t.field2 || t.field3 || t.field4 || t.field5 || t.field6 || t.field7 || t.field8 || t.field9, o = "Du må velge et alternativ", q = "Du må velge to alternativ", h = "Det kan ikke legges inn mer enn 40 tegn", T = "Du må skrive noe her", w = 'Du må velge "Option 2"', E = (n) => n.length >= 2 || q, y = (n) => n.toString() === "Option 2" || w, M = () => {
-    if (s === "formgroup") {
-      const n = [
-        /* @__PURE__ */ e.createElement(
-          a,
-          {
-            key: 0,
-            inputId: "checkbox1",
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 1" }] }),
-            ...l(f, { required: o })
-          }
-        ),
-        /* @__PURE__ */ e.createElement(
-          a,
-          {
-            key: 1,
-            inputId: "checkbox2",
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 2" }] }),
-            ...l(f, { required: o })
-          }
-        ),
-        /* @__PURE__ */ e.createElement(
-          a,
-          {
-            key: 2,
-            inputId: "checkbox3",
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 3" }] }),
-            ...l(f, { required: o })
-          }
-        )
-      ];
-      return [
-        /* @__PURE__ */ e.createElement(
-          m,
-          {
-            key: 0,
-            title: "Gruppe tittel",
-            legend: "Velg minst en",
-            error: t.field1 ? t.field1.message : void 0,
-            size: r.size
-          },
-          /* @__PURE__ */ e.createElement(F, { maxColumns: G.two }, n.map((R) => R))
-        ),
-        /* @__PURE__ */ e.createElement(m, { key: 1, legend: "Velg minst to", error: t.field2 ? t.field2.message : void 0, size: r.size }, /* @__PURE__ */ e.createElement(
-          a,
-          {
-            inputId: "checkbox4",
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 4" }] }),
-            ...l(p, { validate: E })
-          }
-        ), /* @__PURE__ */ e.createElement(
-          a,
-          {
-            inputId: "checkbox5",
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 5" }] }),
-            ...l(p, { validate: E })
-          }
-        ), /* @__PURE__ */ e.createElement(
-          a,
-          {
-            inputId: "checkbox6",
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 6" }] }),
-            ...l(p, { validate: E })
-          }
-        )),
-        /* @__PURE__ */ e.createElement(m, { key: 2, legend: "Velg en", error: t.field3 ? t.field3.message : void 0, size: r.size }, /* @__PURE__ */ e.createElement(
-          x,
-          {
-            inputId: "radiobutton1",
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Radiobutton 1" }] }),
-            ...l(b, { required: o })
-          }
-        ), /* @__PURE__ */ e.createElement(
-          x,
-          {
-            inputId: "radiobutton2",
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Radiobutton 2" }] }),
-            ...l(b, { required: o })
-          }
-        ), /* @__PURE__ */ e.createElement(
-          x,
-          {
-            inputId: "radiobutton3",
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Radiobutton 3" }] }),
-            ...l(b, { required: o })
-          }
-        )),
-        /* @__PURE__ */ e.createElement(m, { key: 3, error: t.field4 ? t.field4.message : void 0 }, /* @__PURE__ */ e.createElement(
-          I,
-          {
-            defaultValue: `Dette er en test 
+  u.setDate(i.getDate() + 5), u.setHours(22), u.setMinutes(0), u.setSeconds(0);
+  const d = "Du må velge minst én farge", I = "Du må velge minst to størrelser", g = "Du må velge minst én plassering", y = "Historien må være på maks 40 tegn", D = "Navn må fylles ut", F = 'Du må velge "Frankenstein"', E = (m) => m.length >= 2 || I, k = (m) => m.toString() === "Frankenstein" || F, x = () => /* @__PURE__ */ e.createElement(
+    a,
+    {
+      title: "FormGroup-tittel",
+      legend: "Farge",
+      error: r.colour ? r.colour.message : void 0,
+      errorTextId: "error",
+      size: t.size
+    },
+    /* @__PURE__ */ e.createElement(w, { maxColumns: C.two }, /* @__PURE__ */ e.createElement(
+      s,
+      {
+        inputId: "colour1",
+        label: /* @__PURE__ */ e.createElement(n, { labelTexts: [{ text: "Blueberry" }] }),
+        ...o("colour", { required: d })
+      }
+    ), /* @__PURE__ */ e.createElement(
+      s,
+      {
+        inputId: "colour2",
+        label: /* @__PURE__ */ e.createElement(n, { labelTexts: [{ text: "Cherry" }] }),
+        ...o("colour", { required: d })
+      }
+    ), /* @__PURE__ */ e.createElement(
+      s,
+      {
+        inputId: "colour3",
+        label: /* @__PURE__ */ e.createElement(n, { labelTexts: [{ text: "Neutral" }] }),
+        ...o("colour", { required: d })
+      }
+    ))
+  ), S = () => /* @__PURE__ */ e.createElement(a, { legend: "Størrelser", error: r.sizes ? r.sizes.message : void 0, size: t.size, errorTextId: "error1" }, /* @__PURE__ */ e.createElement(s, { inputId: "sizes1", label: /* @__PURE__ */ e.createElement(n, { labelTexts: [{ text: "Small" }] }), ...o("sizes", { validate: E }) }), /* @__PURE__ */ e.createElement(s, { inputId: "sizes2", label: /* @__PURE__ */ e.createElement(n, { labelTexts: [{ text: "Medium" }] }), ...o("sizes", { validate: E }) }), /* @__PURE__ */ e.createElement(s, { inputId: "sizes3", label: /* @__PURE__ */ e.createElement(n, { labelTexts: [{ text: "Large" }] }), ...o("sizes", { validate: E }) })), b = () => /* @__PURE__ */ e.createElement(
+    a,
+    {
+      legend: "Plassering",
+      error: r.positions ? r.positions.message : void 0,
+      size: t.size,
+      errorTextId: "error2"
+    },
+    /* @__PURE__ */ e.createElement(
+      p,
+      {
+        inputId: "positions1",
+        label: /* @__PURE__ */ e.createElement(n, { labelTexts: [{ text: "Venstre" }] }),
+        ...o("positions", { required: g })
+      }
+    ),
+    /* @__PURE__ */ e.createElement(
+      p,
+      {
+        inputId: "positions2",
+        label: /* @__PURE__ */ e.createElement(n, { labelTexts: [{ text: "Høyre" }] }),
+        ...o("positions", { required: g })
+      }
+    ),
+    /* @__PURE__ */ e.createElement(
+      p,
+      {
+        inputId: "positions3",
+        label: /* @__PURE__ */ e.createElement(n, { labelTexts: [{ text: "Midten" }] }),
+        ...o("positions", { required: g })
+      }
+    )
+  ), f = () => /* @__PURE__ */ e.createElement(a, { error: r.story ? r.story.message : void 0, errorTextId: "error3" }, /* @__PURE__ */ e.createElement(
+    G,
+    {
+      defaultValue: `Dette er en test 
 
  Hello 
 
  test 
 
  test test`,
-            grow: !0,
-            maxCharacters: 40,
-            minRows: 5,
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv din historie her", type: "semibold" }] }),
-            textareaId: "textarea1",
-            ...l(k, { maxLength: { value: 40, message: h } })
-          }
-        )),
-        /* @__PURE__ */ e.createElement(m, { key: 4, size: r.size, error: t.field5 ? t.field5.message : void 0 }, /* @__PURE__ */ e.createElement(
-          D,
-          {
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv inn din tekst", type: "semibold" }] }),
-            placeholder: "Skriv noe!",
-            icon: S,
-            ...l(g, { required: T })
-          }
-        )),
-        /* @__PURE__ */ e.createElement(m, { key: 5, size: r.size, error: t.field6 ? t.field6.message : void 0 }, /* @__PURE__ */ e.createElement(
-          z,
-          {
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv inn din tekst", type: "semibold" }] }),
-            ...l(v, { validate: y })
-          },
-          /* @__PURE__ */ e.createElement("option", { value: "Option 1" }, "Option 1"),
-          /* @__PURE__ */ e.createElement("option", { value: "Option 2" }, "Option 2"),
-          /* @__PURE__ */ e.createElement("option", { value: "Option 3" }, "Option 3")
-        ))
-      ];
-    } else {
-      if (s === "checkbox")
-        return /* @__PURE__ */ e.createElement(
-          a,
-          {
-            inputId: "checkbox1",
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Checkbox 1" }] }),
-            errorText: t.field1 ? t.field1.message : void 0,
-            size: r.size,
-            ...l(f, { required: o })
-          }
-        );
-      if (s === "radiobutton")
-        return /* @__PURE__ */ e.createElement(
-          x,
-          {
-            inputId: "radiobutton1",
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Radiobutton 1" }] }),
-            errorText: t.field3 ? t.field3.message : void 0,
-            size: r.size,
-            ...l(b, { required: o })
-          }
-        );
-      if (s === "textarea")
-        return /* @__PURE__ */ e.createElement(
-          I,
-          {
-            defaultValue: `Dette er min historie 
-
- Hello 
-
- test`,
-            grow: !0,
-            maxCharacters: 40,
-            minRows: 5,
-            errorText: t.field4 ? t.field4.message : void 0,
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv din historie her", type: "semibold" }] }),
-            textareaId: "textarea1",
-            ...l(k, { maxLength: { value: 40, message: h } })
-          }
-        );
-      if (s === "input")
-        return /* @__PURE__ */ e.createElement(
-          D,
-          {
-            inputId: "input1",
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv inn din tekst", type: "semibold" }] }),
-            placeholder: "Skriv noe!",
-            errorText: t.field5 ? t.field5.message : void 0,
-            icon: S,
-            ...l(g, { required: T })
-          }
-        );
-      if (s === "select")
-        return /* @__PURE__ */ e.createElement(
-          z,
-          {
-            errorText: t.field6 ? t.field6.message : void 0,
-            label: /* @__PURE__ */ e.createElement(i, { labelTexts: [{ text: "Skriv inn din tekst", type: "semibold" }] }),
-            ...l(v, { validate: y })
-          },
-          /* @__PURE__ */ e.createElement("option", { value: "Option 1" }, "Option 1"),
-          /* @__PURE__ */ e.createElement("option", { value: "Option 2" }, "Option 2"),
-          /* @__PURE__ */ e.createElement("option", { value: "Option 3" }, "Option 3")
-        );
+      grow: !0,
+      maxCharacters: 40,
+      minRows: 5,
+      label: /* @__PURE__ */ e.createElement(n, { labelTexts: [{ text: "Historie", type: "semibold" }] }),
+      textareaId: "story",
+      ...o("story", { maxLength: { value: 40, message: y } })
+    }
+  )), T = () => /* @__PURE__ */ e.createElement(a, { size: t.size, error: r.name ? r.name.message : void 0, errorTextId: "error4" }, /* @__PURE__ */ e.createElement(
+    B,
+    {
+      label: /* @__PURE__ */ e.createElement(n, { labelTexts: [{ text: "Navn", type: "semibold" }] }),
+      placeholder: "Skriv noe!",
+      icon: L,
+      inputId: "name",
+      ...o("name", { required: D })
     }
+  )), v = () => /* @__PURE__ */ e.createElement(a, { size: t.size, error: r.monster ? r.monster.message : void 0, errorTextId: "error5" }, /* @__PURE__ */ e.createElement(
+    N,
+    {
+      selectId: "monster",
+      label: /* @__PURE__ */ e.createElement(n, { labelTexts: [{ text: "Velg et monster", type: "semibold" }] }),
+      ...o("monster", { validate: k })
+    },
+    /* @__PURE__ */ e.createElement("option", { value: "Troll" }, "Troll"),
+    /* @__PURE__ */ e.createElement("option", { value: "Frankenstein" }, "Frankenstein")
+  )), M = () => {
+    if (l === "formgroup")
+      return /* @__PURE__ */ e.createElement(e.Fragment, null, x(), S(), b(), f(), T(), v());
+    if (l === "checkbox")
+      return /* @__PURE__ */ e.createElement(e.Fragment, null, x());
+    if (l === "radiobutton")
+      return /* @__PURE__ */ e.createElement(e.Fragment, null, b());
+    if (l === "textarea")
+      return /* @__PURE__ */ e.createElement(e.Fragment, null, f());
+    if (l === "input")
+      return /* @__PURE__ */ e.createElement(e.Fragment, null, T());
+    if (l === "select")
+      return /* @__PURE__ */ e.createElement(e.Fragment, null, v());
   };
   return /* @__PURE__ */ e.createElement(
     "form",
     {
       noValidate: !0,
-      onSubmit: O((n) => {
-        !L() && console.log(n);
+      onSubmit: z((m) => {
+        !q() && console.log(m);
       })
     },
-    /* @__PURE__ */ e.createElement(_, { size: r.size, errorSummary: C ? "Sjekk at alt er riktig utfylt" : void 0 }, M()),
-    /* @__PURE__ */ e.createElement(V, null),
-    /* @__PURE__ */ e.createElement(B, { type: "submit" }, "Send inn")
+    /* @__PURE__ */ e.createElement(_, { size: t.size, errorTitle: "Sjekk at alt er riktig utfylt:", errors: r }, M()),
+    /* @__PURE__ */ e.createElement(R, null),
+    /* @__PURE__ */ e.createElement(H, { type: "submit" }, "Send inn")
   );
-}, ie = $;
+}, oe = P;
 export {
-  $ as FormExample,
+  P as FormExample,
   j as FormExampleVariants,
-  ie as default
+  oe as default
 };
 //# sourceMappingURL=FormExample.js.map

package/components/FormExample/FormExample.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormExample.js","sources":["../../../src/components/FormExample/FormExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useForm } from 'react-hook-form';\n\nimport { FormSize } from '../../constants';\nimport { isTest } from '../../utils/environment';\nimport Button from '../Button';\nimport Checkbox from '../Checkbox';\nimport FormGroup from '../FormGroup/FormGroup';\nimport FormLayout, { FormLayoutColumns } from '../FormLayout';\nimport Hospital from '../Icons/Hospital';\nimport Input from '../Input';\nimport Label from '../Label';\nimport RadioButton from '../RadioButton';\nimport Select from '../Select';\nimport Spacer from '../Spacer';\nimport Textarea from '../Textarea';\nimport Validation from '../Validation';\n\nexport interface FormExampleProps {\n  exampleType: FormExampleVariants;\n  size?: keyof typeof FormSize;\n}\n\nexport enum FormExampleVariants {\n  formgroup = 'formgroup',\n  checkbox = 'checkbox',\n  radiobutton = 'radiobutton',\n  textarea = 'textarea',\n  input = 'input',\n  select = 'select',\n}\n\nexport const FormExample = (props: FormExampleProps): JSX.Element => {\n  const { exampleType = FormExampleVariants.formgroup } = props;\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = useForm();\n\n  const defaultDate = new Date();\n  defaultDate.setHours(0);\n  defaultDate.setMinutes(0);\n  defaultDate.setSeconds(0);\n  const minDate = new Date();\n  minDate.setDate(defaultDate.getDate() - 5);\n  minDate.setHours(6);\n  minDate.setMinutes(10);\n  minDate.setSeconds(0);\n  const maxDate = new Date();\n  maxDate.setDate(defaultDate.getDate() + 5);\n  maxDate.setHours(22);\n  maxDate.setMinutes(0);\n  maxDate.setSeconds(0);\n\n  const field1 = 'field1';\n  const field2 = 'field2';\n  const field3 = 'field3';\n  const field4 = 'field4';\n  const field5 = 'field5';\n  const field6 = 'field6';\n  const allErrors =\n    errors.field1 ||\n    errors.field2 ||\n    errors.field3 ||\n    errors.field4 ||\n    errors.field5 ||\n    errors.field6 ||\n    errors.field7 ||\n    errors.field8 ||\n    errors.field9;\n  const errorMessage = 'Du må velge et alternativ';\n  const errorMessage2 = 'Du må velge to alternativ';\n  const errorMessage3 = 'Det kan ikke legges inn mer enn 40 tegn';\n  const errorMessage4 = 'Du må skrive noe her';\n  const errorMessage5 = 'Du må velge \"Option 2\"';\n\n  const requireTwo = (value: Array<string>): true | string => {\n    return value.length >= 2 || errorMessage2;\n  };\n  const requireSelect = (value: Array<string>): true | string => {\n    return value.toString() === 'Option 2' || errorMessage5;\n  };\n\n  const getFormExample = () => {\n    if (exampleType === FormExampleVariants.formgroup) {\n      const allCheckBoxes = [\n        <Checkbox\n          key={0}\n          inputId=\"checkbox1\"\n          label={<Label labelTexts={[{ text: 'Checkbox 1' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n        <Checkbox\n          key={1}\n          inputId=\"checkbox2\"\n          label={<Label labelTexts={[{ text: 'Checkbox 2' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n        <Checkbox\n          key={2}\n          inputId=\"checkbox3\"\n          label={<Label labelTexts={[{ text: 'Checkbox 3' }]} />}\n          {...register(field1, { required: errorMessage })}\n        />,\n      ];\n\n      return [\n        <FormGroup\n          key={0}\n          title={'Gruppe tittel'}\n          legend={'Velg minst en'}\n          error={errors.field1 ? (errors.field1.message as string) : undefined}\n          size={props.size}\n        >\n          <FormLayout maxColumns={FormLayoutColumns.two}>\n            {allCheckBoxes.map(check => {\n              return check;\n            })}\n          </FormLayout>\n        </FormGroup>,\n        <FormGroup key={1} legend={'Velg minst to'} error={errors.field2 ? (errors.field2.message as string) : undefined} size={props.size}>\n          <Checkbox\n            inputId=\"checkbox4\"\n            label={<Label labelTexts={[{ text: 'Checkbox 4' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n          <Checkbox\n            inputId=\"checkbox5\"\n            label={<Label labelTexts={[{ text: 'Checkbox 5' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n          <Checkbox\n            inputId=\"checkbox6\"\n            label={<Label labelTexts={[{ text: 'Checkbox 6' }]} />}\n            {...register(field2, { validate: requireTwo })}\n          />\n        </FormGroup>,\n        <FormGroup key={2} legend={'Velg en'} error={errors.field3 ? (errors.field3.message as string) : undefined} size={props.size}>\n          <RadioButton\n            inputId=\"radiobutton1\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 1' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n          <RadioButton\n            inputId=\"radiobutton2\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 2' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n          <RadioButton\n            inputId=\"radiobutton3\"\n            label={<Label labelTexts={[{ text: 'Radiobutton 3' }]} />}\n            {...register(field3, { required: errorMessage })}\n          />\n        </FormGroup>,\n        <FormGroup key={3} error={errors.field4 ? (errors.field4.message as string) : undefined}>\n          <Textarea\n            defaultValue={`Dette er en test \\n\\n Hello \\n\\n test \\n\\n test test`}\n            grow\n            maxCharacters={40}\n            minRows={5}\n            label={<Label labelTexts={[{ text: 'Skriv din historie her', type: 'semibold' }]} />}\n            textareaId=\"textarea1\"\n            {...register(field4, { maxLength: { value: 40, message: errorMessage3 } })}\n          />\n        </FormGroup>,\n        <FormGroup key={4} size={props.size} error={errors.field5 ? (errors.field5.message as string) : undefined}>\n          <Input\n            label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n            placeholder={'Skriv noe!'}\n            icon={Hospital}\n            {...register(field5, { required: errorMessage4 })}\n          />\n        </FormGroup>,\n        <FormGroup key={5} size={props.size} error={errors.field6 ? (errors.field6.message as string) : undefined}>\n          <Select\n            label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n            {...register(field6, { validate: requireSelect })}\n          >\n            <option value={'Option 1'}>{'Option 1'}</option>\n            <option value={'Option 2'}>{'Option 2'}</option>\n            <option value={'Option 3'}>{'Option 3'}</option>\n          </Select>\n        </FormGroup>,\n      ];\n    } else if (exampleType === FormExampleVariants.checkbox) {\n      return (\n        <Checkbox\n          inputId=\"checkbox1\"\n          label={<Label labelTexts={[{ text: 'Checkbox 1' }]} />}\n          errorText={errors.field1 ? (errors.field1.message as string) : undefined}\n          size={props.size}\n          {...register(field1, { required: errorMessage })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.radiobutton) {\n      return (\n        <RadioButton\n          inputId=\"radiobutton1\"\n          label={<Label labelTexts={[{ text: 'Radiobutton 1' }]} />}\n          errorText={errors.field3 ? (errors.field3.message as string) : undefined}\n          size={props.size}\n          {...register(field3, { required: errorMessage })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.textarea) {\n      return (\n        <Textarea\n          defaultValue={`Dette er min historie \\n\\n Hello \\n\\n test`}\n          grow\n          maxCharacters={40}\n          minRows={5}\n          errorText={errors.field4 ? (errors.field4.message as string) : undefined}\n          label={<Label labelTexts={[{ text: 'Skriv din historie her', type: 'semibold' }]} />}\n          textareaId=\"textarea1\"\n          {...register(field4, { maxLength: { value: 40, message: errorMessage3 } })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.input) {\n      return (\n        <Input\n          inputId={'input1'}\n          label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n          placeholder={'Skriv noe!'}\n          errorText={errors.field5 ? (errors.field5.message as string) : undefined}\n          icon={Hospital}\n          {...register(field5, { required: errorMessage4 })}\n        />\n      );\n    } else if (exampleType === FormExampleVariants.select) {\n      return (\n        <Select\n          errorText={errors.field6 ? (errors.field6.message as string) : undefined}\n          label={<Label labelTexts={[{ text: 'Skriv inn din tekst', type: 'semibold' }]} />}\n          {...register(field6, { validate: requireSelect })}\n        >\n          <option value={'Option 1'}>{'Option 1'}</option>\n          <option value={'Option 2'}>{'Option 2'}</option>\n          <option value={'Option 3'}>{'Option 3'}</option>\n        </Select>\n      );\n    }\n  };\n\n  return (\n    <form\n      noValidate\n      onSubmit={handleSubmit(data => {\n        // eslint-disable-next-line no-console\n        !isTest() && console.log(data);\n      })}\n    >\n      <Validation size={props.size} errorSummary={allErrors ? 'Sjekk at alt er riktig utfylt' : undefined}>\n        {getFormExample()}\n      </Validation>\n      <Spacer />\n      <Button type=\"submit\">{'Send inn'}</Button>\n    </form>\n  );\n};\n\nexport default FormExample;\n"],"names":["FormExampleVariants","FormExample","props","exampleType","register","handleSubmit","errors","useForm","defaultDate","minDate","maxDate","field1","field2","field3","field4","field5","field6","allErrors","errorMessage","errorMessage2","errorMessage3","errorMessage4","errorMessage5","requireTwo","value","requireSelect","getFormExample","allCheckBoxes","React","Checkbox","Label","FormGroup","FormLayout","FormLayoutColumns","check","RadioButton","Textarea","Input","Hospital","Select","data","isTest","Validation","Spacer","Button","FormExample$1"],"mappings":"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"}
+{"version":3,"file":"FormExample.js","sources":["../../../src/components/FormExample/FormExample.tsx"],"sourcesContent":["import React from 'react';\n\nimport { useForm } from 'react-hook-form';\n\nimport { FormSize } from '../../constants';\nimport { isTest } from '../../utils/environment';\nimport Button from '../Button';\nimport Checkbox from '../Checkbox';\nimport FormGroup from '../FormGroup/FormGroup';\nimport FormLayout, { FormLayoutColumns } from '../FormLayout';\nimport Hospital from '../Icons/Hospital';\nimport Input from '../Input';\nimport Label from '../Label';\nimport RadioButton from '../RadioButton';\nimport Select from '../Select';\nimport Spacer from '../Spacer';\nimport Textarea from '../Textarea';\nimport Validation from '../Validation';\n\nexport interface FormExampleProps {\n  exampleType: FormExampleVariants;\n  size?: keyof typeof FormSize;\n}\n\nexport enum FormExampleVariants {\n  formgroup = 'formgroup',\n  checkbox = 'checkbox',\n  radiobutton = 'radiobutton',\n  textarea = 'textarea',\n  input = 'input',\n  select = 'select',\n}\n\ninterface FormExampleData {\n  colour: string;\n  sizes: string[];\n  positions: string;\n  story: string;\n  name: string;\n  monster: string[];\n}\n\nexport const FormExample = (props: FormExampleProps): JSX.Element => {\n  const { exampleType = FormExampleVariants.formgroup } = props;\n  const {\n    register,\n    handleSubmit,\n    formState: { errors },\n  } = useForm<FormExampleData>();\n\n  const defaultDate = new Date();\n  defaultDate.setHours(0);\n  defaultDate.setMinutes(0);\n  defaultDate.setSeconds(0);\n  const minDate = new Date();\n  minDate.setDate(defaultDate.getDate() - 5);\n  minDate.setHours(6);\n  minDate.setMinutes(10);\n  minDate.setSeconds(0);\n  const maxDate = new Date();\n  maxDate.setDate(defaultDate.getDate() + 5);\n  maxDate.setHours(22);\n  maxDate.setMinutes(0);\n  maxDate.setSeconds(0);\n\n  const colorErrorMessage = 'Du må velge minst én farge';\n  const sizeErrorMessage = 'Du må velge minst to størrelser';\n  const positionErrorMessage = 'Du må velge minst én plassering';\n  const storyErrorMessage = 'Historien må være på maks 40 tegn';\n  const nameErrorMessage = 'Navn må fylles ut';\n  const monsterErrorMessage = 'Du må velge \"Frankenstein\"';\n\n  const requireTwo = (value: Array<string>): true | string => {\n    return value.length >= 2 || sizeErrorMessage;\n  };\n\n  const requireFrankenstein = (value: Array<string>): true | string => {\n    return value.toString() === 'Frankenstein' || monsterErrorMessage;\n  };\n\n  const color = () => (\n    <FormGroup\n      title={'FormGroup-tittel'}\n      legend={'Farge'}\n      error={errors.colour ? errors.colour.message : undefined}\n      errorTextId=\"error\"\n      size={props.size}\n    >\n      <FormLayout maxColumns={FormLayoutColumns.two}>\n        <Checkbox\n          inputId=\"colour1\"\n          label={<Label labelTexts={[{ text: 'Blueberry' }]} />}\n          {...register('colour', { required: colorErrorMessage })}\n        />\n        <Checkbox\n          inputId=\"colour2\"\n          label={<Label labelTexts={[{ text: 'Cherry' }]} />}\n          {...register('colour', { required: colorErrorMessage })}\n        />\n        <Checkbox\n          inputId=\"colour3\"\n          label={<Label labelTexts={[{ text: 'Neutral' }]} />}\n          {...register('colour', { required: colorErrorMessage })}\n        />\n      </FormLayout>\n    </FormGroup>\n  );\n\n  const size = () => (\n    <FormGroup legend={'Størrelser'} error={errors.sizes ? errors.sizes.message : undefined} size={props.size} errorTextId=\"error1\">\n      <Checkbox inputId=\"sizes1\" label={<Label labelTexts={[{ text: 'Small' }]} />} {...register('sizes', { validate: requireTwo })} />\n      <Checkbox inputId=\"sizes2\" label={<Label labelTexts={[{ text: 'Medium' }]} />} {...register('sizes', { validate: requireTwo })} />\n      <Checkbox inputId=\"sizes3\" label={<Label labelTexts={[{ text: 'Large' }]} />} {...register('sizes', { validate: requireTwo })} />\n    </FormGroup>\n  );\n\n  const position = () => (\n    <FormGroup\n      legend={'Plassering'}\n      error={errors.positions ? (errors.positions.message as string) : undefined}\n      size={props.size}\n      errorTextId=\"error2\"\n    >\n      <RadioButton\n        inputId=\"positions1\"\n        label={<Label labelTexts={[{ text: 'Venstre' }]} />}\n        {...register('positions', { required: positionErrorMessage })}\n      />\n      <RadioButton\n        inputId=\"positions2\"\n        label={<Label labelTexts={[{ text: 'Høyre' }]} />}\n        {...register('positions', { required: positionErrorMessage })}\n      />\n      <RadioButton\n        inputId=\"positions3\"\n        label={<Label labelTexts={[{ text: 'Midten' }]} />}\n        {...register('positions', { required: positionErrorMessage })}\n      />\n    </FormGroup>\n  );\n\n  const story = () => (\n    <FormGroup error={errors.story ? (errors.story.message as string) : undefined} errorTextId=\"error3\">\n      <Textarea\n        defaultValue={`Dette er en test \\n\\n Hello \\n\\n test \\n\\n test test`}\n        grow\n        maxCharacters={40}\n        minRows={5}\n        label={<Label labelTexts={[{ text: 'Historie', type: 'semibold' }]} />}\n        textareaId=\"story\"\n        {...register('story', { maxLength: { value: 40, message: storyErrorMessage } })}\n      />\n    </FormGroup>\n  );\n\n  const name = () => (\n    <FormGroup size={props.size} error={errors.name ? (errors.name.message as string) : undefined} errorTextId=\"error4\">\n      <Input\n        label={<Label labelTexts={[{ text: 'Navn', type: 'semibold' }]} />}\n        placeholder={'Skriv noe!'}\n        icon={Hospital}\n        inputId=\"name\"\n        {...register('name', { required: nameErrorMessage })}\n      />\n    </FormGroup>\n  );\n\n  const monster = () => (\n    <FormGroup size={props.size} error={errors.monster ? (errors.monster.message as string) : undefined} errorTextId=\"error5\">\n      <Select\n        selectId=\"monster\"\n        label={<Label labelTexts={[{ text: 'Velg et monster', type: 'semibold' }]} />}\n        {...register('monster', { validate: requireFrankenstein })}\n      >\n        <option value={'Troll'}>{'Troll'}</option>\n        <option value={'Frankenstein'}>{'Frankenstein'}</option>\n      </Select>\n    </FormGroup>\n  );\n\n  const getFormExample = () => {\n    if (exampleType === FormExampleVariants.formgroup) {\n      return (\n        <>\n          {color()}\n          {size()}\n          {position()}\n          {story()}\n          {name()}\n          {monster()}\n        </>\n      );\n    } else if (exampleType === FormExampleVariants.checkbox) {\n      return <>{color()}</>;\n    } else if (exampleType === FormExampleVariants.radiobutton) {\n      return <>{position()}</>;\n    } else if (exampleType === FormExampleVariants.textarea) {\n      return <>{story()}</>;\n    } else if (exampleType === FormExampleVariants.input) {\n      return <>{name()}</>;\n    } else if (exampleType === FormExampleVariants.select) {\n      return <>{monster()}</>;\n    }\n  };\n\n  return (\n    <form\n      noValidate\n      onSubmit={handleSubmit(data => {\n        // eslint-disable-next-line no-console\n        !isTest() && console.log(data);\n      })}\n    >\n      <Validation size={props.size} errorTitle={'Sjekk at alt er riktig utfylt:'} errors={errors}>\n        {getFormExample()}\n      </Validation>\n      <Spacer />\n      <Button type=\"submit\">{'Send inn'}</Button>\n    </form>\n  );\n};\n\nexport default FormExample;\n"],"names":["FormExampleVariants","FormExample","props","exampleType","register","handleSubmit","errors","useForm","defaultDate","minDate","maxDate","colorErrorMessage","sizeErrorMessage","positionErrorMessage","storyErrorMessage","nameErrorMessage","monsterErrorMessage","requireTwo","value","requireFrankenstein","color","React","FormGroup","FormLayout","FormLayoutColumns","Checkbox","Label","size","position","RadioButton","story","Textarea","name","Input","Hospital","monster","Select","getFormExample","data","isTest","Validation","Spacer","Button","FormExample$1"],"mappings":"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"}

package/components/FormGroup/FormGroup.d.ts

@@ -20,6 +20,8 @@ export interface FormGroupProps {
     size?: keyof typeof FormSize;
     /** Error message */
     error?: string;
+    /** Error text id */
+    errorTextId?: string;
     /** Sets the data-testid attribute. */
     testId?: string;
     /** Sets the data-testid attribute for the error-wrapper. */

package/components/FormGroup/FormGroup.js

@@ -1,88 +1,102 @@
-import r, { useState as I } from "react";
-import p from "classnames";
-import { FormMode as k, FormSize as F, AnalyticsId as z } from "../../constants.js";
+import r, { useState as U } from "react";
+import d from "classnames";
+import { FormMode as N, FormSize as T, AnalyticsId as A } from "../../constants.js";
+import { useUuid as k } from "../../hooks/useUuid.js";
 import { isComponent as m } from "../../utils/component.js";
-import { uuid as B } from "../../utils/uuid.js";
-import A from "../Checkbox/Checkbox.js";
-import D from "../ErrorWrapper/ErrorWrapper.js";
-import H from "../FormLayout/FormLayout.js";
-import $ from "../Input/Input.js";
-import j, { getRadioLabelClasses as q } from "../RadioButton/RadioButton.js";
-import J from "../Select/Select.js";
-import K from "../Title/Title.js";
-import s from "./styles.module.scss";
-const d = r.forwardRef((t, G) => {
+import D from "../Checkbox/Checkbox.js";
+import H from "../ErrorWrapper/ErrorWrapper.js";
+import $ from "../FormLayout/FormLayout.js";
+import j from "../Input/Input.js";
+import q, { getRadioLabelClasses as J } from "../RadioButton/RadioButton.js";
+import K from "../Select/Select.js";
+import O from "../Textarea/Textarea.js";
+import P from "../Title/Title.js";
+import p from "./styles.module.scss";
+const f = r.forwardRef((t, F) => {
   const {
-    className: _,
-    fieldsetClassName: y,
-    mode: a = k.onwhite,
-    size: n = F.medium,
+    className: G,
+    fieldsetClassName: _,
+    mode: a = N.onwhite,
+    size: s = T.medium,
     error: o,
+    errorTextId: y,
     name: l,
-    htmlMarkup: f = "fieldset",
+    htmlMarkup: u = "fieldset",
     renderError: R = !0,
     errorWrapperClassName: b,
     errorWrapperTestId: w
-  } = t, [x, S] = I(), [T] = I(B()), u = a === k.ondark, W = n === F.large, v = p(s["form-group-wrapper"], _), L = p({
-    [s["form-group-wrapper__title--on-dark"]]: u && !o
-  }), c = p(s["field-set__legend"], {
-    [s["field-set__legend--on-dark"]]: u && !o
-  }), g = p(s["field-set"], y), i = (e, M) => {
-    if (m(e, H))
+  } = t, [S, W] = U(), v = k(), n = k(y), c = a === N.ondark, L = s === T.large, M = d(p["form-group-wrapper"], G), z = d({
+    [p["form-group-wrapper__title--on-dark"]]: c && !o
+  }), I = d(p["field-set__legend"], {
+    [p["field-set__legend--on-dark"]]: c && !o
+  }), g = d(p["field-set"], _), i = (e, B) => {
+    if (m(e, $))
       return r.cloneElement(e, {
-        size: n,
+        size: s,
         mapHelper: i
       });
-    if (m(e, d))
+    if (m(e, f))
       return r.cloneElement(e, {
         mode: a,
-        size: n,
+        size: s,
         error: o,
-        renderError: !1
+        renderError: !1,
+        errorTextId: n
       });
-    if (m(e, A))
+    if (m(e, D))
       return r.cloneElement(e, {
         name: l ?? e.props.name,
         mode: a,
-        size: n,
-        error: !!o
+        size: s,
+        error: !!o,
+        errorTextId: n
       });
-    if (m(e, j)) {
-      const E = typeof e.props.inputId > "u" ? T + M : e.props.inputId;
+    if (m(e, q)) {
+      const E = typeof e.props.inputId > "u" ? v + B : e.props.inputId;
       return r.cloneElement(e, {
         inputId: E,
         name: l ?? e.props.name,
         mode: a,
-        size: n,
-        onChange: (N) => {
-          S(N.target.id), e.props.onChange && e.props.onChange(N);
+        size: s,
+        onChange: (x) => {
+          W(x.target.id), e.props.onChange && e.props.onChange(x);
         },
         error: !!o,
-        labelClassNames: q(E, a, W, x)
+        errorTextId: n,
+        labelClassNames: J(E, a, L, S)
       });
     } else {
-      if (m(e, $))
+      if (m(e, j))
+        return r.cloneElement(e, {
+          name: l ?? e.props.name,
+          mode: a,
+          size: s,
+          error: !!o,
+          errorTextId: n
+        });
+      if (m(e, O))
         return r.cloneElement(e, {
           name: l ?? e.props.name,
           mode: a,
-          size: n,
-          error: !!o
+          error: !!o,
+          errorTextId: n
         });
-      if (m(e, J))
+      if (m(e, K))
         return r.cloneElement(e, {
           name: l ?? e.props.name,
           mode: a,
-          error: !!o
+          error: !!o,
+          errorTextId: n
         });
     }
     return e;
-  }, C = () => /* @__PURE__ */ r.createElement("div", null, f === "div" && /* @__PURE__ */ r.createElement("div", { className: g }, t.legend && /* @__PURE__ */ r.createElement("h5", { className: c }, t.legend), r.Children.map(t.children, i)), f === "fieldset" && /* @__PURE__ */ r.createElement("fieldset", { name: t.fieldsetName, className: g }, t.legend && /* @__PURE__ */ r.createElement("legend", { className: c }, t.legend), r.Children.map(t.children, i)));
-  return /* @__PURE__ */ r.createElement("div", { "data-testid": t.testId, "data-analyticsid": z.FormGroup, className: v, ref: G, tabIndex: -1 }, t.title && /* @__PURE__ */ r.createElement(K, { className: L, htmlMarkup: "h4", appearance: "title4", margin: { marginTop: 0, marginBottom: o ? 1 : 2 } }, t.title), R ? /* @__PURE__ */ r.createElement(D, { className: b, errorText: o, testId: w }, C()) : C());
+  }, C = () => /* @__PURE__ */ r.createElement("div", null, u === "div" && /* @__PURE__ */ r.createElement("div", { className: g }, t.legend && /* @__PURE__ */ r.createElement("h5", { className: I }, t.legend), r.Children.map(t.children, i)), u === "fieldset" && /* @__PURE__ */ r.createElement("fieldset", { name: t.fieldsetName, className: g }, t.legend && /* @__PURE__ */ r.createElement("legend", { className: I }, t.legend), r.Children.map(t.children, i)));
+  return /* @__PURE__ */ r.createElement("div", { "data-testid": t.testId, "data-analyticsid": A.FormGroup, className: M, ref: F, tabIndex: -1 }, t.title && /* @__PURE__ */ r.createElement(P, { className: z, htmlMarkup: "h4", appearance: "title4", margin: { marginTop: 0, marginBottom: o ? 1 : 2 } }, t.title), R ? /* @__PURE__ */ r.createElement(H, { className: b, errorText: o, testId: w, errorTextId: n }, C()) : C());
 });
-d.displayName = "FormGroup";
-const ae = d;
+f.displayName = "FormGroup";
+const le = f;
 export {
-  d as FormGroup,
-  ae as default
+  f as FormGroup,
+  le as default
 };
 //# sourceMappingURL=FormGroup.js.map