@coopdigital/react 1.21.0 → 1.22.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.21.0",
+  "version": "1.22.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -65,21 +65,21 @@
   "description": "React components for the Experience Library design system",
   "devDependencies": {
     "@axe-core/playwright": "^4.13.0",
-    "@playwright/test": "^1.62.1",
-    "@storybook/addon-a11y": "^10.5.10",
-    "@storybook/addon-docs": "^10.5.10",
-    "@storybook/addon-onboarding": "^10.5.10",
-    "@storybook/react-vite": "^10.5.10",
+    "@playwright/test": "^1.63.0",
+    "@storybook/addon-a11y": "^10.6.0",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-onboarding": "^10.6.0",
+    "@storybook/react-vite": "^10.6.0",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
+    "@types/react-dom": "^19.2.7",
     "@whitespace/storybook-addon-html": "^9.0.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.6",
-    "storybook": "^10.5.10",
+    "storybook": "^10.6.0",
     "storybook-addon-tag-badges": "^3.1.0"
   },
   "peerDependencies": {
@@ -103,12 +103,12 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.15.0",
+    "@coopdigital/styles": "^1.16.0",
     "@radix-ui/react-popover": "^1.1.23",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "a54fd337dade28ed2d1e1f7d4d0e2cfeb7b90c9e"
+  "gitHead": "e4fc913bf11651d52c6dd58b6a95871a8645f384"
 }

package/src/components/Box/Box.tsx

@@ -0,0 +1,43 @@
+import type { ForwardRefExoticComponent, HTMLAttributes, JSX, ReactNode, Ref } from "react"
+
+import clsx from "clsx"
+import React from "react"
+
+import { StandardSizesWithNone } from "@/types"
+export interface BoxProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Specify a custom element to override default `div` */
+  // oxlint-disable-next-line typescript/no-explicit-any
+  as?: React.FC<any> | ForwardRefExoticComponent<any> | string
+  /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
+  children?: string | ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify the Box padding. */
+  padding?: StandardSizesWithNone
+  /** **(Optional)** Specify the Box border radius. */
+  radius?: StandardSizesWithNone
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
+}
+
+export const Box = ({
+  as,
+  children,
+  className,
+  padding,
+  radius,
+  ref,
+  ...props
+}: BoxProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-box", className),
+    "data-padding": padding ?? undefined,
+    "data-radius": radius ?? undefined,
+    ...props,
+  }
+  const element: BoxProps["as"] = as ?? "div"
+
+  return React.createElement(element, { ...componentProps, ref }, children)
+}
+
+export default Box

package/src/components/Box/index.ts

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

package/src/components/Flourish/Flourish.tsx

@@ -23,7 +23,7 @@ const Flourish = ({
   ...props
 }: FlourishProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-flourish ", className),
+    className: clsx("coop-flourish", className),
     fill: `var(--color-${fill})`,
     ...props,
   }

package/src/components/Form/Form.tsx

@@ -13,7 +13,7 @@ export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
 
 const Form = ({ children, className, ref, ...props }: FormProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-form ", className),
+    className: clsx("coop-form", className),
     ...props,
   }
 

package/src/components/LoadingSpinner/LoadingSpinner.tsx

@@ -23,7 +23,7 @@ export const LoadingSpinner = ({
   ...props
 }: LoadingSpinnerProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-loading-spinner ", className),
+    className: clsx("coop-loading-spinner", className),
     stroke,
     strokeWidth,
     ...props,

package/src/components/Prose/Prose.tsx

@@ -37,7 +37,7 @@ export const Prose = ({
   ...props
 }: ProseProps): JSX.Element => {
   const componentProps = {
-    className: clsx("coop-prose ", className),
+    className: clsx("coop-prose", className),
     "data-full": full ?? undefined,
     "data-size": size ?? undefined,
     "data-spacing": spacing ?? undefined,

package/src/index.ts

@@ -1,5 +1,6 @@
 export * from "./components/AlertBanner/AlertBanner"
 export * from "./components/Author/Author"
+export * from "./components/Box"
 export * from "./components/Button/Button"
 export * from "./components/Card/Card"
 export * from "./components/Checkbox/Checkbox"

package/src/types/index.ts

@@ -1,4 +1,5 @@
 export type StandardSizes = "sm" | "md" | "lg"
+export type StandardSizesWithNone = "none" | "sm" | "md" | "lg"
 
 // export type FormFieldError = { message?: string; type?: string } | boolean | null | undefined