@postenbring/hedwig-react 0.0.81 → 0.0.83

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

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

@@ -0,0 +1,106 @@
+import { useId, forwardRef, Children, isValidElement, cloneElement } from "react";
+import type { LabelHTMLAttributes, ReactNode, CSSProperties } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { ErrorMessage } from "../error-message";
+
+interface InputProps {
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
+  id?: string;
+  className?: string;
+}
+
+export interface InputGroupProps {
+  id?: string;
+  className?: string;
+  style?: CSSProperties;
+  variant?: "default" | "white";
+  errorMessage?: ReactNode;
+  labelProps?: LabelHTMLAttributes<HTMLLabelElement>;
+  label: ReactNode;
+  disabled?: boolean;
+  readOnly?: boolean;
+  /**
+   * `children` must be either a single input element or a render function.
+   *
+   * If you use a render function, make sure you spread the input props to the appropriate element.
+   */
+  children: Exclude<ReactNode, Iterable<ReactNode>> | ((inputProps: InputProps) => ReactNode);
+}
+
+export const InputGroup = forwardRef<HTMLDivElement, InputGroupProps>(function InputGroup(
+  {
+    id,
+    className,
+    style,
+    variant = "default",
+    errorMessage,
+    labelProps: { className: labelClassName, ...labelProps } = {},
+    label,
+    disabled,
+    readOnly,
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const errorMessageId = useId();
+  const inputId = useId();
+
+  const renderInput = () => {
+    const inputProps: InputProps = {
+      "aria-describedby": errorMessage ? errorMessageId : undefined,
+      "aria-invalid": errorMessage ? true : undefined,
+      id: id ?? inputId,
+      className: clsx("hds-input-group__input"),
+    };
+
+    if (typeof children === "function") {
+      return children(inputProps);
+    }
+
+    const input: ReactNode = Children.toArray(children)[0];
+
+    if (!isValidElement<InputProps>(input)) {
+      return;
+    }
+
+    return cloneElement<InputProps>(input, {
+      ...inputProps,
+      ...input.props,
+      className: `${inputProps.className} ${input.props.className ?? ""}`,
+    });
+  };
+
+  return (
+    <div
+      className={clsx(
+        "hds-input-group",
+        {
+          [`hds-input-group--${variant}`]: variant,
+          "hds-input-group--error": errorMessage,
+        },
+        className as undefined,
+      )}
+      ref={ref}
+      style={style}
+      {...rest}
+    >
+      <label
+        className={clsx("hds-input-group__label", labelClassName as undefined)}
+        {...labelProps}
+        htmlFor={id ?? inputId}
+      >
+        {label}
+      </label>
+      <div
+        className={clsx("hds-input-group__input-wrapper")}
+        data-disabled={disabled}
+        data-readonly={readOnly}
+      >
+        {renderInput()}
+      </div>
+      <ErrorMessage id={errorMessageId}>{errorMessage}</ErrorMessage>
+    </div>
+  );
+});

package/src/form/radiobutton/index.tsx

@@ -0,0 +1,4 @@
+export { Radiobutton } from "./radiobutton";
+export type * from "./radiobutton";
+export { RadioGroup, useRadioGroupContext } from "./radiogroup";
+export type * from "./radiogroup";

package/src/form/radiobutton/radiobutton.stories.tsx

@@ -0,0 +1,93 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { VStack } from "../../layout";
+import { Radiobutton, RadioGroup } from "./index";
+
+const meta: Meta<typeof Radiobutton> = {
+  title: "Form/Radiobutton/Radiobutton",
+  component: Radiobutton,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Radiobutton>;
+
+export const JustARadiobutton: Story = {
+  name: "Just a radiobutton",
+  args: {
+    title: "",
+    children: "Just a radiobutton",
+    checked: true,
+    hasError: false,
+    variant: "plain",
+  },
+  argTypes: {
+    variant: { control: "inline-radio", options: ["plain", "bounding-box"] },
+  },
+};
+
+export const PlainRadiobuttons: Story = {
+  name: "Radiobuttons",
+  render: (_props) => (
+    <RadioGroup legend="Radiobuttons should be grouped in a RadioGroup" name="group1">
+      <Radiobutton>This is a radiobutton</Radiobutton>
+      <Radiobutton>This is another radiobutton</Radiobutton>
+    </RadioGroup>
+  ),
+};
+
+export const PlainRadiobuttonsWithError: Story = {
+  name: "Radiobuttons with error",
+  render: (_props) => (
+    <RadioGroup
+      legend="RadioGroup will aid you with styling and aria when it is provided an error message"
+      errorMessage="Something is wrong"
+      name="group1error"
+    >
+      <Radiobutton>This is a radiobutton</Radiobutton>
+      <Radiobutton>This is another radiobutton</Radiobutton>
+    </RadioGroup>
+  ),
+};
+
+export const BoundedRadiobutton: Story = {
+  name: "Radiobuttons with bounding box",
+  render: (_props) => (
+    <VStack gap="8" role="radiogroup">
+      <Radiobutton name="group2" variant="bounding-box">
+        This is a radiobutton with bounding box
+      </Radiobutton>
+      <Radiobutton hasError name="group2" variant="bounding-box">
+        This is a radiobutton with bounding box and error
+      </Radiobutton>
+    </VStack>
+  ),
+};
+
+export const DetailedContentRadiobutton: Story = {
+  name: "Radiobuttons with title",
+  render: (_props) => (
+    <VStack gap="8" role="radiogroup">
+      <Radiobutton name="group4" title="Option 1">
+        Detailed description if needed
+      </Radiobutton>
+      <Radiobutton hasError name="group4" title="Option 2">
+        Detailed description if needed
+      </Radiobutton>
+    </VStack>
+  ),
+};
+
+export const DetailedContentRadiobuttonWithBoundingBox: Story = {
+  name: "Radiobuttons with bounding box and title",
+  render: (_props) => (
+    <VStack gap="8" role="radiogroup">
+      <Radiobutton name="group5" title="Option 1" variant="bounding-box">
+        Detailed description if needed
+      </Radiobutton>
+      <Radiobutton hasError name="group5" title="Option 2" variant="bounding-box">
+        Detailed description if needed
+      </Radiobutton>
+    </VStack>
+  ),
+};

package/src/form/radiobutton/radiobutton.tsx

@@ -0,0 +1,85 @@
+import { forwardRef, type InputHTMLAttributes, type ReactNode } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { useFieldsetContext } from "../fieldset";
+import { type RadioGroupProps, useRadioGroupContext } from "./radiogroup";
+
+export interface RadiobuttonProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue"> {
+  children: ReactNode;
+  variant?: "plain" | "bounding-box";
+  /**
+   * 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 Radiobuttons in the RadioGroup component.
+   * When providing an errorMessage to RadioGroup, all contained Radiobuttons will get correct hasError state.
+   *
+   * You can use this when your Radiobutton is part of a non-HDS fieldset which shows an error message.
+   */
+  hasError?: boolean;
+  title?: string;
+}
+
+const isChecked = ({
+  checked,
+  selectedValue,
+  value,
+}: Pick<RadiobuttonProps, "checked" | "value"> & {
+  selectedValue: RadioGroupProps["value"];
+}) => {
+  if (typeof checked !== "undefined") return checked;
+  if (typeof selectedValue !== "undefined") return value === selectedValue;
+  return undefined;
+};
+
+export const Radiobutton = forwardRef<HTMLInputElement, RadiobuttonProps>(
+  (
+    {
+      checked,
+      value,
+      variant = "plain",
+      hasError: hasErrorProp,
+      title,
+      children,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const {
+      value: selectedValue,
+      hasError: hasRadioGroupError,
+      ...context
+    } = useRadioGroupContext();
+    const { hasError: hasFieldsetError } = useFieldsetContext();
+    const hasError = hasFieldsetError || hasRadioGroupError || hasErrorProp;
+
+    return (
+      <div
+        className={clsx(
+          "hds-radiobutton",
+          {
+            [`hds-radiobutton--${variant}`]: variant === "bounding-box",
+            "hds-radiobutton--error": hasError,
+          },
+          className as undefined,
+        )}
+      >
+        <label>
+          <input
+            {...context}
+            {...rest}
+            checked={isChecked({ checked, selectedValue, value })}
+            value={value}
+            ref={ref}
+            type="radio"
+          />
+          <span aria-hidden className="hds-radiobutton__checkmark" />
+          {title ? <p className="hds-radiobutton__title">{title}</p> : children}
+        </label>
+        {title ? children : null}
+      </div>
+    );
+  },
+);
+
+Radiobutton.displayName = "Radiobutton";

package/src/form/radiobutton/radiogroup.stories.tsx

@@ -0,0 +1,39 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { RadioGroup } from "./radiogroup";
+import { Radiobutton } from "./index";
+
+const meta: Meta<typeof RadioGroup> = {
+  title: "Form/Radiobutton/Radiogroup",
+  component: RadioGroup,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof RadioGroup>;
+
+export const PlainRadioGroup: Story = {
+  name: "Radio group with radiobuttons",
+  args: {
+    legend: "Radio group with radiobuttons",
+    errorMessage: "",
+    name: "group1",
+    value: undefined,
+    onChange: () => {
+      return undefined;
+    },
+  },
+  argTypes: {
+    value: {
+      description: "Use this prop for a controlled value",
+      control: "inline-radio",
+      options: [undefined, "First radiobutton", "Second radiobutton"],
+    },
+  },
+  render: (props) => (
+    <RadioGroup {...props}>
+      <Radiobutton value="First radiobutton">This is a radiobutton</Radiobutton>
+      <Radiobutton value="Second radiobutton">This is another radiobutton</Radiobutton>
+    </RadioGroup>
+  ),
+};

package/src/form/radiobutton/radiogroup.tsx

@@ -0,0 +1,52 @@
+import {
+  type ChangeEventHandler,
+  createContext,
+  forwardRef,
+  type ReactNode,
+  useContext,
+} from "react";
+import { Fieldset, type FieldsetProps } from "../fieldset";
+import type { RadiobuttonProps } from "./radiobutton";
+
+export interface RadioGroupProps extends Omit<FieldsetProps, "onChange"> {
+  children: ReactNode;
+  /** Will be passed to all Radiobuttons within the radio group */
+  name?: RadiobuttonProps["name"];
+  /** If you want the group to be controlled, you can pass the selected value here */
+  value?: RadiobuttonProps["value"];
+  /**
+   * Error message is passed to the internal Fieldset, and will also give contained Radiobuttons
+   * error styling and aria to indicate invalid state.
+   */
+  errorMessage?: ReactNode;
+  /** Will be passed to all Radiobuttons within the radio group */
+  onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+}
+
+type RadioGroupContextProps = {
+  hasError: boolean;
+} & Pick<RadioGroupProps, "name" | "value" | "onChange">;
+
+const RadioGroupContext = createContext<RadioGroupContextProps>({
+  hasError: false,
+  onChange: () => {
+    return undefined;
+  },
+});
+
+export const useRadioGroupContext = () => useContext(RadioGroupContext);
+
+export const RadioGroup = forwardRef<HTMLFieldSetElement, RadioGroupProps>(function RadioGroup(
+  { name, value, errorMessage, onChange, children, ...rest },
+  ref,
+) {
+  return (
+    <RadioGroupContext.Provider value={{ name, value, hasError: Boolean(errorMessage), onChange }}>
+      <Fieldset errorMessage={errorMessage} {...rest} ref={ref}>
+        {children}
+      </Fieldset>
+    </RadioGroupContext.Provider>
+  );
+});
+
+RadioGroup.displayName = "RadioGroup";

package/src/form/select/index.tsx

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

package/src/form/select/select.stories.tsx

@@ -0,0 +1,93 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Select } from ".";
+
+const meta: Meta<typeof Select> = {
+  title: "Form/Select",
+  component: Select,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Select>;
+
+export const Default: Story = {
+  args: {
+    label: "Default select",
+    errorMessage: "",
+    variant: "default",
+  },
+  argTypes: {
+    variant: { control: "inline-radio", options: ["default", "white"] },
+  },
+  render: (props) => (
+    <Select {...props} defaultValue="">
+      <option disabled hidden value="">
+        Please select
+      </option>
+      <option value="1">option 1</option>
+      <option value="2">option 2</option>
+      <option value="3">option 3</option>
+    </Select>
+  ),
+};
+
+export const White: Story = {
+  args: {
+    label: "White select",
+    variant: "white",
+  },
+  render: (props) => (
+    <div style={{ background: "var(--hds-ui-colors-light-grey-fill)", padding: "1em" }}>
+      <Select {...props} defaultValue="">
+        <option disabled hidden value="">
+          Please select
+        </option>
+        <option value="1">option 1</option>
+        <option value="2">option 2</option>
+        <option value="3">option 3</option>
+      </Select>
+    </div>
+  ),
+};
+
+export const DefaultWithError: Story = {
+  args: {
+    label: "select with error",
+    name: "name",
+    id: "someId",
+    errorMessage: "Something is wrong",
+  },
+  render: (props) => (
+    <Select {...props} defaultValue="">
+      <option disabled hidden value="">
+        Please select
+      </option>
+      <option value="1">option 1</option>
+      <option value="2">option 2</option>
+      <option value="3">option 3</option>
+    </Select>
+  ),
+};
+
+export const WhiteWithError: Story = {
+  args: {
+    label: "White select with error",
+    variant: "white",
+    name: "name",
+    id: "someId",
+    errorMessage: "Something is wrong",
+  },
+  render: (props) => (
+    <div style={{ background: "var(--hds-ui-colors-light-grey-fill)", padding: "1em" }}>
+      <Select {...props} defaultValue="">
+        <option disabled hidden value="">
+          Please select
+        </option>
+        <option value="1">option 1</option>
+        <option value="2">option 2</option>
+        <option value="3">option 3</option>
+      </Select>
+    </div>
+  ),
+};