@coopdigital/react 0.35.0 → 0.36.0

package/dist/components/Checkbox/Checkbox.d.ts

@@ -23,10 +23,8 @@ export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement
     labelVisible?: boolean;
     /** Specify the Checkbox name. */
     name: string;
-    /** **(Optional)** Specify the Checkbox placeholder text. Do not use in place of a form label. */
-    placeholder?: string;
     /** **(Optional)** Specify the Checkbox size. */
     size?: StandardSizes;
 }
-export declare const Checkbox: ({ "aria-placeholder": ariaPlaceholder, className, error, hint, id, label, labelVisible, name, placeholder, size, ...props }: CheckboxProps) => JSX.Element;
+export declare const Checkbox: ({ className, error, hint, id, label, labelVisible, name, size, ...props }: CheckboxProps) => JSX.Element;
 export default Checkbox;

package/dist/components/Checkbox/Checkbox.js

@@ -5,18 +5,15 @@ import { FieldError } from '../FieldError/FieldError.js';
 import { FieldHint } from '../FieldHint/FieldHint.js';
 import { FieldLabel } from '../FieldLabel/FieldLabel.js';
 
-const Checkbox = ({ "aria-placeholder": ariaPlaceholder, className, error = false, hint, id, label, labelVisible = true, name, placeholder, size = "md", ...props }) => {
-    var _a;
+const Checkbox = ({ className, error = false, hint, id, label, labelVisible = true, name, size = "md", ...props }) => {
     const internalId = useId();
     id = id !== null && id !== void 0 ? id : internalId;
     const componentProps = {
-        "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : undefined,
         className: clsx("coop-checkbox", className),
         "data-error": error ? "" : undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
         id,
         name,
-        placeholder,
         type: "checkbox",
         ...props,
     };

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

@@ -1,4 +1,5 @@
 import Checkbox from "./Checkbox";
+import CheckboxGroup from "./CheckboxGroup";
 export default Checkbox;
-export { Checkbox };
+export { Checkbox, CheckboxGroup };
 export * from "./Checkbox";

package/dist/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,30 @@
+import { type InputHTMLAttributes, type JSX } from "react";
+import { FormFieldError, StandardSizes } from "src/types";
+export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify the RadioButton error state.
+     *
+     * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
+     */
+    error?: FormFieldError;
+    /** **(Optional)** Specify the RadioButton hint.
+     *
+     * This text is rendered under the label to provide further guidance for users.
+     */
+    hint?: string;
+    /** **(Optional)** Specify the RadioButton id. Will be auto-generated if not set. */
+    id?: string;
+    /** **(Optional)** Specify the RadioButton label.
+     *
+     * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
+    label: string;
+    /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
+    labelVisible?: boolean;
+    /** Specify the RadioButton name. */
+    name: string;
+    /** **(Optional)** Specify the RadioButton size. */
+    size?: StandardSizes;
+}
+export declare const RadioButton: ({ className, error, hint, id, label, labelVisible, name, size, ...props }: RadioButtonProps) => JSX.Element;
+export default RadioButton;

package/dist/components/RadioButton/RadioButton.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { useId } from 'react';
+import { FieldError } from '../FieldError/FieldError.js';
+import { FieldHint } from '../FieldHint/FieldHint.js';
+import { FieldLabel } from '../FieldLabel/FieldLabel.js';
+
+const RadioButton = ({ className, error = false, hint, id, label, labelVisible = true, name, size = "md", ...props }) => {
+    const internalId = useId();
+    id = id !== null && id !== void 0 ? id : internalId;
+    const componentProps = {
+        className: clsx("coop-radio-button", className),
+        "data-error": error ? "" : undefined,
+        "data-size": size.length && size !== "md" ? size : undefined,
+        id,
+        name,
+        type: "radio",
+        ...props,
+    };
+    return (jsxs("div", { className: "coop-form-item", children: [jsxs("div", { className: "coop-radio-button-wrapper", children: [jsx("input", { ...componentProps }), label && (jsx(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: label })), hint && jsx(FieldHint, { children: hint })] }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message })] }));
+};
+
+export { RadioButton, RadioButton as default };

package/dist/components/RadioButton/RadioButtonGroup.d.ts

@@ -0,0 +1,26 @@
+import type { FieldsetHTMLAttributes, JSX } from "react";
+import { FormFieldError, StandardSizes } from "../../types";
+export interface RadioButtonGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+    /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify the RadioButtonGroup error state.
+     *
+     * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
+     */
+    error?: FormFieldError;
+    /** **(Optional)** Specify the RadioButtonGroup hint.
+     *
+     * This text is rendered under the label to provide further guidance for users.
+     */
+    hint?: string;
+    /** **(Optional)** Specify the label for the RadioButtonGroup. This will be rendered as a fieldset legend. */
+    label?: string;
+    /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
+    labelVisible?: boolean;
+    /** **(Optional)** Specify the RadioButtonGroup size. */
+    size?: StandardSizes;
+}
+export declare const RadioButtonGroup: ({ children, className, error, hint, label, labelVisible, size, ...props }: RadioButtonGroupProps) => JSX.Element;
+export default RadioButtonGroup;

package/dist/components/RadioButton/RadioButtonGroup.js

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { FieldError } from '../FieldError/FieldError.js';
+import { FieldHint } from '../FieldHint/FieldHint.js';
+
+const RadioButtonGroup = ({ children, className, error = false, hint, label, labelVisible = true, size = "md", ...props }) => {
+    const componentProps = {
+        className: clsx("coop-fieldset", "coop-radio-button-group", className),
+        "data-error": error ? "" : undefined,
+        "data-size": size.length && size !== "md" ? size : undefined,
+        ...props,
+    };
+    const legendProps = {
+        className: clsx("coop-field-label", !labelVisible && "sr-only"),
+    };
+    return (jsxs("fieldset", { ...componentProps, children: [label && jsx("legend", { ...legendProps, children: label }), hint && jsx(FieldHint, { children: hint }), typeof error === "object" && (error === null || error === void 0 ? void 0 : error.message) && jsx(FieldError, { children: error.message }), children] }));
+};
+
+export { RadioButtonGroup, RadioButtonGroup as default };

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

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

package/dist/index.d.ts

@@ -3,7 +3,6 @@ export * from "./components/Author";
 export * from "./components/Button";
 export * from "./components/Card";
 export * from "./components/Checkbox";
-export * from "./components/Checkbox/CheckboxGroup";
 export * from "./components/Expandable";
 export * from "./components/Field";
 export * from "./components/FieldError";
@@ -12,6 +11,7 @@ export * from "./components/FieldLabel";
 export * from "./components/Flourish";
 export * from "./components/Image";
 export * from "./components/Pill";
+export * from "./components/RadioButton";
 export * from "./components/RootSVG";
 export * from "./components/SearchBox";
 export * from "./components/Signpost";

package/dist/index.js

@@ -12,6 +12,8 @@ export { FieldLabel } from './components/FieldLabel/FieldLabel.js';
 export { Flourish } from './components/Flourish/Flourish.js';
 export { Image } from './components/Image/Image.js';
 export { Pill } from './components/Pill/Pill.js';
+export { RadioButton } from './components/RadioButton/RadioButton.js';
+export { RadioButtonGroup } from './components/RadioButton/RadioButtonGroup.js';
 export { RootSVG } from './components/RootSVG/RootSVG.js';
 export { SearchBox } from './components/SearchBox/SearchBox.js';
 export { Signpost } from './components/Signpost/Signpost.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -80,7 +80,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.31.0"
+    "@coopdigital/styles": "^0.31.1"
   },
-  "gitHead": "eedf8c0062e77a007636c54ec5776aa6cc670cee"
+  "gitHead": "a88bc2694b91f0c180f02d39786a1323e6632254"
 }

package/src/components/Checkbox/Checkbox.tsx

@@ -32,14 +32,11 @@ export interface CheckboxProps
   labelVisible?: boolean
   /** Specify the Checkbox name. */
   name: string
-  /** **(Optional)** Specify the Checkbox placeholder text. Do not use in place of a form label. */
-  placeholder?: string
   /** **(Optional)** Specify the Checkbox size. */
   size?: StandardSizes
 }
 
 export const Checkbox = ({
-  "aria-placeholder": ariaPlaceholder,
   className,
   error = false,
   hint,
@@ -47,7 +44,6 @@ export const Checkbox = ({
   label,
   labelVisible = true,
   name,
-  placeholder,
   size = "md",
   ...props
 }: CheckboxProps): JSX.Element => {
@@ -56,13 +52,11 @@ export const Checkbox = ({
   id = id ?? internalId
 
   const componentProps = {
-    "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
     className: clsx("coop-checkbox", className),
     "data-error": error ? "" : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     id,
     name,
-    placeholder,
     type: "checkbox",
     ...props,
   }

package/src/components/Checkbox/index.ts

@@ -1,5 +1,6 @@
 import Checkbox from "./Checkbox"
+import CheckboxGroup from "./CheckboxGroup"
 
 export default Checkbox
-export { Checkbox }
+export { Checkbox, CheckboxGroup }
 export * from "./Checkbox"

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,79 @@
+import clsx from "clsx"
+import { type InputHTMLAttributes, type JSX, useId } from "react"
+import { FormFieldError, StandardSizes } from "src/types"
+
+import { FieldError } from "../FieldError"
+import { FieldHint } from "../FieldHint"
+import { FieldLabel } from "../FieldLabel"
+
+export interface RadioButtonProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify the RadioButton error state.
+   *
+   * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
+   */
+  error?: FormFieldError
+  /** **(Optional)** Specify the RadioButton hint.
+   *
+   * This text is rendered under the label to provide further guidance for users.
+   */
+  hint?: string
+  /** **(Optional)** Specify the RadioButton id. Will be auto-generated if not set. */
+  id?: string
+  /** **(Optional)** Specify the RadioButton label.
+   *
+   * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
+  label: string
+  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
+  labelVisible?: boolean
+  /** Specify the RadioButton name. */
+  name: string
+  /** **(Optional)** Specify the RadioButton size. */
+  size?: StandardSizes
+}
+
+export const RadioButton = ({
+  className,
+  error = false,
+  hint,
+  id,
+  label,
+  labelVisible = true,
+  name,
+  size = "md",
+  ...props
+}: RadioButtonProps): JSX.Element => {
+  const internalId = useId()
+
+  id = id ?? internalId
+
+  const componentProps = {
+    className: clsx("coop-radio-button", className),
+    "data-error": error ? "" : undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
+    id,
+    name,
+    type: "radio",
+    ...props,
+  }
+
+  return (
+    <div className="coop-form-item">
+      <div className="coop-radio-button-wrapper">
+        <input {...componentProps} />
+
+        {label && (
+          <FieldLabel htmlFor={id} isVisible={labelVisible}>
+            {label}
+          </FieldLabel>
+        )}
+        {hint && <FieldHint>{hint}</FieldHint>}
+      </div>
+      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
+    </div>
+  )
+}
+
+export default RadioButton

package/src/components/RadioButton/RadioButtonGroup.tsx

@@ -0,0 +1,63 @@
+import type { FieldsetHTMLAttributes, JSX } from "react"
+
+import clsx from "clsx"
+
+import { FormFieldError, StandardSizes } from "../../types"
+import { FieldError } from "../FieldError"
+import { FieldHint } from "../FieldHint"
+
+export interface RadioButtonGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify the RadioButtonGroup error state.
+   *
+   * This is an instance of `FormFieldError`. You can provide either an object with a `message` key, or a boolean value if you need to render the message independently.
+   */
+  error?: FormFieldError
+  /** **(Optional)** Specify the RadioButtonGroup hint.
+   *
+   * This text is rendered under the label to provide further guidance for users.
+   */
+  hint?: string
+  /** **(Optional)** Specify the label for the RadioButtonGroup. This will be rendered as a fieldset legend. */
+  label?: string
+  /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
+  labelVisible?: boolean
+  /** **(Optional)** Specify the RadioButtonGroup size. */
+  size?: StandardSizes
+}
+
+export const RadioButtonGroup = ({
+  children,
+  className,
+  error = false,
+  hint,
+  label,
+  labelVisible = true,
+  size = "md",
+  ...props
+}: RadioButtonGroupProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-fieldset", "coop-radio-button-group", className),
+    "data-error": error ? "" : undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
+    ...props,
+  }
+
+  const legendProps = {
+    className: clsx("coop-field-label", !labelVisible && "sr-only"),
+  }
+
+  return (
+    <fieldset {...componentProps}>
+      {label && <legend {...legendProps}>{label}</legend>}
+      {hint && <FieldHint>{hint}</FieldHint>}
+      {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
+      {children}
+    </fieldset>
+  )
+}
+
+export default RadioButtonGroup

package/src/components/RadioButton/index.ts

@@ -0,0 +1,6 @@
+import RadioButton from "./RadioButton"
+import RadioButtonGroup from "./RadioButtonGroup"
+
+export default RadioButton
+export { RadioButton, RadioButtonGroup }
+export * from "./RadioButton"

package/src/index.ts

@@ -3,7 +3,6 @@ export * from "./components/Author"
 export * from "./components/Button"
 export * from "./components/Card"
 export * from "./components/Checkbox"
-export * from "./components/Checkbox/CheckboxGroup"
 export * from "./components/Expandable"
 export * from "./components/Field"
 export * from "./components/FieldError"
@@ -12,6 +11,7 @@ export * from "./components/FieldLabel"
 export * from "./components/Flourish"
 export * from "./components/Image"
 export * from "./components/Pill"
+export * from "./components/RadioButton"
 export * from "./components/RootSVG"
 export * from "./components/SearchBox"
 export * from "./components/Signpost"