@navikt/ds-react 0.19.8 → 0.19.11

package/src/typography/typography.stories.tsx

@@ -1,137 +1,210 @@
+import { Meta } from "@storybook/react";
 import React from "react";
 import {
-  Heading,
-  BodyShort,
-  BodyLong,
-  Detail,
-  Ingress,
-  Label,
-  ErrorMessage,
+  BodyLong as DsBodyLong,
+  BodyShort as DsBodyShort,
+  Detail as DsDetail,
+  ErrorMessage as DsErrorMessage,
+  Ingress as DsIngress,
+  Label as DsLabel,
 } from "..";
 
 export default {
-  title: "ds-react/typography",
-  component: BodyLong,
+  title: "ds-react/Typography",
+  component: DsBodyLong,
+  subcomponents: {
+    DsBodyShort,
+    DsDetail,
+    DsErrorMessage,
+    DsIngress,
+    DsLabel,
+  },
+  argTypes: {
+    size: {
+      defaultValue: "large",
+      control: {
+        type: "radio",
+        options: ["medium", "small"],
+      },
+    },
+    component: {
+      defaultValue: "BodyLong",
+      control: {
+        type: "radio",
+        options: [
+          "BodyLong",
+          "BodyShort",
+          "Detail",
+          "Ingress",
+          "Label",
+          "ErrorMessage",
+        ],
+      },
+    },
+  },
+} as Meta;
+
+const lorem =
+  "Velit quis in laborum occaecat laborum magna id nisi veniam aliqua velit amet non. In quis sit proident dolore reprehenderit laborum aliquip";
+
+const compMap = {
+  BodyLong: DsBodyLong,
+  BodyShort: DsBodyShort,
+  Detail: DsDetail,
+  Ingress: DsIngress,
+  Label: DsLabel,
+  ErrorMessage: DsErrorMessage,
 };
 
-const lorem = () => <>Veniam consequat cillum pariatur officia duis</>;
-
-const TitleTemplate = ({ level, size, spacing }) => (
-  <Heading spacing={spacing} size={size} level={level}>
-    {lorem()}
-  </Heading>
-);
+export const Default = (props) => {
+  const Comp = compMap[props.component];
+  return <Comp {...props}>{lorem}</Comp>;
+};
 
-export const HeadingStory = TitleTemplate.bind({});
-HeadingStory.args = { level: 1, size: "xlarge", spacing: false };
+Default.args = {
+  spacing: false,
+};
 
-const IngressTemplate = ({ spacing }) => (
-  <Ingress spacing={spacing}>{lorem()}</Ingress>
+export const Ingress = () => (
+  <>
+    <DsIngress spacing>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsIngress>
+    <DsIngress>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsIngress>
+  </>
 );
 
-export const IngressStory = IngressTemplate.bind({});
-IngressStory.args = { spacing: false };
+export const BodyLong = () => (
+  <>
+    <DsBodyLong spacing>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip. Aute amet
+      occaecat ex aliqua irure elit labore pariatur. Proident pariatur proident
+      pariatur magna consequat velit id commodo quis sunt tempor ullamco aliquip
+      pariatur.
+    </DsBodyLong>
+    <DsBodyLong>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip. Aute amet
+      occaecat ex aliqua irure elit labore pariatur. Proident pariatur proident
+      pariatur magna consequat velit id commodo quis sunt tempor ullamco aliquip
+      pariatur.
+    </DsBodyLong>
+  </>
+);
 
-const BodyLongTemplate = ({ spacing, size }) => (
-  <BodyLong size={size} spacing={spacing}>
-    {lorem()}
-  </BodyLong>
+export const BodyLongSmall = () => (
+  <>
+    <DsBodyLong size="small" spacing>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip. Aute amet
+      occaecat ex aliqua irure elit labore pariatur. Proident pariatur proident
+      pariatur magna consequat velit id commodo quis sunt tempor ullamco aliquip
+      pariatur.
+    </DsBodyLong>
+    <DsBodyLong size="small">
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip. Aute amet
+      occaecat ex aliqua irure elit labore pariatur. Proident pariatur proident
+      pariatur magna consequat velit id commodo quis sunt tempor ullamco aliquip
+      pariatur.
+    </DsBodyLong>
+  </>
 );
 
-export const BodyLongStory = BodyLongTemplate.bind({});
-BodyLongStory.args = { spacing: false, size: "medium" };
+export const BodyShort = () => (
+  <>
+    <DsBodyShort spacing>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsBodyShort>
+    <DsBodyShort>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsBodyShort>
+  </>
+);
 
-const BodyShortTemplate = ({ spacing, size }) => (
-  <BodyShort size={size} spacing={spacing}>
-    {lorem()}
-  </BodyShort>
+export const BodyShortSmall = () => (
+  <>
+    <DsBodyShort size="small" spacing>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsBodyShort>
+    <DsBodyShort size="small">
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsBodyShort>
+  </>
 );
 
-export const BodyShortStory = BodyShortTemplate.bind({});
-BodyShortStory.args = { spacing: false, size: "medium" };
+export const Label = () => (
+  <>
+    <DsLabel spacing>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsLabel>
+    <DsLabel>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsLabel>
+  </>
+);
 
-const LabelTemplate = ({ spacing, size }) => (
-  <Label size={size} spacing={spacing}>
-    {lorem()}
-  </Label>
+export const LabelSmall = () => (
+  <>
+    <DsLabel size="small" spacing>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsLabel>
+    <DsLabel size="small">
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsLabel>
+  </>
 );
 
-export const LabelStory = LabelTemplate.bind({});
-LabelStory.args = { spacing: false, size: "medium" };
+export const Detail = () => (
+  <>
+    <DsDetail spacing>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsDetail>
+    <DsDetail>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsDetail>
+  </>
+);
 
-const DetailTemplate = ({ spacing, size, uppercase }) => (
-  <Detail size={size} spacing={spacing} uppercase={uppercase}>
-    {lorem()}
-  </Detail>
+export const DetailUppercase = () => (
+  <>
+    <DsDetail spacing uppercase>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsDetail>
+    <DsDetail uppercase>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsDetail>
+  </>
 );
 
-export const DetailStory = DetailTemplate.bind({});
-DetailStory.args = { spacing: false, uppercase: false, size: "medium" };
+export const DetailSmall = () => (
+  <>
+    <DsDetail size="small" spacing>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsDetail>
+    <DsDetail size="small">
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsDetail>
+  </>
+);
 
-const ErrorMessageTemplate = ({ size }) => (
-  <ErrorMessage size={size}>{lorem()}</ErrorMessage>
+export const ErrorMessage = () => (
+  <>
+    <DsErrorMessage spacing>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsErrorMessage>
+    <DsErrorMessage>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsErrorMessage>
+  </>
 );
 
-export const ErrorMessageStory = ErrorMessageTemplate.bind({});
-ErrorMessageStory.args = { size: "medium" };
-
-export const SideInnholdEksempel = () => {
-  return (
-    <div style={{ maxWidth: 600 }}>
-      <Heading level={"1"} size="xlarge" spacing>
-        Title lvl 1 xlarge
-      </Heading>
-      <BodyLong spacing>
-        BodyLong: Aliqua ad et nisi commodo sit excepteur in commodo proident
-        proident. Nostrud consectetur dolore eu nostrud aliqua. Adipisicing
-        labore aliqua qui velit amet ea amet do. Magna anim velit et incididunt.
-        Lorem ad pariatur pariatur quis magna cupidatat. Exercitation officia
-        occaecat occaecat id nulla fugiat laborum elit laboris non est ex
-        nostrud occaecat. Commodo laboris veniam cillum in aute.
-      </BodyLong>
-      <BodyLong spacing>
-        BodyLong: Cillum consequat velit est ea voluptate. Et elit irure magna
-        sit consequat mollit excepteur ad non excepteur velit exercitation aute.
-        Fugiat deserunt quis nulla cupidatat esse quis ex. Laborum eiusmod culpa
-        labore eu irure quis laborum. Irure veniam et nostrud do. Quis ut ea est
-        culpa tempor anim.
-      </BodyLong>
-      <BodyLong spacing>
-        BodyLong: Dolore commodo ad veniam commodo aute voluptate est officia
-        sunt proident irure consectetur excepteur.
-      </BodyLong>
-      <Heading level={"2"} size="xlarge" spacing>
-        Title lvl 2 large
-      </Heading>
-      <Ingress spacing>
-        Ingress: Mollit incididunt incididunt officia amet est et non aliqua
-        officia nulla et aute aliqua culpa.
-      </Ingress>
-      <BodyLong spacing>
-        BodyLong: Commodo veniam enim laborum pariatur excepteur commodo do
-        cillum. Nisi elit sunt commodo id in adipisicing cupidatat dolore dolore
-        et tempor cupidatat. Cillum quis sunt in dolor occaecat.
-      </BodyLong>
-      <BodyLong spacing>
-        BodyLong: Irure dolore laborum amet occaecat ex laboris mollit
-        reprehenderit nisi laborum voluptate laborum. Ipsum eu sint laborum
-        adipisicing ut incididunt laborum laborum. Ipsum non amet laboris quis
-        Lorem est laborum qui pariatur ex eu. Eiusmod proident amet esse ex.
-      </BodyLong>
-      <BodyLong size="small" spacing>
-        BodyLong small: Irure dolore laborum amet occaecat ex laboris mollit
-        reprehenderit nisi laborum voluptate laborum. Ipsum eu sint laborum
-        adipisicing ut incididunt laborum laborum. Ipsum non amet laboris quis
-        Lorem est laborum qui pariatur ex eu. Eiusmod proident amet esse ex.
-      </BodyLong>
-      <BodyShort spacing>
-        BodyShort: Id consectetur velit sunt laboris consequat ullamco
-        incididunt.
-      </BodyShort>
-      <BodyShort size="small" spacing>
-        BodyShort small: Sunt amet officia sit excepteur sit pariatur sit
-        reprehenderit irure ipsum.
-      </BodyShort>
-    </div>
-  );
-};
+export const ErrorMessageSmall = () => (
+  <>
+    <DsErrorMessage size="small" spacing>
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsErrorMessage>
+    <DsErrorMessage size="small">
+      Deserunt veniam eu fugiat ad est occaecat aliqua nisi aliquip.
+    </DsErrorMessage>
+  </>
+);

package/src/guide-panel/stories/example.css

@@ -1,13 +0,0 @@
-.sb-guidepanel__tokens--purple {
-  --navds-guide-panel-color-border: var(--navds-global-color-purple-400);
-  --navds-guide-panel-color-illustration-background: var(
-    --navds-global-color-purple-200
-  );
-}
-
-.sb-guidepanel__tokens--green {
-  --navds-guide-panel-color-border: var(--navds-global-color-green-400);
-  --navds-guide-panel-color-illustration-background: var(
-    --navds-global-color-green-200
-  );
-}

package/src/guide-panel/stories/guidepanel.stories.mdx

@@ -1,81 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { Button, Loader, GuidePanel } from "../../index";
-import { Success } from "@navikt/ds-react";
-import "./example.css";
-
-<Meta title="ds-react/guidepanel/intro" />
-
-# Hvordan ta i bruk GuidePanel
-
-```jsx
-<GuidePanel>
-  Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
-</GuidePanel>
-```
-
-<Canvas>
-  <GuidePanel>
-    Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
-  </GuidePanel>
-</Canvas>
-
-## Varianter
-
-`poster` endrer på plassering av illustrasjon
-
-<Canvas>
-  <GuidePanel>
-    Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
-  </GuidePanel>
-  <GuidePanel poster>
-    Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
-  </GuidePanel>
-</Canvas>
-
-## Fargebruk
-
-Istedenfor fargetema/themes slik som tidligere veileder brukte velger man nå selv farge på border/illustrasjons-bakgrunn ved å
-overskrive tokens. Det anbefalses å gjøre dette med eks Styled-Components eller css-klasser, men kan inlines også
-
-```css
-/* Tokens */
---navds-guide-panel-color-border
---navds-guide-panel-color-illustration-background
-```
-
-```jsx
-/* Css */
-<GuidePanel className="sb-guidepanel__tokens--purple">
-    Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
-  </GuidePanel>
-  <GuidePanel className="sb-guidepanel__tokens--green">
-    Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
-  </GuidePanel>
-
-/* Inline */
-<GuidePanel
-  style={{
-    ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
-    ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
-  }}
->
-    Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
-  </GuidePanel>
-<GuidePanel
-    style={{
-    ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
-    ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
-  }}
->
-  Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
-</GuidePanel>
-```
-
-<Canvas>
-  <GuidePanel className="sb-guidepanel__tokens--purple">
-    Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
-  </GuidePanel>
-  <GuidePanel className="sb-guidepanel__tokens--green">
-    Cupidatat proident adipisicing eu nulla laborum dolore irure aliqua.
-  </GuidePanel>
-</Canvas>

package/src/guide-panel/stories/guidepanel.stories.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import { GuidePanel } from "../index";
-import { Meta } from "@storybook/react/types-6-0";
-export default {
-  title: "ds-react/guidepanel",
-  component: GuidePanel,
-} as Meta;
-
-const panelText = `Sit sint eu dolore reprehenderit exercitation labore aute anim sit
-adipisicing proident. Tempor ipsum ea cupidatat qui esse do veniam
-cupidatat. Excepteur irure reprehenderit esse tempor nisi duis qui ea
-enim id.`;
-
-export const All = () => {
-  return (
-    <div>
-      <h1>GuidePanel</h1>
-      <GuidePanel>{panelText}</GuidePanel>
-      <h2>GuidePanel poster</h2>
-      <GuidePanel poster>{panelText}</GuidePanel>
-      <h2>custom colors</h2>
-      <GuidePanel
-        style={{
-          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-purple-200)",
-          ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-purple-400)",
-        }}
-      >
-        {panelText}
-      </GuidePanel>
-      <GuidePanel
-        style={{
-          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-green-200)",
-          ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-green-400)",
-        }}
-      >
-        {panelText}
-      </GuidePanel>
-      <GuidePanel
-        style={{
-          ["--navds-guide-panel-color-illustration-background" as any]: "var(--navds-global-color-orange-200)",
-          ["--navds-guide-panel-color-border" as any]: "var(--navds-global-color-orange-400)",
-        }}
-      >
-        {panelText}Ullamco reprehenderit fugiat reprehenderit ad nisi aliqua
-        irure enim id nisi do non magna. Nisi ut incididunt dolor aliqua
-        adipisicing. Cupidatat sint et qui minim sint aute anim non Lorem
-        reprehenderit id et excepteur. Consectetur velit aliqua eiusmod sit. Sit
-        velit minim consectetur deserunt Lorem non elit fugiat consectetur sunt
-        aliqua Lorem minim. Ullamco dolor mollit laboris velit deserunt nisi
-        ipsum minim dolor ad cillum in id do.
-        {panelText}Ullamco reprehenderit fugiat reprehenderit ad nisi aliqua
-        irure enim id nisi do non magna. Nisi ut incididunt dolor aliqua
-        adipisicing. Cupidatat sint et qui minim sint aute anim non Lorem
-        reprehenderit id et excepteur. Consectetur velit aliqua eiusmod sit. Sit
-        velit minim consectetur deserunt Lorem non elit fugiat consectetur sunt
-        aliqua Lorem minim. Ullamco dolor mollit laboris velit deserunt nisi
-        ipsum minim dolor ad cillum in id do.
-        {panelText}Ullamco reprehenderit fugiat reprehenderit ad nisi aliqua
-        irure enim id nisi do non magna. Nisi ut incididunt dolor aliqua
-        adipisicing. Cupidatat sint et qui minim sint aute anim non Lorem
-        reprehenderit id et excepteur. Consectetur velit aliqua eiusmod sit. Sit
-        velit minim consectetur deserunt Lorem non elit fugiat consectetur sunt
-        aliqua Lorem minim. Ullamco dolor mollit laboris velit deserunt nisi
-        ipsum minim dolor ad cillum in id do.
-      </GuidePanel>
-    </div>
-  );
-};

package/src/link/stories/link.stories.mdx

@@ -1,26 +0,0 @@
-import { Meta, Canvas } from "@storybook/addon-docs";
-import { Link } from "../../index";
-import { Add } from "@navikt/ds-icons";
-
-<Meta title="ds-react/link/intro" />
-
-# Hvordan ta i bruk Link
-
-Komponeten skal være nesten 1-1 med nav-frontend-lenker for de som er kjent med den.
-
-```jsx
-<Link href="#">Dette er en tekstlenke</Link>
-```
-
-<Canvas>
-  <Link href="#">Dette er en tekstlenke</Link>
-</Canvas>
-
-## Med ikon
-
-<Canvas>
-  <Link href="#">
-    <span>Dette er en tekstlenke</span>
-    <Add />
-  </Link>
-</Canvas>

package/src/link/stories/link.stories.tsx

@@ -1,53 +0,0 @@
-import React from "react";
-import { Link } from "..";
-import { Add } from "@navikt/ds-icons";
-import { Alert } from "../..";
-import { ConfirmationPanel } from "../../form";
-export default {
-  title: "ds-react/link",
-  component: Link,
-};
-
-export const All = () => {
-  return (
-    <>
-      <h1>Link</h1>
-      <Link href="#">Dette er en tekstlenke</Link>
-      <h2>Icon after</h2>
-      <Link href="#">
-        <span>Dette er en tekstlenke</span>
-        <Add />
-      </Link>
-      <h2>Icon before</h2>
-      <Link href="#">
-        <Add />
-        <span>Dette er en tekstlenke </span>
-      </Link>
-      <h2>På farget bakgrunn</h2>
-      <Alert variant="error">
-        Her er en <Link href="#about">lenke</Link> på farget bakgrunn
-      </Alert>
-      <Alert variant="info">
-        Her er en <Link href="#about">lenke</Link> på farget bakgrunn
-      </Alert>
-      <Alert variant="success">
-        Her er en <Link href="#about">lenke</Link> på farget bakgrunn
-      </Alert>
-      <Alert variant="warning">
-        Her er en <Link href="#about">lenke</Link> på farget bakgrunn
-      </Alert>
-      <ConfirmationPanel label="Samtykke?" checked={false} error="feilmelding">
-        Her er en <Link href="#about">lenke</Link> på farget bakgrunn
-      </ConfirmationPanel>
-      <ConfirmationPanel label="Samtykke?" checked error="feilmelding">
-        Her er en <Link href="#about">lenke</Link> på farget bakgrunn
-      </ConfirmationPanel>
-      <ConfirmationPanel label="Samtykke?" checked={false}>
-        Her er en <Link href="#about">lenke</Link> på farget bakgrunn
-      </ConfirmationPanel>
-      <ConfirmationPanel label="Samtykke?" checked>
-        Her er en <Link href="#about">lenke</Link> på farget bakgrunn
-      </ConfirmationPanel>
-    </>
-  );
-};