@coopdigital/react 0.14.0 → 0.15.0

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/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.14.0",
+  "version": "0.15.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -44,7 +44,7 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.13.0",
+    "@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": "4bcb898b00d73469db81f28e2fee06d8556f7ed7"
+  "gitHead": "86b6861deb12d0f826dfd719fb28a754fda81cbd"
 }

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/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"