@postenbring/hedwig-react 0.0.81 → 0.0.82

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

package/src/form/select/select.tsx

@@ -0,0 +1,33 @@
+import { forwardRef, type ReactNode , type SelectHTMLAttributes } from "react";
+import { clsx } from "@postenbring/hedwig-css/typed-classname";
+import { InputGroup } from "../input-group";
+import type { InputGroupProps } from "../input-group";
+
+export type SelectProps = Omit<
+  InputGroupProps & SelectHTMLAttributes<HTMLSelectElement>,
+  "readOnly" | "children"
+> & { children: ReactNode };
+
+export const Select = forwardRef<HTMLSelectElement, SelectProps>(function Select(
+  { className, variant, errorMessage, labelProps, label, id, style, disabled, children, ...rest },
+  ref,
+) {
+  return (
+    <InputGroup
+      className={clsx("hds-select", className as undefined)}
+      disabled={disabled}
+      errorMessage={errorMessage}
+      id={id}
+      label={label}
+      labelProps={labelProps}
+      style={style}
+      variant={variant}
+    >
+      <select {...rest} disabled={disabled} ref={ref}>
+        {children}
+      </select>
+    </InputGroup>
+  );
+});
+
+Select.displayName = "Select";

package/src/form/textarea/index.tsx

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

package/src/form/textarea/textarea.stories.tsx

@@ -0,0 +1,106 @@
+/* eslint-disable import/no-extraneous-dependencies -- storybook story */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Textarea } from ".";
+
+const meta: Meta<typeof Textarea> = {
+  title: "Form/Textarea",
+  component: Textarea,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Textarea>;
+
+export const PlainTextarea: Story = {
+  args: {
+    label: "Some kind of textarea",
+    placeholder: "I am a placeholder",
+    errorMessage: "",
+    readOnly: false,
+    variant: "default",
+  },
+  argTypes: {
+    variant: { control: "inline-radio", options: ["default", "white"] },
+  },
+};
+
+export const PlainTextareaWithError: Story = {
+  args: {
+    label: "Some kind of textarea with error",
+    errorMessage: "This is invalid",
+    placeholder: "I am a placeholder",
+  },
+};
+
+export const ReadonlyTextarea: Story = {
+  args: {
+    label: "Some kind of readonly textarea",
+    readOnly: true,
+    value: "This is a read-only value",
+  },
+};
+
+export const ReadonlyTextareaWithError: Story = {
+  args: {
+    label: "Some kind of readonly textarea",
+    readOnly: true,
+    value: "This is a read-only value",
+    errorMessage: "This is invalid",
+  },
+};
+
+export const WhiteTextarea: Story = {
+  args: {
+    label: "Some kind of white textarea",
+    variant: "white",
+    placeholder: "I am a placeholder",
+  },
+  render: (props) => (
+    <div style={{ background: "var(--hds-ui-colors-light-grey-fill)", padding: "1em" }}>
+      <Textarea {...props} />
+    </div>
+  ),
+};
+
+export const WhiteTextareaWithError: Story = {
+  args: {
+    label: "Some kind of white textarea",
+    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" }}>
+      <Textarea {...props} />
+    </div>
+  ),
+};
+
+export const WhiteReadonlyTextarea: Story = {
+  args: {
+    label: "Some kind of readonly textarea",
+    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" }}>
+      <Textarea {...props} />
+    </div>
+  ),
+};
+
+export const WhiteReadonlyTextareaWithError: Story = {
+  args: {
+    label: "Some kind of readonly textarea",
+    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" }}>
+      <Textarea {...props} />
+    </div>
+  ),
+};

package/src/form/textarea/textarea.tsx

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