@navikt/ds-react 6.4.1 → 6.6.0

package/src/layout/page/Page.stories.tsx

@@ -1,271 +0,0 @@
-import type { Meta, StoryFn } from "@storybook/react";
-import React, { useEffect } from "react";
-import bgColors from "@navikt/ds-tokens/src/colors-bg.json";
-import { Box } from "../box";
-import { HGrid } from "../grid";
-import Page from "./Page";
-import { widths } from "./parts/PageBlock";
-
-const meta: Meta = {
-  title: "ds-react/Primitives/Page",
-  component: Page,
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export default meta;
-
-export const Default: StoryFn = ({
-  belowFold,
-  background,
-  width,
-  gutters,
-  contentBlockPadding,
-}) => (
-  <Page
-    footer={<Footer width={width} gutters={gutters} />}
-    footerPosition={belowFold ? "belowFold" : undefined}
-    background={background}
-    contentBlockPadding={contentBlockPadding}
-  >
-    <Header width={width} gutters={gutters} />
-    <Content width={width} gutters={gutters} />
-  </Page>
-);
-
-Default.argTypes = {
-  width: {
-    control: "radio",
-    options: widths,
-  },
-  background: {
-    control: "radio",
-    options: Object.keys(bgColors.a),
-  },
-  belowFold: {
-    control: "boolean",
-  },
-  gutters: {
-    control: "boolean",
-  },
-  contentBlockPadding: {
-    control: "radio",
-    options: ["end", "none"],
-  },
-};
-
-Default.args = {
-  belowFold: false,
-  gutters: false,
-  contentBlockPadding: "end",
-};
-
-export const BelowFold: StoryFn = () => (
-  <Page
-    footer={<Footer />}
-    footerPosition="belowFold"
-    contentBlockPadding="end"
-  >
-    <Header />
-    <Content />
-  </Page>
-);
-
-export const Background: StoryFn = () => (
-  <HGrid columns={2} gap="4">
-    <Page
-      background="bg-default"
-      footer={<div>footer</div>}
-      contentBlockPadding="end"
-    >
-      <div>header</div>
-      <div>content</div>
-    </Page>
-    <Page
-      background="bg-subtle"
-      footer={<div>footer</div>}
-      contentBlockPadding="end"
-    >
-      <div>header</div>
-      <div>content</div>
-    </Page>
-  </HGrid>
-);
-
-export const ContentBlockPadding: StoryFn = () => (
-  <HGrid columns={2} gap="6" align="start">
-    <Page
-      footer={<Footer width="lg" gutters />}
-      contentBlockPadding="end"
-      background="bg-subtle"
-    >
-      <Header width="lg" gutters />
-      <Page.Block width="lg" gutters as="main">
-        <Box background="surface-alt-3-subtle" style={{ height: "80vh" }}>
-          Main
-        </Box>
-      </Page.Block>
-    </Page>
-    <Page
-      footer={<Footer width="lg" gutters />}
-      contentBlockPadding="none"
-      background="bg-subtle"
-    >
-      <Header width="lg" gutters />
-      <Page.Block width="lg" gutters as="main">
-        <Box background="surface-alt-3-subtle" style={{ height: "80vh" }}>
-          Main
-        </Box>
-      </Page.Block>
-    </Page>
-  </HGrid>
-);
-
-export const Gutters: StoryFn = () => (
-  <HGrid columns={2} gap="6" align="start">
-    <Page footer={<Footer width="lg" gutters />} background="bg-subtle">
-      <Header width="lg" gutters />
-      <Page.Block width="lg" gutters as="main">
-        <Box background="surface-alt-3-subtle" style={{ height: "80vh" }}>
-          Main
-        </Box>
-      </Page.Block>
-    </Page>
-    <Page footer={<Footer width="lg" />} background="bg-subtle">
-      <Header width="lg" />
-      <Page.Block width="lg" as="main">
-        <Box background="surface-alt-3-subtle" style={{ height: "80vh" }}>
-          Main
-        </Box>
-      </Page.Block>
-    </Page>
-  </HGrid>
-);
-
-Gutters.parameters = {
-  chromatic: {
-    modes: {
-      mobile_portrait: {
-        viewport: {
-          width: 400,
-          height: 850,
-        },
-      },
-      desktop: {
-        viewport: {
-          width: 1280,
-          height: 960,
-        },
-      },
-    },
-  },
-};
-
-const MILJO_URL = "https://www.nav.no/dekoratoren";
-
-export const WithDecorator: StoryFn = () => {
-  return (
-    <Page
-      contentBlockPadding="end"
-      footerPosition="belowFold"
-      footer={<div id="decorator-footer"></div>}
-    >
-      <div id="decorator-header"></div>
-      <Content width="lg" gutters />
-      <div
-        id="decorator-env"
-        data-src={`${MILJO_URL}/env?context=privatperson`}
-      ></div>
-    </Page>
-  );
-};
-
-WithDecorator.decorators = [
-  (Story) => {
-    useEffect(() => {
-      const script = document.createElement("script");
-      script.src = `${MILJO_URL}/client.js`;
-      script.async = true;
-      document.body.appendChild(script);
-
-      const styles = document.createElement("link");
-      styles.href = `${MILJO_URL}/css/client.css`;
-      styles.rel = "stylesheet";
-      document.head.appendChild(styles);
-
-      return () => {
-        document.body.removeChild(script);
-        document.head.removeChild(styles);
-      };
-    }, []);
-
-    return <Story />;
-  },
-];
-
-WithDecorator.parameters = {
-  chromatic: {
-    disable: true,
-  },
-};
-
-export const OutsideBackground = () => {
-  return (
-    <Page
-      contentBlockPadding="end"
-      footer={
-        <Box
-          background="surface-alt-3-subtle"
-          style={{ height: 100 }}
-          as="footer"
-        >
-          <Page.Block width="lg" gutters>
-            Footer
-          </Page.Block>
-        </Box>
-      }
-    >
-      <Box background="surface-alt-1-subtle" style={{ height: 64 }} as="header">
-        <Page.Block width="lg" gutters>
-          Header
-        </Page.Block>
-      </Box>
-      <Box background="surface-alt-2-subtle" style={{ height: 300 }} as="main">
-        <Page.Block width="lg" gutters>
-          main
-        </Page.Block>
-      </Box>
-    </Page>
-  );
-};
-
-function Header({ width = "lg", gutters = false }: any) {
-  return (
-    <Page.Block as="header" width={width} gutters={gutters}>
-      <Box background="surface-alt-3-subtle" style={{ height: 64 }}>
-        Header
-      </Box>
-    </Page.Block>
-  );
-}
-
-function Content({ width = "lg", gutters = false }: any) {
-  return (
-    <Page.Block width={width} gutters={gutters} as="main">
-      <Box background="surface-alt-3-subtle" style={{ height: 300 }}>
-        Main
-      </Box>
-    </Page.Block>
-  );
-}
-
-function Footer({ width = "lg", gutters = false }: any) {
-  return (
-    <Page.Block width={width} gutters={gutters} as="footer">
-      <Box background="surface-alt-3-subtle" style={{ height: 100 }}>
-        Footer
-      </Box>
-    </Page.Block>
-  );
-}

package/src/layout/responsive/hide.stories.tsx

@@ -1,80 +0,0 @@
-import type { Meta } from "@storybook/react";
-import React from "react";
-import { Hide } from ".";
-import { Tag } from "../../tag";
-import { VStack } from "../stack";
-
-export default {
-  title: "ds-react/Primitives/Hide",
-  component: Hide,
-} satisfies Meta<typeof Hide>;
-
-export const Default = {
-  render: () => (
-    <VStack gap="12">
-      <VStack gap="2" align="center">
-        <Hide above="xl">
-          <Tag variant="neutral">Visible below xl</Tag>
-        </Hide>
-        <Hide above="lg">
-          <Tag variant="neutral">Visible below lg</Tag>
-        </Hide>
-        <Hide above="md">
-          <Tag variant="neutral">Visible below md</Tag>
-        </Hide>
-        <Hide above="sm">
-          <Tag variant="neutral">Visible below sm</Tag>
-        </Hide>
-      </VStack>
-      <VStack gap="2" align="center">
-        <Hide below="xl">
-          <Tag variant="alt3">Visible above xl</Tag>
-        </Hide>
-        <Hide below="lg">
-          <Tag variant="alt3">Visible above lg</Tag>
-        </Hide>
-        <Hide below="md">
-          <Tag variant="alt3">Visible above md</Tag>
-        </Hide>
-        <Hide below="sm">
-          <Tag variant="alt3">Visible above sm</Tag>
-        </Hide>
-      </VStack>
-    </VStack>
-  ),
-};
-
-export const AsChild = {
-  render: () => (
-    <VStack gap="12">
-      <VStack gap="2" align="center">
-        <Hide above="xl" asChild>
-          <Tag variant="neutral">Hidden above xl</Tag>
-        </Hide>
-        <Hide above="lg" asChild>
-          <Tag variant="neutral">Hidden above lg</Tag>
-        </Hide>
-        <Hide above="md" asChild>
-          <Tag variant="neutral">Hidden above md</Tag>
-        </Hide>
-        <Hide above="sm" asChild>
-          <Tag variant="neutral">Hidden above sm</Tag>
-        </Hide>
-      </VStack>
-      <VStack gap="2" align="center">
-        <Hide below="xl" asChild>
-          <Tag variant="alt3">Hidden below xl</Tag>
-        </Hide>
-        <Hide below="lg" asChild>
-          <Tag variant="alt3">Hidden below lg</Tag>
-        </Hide>
-        <Hide below="md" asChild>
-          <Tag variant="alt3">Hidden below md</Tag>
-        </Hide>
-        <Hide below="sm" asChild>
-          <Tag variant="alt3">Hidden below sm</Tag>
-        </Hide>
-      </VStack>
-    </VStack>
-  ),
-};

package/src/layout/responsive/show.stories.tsx

@@ -1,80 +0,0 @@
-import type { Meta } from "@storybook/react";
-import React from "react";
-import { Show } from ".";
-import { Tag } from "../../tag";
-import { VStack } from "../stack";
-
-export default {
-  title: "ds-react/Primitives/Show",
-  component: Show,
-} satisfies Meta<typeof Show>;
-
-export const Default = {
-  render: () => (
-    <VStack gap="12">
-      <VStack gap="2" align="center">
-        <Show above="xl">
-          <Tag variant="neutral">Visible above xl</Tag>
-        </Show>
-        <Show above="lg">
-          <Tag variant="neutral">Visible above lg</Tag>
-        </Show>
-        <Show above="md">
-          <Tag variant="neutral">Visible above md</Tag>
-        </Show>
-        <Show above="sm">
-          <Tag variant="neutral">Visible above sm</Tag>
-        </Show>
-      </VStack>
-      <VStack gap="2" align="center">
-        <Show below="xl">
-          <Tag variant="alt3">Visible below xl</Tag>
-        </Show>
-        <Show below="lg">
-          <Tag variant="alt3">Visible below lg</Tag>
-        </Show>
-        <Show below="md">
-          <Tag variant="alt3">Visible below md</Tag>
-        </Show>
-        <Show below="sm">
-          <Tag variant="alt3">Visible below sm</Tag>
-        </Show>
-      </VStack>
-    </VStack>
-  ),
-};
-
-export const AsChild = {
-  render: () => (
-    <VStack gap="12">
-      <VStack gap="2" align="center">
-        <Show above="xl" asChild>
-          <Tag variant="neutral">Visible above xl</Tag>
-        </Show>
-        <Show above="lg" asChild>
-          <Tag variant="neutral">Visible above lg</Tag>
-        </Show>
-        <Show above="md" asChild>
-          <Tag variant="neutral">Visible above md</Tag>
-        </Show>
-        <Show above="sm" asChild>
-          <Tag variant="neutral">Visible above sm</Tag>
-        </Show>
-      </VStack>
-      <VStack gap="2" align="center">
-        <Show below="xl" asChild>
-          <Tag variant="alt3">Visible below xl</Tag>
-        </Show>
-        <Show below="lg" asChild>
-          <Tag variant="alt3">Visible below lg</Tag>
-        </Show>
-        <Show below="md" asChild>
-          <Tag variant="alt3">Visible below md</Tag>
-        </Show>
-        <Show below="sm" asChild>
-          <Tag variant="alt3">Visible below sm</Tag>
-        </Show>
-      </VStack>
-    </VStack>
-  ),
-};

package/src/layout/sidemal-test/navno-sidemal.stories.tsx

@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { Box } from "../box";
-import { HGrid } from "../grid";
-import { Hide, Show } from "../responsive";
-import { VStack } from "../stack";
-import { Content } from "./Content";
-import { FilterCard } from "./Filter";
-import { Header } from "./Header";
-import { IntroCard } from "./Intro";
-import { Sidebar } from "./Sidebar";
-import { ContentBox } from "./content-box";
-import "./styling.css";
-
-const meta = {
-  title: "kitchen sink/navno-sidemal",
-  parameters: {
-    layout: "fullscreen",
-    chromatic: { disableSnapshot: true },
-  },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Page: Story = {
-  render: () => {
-    return (
-      <div>
-        <Header />
-        <Box
-          style={{ minHeight: "calc(100vh - 10rem)" }}
-          background="surface-subtle"
-          paddingBlock="12 0"
-        >
-          <ContentBox maxWidth="lg">
-            <Box paddingInline="4">
-              <HGrid
-                align="start"
-                columns={{
-                  xs: "minmax(auto, 600px)",
-                  md: "288px minmax(auto, 600px)",
-                }}
-                gap={{ xs: "3", md: "6" }}
-              >
-                <Box style={{ position: "sticky", top: "1rem" }}>
-                  <Show above="md">
-                    <Sidebar />
-                  </Show>
-                </Box>
-                <VStack gap={{ xs: "6", md: "8" }}>
-                  <IntroCard />
-                  <FilterCard />
-                  <Hide above="md">
-                    <Sidebar />
-                  </Hide>
-                  <Content />
-                  <Content />
-                  <Content />
-                  <Content />
-                </VStack>
-              </HGrid>
-            </Box>
-          </ContentBox>
-        </Box>
-      </div>
-    );
-  },
-};

package/src/layout/stack/stack.stories.tsx

@@ -1,183 +0,0 @@
-import type { Meta } from "@storybook/react";
-import React from "react";
-import { HStack, Spacer, Stack, VStack } from ".";
-import { Box } from "../box";
-
-export default {
-  title: "ds-react/Primitives/Stack",
-  component: HStack,
-} satisfies Meta<typeof HStack>;
-
-export const Horizontal = {
-  render: () => (
-    <HStack gap="4">
-      <Placeholders count={4} />
-    </HStack>
-  ),
-};
-
-export const Spacing = {
-  render: () => (
-    <div style={{ height: "80vh", display: "flex" }}>
-      <VStack gap="8">
-        <Spacer />
-        <HStack gap="4">
-          <Placeholders count={1} />
-          <Spacer />
-          <Placeholders count={1} />
-        </HStack>
-        <HStack gap="4">
-          <Placeholders count={1} />
-          <Placeholders count={1} />
-        </HStack>
-        <HStack gap="4">
-          <Placeholders count={2} />
-        </HStack>
-      </VStack>
-    </div>
-  ),
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export const Vertical = {
-  render: () => (
-    <VStack gap="4">
-      <Placeholders count={4} />
-    </VStack>
-  ),
-};
-
-export const VerticalDemo = {
-  render: () => (
-    <VStack gap="2">
-      <VStack>
-        <Placeholders count={4} />
-      </VStack>
-      <Placeholders count={4} />
-      <VStack>
-        <Placeholders count={4} />
-      </VStack>
-    </VStack>
-  ),
-};
-
-export const VerticalAlign = {
-  render: () => (
-    <VStack gap="4">
-      <VStack align="start">
-        <Placeholders count={2} />
-      </VStack>
-      <VStack align="center">
-        <Placeholders count={2} />
-      </VStack>
-      <VStack align="end">
-        <Placeholders count={2} />
-      </VStack>
-    </VStack>
-  ),
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export const OverrideComponent = {
-  render: () => (
-    <VStack gap="4" as="form" onSubmit={(e) => e.preventDefault()}>
-      <Placeholders count={4} />
-    </VStack>
-  ),
-};
-
-export const Responsive = {
-  render: () => (
-    <VStack gap={{ xs: "1", sm: "3", md: "6", lg: "10", xl: "16" }}>
-      <Placeholders count={4} />
-    </VStack>
-  ),
-};
-
-export const Nested = {
-  render: () => (
-    <VStack gap="16">
-      <Placeholders count={2}>
-        <VStack gap="4">
-          <Placeholders count={2} color="gray" />
-        </VStack>
-      </Placeholders>
-    </VStack>
-  ),
-};
-
-export const DividerDemo = {
-  render: () => (
-    <div style={{ height: "80vh", width: "40rem" }}>
-      <VStack gap={{ xs: "2", md: "6", lg: "12" }}>
-        <HStack gap={{ xs: "2", md: "6", lg: "12" }}>
-          <Placeholders count={1} />
-          <Spacer />
-          <Placeholders count={1} />
-        </HStack>
-        <hr
-          style={{
-            border: "none",
-            borderBottom: "1px solid var(--a-border-divider)",
-            margin: 0,
-          }}
-        />
-        <HStack gap={{ xs: "2", md: "6", lg: "12" }}>
-          <Placeholders count={2} />
-        </HStack>
-      </VStack>
-    </div>
-  ),
-};
-
-export const ResponsiveDirection = {
-  render: () => (
-    <Box
-      background="surface-alt-3-subtle"
-      padding="12"
-      style={{ minWidth: "20rem", aspectRatio: "1/1" }}
-    >
-      <Stack
-        align={{ xs: "center", md: "start" }}
-        gap="2"
-        direction={{ xs: "column", lg: "row" }}
-      >
-        <Box padding="6" background="surface-action" />
-        <Box padding="2" background="surface-action" />
-        <Box padding="6" background="surface-action" />
-        <Box padding="4" background="surface-action" />
-      </Stack>
-    </Box>
-  ),
-};
-
-function Placeholders({
-  count,
-  children,
-  color,
-}: {
-  count: number;
-  children?: React.ReactNode;
-  color?: string;
-}) {
-  return (
-    <>
-      {Array.from({ length: count }, (_, i) => (
-        <div
-          key={i}
-          style={{
-            backgroundColor: color ?? "var(--a-purple-200)",
-            height: children ? "" : "3rem",
-            width: children ? "" : "3rem",
-          }}
-        >
-          {children}
-        </div>
-      ))}
-    </>
-  );
-}