@navikt/ds-react 0.18.7 → 0.19.2

package/src/form/Switch.tsx

@@ -50,6 +50,10 @@ export interface SwitchProps
    * @default "left"
    */
   position?: "left" | "right";
+  /**
+   * Adds a description to extend labling of Switch
+   */
+  description?: string;
 }
 
 export const Switch = forwardRef<HTMLInputElement, SwitchProps>(

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/checkbox/Checkbox.tsx

@@ -29,6 +29,10 @@ export interface CheckboxProps
    * @default false
    */
   indeterminate?: boolean;
+  /**
+   * Adds a description to extend labling of Checkbox
+   */
+  description?: string;
 }
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(

package/src/form/checkbox/checkbox.stories.tsx

@@ -14,48 +14,52 @@ export const Default = (props) => {
   const [state, setState] = useState(["checkbox1"]);
 
   return (
-    <CheckboxGroup
-      legend={props.legend}
-      description={props.description}
-      value={props.controlled ? state : undefined}
-      onChange={props.controlled ? setState : undefined}
-      hideLegend={props.hideLegend}
-      error={props.errorGroup ? "Errormelding" : undefined}
-      {...props}
-    >
-      <Checkbox
-        value="checkbox1"
-        indeterminate={props.indeterminate}
-        hideLabel={props.hideLabel}
-      >
-        {props.children || "Apple"}
-      </Checkbox>
-      <Checkbox
-        value="checkbox2"
-        error={props.errorSingle}
-        description={
-          props.checkboxDescription ? "Orange description" : undefined
-        }
-        indeterminate={props.indeterminate}
-        hideLabel={props.hideLabel}
-      >
-        {props.children || "Orange"}
-      </Checkbox>
-      <Checkbox
-        value="checkbox3"
-        indeterminate={props.indeterminate}
-        hideLabel={props.hideLabel}
-      >
-        {props.children || "Banana"}
-      </Checkbox>
-      <Checkbox
-        value="checkbox4"
-        indeterminate={props.indeterminate}
-        hideLabel={props.hideLabel}
+    <div>
+      <CheckboxGroup
+        legend={props.legend}
+        description={props.description}
+        value={props.controlled ? state : undefined}
+        onChange={props.controlled ? setState : undefined}
+        hideLegend={props.hideLegend}
+        error={props.errorGroup ? "Errormelding" : undefined}
+        {...props}
       >
-        {props.children || "Melon"}
-      </Checkbox>
-    </CheckboxGroup>
+        <Checkbox
+          value="checkbox1"
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Apple"}
+        </Checkbox>
+        <Checkbox
+          value="checkbox2"
+          error={props.errorSingle}
+          description={
+            props.checkboxDescription
+              ? "Quis laborum culpa enim amet cillum veniam."
+              : undefined
+          }
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Orange"}
+        </Checkbox>
+        <Checkbox
+          value="checkbox3"
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Banana"}
+        </Checkbox>
+        <Checkbox
+          value="checkbox4"
+          indeterminate={props.indeterminate}
+          hideLabel={props.hideLabel}
+        >
+          {props.children || "Melon"}
+        </Checkbox>
+      </CheckboxGroup>
+    </div>
   );
 };
 
@@ -63,6 +67,7 @@ Default.args = {
   controlled: false,
   legend: "Legend-tekst",
   checkboxDescription: false,
+  hideLabel: false,
   hideLegend: false,
   errorSingle: false,
   children: "",

package/src/form/radio/Radio.tsx

@@ -15,6 +15,10 @@ export interface RadioProps
    * The value of the HTML element
    */
   value: any;
+  /**
+   * Adds a description to extend labling of Radio
+   */
+  description?: string;
 }
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {

package/src/form/radio/radio.stories.tsx

@@ -1,6 +1,6 @@
+import { Meta } from "@storybook/react/types-6-0";
 import React, { useState } from "react";
 import { Radio, RadioGroup } from "../../index";
-import { Meta } from "@storybook/react/types-6-0";
 
 export default {
   title: "ds-react/Form/Radio",

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>
+);

package/src/form/stories/select.stories.tsx

@@ -2,69 +2,113 @@ import React from "react";
 import { Select } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 export default {
-  title: "ds-react/form/select",
+  title: "ds-react/form/Select",
   component: Select,
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+    description: {
+      type: "string",
+    },
+    error: {
+      type: "string",
+    },
+    hideLabel: {
+      type: "boolean",
+    },
+    disabled: {
+      type: "boolean",
+    },
+  },
 } as Meta;
 
-export const All = () => {
+const content = (
+  <>
+    <option value="">Velg land</option>
+    <option value="norge">Norge</option>
+    <option value="sverige">Sverige</option>
+  </>
+);
+
+export const Default = (props) => {
   return (
-    <div>
-      <h1>Select</h1>
+    <Select {...props} label="Ipsum enim quis culpa">
+      {content}
+    </Select>
+  );
+};
 
-      <Select label="Ipsum enim quis culpa">
-        <option value="">Velg land</option>
-        <option value="norge">Norge</option>
-        <option value="sverige">Sverige</option>
-      </Select>
+Default.args = {};
 
-      <h2>Description</h2>
+export const Small = () => {
+  return (
+    <Select size="small" label="Ipsum enim quis culpa">
+      {content}
+    </Select>
+  );
+};
 
-      <Select label="Ipsum enim quis culpa" description={<div>Aute enim</div>}>
-        <option value="">Velg land</option>
-        <option value="norge">Norge</option>
-        <option value="sverige">Sverige</option>
+export const Description = () => {
+  return (
+    <div className="colgap">
+      <Select
+        label="Ipsum enim quis culpa"
+        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+      >
+        {content}
       </Select>
-
-      <h2>Errors</h2>
-
       <Select
         label="Ipsum enim quis culpa"
-        description="Aute enim"
-        error="Select error message"
+        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+        size="small"
       >
-        <option value="">Velg land</option>
-        <option value="norge">Norge</option>
-        <option value="sverige">Sverige</option>
+        {content}
       </Select>
+    </div>
+  );
+};
 
-      <h2>Sizing</h2>
-
+export const Error = () => {
+  return (
+    <div className="colgap">
       <Select
         label="Ipsum enim quis culpa"
-        description="Aute enim"
-        error="Select error message"
+        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+      >
+        {content}
+      </Select>
+      <Select
+        label="Ipsum enim quis culpa"
+        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
         size="small"
       >
-        <option value="">Velg land</option>
-        <option value="norge">Norge</option>
-        <option value="sverige">Sverige</option>
+        {content}
       </Select>
+    </div>
+  );
+};
 
-      <h2>hideLabel</h2>
-
-      <Select label="Ipsum enim quis culpa" description="Aute enim" hideLabel>
-        <option value="">Velg land</option>
-        <option value="norge">Norge</option>
-        <option value="sverige">Sverige</option>
+export const Disabled = () => {
+  return (
+    <div className="colgap">
+      <Select label="Ipsum enim quis culpa" disabled>
+        {content}
       </Select>
-
-      <h2>Disabled</h2>
-
-      <Select label="Ipsum enim quis culpa" description="Aute enim" disabled>
-        <option value="">Velg land</option>
-        <option value="norge">Norge</option>
-        <option value="sverige">Sverige</option>
+      <Select label="Ipsum enim quis culpa" disabled size="small">
+        {content}
       </Select>
     </div>
   );
 };
+
+export const HideLabel = () => {
+  return (
+    <Select label="Ipsum enim quis culpa" hideLabel>
+      {content}
+    </Select>
+  );
+};