@coopdigital/react 1.16.1 → 1.17.0

package/dist/components/Prose/Prose.d.ts

@@ -0,0 +1,28 @@
+import { StandardSizes } from "../../types/index.js";
+import { HTMLAttributes, JSX, ReactNode, Ref } from "react";
+//#region src/components/Prose/Prose.d.ts
+interface ProseProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(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 if the Prose container should stretch to 100% width.
+   *
+   * If this not set, the container will be 100% width up to a maximum of 864px / 54rem */
+  full?: boolean;
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>;
+  /** **(Optional)** Specify font size behaviour. When set to `lg`, body copy will increase to 20px on larger screens.
+   *
+   * Default: `md`
+   */
+  size?: "md" | "lg";
+  /** **(Optional)** Specify the Prose spacing.
+   *
+   * Default: `md`
+   */
+  spacing?: StandardSizes;
+}
+declare const Prose: ({ children, className, full, ref, size, spacing, ...props }: ProseProps) => JSX.Element;
+//#endregion
+export { Prose, Prose as default, ProseProps };

package/dist/components/Prose/Prose.js

@@ -0,0 +1,16 @@
+import clsx from "clsx";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Prose/Prose.tsx
+const Prose = ({ children, className, full, ref, size, spacing, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx("coop-prose ", className),
+		"data-full": full ?? void 0,
+		"data-size": size ?? void 0,
+		"data-spacing": spacing ?? void 0,
+		...props,
+		ref,
+		children
+	});
+};
+//#endregion
+export { Prose, Prose as default };

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

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

package/dist/components/Prose/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.16.1",
+  "version": "1.17.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -65,11 +65,11 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.12.1",
     "@playwright/test": "^1.62.1",
-    "@storybook/addon-a11y": "^10.5.5",
-    "@storybook/addon-docs": "^10.5.5",
-    "@storybook/addon-onboarding": "^10.5.5",
-    "@storybook/react-vite": "^10.5.5",
-    "@testing-library/jest-dom": "^7.0.0",
+    "@storybook/addon-a11y": "^10.5.7",
+    "@storybook/addon-docs": "^10.5.7",
+    "@storybook/addon-onboarding": "^10.5.7",
+    "@storybook/react-vite": "^10.5.7",
+    "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.18",
     "@types/react-dom": "^19.2.4",
@@ -78,7 +78,7 @@
     "react-dom": "^19.2.8",
     "resize-observer-polyfill": "^1.5.1",
     "serve": "^14.2.6",
-    "storybook": "^10.5.5",
+    "storybook": "^10.5.7",
     "storybook-addon-tag-badges": "^3.1.0"
   },
   "peerDependencies": {
@@ -102,12 +102,12 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.12.1",
+    "@coopdigital/styles": "^1.12.2",
     "@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": "f55d477f98dd57a88d7527a208b33abbf8be3ef8"
+  "gitHead": "05cd33769f67dfa31c83096a5386c1817e9ab850"
 }

package/src/components/Prose/Prose.tsx

@@ -0,0 +1,54 @@
+import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
+
+import clsx from "clsx"
+
+import { StandardSizes } from "../../types"
+
+export interface ProseProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(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 if the Prose container should stretch to 100% width.
+   *
+   * If this not set, the container will be 100% width up to a maximum of 864px / 54rem */
+  full?: boolean
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDivElement>
+  /** **(Optional)** Specify font size behaviour. When set to `lg`, body copy will increase to 20px on larger screens.
+   *
+   * Default: `md`
+   */
+  size?: "md" | "lg"
+  /** **(Optional)** Specify the Prose spacing.
+   *
+   * Default: `md`
+   */
+  spacing?: StandardSizes
+}
+
+export const Prose = ({
+  children,
+  className,
+  full,
+  ref,
+  size,
+  spacing,
+  ...props
+}: ProseProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-prose ", className),
+    "data-full": full ?? undefined,
+    "data-size": size ?? undefined,
+    "data-spacing": spacing ?? undefined,
+    ...props,
+  }
+
+  return (
+    <div {...componentProps} ref={ref}>
+      {children}
+    </div>
+  )
+}
+
+export default Prose

package/src/components/Prose/index.ts

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