@navikt/ds-react 0.19.9 → 0.19.10

package/_docs.json

@@ -2783,7 +2783,7 @@
         ],
         "required": false,
         "type": {
-          "name": "\"2xlarge\" | \"xlarge\" | \"large\" | \"medium\" | \"small\" | \"xsmall\""
+          "name": "\"3xlarge\" | \"2xlarge\" | \"xlarge\" | \"large\" | \"medium\" | \"small\" | \"xsmall\""
         }
       },
       "title": {

package/cjs/loader/Loader.js

@@ -48,7 +48,7 @@ exports.Loader = (0, react_1.forwardRef)((_a, ref) => {
             "navds-loader--transparent": transparent,
         }), focusable: "false", viewBox: "0 0 50 50", preserveAspectRatio: "xMidYMid" }, rest),
         react_1.default.createElement("title", { id: id !== null && id !== void 0 ? id : `loader-${internalId}` }, title),
-        react_1.default.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5" }),
-        react_1.default.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-global-color-gray-400)", fill: "none", strokeWidth: "5", strokeDasharray: "50 155", strokeLinecap: "round" })));
+        react_1.default.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none" }),
+        react_1.default.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-global-color-gray-400)", fill: "none", strokeDasharray: "50 155" })));
 });
 exports.default = exports.Loader;

package/esm/loader/Loader.d.ts

@@ -5,7 +5,7 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
      * 64px | 40px | 32px | 24px | 20px | 16px
      * @default "medium"
      */
-    size?: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
+    size?: "3xlarge" | "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
     /**
      * Title prop on svg
      * @default "venter..."

package/esm/loader/Loader.js

@@ -19,8 +19,8 @@ export const Loader = forwardRef((_a, ref) => {
             "navds-loader--transparent": transparent,
         }), focusable: "false", viewBox: "0 0 50 50", preserveAspectRatio: "xMidYMid" }, rest),
         React.createElement("title", { id: id !== null && id !== void 0 ? id : `loader-${internalId}` }, title),
-        React.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none", strokeWidth: "5" }),
-        React.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-global-color-gray-400)", fill: "none", strokeWidth: "5", strokeDasharray: "50 155", strokeLinecap: "round" })));
+        React.createElement("circle", { className: "navds-loader__background", xmlns: "http://www.w3.org/2000/svg", cx: "25", cy: "25", r: "20", fill: "none" }),
+        React.createElement("circle", { className: "navds-loader__foreground", cx: "25", cy: "25", r: "20", stroke: "var(--navds-global-color-gray-400)", fill: "none", strokeDasharray: "50 155" })));
 });
 export default Loader;
 //# sourceMappingURL=Loader.js.map

package/esm/loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/loader/Loader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AA0B3B,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,WAAW,EACnB,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,SAAS,EACnB,EAAE,OAEH,EADI,IAAI,cART,0EASC,CADQ;IAIT,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAE3B,OAAO,CACL,8DACmB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,EAC7C,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,cAAc,EACd,SAAS,EACT,iBAAiB,IAAI,EAAE,EACvB,iBAAiB,OAAO,EAAE,EAC1B;YACE,2BAA2B,EAAE,WAAW;SACzC,CACF,EACD,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,UAAU,IAC1B,IAAI;QAER,+BAAO,EAAE,EAAE,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,IAAG,KAAK,CAAS;QACxD,gCACE,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAC,4BAA4B,EAClC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,GACf;QACF,gCACE,SAAS,EAAC,0BAA0B,EACpC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAE,oCAAoC,EAC5C,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,GAAG,EACf,eAAe,EAAC,QAAQ,EACxB,aAAa,EAAC,OAAO,GACrB,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Loader.js","sourceRoot":"","sources":["../../src/loader/Loader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAY,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAiC3B,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAC9B,CACE,EASC,EACD,GAAG,EACH,EAAE;QAXF,EACE,QAAQ,EACR,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,KAAK,GAAG,WAAW,EACnB,WAAW,GAAG,KAAK,EACnB,OAAO,GAAG,SAAS,EACnB,EAAE,OAEH,EADI,IAAI,cART,0EASC,CADQ;IAIT,MAAM,UAAU,GAAG,KAAK,EAAE,CAAC;IAE3B,OAAO,CACL,8DACmB,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,EAC7C,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,cAAc,EACd,SAAS,EACT,iBAAiB,IAAI,EAAE,EACvB,iBAAiB,OAAO,EAAE,EAC1B;YACE,2BAA2B,EAAE,WAAW;SACzC,CACF,EACD,SAAS,EAAC,OAAO,EACjB,OAAO,EAAC,WAAW,EACnB,mBAAmB,EAAC,UAAU,IAC1B,IAAI;QAER,+BAAO,EAAE,EAAE,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,UAAU,UAAU,EAAE,IAAG,KAAK,CAAS;QACxD,gCACE,SAAS,EAAC,0BAA0B,EACpC,KAAK,EAAC,4BAA4B,EAClC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,IAAI,EAAC,MAAM,GACX;QACF,gCACE,SAAS,EAAC,0BAA0B,EACpC,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAE,oCAAoC,EAC5C,IAAI,EAAC,MAAM,EACX,eAAe,EAAC,QAAQ,GACxB,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "0.19.9",
+  "version": "0.19.10",
   "description": "NAV designsystem react components",
   "author": "NAV Designsystem team",
   "license": "MIT",
@@ -76,5 +76,5 @@
     "@types/react": "^17.0.30 || ^18.0.0",
     "react": "^17.0.0 || ^18.0.0"
   },
-  "gitHead": "e586812ddffa50fc5aad663c30121ba09ae2ffef"
+  "gitHead": "3e0e9ad15c93d9a3cd82d6d9a353cb0c4da0d8b6"
 }

package/src/alert/alert.stories.tsx

@@ -5,6 +5,15 @@ import { BodyLong, Heading as DsHeading } from "..";
 export default {
   title: "ds-react/Alert",
   component: Alert,
+  argTypes: {
+    variant: {
+      defaultValue: "info",
+      control: {
+        type: "radio",
+        options: ["error", "warning", "info", "success"],
+      },
+    },
+  },
 };
 
 const variants: Array<"error" | "warning" | "info" | "success"> = [
@@ -26,7 +35,6 @@ export const Default = (props) => (
 );
 
 Default.args = {
-  variant: "info",
   children: "Id elit esse enim reprehenderit enim nisi veniam nostrud.",
 };
 

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

@@ -0,0 +1,51 @@
+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 Default = (props) => {
+  const newProps = props?.colorOverride
+    ? {
+        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)",
+        },
+      }
+    : {};
+
+  return (
+    <GuidePanel {...newProps} poster={props?.poster}>
+      {panelText}
+    </GuidePanel>
+  );
+};
+
+Default.args = {
+  poster: false,
+  colorOverride: false,
+};
+
+export const Poster = () => <GuidePanel poster>{panelText}</GuidePanel>;
+
+export const ColorOverride = () => (
+  <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>
+);

package/src/help-text/help-text.stories.tsx

@@ -2,27 +2,62 @@ import React from "react";
 import { TextField, HelpText } from "..";
 
 export default {
-  title: "ds-react/help-text",
+  title: "ds-react/HelpText",
   component: HelpText,
+  argTypes: {
+    placement: {
+      control: {
+        type: "radio",
+        options: [
+          "bottom",
+          "right",
+          "left",
+          "top-start",
+          "top-end",
+          "bottom-start",
+          "bottom-end",
+          "right-start",
+          "right-end",
+          "left-start",
+          "left-end",
+          "auto",
+          "auto-start",
+          "auto-end",
+        ],
+      },
+    },
+    strategy: {
+      control: {
+        type: "radio",
+        options: ["fixed", "absolute"],
+      },
+    },
+  },
 };
 
-export const All = () => {
+export const Default = (props: any) => {
   return (
-    <>
-      <h1>HelpText</h1>
-      <HelpText title="show tooltip">
-        Id ullamco excepteur elit fugiat labore.
-      </HelpText>
-      <TextField
-        label={
-          <div style={{ display: "flex", gap: 8 }}>
-            Text field label
-            <HelpText title="show tooltip">
-              Id ullamco excepteur elit fugiat labore.
-            </HelpText>
-          </div>
-        }
-      ></TextField>
-    </>
+    <HelpText title="show tooltip" strategy="fixed" {...props}>
+      Id ullamco excepteur elit fugiat labore.
+    </HelpText>
+  );
+};
+
+Default.args = {
+  title: "show tooltip",
+};
+
+export const Inline = () => {
+  return (
+    <TextField
+      label={
+        <div style={{ display: "flex", gap: 8 }}>
+          Text field label
+          <HelpText title="show tooltip">
+            Id ullamco excepteur elit fugiat labore.
+          </HelpText>
+        </div>
+      }
+    />
   );
 };

package/src/link/link.stories.tsx

@@ -0,0 +1,77 @@
+import { Add } from "@navikt/ds-icons";
+import React from "react";
+import { ConfirmationPanel as DsConfirmationPanel, Link } from "..";
+import { Alert as DsAlert, BodyLong } from "../..";
+export default {
+  title: "ds-react/Link",
+  component: Link,
+};
+
+export const Default = (props) => {
+  const LinkD = () => (
+    <Link href="#">
+      {props.icon && <Add />}Ex aliqua incididunt {props.icon && <Add />}
+    </Link>
+  );
+
+  if (props.inline) {
+    return (
+      <BodyLong>
+        Incididunt laborum nisi nisi Lorem <LinkD /> in. Laborum aute fugiat
+        officia adipisicing non veniam dolor nulla non ex consectetur fugiat
+        eiusmod aute. Culpa sit aute est duis minim in in voluptate velit
+        fugiat. Laboris est id deserunt ut ea Lorem eu. Esse elit laboris aute
+        commodo sint laborum fugiat aliqua.
+      </BodyLong>
+    );
+  }
+  return <LinkD />;
+};
+
+Default.args = {
+  icon: false,
+  inline: false,
+};
+
+const DemoLink = () => (
+  <Link href="#">
+    <Add aria-hidden /> Ex aliqua incididunt <Add aria-hidden />
+  </Link>
+);
+
+export const Icon = () => <DemoLink />;
+
+export const Alert = () => {
+  return (
+    <div className="colgap">
+      <DsAlert variant="info">
+        <DemoLink />
+      </DsAlert>
+      <DsAlert variant="success">
+        <DemoLink />
+      </DsAlert>
+      <DsAlert variant="warning">
+        <DemoLink />
+      </DsAlert>
+      <DsAlert variant="error">
+        <DemoLink />
+      </DsAlert>
+    </div>
+  );
+};
+
+export const ConfirmationPanel = () => {
+  return (
+    <div className="colgap">
+      <DsConfirmationPanel label="demo">
+        <DemoLink />
+      </DsConfirmationPanel>
+      <DsConfirmationPanel checked label="demo">
+        <DemoLink />
+      </DsConfirmationPanel>
+      <DsConfirmationPanel error="demo" label="demo">
+        <DemoLink />
+      </DsConfirmationPanel>
+    </div>
+  );
+};

package/src/link-panel/link-panel.stories.tsx

@@ -0,0 +1,57 @@
+import { Meta } from "@storybook/react/types-6-0";
+import React from "react";
+import { LinkPanel } from "..";
+
+export default {
+  title: "ds-react/LinkPanel",
+  component: LinkPanel,
+  argTypes: {
+    border: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+} as Meta;
+
+export const Default = (props: any) => {
+  return (
+    <LinkPanel href="#" border={props?.border}>
+      <LinkPanel.Title>
+        Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+      </LinkPanel.Title>
+      {props.description && (
+        <LinkPanel.Description>
+          Aliqua id aliquip Lorem esse
+        </LinkPanel.Description>
+      )}
+    </LinkPanel>
+  );
+};
+
+Default.args = {
+  description: false,
+};
+
+export const Description = () => {
+  return (
+    <LinkPanel href="#">
+      <LinkPanel.Title>
+        Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+      </LinkPanel.Title>
+      <LinkPanel.Description>
+        Aliqua id aliquip Lorem esse
+      </LinkPanel.Description>
+    </LinkPanel>
+  );
+};
+
+export const NoBorder = () => {
+  return (
+    <LinkPanel href="#" border={false}>
+      <LinkPanel.Title>
+        Consectetur eu duis aliqua eu irure fugiat fugiat eu.
+      </LinkPanel.Title>
+    </LinkPanel>
+  );
+};

package/src/loader/Loader.tsx

@@ -8,7 +8,14 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
    * 64px | 40px | 32px | 24px | 20px | 16px
    * @default "medium"
    */
-  size?: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
+  size?:
+    | "3xlarge"
+    | "2xlarge"
+    | "xlarge"
+    | "large"
+    | "medium"
+    | "small"
+    | "xsmall";
   /**
    * Title prop on svg
    * @default "venter..."
@@ -68,7 +75,6 @@ export const Loader = forwardRef<SVGSVGElement, LoaderProps>(
           cy="25"
           r="20"
           fill="none"
-          strokeWidth="5"
         />
         <circle
           className="navds-loader__foreground"
@@ -77,9 +83,7 @@ export const Loader = forwardRef<SVGSVGElement, LoaderProps>(
           r="20"
           stroke={"var(--navds-global-color-gray-400)"}
           fill="none"
-          strokeWidth="5"
           strokeDasharray="50 155"
-          strokeLinecap="round"
         />
       </svg>
     );

package/src/loader/loader.stories.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+import { Loader } from "..";
+import { Meta } from "@storybook/react/types-6-0";
+export default {
+  title: "ds-react/Loader",
+  component: Loader,
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: [
+          "3xlarge",
+          "2xlarge",
+          "xlarge",
+          "large",
+          "medium",
+          "small",
+          "xsmall",
+        ],
+      },
+    },
+    variant: {
+      control: {
+        type: "radio",
+        options: ["neutral", "interaction", "inverted"],
+      },
+    },
+  },
+} as Meta;
+
+export const Default = (props: any) => {
+  return <Loader {...props} />;
+};
+
+Default.args = {
+  transparent: false,
+};
+
+export const Size = () => (
+  <div>
+    <Loader size="3xlarge" />
+    <Loader size="2xlarge" />
+    <Loader size="xlarge" />
+    <Loader size="large" />
+    <Loader size="medium" />
+    <Loader size="small" />
+    <Loader size="xsmall" />
+  </div>
+);
+
+export const Variant = () => (
+  <div className="colgap">
+    <div>
+      <Loader size="3xlarge" variant="neutral" />
+      <Loader size="3xlarge" variant="inverted" />
+      <Loader size="3xlarge" variant="interaction" />
+    </div>
+    <div style={{ backgroundColor: "#292929" }}>
+      <Loader size="3xlarge" variant="neutral" />
+      <Loader size="3xlarge" variant="inverted" />
+      <Loader size="3xlarge" variant="interaction" />
+    </div>
+  </div>
+);
+
+export const Transparent = () => (
+  <div className="colgap">
+    <div>
+      <Loader size="3xlarge" transparent variant="neutral" />
+      <Loader size="3xlarge" transparent variant="inverted" />
+      <Loader size="3xlarge" transparent variant="interaction" />
+    </div>
+    <div style={{ backgroundColor: "#292929" }}>
+      <Loader size="3xlarge" transparent variant="neutral" />
+      <Loader size="3xlarge" transparent variant="inverted" />
+      <Loader size="3xlarge" transparent variant="interaction" />
+    </div>
+  </div>
+);

package/src/modal/modal.stories.tsx

@@ -1,69 +1,102 @@
-import React, { useState } from "react";
-import { Modal } from "../..";
+import React, { useEffect, useState } from "react";
+import { BodyLong, Button, Heading, Modal } from "../..";
 
 export default {
-  title: "ds-react/modal",
+  title: "ds-react/Modal",
   component: Modal,
+  parameters: {
+    chromatic: { delay: 1000 },
+  },
 };
 
-Modal.setAppElement("#root");
+export const Default = (props) => {
+  const [open, setOpen] = useState(false);
 
-export const All = () => {
-  const [open, setOpen] = useState(true);
-  const [openTwo, setOpenTwo] = useState(false);
-  const [openThree, setOpenThree] = useState(false);
+  useEffect(() => {
+    Modal.setAppElement("#root");
+  }, []);
 
   return (
     <>
-      <button onClick={() => setOpen(true)}>Open modal</button>
+      <Button onClick={() => setOpen(true)}>Open</Button>
       <Modal
         open={open}
         onClose={() => setOpen(false)}
         aria-labelledby="header123"
+        {...props}
       >
         <Modal.Content>
-          <h1 id="header123">Header</h1>
-          <h2>subheader</h2>
-          <p>Cupidatat irure ipsum veniam ad in esse.</p>
-          <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
+          <Heading spacing id="header123" level="1" size="large">
+            Header
+          </Heading>
+          <Heading spacing level="2" size="medium">
+            Header
+          </Heading>
+          <BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
         </Modal.Content>
       </Modal>
+    </>
+  );
+};
+
+Default.args = {
+  shouldCloseOnOverlayClick: true,
+  closeButton: true,
+};
 
-      <button onClick={() => setOpenTwo(true)}>
-        Open modal,shouldCloseOnOverlayClick false{" "}
-      </button>
+export const Open = () => {
+  const [open, setOpen] = useState(null);
+
+  useEffect(() => {
+    Modal.setAppElement("#root");
+  }, []);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open</Button>
       <Modal
-        shouldCloseOnOverlayClick={false}
-        open={openTwo}
-        onClose={() => setOpenTwo(false)}
+        open={open ?? true}
+        onClose={() => setOpen(false)}
         aria-labelledby="header123"
       >
         <Modal.Content>
-          <h1 id="header123">Header</h1>
-          <h2>subheader</h2>
-          <p>
-            Cupidatat irure ipsum veniam ad in esse. Voluptate do nulla amet
-            laboris ea ex aliquip. Dolore dolore reprehenderit sint esse commodo
-            aliqua cupidatat incididunt proident laborum qui. Officia fugiat non
-            anim cupidatat. Adipisicing ut aliqua cillum nulla elit. Mollit et
-            id duis cupidatat labore magna consectetur et veniam tempor. In
-            minim exercitation id irure velit sit dolor aliquip velit esse.
-            Excepteur sint non minim nulla excepteur labore non magna eu.
-          </p>
+          <Heading spacing id="header123" level="1" size="large">
+            Header
+          </Heading>
+          <Heading spacing level="2" size="medium">
+            Header
+          </Heading>
+          <BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
         </Modal.Content>
       </Modal>
-      <button onClick={() => setOpenThree(true)}>
-        Open modal without x-button
-      </button>
+    </>
+  );
+};
+
+export const CloseButton = () => {
+  const [open, setOpen] = useState(true);
+
+  useEffect(() => {
+    Modal.setAppElement("#root");
+  }, []);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open</Button>
       <Modal
-        open={openThree}
+        open={open}
+        onClose={() => setOpen(false)}
+        aria-labelledby="header123"
         closeButton={false}
-        onClose={() => setOpenThree(false)}
-        aria-label="Min modal"
       >
         <Modal.Content>
-          <p>Cupidatat irure ipsum veniam ad in esse.</p>
-          <p>Cillum tempor pariatur amet ut laborum Lorem enim enim.</p>
+          <Heading spacing id="header123" level="1" size="large">
+            Header
+          </Heading>
+          <Heading spacing level="2" size="medium">
+            Header
+          </Heading>
+          <BodyLong>Voluptate laboris mollit dolore qui. Magna elit.</BodyLong>
         </Modal.Content>
       </Modal>
     </>

package/src/panel/{stories/panel.stories.tsx → panel.stories.tsx}

@@ -2,14 +2,37 @@ import React from "react";
 import { Panel } from "../index";
 import { Meta } from "@storybook/react/types-6-0";
 export default {
-  title: "ds-react/panel",
+  title: "ds-react/Panel",
   component: Panel,
+  argTypes: {
+    border: {
+      defaultValue: true,
+      control: {
+        type: "boolean",
+      },
+    },
+  },
 } as Meta;
 
-export const All = () => {
+export const Default = (props) => {
   return (
-    <div>
-      <h1>Panel</h1>
+    <Panel {...props}>
+      Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
+      cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
+      commodo ea culpa velit commodo incididunt sunt ipsum. Amet anim
+      adipisicing minim ipsum do. Non laborum culpa reprehenderit est sint
+      officia quis excepteur. Fugiat eiusmod eiusmod commodo incididunt nisi
+      minim ex eu cupidatat quis ex. Lorem irure ea ea enim consectetur ea
+      aliqua cupidatat. Officia aute veniam aute exercitation ipsum aliqua
+      adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
+      consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
+    </Panel>
+  );
+};
+
+export const Border = () => {
+  return (
+    <div className="colgap">
       <Panel>
         Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
         cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu
@@ -21,7 +44,6 @@ export const All = () => {
         adipisicing. Est aliqua ad ullamco aute nostrud amet ea adipisicing
         consequat id officia irure pariatur. Eu mollit amet culpa culpa velit.
       </Panel>
-      <h2>With border</h2>
       <Panel border>
         Eu quis exercitation voluptate ex. Aute irure esse occaecat minim
         cupidatat velit minim duis sint culpa anim laboris. Consectetur nulla eu