@coopdigital/react 1.23.0 → 1.25.0

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

@@ -10,7 +10,7 @@ export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>;
   /** Specify the component variant. */
-  variant?: "black" | "default";
+  variant?: "black" | "grey" | "default";
 }
 interface AlertBannerHeadingProps extends HTMLAttributes<HTMLHeadingElement> {
   /** Content inside the component. */

package/dist/components/Fieldset/Fieldset.d.ts

@@ -1,4 +1,3 @@
-import { StandardSizes } from "../../types/index.js";
 import { ErrorProps } from "../FieldMarkers/Error.js";
 import { HintProps } from "../FieldMarkers/Hint.js";
 import { LegendProps } from "../FieldMarkers/Legend.js";
@@ -19,11 +18,9 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
   hideErrorBar?: boolean;
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLFieldSetElement>;
-  /** Specify the size of the component. Applies to all descendants. */
-  size?: StandardSizes;
 }
 declare const Fieldset: {
-  ({ children, className, disabled, error, hideErrorBar, ref, size, ...props }: FieldsetProps): JSX.Element;
+  ({ children, className, disabled, error, hideErrorBar, ref, ...props }: FieldsetProps): JSX.Element;
   slot: {
     name: string;
   };
@@ -34,7 +31,7 @@ declare const Fieldset: {
     };
   };
   Fields: {
-    ({ boxed, children, className, orientation, ...props }: FieldsetFieldsProps): JSX.Element;
+    ({ children, className, orientation, ...props }: FieldsetFieldsProps): JSX.Element;
     slot: {
       name: string;
     };
@@ -53,8 +50,6 @@ declare const Fieldset: {
   };
 };
 interface FieldsetFieldsProps extends HTMLAttributes<HTMLDivElement> {
-  /** Specify whether all descendant Fields should render inside a box. */
-  boxed?: boolean;
   /** Content inside the component. */
   children?: React.ReactNode;
   /** Specify additional CSS classes. */
@@ -63,7 +58,7 @@ interface FieldsetFieldsProps extends HTMLAttributes<HTMLDivElement> {
   orientation?: "horizontal" | "vertical";
 }
 declare const FieldsetFields: {
-  ({ boxed, children, className, orientation, ...props }: FieldsetFieldsProps): JSX.Element;
+  ({ children, className, orientation, ...props }: FieldsetFieldsProps): JSX.Element;
   slot: {
     name: string;
   };

package/dist/components/Fieldset/Fieldset.js

@@ -4,13 +4,12 @@ import { Legend } from "../FieldMarkers/Legend.js";
 import clsx from "clsx";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/Fieldset/Fieldset.tsx
-const Fieldset = ({ children, className, disabled, error = false, hideErrorBar = false, ref, size, ...props }) => {
+const Fieldset = ({ children, className, disabled, error = false, hideErrorBar = false, ref, ...props }) => {
 	const componentProps = {
 		"aria-disabled": disabled,
 		className: clsx("coop-fieldset", className),
 		"data-error": error || void 0,
 		"data-hide-error": hideErrorBar || void 0,
-		"data-size": size ?? void 0,
 		disabled,
 		...props
 	};
@@ -20,10 +19,9 @@ const Fieldset = ({ children, className, disabled, error = false, hideErrorBar =
 		children
 	});
 };
-const FieldsetFields = ({ boxed = false, children, className, orientation = "vertical", ...props }) => {
+const FieldsetFields = ({ children, className, orientation = "vertical", ...props }) => {
 	const componentProps = {
 		className: clsx("coop-fieldset-fields", className),
-		"data-boxed": boxed || void 0,
 		"data-orientation": orientation !== "vertical" ? orientation : void 0,
 		...props
 	};

package/dist/components/Section/Section.d.ts

@@ -0,0 +1,18 @@
+import React, { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+//#region src/components/Section/Section.d.ts
+export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
+  /** Specify a custom element for the component
+   *
+   * Default: `<section>`
+   */
+  as?: React.FC<any> | string;
+  /** **(Optional)** Content inside the component. */
+  children?: ReactNode;
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>;
+}
+export declare const Section: ({ as, children, className, ref, ...props }: SectionProps) => JSX.Element;
+//#endregion
+export { Section as default };

package/dist/components/Section/Section.js

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import React from "react";
+//#region src/components/Section/Section.tsx
+const Section = ({ as, children, className, ref, ...props }) => {
+	const componentProps = {
+		className: clsx("coop-section", className),
+		...props
+	};
+	const element = as ?? "section";
+	return React.createElement(element, {
+		...componentProps,
+		ref
+	}, children);
+};
+//#endregion
+export { Section, Section as default };

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

@@ -0,0 +1,2 @@
+import { Section, SectionProps } from "./Section.js";
+export { Section, Section as default, SectionProps };

package/dist/components/Section/index.js

@@ -0,0 +1,5 @@
+import { Section } from "./Section.js";
+//#region src/components/Section/index.ts
+var Section_default = Section;
+//#endregion
+export { Section, Section_default as default };

package/dist/components/Wrapper/Wrapper.d.ts

@@ -0,0 +1,18 @@
+import React, { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+//#region src/components/Wrapper/Wrapper.d.ts
+export interface WrapperProps extends HTMLAttributes<HTMLDivElement> {
+  /** Specify a custom element for the component
+   *
+   * Default: `<div>`
+   */
+  as?: React.FC<any> | string;
+  /** **(Optional)** Content inside the component. */
+  children?: ReactNode;
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>;
+}
+export declare const Wrapper: ({ as, children, className, ref, ...props }: WrapperProps) => JSX.Element;
+//#endregion
+export { Wrapper as default };

package/dist/components/Wrapper/Wrapper.js

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import React from "react";
+//#region src/components/Wrapper/Wrapper.tsx
+const Wrapper = ({ as, children, className, ref, ...props }) => {
+	const componentProps = {
+		className: clsx("coop-wrap", className),
+		...props
+	};
+	const element = as ?? "div";
+	return React.createElement(element, {
+		...componentProps,
+		ref
+	}, children);
+};
+//#endregion
+export { Wrapper, Wrapper as default };

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

@@ -0,0 +1,2 @@
+import { Wrapper, WrapperProps } from "./Wrapper.js";
+export { Wrapper, Wrapper as default, WrapperProps };

package/dist/components/Wrapper/index.js

@@ -0,0 +1,5 @@
+import { Wrapper } from "./Wrapper.js";
+//#region src/components/Wrapper/index.ts
+var Wrapper_default = Wrapper;
+//#endregion
+export { Wrapper, Wrapper_default as default };

package/dist/index.d.ts

@@ -27,6 +27,8 @@ import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, Pop
 import { Radio, RadioProps } from "./components/Radio/Radio.js";
 import { RootSVG } from "./components/RootSVG/RootSVG.js";
 import { Searchbox, SearchboxButton, SearchboxInput, SearchboxProps } from "./components/Searchbox/Searchbox.js";
+import { Section, SectionProps } from "./components/Section/Section.js";
+import "./components/Section/index.js";
 import { Select, SelectOption, SelectOptionGroup, SelectProps } from "./components/Select/Select.js";
 import { Signpost, SignpostProps } from "./components/Signpost/Signpost.js";
 import { SkipNav, SkipNavProps } from "./components/SkipNav/SkipNav.js";
@@ -34,4 +36,6 @@ import { Squircle, SquircleProps, SquircleSvgProps } from "./components/Squircle
 import { Tag, TagProps } from "./components/Tag/Tag.js";
 import { Textarea, TextareaProps } from "./components/Textarea/Textarea.js";
 import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps } from "./components/ValidationSummary/ValidationSummary.js";
-export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorProps, Box, BoxProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, Combobox, ComboboxControlsProps, ComboboxInputProps, ComboboxOptionsProps, ComboboxProps, DatePicker, DatePickerProps, type DateType, type DateTypeStr, Dialog, DialogBody, DialogHeader, DialogProps, Expandable, ExpandableContent, ExpandableProps, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps, Flourish, FlourishProps, Form, FormProps, Image, ImageProps, LoadingSpinner, LoadingSpinnerProps, Logo, LogoProps, PasswordInput, PasswordInputProps, Picture, PictureProps, Pill, PillBadge, PillProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger, Radio, RadioProps, RootSVG, Searchbox, SearchboxButton, SearchboxInput, SearchboxProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, SquircleSvgProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps };
+import { Wrapper, WrapperProps } from "./components/Wrapper/Wrapper.js";
+import "./components/Wrapper/index.js";
+export { AlertBanner, AlertBannerHeading, AlertBannerProps, Author, AuthorProps, Box, BoxProps, Button, ButtonProps, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, CardProps, Checkbox, CheckboxProps, Combobox, ComboboxControlsProps, ComboboxInputProps, ComboboxOptionsProps, ComboboxProps, DatePicker, DatePickerProps, type DateType, type DateTypeStr, Dialog, DialogBody, DialogHeader, DialogProps, Expandable, ExpandableContent, ExpandableProps, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, FieldsetProps, Flourish, FlourishProps, Form, FormProps, Image, ImageProps, LoadingSpinner, LoadingSpinnerProps, Logo, LogoProps, PasswordInput, PasswordInputProps, Picture, PictureProps, Pill, PillBadge, PillProps, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverProps, PopoverTrigger, Radio, RadioProps, RootSVG, Searchbox, SearchboxButton, SearchboxInput, SearchboxProps, Section, SectionProps, Select, SelectOption, SelectOptionGroup, SelectProps, Signpost, SignpostProps, SkipNav, SkipNavProps, Squircle, SquircleProps, SquircleSvgProps, Tag, TagProps, TextInput, TextInputProps, Textarea, TextareaProps, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, ValidationSummaryProps, Wrapper, WrapperProps };

package/dist/index.js

@@ -23,6 +23,7 @@ import { Pill, PillBadge } from "./components/Pill/Pill.js";
 import { Radio } from "./components/Radio/Radio.js";
 import { RootSVG } from "./components/RootSVG/RootSVG.js";
 import { Searchbox, SearchboxButton, SearchboxInput } from "./components/Searchbox/Searchbox.js";
+import { Section } from "./components/Section/Section.js";
 import { Select, SelectOption, SelectOptionGroup } from "./components/Select/Select.js";
 import { Signpost } from "./components/Signpost/Signpost.js";
 import { SkipNav } from "./components/SkipNav/SkipNav.js";
@@ -30,4 +31,5 @@ import { Squircle } from "./components/Squircle/Squircle.js";
 import { Tag } from "./components/Tag/Tag.js";
 import { Textarea } from "./components/Textarea/Textarea.js";
 import { ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt } from "./components/ValidationSummary/ValidationSummary.js";
-export { AlertBanner, AlertBannerHeading, Author, Box, Button, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, Checkbox, Combobox, DatePicker, Dialog, DialogBody, DialogHeader, Expandable, ExpandableContent, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, Flourish, Form, Image, LoadingSpinner, Logo, PasswordInput, Picture, Pill, PillBadge, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Radio, RootSVG, Searchbox, SearchboxButton, SearchboxInput, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt };
+import { Wrapper } from "./components/Wrapper/Wrapper.js";
+export { AlertBanner, AlertBannerHeading, Author, Box, Button, Card, CardBadge, CardContent, CardHeading, CardIcon, CardImage, CardLink, CardPicture, Checkbox, Combobox, DatePicker, Dialog, DialogBody, DialogHeader, Expandable, ExpandableContent, ExpandableSummary, Field, FieldError, FieldHint, FieldLabel, Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend, Flourish, Form, Image, LoadingSpinner, Logo, PasswordInput, Picture, Pill, PillBadge, Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger, Radio, RootSVG, Searchbox, SearchboxButton, SearchboxInput, Section, Select, SelectOption, SelectOptionGroup, Signpost, SkipNav, Squircle, Tag, TextInput, Textarea, ValidationSummary, ValidationSummaryErrors, ValidationSummaryHeading, ValidationSummaryPrompt, Wrapper };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.23.0",
+  "version": "1.25.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -71,6 +71,7 @@
     "@playwright/test": "^1.63.0",
     "@storybook/addon-a11y": "^10.6.0",
     "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-links": "^10.6.0",
     "@storybook/addon-onboarding": "^10.6.0",
     "@storybook/react-vite": "^10.6.0",
     "@testing-library/jest-dom": "^7.0.1",
@@ -106,7 +107,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.17.0",
+    "@coopdigital/styles": "^1.18.0",
     "@radix-ui/react-popover": "^1.1.23",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
@@ -115,5 +116,5 @@
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "c8458928ecfa27cda6cb6293952a31f68c00eed3"
+  "gitHead": "f6b4f40d340e6382403d2d69a399b0a913e658c8"
 }

package/src/components/AlertBanner/AlertBanner.tsx

@@ -12,7 +12,7 @@ export interface AlertBannerProps extends HTMLAttributes<HTMLDivElement> {
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLDivElement>
   /** Specify the component variant. */
-  variant?: "black" | "default"
+  variant?: "black" | "grey" | "default"
 }
 
 interface AlertBannerHeadingProps extends HTMLAttributes<HTMLHeadingElement> {

package/src/components/Fieldset/Fieldset.tsx

@@ -4,7 +4,6 @@ import { type FieldsetHTMLAttributes, HTMLAttributes, type JSX, Ref } from "reac
 import { Error as BaseError, type ErrorProps } from "@/components/FieldMarkers/Error"
 import { Hint as BaseHint, type HintProps } from "@/components/FieldMarkers/Hint"
 import { Legend as BaseLegend, type LegendProps } from "@/components/FieldMarkers/Legend"
-import { StandardSizes } from "@/types"
 
 export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElement> {
   /** Content inside the component.
@@ -21,8 +20,6 @@ export interface FieldsetProps extends FieldsetHTMLAttributes<HTMLFieldSetElemen
   hideErrorBar?: boolean
   /** Specify a custom React ref for this component. */
   ref?: Ref<HTMLFieldSetElement>
-  /** Specify the size of the component. Applies to all descendants. */
-  size?: StandardSizes
 }
 const Fieldset = ({
   children,
@@ -31,7 +28,6 @@ const Fieldset = ({
   error = false,
   hideErrorBar = false,
   ref,
-  size,
   ...props
 }: FieldsetProps): JSX.Element => {
   const componentProps = {
@@ -39,7 +35,6 @@ const Fieldset = ({
     className: clsx("coop-fieldset", className),
     "data-error": error || undefined,
     "data-hide-error": hideErrorBar || undefined,
-    "data-size": size ?? undefined,
     disabled,
     ...props,
   }
@@ -52,8 +47,6 @@ const Fieldset = ({
 }
 
 interface FieldsetFieldsProps extends HTMLAttributes<HTMLDivElement> {
-  /** Specify whether all descendant Fields should render inside a box. */
-  boxed?: boolean
   /** Content inside the component. */
   children?: React.ReactNode
   /** Specify additional CSS classes. */
@@ -63,7 +56,6 @@ interface FieldsetFieldsProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const FieldsetFields = ({
-  boxed = false,
   children,
   className,
   orientation = "vertical",
@@ -71,7 +63,6 @@ const FieldsetFields = ({
 }: FieldsetFieldsProps): JSX.Element => {
   const componentProps = {
     className: clsx("coop-fieldset-fields", className),
-    "data-boxed": boxed || undefined,
     "data-orientation": orientation !== "vertical" ? orientation : undefined,
     ...props,
   }

package/src/components/Section/Section.tsx

@@ -0,0 +1,31 @@
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
+
+import clsx from "clsx"
+import React from "react"
+
+export interface SectionProps extends HTMLAttributes<HTMLDivElement> {
+  /** Specify a custom element for the component
+   *
+   * Default: `<section>`
+   */
+  // oxlint-disable-next-line typescript/no-explicit-any
+  as?: React.FC<any> | string
+  /** **(Optional)** Content inside the component. */
+  children?: ReactNode
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
+}
+
+export const Section = ({ as, children, className, ref, ...props }: SectionProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-section", className),
+    ...props,
+  }
+  const element: SectionProps["as"] = as ?? "section"
+
+  return React.createElement(element, { ...componentProps, ref }, children)
+}
+
+export default Section

package/src/components/Section/index.ts

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

package/src/components/Wrapper/Wrapper.tsx

@@ -0,0 +1,32 @@
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
+
+import clsx from "clsx"
+import React from "react"
+
+export interface WrapperProps extends HTMLAttributes<HTMLDivElement> {
+  /** Specify a custom element for the component
+   *
+   * Default: `<div>`
+   */
+  // oxlint-disable-next-line typescript/no-explicit-any
+  as?: React.FC<any> | string
+  /** **(Optional)** Content inside the component. */
+  children?: ReactNode
+  /** **(Optional)** Specify additional CSS classes. */
+  className?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
+}
+
+export const Wrapper = ({ as, children, className, ref, ...props }: WrapperProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-wrap", className),
+    ...props,
+  }
+
+  const element: WrapperProps["as"] = as ?? "div"
+
+  return React.createElement(element, { ...componentProps, ref }, children)
+}
+
+export default Wrapper

package/src/components/Wrapper/index.ts

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

package/src/index.ts

@@ -22,6 +22,7 @@ export * from "./components/Popover/Popover"
 export * from "./components/Radio/Radio"
 export * from "./components/RootSVG/RootSVG"
 export * from "./components/Searchbox/Searchbox"
+export * from "./components/Section"
 export * from "./components/Select/Select"
 export * from "./components/Signpost/Signpost"
 export * from "./components/SkipNav/SkipNav"
@@ -30,3 +31,4 @@ export * from "./components/Tag/Tag"
 export * from "./components/Textarea/Textarea"
 export * from "./components/TextInput/TextInput"
 export * from "./components/ValidationSummary/ValidationSummary"
+export * from "./components/Wrapper"