@postenbring/hedwig-react 0.0.81 → 0.0.83

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>
+  ),
+};

package/src/card/card.tsx

@@ -0,0 +1,222 @@
+import type { ReactNode } from "react";
+import { forwardRef } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+
+export const CardMedia = forwardRef<HTMLDivElement, CardBaseProps>(
+  ({ asChild, className, children, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component {...rest} className={clsx("hds-card__media", className as undefined)} ref={ref}>
+        {children}
+      </Component>
+    );
+  },
+);
+CardMedia.displayName = "Card.Media";
+
+export interface CardImageMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+export const CardMediaImg = forwardRef<HTMLImageElement, CardImageMediaProps>(
+  ({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "img";
+    return (
+      <Component
+        {...rest}
+        className={clsx("hds-card__media__img", className as undefined)}
+        ref={ref}
+      />
+    );
+  },
+);
+CardMediaImg.displayName = "Card.MediaImg";
+
+export const CardBody = forwardRef<HTMLDivElement, CardBaseProps>(
+  ({ asChild, className, children, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component {...rest} className={clsx("hds-card__body", className as undefined)} ref={ref}>
+        {children}
+      </Component>
+    );
+  },
+);
+CardBody.displayName = "Card.Body";
+
+export const CardBodyHeader = forwardRef<
+  HTMLHeadingElement,
+  CardBaseProps &
+    (
+      | {
+          /**
+           * Heading level of the card heading
+           */
+          as: "h2" | "h3" | "h4" | "h5" | "h6";
+          asChild?: never;
+        }
+      | {
+          asChild: true;
+          as?: never;
+        }
+    )
+>(({ as: Tag, asChild, className, children, ...rest }, ref) => {
+  const Component = asChild ? Slot : Tag;
+  return (
+    <Component
+      {...rest}
+      className={clsx("hds-card__body-header", className as undefined)}
+      ref={ref}
+    >
+      {children}
+    </Component>
+  );
+});
+CardBodyHeader.displayName = "Card.BodyHeader";
+
+export const CardBodyHeaderOverline = forwardRef<HTMLDivElement, CardBaseProps>(
+  ({ asChild, className, children, ...rest }, ref) => {
+    const Component = asChild ? Slot : "span";
+    return (
+      <Component
+        {...rest}
+        className={clsx("hds-card__body-header-overline", className as undefined)}
+        ref={ref}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+CardBodyHeaderOverline.displayName = "Card.BodyHeaderOverline";
+
+export const CardBodyHeaderTitle = forwardRef<HTMLDivElement, CardBaseProps>(
+  ({ asChild, className, children, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component
+        {...rest}
+        className={clsx("hds-card__body-header-title", className as undefined)}
+        ref={ref}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+CardBodyHeaderTitle.displayName = "Card.BodyHeaderTitle";
+
+export const CardBodyDescription = forwardRef<HTMLParagraphElement, CardBaseProps>(
+  ({ asChild, className, children, ...rest }, ref) => {
+    const Component = asChild ? Slot : "p";
+    return (
+      <Component
+        {...rest}
+        className={clsx("hds-card__body-description", className as undefined)}
+        ref={ref}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+CardBodyDescription.displayName = "Card.BodyDescription";
+
+export const CardBodyAction = forwardRef<HTMLDivElement, CardBaseProps>(
+  ({ asChild, className, children, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component
+        {...rest}
+        className={clsx("hds-card__body-action", className as undefined)}
+        ref={ref}
+      >
+        {children}
+      </Component>
+    );
+  },
+);
+CardBodyAction.displayName = "Card.BodyAction";
+
+interface CardBodyActionArrowProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+export const CardBodyActionArrow = forwardRef<HTMLSpanElement, CardBodyActionArrowProps>(
+  ({ asChild, className, ...rest }, ref) => {
+    const Component = asChild ? Slot : "span";
+    return (
+      <Component
+        {...rest}
+        className={clsx("hds-card__body-action-arrow", className as undefined)}
+        ref={ref}
+      />
+    );
+  },
+);
+CardBodyActionArrow.displayName = "Card.BodyActionArrow";
+
+export interface CardBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+export interface CardProps extends CardBaseProps {
+  /**
+   * A Card should in most cases appear as a big link,
+   * but the actual link should just be the header title.
+   * To make life better for those with screen readers we should not make
+   * the entire card a link, as that would cause the entire card to be read
+   * as a link to the user. That would be perceived as information overload.
+   */
+  as?: "section" | "div" | "article" | "aside";
+}
+
+export const Card = forwardRef<HTMLDivElement, CardProps>(
+  ({ as: Tag = "section", asChild, className, children, ...rest }, ref) => {
+    const Component = asChild ? Slot : Tag;
+    return (
+      <Component {...rest} className={clsx("hds-card", className as undefined)} ref={ref}>
+        {children}
+      </Component>
+    );
+  },
+) as CardType;
+Card.displayName = "Card";
+
+Card.Media = CardMedia;
+Card.MediaImg = CardMediaImg;
+Card.Body = CardBody;
+Card.BodyHeader = CardBodyHeader;
+Card.BodyHeaderOverline = CardBodyHeaderOverline;
+Card.BodyHeaderTitle = CardBodyHeaderTitle;
+Card.BodyDescription = CardBodyDescription;
+Card.BodyAction = CardBodyAction;
+Card.BodyActionArrow = CardBodyActionArrow;
+
+type CardType = ReturnType<typeof forwardRef<HTMLDivElement, CardProps>> & {
+  Media: typeof CardMedia;
+  MediaImg: typeof CardMediaImg;
+  Body: typeof CardBody;
+  BodyHeader: typeof CardBodyHeader;
+  BodyHeaderOverline: typeof CardBodyHeaderOverline;
+  BodyHeaderTitle: typeof CardBodyHeaderTitle;
+  BodyDescription: typeof CardBodyDescription;
+  BodyAction: typeof CardBodyAction;
+  BodyActionArrow: typeof CardBodyActionArrow;
+};

package/src/card/index.tsx

@@ -0,0 +1,14 @@
+export {
+  Card,
+  CardMedia,
+  CardMediaImg,
+  CardBody,
+  CardBodyHeader,
+  CardBodyHeaderOverline,
+  CardBodyHeaderTitle,
+  CardBodyDescription,
+  CardBodyAction,
+  CardBodyActionArrow,
+} from "./card";
+
+export type * from "./card";

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

@@ -0,0 +1,95 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { DescriptionList } from ".";
+
+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 = {
+  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>Avsender</dt>
+        <dd>Fjellsport</dd>
+      </>
+    ),
+  },
+};

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

@@ -0,0 +1,61 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+
+export interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+  /**
+   * Either `dt`, `dl`, or `div` elements
+   */
+  children?: ReactNode;
+  /**
+   * Direction of the description list
+   */
+  variant?: "vertical" | "horizontal";
+}
+
+/**
+ * Uses the HTML5 `<dl>` element
+ *
+ * Pass in corresponding `<dt>` and `<dd>` elements as children
+ *
+ * ```tsx
+ * <DescriptionList>
+ *   <dt>Vekt</dt>
+ *   <dd>12 kg</dd>
+ *   <dt>Antall kolli</dt>
+ *   <dd>2</dd>
+ * </DescriptionList>
+ * ```
+ *
+ * Optionally wrap them in `<div>` elements as allowed by the HTML5 spec
+ *
+ * ```tsx
+ * <DescriptionList>
+ *   <div>
+ *     <dt>Vekt</dt>
+ *     <dd>12 kg</dd>
+ *   </div>
+ *   <div>
+ *     <dt>Antall kolli</dt>
+ *     <dd>2</dd>
+ *   </div>
+ * </DescriptionList>
+ * ```
+ */
+export const DescriptionList = forwardRef<HTMLDListElement, DescriptionListProps>(
+  ({ variant = "vertical", className, ...rest }, ref) => {
+    return (
+      <dl
+        ref={ref}
+        className={clsx(
+          "hds-description-list",
+          {
+            "hds-description-list--horizontal": variant === "horizontal",
+          },
+          className as undefined,
+        )}
+        {...rest}
+      />
+    );
+  },
+);
+DescriptionList.displayName = "DescriptionList";

package/src/description-list/index.tsx

@@ -0,0 +1,2 @@
+export { DescriptionList } from "./description-list";
+export type * from "./description-list";