@postenbring/hedwig-react 0.0.87 → 0.0.89

package/src/box/box.stories.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
-import { useState } from "react";
 import { Text } from "../text";
 import { Link } from "../link";
 import { Box } from ".";
@@ -8,20 +7,6 @@ import { Box } from ".";
 const meta: Meta<typeof Box> = {
   title: "Box",
   component: Box,
-  args: {
-    closeable: false,
-    children: (
-      <>
-        <Text variant="h3-title" as="h2">
-          Box content
-        </Text>
-        <Text _unstableSpacing>
-          This is some body copy in a box, but you can basically add anything you want in here.
-        </Text>
-        <Link href="#a-link-for-whatever-reason">A link for whatever reason</Link>
-      </>
-    ),
-  },
   argTypes: {
     variant: {
       options: ["light-grey", "lighter", "white", "warning"],
@@ -35,78 +20,23 @@ const meta: Meta<typeof Box> = {
 export default meta;
 
 type Story = StoryObj<typeof Box>;
-export const LightGreyBox: Story = {
-  args: {
-    variant: "light-grey",
-  },
-};
-
-export const LighterBox: Story = {
-  args: {
-    closeable: true,
-    variant: "lighter",
-  },
-};
-
-export const WhiteBox: Story = {
-  args: {
-    closeable: true,
-    variant: "white",
-  },
-};
-
-export const WarningBox: Story = {
-  args: {
-    closeable: true,
-    variant: "warning",
-  },
-};
 
-export const AreYouSureDialog: Story = {
+export const Preview: Story = {
+  tags: ["!dev"],
   args: {
-    closeable: true,
-    variant: "warning",
-    // eslint-disable-next-line no-alert -- Storybook story
-    onClose: () => window.confirm("Are you sure you want to close?"),
-  },
-};
-
-export const Custom: Story = {
-  render: function CustomBox() {
-    const [closeTimer, setCloseTimer] = useState<number | null>(null);
-    function countDownFrom(seconds: number) {
-      if (seconds > 0) {
-        setCloseTimer(seconds);
-        window.setTimeout(() => {
-          countDownFrom(seconds - 1);
-        }, 1000);
-      } else {
-        setCloseTimer(0);
-      }
-    }
-
-    // Choosing to not render the box at all instead of hiding it with CSS
-    if (closeTimer === 0) {
-      // eslint-disable-next-line react/jsx-no-useless-fragment -- Typescript did not like it when I returned null in a story
-      return <></>;
-    }
-
-    return (
-      <Box variant="lighter">
-        {/* Choosing to render the close button manually */}
-        <Box.CloseButton
-          onClick={() => {
-            closeTimer === null && countDownFrom(5);
-          }}
-        />
-        <Text variant="h3-title" as="h2">
-          A customomized box
-          {closeTimer !== null && ` - closing in ${closeTimer} seconds`}
+    closeable: false,
+    children: (
+      <>
+        <Text variant="h3-title" as="h3">
+          Box content
         </Text>
-        <Text _unstableSpacing>
-          With a custom close button, and a custom content. The content can be anything you like.
+        <Text className="hds-mt-16-20">
+          This is some body copy in a box, but you can basically add anything you want in here.
         </Text>
-      </Box>
-    );
+        <Text className="hds-mt-16-20">
+          <Link href="#a-link-for-whatever-reason">A link for whatever reason</Link>
+        </Text>{" "}
+      </>
+    ),
   },
 };

package/src/breadcrumbs/breadcrumbs.stories.tsx

@@ -6,6 +6,14 @@ import { Breadcrumbs } from ".";
 const meta: Meta<typeof Breadcrumbs> = {
   title: "Breadcrumbs",
   component: Breadcrumbs,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Breadcrumbs>;
+
+export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     children: (
       <>
@@ -26,25 +34,3 @@ const meta: Meta<typeof Breadcrumbs> = {
     ),
   },
 };
-
-export default meta;
-
-type Story = StoryObj<typeof Breadcrumbs>;
-
-export const Default: Story = {};
-
-/**
- * You should have at minimum two levels in your hierarchy to use breadcrumbs.
- */
-export const TwoElements: Story = {
-  args: {
-    children: (
-      <>
-        <li>
-          <Link href="https://www.posten.no">Track letters and parcels</Link>
-        </li>
-        <li>Shipment from SOMEONE YOU KNOW</li>
-      </>
-    ),
-  },
-};

package/src/button/button.stories.tsx

@@ -1,7 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
-import { HStack } from "../layout";
-import type { ButtonProps } from ".";
 import { Button } from ".";
 
 const meta: Meta<typeof Button> = {
@@ -16,91 +14,10 @@ export default meta;
 
 type Story = StoryObj<typeof Button>;
 
-export const Primary: Story = {
+export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     variant: "primary",
     children: "Primary button",
   },
 };
-
-export const PrimaryOutline: Story = {
-  args: {
-    variant: "primary-outline",
-    children: "Primary outline button",
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    variant: "secondary",
-    children: "Secondary button",
-  },
-};
-
-export const SecondaryOutline: Story = {
-  args: {
-    variant: "secondary-outline",
-    children: "Secondary outline button",
-  },
-};
-
-export const AsALink: Story = {
-  name: "As a link",
-  render: (args) => (
-    <HStack gap="16" wrap>
-      <Button {...args} variant="primary" />
-      <Button {...args} variant="primary-outline" />
-      <Button {...args} variant="secondary" />
-      <Button {...args} variant="secondary-outline" />
-    </HStack>
-  ),
-  args: {
-    children: (
-      <a href="https://www.posten.no" target="_blank" rel="noopener">
-        Link button
-      </a>
-    ),
-    asChild: true,
-  },
-};
-
-const createIconStory = (
-  Component: typeof Button,
-  extraArgs: Partial<ButtonProps> = {},
-): Story => ({
-  render: (args) => (
-    <HStack gap="16" wrap align="end">
-      <Component {...args} size="small" />
-      <Component {...args} size="medium" />
-      <Component {...args} size="large" />
-    </HStack>
-  ),
-  args: {
-    lang: "en",
-    "aria-label": "Choose language",
-    icon: true,
-    children: (
-      <svg
-        aria-hidden
-        fill="none"
-        height="24"
-        viewBox="0 0 24 24"
-        width="24"
-        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>
-    ),
-    ...extraArgs,
-  },
-});
-
-export const IconPrimary: Story = createIconStory(Button, { variant: "secondary" });
-export const IconPrimaryOutline: Story = createIconStory(Button, { variant: "primary-outline" });
-export const IconSecondary: Story = createIconStory(Button, { variant: "secondary" });
-export const IconSecondaryOutline: Story = createIconStory(Button, {
-  variant: "secondary-outline",
-});

package/src/card/card.stories.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
-import type { ReactNode } from "react";
 import { Card } from ".";
 
 const meta: Meta<typeof Card> = {
@@ -12,8 +11,8 @@ export default meta;
 
 type Story = StoryObj<typeof Card>;
 
-export const CardStory: Story = {
-  name: "Card",
+export const Preview: Story = {
+  tags: ["!dev"],
   render: (props) => (
     <Card {...props} as="div" style={{ maxWidth: "500px", ...props.style }}>
       <Card.Media style={{ width: "100%" }}>
@@ -41,42 +40,3 @@ export const CardStory: Story = {
     </Card>
   ),
 };
-
-function Link({
-  to,
-  className,
-  children,
-}: {
-  to: string;
-  className?: string;
-  children: ReactNode;
-}) {
-  return (
-    <a className={className} href={to}>
-      {children}
-    </a>
-  );
-}
-
-export const CardFullWidth: Story = {
-  render: (props) => (
-    <Card {...props} as="div">
-      <Card.Media>
-        <Card.MediaImg alt="posten-bring" src="./posten-bring.jpg" />
-      </Card.Media>
-      <Card.Body>
-        <Card.BodyHeader as="h2">
-          <Card.BodyHeaderOverline>Theme</Card.BodyHeaderOverline>
-          <Card.BodyHeaderTitle asChild>
-            <Link to="#article">Cool article</Link>
-          </Card.BodyHeaderTitle>
-        </Card.BodyHeader>
-        <Card.BodyDescription>
-          The card will take up all available space by default. It is the consumer&apos;s choice and
-          responsibility to limit the width if wanted.
-        </Card.BodyDescription>
-        <Card.BodyActionArrow />
-      </Card.Body>
-    </Card>
-  ),
-};

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

@@ -7,86 +7,21 @@ type Story = StoryObj<typeof DescriptionList>;
 const meta: Meta<typeof DescriptionList> = {
   title: "Description List",
   component: DescriptionList,
-  args: {
-    children: (
-      <>
-        <dt>Vekt</dt>
-        <dd>12 kg</dd>
-        <dt>Antall kolli</dt>
-        <dd>2</dd>
-        <dt>Sendingsnummer</dt>
-        <dd>7000001</dd>
-        <dt>Avsender</dt>
-        <dd>Fjellsport</dd>
-      </>
-    ),
-  },
 };
 
 export default meta;
 
-export const Vertical: Story = { args: { variant: "vertical" } };
-export const Horizontal: Story = { args: { variant: "horizontal" } };
-
-export const WrappedInDivs: Story = {
+export const Preview: Story = {
+  tags: ["!dev"],
   args: {
-    children: (
-      <>
-        <div>
-          <dt>Vekt</dt>
-          <dd>12 kg</dd>
-        </div>
-        <div>
-          <dt>Antall kolli</dt>
-          <dd>2</dd>
-        </div>
-        <div>
-          <dt>Sendingsnummer</dt>
-          <dd>7000001</dd>
-        </div>
-        <div>
-          <dt>Avsender</dt>
-          <dd>Fjellsport</dd>
-        </div>
-      </>
-    ),
-  },
-};
-
-export const Paragraph: Story = {
-  name: "<p> tag as child",
-  args: {
-    variant: "horizontal",
-    children: (
-      <>
-        <dt>Vekt</dt>
-        <dd>12 kg</dd>
-        <dt>
-          <p>Title</p>
-        </dt>
-        <dd>
-          <p>Paragraph</p>
-        </dd>
-      </>
-    ),
-  },
-};
-
-export const HorizontalLongContent: Story = {
-  args: {
-    variant: "horizontal",
     children: (
       <>
         <dt>Vekt</dt>
         <dd>12 kg</dd>
-        <dt>
-          <p>Title</p>
-        </dt>
-        <dd>
-          <p>
-            ParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraph
-          </p>
-        </dd>
+        <dt>Antall kolli</dt>
+        <dd>2</dd>
+        <dt>Sendingsnummer</dt>
+        <dd>7000001</dd>
         <dt>Avsender</dt>
         <dd>Fjellsport</dd>
       </>

package/src/figure/figure.stories.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Figure } from ".";
+
+const meta: Meta<typeof Figure> = {
+  title: "Figure",
+  component: Figure,
+};
+
+export default meta;
+
+export const Preview: StoryObj<typeof Figure> = {
+  tags: ["!dev"],
+  args: {
+    children: (
+      <>
+        <img src="https://placedog.net/500/280" alt="A very good dog" />
+        <figcaption>Dogs are the best</figcaption>
+      </>
+    ),
+  },
+};

package/src/figure/figure.tsx

@@ -0,0 +1,36 @@
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+
+export interface FigureProps extends React.HTMLAttributes<HTMLQuoteElement> {
+  children?: React.ReactNode;
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * @example
+ *
+ * ```tsx
+ * <Figure>
+ *   <img src="https://placedog.net/500/280" alt="A very good dog" />
+ *   <figcaption>Dogs are the best</figcaption>
+ * </Figure>
+ * ```
+ */
+export const Figure = forwardRef<HTMLQuoteElement, FigureProps>(
+  ({ children, asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "figure";
+    return (
+      <Component ref={ref} className={clsx("hds-figure", className as undefined)} {...rest}>
+        {children}
+      </Component>
+    );
+  },
+);
+Figure.displayName = "Figure";

package/src/figure/index.tsx

@@ -0,0 +1,3 @@
+export { Figure } from "./figure";
+
+export type * from "./figure";

package/src/form/checkbox/checkbox.stories.tsx

@@ -1,20 +1,21 @@
 /* eslint-disable import/no-extraneous-dependencies -- storybook story */
 import type { Meta, StoryObj } from "@storybook/react";
-import { Fieldset } from "../fieldset";
-import { VStack } from "../../layout";
 import { Checkbox } from "./index";
 
 const meta: Meta<typeof Checkbox> = {
   title: "Form/Checkbox",
   component: Checkbox,
+  argTypes: {
+    variant: { control: "inline-radio", options: ["plain", "bounding-box"] },
+  },
 };
 
 export default meta;
 
 type Story = StoryObj<typeof Checkbox>;
 
-export const JustACheckbox: Story = {
-  name: "Just a checkbox",
+export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     title: "",
     children: "Just a checkbox",
@@ -25,80 +26,4 @@ export const JustACheckbox: Story = {
       /**/
     },
   },
-  argTypes: {
-    variant: { control: "inline-radio", options: ["plain", "bounding-box"] },
-  },
-};
-
-export const PlainCheckboxes: Story = {
-  name: "Checkboxes",
-  render: (_props) => (
-    <Fieldset legend="Checkboxes should be grouped in a Fieldset">
-      <Checkbox>This is a checkbox</Checkbox>
-      <Checkbox>This is another checkbox</Checkbox>
-    </Fieldset>
-  ),
-};
-
-export const PlainCheckboxesWithError: Story = {
-  name: "Checkboxes with error",
-  render: (_props) => (
-    <Fieldset
-      legend="Fieldset will aid you with styling and aria when it is provided an error message"
-      errorMessage="Something is wrong"
-    >
-      <Checkbox>This is a checkbox</Checkbox>
-      <Checkbox>This is another checkbox</Checkbox>
-    </Fieldset>
-  ),
-};
-
-export const PlainCheckboxeWithError: Story = {
-  name: "Standalone checkbox with error message",
-  args: {
-    errorMessage: "Something is wrong",
-    children: "This is a checkbox with an error message",
-  },
-};
-
-export const BoundedCheckbox: Story = {
-  name: "Checkbox with bounding box",
-  render: (_props) => (
-    <VStack gap="8">
-      <Checkbox variant="bounding-box">This is a checkbox with bounding box</Checkbox>
-      <Checkbox errorMessage="Something is wrong" variant="bounding-box">
-        This is a checkbox with bounding box and error
-      </Checkbox>
-    </VStack>
-  ),
-};
-
-export const DetailedContentCheckbox: Story = {
-  name: "Checkbox with title",
-  render: (_props) => (
-    <VStack gap="8">
-      <Checkbox title="Check this box">Detailed description if needed</Checkbox>
-      <Checkbox errorMessage="Something is wrong" title="Checkbox with error">
-        Detailed description if needed
-      </Checkbox>
-    </VStack>
-  ),
-};
-
-export const DetailedContentCheckboxWithBoundingBox: Story = {
-  name: "Checkbox with bounding box and title",
-  render: (_props) => (
-    <VStack gap="8">
-      <Checkbox title="Check this box" variant="bounding-box">
-        Detailed description if needed
-      </Checkbox>
-      <Checkbox
-        errorMessage="Something is wrong"
-        title="Checkbox with error"
-        variant="bounding-box"
-      >
-        Detailed description if needed
-      </Checkbox>
-    </VStack>
-  ),
 };

package/src/form/date-picker/date-picker.stories.tsx

@@ -3,25 +3,26 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { DatePicker } from ".";
 
 const meta: Meta<typeof DatePicker> = {
-  title: "Form/DatePicker",
+  title: "Form/Date Picker",
   component: DatePicker,
+  argTypes: {
+    variant: { control: "inline-radio", options: ["default", "white"] },
+  },
 };
 
 export default meta;
 
 type Story = StoryObj<typeof DatePicker>;
 
-export const PlainDatePicker: Story = {
+export const Preview: Story = {
+  tags: ["!dev"],
   args: {
-    label: "Some kind of date picker",
+    label: "Choose a date",
     errorMessage: "",
     readOnly: false,
     variant: "default",
     min: "2024-04-05",
     max: "2026-04-04",
-    calendarButtonTitle: "Åpne kalender",
-  },
-  argTypes: {
-    variant: { control: "inline-radio", options: ["default", "white"] },
+    calendarButtonTitle: "Open calendar",
   },
 };

package/src/form/error-message/error-message.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { ErrorMessage } from ".";
 
 const meta: Meta<typeof ErrorMessage> = {
-  title: "Form/ErrorMessage",
+  title: "Form/Error Message",
   component: ErrorMessage,
 };
 
@@ -11,7 +11,8 @@ export default meta;
 
 type Story = StoryObj<typeof ErrorMessage>;
 
-export const Default: Story = {
+export const Preview: Story = {
+  tags: ["!dev"],
   args: {
     id: "id",
     children: "This is an error message for use with form input components",