@coopdigital/react 0.6.1 → 0.7.0

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

@@ -0,0 +1,26 @@
+import React, { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, ForwardRefExoticComponent, JSX } from "react";
+export interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+    /** **(Optional)** Specifies a custom aria-label. */
+    ariaLabel?: string;
+    /** **(Optional)** Specifies the custom element to override default `a` or `button`. */
+    as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string;
+    /** **(Optional)** Represents the content inside the Button component. It can be any valid JSX or string. */
+    children?: React.ReactNode;
+    /** **(Optional)** Receives any className to be applied to Button component. */
+    className?: string;
+    /** **(Optional)** Specifies the URL that the Button component will link to when clicked. */
+    href?: string;
+    /** **(Optional)** Specifies whether the Button should be full width. */
+    isFullWidth?: boolean;
+    /** **(Optional)** Specifies whether the Button is loading. */
+    isLoading?: boolean;
+    /** **(Optional)** Specifies the Button size. */
+    size?: "sm" | "md" | "lg" | "xl";
+    /** **(Optional)** Specifies the Button variant. */
+    variant?: "primary" | "secondary" | "white" | "grey";
+}
+/**
+ * The Button component is an interactive element that people can use to take an action.
+ */
+export declare const Button: ({ ariaLabel, as, children, className, href, isFullWidth, isLoading, size, variant, ...props }: ButtonProps) => JSX.Element;
+export default Button;

package/dist/components/Button/Button.js

@@ -0,0 +1,17 @@
+import { __rest } from '../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+
+/**
+ * The Button component is an interactive element that people can use to take an action.
+ */
+const Button = (_a) => {
+    var { ariaLabel, as, children, className = "", href, isFullWidth = false, isLoading = false, size = "md", variant = "primary" } = _a, props = __rest(_a, ["ariaLabel", "as", "children", "className", "href", "isFullWidth", "isLoading", "size", "variant"]);
+    let element = href ? "a" : "button";
+    if (as) {
+        element = as;
+    }
+    const componentProps = Object.assign({ "aria-label": ariaLabel, className: `coop-button ${className}`, "data-loading": isLoading ? true : undefined, "data-size": size.length && size != "md" ? size : undefined, "data-variant": variant, "data-width": isFullWidth ? "full" : undefined, href }, props);
+    return React.createElement(element, Object.assign({}, componentProps), children);
+};
+
+export { Button, Button as default };

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

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

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./components/AlertBanner";
+export * from "./components/Button";
 export * from "./components/EditorialCard";
 export * from "./components/Image";
 export * from "./components/Pill";

package/dist/index.js

@@ -1,4 +1,5 @@
 export { AlertBanner } from './components/AlertBanner/AlertBanner.js';
+export { Button } from './components/Button/Button.js';
 export { EditorialCard } from './components/EditorialCard/EditorialCard.js';
 export { Image } from './components/Image/Image.js';
 export { Pill } from './components/Pill/Pill.js';

package/dist/node_modules/tslib/tslib.es6.js

@@ -0,0 +1,35 @@
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol, Iterator */
+
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+export { __rest };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "main": "dist/index.js",
   "private": false,
   "publishConfig": {
@@ -39,31 +39,31 @@
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
-    "@coopdigital/styles": "^0.5.8",
+    "@coopdigital/styles": "^0.6.1",
     "@playwright/test": "^1.51.1",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-a11y": "^8.6.6",
-    "@storybook/addon-essentials": "^8.6.6",
-    "@storybook/addon-interactions": "^8.6.6",
-    "@storybook/addon-mdx-gfm": "^8.6.6",
-    "@storybook/addon-onboarding": "^8.6.6",
-    "@storybook/blocks": "^8.6.6",
-    "@storybook/manager-api": "^8.6.6",
-    "@storybook/react": "^8.6.6",
-    "@storybook/react-vite": "^8.6.6",
-    "@storybook/test": "^8.6.6",
-    "@storybook/theming": "^8.6.6",
+    "@storybook/addon-a11y": "^8.6.7",
+    "@storybook/addon-essentials": "^8.6.7",
+    "@storybook/addon-interactions": "^8.6.7",
+    "@storybook/addon-mdx-gfm": "^8.6.7",
+    "@storybook/addon-onboarding": "^8.6.7",
+    "@storybook/blocks": "^8.6.7",
+    "@storybook/manager-api": "^8.6.7",
+    "@storybook/react": "^8.6.7",
+    "@storybook/react-vite": "^8.6.7",
+    "@storybook/test": "^8.6.7",
+    "@storybook/theming": "^8.6.7",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/react": "^19.0.12",
     "@types/react-dom": "^19.0.4",
     "rollup": "^4.36.0",
-    "storybook": "^8.6.6"
+    "storybook": "^8.6.7"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "60cbbc73c648be7d728d36a700bcf2761579548f"
+  "gitHead": "72f25fbdb8f540969522cfab1f28a38945fb4531"
 }

package/src/components/Button/Button.tsx

@@ -0,0 +1,64 @@
+import React, {
+  AnchorHTMLAttributes,
+  ButtonHTMLAttributes,
+  DetailedHTMLProps,
+  ForwardRefExoticComponent,
+  JSX,
+} from "react"
+
+export interface ButtonProps
+  extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+  /** **(Optional)** Specifies a custom aria-label. */
+  ariaLabel?: string
+  /** **(Optional)** Specifies the custom element to override default `a` or `button`. */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  as?: React.FC<AnchorHTMLAttributes<HTMLElement>> | ForwardRefExoticComponent<any> | string
+  /** **(Optional)** Represents the content inside the Button component. It can be any valid JSX or string. */
+  children?: React.ReactNode
+  /** **(Optional)** Receives any className to be applied to Button component. */
+  className?: string
+  /** **(Optional)** Specifies the URL that the Button component will link to when clicked. */
+  href?: string
+  /** **(Optional)** Specifies whether the Button should be full width. */
+  isFullWidth?: boolean
+  /** **(Optional)** Specifies whether the Button is loading. */
+  isLoading?: boolean
+  /** **(Optional)** Specifies the Button size. */
+  size?: "sm" | "md" | "lg" | "xl"
+  /** **(Optional)** Specifies the Button variant. */
+  variant?: "primary" | "secondary" | "white" | "grey"
+}
+
+/**
+ * The Button component is an interactive element that people can use to take an action.
+ */
+export const Button = ({
+  ariaLabel,
+  as,
+  children,
+  className = "",
+  href,
+  isFullWidth = false,
+  isLoading = false,
+  size = "md",
+  variant = "primary",
+  ...props
+}: ButtonProps): JSX.Element => {
+  let element: ButtonProps["as"] = href ? "a" : "button"
+  if (as) {
+    element = as
+  }
+
+  const componentProps = {
+    "aria-label": ariaLabel,
+    className: `coop-button ${className}`,
+    "data-loading": isLoading ? true : undefined,
+    "data-size": size.length && size != "md" ? size : undefined,
+    "data-variant": variant,
+    "data-width": isFullWidth ? "full" : undefined,
+    href,
+    ...props,
+  }
+  return React.createElement(element, { ...componentProps }, children)
+}
+export default Button

package/src/components/Button/index.ts

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

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./components/AlertBanner"
+export * from "./components/Button"
 export * from "./components/EditorialCard"
 export * from "./components/Image"
 export * from "./components/Pill"