@coopdigital/react 0.30.2 → 0.32.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/components/Input/Input.d.ts

@@ -0,0 +1,32 @@
+import type { InputHTMLAttributes, JSX } from "react";
+import { StandardSizes } from "../../../src/types";
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify the Input error message. */
+    error?: {
+        message: string;
+        type?: string;
+    } | false | null | undefined;
+    /** **(Optional)** Specify the Input hint.
+     *
+     * This text is rendered under the label to provide further guidance for users.
+     */
+    hint?: string;
+    /** **(Optional)** Specify the Input id. Will be auto-generated if not set. */
+    id?: string;
+    /** **(Optional)** Specify the Input label.
+     *
+     * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
+    label?: string;
+    /** Specify the Input name. */
+    name: string;
+    /** **(Optional)** Specify the Input placeholder text. Do not use in place of a form label. */
+    placeholder?: string;
+    /** **(Optional)** Specify the Input size. */
+    size?: StandardSizes;
+    /** **(Optional)** Specify the Input type. */
+    type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url";
+}
+export declare const Input: ({ "aria-placeholder": ariaPlaceholder, className, error, hint, id, label, name, placeholder, size, type, ...props }: InputProps) => JSX.Element;
+export default Input;

package/dist/components/Input/Input.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from '../../node_modules/clsx/dist/clsx.js';
+import { useId } from 'react';
+
+const Input = ({ "aria-placeholder": ariaPlaceholder, className, error = false, hint, id, label, name, placeholder, size = "md", type = "text", ...props }) => {
+    var _a;
+    const internalId = useId();
+    id = id !== null && id !== void 0 ? id : internalId;
+    const componentProps = {
+        "aria-placeholder": (_a = placeholder !== null && placeholder !== void 0 ? placeholder : ariaPlaceholder) !== null && _a !== void 0 ? _a : undefined,
+        className: clsx("coop-input", className),
+        "data-error": error ? "" : undefined,
+        "data-size": size.length && size !== "md" ? size : undefined,
+        id,
+        name,
+        placeholder,
+        type,
+        ...props,
+    };
+    return (jsxs("div", { className: "coop-field", children: [label && (jsx("label", { className: "coop-form--label", htmlFor: id, children: label })), hint && jsx("p", { className: "coop-form--hint", children: hint }), error && jsx("span", { className: "coop-form--error", children: error.message }), jsx("input", { ...componentProps })] }));
+};
+
+export { Input, Input as default };

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

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

package/dist/components/Input/index.js

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

package/dist/components/RootSVG/RootSVG.js

@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 
 const RootSVG = () => {
     return (jsx("svg", { height: "0", style: {
-            clip: "rect(0,0,0,0)}",
+            clip: "rect(0,0,0,0)",
             clipPath: "inset(50%)",
             overflow: "hidden",
             position: "absolute",

package/dist/components/SearchBox/SearchBox.d.ts

@@ -1,32 +1,32 @@
-import React, { HTMLAttributes } from "react";
-import { type JSX } from "react";
-import { StandardSizes } from "src/types";
+import type { InputHTMLAttributes, JSX } from "react";
+import React from "react";
+import { StandardSizes } from "../../../src/types";
 import { type ButtonProps } from "../Button";
-export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
+export interface SearchBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
     /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
     action?: string;
-    /** **(Optional)** Specify whether or not to enable autocomplete on the input field. Default: `off`. */
-    autoComplete?: "off" | "on";
     /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */
     button?: Pick<ButtonProps, "className" | "loadingText"> & {
         label?: React.ReactNode;
     };
     /** **(Optional)** Specify additional CSS classes to be applied to the component. */
     className?: string;
+    /** **(Optional)** Specify the Input id. Will be auto-generated if not set. */
+    id?: string;
     /** Specify the label displayed above the search field. Hidden by default, but visible to screen readers. */
     label: string;
     /** **(Optional)** Specify whether the label should be visible to humans or screenreaders. */
     labelVisible?: boolean;
-    /** **(Optional)** Specify the name of the input element, also used as the URL search parameter. Defaults to `query`. */
+    /** **(Optional)** Specify the Input name, also used as the URL search parameter. Defaults to `query`. */
     name?: string;
     /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the SearchBox will be in a pending state until the promise is resolved. */
     onSubmit?: React.FormEventHandler<HTMLElement> | undefined;
-    /** **(Optional)** Specify placeholder text for the search field. Do not in place of a form label. */
+    /** **(Optional)** Specify the Input placeholder text Do not use in place of a form label. */
     placeholder?: string;
     /** **(Optional)** Specify the SearchBox size. */
     size?: StandardSizes;
     /** **(Optional)** Specify the SearchBox variant. */
     variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost";
 }
-export declare const SearchBox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, label, labelVisible, name, onSubmit, placeholder, size, variant, ...props }: SearchBoxProps) => JSX.Element;
+export declare const SearchBox: ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize, autoComplete, button, className, id, label, labelVisible, name, onSubmit, placeholder, size, variant, ...props }: SearchBoxProps) => JSX.Element;
 export default SearchBox;

package/dist/components/SearchBox/SearchBox.js

@@ -2,17 +2,20 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from '../../node_modules/clsx/dist/clsx.js';
-import React, { useState, useCallback, useId } from 'react';
+import React, { useState, useId, useCallback } from 'react';
 import { Button } from '../Button/Button.js';
 import { SearchIcon } from '../Icon/SearchIcon.js';
+import { Input } from '../Input/Input.js';
 
 const defaultButtonProps = {
     label: React.createElement(SearchIcon, { alt: "Search", stroke: "currentColor", strokeWidth: 2 }),
     loadingText: "",
 };
-const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, label, labelVisible = false, name = "query", onSubmit, placeholder, size = "md", variant = "green", ...props }) => {
+const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, id, label, labelVisible = false, name = "query", onSubmit, placeholder, size = "md", variant = "green", ...props }) => {
     var _a, _b;
     const [isPending, setIsPending] = useState(false);
+    const internalId = useId();
+    id = id !== null && id !== void 0 ? id : internalId;
     const handleSubmit = useCallback(async (event) => {
         event.preventDefault();
         if (isPending || !onSubmit)
@@ -25,11 +28,10 @@ const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
             setIsPending(false);
         }
     }, [onSubmit, isPending]);
-    const id = useId();
     const formProps = {
         action: action !== null && action !== void 0 ? action : undefined,
         className: clsx("coop-search-box", className),
-        "data-size": size.length && size !== "md" ? size : undefined,
+        //"data-size": size && size !== "md" ? size : undefined,
         "data-variant": variant.length && variant !== "green" ? variant : undefined,
         onSubmit: onSubmit ? handleSubmit : undefined,
     };
@@ -47,10 +49,11 @@ const SearchBox = ({ action, "aria-placeholder": ariaPlaceholder, autoCapitalize
         id,
         name,
         placeholder,
+        size: size,
         type: "search",
         ...props,
     };
-    return (jsxs("form", { ...formProps, children: [jsx("label", { className: labelVisible ? "" : "sr-only", htmlFor: id, children: label }), jsxs("div", { className: "coop-search-box--inner", children: [jsx("input", { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
+    return (jsxs("form", { ...formProps, children: [jsx("label", { className: labelVisible ? "" : "sr-only", htmlFor: id, children: label }), jsxs("div", { className: "coop-search-box--inner", children: [jsx(Input, { ...inputProps }), jsx(Button, { ...buttonProps, children: button.label })] })] }));
 };
 
 export { SearchBox, SearchBox as default };

package/dist/index.d.ts

@@ -3,7 +3,9 @@ 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/Input";
 export * from "./components/Pill";
 export * from "./components/RootSVG";
 export * from "./components/SearchBox";

package/dist/index.js

@@ -3,7 +3,9 @@ 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 { Input } from './components/Input/Input.js';
 export { Pill } from './components/Pill/Pill.js';
 export { RootSVG } from './components/RootSVG/RootSVG.js';
 export { SearchBox } from './components/SearchBox/SearchBox.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.30.2",
+  "version": "0.32.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -56,20 +56,20 @@
   "description": "",
   "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",
+    "@playwright/test": "^1.55.0",
+    "@storybook/addon-a11y": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-onboarding": "^9.1.3",
+    "@storybook/react-vite": "^9.1.3",
+    "@testing-library/jest-dom": "^6.8.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.3"
   },
   "peerDependencies": {
     "clsx": "^2.1.1",
@@ -80,7 +80,7 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^0.26.1"
+    "@coopdigital/styles": "^0.28.0"
   },
-  "gitHead": "0893d2c258c7fd02aa00a3340edcf1f1aec81a0a"
+  "gitHead": "dfdb5d4d591c47722d4969c5221a3e389d8a4fab"
 }

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/components/Input/Input.tsx

@@ -0,0 +1,77 @@
+import type { InputHTMLAttributes, JSX } from "react"
+
+import clsx from "clsx"
+import { useId } from "react"
+
+import { StandardSizes } from "../../../src/types"
+
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify the Input error message. */
+  error?: { message: string; type?: string } | false | null | undefined // TODO: Extract this into a FieldError type
+  /** **(Optional)** Specify the Input hint.
+   *
+   * This text is rendered under the label to provide further guidance for users.
+   */
+  hint?: string
+  /** **(Optional)** Specify the Input id. Will be auto-generated if not set. */
+  id?: string
+  /** **(Optional)** Specify the Input label.
+   *
+   * This property is optional in case you need to render your own label, but all form elements *must* provide a label. */
+  label?: string
+  /** Specify the Input name. */
+  name: string
+  /** **(Optional)** Specify the Input placeholder text. Do not use in place of a form label. */
+  placeholder?: string
+  /** **(Optional)** Specify the Input size. */
+  size?: StandardSizes
+  /** **(Optional)** Specify the Input type. */
+  type?: "text" | "email" | "number" | "password" | "search" | "tel" | "url"
+}
+
+export const Input = ({
+  "aria-placeholder": ariaPlaceholder,
+  className,
+  error = false,
+  hint,
+  id,
+  label,
+  name,
+  placeholder,
+  size = "md",
+  type = "text",
+  ...props
+}: InputProps): JSX.Element => {
+  const internalId = useId()
+
+  id = id ?? internalId
+
+  const componentProps = {
+    "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
+    className: clsx("coop-input", className),
+    "data-error": error ? "" : undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
+    id,
+    name,
+    placeholder,
+    type,
+    ...props,
+  }
+
+  return (
+    <div className="coop-field">
+      {label && (
+        <label className="coop-form--label" htmlFor={id}>
+          {label}
+        </label>
+      )}
+      {hint && <p className="coop-form--hint">{hint}</p>}
+      {error && <span className="coop-form--error">{error.message}</span>}
+      <input {...componentProps} />
+    </div>
+  )
+}
+
+export default Input

package/src/components/Input/index.ts

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

package/src/components/RootSVG/RootSVG.tsx

@@ -3,7 +3,7 @@ export const RootSVG = () => {
     <svg
       height="0"
       style={{
-        clip: "rect(0,0,0,0)}",
+        clip: "rect(0,0,0,0)",
         clipPath: "inset(50%)",
         overflow: "hidden",
         position: "absolute",

package/src/components/SearchBox/SearchBox.tsx

@@ -1,31 +1,34 @@
 "use client"
 
+import type { InputHTMLAttributes, JSX } from "react"
+
 import clsx from "clsx"
-import React, { HTMLAttributes, useCallback, useId, useState } from "react"
-import { type JSX } from "react"
-import { StandardSizes } from "src/types"
+import React, { useCallback, useId, useState } from "react"
 
+import { StandardSizes } from "../../../src/types"
 import { Button, type ButtonProps } from "../Button"
 import { SearchIcon } from "../Icon"
+import Input, { InputProps } from "../Input"
 
-export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
+export interface SearchBoxProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "type"> {
   /** **(Optional)** Specify a server endpoint to submit the form. Will be ignored if onSubmit is also set. */
   action?: string
-  /** **(Optional)** Specify whether or not to enable autocomplete on the input field. Default: `off`. */
-  autoComplete?: "off" | "on"
   /** **(Optional)** Specify props to forward to the Button element. Use `label` to set Button text. */
   button?: Pick<ButtonProps, "className" | "loadingText"> & { label?: React.ReactNode }
   /** **(Optional)** Specify additional CSS classes to be applied to the component. */
   className?: string
+  /** **(Optional)** Specify the Input id. Will be auto-generated if not set. */
+  id?: string
   /** Specify the label displayed above the search field. Hidden by default, but visible to screen readers. */
   label: string
   /** **(Optional)** Specify whether the label should be visible to humans or screenreaders. */
   labelVisible?: boolean
-  /** **(Optional)** Specify the name of the input element, also used as the URL search parameter. Defaults to `query`. */
+  /** **(Optional)** Specify the Input name, also used as the URL search parameter. Defaults to `query`. */
   name?: string
   /** **(Optional)** Callback to run when the form is submitted. If this is an async function, it will be awaited and the SearchBox will be in a pending state until the promise is resolved. */
   onSubmit?: React.FormEventHandler<HTMLElement> | undefined
-  /** **(Optional)** Specify placeholder text for the search field. Do not in place of a form label. */
+  /** **(Optional)** Specify the Input placeholder text Do not use in place of a form label. */
   placeholder?: string
   /** **(Optional)** Specify the SearchBox size. */
   size?: StandardSizes
@@ -53,6 +56,7 @@ export const SearchBox = ({
   autoComplete = "off",
   button = defaultButtonProps,
   className,
+  id,
   label,
   labelVisible = false,
   name = "query",
@@ -63,6 +67,9 @@ export const SearchBox = ({
   ...props
 }: SearchBoxProps): JSX.Element => {
   const [isPending, setIsPending] = useState(false)
+  const internalId = useId()
+
+  id = id ?? internalId
 
   const handleSubmit = useCallback(
     async (event: React.FormEvent<HTMLFormElement>) => {
@@ -81,12 +88,10 @@ export const SearchBox = ({
     [onSubmit, isPending]
   )
 
-  const id = useId()
-
   const formProps = {
     action: action ?? undefined,
     className: clsx("coop-search-box", className),
-    "data-size": size.length && size !== "md" ? size : undefined,
+    //"data-size": size && size !== "md" ? size : undefined,
     "data-variant": variant.length && variant !== "green" ? variant : undefined,
     onSubmit: onSubmit ? handleSubmit : undefined,
   }
@@ -106,7 +111,8 @@ export const SearchBox = ({
     id,
     name,
     placeholder,
-    type: "search",
+    size: size as keyof InputProps["size"],
+    type: "search" as keyof InputProps["type"],
     ...props,
   }
 
@@ -116,7 +122,7 @@ export const SearchBox = ({
         {label}
       </label>
       <div className="coop-search-box--inner">
-        <input {...inputProps}></input>
+        <Input {...inputProps} />
         <Button {...buttonProps}>{button.label}</Button>
       </div>
     </form>

package/src/index.ts

@@ -3,7 +3,9 @@ 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/Input"
 export * from "./components/Pill"
 export * from "./components/RootSVG"
 export * from "./components/SearchBox"