@postenbring/hedwig-react 0.0.81 → 0.0.83

package/src/accordion/accordion.stories.tsx

@@ -0,0 +1,154 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Link } from "../link";
+import { UnorderedList } from "../list";
+import { Accordion } from ".";
+
+const meta: Meta<typeof Accordion> = {
+  title: "Accordion",
+  component: Accordion,
+  args: {
+    children: (
+      <>
+        <Accordion.Item>
+          <Accordion.Header>Professional accordion title</Accordion.Header>
+          <Accordion.Content>
+            This is the simplest form of accordion body. Can be extensive.
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>Yet another POAT with &laquo;advanced&raquo; content</Accordion.Header>
+          <Accordion.Content>
+            <h4>Hello</h4>
+            <div>
+              <p>
+                This is some really, really exciting stuff with{" "}
+                <Link href="https://www.posten.no">a link</Link> and all sorts of things like a
+                list, even!
+              </p>
+              <UnorderedList>
+                <li>Unordered</li>
+                <li>Like</li>
+                <li>You have</li>
+                <li>Never seen</li>
+              </UnorderedList>
+            </div>
+          </Accordion.Content>
+        </Accordion.Item>
+      </>
+    ),
+  },
+};
+
+type Story = StoryObj<typeof Accordion>;
+
+export const MultipleItems: Story = {
+  name: "Multiple items",
+};
+
+export const JustOneItem: Story = {
+  name: "Just one item",
+  args: {
+    children: (
+      <Accordion.Item>
+        <Accordion.Header>Professional accordion title</Accordion.Header>
+        <Accordion.Content>
+          This is the simplest form of accordion body. Can be extensive.
+        </Accordion.Content>
+      </Accordion.Item>
+    ),
+  },
+};
+
+export const NoIndent: Story = {
+  args: {
+    indent: false,
+    children: (
+      <Accordion.Item>
+        <Accordion.Header>Professional accordion title</Accordion.Header>
+        <Accordion.Content>
+          This is the simplest form of accordion body. Can be extensive.
+        </Accordion.Content>
+      </Accordion.Item>
+    ),
+  },
+};
+
+export const DefaultOpen: Story = {
+  args: {
+    children: (
+      <>
+        <Accordion.Item defaultOpen>
+          <Accordion.Header>Professional accordion title</Accordion.Header>
+          <Accordion.Content>
+            This is the simplest form of accordion body. Can be extensive.
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item>
+          <Accordion.Header>Professional accordion title</Accordion.Header>
+          <Accordion.Content>
+            This is the simplest form of accordion body. Can be extensive.
+          </Accordion.Content>
+        </Accordion.Item>
+      </>
+    ),
+  },
+};
+
+export const SingleAccordion: Story = {
+  name: "Only one open at the same time",
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- it's ok
+    const [state, setState] = useState({ one: false, two: false, three: false });
+    function toggle(key: keyof typeof state) {
+      setState((prev) => {
+        return {
+          one: key === "one" ? !prev.one : false,
+          two: key === "two" ? !prev.two : false,
+          three: key === "three" ? !prev.three : false,
+        };
+      });
+    }
+
+    return (
+      <Accordion>
+        <Accordion.Item
+          onOpenChange={() => {
+            toggle("one");
+          }}
+          open={state.one}
+        >
+          <Accordion.Header>One</Accordion.Header>
+          <Accordion.Content>
+            Lorum ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item
+          onOpenChange={() => {
+            toggle("two");
+          }}
+          open={state.two}
+        >
+          <Accordion.Header>Two</Accordion.Header>
+          <Accordion.Content>
+            Lorum ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget
+          </Accordion.Content>
+        </Accordion.Item>
+        <Accordion.Item
+          onOpenChange={() => {
+            toggle("three");
+          }}
+          open={state.three}
+        >
+          <Accordion.Header>Three</Accordion.Header>
+          <Accordion.Content>
+            Lorum ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget
+          </Accordion.Content>
+        </Accordion.Item>
+      </Accordion>
+    );
+  },
+};
+
+export default meta;

package/src/accordion/accordion.tsx

@@ -0,0 +1,68 @@
+import type { ReactElement } from "react";
+import { forwardRef } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { AccordionItem, type AccordionItemProps } from "./accordion-item";
+import { AccordionHeader } from "./accordion-header";
+import { AccordionContent } from "./accordion-content";
+
+export interface AccordionProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Accepts type of <AccordionItem/>
+   */
+  children: ReactElement<AccordionItemProps> | ReactElement<AccordionItemProps>[];
+
+  /**
+   * Adds padding to the left of the accordion
+   */
+  indent?: boolean;
+}
+
+/**
+ * Displays collapsible content sections
+ *
+ * @example
+ * ```tsx
+ * <Accordion>
+ *   <Accordion.Item defaultOpen>
+ *     <Accordion.Header>Item one</Accordion.Header>
+ *     <Accordion.Content>
+ *       Some content
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ *   <Accordion.Item>
+ *     <Accordion.Header>Item two</Accordion.Header>
+ *     <Accordion.Content>
+ *       Some more content
+ *     </Accordion.Content>
+ *   </Accordion.Item>
+ * </Accordion>
+ * ```
+ */
+export const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
+  ({ children, className, indent = true, ...rest }, ref) => {
+    return (
+      <div
+        {...rest}
+        className={clsx(
+          "hds-accordion",
+          !indent && "hds-accordion--no-indent",
+          className as undefined,
+        )}
+        ref={ref}
+      >
+        {children}
+      </div>
+    );
+  },
+) as AccordionType;
+Accordion.displayName = "Accordion";
+
+Accordion.Item = AccordionItem;
+Accordion.Header = AccordionHeader;
+Accordion.Content = AccordionContent;
+
+type AccordionType = ReturnType<typeof forwardRef<HTMLDivElement, AccordionProps>> & {
+  Item: typeof AccordionItem;
+  Header: typeof AccordionHeader;
+  Content: typeof AccordionContent;
+};

package/src/accordion/context.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+
+export interface AccordionItemContextProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export const AccordionItemContext = createContext<AccordionItemContextProps | null>(null);

package/src/accordion/index.tsx

@@ -0,0 +1,9 @@
+export { Accordion } from "./accordion";
+export { AccordionItem } from "./accordion-item";
+export { AccordionHeader } from "./accordion-header";
+export { AccordionContent } from "./accordion-content";
+
+export type * from "./accordion";
+export type * from "./accordion-item";
+export type * from "./accordion-header";
+export type * from "./accordion-content";

package/src/badge/badge.stories.tsx

@@ -0,0 +1,44 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Box } from "../box";
+import { Badge, DarkBadge, WhiteBadge, WarningBadge } from ".";
+
+const meta: Meta<typeof Badge> = {
+  title: "Badge",
+  component: Badge,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Lighter: Story = {
+  args: {
+    children: "Default badge",
+  },
+};
+
+export const Dark: Story = {
+  args: {
+    children: "Dark badge",
+  },
+  render: (props) => <DarkBadge {...props} />,
+};
+
+export const White: Story = {
+  args: {
+    children: "White badge",
+  },
+  render: (props) => (
+    <Box>
+      <WhiteBadge {...props} />
+    </Box>
+  ),
+};
+
+export const Warning: Story = {
+  args: {
+    children: "Warning badge",
+  },
+  render: (props) => <WarningBadge {...props} />,
+};

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";