@navikt/ds-react 0.19.0 → 0.19.3

package/cjs/accordion/AccordionContent.js

@@ -51,7 +51,7 @@ const AccordionContent = (0, react_1.forwardRef)((_a, ref) => {
     const CollapseComponent = context.renderContentWhenClosed
         ? react_collapse_1.Collapse
         : react_collapse_1.UnmountClosed;
-    return (react_1.default.createElement("div", Object.assign({ ref: ref, role: "region", "aria-labelledby": context.buttonId }, rest),
+    return (react_1.default.createElement("div", Object.assign({ ref: ref, "aria-labelledby": context.buttonId }, rest),
         react_1.default.createElement(CollapseComponent, { isOpened: context.open },
             react_1.default.createElement("div", { className: (0, classnames_1.default)("navds-accordion__content", className) }, children))));
 });

package/cjs/form/Textarea.js

@@ -46,11 +46,12 @@ const ErrorMessage_1 = __importDefault(require("./ErrorMessage"));
 const useFormField_1 = require("./useFormField");
 const __2 = require("..");
 exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
-    var _a;
+    var _a, _b, _c;
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = (0, useFormField_1.useFormField)(props, "textarea");
     const { label, className, description, maxLength, hideLabel = false } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel"]);
     const maxLengthId = `TextareaMaxLength-${(0, __2.useId)()}`;
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
+    const [controlledValue, setControlledValue] = (0, react_1.useState)((_a = props === null || props === void 0 ? void 0 : props.defaultValue) !== null && _a !== void 0 ? _a : "");
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, "navds-form-field", `navds-form-field--${size}`, {
             "navds-textarea--error": hasError,
             "navds-textarea--disabled": !!inputProps.disabled,
@@ -62,7 +63,9 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
         react_1.default.createElement("div", { className: "navds-textarea__wrapper" },
-            react_1.default.createElement(TextareaAutosize_1.default, Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: (0, classnames_1.default)("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
+            react_1.default.createElement(TextareaAutosize_1.default, Object.assign({}, (0, __1.omit)(rest, ["error", "errorId", "size"]), inputProps, { onChange: (e) => props.onChange
+                    ? props.onChange(e)
+                    : setControlledValue(e.target.value), ref: ref, className: (0, classnames_1.default)("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
                     "navds-textarea--counter": hasMaxLength,
                 }), "aria-describedby": (0, classnames_1.default)(inputProps["aria-describedby"], {
                     [maxLengthId]: hasMaxLength,
@@ -75,7 +78,7 @@ exports.Textarea = (0, react_1.forwardRef)((props, ref) => {
                     " ",
                     maxLength,
                     " signs."),
-                react_1.default.createElement(exports.Counter, { maxLength: maxLength, currentLength: (_a = props.value) === null || _a === void 0 ? void 0 : _a.length, size: size })))),
+                react_1.default.createElement(exports.Counter, { maxLength: maxLength, currentLength: (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : controlledValue === null || controlledValue === void 0 ? void 0 : controlledValue.length, size: size })))),
         react_1.default.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (react_1.default.createElement(ErrorMessage_1.default, { size: size }, props.error)))));
 });
 const Counter = ({ maxLength, currentLength, size }) => {

package/esm/accordion/AccordionContent.js

@@ -23,7 +23,7 @@ const AccordionContent = forwardRef((_a, ref) => {
     const CollapseComponent = context.renderContentWhenClosed
         ? Collapse
         : UnmountClosed;
-    return (React.createElement("div", Object.assign({ ref: ref, role: "region", "aria-labelledby": context.buttonId }, rest),
+    return (React.createElement("div", Object.assign({ ref: ref, "aria-labelledby": context.buttonId }, rest),
         React.createElement(CollapseComponent, { isOpened: context.open },
             React.createElement("div", { className: cl("navds-accordion__content", className) }, children))));
 });

package/esm/accordion/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.js","sourceRoot":"","sources":["../../src/accordion/AccordionContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAgBvD,MAAM,gBAAgB,GAAyB,UAAU,CACvD,CAAC,EAAoC,EAAE,GAAG,EAAE,EAAE;QAA7C,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,OAAW,EAAN,IAAI,cAAlC,+BAAoC,CAAF;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEjD,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CACX,+DAA+D,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,iBAAiB,GAAG,OAAO,CAAC,uBAAuB;QACvD,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,aAAa,CAAC;IAElB,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,EAAE,IAAI,EAAC,QAAQ,qBAAkB,OAAO,CAAC,QAAQ,IAAM,IAAI;QACtE,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,OAAO,CAAC,IAAI;YACvC,6BAAK,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,IACtD,QAAQ,CACL,CACY,CAChB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"AccordionContent.js","sourceRoot":"","sources":["../../src/accordion/AccordionContent.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAgBvD,MAAM,gBAAgB,GAAyB,UAAU,CACvD,CAAC,EAAoC,EAAE,GAAG,EAAE,EAAE;QAA7C,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,OAAW,EAAN,IAAI,cAAlC,+BAAoC,CAAF;IACjC,MAAM,OAAO,GAAG,UAAU,CAAC,oBAAoB,CAAC,CAAC;IAEjD,IAAI,OAAO,KAAK,IAAI,EAAE;QACpB,OAAO,CAAC,KAAK,CACX,+DAA+D,CAChE,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,iBAAiB,GAAG,OAAO,CAAC,uBAAuB;QACvD,CAAC,CAAC,QAAQ;QACV,CAAC,CAAC,aAAa,CAAC;IAElB,OAAO,CACL,2CAAK,GAAG,EAAE,GAAG,qBAAmB,OAAO,CAAC,QAAQ,IAAM,IAAI;QACxD,oBAAC,iBAAiB,IAAC,QAAQ,EAAE,OAAO,CAAC,IAAI;YACvC,6BAAK,SAAS,EAAE,EAAE,CAAC,0BAA0B,EAAE,SAAS,CAAC,IACtD,QAAQ,CACL,CACY,CAChB,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/esm/form/Textarea.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
 import cl from "classnames";
 import TextareaAutosize from "@material-ui/core/TextareaAutosize";
 import { BodyShort, Label, omit } from "..";
@@ -17,11 +17,12 @@ import ErrorMessage from "./ErrorMessage";
 import { useFormField } from "./useFormField";
 import { useId } from "..";
 export const Textarea = forwardRef((props, ref) => {
-    var _a;
+    var _a, _b, _c;
     const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = useFormField(props, "textarea");
     const { label, className, description, maxLength, hideLabel = false } = props, rest = __rest(props, ["label", "className", "description", "maxLength", "hideLabel"]);
     const maxLengthId = `TextareaMaxLength-${useId()}`;
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
+    const [controlledValue, setControlledValue] = useState((_a = props === null || props === void 0 ? void 0 : props.defaultValue) !== null && _a !== void 0 ? _a : "");
     return (React.createElement("div", { className: cl(className, "navds-form-field", `navds-form-field--${size}`, {
             "navds-textarea--error": hasError,
             "navds-textarea--disabled": !!inputProps.disabled,
@@ -33,7 +34,9 @@ export const Textarea = forwardRef((props, ref) => {
                 "navds-sr-only": hideLabel,
             }), id: inputDescriptionId, size: size }, description)),
         React.createElement("div", { className: "navds-textarea__wrapper" },
-            React.createElement(TextareaAutosize, Object.assign({}, omit(rest, ["error", "errorId", "size"]), inputProps, { ref: ref, className: cl("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
+            React.createElement(TextareaAutosize, Object.assign({}, omit(rest, ["error", "errorId", "size"]), inputProps, { onChange: (e) => props.onChange
+                    ? props.onChange(e)
+                    : setControlledValue(e.target.value), ref: ref, className: cl("navds-textarea__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`, {
                     "navds-textarea--counter": hasMaxLength,
                 }), "aria-describedby": cl(inputProps["aria-describedby"], {
                     [maxLengthId]: hasMaxLength,
@@ -46,7 +49,7 @@ export const Textarea = forwardRef((props, ref) => {
                     " ",
                     maxLength,
                     " signs."),
-                React.createElement(Counter, { maxLength: maxLength, currentLength: (_a = props.value) === null || _a === void 0 ? void 0 : _a.length, size: size })))),
+                React.createElement(Counter, { maxLength: maxLength, currentLength: (_c = (_b = props.value) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : controlledValue === null || controlledValue === void 0 ? void 0 : controlledValue.length, size: size })))),
         React.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && (React.createElement(ErrorMessage, { size: size }, props.error)))));
 });
 export const Counter = ({ maxLength, currentLength, size }) => {

package/esm/form/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/form/Textarea.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../src/form/Textarea.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.19.0",
-  "private": false,
+  "version": "0.19.3",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -31,14 +30,14 @@
     "docgen": "yarn ts-node ../../../scripts/docgen.ts",
     "create-package-json-pointers-to-esm": "node ../../../scripts/createPackageJsonsWithESMPointers.js",
     "clean": "rimraf cjs esm",
-    "build": "yarn run clean && tsc && tsc -p tsconfig.esm.json && yarn create-package-json-pointers-to-esm && yarn docgen",
+    "build": "yarn run clean && concurrently \"tsc\" \"tsc -p tsconfig.esm.json\" && yarn create-package-json-pointers-to-esm",
     "watch": "tsc --watch -p tsconfig.esm.json",
     "test": "jest"
   },
   "dependencies": {
     "@floating-ui/react-dom": "0.6.0",
     "@material-ui/core": "^4.12.3",
-    "@navikt/ds-icons": "^0.8.13",
+    "@navikt/ds-icons": "^0.8.15",
     "@popperjs/core": "^2.10.1",
     "@radix-ui/react-tabs": "0.1.5",
     "@radix-ui/react-toggle-group": "0.1.5",
@@ -50,29 +49,32 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
+    "@testing-library/dom": "8.13.0",
     "@testing-library/jest-dom": "^5.16.0",
     "@testing-library/react": "^13.0.0",
     "@testing-library/user-event": "^14.0.0",
     "@types/faker": "5.5.8",
     "@types/jest": "^27.0.1",
+    "@types/node": "^17.0.35",
     "@types/react-collapse": "^5.0.1",
     "@types/react-modal": "^3.13.1",
-    "@types/styled-components": "^5.1.14",
+    "concurrently": "7.2.1",
     "copyfiles": "^2.4.1",
     "faker": "5.5.3",
     "fast-glob": "3.2.11",
     "jest": "^27.5.0",
     "react-docgen-typescript": "2.2.2",
+    "react-dom": "^18.0.0",
     "react-router-dom": "^6.3.0",
     "rimraf": "3.0.2",
-    "styled-components": "^5.3.1",
     "swr": "^1.1.2",
     "ts-jest": "^27.1.0",
-    "ts-node": "10.7.0"
+    "ts-node": "10.7.0",
+    "typescript": "^4.7.2"
   },
   "peerDependencies": {
     "@types/react": "^17.0.30 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "17f35836538a5956def85cefe08ba956c71ba3b2"
+  "gitHead": "035f4e937ada8a9f8ed9836116024596a271ab4f"
 }

package/src/accordion/AccordionContent.tsx

@@ -33,7 +33,7 @@ const AccordionContent: AccordionContentType = forwardRef(
       : UnmountClosed;
 
     return (
-      <div ref={ref} role="region" aria-labelledby={context.buttonId} {...rest}>
+      <div ref={ref} aria-labelledby={context.buttonId} {...rest}>
         <CollapseComponent isOpened={context.open}>
           <div className={cl("navds-accordion__content", className)}>
             {children}

package/src/accordion/accordion.stories.tsx

@@ -52,11 +52,13 @@ export const Default = (props) => {
       </Accordion.Item>
     );
   return (
-    <Accordion>
-      {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
-        <Item key={y} />
-      ))}
-    </Accordion>
+    <div style={{ width: 500 }}>
+      <Accordion>
+        {[...Array(props.nItems ? props.nItems : 2)].map((_, y) => (
+          <Item key={y} />
+        ))}
+      </Accordion>
+    </div>
   );
 };
 
@@ -71,32 +73,36 @@ export const Controlled = () => {
   const [open2, setOpen2] = useState(false);
 
   return (
+    <div style={{ width: 500 }}>
+      <Accordion>
+        <Accordion.Item open={open}>
+          <Accordion.Header onClick={() => setOpen(!open)}>
+            Accordion header text
+          </Accordion.Header>
+          <Content />
+        </Accordion.Item>
+        <Accordion.Item open={open2}>
+          <Accordion.Header onClick={() => setOpen2(!open2)}>
+            Accordion header text
+          </Accordion.Header>
+          <Content />
+        </Accordion.Item>
+      </Accordion>
+    </div>
+  );
+};
+
+export const Uncontrolled = () => (
+  <div style={{ width: 500 }}>
     <Accordion>
-      <Accordion.Item open={open}>
-        <Accordion.Header onClick={() => setOpen(!open)}>
-          Accordion header text
-        </Accordion.Header>
+      <Accordion.Item>
+        <Accordion.Header>Accordion header text</Accordion.Header>
         <Content />
       </Accordion.Item>
-      <Accordion.Item open={open2}>
-        <Accordion.Header onClick={() => setOpen2(!open2)}>
-          Accordion header text
-        </Accordion.Header>
+      <Accordion.Item>
+        <Accordion.Header>Accordion header text</Accordion.Header>
         <Content />
       </Accordion.Item>
     </Accordion>
-  );
-};
-
-export const Uncontrolled = () => (
-  <Accordion>
-    <Accordion.Item>
-      <Accordion.Header>Accordion header text</Accordion.Header>
-      <Content />
-    </Accordion.Item>
-    <Accordion.Item>
-      <Accordion.Header>Accordion header text</Accordion.Header>
-      <Content />
-    </Accordion.Item>
-  </Accordion>
+  </div>
 );

package/src/form/Textarea.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import React, { forwardRef, useState } from "react";
 import cl from "classnames";
 import TextareaAutosize from "@material-ui/core/TextareaAutosize";
 import { BodyShort, Label, omit } from "..";
@@ -67,6 +67,10 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
     const maxLengthId = `TextareaMaxLength-${useId()}`;
     const hasMaxLength = maxLength !== undefined && maxLength > 0;
 
+    const [controlledValue, setControlledValue] = useState<string>(
+      props?.defaultValue ?? ""
+    );
+
     return (
       <div
         className={cl(
@@ -105,6 +109,11 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           <TextareaAutosize
             {...omit(rest, ["error", "errorId", "size"])}
             {...inputProps}
+            onChange={(e) =>
+              props.onChange
+                ? props.onChange(e)
+                : setControlledValue(e.target.value)
+            }
             ref={ref}
             className={cl(
               "navds-textarea__input",
@@ -126,7 +135,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
               </span>
               <Counter
                 maxLength={maxLength}
-                currentLength={props.value?.length}
+                currentLength={props.value?.length ?? controlledValue?.length}
                 size={size}
               />
             </>

package/src/form/stories/confirmation-panel.stories.tsx

@@ -3,67 +3,92 @@ import { ConfirmationPanel } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 import { Link } from "../..";
 export default {
-  title: "ds-react/form/confirmation-panel",
+  title: "ds-react/form/ConfirmationPanel",
   component: ConfirmationPanel,
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+    error: {
+      type: "string",
+    },
+  },
 } as Meta;
 
-export const All = () => {
+const content = (
+  <>
+    Ipsum voluptate pariatur <Link href="#123">testlink</Link> anim officia
+    minim ut mollit voluptate exercitation nulla mollit.
+  </>
+);
+
+export const Default = (props) => {
+  return (
+    <ConfirmationPanel
+      error={props?.error}
+      size={props?.size}
+      checked={props?.checked ?? undefined}
+      label={props?.label ?? "Checkbox label text"}
+    >
+      {content}
+    </ConfirmationPanel>
+  );
+};
+
+Default.args = {
+  label: "Checkbox label text",
+  checked: false,
+};
+
+export const Small = () => {
   const [checked, setChecked] = useState(false);
   return (
-    <div>
-      <h1>ConfirmationPanel</h1>
-      <ConfirmationPanel
-        checked={checked}
-        onChange={() => setChecked(!checked)}
-        label="Checkbox label text"
-      >
-        Ipsum voluptate pariatur <Link href="#123">testlink</Link> anim officia
-        minim ut mollit voluptate exercitation nulla mollit.
-      </ConfirmationPanel>
-      <h2>size small</h2>
-      <ConfirmationPanel
-        checked={checked}
-        onChange={() => setChecked(!checked)}
-        label="Checkbox label text"
-        size="small"
-      >
-        Ipsum voluptate pariatur <Link href="#123">testlink</Link> anim officia
-        minim ut mollit voluptate exercitation nulla mollit.
-      </ConfirmationPanel>
-      <h3>error</h3>
+    <ConfirmationPanel
+      checked={checked}
+      onChange={() => setChecked(!checked)}
+      label="Checkbox label text"
+      size="small"
+    >
+      {content}
+    </ConfirmationPanel>
+  );
+};
+
+export const NoContent = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <ConfirmationPanel
+      checked={checked}
+      onChange={() => setChecked(!checked)}
+      label="Checkbox label text"
+    />
+  );
+};
+
+export const Error = () => {
+  const [checked, setChecked] = useState(false);
+  return (
+    <div className="colgap">
       <ConfirmationPanel
         checked={checked}
         onChange={() => setChecked(!checked)}
         label="Checkbox label text"
-        error="Ex cupidatat do do do"
+        error="Adipisicing sint aute quis veniam incididunt duis est sint aute cillum."
       >
-        Ipsum voluptate pariatur <Link href="#123">testlink</Link> anim officia
-        minim ut mollit voluptate exercitation nulla mollit.
+        {content}
       </ConfirmationPanel>
-      <h3>error small</h3>
       <ConfirmationPanel
         checked={checked}
         onChange={() => setChecked(!checked)}
         label="Checkbox label text"
-        error="Ex cupidatat do do do"
+        error="Adipisicing sint aute quis veniam incididunt duis est sint aute cillum."
         size="small"
       >
-        Ipsum voluptate pariatur <Link href="#123">testlink</Link> anim officia
-        minim ut mollit voluptate exercitation nulla mollit.
+        {content}
       </ConfirmationPanel>
-      <h2>Empty</h2>
-      <ConfirmationPanel
-        checked={checked}
-        onChange={() => setChecked(!checked)}
-        label="Checkbox label text"
-      ></ConfirmationPanel>
-      <h2>Uncontrolled</h2>
-      <ConfirmationPanel label="Checkbox label text"></ConfirmationPanel>
-      <h3>defaultChecked</h3>
-      <ConfirmationPanel
-        defaultChecked
-        label="Checkbox label text"
-      ></ConfirmationPanel>
     </div>
   );
 };

package/src/form/stories/fieldset.stories.tsx

@@ -3,72 +3,111 @@ import { Fieldset } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 import { TextField } from "../../index";
 export default {
-  title: "ds-react/form/fieldset",
+  title: "ds-react/form/Fieldset",
   component: Fieldset,
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+    description: {
+      type: "string",
+    },
+    error: {
+      type: "string",
+    },
+    hideLegend: {
+      type: "boolean",
+    },
+    disabled: {
+      type: "boolean",
+    },
+  },
 } as Meta;
 
-export const All = () => {
-  return (
-    <div>
-      <h1>Fieldset</h1>
-
-      <Fieldset legend="Mollit eiusmod">
-        <TextField label="Textfield label" hideLabel />
-        <TextField label="Textfield label" hideLabel />
-      </Fieldset>
-
-      <h2>Description</h2>
-
-      <Fieldset
-        legend="Mollit eiusmod"
-        description={<div>Quis reprehenderit esse cillum</div>}
-      >
-        <TextField
-          label="Textfield label"
-          hideLabel
-          description={<div>Quis reprehenderit esse cillum</div>}
-        />
-        <TextField label="Textfield label" hideLabel />
-      </Fieldset>
-
-      <h2>Errors</h2>
-
-      <Fieldset legend="Mollit eiusmod" error="Fieldsett error">
-        <TextField label="Textfield label" hideLabel />
-        <TextField label="Textfield label" hideLabel />
-      </Fieldset>
+const content = (
+  <>
+    <TextField label="Textfield label" hideLabel />
+    <TextField label="Textfield label" hideLabel />
+  </>
+);
 
-      <h2>Errors uten errorPropagation</h2>
+export const Default = (props) => {
+  return (
+    <Fieldset legend="Mollit eiusmod" {...props}>
+      {content}
+    </Fieldset>
+  );
+};
 
-      <Fieldset
-        legend="Mollit eiusmod"
-        error="Fieldsett error"
-        errorPropagation={false}
-      >
-        <TextField label="Textfield label" hideLabel error="Må være fylt ut" />
-        <TextField label="Textfield label" hideLabel />
-      </Fieldset>
+Default.args = {
+  errorPropagation: true,
+};
 
-      <h2>Sizing</h2>
+export const Small = () => (
+  <Fieldset
+    size="small"
+    legend="Mollit eiusmod"
+    description="Do ullamco amet mollit labore tempor minim cupidatat dolore voluptate velit irure."
+  >
+    {content}
+  </Fieldset>
+);
 
-      <Fieldset size="small" legend="Mollit eiusmod" description="Dolore minim">
-        <TextField label="Textfield label" hideLabel />
-        <TextField label="Textfield label" hideLabel />
-      </Fieldset>
+export const Description = () => (
+  <Fieldset
+    legend="Mollit eiusmod"
+    description="Esse cupidatat reprehenderit est culpa consectetur sit dolor esse."
+  >
+    <TextField label="Textfield label" hideLabel />
+    <TextField label="Textfield label" hideLabel />
+  </Fieldset>
+);
 
-      <h2>hideLegend</h2>
+export const ErrorPropagation = () => (
+  <Fieldset
+    legend="Mollit eiusmod"
+    error="Fieldsett error"
+    errorPropagation={false}
+  >
+    <TextField label="Textfield label" hideLabel error="Må være fylt ut" />
+    <TextField label="Textfield label" hideLabel />
+  </Fieldset>
+);
 
-      <Fieldset legend="Mollit eiusmod" description="Dolore minim" hideLegend>
-        <TextField label="Textfield label" hideLabel />
-        <TextField label="Textfield label" hideLabel />
-      </Fieldset>
+export const Error = () => (
+  <div className="colgap">
+    <Fieldset
+      legend="Mollit eiusmod"
+      error="Laborum officia nisi aliqua esse minim in amet."
+    >
+      {content}
+    </Fieldset>
+    <Fieldset
+      size="small"
+      legend="Mollit eiusmod"
+      error="Laborum officia nisi aliqua esse minim in amet."
+    >
+      {content}
+    </Fieldset>
+  </div>
+);
 
-      <h2>Disabled</h2>
+export const Disabled = () => (
+  <div className="colgap">
+    <Fieldset legend="Mollit eiusmod" disabled>
+      {content}
+    </Fieldset>
+    <Fieldset size="small" legend="Mollit eiusmod" disabled>
+      {content}
+    </Fieldset>
+  </div>
+);
 
-      <Fieldset legend="Mollit eiusmod" description="Dolore minim" disabled>
-        <TextField label="Textfield label" hideLabel />
-        <TextField label="Textfield label" hideLabel />
-      </Fieldset>
-    </div>
-  );
-};
+export const hideLegend = () => (
+  <Fieldset legend="Mollit eiusmod" hideLegend>
+    {content}
+  </Fieldset>
+);