@navikt/ds-react 6.5.0 → 6.6.0

package/src/date/monthpicker/monthpicker.stories.tsx

@@ -1,221 +0,0 @@
-import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import { expect, userEvent, within } from "@storybook/test";
-import { setYear } from "date-fns";
-import React, { useId, useState } from "react";
-import { act } from "react-dom/test-utils";
-import { Button } from "../../button";
-import { useMonthpicker } from "../hooks";
-import { DateInputProps } from "../parts/DateInput";
-import MonthPicker from "./MonthPicker";
-import { MonthPickerProps } from "./types";
-
-export default {
-  title: "ds-react/Monthpicker",
-  component: MonthPicker,
-  parameters: {
-    chromatic: { disable: true },
-  },
-} satisfies Meta<typeof MonthPicker>;
-
-type Story = StoryObj<typeof MonthPicker>;
-
-export const Default: StoryFn<{
-  size: DateInputProps["size"];
-  locale: MonthPickerProps["locale"];
-}> = (props) => {
-  const { inputProps, monthpickerProps } = useMonthpicker({
-    disabled: [new Date("Apr 1 2022")],
-    locale: props.locale,
-  });
-
-  return (
-    <div style={{ height: "20rem" }}>
-      <MonthPicker {...monthpickerProps} onMonthSelect={console.log}>
-        <MonthPicker.Input
-          label="Velg måned"
-          variant="monthpicker"
-          size={props.size}
-          {...inputProps}
-        />
-      </MonthPicker>
-    </div>
-  );
-};
-Default.argTypes = {
-  size: {
-    options: ["medium", "small"],
-    control: { type: "radio" },
-  },
-  locale: {
-    options: ["nb", "nn", "en"],
-    control: { type: "radio" },
-  },
-};
-
-export const DropdownCaption = () => {
-  return (
-    <MonthPicker.Standalone
-      onMonthSelect={console.log}
-      dropdownCaption
-      fromDate={new Date("Feb 10 2019")}
-      toDate={new Date("Sep 27 2032")}
-    />
-  );
-};
-
-export const NB = () => <MonthPicker.Standalone locale="nb" />;
-export const NN = () => <MonthPicker.Standalone locale="nn" />;
-export const EN = () => <MonthPicker.Standalone locale="en" />;
-
-export const DisabledMonths = () => (
-  <MonthPicker.Standalone
-    disabled={[
-      { from: new Date("Jan 1 2022"), to: new Date("Jul  6 2022") },
-      { from: new Date("Apr 2 2023"), to: new Date("Dec 4 2023") },
-      new Date("Sep 5 2022"),
-      new Date("Jan 5 2023"),
-    ]}
-  />
-);
-
-export const Standalone = () => {
-  return <MonthPicker.Standalone />;
-};
-
-export const UseMonthpicker = () => {
-  const { inputProps, monthpickerProps } = useMonthpicker({
-    disabled: [new Date("Apr 1 2022")],
-    onMonthChange: console.log,
-    fromDate: new Date("Jan 1 2022"),
-    toDate: new Date("Sep 27 2025"),
-  });
-
-  return (
-    <div style={{ height: "20rem" }}>
-      <MonthPicker {...monthpickerProps} dropdownCaption>
-        <MonthPicker.Input
-          {...inputProps}
-          label="Velg måned"
-          variant="monthpicker"
-        />
-      </MonthPicker>
-    </div>
-  );
-};
-
-export const UseMonthpickerFormat = () => {
-  const { inputProps, monthpickerProps } = useMonthpicker({
-    disabled: [new Date("Apr 1 2022")],
-    onMonthChange: console.log,
-    inputFormat: "MM.yyyy",
-  });
-
-  return (
-    <div style={{ height: "20rem" }}>
-      <MonthPicker {...monthpickerProps}>
-        <MonthPicker.Input
-          {...inputProps}
-          label="Velg måned"
-          variant="monthpicker"
-        />
-      </MonthPicker>
-    </div>
-  );
-};
-
-export const Required = {
-  render: () => {
-    const { monthpickerProps } = useMonthpicker({
-      defaultSelected: new Date("Apr 10 2024"),
-      required: true,
-    });
-
-    return (
-      <div style={{ height: "20rem" }}>
-        <MonthPicker.Standalone {...monthpickerProps} />
-      </div>
-    );
-  },
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-
-    const buttonApr = canvas.getByRole("button", { pressed: true });
-
-    await act(async () => {
-      await userEvent.click(buttonApr);
-    });
-
-    expect(buttonApr.ariaPressed).toBe("true");
-
-    const buttonSep = canvas.getByText("september").closest("button");
-
-    expect(buttonSep?.ariaPressed).toBe("false");
-
-    await act(async () => {
-      buttonSep && (await userEvent.click(buttonSep));
-    });
-
-    expect(buttonSep?.ariaPressed).toBe("true");
-    expect(buttonApr.ariaPressed).toBe("false");
-  },
-};
-
-export const UserControlled = () => {
-  const [open, setOpen] = useState(false);
-  const id = useId();
-
-  return (
-    <div>
-      <MonthPicker open={open} onClose={() => setOpen(false)} id={id}>
-        <Button aria-controls={id} onClick={() => setOpen((x) => !x)}>
-          Velg måned
-        </Button>
-      </MonthPicker>
-    </div>
-  );
-};
-
-export const FollowYear = () => {
-  const { monthpickerProps, inputProps, selectedMonth, setSelected } =
-    useMonthpicker({
-      fromDate: new Date("Aug 23 2019"),
-      toDate: new Date("Aug 23 2025"),
-      onMonthChange: console.log,
-    });
-
-  const customYearChange = (yearDate?: Date) => {
-    monthpickerProps.onYearChange?.(yearDate);
-    if (selectedMonth && yearDate) {
-      setSelected(setYear(selectedMonth, yearDate.getFullYear()));
-    }
-  };
-
-  return (
-    <div className="min-h-96">
-      <MonthPicker {...monthpickerProps} onYearChange={customYearChange}>
-        <MonthPicker.Input {...inputProps} label="Velg måned" />
-      </MonthPicker>
-      {selectedMonth && <div className="pt-4">{selectedMonth.getMonth()}</div>}
-    </div>
-  );
-};
-
-export const Chromatic: Story = {
-  render: () => (
-    <div className="colgap">
-      <MonthPicker.Standalone />
-      <DropdownCaption />
-      <NB />
-      <NN />
-      <EN />
-      <DisabledMonths />
-      <UseMonthpicker />
-      <UseMonthpickerFormat />
-      <UserControlled />
-      <FollowYear />
-    </div>
-  ),
-  parameters: {
-    chromatic: { disable: false },
-  },
-};

package/src/dropdown/dropdown.stories.tsx

@@ -1,124 +0,0 @@
-import { Meta, StoryObj } from "@storybook/react";
-import React, { useState } from "react";
-import { Button } from "../button";
-import Dropdown from "./Dropdown";
-
-export default {
-  title: "ds-react/Dropdown",
-  component: Dropdown,
-  parameters: {
-    chromatic: { disable: true },
-  },
-} satisfies Meta<typeof Dropdown>;
-
-type Story = StoryObj<typeof Dropdown>;
-
-export const Default: Story = {
-  render: () => (
-    <Dropdown onSelect={(event) => console.log(event)}>
-      <Dropdown.Toggle>Toggle</Dropdown.Toggle>
-      <Dropdown.Menu strategy="fixed">
-        <Dropdown.Menu.GroupedList>
-          <Dropdown.Menu.GroupedList.Heading>
-            Systemer og oppslagsverk
-          </Dropdown.Menu.GroupedList.Heading>
-          <Dropdown.Menu.GroupedList.Item
-            onClick={() => console.log("GroupedList.Item-click")}
-          >
-            Gosys
-          </Dropdown.Menu.GroupedList.Item>
-        </Dropdown.Menu.GroupedList>
-        <Dropdown.Menu.Divider />
-        <Dropdown.Menu.List>
-          <Dropdown.Menu.List.Item onClick={() => console.log("Item-click")}>
-            Gosys
-          </Dropdown.Menu.List.Item>
-          <Dropdown.Menu.List.Item>Psys</Dropdown.Menu.List.Item>
-          <Dropdown.Menu.List.Item disabled>Infotrygd</Dropdown.Menu.List.Item>
-        </Dropdown.Menu.List>
-      </Dropdown.Menu>
-    </Dropdown>
-  ),
-};
-
-export const DefaultOpen: Story = {
-  render: () => (
-    <Dropdown onSelect={(event) => console.log(event)} defaultOpen>
-      <Button as={Dropdown.Toggle}>Toggle</Button>
-      <Dropdown.Menu
-        strategy="fixed"
-        onClose={() => console.log("ONCLOSE default")}
-      >
-        <Dropdown.Menu.GroupedList>
-          <Dropdown.Menu.GroupedList.Heading>
-            Systemer og oppslagsverk
-          </Dropdown.Menu.GroupedList.Heading>
-          <Dropdown.Menu.GroupedList.Item
-            onClick={() => console.log("GroupedList.Item-click")}
-          >
-            Gosys
-          </Dropdown.Menu.GroupedList.Item>
-        </Dropdown.Menu.GroupedList>
-      </Dropdown.Menu>
-    </Dropdown>
-  ),
-};
-
-export const ControlledOpen: Story = {
-  render: () => {
-    const [openState, setOpenState] = useState(true);
-    return (
-      <Dropdown onSelect={(event) => console.log(event)} open={openState}>
-        <Button as={Dropdown.Toggle} onClick={() => setOpenState(!openState)}>
-          Toggle
-        </Button>
-        <Dropdown.Menu
-          strategy="fixed"
-          onClose={() => console.log("ONCLOSE CONTROLLED")}
-        >
-          <Dropdown.Menu.GroupedList>
-            <Dropdown.Menu.GroupedList.Heading>
-              Systemer og oppslagsverk
-            </Dropdown.Menu.GroupedList.Heading>
-            <Dropdown.Menu.GroupedList.Item
-              onClick={() => console.log("GroupedList.Item-click")}
-            >
-              Gosys
-            </Dropdown.Menu.GroupedList.Item>
-          </Dropdown.Menu.GroupedList>
-        </Dropdown.Menu>
-      </Dropdown>
-    );
-  },
-};
-
-export const Chromatic: Story = {
-  render: () => (
-    <Dropdown onSelect={(event) => console.log(event)} open>
-      <Dropdown.Toggle>Toggle</Dropdown.Toggle>
-      <Dropdown.Menu strategy="fixed">
-        <Dropdown.Menu.GroupedList>
-          <Dropdown.Menu.GroupedList.Heading>
-            Systemer og oppslagsverk
-          </Dropdown.Menu.GroupedList.Heading>
-          <Dropdown.Menu.GroupedList.Item
-            onClick={() => console.log("GroupedList.Item-click")}
-          >
-            Gosys
-          </Dropdown.Menu.GroupedList.Item>
-        </Dropdown.Menu.GroupedList>
-        <Dropdown.Menu.Divider />
-        <Dropdown.Menu.List>
-          <Dropdown.Menu.List.Item onClick={() => console.log("Item-click")}>
-            Gosys
-          </Dropdown.Menu.List.Item>
-          <Dropdown.Menu.List.Item>Psys</Dropdown.Menu.List.Item>
-          <Dropdown.Menu.List.Item disabled>Infotrygd</Dropdown.Menu.List.Item>
-        </Dropdown.Menu.List>
-      </Dropdown.Menu>
-    </Dropdown>
-  ),
-  parameters: {
-    chromatic: { disable: false, delay: 300 },
-  },
-};

package/src/expansion-card/expansion-card.stories.tsx

@@ -1,282 +0,0 @@
-import { Meta, StoryFn, StoryObj } from "@storybook/react";
-import React, { useState } from "react";
-import { PlantIcon } from "@navikt/aksel-icons";
-import { ExpansionCard, ExpansionCardProps } from ".";
-import { BodyLong } from "../typography";
-
-const meta: Meta<typeof ExpansionCard> = {
-  title: "ds-react/ExpansionCard",
-  component: ExpansionCard,
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          width: "600px",
-          minHeight: "100vh",
-          padding: "10rem 0",
-          display: "flex",
-          flexDirection: "column",
-          gap: "1rem",
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-  parameters: {
-    chromatic: { disable: true },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof ExpansionCard>;
-
-const Content = () => (
-  <ExpansionCard.Content>
-    <BodyLong spacing>
-      På ditt faste arbeidssted vil du ha yrkesskadedekning også i hvilepauser,
-      lunsjpauser, trimaktiviteter og lignende i arbeidstiden.
-    </BodyLong>
-    <BodyLong spacing>
-      Som hovedregel er du som arbeidstaker ikke yrkesskadedekket på veien til
-      og fra arbeid eller første og siste oppdragssted. Du er heller ikke
-      yrkesskadedekket på fritiden eller under private gjøremål i arbeidstiden.
-    </BodyLong>
-    <BodyLong spacing>
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
-      voluptatum expedita earum id, aperiam deleniti molestiae eveniet
-      doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
-      aspernatur obcaecati dicta.
-    </BodyLong>
-    <BodyLong spacing>
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
-      voluptatum expedita earum id, aperiam deleniti molestiae eveniet
-      doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
-      aspernatur obcaecati dicta.
-    </BodyLong>
-    <BodyLong>
-      Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga suscipit
-      voluptatum expedita earum id, aperiam deleniti molestiae eveniet
-      doloremque explicabo perspiciatis quasi repellendus! Est dolore a nemo
-      aspernatur obcaecati dicta.
-    </BodyLong>
-  </ExpansionCard.Content>
-);
-
-type DefaultStoryProps = ExpansionCardProps & { description: boolean };
-type DefaultStory = StoryFn<DefaultStoryProps>;
-export const Default: DefaultStory = (props: DefaultStoryProps) => {
-  return (
-    <ExpansionCard
-      {...props}
-      open={props.open || undefined}
-      aria-label="default-demo"
-    >
-      <ExpansionCard.Header>
-        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-        {props.description && (
-          <ExpansionCard.Description>
-            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
-            til tid, sted og arbeidsoppgaver
-          </ExpansionCard.Description>
-        )}
-      </ExpansionCard.Header>
-      <Content />
-    </ExpansionCard>
-  );
-};
-Default.args = {
-  open: false,
-  size: "medium",
-  description: false,
-};
-Default.argTypes = {
-  size: { control: "radio", options: ["medium", "small"] },
-};
-
-export const Description = () => (
-  <ExpansionCard aria-label="bare description">
-    <ExpansionCard.Header>
-      <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-      <ExpansionCard.Description>
-        For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
-        tid, sted og arbeidsoppgaver
-      </ExpansionCard.Description>
-    </ExpansionCard.Header>
-    <Content />
-  </ExpansionCard>
-);
-
-export const Sizes = () => (
-  <>
-    <h2>Medium</h2>
-    <ExpansionCard aria-label="Demo med description">
-      <ExpansionCard.Header>
-        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-        <ExpansionCard.Description>
-          For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
-          tid, sted og arbeidsoppgaver
-        </ExpansionCard.Description>
-      </ExpansionCard.Header>
-      <Content />
-    </ExpansionCard>
-    <ExpansionCard aria-label="Demo">
-      <ExpansionCard.Header>
-        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-      </ExpansionCard.Header>
-      <Content />
-    </ExpansionCard>
-    <h2>Small</h2>
-    <ExpansionCard size="small" aria-label="small-demo">
-      <ExpansionCard.Header>
-        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-        <ExpansionCard.Description>
-          For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
-          tid, sted og arbeidsoppgaver
-        </ExpansionCard.Description>
-      </ExpansionCard.Header>
-      <Content />
-    </ExpansionCard>
-    <ExpansionCard
-      size="small"
-      aria-label="small-demo med avatar uten description"
-    >
-      <ExpansionCard.Header>
-        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-      </ExpansionCard.Header>
-      <Content />
-    </ExpansionCard>
-  </>
-);
-
-export const HeadingSizing = () => (
-  <>
-    {(["large", "medium", "small"] as const).map((size) => (
-      <ExpansionCard key={size} aria-label={`demo-${size}`}>
-        <ExpansionCard.Header>
-          <ExpansionCard.Title size={size}>{size}</ExpansionCard.Title>
-          <ExpansionCard.Description>
-            For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
-            til tid, sted og arbeidsoppgaver
-          </ExpansionCard.Description>
-        </ExpansionCard.Header>
-        <Content />
-      </ExpansionCard>
-    ))}
-  </>
-);
-
-export const DefaultOpen = () => (
-  <ExpansionCard defaultOpen aria-label="defaultOpen demo">
-    <ExpansionCard.Header>
-      <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-      <ExpansionCard.Description>
-        For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
-        tid, sted og arbeidsoppgaver
-      </ExpansionCard.Description>
-    </ExpansionCard.Header>
-    <Content />
-  </ExpansionCard>
-);
-
-export const ControlledState = () => {
-  const [open, setOpen] = useState(false);
-  return (
-    <ExpansionCard
-      open={open}
-      onToggle={setOpen}
-      aria-label="Controlled-state demo"
-    >
-      <ExpansionCard.Header>
-        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-        <ExpansionCard.Description>
-          For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
-          tid, sted og arbeidsoppgaver
-        </ExpansionCard.Description>
-      </ExpansionCard.Header>
-      <Content />
-    </ExpansionCard>
-  );
-};
-
-export const Customization = () => (
-  <div className="subtle-card">
-    <ExpansionCard aria-label="custom-styling demo">
-      <ExpansionCard.Header>
-        <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-        <ExpansionCard.Description>
-          For at yrkesskadedekningen skal gjelde, er det som hovedregel krav til
-          tid, sted og arbeidsoppgaver
-        </ExpansionCard.Description>
-      </ExpansionCard.Header>
-      <Content />
-    </ExpansionCard>
-
-    <style>{`
-        .subtle-card {
-          --ac-expansioncard-bg: var(--a-surface-subtle);
-          --ac-expansioncard-border-open-color: var(--a-border-alt-3);
-        }`}</style>
-  </div>
-);
-
-export const Icon = () => (
-  <div>
-    <ExpansionCard aria-label="custom-styling demo">
-      <ExpansionCard.Header>
-        <div className="with-icon">
-          <div className="icon">
-            <PlantIcon aria-hidden />
-          </div>
-          <div>
-            <ExpansionCard.Title>Arbeidstakere</ExpansionCard.Title>
-            <ExpansionCard.Description>
-              For at yrkesskadedekningen skal gjelde, er det som hovedregel krav
-              til tid, sted og arbeidsoppgaver
-            </ExpansionCard.Description>
-          </div>
-        </div>
-      </ExpansionCard.Header>
-      <Content />
-    </ExpansionCard>
-
-    <style>{`
-        .with-icon {
-          display: flex;
-          align-items: center;
-          gap: 1rem;
-        }
-        .icon {
-          font-size: 3rem;
-          flex-shrink: 0;
-          display: grid;
-          place-content: center;
-        }`}</style>
-  </div>
-);
-
-export const Chromatic: Story = {
-  render: () => {
-    return (
-      <div>
-        <h2>Description</h2>
-        <Description />
-        <h2>Sizes</h2>
-        <Sizes />
-        <h2>Heading sizing</h2>
-        <HeadingSizing />
-        <h2>Default open</h2>
-        <DefaultOpen />
-        <h2>Controlled state</h2>
-        <ControlledState />
-        <h2>Customization</h2>
-        <Customization />
-        <h2>Icon</h2>
-        <Icon />
-      </div>
-    );
-  },
-  parameters: {
-    chromatic: { disable: false },
-  },
-};