@postenbring/hedwig-react 0.0.81 → 0.0.83

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

package/src/form/checkbox/checkbox.tsx

@@ -0,0 +1,82 @@
+import { forwardRef, useId, type InputHTMLAttributes, type ReactNode } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { ErrorMessage } from "../error-message";
+import { useFieldsetContext } from "../fieldset";
+
+export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue"> & {
+  children: ReactNode;
+  variant?: "plain" | "bounding-box";
+  title?: string;
+} & (
+    | {
+        /**
+         * Set to `true` to add error styling. The component will take care of aria to indicate invalid state.
+         *
+         * Normally you don't need this, as you should wrap your Checkboxes in the Fieldset component.
+         * When providing an errorMessage to Fieldset, all contained Checkboxes will get correct hasError state.
+         *
+         * You can use this when your checkbox is part of a non-HDS fieldset which shows an error message.
+         */
+        hasError?: boolean;
+        errorMessage?: never;
+      }
+    | {
+        hasError?: never;
+        /**
+         * Set an error message to add error styling, and display the error message.
+         * The component will take care of aria to connect the error message to the checkbox.
+         *
+         * Use this when your checkbox is standalone (not part of a fieldset).
+         */
+        errorMessage?: ReactNode;
+      }
+  );
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  (
+    {
+      variant = "plain",
+      hasError: hasErrorProp,
+      errorMessage,
+      title,
+      children,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const errorMessageId = useId();
+    const { hasError: hasFieldsetError } = useFieldsetContext();
+    const hasError = !!errorMessage || hasFieldsetError || hasErrorProp;
+
+    return (
+      <div className={clsx("hds-checkbox-wrapper")}>
+        <div
+          className={clsx(
+            "hds-checkbox",
+            {
+              [`hds-checkbox--${variant}`]: variant === "bounding-box",
+              "hds-checkbox--error": hasError,
+            },
+            className as undefined,
+          )}
+        >
+          <label>
+            <input
+              {...rest}
+              aria-invalid={hasError ? true : undefined}
+              aria-describedby={errorMessage ? errorMessageId : undefined}
+              ref={ref}
+              type="checkbox"
+            />
+            <span aria-hidden className="hds-checkbox__checkmark" />
+            {title ? <p className="hds-checkbox__title">{title}</p> : children}
+          </label>
+          {title ? children : null}
+        </div>
+        {errorMessage ? <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage> : null}
+      </div>
+    );
+  },
+);
+Checkbox.displayName = "Checkbox";

package/src/form/checkbox/index.tsx

@@ -0,0 +1,2 @@
+export { Checkbox } from "./checkbox";
+export type * from "./checkbox";

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

@@ -0,0 +1,27 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { DatePicker } from ".";
+
+const meta: Meta<typeof DatePicker> = {
+  title: "Form/DatePicker",
+  component: DatePicker,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof DatePicker>;
+
+export const PlainDatePicker: Story = {
+  args: {
+    label: "Some kind of date picker",
+    errorMessage: "",
+    readOnly: false,
+    variant: "default",
+    min: "2024-04-05",
+    max: "2026-04-04",
+    calendarButtonTitle: "Åpne kalender",
+  },
+  argTypes: {
+    variant: { control: "inline-radio", options: ["default", "white"] },
+  },
+};

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

@@ -0,0 +1,85 @@
+import { forwardRef, useRef, type InputHTMLAttributes } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { InputGroup, type InputGroupProps } from "../input-group";
+import { useMergeRefs } from "../../utils/utils";
+
+export type DatePickerProps = Omit<
+  InputGroupProps & InputHTMLAttributes<HTMLInputElement>,
+  "children" | "type"
+> & {
+  /**
+   * Accessible title for the calendar button
+   *
+   * This button currently only shows in Chrome.
+   *
+   * @defaultValue "Åpne kalender"
+   */
+  calendarButtonTitle?: string;
+};
+
+/**
+ * A basic implementation of a date picker
+ *
+ * This date picker is an implementation of native date picker, as you get
+ * with `<input type="date" />`, where the input field is dressed in Hedwig styling.
+ *
+ * Due to accessibility concerns you will only see the appropriate Hedwig calendar
+ * icon in Chrome. Firefox will show built in icon and Safari will show no icon.
+ * Not tested in Edge.
+ */
+export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(function DatePicker(
+  {
+    className,
+    variant,
+    errorMessage,
+    labelProps,
+    label,
+    id,
+    style,
+    disabled,
+    readOnly,
+    calendarButtonTitle = "Åpne kalender",
+    ...rest
+  },
+  ref,
+) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const mergedRef = useMergeRefs([inputRef, ref]);
+
+  return (
+    <InputGroup
+      className={clsx("hds-date-picker", className as undefined)}
+      disabled={disabled}
+      errorMessage={errorMessage}
+      id={id}
+      label={label}
+      labelProps={labelProps}
+      readOnly={readOnly}
+      style={style}
+      variant={variant}
+    >
+      {(inputProps) => (
+        <>
+          <input
+            {...rest}
+            {...inputProps}
+            disabled={disabled}
+            readOnly={readOnly}
+            ref={mergedRef}
+            type="date"
+          />
+          <button
+            className={clsx("hds-date-picker__calendar-button")}
+            type="button"
+            title={calendarButtonTitle}
+            onClick={() => {
+              inputRef.current?.showPicker();
+            }}
+          />
+        </>
+      )}
+    </InputGroup>
+  );
+});
+
+DatePicker.displayName = "DatePicker";

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

@@ -0,0 +1,2 @@
+export { DatePicker } from "./date-picker";
+export type * from "./date-picker";

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

@@ -0,0 +1,19 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { ErrorMessage } from ".";
+
+const meta: Meta<typeof ErrorMessage> = {
+  title: "Form/ErrorMessage",
+  component: ErrorMessage,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof ErrorMessage>;
+
+export const Default: Story = {
+  args: {
+    id: "id",
+    children: "This is an error message for use with form input components",
+  },
+};

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

@@ -0,0 +1,25 @@
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { forwardRef, type ReactNode } from "react";
+
+export interface ErrorMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+  id: string;
+  className?: string;
+}
+
+export const ErrorMessage = forwardRef<HTMLDivElement, ErrorMessageProps>(
+  ({ children, id, className, ...rest }, ref) => {
+    return (
+      <div
+        aria-live="assertive"
+        className={clsx("hds-error-message", className as undefined)}
+        id={id}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+ErrorMessage.displayName = "ErrorMessage";

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

@@ -0,0 +1,2 @@
+export { ErrorMessage } from "./error-message";
+export type * from "./error-message";

package/src/form/fieldset/fieldset.stories.tsx

@@ -0,0 +1,86 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Checkbox } from "../checkbox";
+import { Radiobutton } from "../radiobutton";
+import { Fieldset } from ".";
+
+const meta: Meta<typeof Fieldset> = {
+  title: "Form/Fieldset",
+  component: Fieldset,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Fieldset>;
+
+export const Default: Story = {
+  args: {
+    legend: "Default fieldset",
+    errorMessage: "",
+  },
+  render: (props) => (
+    <Fieldset {...props}>
+      <Checkbox defaultChecked value="Hello">
+        Hello
+      </Checkbox>
+      <Checkbox value="Hello">Hello</Checkbox>
+      <Checkbox value="Hello">Hello</Checkbox>
+    </Fieldset>
+  ),
+};
+
+export const LargeLegend: Story = {
+  args: {
+    legend: "Fieldset with large legend",
+    legendProps: { size: "large" },
+  },
+  render: (props) => (
+    <Fieldset {...props}>
+      <Checkbox defaultChecked value="Hello">
+        Hello
+      </Checkbox>
+      <Checkbox value="Hello">Hello</Checkbox>
+      <Checkbox value="Hello">Hello</Checkbox>
+    </Fieldset>
+  ),
+};
+
+export const FieldsetErrorCheckboxes: Story = {
+  args: {
+    legend: "Checkboxes wrapped in Fieldset will get error styling when Fieldset has errorMessage",
+    errorMessage: "Something's wrong",
+  },
+  render: (props) => (
+    <Fieldset {...props}>
+      <Checkbox value="Hello">Hello</Checkbox>
+      <Checkbox value="Hello">Hello</Checkbox>
+      <Checkbox value="Hello">Hello</Checkbox>
+    </Fieldset>
+  ),
+};
+
+export const FieldsetErrorRadiobuttons: Story = {
+  args: {
+    legend: (
+      <>
+        Radiobuttons wrapped in Fieldset will get error styling when Fieldset has errorMessage
+        <br />
+        However, you should probably use RadioGroup instead of Fieldset for Radiobuttons
+      </>
+    ),
+    errorMessage: "Something's wrong",
+  },
+  render: (props) => (
+    <Fieldset {...props}>
+      <Radiobutton value="Hello" name="radiogroup">
+        Hello
+      </Radiobutton>
+      <Radiobutton value="Hello" name="radiogroup">
+        Hello
+      </Radiobutton>
+      <Radiobutton value="Hello" name="radiogroup">
+        Hello
+      </Radiobutton>
+    </Fieldset>
+  ),
+};

package/src/form/fieldset/fieldset.tsx

@@ -0,0 +1,64 @@
+import { useId, forwardRef, createContext, useContext } from "react";
+import type { FieldsetHTMLAttributes, HTMLAttributes, ReactNode, CSSProperties } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { ErrorMessage } from "../error-message";
+
+export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+  className?: string;
+  style?: CSSProperties;
+  /**
+   * Providing an errorMessage will also give contained Checkboxes or Radiobuttons
+   * error styling and aria to indicate invalid state.
+   *
+   * For Radiobuttons you are even better off using RadioGroup.
+   */
+  errorMessage?: ReactNode;
+  legendProps?: HTMLAttributes<HTMLElement> & { size: "default" | "large" };
+  legend: ReactNode;
+  children: ReactNode;
+}
+
+const FieldsetContext = createContext<{ hasError: boolean }>({ hasError: false });
+
+export const useFieldsetContext = () => useContext(FieldsetContext);
+
+export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(function Fieldset(
+  {
+    className,
+    style,
+    errorMessage,
+    legendProps: { size: legendSize = "default", className: legendClassName, ...legendProps } = {},
+    legend,
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const errorMessageId = useId();
+
+  return (
+    <fieldset
+      aria-describedby={errorMessage ? errorMessageId : undefined}
+      aria-invalid={errorMessage ? true : undefined}
+      className={clsx("hds-fieldset", className as undefined)}
+      ref={ref}
+      style={style}
+      {...rest}
+    >
+      <legend
+        className={clsx(
+          "hds-fieldset__legend",
+          { [`hds-fieldset__legend--${legendSize}`]: legendSize },
+          legendClassName as undefined,
+        )}
+        {...legendProps}
+      >
+        {legend}
+      </legend>
+      <FieldsetContext.Provider value={{ hasError: Boolean(errorMessage) }}>
+        {children}
+      </FieldsetContext.Provider>
+      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>
+    </fieldset>
+  );
+});

package/src/form/fieldset/index.tsx

@@ -0,0 +1,2 @@
+export { Fieldset, useFieldsetContext } from "./fieldset";
+export type * from "./fieldset";