@postenbring/hedwig-react 0.0.80 → 0.0.82

package/src/badge/badge.tsx

@@ -0,0 +1,63 @@
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { forwardRef } from "react";
+
+export interface BadgeProps extends React.AnchorHTMLAttributes<HTMLSpanElement> {
+  children: React.ReactNode;
+
+  /**
+   * Font size of the badge
+   *
+   * @default "small"
+   */
+  size?: "small" | "smaller";
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+const Badge = forwardRef<
+  HTMLSpanElement,
+  BadgeProps & { variant: "lighter" | "dark" | "white" | "warning" }
+>(({ children, asChild, variant, size = "small", className, ...rest }, ref) => {
+  const Component = asChild ? Slot : "span";
+  return (
+    <Component
+      ref={ref}
+      className={clsx(
+        "hds-badge",
+        `hds-badge--${size}`,
+        `hds-badge--${variant}`,
+        className as undefined,
+      )}
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
+});
+Badge.displayName = "Badge";
+
+export const LighterBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
+  return <Badge {...props} ref={ref} variant="lighter" />;
+});
+LighterBadge.displayName = "LighterBadge";
+
+export const DarkBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
+  return <Badge {...props} ref={ref} variant="dark" />;
+});
+DarkBadge.displayName = "DarkBadge";
+
+export const WhiteBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
+  return <Badge {...props} ref={ref} variant="white" />;
+});
+WhiteBadge.displayName = "WhiteBadge";
+
+export const WarningBadge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {
+  return <Badge {...props} ref={ref} variant="warning" />;
+});
+WarningBadge.displayName = "WarningBadge";

package/src/badge/index.tsx

@@ -0,0 +1,3 @@
+export { LighterBadge as Badge, DarkBadge, WarningBadge, WhiteBadge } from "./badge";
+
+export type * from "./badge";

package/src/box/box.stories.tsx

@@ -0,0 +1,112 @@
+/* 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 ".";
+
+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"],
+      control: {
+        type: "radio",
+      },
+    },
+  },
+};
+
+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 = {
+  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`}
+        </Text>
+        <Text _unstableSpacing>
+          With a custom close button, and a custom content. The content can be anything you like.
+        </Text>
+      </Box>
+    );
+  },
+};

package/src/box/box.tsx

@@ -0,0 +1,122 @@
+import { forwardRef, useCallback, useState } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot, Slottable } from "@radix-ui/react-slot";
+
+export type BoxCloseButtonProps = Omit<React.HTMLAttributes<HTMLButtonElement>, "children">;
+export const BoxCloseButton = forwardRef<HTMLButtonElement, BoxCloseButtonProps>(
+  ({ className, ...rest }, ref) => {
+    return (
+      <button
+        className={clsx("hds-box__close-button", className as undefined)}
+        ref={ref}
+        type="button"
+        {...rest}
+      />
+    );
+  },
+);
+BoxCloseButton.displayName = "Box.CloseButton";
+
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+
+  /**
+   * Color variant of the box
+   *
+   * @default "light-grey"
+   */
+  variant?: "light-grey" | "lighter" | "white" | "warning";
+
+  /**
+   * If `true`, a close button will be shown.
+   * Use when you want to control the close button using the BoxCloseButton component.
+   *
+   * @default false
+   */
+  closeable?: boolean;
+
+  /**
+   * Callback fired when the component requests to be closed.
+   * If not set, the component will be closed without any user interaction.
+   *
+   * If set, and the handler returns non-true value, the component will not be closed.
+   * Use this if you want to control the closing of the component, using the `closed` prop
+   *
+   * If set, and the handler returns the true, the component will be closed.
+   * Use this with `window.confirm()` to ask the user to confirm closing the component.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents -- It's fine, I want to have the boolean in the type
+  onClose?: () => boolean | unknown;
+
+  /**
+   * If `true`, the box will be closed and hidden from view
+   */
+  closed?: boolean;
+
+  /**
+   * Props applied to the close button element.
+   */
+  closeButtonProps?: BoxCloseButtonProps;
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export const Box = forwardRef<HTMLDivElement, BoxProps>(
+  (
+    {
+      asChild,
+      variant,
+      closeable = false,
+      onClose: onCloseProp,
+      closed: closedProp,
+      closeButtonProps,
+      children,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [closedState, setClosedState] = useState(false);
+    const onClose = useCallback(() => {
+      if (onCloseProp) {
+        const result = onCloseProp();
+        if (result === true) {
+          setClosedState(true);
+        }
+      } else {
+        setClosedState(true);
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- I know better
+    }, []);
+    const closed = closedProp ?? closedState;
+    const Component = asChild ? Slot : "div";
+
+    return (
+      <Component
+        className={clsx(
+          "hds-box",
+          variant && `hds-box--${variant}`,
+          { "hds-box--closed": closed },
+          className as undefined,
+        )}
+        ref={ref}
+        {...rest}
+      >
+        {closeable ? <BoxCloseButton onClick={onClose} {...closeButtonProps} /> : null}
+        <Slottable>{children}</Slottable>
+      </Component>
+    );
+  },
+) as BoxType;
+Box.displayName = "Box";
+
+Box.CloseButton = BoxCloseButton;
+
+type BoxType = ReturnType<typeof forwardRef<HTMLDivElement, BoxProps>> & {
+  CloseButton: typeof BoxCloseButton;
+};

package/src/box/index.tsx

@@ -0,0 +1,3 @@
+export { Box, BoxCloseButton } from "./box";
+
+export type * from "./box";

package/src/breadcrumbs/breadcrumbs.stories.tsx

@@ -0,0 +1,50 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Link } from "../link";
+import { Breadcrumbs } from ".";
+
+const meta: Meta<typeof Breadcrumbs> = {
+  title: "Breadcrumbs",
+  component: Breadcrumbs,
+  args: {
+    children: (
+      <>
+        <li>
+          <Link href="https://www.posten.no">Home</Link>
+        </li>
+        <li>
+          <Link href="https://www.posten.no">Somewhere</Link>
+        </li>
+        <li>
+          <Link href="https://www.posten.no">Deep inside</Link>
+        </li>
+        <li>
+          <Link href="https://www.posten.no">Posten dot no</Link>
+        </li>
+        <li>You will find this page</li>
+      </>
+    ),
+  },
+};
+
+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/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,47 @@
+import { forwardRef, type HTMLAttributes, type ReactElement, type ReactNode } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+
+export interface BreadcrumbsProps extends HTMLAttributes<HTMLOListElement> {
+  children: ReactNode | ReactElement<HTMLLIElement> | ReactElement<HTMLLIElement>[];
+
+  /**
+   * Props passed to the `ol` html element
+   */
+  olProps?: HTMLAttributes<HTMLElement>;
+}
+
+/**
+ * A breadcrumbs navigation menu
+ *
+ * @example
+ *
+ * ```tsx
+ * <Breadcrumbs data-testid="breadcrumbs">
+ *   <li><Link href="../">Previous page</Link></li>
+ *   <li aria-current="page">Current page</li>
+ * </Breadcrumbs>
+ * ```
+ *
+ * Outputs this html structure
+ *
+ * ```html
+ * <nav data-testid="breadcrumbs">
+ *   <ol>
+ *     <li><a href="../">Previous page</a></li>
+ *     <li aria-current="page">Current page</li>
+ *   </ol>
+ * </nav>
+ * ```
+ */
+export const Breadcrumbs = forwardRef<HTMLDivElement, BreadcrumbsProps>(
+  ({ olProps, children, ...rest }, ref) => {
+    return (
+      <nav ref={ref} {...rest}>
+        <ol {...olProps} className={clsx("hds-breadcrumbs", olProps?.className as undefined)}>
+          {children}
+        </ol>
+      </nav>
+    );
+  },
+);
+Breadcrumbs.displayName = "Breadcrumbs";

package/src/breadcrumbs/index.tsx

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

package/src/button/button.stories.tsx

@@ -0,0 +1,104 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { HStack } from "../layout";
+import type { ButtonProps } from ".";
+import { PrimaryButton, SecondaryButton } from ".";
+
+const meta: Meta<typeof PrimaryButton> = {
+  title: "Button",
+  component: PrimaryButton,
+  argTypes: {
+    fullWidth: { control: "radio", options: [false, true, "mobile"] },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PrimaryButton>;
+
+export const Primary: Story = {
+  args: {
+    children: "Primary button",
+  },
+};
+
+export const PrimaryOutline: Story = {
+  args: {
+    children: "Primary outline button",
+    fill: "outline",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: "Secondary button",
+  },
+  render: (props) => <SecondaryButton {...props} />,
+};
+
+export const SecondaryOutline: Story = {
+  render: (props) => <SecondaryButton {...props} />,
+  args: {
+    children: "Secondary outline button",
+    fill: "outline",
+  },
+};
+
+export const AsALink: Story = {
+  name: "As a link",
+  render: (args) => (
+    <HStack gap="16" wrap>
+      <PrimaryButton {...args} />
+      <PrimaryButton {...args} fill="outline" />
+      <SecondaryButton {...args} />
+      <SecondaryButton {...args} fill="outline" />
+    </HStack>
+  ),
+  args: {
+    children: (
+      <a href="https://www.posten.no" target="_blank" rel="noopener">
+        Link button
+      </a>
+    ),
+    asChild: true,
+  },
+};
+
+const createIconStory = (
+  Component: typeof PrimaryButton,
+  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(PrimaryButton);
+export const IconPrimaryOutline: Story = createIconStory(PrimaryButton, { fill: "outline" });
+export const IconSecondary: Story = createIconStory(SecondaryButton);
+export const IconSecondaryOutline: Story = createIconStory(SecondaryButton, { fill: "outline" });

package/src/button/button.tsx

@@ -0,0 +1,87 @@
+import { forwardRef } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * The height, font size and padding of the button
+   */
+  size?: "small" | "medium" | "large";
+
+  /**
+   * The background fill of the button
+   *
+   * @default "contained"
+   */
+  fill?: "contained" | "outline";
+
+  /**
+   * Make the button use 100% width available.
+   * Using the "mobile" it only stretch to full width on smaller screens
+   */
+  fullWidth?: boolean | "mobile";
+
+  /**
+   * Use the button as an icon button
+   *
+   * Render the icon in `children`
+   */
+  icon?: boolean;
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps & { variant: "primary" | "secondary" }>(
+  (
+    {
+      asChild,
+      children,
+      variant,
+      size = "medium",
+      fullWidth = false,
+      fill = "contained",
+      icon,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const Component = asChild ? Slot : "button";
+    return (
+      <Component
+        className={clsx(
+          "hds-button",
+          `hds-button--${size}`,
+          {
+            [`hds-button--${variant}`]: fill === "contained",
+            [`hds-button--outline-${variant}`]: fill === "outline",
+            "hds-button--full": fullWidth === true,
+            "hds-button--mobile-full": fullWidth === "mobile",
+            "hds-button--icon-only": icon,
+          },
+          className as undefined,
+        )}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+Button.displayName = "Button";
+
+export const PrimaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  return <Button {...props} ref={ref} variant="primary" />;
+});
+PrimaryButton.displayName = "PrimaryButton";
+
+export const SecondaryButton = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  return <Button {...props} ref={ref} variant="secondary" />;
+});
+SecondaryButton.displayName = "SecondaryButton";

package/src/button/index.tsx

@@ -0,0 +1,3 @@
+export { PrimaryButton, SecondaryButton } from "./button";
+
+export type * from "./button";

package/src/card/card.stories.tsx

@@ -0,0 +1,82 @@
+/* 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> = {
+  title: "Card",
+  component: Card,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const CardStory: Story = {
+  name: "Card",
+  render: (props) => (
+    <Card {...props} as="div" style={{ maxWidth: "500px", ...props.style }}>
+      <Card.Media style={{ width: "100%" }}>
+        <Card.MediaImg
+          style={{ width: "100%", display: "block", aspectRatio: 16 / 9 }}
+          alt="posten-bring"
+          src="./posten-bring.jpg"
+        />
+      </Card.Media>
+      <Card.Body>
+        <Card.BodyHeader as="h2">
+          <Card.BodyHeaderOverline>Theme</Card.BodyHeaderOverline>
+          <Card.BodyHeaderTitle asChild>
+            <a href="#article">Cool article</a>
+          </Card.BodyHeaderTitle>
+        </Card.BodyHeader>
+        <Card.BodyDescription>
+          This is a card which acts as a giant link. You can also use the hedwig provided{" "}
+          <code>Link</code> component, or a link component from your routing library. The link
+          component of your choice should be set with the <code>as</code> property on the body
+          header title. The card component provides a lot of flexibility.
+        </Card.BodyDescription>
+        <Card.BodyActionArrow />
+      </Card.Body>
+    </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>
+  ),
+};