@coopdigital/react 0.13.1 → 0.15.0

package/dist/components/Button/Button.js

@@ -26,7 +26,7 @@ const Button = (_a) => {
             setIsPending(false);
         }
     }), [onClick, isPending]);
-    const componentProps = Object.assign({ "aria-disabled": isDisabled ? true : undefined, "aria-label": ariaLabel, "aria-live": "assertive", className: `${variant == "text" ? "coop-link" : "coop-button"} ${className}`, "data-loading": isLoading || isPending ? true : undefined, "data-size": size.length && size != "md" ? size : undefined, "data-variant": variant !== "text" ? variant : undefined, "data-width": isFullWidth ? "full" : undefined, href, onClick: handleClick }, props);
+    const componentProps = Object.assign({ "aria-disabled": isDisabled ? true : undefined, "aria-label": ariaLabel, "aria-live": "assertive", className: `${variant == "text" ? "coop-link" : "coop-button"} ${className}`, "data-loading": isLoading || isPending ? true : undefined, "data-size": size.length && size !== "md" ? size : undefined, "data-variant": variant !== "text" ? variant : undefined, "data-width": isFullWidth ? "full" : undefined, href, onClick: handleClick }, props);
     const finalChildren = isPending || isLoading ? (jsxs(Fragment, { children: [loadingText, jsx(LoadingIcon, {})] })) : (children);
     return React.createElement(element, Object.assign({}, componentProps), finalChildren);
 };

package/dist/components/Card/Card.js

@@ -11,6 +11,7 @@ function getCardLinkElement(as, href) {
     return {
         element,
         props: {
+            className: "coop-card--link",
             href,
         },
     };
@@ -22,7 +23,7 @@ const Card = (_a) => {
     var { as, background, badge, badgePosition = "inset", chevron = false, children, heading, headingLevel = "h3", href, image, imagePosition = "left", label = "", labelBackground, layout = "vertical" } = _a, props = __rest(_a, ["as", "background", "badge", "badgePosition", "chevron", "children", "heading", "headingLevel", "href", "image", "imagePosition", "label", "labelBackground", "layout"]);
     const linkElement = getCardLinkElement(as, href);
     const imageProps = Object.assign({ crop: "wide" }, image);
-    const componentProps = Object.assign({ className: "coop-card", "data-badge-pos": badgePosition, "data-bg": background, "data-image-pos": imagePosition, "data-label-bg": labelBackground, "data-layout": layout }, props);
+    const componentProps = Object.assign({ className: "coop-card", "data-badge-pos": badgePosition, "data-bg": background, "data-image-pos": imagePosition, "data-label-bg": labelBackground, "data-layout": layout !== "vertical" ? layout : undefined }, props);
     return (jsxs("article", Object.assign({}, componentProps, { children: [image && jsx(Image, Object.assign({}, imageProps)), badge && jsx("div", { className: "coop-card--badge", children: badge }), jsxs("div", { className: "coop-card--inner", children: [jsxs("div", { className: "coop-card--content", children: [label && jsx("span", { className: "coop-card--label", children: label }), React.createElement(linkElement.element, linkElement.props, React.createElement(headingLevel, { className: "coop-card--heading" }, heading)), children] }), chevron && (jsx("span", { "aria-hidden": "true", className: "coop-card--icon", role: "presentation", children: jsx("svg", { viewBox: "0 0 16 29", children: jsx("path", { d: "M2 28.1a1.6 1.6 0 0 1-1.2-2.7l11-10.9-11-11A1.6 1.6 0 1 1 3 1.5l12 12a1.6 1.6 0 0 1 0 2.2l-12 12c-.3.4-.7.5-1 .5z" }) }) }))] })] })));
 };
 

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

@@ -0,0 +1,15 @@
+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";
+    /** Represents the content inside the Expandable component, only visible when expanded. It can be any valid JSX or string. */
+    children: React.ReactNode;
+    /** Specifies summary for this component. It can be any valid JSX or string. */
+    summary: React.ReactNode;
+}
+/**
+ * The Expandable component wraps content in an expandable block using the details/summary HTML elements.
+ * It can be used to reveal more context for a specific issue or action.
+ */
+export declare const Expandable: ({ background, children, className, summary, ...props }: ExpandableProps) => JSX.Element;
+export default Expandable;

package/dist/components/Expandable/Expandable.js

@@ -0,0 +1,14 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/**
+ * The Expandable component wraps content in an expandable block using the details/summary HTML elements.
+ * It can be used to reveal more context for a specific issue or action.
+ */
+const Expandable = (_a) => {
+    var { background, children, className, summary } = _a, props = __rest(_a, ["background", "children", "className", "summary"]);
+    const componentProps = Object.assign({ className: `coop-expandable ${className}`, "data-bg": background }, props);
+    return (jsxs("details", Object.assign({}, componentProps, { children: [jsxs("summary", { children: [summary, jsx("svg", { fill: "none", height: "24", width: "24", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "m20.25 9.75-6.22 6.22a.75.75 0 0 1-1.06 0L6.75 9.75", stroke: "black", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "1.5" }) })] }), jsx("div", { className: "coop-expandable--content", children: children })] })));
+};
+
+export { Expandable, Expandable as default };

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

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

package/dist/components/Pill/Pill.js

@@ -10,7 +10,7 @@ const Pill = (_a) => {
     if (as) {
         element = as;
     }
-    const componentProps = Object.assign({ "aria-label": ariaLabel, className: `coop-pill ${className}`, "data-badge": (badge === null || badge === void 0 ? void 0 : badge.length) ? badge : undefined, "data-badge-color": badgeColor, "data-pill-color": pillColor, "data-size": size.length && size != "md" ? size : undefined, href }, props);
+    const componentProps = Object.assign({ "aria-label": ariaLabel, className: `coop-pill ${className}`, "data-badge": (badge === null || badge === void 0 ? void 0 : badge.length) ? badge : undefined, "data-badge-color": badgeColor, "data-pill-color": pillColor, "data-size": size.length && size !== "md" ? size : undefined, href }, props);
     return React.createElement(element, Object.assign({}, componentProps), children);
 };
 

package/dist/index.d.ts

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

package/dist/index.js

@@ -2,6 +2,7 @@ export { AlertBanner } from './components/AlertBanner/AlertBanner.js';
 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 { Image } from './components/Image/Image.js';
 export { Pill } from './components/Pill/Pill.js';
 export { default as RootSVG } from './components/RootSVG/RootSVG.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.13.1",
+  "version": "0.15.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -44,7 +44,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.12.1",
+    "@coopdigital/styles": "^0.14.0",
     "@playwright/test": "^1.51.1",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
@@ -66,5 +66,5 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "6de4fec609f8afd7048d63152394a25392d50212"
+  "gitHead": "86b6861deb12d0f826dfd719fb28a754fda81cbd"
 }

package/src/components/Button/Button.tsx

@@ -101,7 +101,7 @@ export const Button = ({
     "aria-live": "assertive" as keyof ButtonHTMLAttributes<HTMLButtonElement>["aria-live"],
     className: `${variant == "text" ? "coop-link" : "coop-button"} ${className}`,
     "data-loading": isLoading || isPending ? true : undefined,
-    "data-size": size.length && size != "md" ? size : undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
     "data-variant": variant !== "text" ? variant : undefined,
     "data-width": isFullWidth ? "full" : undefined,
     href,

package/src/components/Card/Card.tsx

@@ -47,6 +47,7 @@ function getCardLinkElement(as: CardProps["as"], href?: string) {
   return {
     element,
     props: {
+      className: "coop-card--link",
       href,
     },
   }
@@ -85,7 +86,7 @@ export const Card = ({
     "data-bg": background,
     "data-image-pos": imagePosition,
     "data-label-bg": labelBackground,
-    "data-layout": layout,
+    "data-layout": layout !== "vertical" ? layout : undefined,
     ...props,
   }
 

package/src/components/Expandable/Expandable.tsx

@@ -0,0 +1,48 @@
+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"
+  /** Represents the content inside the Expandable component, only visible when expanded. It can be any valid JSX or string. */
+  children: React.ReactNode
+  /** Specifies summary for this component. It can be any valid JSX or string. */
+  summary: React.ReactNode
+}
+
+/**
+ * The Expandable component wraps content in an expandable block using the details/summary HTML elements.
+ * It can be used to reveal more context for a specific issue or action.
+ */
+
+export const Expandable = ({
+  background,
+  children,
+  className,
+  summary,
+  ...props
+}: ExpandableProps): JSX.Element => {
+  const componentProps = {
+    className: `coop-expandable ${className}`,
+    "data-bg": background,
+    ...props,
+  }
+  return (
+    <details {...componentProps}>
+      <summary>
+        {summary}
+        <svg fill="none" height="24" width="24" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="m20.25 9.75-6.22 6.22a.75.75 0 0 1-1.06 0L6.75 9.75"
+            stroke="black"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="1.5"
+          />
+        </svg>
+      </summary>
+      <div className="coop-expandable--content">{children}</div>
+    </details>
+  )
+}
+
+export default Expandable

package/src/components/Expandable/index.ts

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

package/src/components/Pill/Pill.tsx

@@ -51,7 +51,7 @@ export const Pill = ({
     "data-badge": badge?.length ? badge : undefined,
     "data-badge-color": badgeColor,
     "data-pill-color": pillColor,
-    "data-size": size.length && size != "md" ? size : undefined,
+    "data-size": size.length && size !== "md" ? size : undefined,
     href,
     ...props,
   }

package/src/index.ts

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