@postenbring/hedwig-react 0.0.81 → 0.0.82

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

package/src/form/index.tsx

@@ -0,0 +1,8 @@
+export * from "./checkbox";
+export * from "./date-picker";
+export * from "./error-message";
+export * from "./fieldset";
+export * from "./input";
+export * from "./radiobutton";
+export * from "./select";
+export * from "./textarea";

package/src/form/input/index.tsx

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

package/src/form/input/input.stories.tsx

@@ -0,0 +1,166 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { PrimaryButton, SecondaryButton } from "../../button";
+import { HStack, VStack } from "../../layout";
+import { Input } from ".";
+
+const meta: Meta<typeof Input> = {
+  title: "Form/Input",
+  component: Input,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const PlainInput: Story = {
+  args: {
+    label: "Some kind of input",
+    placeholder: "I am a placeholder",
+    errorMessage: "",
+    readOnly: false,
+    variant: "default",
+  },
+  argTypes: {
+    variant: { control: "inline-radio", options: ["default", "white"] },
+  },
+};
+
+export const PlainInputWithError: Story = {
+  args: {
+    label: "Some kind of input with error",
+    errorMessage: "This is invalid",
+    placeholder: "I am a placeholder",
+  },
+};
+
+export const ReadonlyInput: Story = {
+  args: {
+    label: "Some kind of readonly input",
+    readOnly: true,
+    value: "This is a read-only value",
+  },
+};
+
+export const ReadonlyInputWithError: Story = {
+  args: {
+    label: "Some kind of readonly input",
+    readOnly: true,
+    value: "This is a read-only value",
+    errorMessage: "This is invalid",
+  },
+};
+
+export const WhiteInput: Story = {
+  args: {
+    label: "Some kind of white input",
+    variant: "white",
+    placeholder: "I am a placeholder",
+  },
+  render: (props) => (
+    <div style={{ background: "var(--hds-ui-colors-light-grey-fill)", padding: "1em" }}>
+      <Input {...props} />
+    </div>
+  ),
+};
+
+export const WhiteInputWithError: Story = {
+  args: {
+    label: "Some kind of white input",
+    variant: "white",
+    placeholder: "I am a placeholder",
+    errorMessage: "This is invalid",
+  },
+  render: (props) => (
+    <div style={{ background: "var(--hds-ui-colors-light-grey-fill)", padding: "1em" }}>
+      <Input {...props} />
+    </div>
+  ),
+};
+
+export const WhiteReadonlyInput: Story = {
+  args: {
+    label: "Some kind of readonly input",
+    variant: "white",
+    readOnly: true,
+    value: "This is a read-only value",
+  },
+  render: (props) => (
+    <div style={{ background: "var(--hds-ui-colors-light-grey-fill)", padding: "1em" }}>
+      <Input {...props} />
+    </div>
+  ),
+};
+
+export const WhiteReadonlyInputWithError: Story = {
+  args: {
+    label: "Some kind of readonly input",
+    variant: "white",
+    readOnly: true,
+    value: "This is a read-only value",
+    errorMessage: "This is invalid",
+  },
+  render: (props) => (
+    <div style={{ background: "var(--hds-ui-colors-light-grey-fill)", padding: "1em" }}>
+      <Input {...props} />
+    </div>
+  ),
+};
+
+export const TrackingNumberSearch: Story = {
+  render: () => (
+    <HStack
+      gap="4"
+      align="end"
+      style={{
+        maxWidth: 556,
+      }}
+    >
+      <Input label="Sporingsnummer" style={{ width: "100%" }} />
+      <PrimaryButton size="large">Spor</PrimaryButton>
+    </HStack>
+  ),
+};
+
+export const FormWithErrorsOnSubmit: Story = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- It's ok
+    const [errors, setErrors] = useState<Record<string, string>>({});
+    return (
+      <VStack gap="16" asChild>
+        <form
+          lang="en"
+          onSubmit={(e) => {
+            e.preventDefault();
+            const formData = new FormData(e.currentTarget);
+            const newErrors: Record<string, string> = {};
+            for (const [key, value] of formData) {
+              if (!value) {
+                newErrors[key] = `${key} is required`;
+              }
+            }
+            setErrors(newErrors);
+          }}
+        >
+          <p>Fields without input will give an error</p>
+          <Input errorMessage={errors.One} label="One" name="One" />
+          <Input errorMessage={errors.Two} label="Two" name="Two" />
+          <Input errorMessage={errors.Three} label="Three" name="Three" />
+          <VStack gap="4">
+            <PrimaryButton type="submit">Submit</PrimaryButton>
+            <SecondaryButton
+              fill="outline"
+              onClick={() => {
+                setErrors({});
+              }}
+              type="reset"
+            >
+              Reset
+            </SecondaryButton>
+          </VStack>
+        </form>
+      </VStack>
+    );
+  },
+};

package/src/form/input/input.tsx

@@ -0,0 +1,30 @@
+import { forwardRef } from "react";
+import type { InputHTMLAttributes } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { InputGroup } from "../input-group";
+import type { InputGroupProps } from "../input-group";
+
+export type InputProps = Omit<InputGroupProps & InputHTMLAttributes<HTMLInputElement>, "children">;
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { className, variant, errorMessage, labelProps, label, id, style, disabled, readOnly, ...rest },
+  ref,
+) {
+  return (
+    <InputGroup
+      className={clsx("hds-input", className as undefined)}
+      disabled={disabled}
+      errorMessage={errorMessage}
+      id={id}
+      label={label}
+      labelProps={labelProps}
+      readOnly={readOnly}
+      style={style}
+      variant={variant}
+    >
+      <input {...rest} disabled={disabled} readOnly={readOnly} ref={ref} />
+    </InputGroup>
+  );
+});
+
+Input.displayName = "Input";

package/src/form/input-group/index.tsx

@@ -0,0 +1,2 @@
+export { InputGroup } from "./input-group";
+export type * from "./input-group";