@postenbring/hedwig-react 0.0.87 → 0.0.89

package/src/show-more/show-more.stories.tsx

@@ -1,10 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
-/* eslint-disable react-hooks/rules-of-hooks -- it's ok */
+
 import type { Meta, StoryObj } from "@storybook/react";
-import { useRef, useState } from "react";
-import { flushSync } from "react-dom";
-import { StyledHtml } from "../styled-html";
-import { AutoAnimateHeight } from "../utils/auto-animate-height";
 import { ShowMoreButton } from ".";
 
 const meta: Meta<typeof ShowMoreButton> = {
@@ -16,7 +12,8 @@ export default meta;
 
 type Story = StoryObj<typeof ShowMoreButton>;
 
-export const ShowMore: Story = {
+export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     text: "Vis flere",
     onClick: () => {
@@ -25,95 +22,3 @@ export const ShowMore: Story = {
     },
   },
 };
-
-export const ShowMoreShowLess: Story = {
-  args: {
-    text: "Vis resten",
-    variant: "show-more-show-less",
-    expanded: false,
-  },
-};
-
-export const ShowMoreShowLessExpanded: Story = {
-  args: {
-    text: "Skjul resten",
-    variant: "show-more-show-less",
-    expanded: true,
-  },
-};
-
-export const SimpleShowMoreShowLess: Story = {
-  render: () => {
-    const [expanded, setExpanded] = useState(false);
-    const elements = Array.from({ length: expanded ? 8 : 3 }, (_, i) => (
-      <li key={i}>Hallo {Math.random()}</li>
-    ));
-    return (
-      <>
-        <StyledHtml>
-          <AutoAnimateHeight animationDuration="quick">
-            <ul>{elements}</ul>
-          </AutoAnimateHeight>
-        </StyledHtml>
-        <ShowMoreButton
-          variant="show-more-show-less"
-          expanded={expanded}
-          onClick={() => {
-            setExpanded((prev) => !prev);
-          }}
-          style={{ marginTop: "var(--hds-spacing-24)" }}
-          text={expanded ? "Vis færre hendelser" : "Vis flere hendelser"}
-        />
-      </>
-    );
-  },
-};
-
-export const CompleteShowMoreShowLess: Story = {
-  render: () => {
-    const [expanded, setExpanded] = useState(false);
-    const ref = useRef<HTMLDivElement>(null);
-
-    const elements = Array.from({ length: expanded ? 40 : 3 }, (_, i) => (
-      <li key={i}>Hallo {Math.random()}</li>
-    ));
-    return (
-      <div>
-        <div
-          style={{
-            height: 1400,
-            background: "linear-gradient(to bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12)",
-          }}
-        />
-        <StyledHtml ref={ref}>
-          <AutoAnimateHeight animationDuration="normal">
-            <ul>{elements}</ul>
-          </AutoAnimateHeight>
-        </StyledHtml>
-        <ShowMoreButton
-          variant="show-more-show-less"
-          expanded={expanded}
-          onClick={() => {
-            // Using flushSync to ensure the scrollIntoView is called after the state is updated
-            flushSync(() => {
-              setExpanded((prev) => !prev);
-            });
-            if (expanded) {
-              setTimeout(() => {
-                ref.current?.scrollIntoView({ behavior: "smooth", block: "nearest" });
-              }, 300); // Wait for the animation to finish
-            }
-          }}
-          style={{ marginTop: "var(--hds-spacing-24)" }}
-          text={expanded ? "Vis færre hendelser" : "Vis flere hendelser"}
-        />
-        <div
-          style={{
-            height: 1400,
-            background: "linear-gradient(to top, #051937, #004d7a, #008793, #00bf72, #a8eb12)",
-          }}
-        />
-      </div>
-    );
-  },
-};

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,8 @@ export default meta;
 
 type Story = StoryObj<typeof Skeleton>;
 
-export const Default: Story = {
+export const Preview: Story = {
+  tags: ["!dev"],
   render: () => (
     <VStack gap="8">
       <Skeleton variant="circle">
@@ -32,121 +27,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,11 @@ export default meta;
 
 type Story = StoryObj<typeof StepIndicator>;
 
-export const Default: Story = {
+export const Preview: Story = {
+  tags: ["!dev"],
   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,30 @@ 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 = {
+  tags: ["!dev"],
   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,43 @@
+/* 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 = {
+  tags: ["!dev"],
+  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>
+      </>
+    ),
+  },
+};