@postenbring/hedwig-react 0.0.80 → 0.0.82

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

package/src/footer/footer.tsx

@@ -0,0 +1,169 @@
+import { forwardRef, type HTMLAttributes, type ReactElement } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { Slot } from "@radix-ui/react-slot";
+import { Accordion } from "../accordion";
+import { LinkList } from "../list/link-list";
+import { PrimaryButton } from "../button";
+
+interface FooterLogoProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * A fixed Posten or Bring logo.
+ *
+ * The logo follows the brand theme, so if the class `hds-theme-bring` is set the Bring logo will be shown instead of the Posten logo
+ */
+export const FooterLogo = forwardRef<HTMLDivElement, FooterLogoProps>(
+  ({ children, className, asChild, ...rest }, ref) => {
+    const Component = asChild ? Slot : "div";
+    return (
+      <Component className={clsx(`hds-footer__logo`, className as undefined)} ref={ref} {...rest}>
+        {children}
+      </Component>
+    );
+  },
+);
+FooterLogo.displayName = "Footer.Logo";
+
+export interface FooterButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * 🚨 WORK IN PROGRESS 🚨
+ */
+export const FooterButtonLink = forwardRef<HTMLAnchorElement, FooterButtonLinkProps>(
+  ({ children, className, asChild, ...rest }, ref) => {
+    const Component = asChild ? Slot : "a";
+    return (
+      <PrimaryButton asChild fill="outline" className={clsx(className as undefined)}>
+        <Component ref={ref} {...rest}>
+          {children}
+        </Component>
+      </PrimaryButton>
+    );
+  },
+);
+FooterButtonLink.displayName = "FooterButton";
+
+interface FooterLinkSectionsProps extends HTMLAttributes<HTMLDivElement> {
+  children: ReactElement<FooterLinkSectionProps> | ReactElement<FooterLinkSectionProps>[];
+}
+
+/**
+ * Responsive sections of links. Will become an accordion on mobile.
+ *
+ * Use with {@link FooterLinkSection} for each section.
+ */
+export const FooterLinkSections = forwardRef<HTMLDivElement, FooterLinkSectionsProps>(
+  ({ children, className, ...rest }, ref) => {
+    return (
+      <>
+        {/* Mobile and Desktop. The accordion styling gets removed on desktop */}
+        <Accordion
+          className={clsx("hds-footer__link-sections", className as undefined)}
+          ref={ref}
+          {...rest}
+        >
+          {/* @ts-expect-error -- It's ok */}
+          {children}
+        </Accordion>
+      </>
+    );
+  },
+);
+FooterLinkSections.displayName = "Footer.LinkSections";
+
+interface FooterLinkSectionProps extends HTMLAttributes<HTMLDivElement> {
+  heading: React.ReactNode;
+  children: React.ReactNode;
+}
+
+export const FooterLinkSection = forwardRef<HTMLDivElement, FooterLinkSectionProps>(
+  ({ heading, children, className, ...rest }, ref) => {
+    // @ts-expect-error -- It's ok
+    const linkListChildren = <LinkList>{children}</LinkList>;
+    return (
+      <>
+        {/* Mobile */}
+        <Accordion.Item
+          className={clsx(`hds-footer__link-section`, className as undefined)}
+          ref={ref}
+          {...rest}
+        >
+          <Accordion.Header>{heading}</Accordion.Header>
+          <Accordion.Content>{linkListChildren}</Accordion.Content>
+        </Accordion.Item>
+
+        {/* Desktop */}
+        <div className={clsx(`hds-footer__link-section`, className as undefined)}>
+          <h2>{heading}</h2>
+          {linkListChildren}
+        </div>
+      </>
+    );
+  },
+);
+FooterLinkSection.displayName = "Footer.LinkSection";
+
+export interface FooterProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Footer variant
+   *
+   * @default "default"
+   */
+  variant?: "default" | "slim";
+
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * @default false
+   */
+  asChild?: boolean;
+}
+
+/**
+ * 🚨 WORK IN PROGRESS 🚨
+ */
+export const Footer = forwardRef<HTMLDivElement, FooterProps>(
+  ({ children, className, variant, asChild, ...rest }, ref) => {
+    const Component = asChild ? Slot : "footer";
+    return (
+      <Component
+        className={clsx(
+          `hds-footer`,
+          variant === "slim" && "hds-footer--slim",
+          className as undefined,
+        )}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  },
+) as FooterType;
+Footer.displayName = "Footer";
+
+type FooterType = ReturnType<typeof forwardRef<HTMLDivElement, FooterProps>> & {
+  Logo: typeof FooterLogo;
+  ButtonLink: typeof FooterButtonLink;
+  LinkSections: typeof FooterLinkSections;
+  LinkSection: typeof FooterLinkSection;
+};
+
+Footer.Logo = FooterLogo;
+Footer.ButtonLink = FooterButtonLink;
+Footer.LinkSections = FooterLinkSections;
+Footer.LinkSection = FooterLinkSection;

package/src/footer/index.tsx

@@ -0,0 +1,9 @@
+export {
+  Footer,
+  FooterLogo,
+  FooterButtonLink,
+  FooterLinkSections,
+  FooterLinkSection,
+} from "./footer";
+
+export type * from "./footer";

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

@@ -0,0 +1,104 @@
+/* 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,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Checkbox>;
+
+export const JustACheckbox: Story = {
+  name: "Just a checkbox",
+  args: {
+    title: "",
+    children: "Just a checkbox",
+    checked: true,
+    errorMessage: "",
+    variant: "plain",
+    onChange: () => {
+      /**/
+    },
+  },
+  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>
+  ),
+};