@coopdigital/react 1.7.2 → 1.8.0

package/dist/components/Dialog/Dialog.d.ts

@@ -52,7 +52,7 @@ interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
      *
      * Default: `true`
      */
-    close?: boolean;
+    closeButton?: boolean;
 }
 interface DialogBodyProps extends HTMLAttributes<HTMLDivElement> {
     /** **(Optional)** Content inside the Dialog Body. */
@@ -66,7 +66,7 @@ declare const Dialog: {
         name: string;
     };
     Header: {
-        ({ children, className, close, ...props }: DialogHeaderProps): JSX.Element;
+        ({ children, className, closeButton, ...props }: DialogHeaderProps): JSX.Element;
         slot: {
             name: string;
         };
@@ -79,7 +79,7 @@ declare const Dialog: {
     };
 };
 declare const DialogHeader: {
-    ({ children, className, close, ...props }: DialogHeaderProps): JSX.Element;
+    ({ children, className, closeButton, ...props }: DialogHeaderProps): JSX.Element;
     slot: {
         name: string;
     };

package/dist/components/Dialog/Dialog.js

@@ -85,13 +85,13 @@ const Dialog = ({ children, className, closedBy = "any", label, mode = "dialog",
                 onToggle === null || onToggle === void 0 ? void 0 : onToggle(e);
             }, ref: mergeRefs(dialogRef, ref), children: children }) }));
 };
-const DialogHeader = ({ children, className, close = true, ...props }) => {
+const DialogHeader = ({ children, className, closeButton = true, ...props }) => {
     const componentProps = {
         className: clsx("coop-dialog--header", !hasUserBg(className) && "bg-tint-grey", className),
         ...props,
     };
     const dialog = useDialog();
-    return (jsxs("div", { ...componentProps, children: [children, close && (jsxs("button", { "aria-label": "Close", className: "coop-dialog--close", onClick: () => { var _a, _b; return (_b = (_a = dialog.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.close(); }, children: ["Close ", jsx(CrossIcon, { role: "presentation" })] }))] }));
+    return (jsxs("div", { ...componentProps, children: [children, closeButton && (jsxs("button", { "aria-label": "Close", className: "coop-dialog--close", onClick: () => { var _a, _b; return (_b = (_a = dialog.ref) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.close(); }, children: ["Close ", jsx(CrossIcon, { role: "presentation" })] }))] }));
 };
 const DialogBody = ({ children, className, ...props }) => {
     const componentProps = {

package/dist/components/Logo/Logo.d.ts

@@ -0,0 +1,17 @@
+import type { SVGProps } from "react";
+export interface LogoProps extends SVGProps<SVGSVGElement> {
+    /** **(Optional)** Specify the Logo alternative text. */
+    alt?: string;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify the Logo fill color.
+     *
+     * Default: brand-blue. */
+    fill?: "white" | "black" | "brand-blue";
+    /** **(Optional)** Specify the Logo height. */
+    height?: number;
+    /** **(Optional)** Specify the Logo width. */
+    width?: number;
+}
+export declare const Logo: ({ alt, className, fill, height, id, ref, width, ...props }: LogoProps) => import("react").JSX.Element;
+export default Logo;

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

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.7.2",
+  "version": "1.8.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -100,11 +100,11 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.4.0",
+    "@coopdigital/styles": "^1.5.0",
     "@radix-ui/react-popover": "^1.1.17",
     "clsx": "^2.1.1",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "fac26ca73996e358b231786d2af24deff41558ff"
+  "gitHead": "6a99f896553ea4541e8337bfa290d1838853a242"
 }

package/src/components/Dialog/Dialog.tsx

@@ -84,7 +84,7 @@ interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
    *
    * Default: `true`
    */
-  close?: boolean
+  closeButton?: boolean
 }
 interface DialogBodyProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Content inside the Dialog Body. */
@@ -211,7 +211,7 @@ const Dialog = ({
 const DialogHeader = ({
   children,
   className,
-  close = true,
+  closeButton = true,
   ...props
 }: DialogHeaderProps): JSX.Element => {
   const componentProps = {
@@ -224,7 +224,7 @@ const DialogHeader = ({
   return (
     <div {...componentProps}>
       {children}
-      {close && (
+      {closeButton && (
         <button
           aria-label="Close"
           className="coop-dialog--close"

package/src/components/Logo/Logo.tsx

@@ -0,0 +1,49 @@
+import type { SVGProps } from "react"
+
+import clsx from "clsx"
+export interface LogoProps extends SVGProps<SVGSVGElement> {
+  /** **(Optional)** Specify the Logo alternative text. */
+  alt?: string
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify the Logo fill color.
+   *
+   * Default: brand-blue. */
+  fill?: "white" | "black" | "brand-blue"
+  /** **(Optional)** Specify the Logo height. */
+  height?: number
+  /** **(Optional)** Specify the Logo width. */
+  width?: number
+}
+
+export const Logo = ({
+  alt = "Co-op",
+  className,
+  fill = "brand-blue",
+  height,
+  id,
+  ref,
+  width,
+  ...props
+}: LogoProps) => {
+  const componentProps = {
+    alt,
+    className: clsx("coop-logo", className),
+    fill: fill === "brand-blue" ? undefined : `var(--color-${fill})`,
+    height,
+    id,
+    role: "img",
+    viewBox: "0 0 38 40",
+    width,
+    ...props,
+  }
+
+  return (
+    <svg {...componentProps} ref={ref}>
+      <title>{alt}</title>
+      <path d="M37.8 8.8c0-1.4-.2-2.8-.6-4.2-.5-1.7-1.8-3-3.4-3.7a14.9 14.9 0 0 0-10.2 0c-1.7.6-2.9 2-3.4 3.7-.8 2.8-.8 5.7 0 8.5.5 1.7 1.8 3 3.4 3.7 1.6.6 3.4.9 5.1.8 1.7 0 3.5-.3 5.1-.8 1.7-.6 2.9-2 3.4-3.7.4-1.5.6-2.9.6-4.3zm-5.5 0c0 .7-.1 1.4-.3 2-.3.9-1 1.6-2 1.8-.9.2-1.8.2-2.6 0-.9-.2-1.7-.8-2-1.8-.4-1.3-.4-2.8 0-4.1.3-.9 1-1.6 2-1.8.9-.2 1.8-.2 2.6 0 .9.2 1.7.8 2 1.8.2.7.3 1.4.3 2.1m-14.6 23c.8-2.8.8-5.7 0-8.5-.5-1.7-1.8-3-3.4-3.7a14.9 14.9 0 0 0-10.2 0c-1.7.6-2.9 2-3.4 3.7-.8 2.8-.8 5.7 0 8.5.5 1.7 1.8 3 3.4 3.7 3.3 1.2 6.9 1.2 10.2 0 1.6-.6 2.9-2 3.4-3.7m-4.9-4.2c0 .7-.1 1.4-.3 2-.3.9-1 1.6-2 1.8-.9.2-1.8.2-2.6 0-.9-.2-1.7-.8-2-1.8-.4-1.4-.4-2.8 0-4.1.3-.9 1-1.6 2-1.8.9-.2 1.8-.2 2.6 0 .9.2 1.7.8 2 1.8.2.7.3 1.4.3 2.1m0-18.9h5.5c0-1.4-.2-2.8-.6-4.2-.5-1.7-1.8-3-3.4-3.7C11-.3 7.4-.3 4.1.9c-1.7.6-2.9 2-3.4 3.7-.8 2.8-.8 5.7 0 8.5.5 1.7 1.8 3 3.4 3.7 1.6.6 3.4.8 5.1.8s3.5-.3 5.1-.8c1.7-.6 2.9-2 3.4-3.7.1-.2.1-.5.2-.7L12.7 10c-.1.3-.1.6-.2.9-.3.9-1 1.6-2 1.8-.9.2-1.8.2-2.6 0-.9-.2-1.7-.8-2-1.8-.4-1.4-.4-2.9 0-4.2.3-.9 1-1.6 2-1.8.9-.2 1.8-.2 2.6 0 .9.2 1.7.8 2 1.8.2.7.3 1.3.3 2m7.4 14.6c-.4 1.4-.6 2.8-.6 4.2V40h5.5V27.6c0-.7.1-1.4.3-2 .3-.9 1-1.6 2-1.8.9-.2 1.8-.2 2.6 0 .9.2 1.7.8 2 1.8.4 1.4.4 2.8 0 4.1-.3.9-1 1.6-1.9 1.8-.9.2-1.8.2-2.6 0-.2-.1-.4-.1-.5-.2l1.9 5.1c1.7 0 3.5-.3 5.1-.8 1.7-.6 2.9-2 3.4-3.7.8-2.8.8-5.7 0-8.5-.5-1.7-1.8-3-3.4-3.7a14.9 14.9 0 0 0-10.2 0c-1.9.6-3.1 2-3.6 3.6"></path>
+    </svg>
+  )
+}
+
+export default Logo

package/src/components/Logo/index.ts

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