@coopdigital/react 0.18.1 → 0.19.0

package/dist/components/Button/Button.d.ts

@@ -22,7 +22,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** **(Optional)** Specifies the Button size. */
     size?: "sm" | "md" | "lg" | "xl";
     /** **(Optional)** Specifies the Button variant. */
-    variant?: "primary" | "secondary" | "white" | "grey" | "ghost" | "text";
+    variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost" | "text";
 }
 /**
  * The Button component is an interactive element that people can use to take an action.

package/dist/components/Button/Button.js

@@ -1,15 +1,13 @@
 import { __rest, __awaiter } from '../../node_modules/tslib/tslib.es6.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import React, { useState, useCallback } from 'react';
+import { LoadingIcon } from '../Icon/LoadingIcon.js';
 
-const LoadingIcon = () => {
-    return (jsx("svg", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
-};
 /**
  * The Button component is an interactive element that people can use to take an action.
  */
 const Button = (_a) => {
-    var { as, children, className = "", href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, size = "md", variant = "primary" } = _a, props = __rest(_a, ["as", "children", "className", "href", "isDisabled", "isFullWidth", "isLoading", "loadingText", "onClick", "size", "variant"]);
+    var { as, children, className = "", href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, size = "md", variant = "green" } = _a, props = __rest(_a, ["as", "children", "className", "href", "isDisabled", "isFullWidth", "isLoading", "loadingText", "onClick", "size", "variant"]);
     let element = href ? "a" : "button";
     if (as) {
         element = as;

package/dist/components/Card/Card.d.ts

@@ -5,7 +5,7 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Specifies the custom element to override default `a` */
     as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
     /** **(Optional)** Specifies the background color of the card. */
-    background?: "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue";
+    background?: "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue" | "brown" | "grey";
     /** **(Optional)** Represents the content inside the badge. */
     badge?: React.ReactNode;
     /** **(Optional)** Specify badge position relative to top right corner. */

package/dist/components/Expandable/Expandable.d.ts

@@ -1,7 +1,7 @@
 import type { DetailsHTMLAttributes, JSX } from "react";
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
     /** **(Optional)** Specifies the Expandable background color from the available options. */
-    background?: "grey" | "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue" | "white" | "transparent";
+    background?: "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue" | "white" | "transparent" | "brown" | "grey";
     /** Represents the content inside the Expandable component, only visible when expanded. It can be any valid JSX or string. */
     children: React.ReactNode;
     /** **(Optional)** Receives any className to be applied to Expandable component. */

package/dist/components/Icon/LoadingIcon.d.ts

@@ -0,0 +1,6 @@
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const LoadingIcon: ({ alt, className, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Icon/LoadingIcon.js

@@ -0,0 +1,12 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+
+const LoadingIcon = (_a) => {
+    var { alt, className } = _a, props = __rest(_a, ["alt", "className"]);
+    const id = useId();
+    const componentProps = Object.assign({ "aria-labelledby": alt ? id : undefined, className: `coop-icon ${className !== null && className !== void 0 ? className : ""}`.trim(), "data-icon": "loading", fill: "none", role: alt ? "img" : undefined, viewBox: "0 0 24 24" }, props);
+    return (jsxs("svg", Object.assign({}, componentProps, { children: [alt ? jsx("title", { id: id, children: alt }) : null, jsx("path", { d: "M10.72 19.9a8 8 0 0 1-6.5-9.79 7.77 7.77 0 0 1 6.18-5.95 8 8 0 0 1 9.49 6.52A1.54 1.54 0 0 0 21.38 12h.13a1.37 1.37 0 0 0 1.38-1.54 11 11 0 1 0-12.7 12.39A1.54 1.54 0 0 0 12 21.34a1.47 1.47 0 0 0-1.28-1.44", fill: "currentColor" })] })));
+};
+
+export { LoadingIcon };

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

@@ -20,6 +20,7 @@ export { CoopLocationIcon } from "./CoopLocationIcon";
 export { DownloadIcon } from "./DownloadIcon";
 export { HomeIcon } from "./HomeIcon";
 export { InformationIcon } from "./InformationIcon";
+export { LoadingIcon } from "./LoadingIcon";
 export { LocationIcon } from "./LocationIcon";
 export { MailIcon } from "./MailIcon";
 export { MenuIcon } from "./MenuIcon";

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

@@ -25,7 +25,7 @@ export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
     /** **(Optional)** Receives any size to be applied to SearchBox component. */
     size?: string;
     /** **(Optional)** Receives the variant to be applied to SearchBox component. */
-    variant?: "primary" | "secondary" | "ghost";
+    variant?: "green" | "blue" | "white" | "grey" | "green-ghost" | "blue-ghost" | "white-ghost" | "grey-ghost";
 }
 /**
  * SearchBox component allows a person to enter a word or a phrase to find relevant content.

package/dist/components/SearchBox/SearchBox.js

@@ -27,7 +27,7 @@ const defaultButtonProps = {
  */
 const SearchBox = (_a) => {
     var _b, _c;
-    var { action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, label, labelVisible = false, name = "query", onSubmit, placeholder, size = "md", variant = "primary" } = _a, props = __rest(_a, ["action", "aria-placeholder", "autoCapitalize", "autoComplete", "button", "className", "label", "labelVisible", "name", "onSubmit", "placeholder", "size", "variant"]);
+    var { action, "aria-placeholder": ariaPlaceholder, autoCapitalize = "off", autoComplete = "off", button = defaultButtonProps, className, label, labelVisible = false, name = "query", onSubmit, placeholder, size = "md", variant = "green" } = _a, props = __rest(_a, ["action", "aria-placeholder", "autoCapitalize", "autoComplete", "button", "className", "label", "labelVisible", "name", "onSubmit", "placeholder", "size", "variant"]);
     const [isPending, setIsPending] = useState(false);
     const handleSubmit = useCallback((event) => __awaiter(void 0, void 0, void 0, function* () {
         event.preventDefault();
@@ -46,7 +46,7 @@ const SearchBox = (_a) => {
         action: action !== null && action !== void 0 ? action : undefined,
         className: `coop-search-box ${className !== null && className !== void 0 ? className : ""}`.trim(),
         "data-size": size.length && size !== "md" ? size : undefined,
-        "data-variant": variant.length && variant !== "primary" ? variant : undefined,
+        "data-variant": variant.length && variant !== "green" ? variant : undefined,
         onSubmit: onSubmit ? handleSubmit : undefined,
     };
     const buttonProps = {

package/dist/components/Tag/Tag.d.ts

@@ -10,7 +10,7 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
     /** **(Optional)** Specifies the URL that the Tag component will link to when clicked. */
     href?: string;
     /** **(Optional)** Specifies the Tag background color from the available options. */
-    tagColor?: "white" | "grey" | "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue";
+    tagColor?: "white" | "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue" | "brown" | "grey";
 }
 /**
  * Tag is a simple component that is meant to communicate a brief message such as categories.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -45,7 +45,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.15.3",
+    "@coopdigital/styles": "^0.16.0",
     "@playwright/test": "^1.52.0",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -67,5 +67,5 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0"
   },
-  "gitHead": "3bad30dd8fdb2c160a2f71e0c95c1da38d12b0ab"
+  "gitHead": "c3b9ce837060a373926286d2a770796f75f8c168"
 }

package/src/components/Button/Button.tsx

@@ -7,6 +7,8 @@ import type {
 
 import React, { useCallback, useState } from "react"
 
+import { LoadingIcon } from "../Icon"
+
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specifies the custom element to override default `a` or `button`. */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -30,29 +32,22 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specifies the Button size. */
   size?: "sm" | "md" | "lg" | "xl"
   /** **(Optional)** Specifies the Button variant. */
-  variant?: "primary" | "secondary" | "white" | "grey" | "ghost" | "text"
+  variant?:
+    | "green"
+    | "blue"
+    | "white"
+    | "grey"
+    | "green-ghost"
+    | "blue-ghost"
+    | "white-ghost"
+    | "grey-ghost"
+    | "text"
 }
 
 type OnClickHandler =
   | React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>
   | ((event: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => Promise<void>)
 
-const LoadingIcon = () => {
-  return (
-    <svg
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M21 12a9 9 0 1 1-6.219-8.56" />
-    </svg>
-  )
-}
-
 /**
  * The Button component is an interactive element that people can use to take an action.
  */
@@ -67,7 +62,7 @@ export const Button = ({
   loadingText = "Loading",
   onClick,
   size = "md",
-  variant = "primary",
+  variant = "green",
   ...props
 }: ButtonProps): JSX.Element => {
   let element: ButtonProps["as"] = href ? "a" : "button"

package/src/components/Card/Card.tsx

@@ -10,7 +10,17 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
   /** **(Optional)** Specifies the background color of the card. */
-  background?: "purple" | "pink" | "green" | "orange" | "red" | "yellow" | "lilac" | "blue"
+  background?:
+    | "purple"
+    | "pink"
+    | "green"
+    | "orange"
+    | "red"
+    | "yellow"
+    | "lilac"
+    | "blue"
+    | "brown"
+    | "grey"
   /** **(Optional)** Represents the content inside the badge. */
   badge?: React.ReactNode
   /** **(Optional)** Specify badge position relative to top right corner. */

package/src/components/Expandable/Expandable.tsx

@@ -3,7 +3,6 @@ import type { DetailsHTMLAttributes, JSX } from "react"
 export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
   /** **(Optional)** Specifies the Expandable background color from the available options. */
   background?:
-    | "grey"
     | "purple"
     | "pink"
     | "green"
@@ -14,6 +13,8 @@ export interface ExpandableProps extends DetailsHTMLAttributes<HTMLDetailsElemen
     | "blue"
     | "white"
     | "transparent"
+    | "brown"
+    | "grey"
   /** Represents the content inside the Expandable component, only visible when expanded. It can be any valid JSX or string. */
   children: React.ReactNode
   /** **(Optional)** Receives any className to be applied to Expandable component. */

package/src/components/Icon/LoadingIcon.tsx

@@ -0,0 +1,27 @@
+import { type SVGProps, useId } from "react"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const LoadingIcon = ({ alt, className, ...props }: IconProps) => {
+  const id = useId()
+  const componentProps = {
+    "aria-labelledby": alt ? id : undefined,
+    className: `coop-icon ${className ?? ""}`.trim(),
+    "data-icon": "loading",
+    fill: "none",
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 24 24",
+    ...props,
+  }
+  return (
+    <svg {...componentProps}>
+      {alt ? <title id={id}>{alt}</title> : null}
+      <path
+        d="M10.72 19.9a8 8 0 0 1-6.5-9.79 7.77 7.77 0 0 1 6.18-5.95 8 8 0 0 1 9.49 6.52A1.54 1.54 0 0 0 21.38 12h.13a1.37 1.37 0 0 0 1.38-1.54 11 11 0 1 0-12.7 12.39A1.54 1.54 0 0 0 12 21.34a1.47 1.47 0 0 0-1.28-1.44"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

package/src/components/Icon/index.tsx

@@ -20,6 +20,7 @@ export { CoopLocationIcon } from "./CoopLocationIcon"
 export { DownloadIcon } from "./DownloadIcon"
 export { HomeIcon } from "./HomeIcon"
 export { InformationIcon } from "./InformationIcon"
+export { LoadingIcon } from "./LoadingIcon"
 export { LocationIcon } from "./LocationIcon"
 export { MailIcon } from "./MailIcon"
 export { MenuIcon } from "./MenuIcon"

package/src/components/SearchBox/SearchBox.tsx

@@ -26,7 +26,15 @@ export interface SearchBoxProps extends HTMLAttributes<HTMLInputElement> {
   /** **(Optional)** Receives any size to be applied to SearchBox component. */
   size?: string
   /** **(Optional)** Receives the variant to be applied to SearchBox component. */
-  variant?: "primary" | "secondary" | "ghost"
+  variant?:
+    | "green"
+    | "blue"
+    | "white"
+    | "grey"
+    | "green-ghost"
+    | "blue-ghost"
+    | "white-ghost"
+    | "grey-ghost"
 }
 
 const defaultButtonProps: SearchBoxProps["button"] = {
@@ -64,7 +72,7 @@ export const SearchBox = ({
   onSubmit,
   placeholder,
   size = "md",
-  variant = "primary",
+  variant = "green",
   ...props
 }: SearchBoxProps): JSX.Element => {
   const [isPending, setIsPending] = useState(false)
@@ -92,7 +100,7 @@ export const SearchBox = ({
     action: action ?? undefined,
     className: `coop-search-box ${className ?? ""}`.trim(),
     "data-size": size.length && size !== "md" ? size : undefined,
-    "data-variant": variant.length && variant !== "primary" ? variant : undefined,
+    "data-variant": variant.length && variant !== "green" ? variant : undefined,
     onSubmit: onSubmit ? handleSubmit : undefined,
   }
 

package/src/components/Tag/Tag.tsx

@@ -15,7 +15,6 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specifies the Tag background color from the available options. */
   tagColor?:
     | "white"
-    | "grey"
     | "purple"
     | "pink"
     | "green"
@@ -24,6 +23,8 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
     | "yellow"
     | "lilac"
     | "blue"
+    | "brown"
+    | "grey"
 }
 
 /**