@coopdigital/react 1.8.2 → 1.10.0

package/dist/components/Author/Author.js

@@ -5,14 +5,14 @@ import { Image } from '../Image/Image.js';
 const Author = ({ author = "Co-op team", className, date, datePrefix = "", image = {
     alt: "",
     src: "https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/coop-logo-inverted.svg",
-}, ref, size = "md", ...props }) => {
+}, ref, size, ...props }) => {
     const imageProps = {
         width: "56px",
         ...image,
     };
     const componentProps = {
         className: clsx("coop-author", className),
-        "data-size": size.length && size !== "md" ? size : undefined,
+        "data-size": (size === null || size === void 0 ? void 0 : size.length) ? size : undefined,
         ...props,
     };
     return (jsxs("div", { ...componentProps, ref: ref, children: [image && jsx(Image, { ...imageProps }), jsxs("div", { className: "coop-author--content", children: [jsxs("span", { children: [jsx("span", { children: datePrefix ? datePrefix + " " : "" }), jsx("span", { className: "coop-author--date", children: date })] }), jsxs("span", { children: ["by ", author] })] })] }));

package/dist/components/Button/Button.js

@@ -3,7 +3,7 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React, { useState, useCallback } from 'react';
 import { hasUserBg } from '../../utils/index.js';
-import { LoadingIcon } from '../icons/LoadingIcon.js';
+import { LoadingSpinner } from '../LoadingSpinner/LoadingSpinner.js';
 
 const Button = ({ as, children, className, href, isDisabled = false, isFullWidth = false, isLoading = false, loadingText = "Loading", onClick, ref, size, variant = "solid", ...props }) => {
     const element = as !== null && as !== void 0 ? as : (href ? "a" : "button");
@@ -30,7 +30,7 @@ const Button = ({ as, children, className, href, isDisabled = false, isFullWidth
         onClick: onClick ? handleClick : undefined,
         ...props,
     };
-    const finalChildren = isPending || isLoading ? (jsxs(Fragment, { children: [loadingText, jsx(LoadingIcon, { stroke: "currentColor", strokeWidth: "1px" })] })) : (children);
+    const finalChildren = isPending || isLoading ? (jsxs(Fragment, { children: [loadingText, jsx(LoadingSpinner, {})] })) : (children);
     return React.createElement(element, { ...componentProps, ref }, finalChildren);
 };
 Button.slot = { name: "Button" };

package/dist/components/LoadingSpinner/LoadingSpinner.d.ts

@@ -0,0 +1,13 @@
+import type { JSX, Ref, SVGProps } from "react";
+export interface LoadingSpinnerProps extends SVGProps<SVGSVGElement> {
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<SVGSVGElement>;
+    /** **(Optional)** Specify LoadingSpinner stroke. */
+    stroke?: string;
+    /** **(Optional)** Specify LoadingSpinner stroke width. */
+    strokeWidth?: string;
+}
+export declare const LoadingSpinner: ({ className, ref, stroke, strokeWidth, ...props }: LoadingSpinnerProps) => JSX.Element;
+export default LoadingSpinner;

package/dist/components/LoadingSpinner/LoadingSpinner.js

@@ -0,0 +1,16 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import 'react';
+import { LoadingIcon } from '../icons/LoadingIcon.js';
+
+const LoadingSpinner = ({ className, ref, stroke = "currentColor", strokeWidth = "1px", ...props }) => {
+    const componentProps = {
+        className: clsx("coop-loading-spinner ", className),
+        stroke,
+        strokeWidth,
+        ...props,
+    };
+    return jsx(LoadingIcon, { ...componentProps, ref: ref });
+};
+
+export { LoadingSpinner, LoadingSpinner as default };

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

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

package/dist/components/Pill/Pill.js

@@ -8,12 +8,12 @@ const componentSlots = {
     Children: null,
     PillBadge: null,
 };
-const Pill = ({ as, children, className, href, ref, size = "md", ...props }) => {
+const Pill = ({ as, children, className, href, ref, size, ...props }) => {
     const element = as !== null && as !== void 0 ? as : (href ? "a" : "span");
     const slots = useSlots(componentSlots, children);
     const componentProps = {
         className: clsx("coop-pill", !hasUserBg(className) && "bg-tint-grey", className),
-        "data-size": size.length && size !== "md" ? size : undefined,
+        "data-size": (size === null || size === void 0 ? void 0 : size.length) ? size : undefined,
         href,
         ...props,
     };

package/dist/components/Tag/Tag.js

@@ -2,11 +2,11 @@ import clsx from 'clsx';
 import React from 'react';
 import { hasUserBg } from '../../utils/index.js';
 
-const Tag = ({ as, children, className, href, ref, size = "md", ...props }) => {
+const Tag = ({ as, children, className, href, ref, size, ...props }) => {
     const element = as !== null && as !== void 0 ? as : (href ? "a" : "span");
     const componentProps = {
         className: clsx("coop-tag", !hasUserBg(className) && "bg-tint-grey", className),
-        "data-size": size.length && size !== "md" ? size : undefined,
+        "data-size": (size === null || size === void 0 ? void 0 : size.length) ? size : undefined,
         href,
         ...props,
     };

package/dist/index.d.ts

@@ -11,6 +11,7 @@ export * from "./components/Fieldset";
 export * from "./components/Flourish";
 export * from "./components/Form";
 export * from "./components/Image";
+export * from "./components/LoadingSpinner";
 export * from "./components/Pill";
 export * from "./components/Popover";
 export * from "./components/Radio";

package/dist/index.js

@@ -11,6 +11,7 @@ export { Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend }
 export { Flourish } from './components/Flourish/Flourish.js';
 export { Form } from './components/Form/Form.js';
 export { Image } from './components/Image/Image.js';
+export { LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.js';
 export { Pill, PillBadge } from './components/Pill/Pill.js';
 export { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from './components/Popover/Popover.js';
 export { Radio } from './components/Radio/Radio.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.8.2",
+  "version": "1.10.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -100,11 +100,11 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.5.1",
+    "@coopdigital/styles": "^1.7.0",
     "@radix-ui/react-popover": "^1.1.17",
     "clsx": "^2.1.1",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "bbd5f9f7c7ff206270e54690655c3087ad7add8c"
+  "gitHead": "9617cab1d149ce04be999b407f9128204dfc7edd"
 }

package/src/components/Author/Author.tsx

@@ -31,7 +31,7 @@ const Author = ({
     src: "https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/coop-logo-inverted.svg",
   },
   ref,
-  size = "md",
+  size,
   ...props
 }: AuthorProps): JSX.Element => {
   const imageProps: ImageProps = {
@@ -41,7 +41,7 @@ const Author = ({
 
   const componentProps = {
     className: clsx("coop-author", className),
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size?.length ? size : undefined,
     ...props,
   }
   return (

package/src/components/Button/Button.tsx

@@ -6,7 +6,7 @@ import clsx from "clsx"
 import React, { useCallback, useState } from "react"
 
 import { hasUserBg } from "../../utils"
-import { LoadingIcon } from "../icons"
+import { LoadingSpinner } from "./../LoadingSpinner"
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `button`. */
@@ -94,7 +94,7 @@ const Button = ({
     isPending || isLoading ? (
       <>
         {loadingText}
-        <LoadingIcon stroke={"currentColor"} strokeWidth={"1px"} />
+        <LoadingSpinner />
       </>
     ) : (
       children

package/src/components/LoadingSpinner/LoadingSpinner.tsx

@@ -0,0 +1,35 @@
+import type { JSX, Ref, SVGProps } from "react"
+
+import clsx from "clsx"
+
+import { LoadingIcon } from "../icons"
+
+export interface LoadingSpinnerProps extends SVGProps<SVGSVGElement> {
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<SVGSVGElement>
+  /** **(Optional)** Specify LoadingSpinner stroke. */
+  stroke?: string
+  /** **(Optional)** Specify LoadingSpinner stroke width. */
+  strokeWidth?: string
+}
+
+export const LoadingSpinner = ({
+  className,
+  ref,
+  stroke = "currentColor",
+  strokeWidth = "1px",
+  ...props
+}: LoadingSpinnerProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-loading-spinner ", className),
+    stroke,
+    strokeWidth,
+    ...props,
+  }
+
+  return <LoadingIcon {...componentProps} ref={ref} />
+}
+
+export default LoadingSpinner

package/src/components/LoadingSpinner/index.ts

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

package/src/components/Pill/Pill.tsx

@@ -9,7 +9,7 @@ import { hasUserBg } from "../../utils"
 
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `span`. */
-  // oxlint-disable-next-line typecscript/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   as?: React.FC<any> | ForwardRefExoticComponent<any> | string
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode
@@ -35,22 +35,14 @@ const componentSlots = {
   PillBadge: null,
 }
 
-const Pill = ({
-  as,
-  children,
-  className,
-  href,
-  ref,
-  size = "md",
-  ...props
-}: PillProps): JSX.Element => {
+const Pill = ({ as, children, className, href, ref, size, ...props }: PillProps): JSX.Element => {
   const element: PillProps["as"] = as ?? (href ? "a" : "span")
 
   const slots = useSlots(componentSlots, children)
 
   const componentProps = {
     className: clsx("coop-pill", !hasUserBg(className) && "bg-tint-grey", className),
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size?.length ? size : undefined,
     href,
     ...props,
   }

package/src/components/Tag/Tag.tsx

@@ -21,20 +21,12 @@ export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
   size?: "sm" | "md"
 }
 
-const Tag = ({
-  as,
-  children,
-  className,
-  href,
-  ref,
-  size = "md",
-  ...props
-}: TagProps): JSX.Element => {
+const Tag = ({ as, children, className, href, ref, size, ...props }: TagProps): JSX.Element => {
   const element: TagProps["as"] = as ?? (href ? "a" : "span")
 
   const componentProps = {
     className: clsx("coop-tag", !hasUserBg(className) && "bg-tint-grey", className),
-    "data-size": size.length && size !== "md" ? size : undefined,
+    "data-size": size?.length ? size : undefined,
     href,
     ...props,
   }

package/src/index.ts

@@ -11,6 +11,7 @@ export * from "./components/Fieldset"
 export * from "./components/Flourish"
 export * from "./components/Form"
 export * from "./components/Image"
+export * from "./components/LoadingSpinner"
 export * from "./components/Pill"
 export * from "./components/Popover"
 export * from "./components/Radio"