@postenbring/hedwig-react 0.0.87 → 0.0.89

package/src/layout/container/container.stories.tsx

@@ -1,30 +1,34 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
 import { useState, useEffect, useRef, useId } from "react";
-import { Container } from "..";
+import { Container, Grid } from "..";
 
 const meta: Meta<typeof Container> = {
   title: "Layout/Container",
   component: Container,
-  render: (args) => (
-    <Container {...args} style={{ background: "var(--hds-ui-colors-warning-yellow)" }}>
-      <div style={{ background: "var(--hds-ui-colors-warning-yellow-light-fill)" }}>
-        <Widths />
-      </div>
-    </Container>
-  ),
 };
 
 export default meta;
 
 type Story = StoryObj<typeof Container>;
 
-export const Default: Story = {};
-
-export const Slim: Story = {
-  args: {
-    variant: "slim",
-  },
+export const Preview: Story = {
+  tags: ["!dev"],
+  render: (args) => (
+    <div style={{ background: "#f8cb9c" }}>
+      <Container {...args} style={{ background: "#c1cd8a" }}>
+        <Grid
+          style={{
+            background: "var(--hds-colors-lighter)",
+          }}
+          span={{ initial: 8, medium: 6, large: 4 }}
+          center
+        >
+          <Widths />
+        </Grid>
+      </Container>
+    </div>
+  ),
 };
 
 function Widths() {

package/src/layout/grid/grid.stories.tsx

@@ -0,0 +1,28 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "../../box";
+import { Grid } from ".";
+
+type Story = StoryObj<typeof Grid>;
+
+const meta: Meta<typeof Grid> = {
+  title: "Layout/Grid",
+  component: Grid,
+};
+
+export default meta;
+
+export const Preview: Story = {
+  tags: ["!dev"],
+  args: {
+    gap: "12-16",
+    span: { initial: 12, small: 4 },
+    children: (
+      <>
+        <Box>1</Box>
+        <Box>2</Box>
+        <Box>3</Box>
+      </>
+    ),
+  },
+};

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

@@ -0,0 +1,28 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "../../box";
+import { Stack } from ".";
+
+type Story = StoryObj<typeof Stack>;
+
+const meta: Meta<typeof Stack> = {
+  title: "Layout/Stack",
+  component: Stack,
+};
+
+export default meta;
+
+export const Preview: Story = {
+  tags: ["!dev"],
+  args: {
+    gap: "12-16",
+    direction: { initial: "column", small: "row" },
+    children: (
+      <>
+        <Box>1</Box>
+        <Box>2</Box>
+        <Box>3</Box>
+      </>
+    ),
+  },
+};

package/src/link/link.stories.tsx

@@ -6,16 +6,6 @@ const meta: Meta<typeof Link> = {
   title: "Link",
   component: Link,
 
-  args: {
-    children: "Link",
-    href: "https://www.posten.no/",
-    onClick: (e) => {
-      e.preventDefault();
-      // eslint-disable-next-line no-alert -- Storybook Demo
-      alert("Hello");
-    },
-  },
-
   // Hide onClick from the auto generated table
   argTypes: {
     onClick: {
@@ -30,35 +20,15 @@ export default meta;
 
 type Story = StoryObj<typeof Link>;
 
-export const Underline: Story = {};
-export const Solid: Story = {
+export const Preview: Story = {
+  tags: ["!dev"],
   args: {
-    variant: "solid",
-  },
-};
-export const Inverted: Story = {
-  args: {
-    variant: "inverted",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-};
-export const NoUnderline: Story = {
-  args: {
-    variant: "no-underline",
-  },
-};
-
-export const ButtonAsLink: Story = {
-  name: "Button as a link",
-  args: {
-    asChild: true,
-    children: <button type="button">Les mer</button>,
-    href: undefined,
-    onClick: () => {
-      // eslint-disable-next-line no-alert -- Story
-      alert(`Hello world`);
+    children: "Link",
+    href: "https://www.posten.no/",
+    onClick: (e) => {
+      e.preventDefault();
+      // eslint-disable-next-line no-alert -- Storybook Demo
+      alert("Hello");
     },
   },
 };

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

@@ -3,36 +3,34 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Link } from "../link";
 import { LinkList } from "./link-list";
 
-type Story = StoryObj<typeof LinkList>;
+const meta: Meta<typeof LinkList> = {
+  title: "Link List",
+  component: LinkList,
+};
+export default meta;
 
-const linkListItems = () => (
-  <>
-    <li>
-      <Link href="https://hedwig.posten.no">Link somewhere</Link>
-    </li>
-    <li>
-      <Link href="https://hedwig.posten.no" target="_blank">
-        Link somewhere
-      </Link>
-    </li>
-    <li>
-      <Link href="https://hedwig.posten.no" target="_self">
-        Link somewhere
-      </Link>
-    </li>
-  </>
-);
+type Story = StoryObj<typeof LinkList>;
 
-export const LinkListStory: Story = {
-  name: "Link List",
+export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     size: "medium",
-    children: linkListItems(),
+    children: (
+      <>
+        <li>
+          <Link href="https://hedwig.posten.no">Link somewhere</Link>
+        </li>
+        <li>
+          <Link href="https://hedwig.posten.no" target="_blank">
+            Link somewhere
+          </Link>
+        </li>
+        <li>
+          <Link href="https://hedwig.posten.no" target="_self">
+            Link somewhere
+          </Link>
+        </li>
+      </>
+    ),
   },
 };
-
-const meta: Meta<typeof LinkList> = {
-  title: "Link List",
-  component: LinkList,
-};
-export default meta;

package/src/list/list.stories.tsx

@@ -1,10 +1,16 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { StoryObj, Meta } from "@storybook/react";
 import { HStack } from "../layout";
-import { OrderedList, UnorderedList } from ".";
+import { UnorderedList } from ".";
 
 type Story = StoryObj<typeof UnorderedList>;
 
+const meta: Meta<typeof UnorderedList> = {
+  title: "List",
+  component: UnorderedList,
+};
+export default meta;
+
 const listItems = (
   <>
     <li>List item 1</li>
@@ -13,59 +19,16 @@ const listItems = (
   </>
 );
 
-export const UnorderedListStory: Story = {
-  name: "Unordered List",
+export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     children: listItems,
   },
   render: (props) => (
     <HStack gap="16">
-      <UnorderedList {...props} size="small" />
-      <UnorderedList {...props} size="medium" />
       <UnorderedList {...props} size="large" />
+      <UnorderedList {...props} size="medium" />
+      <UnorderedList {...props} size="small" />
     </HStack>
   ),
 };
-
-export const OrderedListStory: Story = {
-  name: "Ordered List",
-  args: {
-    children: listItems,
-  },
-  render: (props) => (
-    <HStack gap="16">
-      <OrderedList {...(props as React.HTMLAttributes<HTMLOListElement>)} size="small" />
-      <OrderedList {...(props as React.HTMLAttributes<HTMLOListElement>)} size="medium" />
-      <OrderedList {...(props as React.HTMLAttributes<HTMLOListElement>)} size="large" />
-    </HStack>
-  ),
-};
-
-export const NestedLists: Story = {
-  render: () => (
-    <UnorderedList>
-      <li>
-        Varer med verdi opp til 3000 kroner der mva. er betalt i utenlandsk nettbutikk
-        (VOEC-ordningen): Ingen fortolling.
-      </li>
-      <li>
-        Næringsmidler, særavgiftsvarer og restriksjonsbelagte varer uansett verdi, samt varer med
-        verdi over&nbsp;3000 kroner: Fortolling til 270&nbsp;kroner (gjelder fra 01.12.2023).
-      </li>
-      <li>
-        Andre varer med verdi mellom 0 og 3000 kroner blir fortollet basert på verdi av innholdet i
-        sendingen. Posten har satt ned prisene for å utføre fortollingen.
-        <UnorderedList>
-          <li>Verdi på vare 0–500 kroner: 45 kroner</li>
-          <li>Verdi på vare&nbsp;500–3000 kroner: 75 kroner</li>
-        </UnorderedList>
-      </li>
-    </UnorderedList>
-  ),
-};
-
-const meta: Meta<typeof UnorderedList> = {
-  title: "List",
-  component: UnorderedList,
-};
-export default meta;

package/src/message/message.stories.tsx

@@ -5,17 +5,7 @@ import { Message } from ".";
 const meta: Meta<typeof Message> = {
   title: "Message",
   component: Message,
-  args: {
-    children: (
-      <>
-        <Message.Title>Message header</Message.Title>
-        <Message.Description>
-          Message header Message description. A more detailed explanation of whats happening, but
-          not too long.
-        </Message.Description>
-      </>
-    ),
-  },
+
   argTypes: {
     variant: {
       options: ["success", "attention", "warning", "neutral"],
@@ -29,65 +19,18 @@ const meta: Meta<typeof Message> = {
 export default meta;
 
 type Story = StoryObj<typeof Message>;
-export const Success: Story = {
+export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     variant: "success",
-  },
-};
-
-export const Attention: Story = {
-  args: {
-    variant: "attention",
-  },
-};
-
-export const Warning: Story = {
-  args: {
-    variant: "warning",
-  },
-};
-
-export const Neutral: Story = {
-  args: {
-    variant: "neutral",
-    icon: (
-      <svg
-        aria-hidden
-        fill="none"
-        height="32"
-        viewBox="0 0 24 24"
-        width="32"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M12 19.3125C12.2602 19.3125 12.9492 19.0594 13.6734 17.6109C13.9828 16.9887 14.25 16.2328 14.4469 15.375H9.55312C9.75 16.2328 10.0172 16.9887 10.3266 17.6109C11.0508 19.0594 11.7398 19.3125 12 19.3125ZM9.27539 13.6875H14.7246C14.7809 13.1496 14.8125 12.5836 14.8125 12C14.8125 11.4164 14.7809 10.8504 14.7246 10.3125H9.27539C9.21914 10.8504 9.1875 11.4164 9.1875 12C9.1875 12.5836 9.21914 13.1496 9.27539 13.6875ZM9.55312 8.625H14.4469C14.25 7.76719 13.9828 7.01133 13.6734 6.38906C12.9492 4.94063 12.2602 4.6875 12 4.6875C11.7398 4.6875 11.0508 4.94063 10.3266 6.38906C10.0172 7.01133 9.75 7.76719 9.55312 8.625ZM16.4191 10.3125C16.4719 10.8574 16.4965 11.4234 16.4965 12C16.4965 12.5766 16.4684 13.1426 16.4191 13.6875H19.1156C19.2422 13.1461 19.3125 12.5801 19.3125 12C19.3125 11.4199 19.2457 10.8539 19.1156 10.3125H16.4227H16.4191ZM18.4863 8.625C17.734 7.18008 16.5141 6.01992 15.027 5.34141C15.5227 6.24141 15.9164 7.36289 16.173 8.625H18.4898H18.4863ZM7.82344 8.625C8.08008 7.36289 8.47383 6.24492 8.96953 5.34141C7.48242 6.01992 6.2625 7.18008 5.51016 8.625H7.82695H7.82344ZM4.88437 10.3125C4.75781 10.8539 4.6875 11.4199 4.6875 12C4.6875 12.5801 4.7543 13.1461 4.88437 13.6875H7.58086C7.52813 13.1426 7.50352 12.5766 7.50352 12C7.50352 11.4234 7.53164 10.8574 7.58086 10.3125H4.88437ZM15.027 18.6586C16.5141 17.9801 17.734 16.8199 18.4863 15.375H16.173C15.9164 16.6371 15.5227 17.7551 15.027 18.6586ZM8.97305 18.6586C8.47734 17.7586 8.08359 16.6371 7.82695 15.375H5.51016C6.2625 16.8199 7.48242 17.9801 8.96953 18.6586H8.97305ZM12 21C9.61305 21 7.32387 20.0518 5.63604 18.364C3.94821 16.6761 3 14.3869 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12C21 14.3869 20.0518 16.6761 18.364 18.364C16.6761 20.0518 14.3869 21 12 21Z"
-          fill="currentColor"
-        />
-      </svg>
-    ),
     children: (
       <>
-        <Message.Title>Custom icons</Message.Title>
-        <Message.Description>Icon is a prop, so you can use whatever you like.</Message.Description>
+        <Message.Title>Message header</Message.Title>
+        <Message.Description>
+          Message header Message description. A more detailed explanation of whats happening, but
+          not too long.
+        </Message.Description>
       </>
     ),
   },
 };
-
-export const TitleOnly: Story = {
-  args: {
-    variant: "attention",
-    children: <Message.Title>Message header</Message.Title>,
-  },
-};
-
-export const LongDescriptionOnly: Story = {
-  args: {
-    children: (
-      <Message.Description>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et dolor id nisl consectetur
-        aliquet. Donec euismod, nibh et aliquam tincidunt, nunc urna ultricies
-      </Message.Description>
-    ),
-  },
-};

package/src/modal/modal.stories.tsx

@@ -2,9 +2,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { useRef } from "react";
 import { Button } from "../button";
-import { Link } from "../link";
-import { Message } from "../message";
-import { StyledHtml } from "../styled-html";
 import { HStack } from "../layout";
 import { Modal } from ".";
 
@@ -16,7 +13,8 @@ const meta: Meta<typeof Modal> = {
 export default meta;
 
 type Story = StoryObj<typeof Modal>;
-export const Main = {
+export const Preview: Story = {
+  tags: ["!dev"],
   render: function Render(args) {
     const modalRef = useRef<HTMLDialogElement>(null);
     const onClose = () => modalRef.current?.close();
@@ -46,102 +44,3 @@ export const Main = {
     );
   },
 } satisfies Story;
-
-export const ShareParcelModal = {
-  render: function Render(args) {
-    const modalRef = useRef<HTMLDialogElement>(null);
-    const open = window.location.search.includes("viewMode=story");
-    return (
-      <>
-        <Button onClick={() => modalRef.current?.showModal()}>Open Modal</Button>
-        <Modal ref={modalRef} {...args} closeOnBackdropClick open={open}>
-          <Modal.Header>Legg til pakken</Modal.Header>
-          <Modal.Content>
-            <StyledHtml>
-              For å kunne hente pakken, må du legge den til i appen fra mobilen din.
-              <br />
-              <br />
-              <strong>Viktig!</strong>
-              <br />
-              Appen må allerede være innstallert på mobilen før du kan legge den til
-            </StyledHtml>
-          </Modal.Content>
-          <Modal.Footer>
-            <Button fullWidth="mobile">Legg til pakken i Posten-appen </Button>
-          </Modal.Footer>
-        </Modal>
-      </>
-    );
-  },
-} satisfies Story;
-
-export const MuchContentBelow: Story = {
-  render: function Render(args) {
-    return (
-      <>
-        <div
-          style={{
-            height: 3200,
-            background: "linear-gradient(to bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12)",
-          }}
-        />
-        {Main.render(args)}
-        <div style={{ height: 1600, background: "deeppink" }} />
-      </>
-    );
-  },
-};
-
-export const AsAReadMore: Story = {
-  name: "As a read more",
-  render: function Render(args) {
-    const modalRef = useRef<HTMLDialogElement>(null);
-
-    return (
-      <>
-        <Message variant="attention">
-          <Message.Title>Kunne ikke leveres hjem</Message.Title>
-          <Message.Description>
-            Vi møtte på utfordringer da vi skulle levere pakken hjem til deg. Derfor har vi sendt
-            den til ditt nærmeste hentested.{" "}
-            <Link variant="solid" asChild>
-              <button type="button" onClick={() => modalRef.current?.showModal()}>
-                Les mer
-              </button>
-            </Link>
-          </Message.Description>
-        </Message>
-
-        <Modal ref={modalRef} {...args}>
-          <Modal.Header>Kunne ikke leveres hjem til deg</Modal.Header>
-
-          <Modal.Content asChild>
-            <StyledHtml>
-              <p>
-                Noen ganger kan vi ikke levere pakken til postkassen din, eller utenfor døren. Det
-                kan være ulike grunner til dette, for eksempel:
-              </p>
-              <ul>
-                <li>Pakken var for stor for postkassen din</li>
-                <li>Det var ikke mulig å sette den utenfor døren din</li>
-                <li>Ingen var hjemme</li>
-                <li>Døren var ikke merket med navn</li>
-                <li>Andre årsaker</li>
-              </ul>
-              <p>
-                Pakken blir videresendt til ditt nærmeste hentested når den ikke kan leveres hjem.
-                Den vil vanligvis være klar til henting der etter én til to virkedager.
-              </p>
-            </StyledHtml>
-          </Modal.Content>
-
-          <Modal.Footer>
-            <Button fullWidth="mobile" onClick={() => modalRef.current?.close()}>
-              Lukk
-            </Button>
-          </Modal.Footer>
-        </Modal>
-      </>
-    );
-  },
-};

package/src/navbar/icons.tsx

@@ -1,9 +1,16 @@
 export function CloseIcon() {
   return (
-    <svg aria-hidden xmlns="http://www.w3.org/2000/svg" width={24} height={24}>
+    <svg
+      aria-hidden
+      xmlns="http://www.w3.org/2000/svg"
+      width={32}
+      height={32}
+      viewBox="0 0 32 32"
+      fill="none"
+    >
       <path
-        fill="currentColor"
-        d="m13.16 12.25 3.621-3.586.739-.738c.105-.106.105-.281 0-.422l-.774-.774c-.14-.105-.316-.105-.422 0L12 11.09 7.64 6.73c-.105-.105-.28-.105-.421 0l-.774.774c-.105.14-.105.316 0 .422l4.36 4.324-4.36 4.36c-.105.105-.105.28 0 .421l.774.774c.14.105.316.105.422 0L12 13.445l3.586 3.621.738.739c.106.105.281.105.422 0l.774-.774c.105-.14.105-.316 0-.422l-4.36-4.359Z"
+        d="M17.5469 16.3333L22.375 11.5521L23.3594 10.5677C23.5 10.4271 23.5 10.1927 23.3594 10.0052L22.3281 8.97394C22.1406 8.83331 21.9062 8.83331 21.7656 8.97394L16 14.7864L10.1875 8.97394C10.0469 8.83331 9.8125 8.83331 9.625 8.97394L8.59375 10.0052C8.45312 10.1927 8.45312 10.4271 8.59375 10.5677L14.4062 16.3333L8.59375 22.1458C8.45312 22.2864 8.45312 22.5208 8.59375 22.7083L9.625 23.7396C9.8125 23.8802 10.0469 23.8802 10.1875 23.7396L16 17.9271L20.7812 22.7552L21.7656 23.7396C21.9062 23.8802 22.1406 23.8802 22.3281 23.7396L23.3594 22.7083C23.5 22.5208 23.5 22.2864 23.3594 22.1458L17.5469 16.3333Z"
+        fill="black"
       />
     </svg>
   );

package/src/navbar/navbar.stories.tsx

@@ -1,14 +1,9 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
-import { Accordion } from "../accordion";
-import { Link } from "../link";
-import { LinkList } from "../list";
-import { ArticleContent } from "../styled-html/styled-html.stories";
-import { Container } from "../layout";
 import { Navbar } from ".";
 
 const meta: Meta<typeof Navbar> = {
-  title: "🚧 Navbar",
+  title: "Navbar",
   component: Navbar,
   parameters: {
     layout: "fullscreen",
@@ -17,6 +12,28 @@ const meta: Meta<typeof Navbar> = {
 
 export default meta;
 
+type Story = StoryObj<typeof Navbar>;
+export const Preview: Story = {
+  tags: ["!dev"],
+  render: () => (
+    <Navbar>
+      <Navbar.Logo asChild>
+        <a href="https://www.posten.no/" title="Til forsiden" />
+      </Navbar.Logo>
+      <Navbar.Navigation>
+        <Navbar.LinkItem title="Link" href="https://www.posten.no/">
+          English
+          <Navbar.ItemIcon>{globeIcon}</Navbar.ItemIcon>
+        </Navbar.LinkItem>
+        <Navbar.ButtonItem title="Button">
+          Search
+          <Navbar.ItemIcon>{userIcon}</Navbar.ItemIcon>
+        </Navbar.ButtonItem>
+      </Navbar.Navigation>
+    </Navbar>
+  ),
+};
+
 const globeIcon = (
   <svg
     aria-hidden
@@ -41,59 +58,3 @@ const userIcon = (
     />
   </svg>
 );
-
-type Story = StoryObj<typeof Navbar>;
-export const Default: Story = {
-  render: () => (
-    <>
-      <Navbar>
-        <Navbar.Logo asChild>
-          <a href="https://www.posten.no/" title="Til forsiden" />
-        </Navbar.Logo>
-        <Navbar.Navigation>
-          <Navbar.LinkItem title="Link" href="https://www.posten.no/">
-            English
-            <Navbar.ItemIcon>{globeIcon}</Navbar.ItemIcon>
-          </Navbar.LinkItem>
-          <Navbar.ButtonItem title="Button">
-            Search
-            <Navbar.ItemIcon>{userIcon}</Navbar.ItemIcon>
-          </Navbar.ButtonItem>
-          <Navbar.ExpandableMenu>
-            <Navbar.ExpandableMenuTrigger whenClosedText="Meny" whenOpenText="Close" />
-            <Navbar.ExpandableMenuContent>
-              <Container>
-                <h2>Menu contents</h2>
-                <Accordion>
-                  <Accordion.Item>
-                    <Accordion.Header>Tjenester</Accordion.Header>
-                    <Accordion.Content>
-                      <LinkList>
-                        <li>
-                          <Link href="#">Post</Link>
-                        </li>
-                        <li>
-                          <Link href="#">Pakker og gods</Link>
-                        </li>
-                        <li>
-                          <Link href="#">Bud og ekspress</Link>
-                        </li>
-                      </LinkList>
-                    </Accordion.Content>
-                  </Accordion.Item>
-                </Accordion>
-              </Container>
-            </Navbar.ExpandableMenuContent>
-          </Navbar.ExpandableMenu>
-        </Navbar.Navigation>
-      </Navbar>
-      <Container as="main">
-        <h1>Some content to be hidden when the menu opens</h1>
-        {
-          // @ts-expect-error -- It's ok
-          ArticleContent.render({})
-        }
-      </Container>
-    </>
-  ),
-};