@navikt/ds-react 6.5.0 → 6.6.0

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

@@ -1,143 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import TextField from "./TextField";
-
-export default {
-  title: "ds-react/TextField",
-  component: TextField,
-  argTypes: {
-    size: {
-      control: {
-        type: "radio",
-        options: ["medium", "small"],
-      },
-    },
-    description: {
-      type: "string",
-    },
-    error: {
-      type: "string",
-    },
-    hideLabel: {
-      type: "boolean",
-    },
-    disabled: {
-      type: "boolean",
-    },
-  },
-  parameters: {
-    chromatic: { disable: true },
-  },
-} as Meta;
-
-type Story = StoryObj<typeof TextField>;
-
-export const Default = {
-  render: (props) => {
-    return <TextField {...props} label="Ipsum enim quis culpa" />;
-  },
-
-  args: {},
-};
-
-export const Small = () => {
-  return <TextField size="small" label="Ipsum enim quis culpa" />;
-};
-
-export const Description = () => {
-  return (
-    <div className="colgap">
-      <TextField
-        label="Ipsum enim quis culpa"
-        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-      />
-      <TextField
-        label="Ipsum enim quis culpa"
-        description="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-        size="small"
-      />
-    </div>
-  );
-};
-
-export const Error = () => {
-  return (
-    <div className="colgap">
-      <TextField
-        label="Ipsum enim quis culpa"
-        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-      />
-
-      <TextField
-        label="Ipsum enim quis culpa"
-        error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
-        size="small"
-      />
-    </div>
-  );
-};
-
-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 />;
-};
-
-export const Readonly = () => {
-  return (
-    <div className="colgap">
-      <TextField
-        label="Bosted"
-        description="Skriv bosted i Norge"
-        readOnly
-        value="Oslo"
-      />
-      <TextField label="Bosted" readOnly error="feilmelding" value="Oslo" />
-    </div>
-  );
-};
-
-export const Chromatic: Story = {
-  render: () => (
-    <div>
-      <div>
-        <h2>Default</h2>
-        {Default?.render({})}
-      </div>
-      <div>
-        <h2>Small</h2>
-        <Small />
-      </div>
-      <div>
-        <h2>Description</h2>
-        <Description />
-      </div>
-      <div>
-        <h2>Error</h2>
-        <Error />
-      </div>
-      <div>
-        <h2>Disabled</h2>
-        <Disabled />
-      </div>
-      <div>
-        <h2>HideLabel</h2>
-        <HideLabel />
-      </div>
-      <div>
-        <h2>Readonly</h2>
-        <Readonly />
-      </div>
-    </div>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};

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

@@ -1,90 +0,0 @@
-import { Meta } from "@storybook/react";
-import React from "react";
-import { InformationIcon } from "@navikt/aksel-icons";
-import { VStack } from "../layout/stack";
-import { BodyLong } from "../typography";
-import GuidePanel from "./GuidePanel";
-
-export default {
-  title: "ds-react/GuidePanel",
-  component: GuidePanel,
-} satisfies Meta<typeof GuidePanel>;
-
-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 = {
-  render: (props: { poster: boolean; colorOverride: boolean }) => {
-    const style = props.colorOverride
-      ? {
-          "--ac-guide-panel-illustration-bg": "var(--a-purple-200)",
-          "--ac-guide-panel-border": "var(--a-purple-400)",
-        }
-      : {};
-
-    return (
-      <GuidePanel style={style} poster={props?.poster}>
-        {panelText}
-      </GuidePanel>
-    );
-  },
-
-  args: {
-    poster: false,
-    colorOverride: false,
-  },
-};
-
-export const PosterVariants = {
-  render: () => (
-    <VStack gap="6" align="start">
-      <GuidePanel>
-        If you exclude the `poster` prop, you will get the poster variant on
-        mobile (&lt;480px) and the non-poster variant otherwise.
-      </GuidePanel>
-      <GuidePanel poster>
-        Use the `poster` prop to get the poster variant on all viewports.
-      </GuidePanel>
-      <GuidePanel poster={false}>
-        Set `poster=false` to get the non-poster variant on all viewports.
-      </GuidePanel>
-    </VStack>
-  ),
-
-  parameters: {
-    chromatic: { viewports: [479, 800] },
-  },
-};
-
-export const ColorOverride = () => (
-  <GuidePanel
-    style={{
-      "--ac-guide-panel-illustration-bg": "var(--a-purple-200)",
-      "--ac-guide-panel-border": "var(--a-purple-400)",
-    }}
-  >
-    {panelText}
-  </GuidePanel>
-);
-
-export const Content = () => (
-  <GuidePanel>
-    <BodyLong spacing>
-      Duis et ex ad magna nostrud ut officia nulla cillum commodo sint irure
-      elit nulla. Ad proident nulla ex sunt exercitation sunt Lorem non laboris
-      ea ex cillum nulla consequat. Enim pariatur eiusmod quis est fugiat
-      officia nostrud dolore occaecat nisi.
-    </BodyLong>
-    <BodyLong>
-      Do esse magna nulla amet excepteur. Tempor laboris ipsum magna velit
-      dolore nulla id ex mollit. Deserunt ut esse laboris pariatur tempor
-      laborum veniam enim. Nisi deserunt officia minim enim.
-    </BodyLong>
-  </GuidePanel>
-);
-
-export const CustomIllustration = () => (
-  <GuidePanel illustration={<InformationIcon />}>{panelText}</GuidePanel>
-);

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

@@ -1,91 +0,0 @@
-import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import React, { useEffect, useRef } from "react";
-import { BodyLong, Heading } from "../typography";
-import HelpText from "./HelpText";
-
-const meta: Meta<typeof HelpText> = {
-  title: "ds-react/HelpText",
-  component: HelpText,
-  parameters: {
-    chromatic: { delay: 300 },
-  },
-};
-export default meta;
-
-export const Default: StoryObj<typeof HelpText> = {
-  render: (props) => (
-    <HelpText {...props}>Id ullamco excepteur elit fugiat labore.</HelpText>
-  ),
-
-  args: {
-    title: "Show tooltip",
-  },
-  argTypes: {
-    placement: {
-      control: { type: "radio" },
-      options: [
-        "top",
-        "bottom",
-        "right",
-        "left",
-        "top-start",
-        "top-end",
-        "bottom-start",
-        "bottom-end",
-        "right-start",
-        "right-end",
-        "left-start",
-        "left-end",
-      ],
-    },
-    strategy: {
-      control: { type: "radio" },
-      options: ["fixed", "absolute"],
-    },
-  },
-};
-
-export const Open: StoryFn = () => {
-  const ref = useRef<HTMLButtonElement | null>(null);
-  useEffect(() => {
-    ref.current && ref.current.click();
-  }, []);
-
-  return (
-    <HelpText ref={ref} title="Show tooltip" strategy="fixed">
-      Incididunt laborum eiusmod ullamco id aliquip officia ex irure aliqua
-      laboris id ea do nisi. Ex esse ad duis culpa non aliquip exercitation eu
-      culpa cupidatat nisi. Deserunt voluptate consectetur cillum elit qui ad
-      voluptate pariatur.
-    </HelpText>
-  );
-};
-
-export const WrapperClassName: StoryFn = () => (
-  <div>
-    <BodyLong spacing>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
-      perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
-      ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione ab
-      quam ea quas?
-    </BodyLong>
-
-    <Heading level="2" size="medium">
-      67 år og 1 måneder øklasdjkl askdak døkasøk daøkdkølasøkld asølkdøka
-      <HelpText wrapperClassName="testClass">
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
-        perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
-        ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione ab
-        quam ea quas?
-      </HelpText>
-      <style>{`.testClass {display: inline-block; margin-left: 0.5rem; vertical-align: middle;}`}</style>
-    </Heading>
-
-    <BodyLong spacing>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta
-      perspiciatis vero voluptatum, asperiores cumque, deserunt accusantium
-      ullam ipsa accusamus officia cupiditate quae unde esse culpa, ratione ab
-      quam ea quas?
-    </BodyLong>
-  </div>
-);

package/src/internal-header/header.stories.tsx

@@ -1,229 +0,0 @@
-import { Meta } from "@storybook/react";
-import React from "react";
-import {
-  ChevronDownIcon,
-  CogIcon,
-  ExternalLinkIcon,
-  LeaveIcon,
-  MenuGridIcon,
-} from "@navikt/aksel-icons";
-import { BodyLong, BodyShort, Detail, Spacer } from "@navikt/ds-react";
-import { Dropdown } from "../dropdown";
-import InternalHeader from "./InternalHeader";
-
-export default {
-  title: "ds-react/InternalHeader",
-  component: InternalHeader,
-  argTypes: {
-    user: {
-      control: {
-        type: "radio",
-        options: ["simple", "with description", "with dropdown"],
-      },
-    },
-  },
-} as Meta;
-
-export const Default = {
-  render: (props) => {
-    return (
-      <InternalHeader style={{ width: 600 }}>
-        {props?.titleAsHeading ? (
-          <InternalHeader.Title as="h1">Tittel</InternalHeader.Title>
-        ) : (
-          <InternalHeader.Title href="/#home">
-            Tittel med lenke
-          </InternalHeader.Title>
-        )}
-        {props.systemMenu && (
-          <Dropdown>
-            <InternalHeader.Button
-              as={Dropdown.Toggle}
-              style={{ marginLeft: "auto" }}
-            >
-              <MenuGridIcon
-                style={{ fontSize: "1.5rem" }}
-                title="MenuGridIconer og oppslagsverk"
-              />
-            </InternalHeader.Button>
-            <Dropdown.Menu strategy="fixed">
-              <Dropdown.Menu.List>
-                <Dropdown.Menu.List.Item>
-                  <span>A.Inntekt</span>
-                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
-                </Dropdown.Menu.List.Item>
-                <Dropdown.Menu.List.Item>
-                  <span>Aa-registeret</span>
-                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
-                </Dropdown.Menu.List.Item>
-                <Dropdown.Menu.List.Item>
-                  <span>Gosys</span>
-                  <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
-                </Dropdown.Menu.List.Item>
-              </Dropdown.Menu.List>
-            </Dropdown.Menu>
-          </Dropdown>
-        )}
-        {(!props.user || props.user === "simple") && (
-          <InternalHeader.User
-            name="Ola Normann"
-            style={{ marginLeft: props.systemMenu ? "none" : "auto" }}
-          />
-        )}
-        {props.user === "with description" && (
-          <InternalHeader.User
-            name="Ola Normann"
-            description="0123456"
-            style={{ marginLeft: props.systemMenu ? "none" : "auto" }}
-          />
-        )}
-        {props.user === "with dropdown" && (
-          <Dropdown>
-            <InternalHeader.Button
-              as={Dropdown.Toggle}
-              style={{
-                marginLeft: props.systemMenu ? "none" : "auto",
-                paddingRight: "1.5rem",
-                paddingLeft: "1.5rem",
-                gap: "1rem",
-              }}
-            >
-              <BodyShort title="Ola Normann">KH</BodyShort>
-              <ChevronDownIcon />
-            </InternalHeader.Button>
-            <Dropdown.Menu strategy="fixed">
-              <div>
-                <BodyLong size="small" as="div">
-                  Ola Normann 16px
-                </BodyLong>
-                <Detail size="small" as="div">
-                  <div>Ident nr 14px</div>
-                  <div>Enhet: Skien</div>
-                </Detail>
-              </div>
-              <Dropdown.Menu.Divider />
-              <Dropdown.Menu.List>
-                <Dropdown.Menu.List.Item as="a" href="/#settings">
-                  Innstillinger <Spacer />{" "}
-                  <CogIcon aria-hidden fontSize="1.5rem" />
-                </Dropdown.Menu.List.Item>
-                <Dropdown.Menu.List.Item onClick={() => console.log("logg ut")}>
-                  Logg ut <Spacer /> <LeaveIcon aria-hidden fontSize="1.5rem" />
-                </Dropdown.Menu.List.Item>
-              </Dropdown.Menu.List>
-            </Dropdown.Menu>
-          </Dropdown>
-        )}
-      </InternalHeader>
-    );
-  },
-
-  args: {
-    titleAsHeading: false,
-    systemMenu: false,
-  },
-};
-
-export const TitleAsHeading = () => (
-  <InternalHeader style={{ width: 600 }}>
-    <InternalHeader.Title as="h1">Tittel</InternalHeader.Title>
-  </InternalHeader>
-);
-
-export const TitleAsLink = () => (
-  <InternalHeader style={{ width: 600 }}>
-    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
-  </InternalHeader>
-);
-
-export const User = () => (
-  <InternalHeader style={{ width: 600 }}>
-    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
-    <InternalHeader.User name="Ola Normann" style={{ marginLeft: "auto" }} />
-  </InternalHeader>
-);
-
-export const UserWithDescription = () => (
-  <InternalHeader style={{ width: 600 }}>
-    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
-    <InternalHeader.User
-      name="Ola Normann"
-      description="id: 123456"
-      style={{ marginLeft: "auto" }}
-    />
-  </InternalHeader>
-);
-
-export const UserWithMenu = () => (
-  <InternalHeader style={{ width: 600 }}>
-    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
-    <Dropdown>
-      <InternalHeader.Button
-        as={Dropdown.Toggle}
-        style={{
-          marginLeft: "auto",
-          paddingRight: "1.5rem",
-          paddingLeft: "1.5rem",
-          gap: "1rem",
-        }}
-      >
-        <BodyShort title="Ola Normann">KH</BodyShort>
-        <ChevronDownIcon />
-      </InternalHeader.Button>
-      <Dropdown.Menu strategy="fixed">
-        <div>
-          <BodyLong size="small" as="div">
-            Ola Normann 16px
-          </BodyLong>
-          <Detail size="small" as="div">
-            <div>Ident nr 14px</div>
-            <div>Enhet: Skien</div>
-          </Detail>
-        </div>
-        <Dropdown.Menu.Divider />
-        <Dropdown.Menu.List>
-          <Dropdown.Menu.List.Item as="a" href="/#settings">
-            Innstillinger <Spacer /> <CogIcon aria-hidden fontSize="1.5rem" />
-          </Dropdown.Menu.List.Item>
-          <Dropdown.Menu.List.Item onClick={() => console.log("logg ut")}>
-            Logg ut <Spacer /> <LeaveIcon aria-hidden fontSize="1.5rem" />
-          </Dropdown.Menu.List.Item>
-        </Dropdown.Menu.List>
-      </Dropdown.Menu>
-    </Dropdown>
-  </InternalHeader>
-);
-
-export const UserWithMenuGridIconMenu = () => (
-  <InternalHeader style={{ width: 600 }}>
-    <InternalHeader.Title href="/#home">Tittel med lenke</InternalHeader.Title>
-    <Dropdown>
-      <InternalHeader.Button
-        as={Dropdown.Toggle}
-        style={{ marginLeft: "auto" }}
-      >
-        <MenuGridIcon
-          style={{ fontSize: "1.5rem" }}
-          title="MenuGridIconer og oppslagsverk"
-        />
-      </InternalHeader.Button>
-      <Dropdown.Menu strategy="fixed">
-        <Dropdown.Menu.List>
-          <Dropdown.Menu.List.Item>
-            <span>A.Inntekt</span>
-            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
-          </Dropdown.Menu.List.Item>
-          <Dropdown.Menu.List.Item>
-            <span>Aa-registeret</span>
-            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
-          </Dropdown.Menu.List.Item>
-          <Dropdown.Menu.List.Item>
-            <span>Gosys</span>
-            <ExternalLinkIcon style={{ fontSize: "0.875rem" }} />
-          </Dropdown.Menu.List.Item>
-        </Dropdown.Menu.List>
-      </Dropdown.Menu>
-    </Dropdown>
-    <InternalHeader.User name="Ola Normann" description="id: 123456" />
-  </InternalHeader>
-);