@navikt/ds-react 6.4.1 → 6.6.0

package/src/portal/Portal.stories.tsx

@@ -1,102 +0,0 @@
-import React from "react";
-import { Box } from "../layout/box";
-import { Provider } from "../provider";
-import { Portal } from "./Portal";
-
-export default {
-  title: "Utilities/Portal",
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-
-export const Default = () => {
-  return (
-    <Box background="surface-neutral-subtle">
-      <h1>In regular DOM tree</h1>
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
-        necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio eum
-        commodi tempora unde. Nulla vel tempora incidunt? Voluptatem molestias
-        impedit commodi. Tenetur!
-      </p>
-      <Portal>
-        <h1>Inside Portal to different DOM tree</h1>
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
-          necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio
-          eum commodi tempora unde. Nulla vel tempora incidunt? Voluptatem
-          molestias impedit commodi. Tenetur!
-        </p>
-      </Portal>
-    </Box>
-  );
-};
-
-export const CustomPortalRoot = () => {
-  const [portalContainer, setPortalContainer] =
-    React.useState<HTMLDivElement | null>(null);
-
-  return (
-    <Box background="surface-neutral-subtle">
-      <Box background="surface-alt-1-subtle">
-        <h1>Tree A</h1>
-        <Portal rootElement={portalContainer}>
-          <p>This is mounted to Tree B, while created inside Tree A</p>
-        </Portal>
-      </Box>
-      <Box background="surface-alt-3-subtle" ref={setPortalContainer}>
-        <h1>Tree B</h1>
-      </Box>
-    </Box>
-  );
-};
-
-export const CustomPortalRootFromProvider = () => {
-  const [portalContainer, setPortalContainer] =
-    React.useState<HTMLDivElement>();
-
-  return (
-    <Provider rootElement={portalContainer}>
-      <Box background="surface-neutral-subtle">
-        <Box background="surface-alt-1-subtle">
-          <h1>Tree A</h1>
-          <Portal>
-            <p>This is mounted to Tree B, while created inside Tree A</p>
-          </Portal>
-        </Box>
-        <Box
-          background="surface-alt-3-subtle"
-          ref={(el) => el && setPortalContainer(el)}
-        >
-          <h1>Tree B</h1>
-        </Box>
-      </Box>
-    </Provider>
-  );
-};
-
-export const AsChild = () => {
-  return (
-    <Box background="surface-neutral-subtle">
-      <h1>In regular DOM tree</h1>
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
-        necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio eum
-        commodi tempora unde. Nulla vel tempora incidunt? Voluptatem molestias
-        impedit commodi. Tenetur!
-      </p>
-      <Portal asChild>
-        <div data-this-is-the-child>
-          <h1>Inside Portal to different DOM tree</h1>
-          <p>
-            Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus
-            necessitatibus quis esse nesciunt est velit voluptatibus. Distinctio
-            eum commodi tempora unde. Nulla vel tempora incidunt? Voluptatem
-            molestias impedit commodi. Tenetur!
-          </p>
-        </div>
-      </Portal>
-    </Box>
-  );
-};

package/src/read-more/readmore.stories.tsx

@@ -1,91 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import React from "react";
-import { ReadMore } from ".";
-import { VStack } from "../layout/stack";
-
-export default {
-  title: "ds-react/ReadMore",
-  component: ReadMore,
-  parameters: {
-    chromatic: { disable: true },
-  },
-} satisfies Meta<typeof ReadMore>;
-
-type Story = StoryObj<typeof ReadMore>;
-
-const Content = (
-  <div style={{ maxWidth: 300 }}>
-    Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, tempore
-    corporis exercitationem minus dignissimos eius aspernatur fugiat iusto.
-  </div>
-);
-
-export const Default: Story = {
-  args: {
-    size: "medium",
-    defaultOpen: false,
-    onOpenChange: fn(),
-    children: Content,
-    header: "Grunnen til at vi spør om dette og i tillegg ber om vedlegg",
-  },
-  argTypes: {
-    size: {
-      options: ["medium", "small"],
-      control: { type: "radio" },
-    },
-  },
-};
-
-export const Small: Story = {
-  args: {
-    ...Default.args,
-    size: "small",
-  },
-};
-
-export const DefaultOpen: Story = {
-  args: {
-    ...Default.args,
-    defaultOpen: true,
-  },
-};
-
-export const Open: Story = {
-  args: {
-    ...Default.args,
-    open: true,
-  },
-};
-
-export const Chromatic: Story = {
-  render: () => {
-    return (
-      <VStack gap="4">
-        <div>
-          <h2>Default</h2>
-          {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
-          <ReadMore {...Default.args} />
-        </div>
-        <div>
-          <h2>Small</h2>
-          {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
-          <ReadMore {...Small.args} />
-        </div>
-        <div>
-          <h2>DefaultOpen</h2>
-          {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
-          <ReadMore {...DefaultOpen.args} />
-        </div>
-        <div>
-          <h2>Controlled open</h2>
-          {/* @ts-expect-error Args are partial, leading to required prop mismatch */}
-          <ReadMore {...Open.args} />
-        </div>
-      </VStack>
-    );
-  },
-  parameters: {
-    chromatic: { disable: false },
-  },
-};

package/src/skeleton/skeleton.stories.tsx

@@ -1,130 +0,0 @@
-import React from "react";
-import { Skeleton } from ".";
-import { Alert } from "../alert";
-import { Button } from "../button";
-import { Checkbox } from "../form/checkbox";
-import { BodyLong, Heading } from "../typography";
-
-export default {
-  title: "ds-react/Skeleton",
-  component: Skeleton,
-  decorators: [
-    (Story) => (
-      <div style={{ display: "grid", gap: "0.5rem" }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-
-export const Default = {
-  render: () => (
-    <div>
-      <Skeleton>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
-        voluptas sint dolore omnis quia consequatur beatae vero cum officia
-        debitis. Quidem debitis omnis reprehenderit nobis rerum. Nulla, magnam?
-        Saepe, eveniet? Test
-      </Skeleton>
-      <Skeleton>
-        <Alert variant="info">
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
-          voluptas sint dolore omnis quia consequatur beatae vero cum officia
-          debitis. Quidem debitis omnis reprehenderit nobis rerum. Nulla,
-          magnam? Saepe, eveniet?
-        </Alert>
-      </Skeleton>
-      <Skeleton>
-        <BodyLong>
-          Quidem debitis omnis reprehenderit nobis rerum. Nulla, magnam? Saepe,
-          eveniet?
-        </BodyLong>
-        <Checkbox value="test">Valg 1</Checkbox>
-        <Checkbox value="tes2">Valg 2</Checkbox>
-        <div style={{ display: "flex", gap: "2rem" }}>
-          <Button>Send inn</Button>
-          <Button>Tilbake</Button>
-        </div>
-      </Skeleton>
-    </div>
-  ),
-};
-
-export const Shapes = {
-  render: () => (
-    <>
-      <Skeleton variant="text"></Skeleton>
-      <Skeleton variant="circle" width={60} height={60}></Skeleton>
-      <Skeleton variant="rectangle" width={200} height={40}></Skeleton>
-      <Skeleton variant="rounded" width={200} height={40}></Skeleton>
-    </>
-  ),
-};
-
-export const WrappingComponents = {
-  render: () => (
-    <Skeleton style={{ display: "grid", gap: "0.5rem" }}>
-      <BodyLong>
-        Quidem debitis omnis reprehenderit nobis rerum. Nulla, magnam? Saepe,
-        eveniet?
-      </BodyLong>
-      <Checkbox value="test">Valg 1</Checkbox>
-      <Checkbox value="tes2">Valg 2</Checkbox>
-      <div style={{ display: "flex", gap: "2rem" }}>
-        <Button>Send inn</Button>
-        <Button>Tilbake</Button>
-      </div>
-    </Skeleton>
-  ),
-};
-
-export const TextSizing = {
-  render: () => (
-    <div style={{ display: "grid", width: 300 }}>
-      <Skeleton>
-        <Heading level="1" size="xlarge">
-          Placeholder
-        </Heading>
-      </Skeleton>
-      <Skeleton>
-        <BodyLong>Placeholder</BodyLong>
-      </Skeleton>
-      <BodyLong as={Skeleton}>Placeholder</BodyLong>
-    </div>
-  ),
-};
-
-export const NativeText = {
-  render: () => (
-    <div>
-      <h1>
-        <Skeleton>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
-          voluptas sint dolore omnis quia consequatur beatae vero cum officia
-          debitis. Quidem debitis omnis reprehenderit nobis rerum. Nulla,
-          magnam? Saepe, eveniet?
-        </Skeleton>
-      </h1>
-      <Skeleton>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
-          voluptas sint dolore omnis quia consequatur beatae vero cum officia
-          debitis. Quidem debitis omnis reprehenderit nobis rerum. Nulla,
-          magnam? Saepe, eveniet?
-        </p>
-      </Skeleton>
-    </div>
-  ),
-};
-
-export const InlineText = {
-  render: () => (
-    <BodyLong>
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur
-      voluptas sint dolore <Skeleton width="40px" as="span" variant="text" />{" "}
-      beatae vero cum officia debitis. Quidem debitis omnis reprehenderit nobis{" "}
-      <Skeleton as="span">test text</Skeleton> rerum. Nulla, magnam? Saepe,
-      eveniet?
-    </BodyLong>
-  ),
-};

package/src/stepper/stepper.stories.tsx

@@ -1,200 +0,0 @@
-import { Meta } from "@storybook/react";
-import React, { useState } from "react";
-import { BodyLong } from "../typography";
-import Stepper from "./Stepper";
-
-const meta: Meta<typeof Stepper> = {
-  title: "ds-react/Stepper",
-  component: Stepper,
-  argTypes: {
-    orientation: {
-      control: { type: "radio" },
-      options: ["horizontal", "vertical"],
-    },
-    activeStep: {
-      control: { type: "number" },
-    },
-  },
-};
-export default meta;
-
-const storyTexts = [
-  "Minimize backwards overflow agile. Horsehead offer commitment to the cause nor copy and paste from stack overflow problem territories, innovation is hot right now for can you slack it to me?. High touch client table the discussion , and get buy-in so manage expectations loop back, please advise soonest. We need a paradigm shift dogpile that, and i need to pee and then go to another meeting for let's prioritize the low-hanging fruit.",
-  "Customer centric sorry i didn't get your email proceduralize, and first-order optimal strategies. I dont care if you got some copy, why you dont use officeipsumcom or something like that ? wheelhouse. Viral engagement new economy, this proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables Bob called an all-hands this afternoon. Fire up your browser touch base innovation is hot right now so this medium needs to be more dynamic.",
-  "Touch base define the underlying principles that drive decisions and strategy for your design language. I have zero cycles for this. Cadence social currency, for low engagement execute . Deliverables rehydrate the team or let's circle back to that those options are already baked in with this model teams were able to drive adoption and awareness we need to start advertising on social media circle back. Through the lens of face time.",
-  "Take five, punch the tree, and come back in here with a clear head those options are already baked in with this model ultimate measure of success and we need to crystallize a plan yet open door policy who's responsible for the ask for this request? what do you feel you would bring to the table if you were hired for this position. Wiggle room guerrilla marketing shelfware. Code feature creep can we parallel path lose client to 10:00 meeting hire the best manage expectations root-and-branch review.",
-  "Curate downselect tread it daily cc me on that due diligence, or close the loop. All hands on deck my supervisor didn't like the latest revision you gave me can you switch back to the first revision? ping me or game-plan, yet make it a priority, on this journey win-win. Our competitors are jumping the shark we need to build it so that it scales post launch future-proof can we align on lunch orders. Deliverables message the initiative.",
-  "Out of scope poop, so pre launch. I just wanted to give you a heads-up wiggle room cc me on that I have been doing some research this morning and we need to better, nor dog and pony show prioritize these line items so UX. Big data upstream selling circle back, in an ideal world. Get all your ducks in a row land it in region so code so one-sheet. Action item we need to think big start small and scale fast to energize our clients. Cta due diligence, for this vendor is incompetent nor forcing function and circle back and low engagement.",
-  "Move the needle a loss a day will keep you focus yet can you put it into a banner that is not alarming, but eye catching and not too giant or strategic fit, nor it is all exactly as i said, but i don't like it or streamline. We've bootstrapped the model. This proposal is a win-win situation which will cause a stellar paradigm shift, and produce a multi-fold increase in deliverables the horse is out of the barn usabiltiy, for going forward but going forward.",
-];
-
-export const Default = ({ asButton, ...props }) => {
-  const [activeStep, setActiveStep] = useState(1);
-
-  const newProps = {
-    onClick: (e) => e.preventDefault(),
-    ...(asButton ? { as: "button" } : { href: "#" }),
-  };
-
-  return (
-    <div style={{ display: "flex", gap: "10rem", flexDirection: "column" }}>
-      <Stepper
-        aria-labelledby="stepper-heading"
-        activeStep={activeStep}
-        onStepChange={setActiveStep}
-        orientation="vertical"
-        {...props}
-      >
-        <Stepper.Step {...newProps} completed={props.completed}>
-          Start søknad
-        </Stepper.Step>
-        <Stepper.Step {...newProps}>Personopplysninger</Stepper.Step>
-        <Stepper.Step {...newProps} completed={props.completed}>
-          Saksopplysninger
-        </Stepper.Step>
-        <Stepper.Step {...newProps} completed={props.completed}>
-          Søknadstekst for en veldig spesifikk prosess i NAV som må beskrives og
-          forklares i sitt fulle i denne labelen
-        </Stepper.Step>
-        <Stepper.Step {...newProps}>Vedlegg</Stepper.Step>
-        <Stepper.Step {...newProps}>Oppsummering</Stepper.Step>
-        <Stepper.Step {...newProps}>Innsending</Stepper.Step>
-      </Stepper>
-      <BodyLong style={{ marginTop: "5rem" }}>
-        {storyTexts[activeStep]}
-      </BodyLong>
-    </div>
-  );
-};
-Default.args = {
-  asButton: false,
-  interactive: true,
-  completed: false,
-};
-
-export const Horizontal = () => {
-  const [activeStep, setActiveStep] = useState(2);
-  const props = { onClick: (e) => e.preventDefault(), href: "#" };
-  return (
-    <Stepper
-      aria-labelledby="stepper-heading"
-      activeStep={activeStep}
-      onStepChange={setActiveStep}
-      orientation="horizontal"
-    >
-      <Stepper.Step {...props}>Start søknad</Stepper.Step>
-      <Stepper.Step {...props}>Personopplysninger</Stepper.Step>
-      <Stepper.Step {...props}>Saksopplysninger</Stepper.Step>
-      <Stepper.Step {...props}>
-        Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
-      </Stepper.Step>
-      <Stepper.Step {...props}>Vedlegg</Stepper.Step>
-      <Stepper.Step {...props}>Oppsummering</Stepper.Step>
-      <Stepper.Step {...props}>Innsending</Stepper.Step>
-    </Stepper>
-  );
-};
-
-export const Vertical = () => {
-  const [activeStep, setActiveStep] = useState(2);
-  const props = { onClick: (e) => e.preventDefault(), href: "#" };
-  return (
-    <Stepper
-      aria-labelledby="stepper-heading"
-      activeStep={activeStep}
-      onStepChange={setActiveStep}
-      orientation="vertical"
-    >
-      <Stepper.Step {...props}>Start søknad</Stepper.Step>
-      <Stepper.Step {...props}>Personopplysninger</Stepper.Step>
-      <Stepper.Step {...props}>Saksopplysninger</Stepper.Step>
-      <Stepper.Step {...props}>
-        Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
-      </Stepper.Step>
-      <Stepper.Step {...props}>Vedlegg</Stepper.Step>
-      <Stepper.Step {...props}>Oppsummering</Stepper.Step>
-      <Stepper.Step {...props}>Innsending</Stepper.Step>
-    </Stepper>
-  );
-};
-
-export const DisplayOnly = () => {
-  return (
-    <div className="colgap">
-      <Stepper
-        aria-labelledby="stepper-heading"
-        activeStep={2}
-        orientation="vertical"
-        interactive={false}
-      >
-        <Stepper.Step completed>Start søknad</Stepper.Step>
-        <Stepper.Step completed>Personopplysninger</Stepper.Step>
-        <Stepper.Step>Saksopplysninger</Stepper.Step>
-        <Stepper.Step>
-          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
-        </Stepper.Step>
-        <Stepper.Step>Vedlegg</Stepper.Step>
-        <Stepper.Step>Oppsummering</Stepper.Step>
-        <Stepper.Step>Innsending</Stepper.Step>
-      </Stepper>
-      <Stepper
-        aria-labelledby="stepper-heading"
-        activeStep={3}
-        orientation="vertical"
-        interactive={false}
-      >
-        <Stepper.Step completed>Start søknad</Stepper.Step>
-        <Stepper.Step completed>Personopplysninger</Stepper.Step>
-        <Stepper.Step>Saksopplysninger</Stepper.Step>
-        <Stepper.Step>
-          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
-        </Stepper.Step>
-        <Stepper.Step>Vedlegg</Stepper.Step>
-        <Stepper.Step>Oppsummering</Stepper.Step>
-        <Stepper.Step>Innsending</Stepper.Step>
-      </Stepper>
-    </div>
-  );
-};
-
-export const CompletedSteps = () => {
-  const [activeStep, setActiveStep] = useState(3);
-  return (
-    <div className="colgap">
-      <Stepper
-        aria-labelledby="stepper-heading"
-        activeStep={activeStep}
-        orientation="vertical"
-        onStepChange={(step) => setActiveStep(step)}
-      >
-        <Stepper.Step completed={activeStep > 1}>Start søknad</Stepper.Step>
-        <Stepper.Step completed>Personopplysninger</Stepper.Step>
-        <Stepper.Step completed={activeStep > 3}>Saksopplysninger</Stepper.Step>
-        <Stepper.Step completed={activeStep >= 4}>
-          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
-        </Stepper.Step>
-        <Stepper.Step completed={activeStep > 5}>Vedlegg</Stepper.Step>
-        <Stepper.Step completed={activeStep > 6}>Oppsummering</Stepper.Step>
-        <Stepper.Step completed={activeStep > 7}>Innsending</Stepper.Step>
-      </Stepper>
-      <Stepper
-        aria-labelledby="stepper-heading"
-        activeStep={activeStep - 1}
-        orientation="vertical"
-        onStepChange={(step) => setActiveStep(step)}
-      >
-        <Stepper.Step completed={activeStep > 1}>Start søknad</Stepper.Step>
-        <Stepper.Step completed={activeStep > 2}>
-          Personopplysninger
-        </Stepper.Step>
-        <Stepper.Step completed={activeStep > 3}>Saksopplysninger</Stepper.Step>
-        <Stepper.Step completed={activeStep >= 4}>
-          Søknadstekst for en veldig spesifikk prosess i NAV som har lang tekst
-        </Stepper.Step>
-        <Stepper.Step completed={activeStep > 5}>Vedlegg</Stepper.Step>
-        <Stepper.Step completed={activeStep > 6}>Oppsummering</Stepper.Step>
-        <Stepper.Step completed={activeStep > 7}>Innsending</Stepper.Step>
-      </Stepper>
-    </div>
-  );
-};