@postenbring/hedwig-react 0.0.87 → 0.0.88

package/src/skeleton/skeleton.stories.tsx

@@ -1,12 +1,6 @@
-/* eslint-disable react-hooks/rules-of-hooks -- storybook story */
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
-import { useEffect, useState } from "react";
-import { StyledHtml } from "../styled-html";
-import { Card } from "../card";
-import { CardStory } from "../card/card.stories";
-import { Button } from "../button";
-import { HStack, VStack } from "../layout";
+import { VStack } from "../layout";
 import { Skeleton } from ".";
 
 const meta: Meta<typeof Skeleton> = {
@@ -18,7 +12,7 @@ export default meta;
 
 type Story = StoryObj<typeof Skeleton>;
 
-export const Default: Story = {
+export const Preview: Story = {
   render: () => (
     <VStack gap="8">
       <Skeleton variant="circle">
@@ -32,121 +26,3 @@ export const Default: Story = {
     </VStack>
   ),
 };
-
-export const LoadingCards: Story = {
-  render: () => {
-    // @ts-expect-error -- It's ok
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- It really is
-    const realCard = CardStory.render!({
-      style: { width: "400px" },
-    });
-
-    const skeletonCard = (
-      <Card
-        aria-hidden
-        as="div"
-        style={{
-          width: "400px",
-          backgroundColor: "var(--hds-ui-colors-light-grey-fill)",
-        }}
-      >
-        <Card.Media style={{ width: "100%", background: "white" }}>
-          <Skeleton variant="rectangle" style={{ width: "100%", aspectRatio: 16 / 9 }} />
-        </Card.Media>
-        <Card.Body>
-          <Card.BodyHeader as="h2">
-            <Card.BodyHeaderOverline asChild>
-              <Skeleton>Theme</Skeleton>
-            </Card.BodyHeaderOverline>
-            <Card.BodyHeaderTitle asChild>
-              <Skeleton>Cool article</Skeleton>
-            </Card.BodyHeaderTitle>
-          </Card.BodyHeader>
-          <Card.BodyDescription>
-            <Skeleton variant="text" />
-            <Skeleton variant="text" />
-            <Skeleton variant="text" />
-            <Skeleton variant="text" />
-            <Skeleton variant="text" width="80%" />
-          </Card.BodyDescription>
-          <Card.BodyAction>
-            <Skeleton variant="rectangle" height="1em" width="1em" />
-          </Card.BodyAction>
-        </Card.Body>
-      </Card>
-    );
-
-    const [isLoading, setIsLoading] = useState(true);
-    useEffect(() => {
-      if (isLoading) {
-        setTimeout(
-          () => {
-            setIsLoading(false);
-          },
-          randomNumberBetween(2000, 5000),
-        );
-      }
-    }, [isLoading]);
-
-    const card = isLoading ? skeletonCard : realCard;
-    return (
-      <div>
-        <Button
-          size="small"
-          onClick={() => {
-            setIsLoading(true);
-          }}
-        >
-          Reload
-        </Button>
-        <p className="hds-mt-8">Only use greytones, never any red or green colors.</p>
-        <HStack className="hds-mt-16" wrap gap="24">
-          {card}
-          {card}
-          {card}
-        </HStack>
-      </div>
-    );
-  },
-};
-
-function randomNumberBetween(min: number, max: number) {
-  return Math.floor(Math.random() * (max - min + 1) + min);
-}
-export const Article: Story = {
-  render: () => (
-    <StyledHtml aria-hidden>
-      <Skeleton variant="text" style={{ font: "var(--hds-typography-h1-display)" }}>
-        A title is loading
-      </Skeleton>
-      <Skeleton variant="rectangle">
-        <figure style={{ height: 300, aspectRatio: 16 / 9 }} />
-      </Skeleton>
-      <Skeleton variant="text" as="h2">
-        A subtitle with some more text is loading
-      </Skeleton>
-      <p>
-        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
-        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
-        <Skeleton variant="text" width={`${randomNumberBetween(25, 60)}%`} />
-        <Skeleton variant="text" width={`${randomNumberBetween(45, 80)}%`} />
-        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
-        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
-        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
-      </p>
-
-      <Skeleton variant="text" as="h2">
-        Another piece of text
-      </Skeleton>
-      <p>
-        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
-        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
-        <Skeleton variant="text" width={`${randomNumberBetween(25, 60)}%`} />
-        <Skeleton variant="text" width={`${randomNumberBetween(45, 80)}%`} />
-        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
-        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
-        <Skeleton variant="text" width={`${randomNumberBetween(75, 90)}%`} />
-      </p>
-    </StyledHtml>
-  ),
-};

package/src/step-indicator/step-indicator.stories.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
-import { Badge } from "../badge";
 import { StepIndicator } from ".";
 
 const meta: Meta<typeof StepIndicator> = {
@@ -12,39 +11,10 @@ export default meta;
 
 type Story = StoryObj<typeof StepIndicator>;
 
-export const Default: Story = {
+export const Preview: Story = {
   args: {
     label: "Progress name",
     totalSteps: 5,
     activeStep: 2,
   },
 };
-
-export const Title: Story = {
-  args: {
-    activeStep: 2,
-    label: "Pakke til utlandet",
-    lang: "no",
-    totalSteps: 5,
-    title: "Hvem sender pakken?",
-    titleAs: "h2",
-  },
-};
-
-export const WithBadgeInLabel: Story = {
-  args: {
-    activeStep: 2,
-    label: (
-      <>
-        Norgespakke™ liten
-        <Badge size="smaller" style={{ marginLeft: "var(--hds-spacing-12)" }}>
-          73,-
-        </Badge>
-      </>
-    ),
-    lang: "no",
-    totalSteps: 5,
-    title: "Størrelse og vekt",
-    titleAs: "h2",
-  },
-};

package/src/styled-html/styled-html.stories.tsx

@@ -5,28 +5,7 @@ import { StyledHtml } from ".";
 const meta: Meta<typeof StyledHtml> = {
   title: "Styled Html",
   component: StyledHtml,
-  args: {
-    children: (
-      <>
-        <h1>Hello</h1>
-        <h2>Hello</h2>
-
-        <a href="https://www.postenbring.no">Postenbring</a>
-
-        <ul>
-          <li>Hei</li>
-          <li>Hallo</li>
-          <li>Hello</li>
-        </ul>
 
-        <ol>
-          <li>En</li>
-          <li>To</li>
-          <li>Tre</li>
-        </ol>
-      </>
-    ),
-  },
   argTypes: {
     size: {
       defaultValue: "default",
@@ -48,142 +27,29 @@ const meta: Meta<typeof StyledHtml> = {
 export default meta;
 
 type Story = StoryObj<typeof StyledHtml>;
-export const Default: Story = {
-  args: {},
-};
-
-export const Darkmode: Story = {
-  args: {
-    darkmode: true,
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: "small",
-  },
-};
-
-export const DarkmodeSmall: Story = {
+export const Preview: Story = {
   args: {
-    darkmode: true,
-    size: "small",
-  },
-  parameters: {
-    backgrounds: { default: "dark" },
-  },
-};
-
-export const ArticleContent: Story = {
-  render: () => (
-    <StyledHtml>
-      <p>
-        Pakkeboksene er selvbetjente, og er plassert slik at de er mulig å bruke hele døgnet. Du
-        trenger bare mobilen din og Posten-appen for å åpne lukene.
-      </p>
-
-      <p>
-        Akkurat nå er det satt ut pakkebokser over 1800 steder i landet, og fremover vil det komme
-        enda flere.&nbsp;
-      </p>
-
-      <p>
-        <a href="/motta/fleksibelt/pakkeboks" title="Les mer og finn Pakkeboks">
-          Her kan du finne din nærmeste Pakkeboks
-        </a>
-      </p>
-
-      <h1 className="hds-text-h3">Slik bruker du Pakkeboks:</h1>
-
-      <p>
-        For å bruke pakkeboksene må du&nbsp;
-        <a href="/posten-app" target="_blank" title="Last ned Posten-appen">
-          laste ned Posten-appen
-        </a>
-        &nbsp;på mobilen din. Med appen kan du:
-      </p>
-
-      <ul>
-        <li>Åpne luke for å hente pakke</li>
-        <li>Reservere og åpne luke når du skal sende pakke</li>
-        <li>Velge om du vil ha pakker kun levert i de midterste lukene</li>
-        <li>Dele pakkene dine&nbsp;med andre, slik at de kan hente eller sende dem for deg</li>
-      </ul>
-
-      <h2>Hente pakker</h2>
-
-      <p>
-        Du får varsel i Posten-appen når du har en pakke som skal hentes i Pakkeboks. Slik gjør du:
-      </p>
-
-      <ul>
-        <li>Stå ved pakkeboksen og åpne appen. Husk å ha på Bluetooth</li>
-        <li>Appen kobler til riktig boks, og viser hvilken luke pakken din er i</li>
-        <li>Trykk på Åpne luke, og ta ut pakken din.</li>
-        <li>Steng luken og lukk appen</li>
-      </ul>
-
-      <h2>Velge høyde på luke</h2>
-
-      <p>Slik velger du at du vil ha pakkene kun i midterste luker:</p>
-
-      <ul>
-        <li>Du må ha nyeste versjon av Posten-appen</li>
-        <li>Åpne appen, og trykk på «Profil»</li>
-        <li>Velg «Levering i Pakkeboks», deretter&nbsp;«Luker på midten»</li>
-        <li>Lagre valget ditt</li>
-      </ul>
-
-      <h2>Sende fra Pakkeboks</h2>
-
-      <p>
-        Nå kan du bruke Posten-appen for å reservere luker i pakkeboksen når du skal sende{" "}
-        <a
-          href="/sende/i-norge/norgespakke/norgespakke-0-5-kg"
-          target="_blank"
-          title="Les mer om Norgespakke™ liten"
-        >
-          Norgespakke™ liten
-        </a>
-        .
-      </p>
-
-      <p>Slik reserverer du luke for å sende pakke:</p>
-
-      <ul>
-        <li>
-          Du må ha Posten-appen for å bestille sending og&nbsp;holde av en&nbsp;luke i pakkeboksen
-        </li>
-        <li>Velg&nbsp;Norgespakke™ liten, og følg stegene for kjøp av frakt</li>
-        <li>Velg innlevering på Posten, og fullfør kjøpet</li>
-        <li>
-          Du trenger ikke reservere luke rett etter kjøp, dette kan du gjøre innenfor 2 timer før du
-          skal sende pakken
-        </li>
-        <li>Pakken din blir hentet senest neste virkedag</li>
-      </ul>
-
-      <h2>Returnere fra Pakkeboks</h2>
+    children: (
+      <>
+        <h1>Heading</h1>
+        <h2>Subheading</h2>
 
-      <ul>
-        <li>
-          Du må ha&nbsp;<a href="https://www.posten.no/posten-app">Posten-appen</a>&nbsp;for å
-          reservere en luke.
-        </li>
-        <li>Velg retur i appen og følg stegene videre</li>
-        <li>Fest&nbsp;adresselappen for retur&nbsp;midt på pakken med strekkoden godt synlig</li>
-        <li>Luken holdes av i to timer fra du reserverer den.</li>
-        <li>Du kan reservere en luke&nbsp;når som helst</li>
-      </ul>
+        <p>
+          God dag, her er en lenke til <a href="https://www.postenbring.no">Postenbring</a>
+        </p>
 
-      <p>Er det noe du lurer på?</p>
+        <ul>
+          <li>Hei</li>
+          <li>Hallo</li>
+          <li>Hello</li>
+        </ul>
 
-      <p>
-        Se flere <a href="/kundeservice/pakkeboks-hjelp">spørsmål og svar om Pakkeboks</a>.
-      </p>
-    </StyledHtml>
-  ),
+        <ol>
+          <li>En</li>
+          <li>To</li>
+          <li>Tre</li>
+        </ol>
+      </>
+    ),
+  },
 };

package/src/styled-html/styled-html.tsx

@@ -4,8 +4,18 @@ import { Slot } from "@radix-ui/react-slot";
 
 export interface StyledHtmlProps extends React.HTMLAttributes<HTMLDivElement> {
   children?: React.ReactNode;
+
+  /**
+   * Size of content inside. Setting this to `small` makes the font size be `body-small`.
+   *
+   * @default "default"
+   */
   size?: "default" | "small";
-  darkmode?: boolean;
+
+  /**
+   * 🚧 Work in progress darkmode support
+   */
+  unstable_darkmode?: boolean;
 
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
@@ -38,7 +48,7 @@ export interface StyledHtmlProps extends React.HTMLAttributes<HTMLDivElement> {
  * ```
  */
 export const StyledHtml = forwardRef<HTMLDivElement, StyledHtmlProps>(
-  ({ asChild, children, size, darkmode = false, className, ...rest }, ref) => {
+  ({ asChild, children, size, unstable_darkmode: darkmode = false, className, ...rest }, ref) => {
     const Component = asChild ? Slot : "div";
     return (
       <Component

package/src/table/table.stories.tsx

@@ -0,0 +1,42 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Table } from ".";
+
+type Story = StoryObj<typeof Table>;
+
+const meta: Meta<typeof Table> = {
+  title: "Table",
+  component: Table,
+};
+export default meta;
+
+export const Preview: Story = {
+  args: {
+    caption: "Default table",
+    description: "A short explanation of what this table contains, If you need it.",
+
+    children: (
+      <>
+        <thead>
+          <tr>
+            <th>Header 1</th>
+            <th>Header 2</th>
+            <th>Header 3</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Row 1, Cell 1</td>
+            <td>Row 1, Cell 2</td>
+            <td>Row 1, Cell 3</td>
+          </tr>
+          <tr>
+            <td>Row 2, Cell 1</td>
+            <td>Row 2, Cell 2</td>
+            <td>Row 2, Cell 3</td>
+          </tr>
+        </tbody>
+      </>
+    ),
+  },
+};

package/src/tabs/tabs.stories.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
-import { StyledHtml } from "../styled-html";
 import { Tabs } from ".";
 
 type Story = StoryObj<typeof Tabs>;
@@ -9,130 +8,24 @@ const meta: Meta<typeof Tabs> = {
   title: "Tabs",
   component: Tabs,
 };
+export default meta;
 
-export const Horizontal: Story = {
+export const Preview: Story = {
   args: {
     defaultTab: "first",
     children: (
       <>
         <Tabs.List>
-          <Tabs.Tab tabId="first">First</Tabs.Tab>
-          <Tabs.Tab tabId="second">Second</Tabs.Tab>
-          <Tabs.Tab tabId="third">Third</Tabs.Tab>
-          <Tabs.Tab tabId="forth">Forth</Tabs.Tab>
-          <Tabs.Tab tabId="fifth">Fifth</Tabs.Tab>
-          <Tabs.Tab tabId="sixth">Sixth</Tabs.Tab>
-        </Tabs.List>
-        <Tabs.Contents>
-          <Tabs.Content forTabId="first">First tab</Tabs.Content>
-          <Tabs.Content forTabId="second">Second tab</Tabs.Content>
-          <Tabs.Content forTabId="third">Third tab</Tabs.Content>
-          <Tabs.Content forTabId="forth">Forth tab</Tabs.Content>
-          <Tabs.Content forTabId="fifth">Fifth tab</Tabs.Content>
-          <Tabs.Content forTabId="sixth">Sixth tab</Tabs.Content>
-        </Tabs.Contents>
-      </>
-    ),
-  },
-};
-
-export const Vertical: Story = {
-  args: {
-    defaultTab: "first",
-    children: (
-      <>
-        <Tabs.List direction="vertical">
-          <Tabs.Tab tabId="first">First</Tabs.Tab>
-          <Tabs.Tab tabId="second">Second</Tabs.Tab>
-          <Tabs.Tab tabId="third">Third</Tabs.Tab>
-          <Tabs.Tab tabId="forth">Forth</Tabs.Tab>
-          <Tabs.Tab tabId="fifth">Fifth</Tabs.Tab>
-          <Tabs.Tab tabId="sixth">Sixth</Tabs.Tab>
+          <Tabs.Tab tabId="first">Send domestically</Tabs.Tab>
+          <Tabs.Tab tabId="second">Send abroad</Tabs.Tab>
+          <Tabs.Tab tabId="third">Other services</Tabs.Tab>
         </Tabs.List>
         <Tabs.Contents>
-          <Tabs.Content forTabId="first">First tab</Tabs.Content>
-          <Tabs.Content forTabId="second">Second tab</Tabs.Content>
+          <Tabs.Content forTabId="first">Single tab</Tabs.Content>
+          <Tabs.Content forTabId="second">Two tabs</Tabs.Content>
           <Tabs.Content forTabId="third">Third tab</Tabs.Content>
-          <Tabs.Content forTabId="forth">Forth tab</Tabs.Content>
-          <Tabs.Content forTabId="fifth">Fifth tab</Tabs.Content>
-          <Tabs.Content forTabId="sixth">Sixth tab</Tabs.Content>
         </Tabs.Contents>
       </>
     ),
   },
 };
-
-export const HorizontalWithMiddleSelected: Story = {
-  args: {
-    defaultTab: "second",
-    children: (
-      <>
-        <Tabs.List>
-          <Tabs.Tab tabId="first">Pakker og gods for bedrift</Tabs.Tab>
-          <Tabs.Tab tabId="second">Post og brevpost</Tabs.Tab>
-          <Tabs.Tab tabId="third">Bud- og ekspress-pakker</Tabs.Tab>
-        </Tabs.List>
-        <Tabs.Contents>
-          <Tabs.Content forTabId="first" asChild>
-            <StyledHtml>
-              <h2>Vilkår for transport til bedrifter nasjonalt</h2>
-              <ul>
-                <li>
-                  <a href="/tjenester/pakker-og-gods/Transportguiden_01122023.pdf">
-                    Transportguiden fra 01.12.2023 (pdf)
-                  </a>
-                </li>
-                <li>
-                  <a
-                    href="https://lovdata.no/dokument/NL/lov/1974-12-20-68?q=Lov+om+vegfraktavtaler"
-                    rel="noopener"
-                    target="_blank"
-                  >
-                    Link til Lov om Vegfraktavtaler fra Lovdata
-                  </a>
-                </li>
-                <li>
-                  <a href="/vilkar/nsab-2000.pdf">NSAB 2000 (pdf)</a>
-                </li>
-                <li>
-                  <a href="/vilkar/nsab-2015.pdf">NSAB 2015 (pdf)</a>
-                </li>
-                <li>
-                  <a href="/vilkar/pakker-til-bedrifter-i-utlandet-pakker-og-gods-sikkerhetsbestemmelser">
-                    Pakker og gods - sikkerhetsbestemmelser
-                  </a>
-                </li>
-                <li>
-                  <a href="/vilkar/vilkar-for-pakke-til-bedrift">Vilkår for Pakke til bedrift</a>
-                </li>
-                <li>
-                  <a href="/vilkar/vilkar-for-ekspress-neste-dag">Vilkår for Ekspress neste dag</a>
-                </li>
-                <li>
-                  <a href="/vilkar/Betingelser%20Oljeekspressen.pdf">
-                    Betingelser Oljeekspressen (pdf)
-                  </a>
-                  &nbsp;
-                </li>
-                <li>
-                  <a href="/tjenester/pakker-og-gods/Transportguiden_01122023.pdf">
-                    Vilkår for godstjenester fra 01.12.2023 (pdf)
-                  </a>
-                  &nbsp;
-                </li>
-              </ul>
-            </StyledHtml>
-          </Tabs.Content>
-          <Tabs.Content forTabId="second">
-            <h2>Vilkår for post med like formater</h2>
-          </Tabs.Content>
-          <Tabs.Content forTabId="third">
-            <h2>Generelle vilkår</h2>
-          </Tabs.Content>
-        </Tabs.Contents>
-      </>
-    ),
-  },
-};
-
-export default meta;