@coopdigital/react 0.36.0 → 0.37.0

package/dist/components/Card/Card.d.ts

@@ -31,8 +31,8 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     label?: string;
     /** **(Optional)** Specify the background color of the Card label. */
     labelBackground?: Lights;
-    /** **(Optional)** Specify the layout of the Card. */
-    layout?: "vertical" | "horizontal";
+    /** **(Optional)** Specify the orientation of the Card. */
+    orientation?: "vertical" | "horizontal";
 }
-export declare const Card: ({ as, background, badge, badgePosition, chevron, children, className, heading, headingLevel, href, image, imagePosition, label, labelBackground, layout, ...props }: CardProps) => JSX.Element;
+export declare const Card: ({ as, background, badge, badgePosition, chevron, children, className, heading, headingLevel, href, image, imagePosition, label, labelBackground, orientation, ...props }: CardProps) => JSX.Element;
 export default Card;

package/dist/components/Card/Card.js

@@ -18,7 +18,7 @@ function getCardLinkElement(as, href) {
         },
     };
 }
-const Card = ({ as, background = "white", badge, badgePosition = "inset", chevron = false, children, className, heading, headingLevel = "h3", href, image, imagePosition = "left", label = "", labelBackground, layout = "vertical", ...props }) => {
+const Card = ({ as, background = "white", badge, badgePosition = "inset", chevron = false, children, className, heading, headingLevel = "h3", href, image, imagePosition = "left", label = "", labelBackground, orientation = "vertical", ...props }) => {
     const linkElement = getCardLinkElement(as, href);
     const imageProps = {
         crop: "wide",
@@ -28,7 +28,7 @@ const Card = ({ as, background = "white", badge, badgePosition = "inset", chevro
         className: clsx("coop-card", background && bgPropToClass(background, className), className),
         "data-badge-pos": badgePosition,
         "data-image-pos": imagePosition,
-        "data-layout": layout !== "vertical" ? layout : undefined,
+        "data-orientation": orientation !== "vertical" ? orientation : undefined,
         ...props,
     };
     return (jsxs("article", { ...componentProps, children: [image && jsx(Image, { ...imageProps }), badge && jsx("div", { className: "coop-card--badge", children: badge }), jsxs("div", { className: "coop-card--inner", children: [jsxs("div", { className: "coop-card--content", children: [label && (jsx("span", { className: clsx("coop-card--label", labelBackground && bgPropToClass(labelBackground, className)), children: label })), React.createElement(linkElement.element, linkElement.props, React.createElement(headingLevel, { className: "coop-card--heading" }, heading)), children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx(ChevronRightIcon, {}) }))] })] }));

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

@@ -19,8 +19,10 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
     label?: string;
     /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
     labelVisible?: boolean;
+    /** **(Optional)** Specify the CheckboxGroup orientation. */
+    orientation?: "horizontal" | "vertical";
     /** **(Optional)** Specify the CheckboxGroup size. */
     size?: StandardSizes;
 }
-export declare const CheckboxGroup: ({ children, className, error, hint, label, labelVisible, size, ...props }: CheckboxGroupProps) => JSX.Element;
+export declare const CheckboxGroup: ({ children, className, error, hint, label, labelVisible, orientation, size, ...props }: CheckboxGroupProps) => JSX.Element;
 export default CheckboxGroup;

package/dist/components/Checkbox/CheckboxGroup.js

@@ -3,17 +3,18 @@ import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import { FieldError } from '../FieldError/FieldError.js';
 import { FieldHint } from '../FieldHint/FieldHint.js';
 
-const CheckboxGroup = ({ children, className, error = false, hint, label, labelVisible = true, size = "md", ...props }) => {
+const CheckboxGroup = ({ children, className, error = false, hint, label, labelVisible = true, orientation = "vertical", size = "md", ...props }) => {
     const componentProps = {
         className: clsx("coop-fieldset", "coop-checkbox-group", className),
         "data-error": error ? "" : undefined,
+        "data-orientation": orientation !== "vertical" ? orientation : 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] }));
+    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 }), jsx("div", { className: "coop-checkbox-group-options", children: children })] }));
 };
 
 export { CheckboxGroup, CheckboxGroup as default };

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

@@ -1,5 +1,6 @@
 import { type InputHTMLAttributes, type JSX } from "react";
 import { FormFieldError, StandardSizes } from "src/types";
+import { TagProps } from "../Tag";
 export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
@@ -25,6 +26,12 @@ export interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElem
     name: string;
     /** **(Optional)** Specify the RadioButton size. */
     size?: StandardSizes;
+    /** **(Optional)** Specify the RadioButton tag text. */
+    tag?: string;
+    /** **(Optional)** Specify the RadioButton tag background color. */
+    tagBackground?: TagProps["background"];
+    /** **(Optional)** Specify the RadioButton variant. */
+    variant?: "default" | "boxed";
 }
-export declare const RadioButton: ({ className, error, hint, id, label, labelVisible, name, size, ...props }: RadioButtonProps) => JSX.Element;
+export declare const RadioButton: ({ className, error, hint, id, label, labelVisible, name, size, tag, tagBackground, variant, ...props }: RadioButtonProps) => JSX.Element;
 export default RadioButton;

package/dist/components/RadioButton/RadioButton.js

@@ -4,20 +4,22 @@ import { useId } from 'react';
 import { FieldError } from '../FieldError/FieldError.js';
 import { FieldHint } from '../FieldHint/FieldHint.js';
 import { FieldLabel } from '../FieldLabel/FieldLabel.js';
+import { Tag } from '../Tag/Tag.js';
 
-const RadioButton = ({ className, error = false, hint, id, label, labelVisible = true, name, size = "md", ...props }) => {
+const RadioButton = ({ className, error = false, hint, id, label, labelVisible = true, name, size = "md", tag, tagBackground, variant = "default", ...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,
+        "data-variant": variant !== "default" ? variant : 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 })] }));
+    return (jsxs("div", { className: "coop-form-item", children: [jsxs("div", { className: "coop-radio-button-wrapper", children: [jsx("input", { ...componentProps }), label && (jsxs(FieldLabel, { htmlFor: id, isVisible: labelVisible, children: [jsx("span", { children: label }), " ", tag && (jsx(Tag, { background: tagBackground, size: "sm", children: tag }))] })), 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

@@ -19,8 +19,12 @@ export interface RadioButtonGroupProps extends FieldsetHTMLAttributes<HTMLFieldS
     label?: string;
     /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
     labelVisible?: boolean;
+    /** **(Optional)** Specify the RadioButtonGroup orientation. */
+    orientation?: "horizontal" | "vertical";
     /** **(Optional)** Specify the RadioButtonGroup size. */
     size?: StandardSizes;
+    /** **(Optional)** Specify the RadioButtonGroup variant. */
+    variant?: "default" | "boxed";
 }
-export declare const RadioButtonGroup: ({ children, className, error, hint, label, labelVisible, size, ...props }: RadioButtonGroupProps) => JSX.Element;
+export declare const RadioButtonGroup: ({ children, className, error, hint, label, labelVisible, orientation, size, variant, ...props }: RadioButtonGroupProps) => JSX.Element;
 export default RadioButtonGroup;

package/dist/components/RadioButton/RadioButtonGroup.js

@@ -3,17 +3,19 @@ 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 RadioButtonGroup = ({ children, className, error = false, hint, label, labelVisible = true, orientation = "vertical", size = "md", variant = "default", ...props }) => {
     const componentProps = {
         className: clsx("coop-fieldset", "coop-radio-button-group", className),
         "data-error": error ? "" : undefined,
+        "data-orientation": orientation !== "vertical" ? orientation : undefined,
         "data-size": size.length && size !== "md" ? size : undefined,
+        "data-variant": variant !== "default" ? variant : 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] }));
+    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 }), jsx("div", { className: "coop-radio-button-group-options", children: children })] }));
 };
 
 export { RadioButtonGroup, RadioButtonGroup as default };

package/dist/components/Tag/Tag.d.ts

@@ -12,6 +12,8 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
     className?: string;
     /** **(Optional)** Specify the URL that the Tag component will link to when clicked. */
     href?: string;
+    /** **(Optional)** Specify the Tag size. */
+    size?: "sm" | "md";
 }
-export declare const Tag: ({ as, background, children, className, href, ...props }: TagProps) => JSX.Element;
+export declare const Tag: ({ as, background, children, className, href, size, ...props }: TagProps) => JSX.Element;
 export default Tag;

package/dist/components/Tag/Tag.js

@@ -2,10 +2,11 @@ import { clsx } from '../../node_modules/clsx/dist/clsx.js';
 import React from 'react';
 import { bgPropToClass } from '../../utils/index.js';
 
-const Tag = ({ as, background = "tint-grey", children, className, href, ...props }) => {
+const Tag = ({ as, background = "tint-grey", children, className, href, size = "md", ...props }) => {
     let element = href ? "a" : "span";
     const componentProps = {
         className: clsx("coop-tag", bgPropToClass(background, className), className),
+        "data-size": size.length && size !== "md" ? size : undefined,
         href,
         ...props,
     };

package/dist/components/Tag/index.js

@@ -0,0 +1,5 @@
+import { Tag } from './Tag.js';
+
+
+
+export { Tag, Tag as default };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -56,11 +56,11 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
-    "@playwright/test": "^1.55.0",
-    "@storybook/addon-a11y": "^9.1.5",
-    "@storybook/addon-docs": "^9.1.5",
-    "@storybook/addon-onboarding": "^9.1.5",
-    "@storybook/react-vite": "^9.1.5",
+    "@playwright/test": "^1.55.1",
+    "@storybook/addon-a11y": "^9.1.8",
+    "@storybook/addon-docs": "^9.1.8",
+    "@storybook/addon-onboarding": "^9.1.8",
+    "@storybook/react-vite": "^9.1.8",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@types/react": "^19.1.13",
@@ -69,7 +69,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "serve": "^14.2.5",
-    "storybook": "^9.1.5"
+    "storybook": "^9.1.8"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",
@@ -80,7 +80,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.31.1"
+    "@coopdigital/styles": "^0.32.0"
   },
-  "gitHead": "a88bc2694b91f0c180f02d39786a1323e6632254"
+  "gitHead": "07c3e26f63d0b276cd48f392ec61241f7db7fe84"
 }

package/src/components/Card/Card.tsx

@@ -39,8 +39,8 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   label?: string
   /** **(Optional)** Specify the background color of the Card label. */
   labelBackground?: Lights
-  /** **(Optional)** Specify the layout of the Card. */
-  layout?: "vertical" | "horizontal"
+  /** **(Optional)** Specify the orientation of the Card. */
+  orientation?: "vertical" | "horizontal"
 }
 
 function getCardLinkElement(as: CardProps["as"], href?: string) {
@@ -74,7 +74,7 @@ export const Card = ({
   imagePosition = "left",
   label = "",
   labelBackground,
-  layout = "vertical",
+  orientation = "vertical",
   ...props
 }: CardProps): JSX.Element => {
   const linkElement = getCardLinkElement(as, href)
@@ -88,7 +88,7 @@ export const Card = ({
     className: clsx("coop-card", background && bgPropToClass(background, className), className),
     "data-badge-pos": badgePosition,
     "data-image-pos": imagePosition,
-    "data-layout": layout !== "vertical" ? layout : undefined,
+    "data-orientation": orientation !== "vertical" ? orientation : undefined,
     ...props,
   }
 

package/src/components/Checkbox/CheckboxGroup.tsx

@@ -25,6 +25,8 @@ export interface CheckboxGroupProps extends FieldsetHTMLAttributes<HTMLFieldSetE
   label?: string
   /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
   labelVisible?: boolean
+  /** **(Optional)** Specify the CheckboxGroup orientation. */
+  orientation?: "horizontal" | "vertical"
   /** **(Optional)** Specify the CheckboxGroup size. */
   size?: StandardSizes
 }
@@ -36,12 +38,14 @@ export const CheckboxGroup = ({
   hint,
   label,
   labelVisible = true,
+  orientation = "vertical",
   size = "md",
   ...props
 }: CheckboxGroupProps): JSX.Element => {
   const componentProps = {
     className: clsx("coop-fieldset", "coop-checkbox-group", className),
     "data-error": error ? "" : undefined,
+    "data-orientation": orientation !== "vertical" ? orientation : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
     ...props,
   }
@@ -55,7 +59,7 @@ export const CheckboxGroup = ({
       {label && <legend {...legendProps}>{label}</legend>}
       {hint && <FieldHint>{hint}</FieldHint>}
       {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
-      {children}
+      <div className="coop-checkbox-group-options">{children}</div>
     </fieldset>
   )
 }

package/src/components/RadioButton/RadioButton.tsx

@@ -5,6 +5,7 @@ import { FormFieldError, StandardSizes } from "src/types"
 import { FieldError } from "../FieldError"
 import { FieldHint } from "../FieldHint"
 import { FieldLabel } from "../FieldLabel"
+import Tag, { TagProps } from "../Tag"
 
 export interface RadioButtonProps
   extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
@@ -32,6 +33,12 @@ export interface RadioButtonProps
   name: string
   /** **(Optional)** Specify the RadioButton size. */
   size?: StandardSizes
+  /** **(Optional)** Specify the RadioButton tag text. */
+  tag?: string
+  /** **(Optional)** Specify the RadioButton tag background color. */
+  tagBackground?: TagProps["background"]
+  /** **(Optional)** Specify the RadioButton variant. */
+  variant?: "default" | "boxed"
 }
 
 export const RadioButton = ({
@@ -43,6 +50,9 @@ export const RadioButton = ({
   labelVisible = true,
   name,
   size = "md",
+  tag,
+  tagBackground,
+  variant = "default",
   ...props
 }: RadioButtonProps): JSX.Element => {
   const internalId = useId()
@@ -53,6 +63,7 @@ export const RadioButton = ({
     className: clsx("coop-radio-button", className),
     "data-error": error ? "" : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
+    "data-variant": variant !== "default" ? variant : undefined,
     id,
     name,
     type: "radio",
@@ -66,7 +77,12 @@ export const RadioButton = ({
 
         {label && (
           <FieldLabel htmlFor={id} isVisible={labelVisible}>
-            {label}
+            <span>{label}</span>{" "}
+            {tag && (
+              <Tag background={tagBackground} size="sm">
+                {tag}
+              </Tag>
+            )}
           </FieldLabel>
         )}
         {hint && <FieldHint>{hint}</FieldHint>}

package/src/components/RadioButton/RadioButtonGroup.tsx

@@ -25,8 +25,12 @@ export interface RadioButtonGroupProps extends FieldsetHTMLAttributes<HTMLFieldS
   label?: string
   /** **(Optional)** Specify whether the label should be visible to humans or screen readers. */
   labelVisible?: boolean
+  /** **(Optional)** Specify the RadioButtonGroup orientation. */
+  orientation?: "horizontal" | "vertical"
   /** **(Optional)** Specify the RadioButtonGroup size. */
   size?: StandardSizes
+  /** **(Optional)** Specify the RadioButtonGroup variant. */
+  variant?: "default" | "boxed"
 }
 
 export const RadioButtonGroup = ({
@@ -36,13 +40,17 @@ export const RadioButtonGroup = ({
   hint,
   label,
   labelVisible = true,
+  orientation = "vertical",
   size = "md",
+  variant = "default",
   ...props
 }: RadioButtonGroupProps): JSX.Element => {
   const componentProps = {
     className: clsx("coop-fieldset", "coop-radio-button-group", className),
     "data-error": error ? "" : undefined,
+    "data-orientation": orientation !== "vertical" ? orientation : undefined,
     "data-size": size.length && size !== "md" ? size : undefined,
+    "data-variant": variant !== "default" ? variant : undefined,
     ...props,
   }
 
@@ -55,7 +63,7 @@ export const RadioButtonGroup = ({
       {label && <legend {...legendProps}>{label}</legend>}
       {hint && <FieldHint>{hint}</FieldHint>}
       {typeof error === "object" && error?.message && <FieldError>{error.message}</FieldError>}
-      {children}
+      <div className="coop-radio-button-group-options">{children}</div>
     </fieldset>
   )
 }

package/src/components/Tag/Tag.tsx

@@ -19,6 +19,8 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
   className?: string
   /** **(Optional)** Specify the URL that the Tag component will link to when clicked. */
   href?: string
+  /** **(Optional)** Specify the Tag size. */
+  size?: "sm" | "md"
 }
 
 export const Tag = ({
@@ -27,12 +29,15 @@ export const Tag = ({
   children,
   className,
   href,
+  size = "md",
   ...props
 }: TagProps): JSX.Element => {
   let element: TagProps["as"] = href ? "a" : "span"
   const componentProps = {
     className: clsx("coop-tag", bgPropToClass(background, className), className),
+    "data-size": size.length && size !== "md" ? size : undefined,
     href,
+
     ...props,
   }
   if (as) {