@navikt/ds-react 0.19.0 → 0.19.3

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

package/src/form/stories/switch.stories.tsx

@@ -1,104 +1,117 @@
-import React, { useState } from "react";
-import { Switch } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
-import { Fieldset } from "../..";
+import React from "react";
+import { Switch } from "../index";
+
 export default {
-  title: "ds-react/form/switch",
+  title: "ds-react/form/Switch",
   component: Switch,
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+    position: {
+      control: {
+        type: "radio",
+        options: ["right", "left"],
+      },
+    },
+    description: {
+      type: "string",
+    },
+    hideLabel: {
+      type: "boolean",
+    },
+    disabled: {
+      type: "boolean",
+    },
+    loading: {
+      type: "boolean",
+    },
+  },
 } as Meta;
 
-export const All = () => {
-  const [checked, setChecked] = useState(false);
-  const [loadingState, setLoadingState] = useState(false);
-  return (
-    <div style={{ width: "fit-content" }}>
-      <h1>Switch</h1>
-      <Switch>Label text</Switch>
-      <Switch position="right">Label text</Switch>
-
-      <h2>Switch w/Description</h2>
-      <Switch>Label text</Switch>
-      <Switch description="Switch description">Label text</Switch>
-      <Switch>Label text</Switch>
-
-      <Switch position="right">Label text</Switch>
-      <Switch position="right" description="Switch description">
-        Label text
-      </Switch>
-      <Switch position="right">Label text</Switch>
+export const Default = (props) => {
+  return <Switch {...props}>Label text</Switch>;
+};
 
-      <h2>hidelabel</h2>
-      <Switch description="Switch description" hideLabel>
-        Label text
-      </Switch>
-      <Switch description="Switch description" hideLabel>
-        Label text
-      </Switch>
-      <Switch hideLabel size="small">
-        Label text small
-      </Switch>
-      <Switch position="right" description="Switch description" hideLabel>
-        Label text
-      </Switch>
-      <Switch position="right" description="Switch description" hideLabel>
-        Label text
-      </Switch>
-      <Switch position="right" hideLabel size="small">
-        Label text small
-      </Switch>
+Default.args = {
+  checked: false,
+  position: "right",
+};
 
-      <h2>Switch small</h2>
+export const Small = () => {
+  return (
+    <div className="colgap">
       <Switch size="small">Label text</Switch>
-      <Switch description="Switch description" size="small">
+      <Switch size="small" position="right">
         Label text
       </Switch>
-      <Switch size="small">Label text</Switch>
+    </div>
+  );
+};
 
-      <Switch position="right" size="small">
-        Label text
-      </Switch>
-      <Switch position="right" description="Switch description" size="small">
+export const Description = () => {
+  return (
+    <div className="colgap">
+      <Switch size="small" description="Cillum sint exercitation ut cillum.">
         Label text
       </Switch>
-      <Switch position="right" size="small">
+      <Switch
+        size="small"
+        position="right"
+        description="Cillum sint exercitation ut cillum."
+      >
         Label text
       </Switch>
+    </div>
+  );
+};
 
-      <h2>Controlled</h2>
-      <Switch checked={checked} onChange={() => setChecked(!checked)}>
-        Label text
-      </Switch>
+export const Loading = () => {
+  return (
+    <div className="colgap">
+      <div className="colgap">
+        <Switch loading>Label text</Switch>
 
-      <h2>Defaultchecked</h2>
-      <Switch defaultChecked>Label text</Switch>
+        <Switch checked loading>
+          Label text
+        </Switch>
+      </div>
+      <div className="colgap">
+        <Switch loading size="small">
+          Label text
+        </Switch>
+        <Switch checked loading size="small">
+          Label text
+        </Switch>
+      </div>
+    </div>
+  );
+};
 
-      <h2>Disabled</h2>
+export const Disabled = () => {
+  return (
+    <div className="colgap">
       <Switch disabled>Label text</Switch>
-      <Switch disabled defaultChecked>
+
+      <Switch checked disabled>
         Label text
       </Switch>
+    </div>
+  );
+};
 
-      <h2>With fieldset error</h2>
-      <Fieldset legend="Fieldset legend" error="Errormsg">
-        <Switch defaultChecked>Label text</Switch>
-        <Switch>Label text</Switch>
-      </Fieldset>
+export const HideLabel = () => {
+  return (
+    <div className="colgap">
+      <Switch hideLabel>Label text</Switch>
 
-      <h2>loading prop</h2>
-      <Switch loading>Label text</Switch>
-      <Switch size="small" loading>
-        Label text
-      </Switch>
-      <Switch disabled loading>
-        Label text
-      </Switch>
-      <Switch checked loading>
+      <Switch checked hideLabel>
         Label text
       </Switch>
-      <button onClick={() => setLoadingState(!loadingState)}>
-        Toggle loading
-      </button>
-      <Switch loading={loadingState}>Label text</Switch>
     </div>
   );
 };

package/src/form/stories/text-field.stories.tsx

@@ -2,78 +2,82 @@ import React from "react";
 import { TextField } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 export default {
-  title: "ds-react/form/text-field",
+  title: "ds-react/form/TextField",
   component: TextField,
+  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 = () => {
-  return (
-    <div style={{ maxWidth: 400 }}>
-      <h1>TextField</h1>
-
-      <TextField label="Laborum excepteur" />
-
-      <h2>Description</h2>
-
-      <TextField
-        label="Laborum excepteur"
-        description={<div>Cillum mollit</div>}
-      />
+export const Default = (props) => {
+  return <TextField {...props} label="Ipsum enim quis culpa" />;
+};
 
-      <h2>Passord-type</h2>
-      <TextField label="Passord" type="password" />
+Default.args = {};
 
-      <h2>Errors</h2>
+export const Small = () => {
+  return <TextField size="small" label="Ipsum enim quis culpa" />;
+};
 
+export const Description = () => {
+  return (
+    <div className="colgap">
       <TextField
-        label="Laborum excepteur"
-        description="Cillum mollit"
-        error="TextField error"
+        label="Ipsum enim quis culpa"
+        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
       />
-
-      <h2>Sizing</h2>
-
       <TextField
+        label="Ipsum enim quis culpa"
+        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
         size="small"
-        label="Laborum excepteur"
-        description="Cillum mollit"
-        error="TextField error"
       />
+    </div>
+  );
+};
 
-      <h2>hideLabel</h2>
-
+export const Error = () => {
+  return (
+    <div className="colgap">
       <TextField
-        label="Laborum excepteur"
-        description="Cillum mollit"
-        hideLabel
+        label="Ipsum enim quis culpa"
+        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
       />
 
-      <h2>Disabled</h2>
-
-      <TextField
-        label="Laborum excepteur"
-        description="Cillum mollit"
-        disabled
-      />
       <TextField
+        label="Ipsum enim quis culpa"
+        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
         size="small"
-        label="Laborum excepteur"
-        description="Cillum mollit"
-        disabled
       />
-      <h2>Readonly</h2>
+    </div>
+  );
+};
 
-      <TextField
-        label="Laborum excepteur"
-        description="Cillum mollit"
-        readOnly
-      />
-      <TextField
-        label="Laborum excepteur"
-        description="Cillum mollit"
-        size="small"
-        readOnly
-      />
+export const Disabled = () => {
+  return (
+    <div className="colgap">
+      <TextField label="Ipsum enim quis culpa" disabled />
+      <TextField label="Ipsum enim quis culpa" disabled size="small" />
     </div>
   );
 };
+
+export const HideLabel = () => {
+  return <TextField label="Ipsum enim quis culpa" hideLabel />;
+};

package/src/form/stories/textarea.stories.tsx

@@ -1,104 +1,111 @@
-import React, { useState } from "react";
-import { Textarea } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
+import React from "react";
+import { Textarea } from "../index";
 export default {
-  title: "ds-react/form/textarea",
+  title: "ds-react/form/Textarea",
   component: Textarea,
+  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 [value, setValue] = useState("");
-
-  const handleChange = (e) => {
-    setValue(e.target.value);
-  };
-
+export const Default = (props) => {
   return (
-    <div style={{ maxWidth: 400 }}>
-      <h1>Textarea</h1>
-
-      <Textarea label="In anim elit" value={value} onChange={handleChange} />
-
-      <h2>Uncontrolled</h2>
-
-      <Textarea label="In anim elit" />
-
-      <h3>defaultValue</h3>
+    <Textarea
+      {...props}
+      maxLength={props?.maxLength ?? 100}
+      label="Ipsum enim quis culpa"
+    />
+  );
+};
 
-      <Textarea label="In anim elit" defaultValue="wat" />
+Default.args = {
+  maxLength: 100,
+};
 
-      <h2>Description</h2>
+export const Small = () => {
+  return <Textarea size="small" label="Ipsum enim quis culpa" />;
+};
 
+export const Description = () => {
+  return (
+    <div className="colgap">
       <Textarea
-        label="In anim elit"
-        description={<div>Reprehenderit esse proident</div>}
-        value={value}
-        onChange={handleChange}
+        label="Ipsum enim quis culpa"
+        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
       />
-
-      <h2>maxLength</h2>
-
       <Textarea
-        label="In anim elit"
-        description="Reprehenderit esse proident"
-        maxLength={400}
-        value={value}
-        onChange={handleChange}
+        label="Ipsum enim quis culpa"
+        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+        size="small"
       />
+    </div>
+  );
+};
 
-      <h2>Errors</h2>
-
+export const Error = () => {
+  return (
+    <div className="colgap">
       <Textarea
-        label="In anim elit"
-        description="Reprehenderit esse proident"
-        error="Textarea error"
-        maxLength={400}
-        value={value}
-        onChange={handleChange}
+        label="Ipsum enim quis culpa"
+        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
       />
 
-      <h2>Sizing</h2>
-
       <Textarea
-        label="In anim elit"
-        description="Reprehenderit esse proident"
-        maxLength={400}
+        label="Ipsum enim quis culpa"
+        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
         size="small"
-        value={value}
-        onChange={handleChange}
       />
+    </div>
+  );
+};
 
-      <h2>hideLabel</h2>
+export const Disabled = () => {
+  return (
+    <div className="colgap">
+      <Textarea label="Ipsum enim quis culpa" disabled />
+      <Textarea label="Ipsum enim quis culpa" disabled size="small" />
+    </div>
+  );
+};
 
-      <Textarea
-        label="In anim elit"
-        description="Reprehenderit esse proident"
-        maxLength={400}
-        hideLabel
-        value={value}
-        onChange={handleChange}
-      />
+export const HideLabel = () => {
+  return <Textarea label="Ipsum enim quis culpa" hideLabel />;
+};
 
-      <h2>Disabled</h2>
+export const MaxLength = () => {
+  return <Textarea maxLength={200} label="Ipsum enim quis culpa" />;
+};
 
-      <Textarea
-        label="In anim elit"
-        description="Reprehenderit esse proident"
-        maxLength={400}
-        disabled
-        value="Consectetur commodo mollit voluptate esse minim elit deserunt fugiat consectetur laboris."
-        onChange={handleChange}
-      />
-      <h2>Readonly</h2>
+export const MinRows = () => {
+  return <Textarea minRows={5} label="Ipsum enim quis culpa" />;
+};
 
-      <Textarea
-        label="In anim elit"
-        description="Reprehenderit esse proident"
-        maxLength={400}
-        readOnly
-        value="Consectetur commodo mollit voluptate esse minim elit deserunt fugiat consectetur laboris."
-        onChange={handleChange}
-      />
-    </div>
+export const MaxRows = () => {
+  return (
+    <Textarea
+      maxRows={3}
+      value={
+        "Aute fugiat ut culpa enim ad culpa proident adipisicing anim proident ipsum elit. Cillum Lorem magna nisi cupidatat consequat culpa. Veniam ex quis elit dolore ea cupidatat fugiat in. Sint proident magna duis consequat velit ea velit pariatur in dolore ad. Aliqua officia nostrud veniam pariatur eu sint elit qui amet."
+      }
+      label="Ipsum enim quis culpa"
+    />
   );
 };