@coopdigital/react 0.30.2 → 0.31.0

package/dist/components/Flourish/Flourish.d.ts

@@ -0,0 +1,12 @@
+import type { JSX, ReactNode, SVGProps } from "react";
+import { Darks, Lights } from "../../types/colors";
+export interface FlourishProps extends SVGProps<SVGSVGElement> {
+    /** Specify the text to be highlighted by the Flourish. */
+    children: string | ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify the Flourish color. */
+    fill?: Darks | Lights;
+}
+export declare const Flourish: ({ children, className, fill, ...props }: FlourishProps) => JSX.Element;
+export default Flourish;

package/dist/components/Flourish/Flourish.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+
+const Flourish = ({ children, className, fill = "light-yellow", ...props }) => {
+    const componentProps = {
+        className: clsx("coop-flourish ", className),
+        fill: `var(--color-${fill})`,
+        ...props,
+    };
+    return (jsxs("span", { style: { position: "relative" }, children: [children, jsx("svg", { ...componentProps, height: "10", viewBox: "0 0 276 10", width: "276", children: jsx("path", { d: "M275.9 8.6c.1-1.6.2-1.8-.4-2.9.3-1-.3-1.2-1.8-1.1v-.3c.6-.4.2-.2 1.4-.1-.9-2.3-5.6-1.8-8.5-2.3C259 .5 246.3.7 237.4.5L185 .4l-33-.2-26.1-.2-67.4 1.2-44.3.5C10.7 2.1 1.5.4 0 3.3l1 .2L0 4v.5C8.2 7.9 26.6 7.2 35.6 7c5 0 13.5 1.6 16.5-.6C53.4 8 59.5 8 62 7.7l45 .1 42.8.3 30.7.3 44.2.6 27.8-.5 23 .8c.1-.8-.3-.5.5-.7ZM219 2.8v-.2l.8-.2h.4l.3.4H219Zm30-.1h1.2c-.8.4-.5.3-1.2 0Zm6.2.6.2-.4h.3l-.5.4Z" }) })] }));
+};
+
+export { Flourish, Flourish as default };

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

@@ -0,0 +1,4 @@
+import Flourish from "./Flourish";
+export default Flourish;
+export { Flourish };
+export * from "./Flourish";

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from "./components/Author";
 export * from "./components/Button";
 export * from "./components/Card";
 export * from "./components/Expandable";
+export * from "./components/Flourish";
 export * from "./components/Image";
 export * from "./components/Pill";
 export * from "./components/RootSVG";

package/dist/index.js

@@ -3,6 +3,7 @@ export { Author } from './components/Author/Author.js';
 export { Button } from './components/Button/Button.js';
 export { Card } from './components/Card/Card.js';
 export { Expandable } from './components/Expandable/Expandable.js';
+export { Flourish } from './components/Flourish/Flourish.js';
 export { Image } from './components/Image/Image.js';
 export { Pill } from './components/Pill/Pill.js';
 export { RootSVG } from './components/RootSVG/RootSVG.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.30.2",
+  "version": "0.31.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -57,19 +57,19 @@
   "devDependencies": {
     "@axe-core/playwright": "^4.10.2",
     "@playwright/test": "^1.54.2",
-    "@storybook/addon-a11y": "^9.1.1",
-    "@storybook/addon-docs": "^9.1.1",
-    "@storybook/addon-onboarding": "^9.1.1",
-    "@storybook/react-vite": "^9.1.1",
-    "@testing-library/jest-dom": "^6.6.4",
+    "@storybook/addon-a11y": "^9.1.2",
+    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-onboarding": "^9.1.2",
+    "@storybook/react-vite": "^9.1.2",
+    "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.1.9",
+    "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "clsx": "^2.1.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "serve": "^14.2.4",
-    "storybook": "^9.1.1"
+    "storybook": "^9.1.2"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",
@@ -80,7 +80,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.26.1"
+    "@coopdigital/styles": "^0.27.0"
   },
-  "gitHead": "0893d2c258c7fd02aa00a3340edcf1f1aec81a0a"
+  "gitHead": "fce3f35446116384dabdd8553404d9e933261264"
 }

package/src/components/Flourish/Flourish.tsx

@@ -0,0 +1,38 @@
+import type { JSX, ReactNode, SVGProps } from "react"
+
+import clsx from "clsx"
+
+import { Darks, Lights } from "../../types/colors"
+
+export interface FlourishProps extends SVGProps<SVGSVGElement> {
+  /** Specify the text to be highlighted by the Flourish. */
+  children: string | ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify the Flourish color. */
+  fill?: Darks | Lights
+}
+
+export const Flourish = ({
+  children,
+  className,
+  fill = "light-yellow",
+  ...props
+}: FlourishProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-flourish ", className),
+    fill: `var(--color-${fill})`,
+    ...props,
+  }
+
+  return (
+    <span style={{ position: "relative" }}>
+      {children}
+      <svg {...componentProps} height="10" viewBox="0 0 276 10" width="276">
+        <path d="M275.9 8.6c.1-1.6.2-1.8-.4-2.9.3-1-.3-1.2-1.8-1.1v-.3c.6-.4.2-.2 1.4-.1-.9-2.3-5.6-1.8-8.5-2.3C259 .5 246.3.7 237.4.5L185 .4l-33-.2-26.1-.2-67.4 1.2-44.3.5C10.7 2.1 1.5.4 0 3.3l1 .2L0 4v.5C8.2 7.9 26.6 7.2 35.6 7c5 0 13.5 1.6 16.5-.6C53.4 8 59.5 8 62 7.7l45 .1 42.8.3 30.7.3 44.2.6 27.8-.5 23 .8c.1-.8-.3-.5.5-.7ZM219 2.8v-.2l.8-.2h.4l.3.4H219Zm30-.1h1.2c-.8.4-.5.3-1.2 0Zm6.2.6.2-.4h.3l-.5.4Z" />
+      </svg>
+    </span>
+  )
+}
+
+export default Flourish

package/src/components/Flourish/index.ts

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

package/src/index.ts

@@ -3,6 +3,7 @@ export * from "./components/Author"
 export * from "./components/Button"
 export * from "./components/Card"
 export * from "./components/Expandable"
+export * from "./components/Flourish"
 export * from "./components/Image"
 export * from "./components/Pill"
 export * from "./components/RootSVG"