@coopdigital/react 0.47.0 → 0.48.0

package/dist/components/AlertBanner/AlertBanner.d.ts

@@ -4,12 +4,22 @@ export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
     children?: string | ReactNode;
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
-    /** Specify the main title of the banner, rendered as a `h2`. */
-    heading: string;
     /** **(Optional)** Specify a custom React ref for this component. */
     ref?: Ref<HTMLDivElement>;
     /** **(Optional)** Specify the AlertBanner variant. */
     variant?: "black" | "default";
 }
-export declare const AlertBanner: ({ children, className, heading, ref, variant, ...props }: AlertBannerProps) => JSX.Element;
+interface AlertBannerHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+    /** **(Optional)** Content inside the Heading. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the Heading. */
+    className?: string;
+}
+export declare const AlertBanner: {
+    ({ children, className, ref, variant, ...props }: AlertBannerProps): JSX.Element;
+    Heading: {
+        ({ children, className }: AlertBannerHeadingProps): JSX.Element;
+        displayName: string;
+    };
+};
 export default AlertBanner;

package/dist/components/AlertBanner/AlertBanner.js

@@ -1,13 +1,18 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-const AlertBanner = ({ children, className, heading, ref, variant = "default", ...props }) => {
+const AlertBanner = ({ children, className, ref, variant = "default", ...props }) => {
     const componentProps = {
         className: clsx("coop-alert-banner", className),
         "data-variant": variant,
         ...props,
     };
-    return (jsx("aside", { ...componentProps, ref: ref, children: jsxs("div", { className: "coop-alert-banner--inner", children: [jsx("h2", { id: "coop-alert-banner--headline", children: heading }), children] }) }));
+    return (jsx("aside", { ...componentProps, ref: ref, children: children }));
 };
+const AlertBannerHeading = ({ children, className }) => {
+    return jsx("h2", { className: className, children: children });
+};
+AlertBannerHeading.displayName = "AlertBanner.Heading";
+AlertBanner.Heading = AlertBannerHeading;
 
 export { AlertBanner, AlertBanner as default };

package/dist/components/Checkbox/Checkbox.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const Checkbox = ({ className, disabled, error = false, id, name, ref, size = "md", ...props }) => {
     const uid = useId(id);
     const componentProps = {
-        className: clsx("coop-checkbox", className),
+        className: clsx("coop-checkbox", "coop-field-element", className),
         "data-error": error || undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
         disabled,

package/dist/components/Field/Field.js

@@ -15,6 +15,7 @@ const componentSlots = {
     FieldHint: null,
     FieldLabel: null,
     Radio: null,
+    Select: null,
     Textarea: null,
     TextInput: null,
 };

package/dist/components/Radio/Radio.js

@@ -5,7 +5,7 @@ import { useId } from '../../hooks/useId.js';
 const Radio = ({ className, disabled, error = false, id, name, ref, size = "md", ...props }) => {
     const uid = useId(id);
     const componentProps = {
-        className: clsx("coop-radio", className),
+        className: clsx("coop-radio", "coop-field-element", className),
         "data-error": error || undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
         disabled,

package/dist/components/Select/Select.d.ts

@@ -0,0 +1,46 @@
+import type { JSX, OptgroupHTMLAttributes, OptionHTMLAttributes, ReactNode, Ref, SelectHTMLAttributes } from "react";
+import { StandardSizes } from "../../../src/types";
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+    /** **(Optional)** Options inside the Select. This should be a set of `Select.Option` or `Select.OptionGroup` components.  */
+    children?: ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify whether the Select should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+    disabled?: boolean;
+    /** **(Optional)** Specify the Select error state. */
+    error?: boolean;
+    /** **(Optional)** Specify the Select id. Will be auto-generated if not set. */
+    id?: string;
+    /** Specify the Select name. */
+    name: string;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLSelectElement>;
+    /** **(Optional)** Specify the Select size. */
+    size?: StandardSizes;
+}
+interface SelectOptionGroupProps extends OptgroupHTMLAttributes<HTMLOptGroupElement> {
+    /** **(Optional)** Main content inside the Select option. It can be any valid JSX or string. */
+    children?: ReactNode;
+    /** Specify the Select option group label. */
+    label: string;
+}
+interface SelectOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
+    /** **(Optional)** Main content inside the Select option. It can be any valid JSX or string. */
+    children?: ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the Select option. */
+    className?: string;
+    /** Value of Select option. */
+    value: string;
+}
+export declare const Select: {
+    ({ children, className, disabled, error, id, name, ref, size, ...props }: SelectProps): JSX.Element;
+    OptionGroup: {
+        ({ children, ...props }: SelectOptionGroupProps): JSX.Element;
+        displayName: string;
+    };
+    Option: {
+        ({ children, className, ...props }: SelectOptionProps): JSX.Element;
+        displayName: string;
+    };
+};
+export default Select;

package/dist/components/Select/Select.js

@@ -0,0 +1,29 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useId } from '../../hooks/useId.js';
+
+const Select = ({ children, className, disabled, error, id, name, ref, size = "md", ...props }) => {
+    const uid = useId(id);
+    const componentProps = {
+        className: clsx("coop-select", "coop-field-element", className),
+        "data-error": error !== null && error !== void 0 ? error : undefined,
+        "data-size": size.length && size !== "md" ? size : undefined,
+        disabled,
+        id: uid,
+        name,
+        ...props,
+    };
+    return (jsx("select", { ...componentProps, ref: ref, children: children }));
+};
+const SelectOptionGroup = ({ children, ...props }) => {
+    return jsx("optgroup", { ...props, children: children });
+};
+const SelectOption = ({ children, className, ...props }) => {
+    return (jsx("option", { className: clsx("coop-select--option", className), ...props, children: children }));
+};
+SelectOptionGroup.displayName = "Select.OptionGroup";
+SelectOption.displayName = "Select.Option";
+Select.OptionGroup = SelectOptionGroup;
+Select.Option = SelectOption;
+
+export { Select, Select as default };

package/dist/components/Select/index.d.ts

@@ -0,0 +1,4 @@
+import Select from "./Select";
+export default Select;
+export { Select };
+export * from "./Select";

package/dist/components/TextInput/TextInput.js

@@ -7,7 +7,7 @@ const TextInput = ({ "aria-placeholder": ariaPlaceholder, className, disabled, e
     const uid = useId(id);
     const componentProps = {
         "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : undefined,
-        className: clsx("coop-text-input", className),
+        className: clsx("coop-text-input", "coop-field-element", className),
         "data-error": error || undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
         disabled,

package/dist/components/Textarea/Textarea.js

@@ -13,7 +13,7 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
     const uid = useId(id);
     const componentProps = {
         "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : undefined,
-        className: clsx("coop-textarea", className),
+        className: clsx("coop-textarea", "coop-field-element", className),
         cols,
         "data-error": error !== null && error !== void 0 ? error : undefined,
         "data-size": size.length && size !== "md" ? size : undefined,

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export * from "./components/Pill";
 export * from "./components/Radio";
 export * from "./components/RootSVG";
 export * from "./components/Searchbox";
+export * from "./components/Select";
 export * from "./components/Signpost";
 export * from "./components/SkipNav";
 export * from "./components/Squircle";

package/dist/index.js

@@ -12,6 +12,7 @@ export { Pill } from './components/Pill/Pill.js';
 export { Radio } from './components/Radio/Radio.js';
 export { RootSVG } from './components/RootSVG/RootSVG.js';
 export { Searchbox } from './components/Searchbox/Searchbox.js';
+export { Select } from './components/Select/Select.js';
 export { Signpost } from './components/Signpost/Signpost.js';
 export { SkipNav } from './components/SkipNav/SkipNav.js';
 export { Squircle } from './components/Squircle/Squircle.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.47.0",
+  "version": "0.48.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -56,19 +56,19 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.11.0",
-    "@playwright/test": "^1.56.1",
-    "@storybook/addon-a11y": "^10.0.7",
-    "@storybook/addon-docs": "^10.0.7",
-    "@storybook/addon-onboarding": "^10.0.7",
-    "@storybook/react-vite": "^10.0.7",
+    "@playwright/test": "^1.57.0",
+    "@storybook/addon-a11y": "^10.1.0",
+    "@storybook/addon-docs": "^10.1.0",
+    "@storybook/addon-onboarding": "^10.1.0",
+    "@storybook/react-vite": "^10.1.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.2.4",
+    "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "serve": "^14.2.5",
-    "storybook": "^10.0.7"
+    "storybook": "^10.1.0"
   },
   "peerDependencies": {
     "react": "^19.1.0",
@@ -78,8 +78,8 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.40.0",
+    "@coopdigital/styles": "^0.41.0",
     "clsx": "^2.1.1"
   },
-  "gitHead": "f28e578e8a74f005d372677975f19a707ea643ca"
+  "gitHead": "96d3459231c76b94984900894ac0ae2bac2f091b"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -7,18 +7,22 @@ export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
   children?: string | ReactNode
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
-  /** Specify the main title of the banner, rendered as a `h2`. */
-  heading: string
   /** **(Optional)** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
   /** **(Optional)** Specify the AlertBanner variant. */
   variant?: "black" | "default"
 }
 
+interface AlertBannerHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  /** **(Optional)** Content inside the Heading. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the Heading. */
+  className?: string
+}
+
 export const AlertBanner = ({
   children,
   className,
-  heading,
   ref,
   variant = "default",
   ...props
@@ -31,12 +35,17 @@ export const AlertBanner = ({
 
   return (
     <aside {...componentProps} ref={ref}>
-      <div className="coop-alert-banner--inner">
-        <h2 id="coop-alert-banner--headline">{heading}</h2>
-        {children}
-      </div>
+      {children}
     </aside>
   )
 }
 
+const AlertBannerHeading = ({ children, className }: AlertBannerHeadingProps): JSX.Element => {
+  return <h2 className={className}>{children}</h2>
+}
+
+AlertBannerHeading.displayName = "AlertBanner.Heading"
+
+AlertBanner.Heading = AlertBannerHeading
+
 export default AlertBanner

package/src/components/Checkbox/Checkbox.tsx

@@ -5,8 +5,10 @@ import clsx from "clsx"
 import { StandardSizes } from "../../../src/types"
 import { useId } from "../../hooks/useId"
 
-export interface CheckboxProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+export interface CheckboxProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "size" | "type"
+> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
   /** **(Optional)** Specify whether the Checkbox should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
@@ -35,7 +37,7 @@ export const Checkbox = ({
 }: CheckboxProps): JSX.Element => {
   const uid = useId(id)
   const componentProps = {
-    className: clsx("coop-checkbox", className),
+    className: clsx("coop-checkbox", "coop-field-element", className),
     "data-error": error || undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     disabled,

package/src/components/Field/Field.tsx

@@ -17,6 +17,7 @@ const componentSlots = {
   FieldHint: null,
   FieldLabel: null,
   Radio: null,
+  Select: null,
   Textarea: null,
   TextInput: null,
 }

package/src/components/Radio/Radio.tsx

@@ -34,7 +34,7 @@ export const Radio = ({
   const uid = useId(id)
 
   const componentProps = {
-    className: clsx("coop-radio", className),
+    className: clsx("coop-radio", "coop-field-element", className),
     "data-error": error || undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     disabled,

package/src/components/Searchbox/Searchbox.tsx

@@ -12,8 +12,10 @@ import { Label as FieldLabel } from "../FieldMarkers/Label"
 import { SearchIcon } from "../Icon"
 import TextInput, { TextInputProps } from "../TextInput"
 
-export interface SearchboxProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+export interface SearchboxProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "size" | "type"
+> {
   /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
   action?: string
   /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */

package/src/components/Select/Select.tsx

@@ -0,0 +1,97 @@
+import type {
+  JSX,
+  OptgroupHTMLAttributes,
+  OptionHTMLAttributes,
+  ReactNode,
+  Ref,
+  SelectHTMLAttributes,
+} from "react"
+
+import clsx from "clsx"
+
+import { StandardSizes } from "../../../src/types"
+import { useId } from "../../hooks/useId"
+
+export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
+  /** **(Optional)** Options inside the Select. This should be a set of `Select.Option` or `Select.OptionGroup` components.  */
+  children?: ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify whether the Select should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
+  disabled?: boolean
+  /** **(Optional)** Specify the Select error state. */
+  error?: boolean
+  /** **(Optional)** Specify the Select id. Will be auto-generated if not set. */
+  id?: string
+  /** Specify the Select name. */
+  name: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLSelectElement>
+  /** **(Optional)** Specify the Select size. */
+  size?: StandardSizes
+}
+
+interface SelectOptionGroupProps extends OptgroupHTMLAttributes<HTMLOptGroupElement> {
+  /** **(Optional)** Main content inside the Select option. It can be any valid JSX or string. */
+  children?: ReactNode
+  /** Specify the Select option group label. */
+  label: string
+}
+
+interface SelectOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
+  /** **(Optional)** Main content inside the Select option. It can be any valid JSX or string. */
+  children?: ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the Select option. */
+  className?: string
+  /** Value of Select option. */
+  value: string
+}
+
+export const Select = ({
+  children,
+  className,
+  disabled,
+  error,
+  id,
+  name,
+  ref,
+  size = "md",
+  ...props
+}: SelectProps): JSX.Element => {
+  const uid = useId(id)
+  const componentProps = {
+    className: clsx("coop-select", "coop-field-element", className),
+    "data-error": error ?? undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
+    disabled,
+    id: uid,
+    name,
+    ...props,
+  }
+
+  return (
+    <select {...componentProps} ref={ref}>
+      {children}
+    </select>
+  )
+}
+
+const SelectOptionGroup = ({ children, ...props }: SelectOptionGroupProps): JSX.Element => {
+  return <optgroup {...props}>{children}</optgroup>
+}
+
+const SelectOption = ({ children, className, ...props }: SelectOptionProps): JSX.Element => {
+  return (
+    <option className={clsx("coop-select--option", className)} {...props}>
+      {children}
+    </option>
+  )
+}
+
+SelectOptionGroup.displayName = "Select.OptionGroup"
+SelectOption.displayName = "Select.Option"
+
+Select.OptionGroup = SelectOptionGroup
+Select.Option = SelectOption
+
+export default Select

package/src/components/Select/index.ts

@@ -0,0 +1,5 @@
+import Select from "./Select"
+
+export default Select
+export { Select }
+export * from "./Select"

package/src/components/TextInput/TextInput.tsx

@@ -5,8 +5,10 @@ import clsx from "clsx"
 import { StandardSizes } from "../../../src/types"
 import { useId } from "../../hooks/useId"
 
-export interface TextInputProps
-  extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "size" | "type"> {
+export interface TextInputProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  "prefix" | "size" | "type"
+> {
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
   /** **(Optional)** Specify whether the TextInput should be disabled. Refer to Experience Library guidance on disabled form controls and accessibility. */
@@ -62,7 +64,7 @@ export const TextInput = ({
 
   const componentProps = {
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
-    className: clsx("coop-text-input", className),
+    className: clsx("coop-text-input", "coop-field-element", className),
     "data-error": error || undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     disabled,

package/src/components/Textarea/Textarea.tsx

@@ -69,7 +69,7 @@ export const Textarea = ({
 
   const componentProps = {
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
-    className: clsx("coop-textarea", className),
+    className: clsx("coop-textarea", "coop-field-element", className),
     cols,
     "data-error": error ?? undefined,
     "data-size": size.length && size !== "md" ? size : undefined,

package/src/index.ts

@@ -12,6 +12,7 @@ export * from "./components/Pill"
 export * from "./components/Radio"
 export * from "./components/RootSVG"
 export * from "./components/Searchbox"
+export * from "./components/Select"
 export * from "./components/Signpost"
 export * from "./components/SkipNav"
 export * from "./components/Squircle"