@coopdigital/react 1.5.1 → 1.7.0

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

@@ -0,0 +1,94 @@
+import React, { type DialogHTMLAttributes, type HTMLAttributes, type JSX, type ReactEventHandler, type ReactNode, type Ref } from "react";
+export interface DialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "closedby"> {
+    /** Content inside the Dialog.
+     *
+     * This should be a `<Dialog.Header>` and `<Dialog.Body>`, although arbitrary JSX children are also accepted. */
+    children: string | ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify how the dialog can be closed. Set this to `none` to disable escape key and click-outside behaviour.
+     *
+     * Default: `any` */
+    closedBy?: "any" | "none";
+    /** **(Optional)** Specify the Dialog id. Will be auto-generated if not set. */
+    id?: string;
+    /** Specify an accessible label for the dialog that will be read out by screen readers. */
+    label: string;
+    /** **(Optional)** Specify the Dialog mode.
+     *
+     * Default: `dialog`
+     */
+    mode?: "sheet" | "dialog";
+    /** **(Optional)** Specific a callback to run when the Dialog closes. */
+    onClose?: ReactEventHandler<HTMLDialogElement>;
+    /** **(Optional)** Specific a callback to run when the Dialog opens. */
+    onOpen?: ReactEventHandler<HTMLDialogElement>;
+    /** **(Optional)** Specific a callback to run when the Dialog opens or closes. */
+    onToggle?: ReactEventHandler<HTMLDialogElement>;
+    /** Specify the Dialog open state. This should reflect the value of your `useState`.
+     *
+     * Default: `false`
+     */
+    open: boolean;
+    /** **(Optional)** Specify the Dialog position. This only applies when the `mode` is set to `sheet`.
+     *
+     * Default: `bottom`
+     */
+    position?: "right" | "bottom" | "left";
+    /** **(Optional)** Specify a custom React ref for this component. */
+    ref?: Ref<HTMLDialogElement>;
+    /** **(Optional)** Specify an ARIA role for the dialog. Use `alertdialog` if the message includes urgent information that requires an explicit user action.
+     *
+     * Default: `dialog`
+     */
+    role?: "dialog" | "alertdialog";
+}
+interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** **(Optional)** Content inside the Dialog Header. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+    /** **(Optional)** Specify whether to render the close button.
+     *
+     * Default: `true`
+     */
+    close?: boolean;
+}
+interface DialogBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /** **(Optional)** Content inside the Dialog Body. */
+    children?: React.ReactNode;
+    /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+    className?: string;
+}
+declare const Dialog: {
+    ({ children, className, closedBy, label, mode, onClose, onOpen, onToggle, open, position, ref, role, ...props }: DialogProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+    Header: {
+        ({ children, className, close, ...props }: DialogHeaderProps): JSX.Element;
+        slot: {
+            name: string;
+        };
+    };
+    Body: {
+        ({ children, className, ...props }: DialogBodyProps): JSX.Element;
+        slot: {
+            name: string;
+        };
+    };
+};
+declare const DialogHeader: {
+    ({ children, className, close, ...props }: DialogHeaderProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+declare const DialogBody: {
+    ({ children, className, ...props }: DialogBodyProps): JSX.Element;
+    slot: {
+        name: string;
+    };
+};
+export default Dialog;
+export { Dialog, DialogBody, DialogHeader };

package/dist/components/Dialog/Dialog.js

@@ -0,0 +1,109 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import mergeRefs from 'merge-refs';
+import { createContext, useRef, useEffect, useContext } from 'react';
+import { hasUserBg } from '../../utils/index.js';
+import { CrossIcon } from '../icons/CrossIcon.js';
+
+const DialogContext = createContext({ ref: null });
+const useDialog = () => {
+    const ctx = useContext(DialogContext);
+    if (!ctx)
+        throw new Error("Dialog components must be used inside <Dialog>");
+    return ctx;
+};
+const Dialog = ({ children, className, closedBy = "any", label, mode = "dialog", onClose, onOpen, onToggle, open = false, position, ref, role, ...props }) => {
+    const dialogRef = useRef(null);
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog)
+            return;
+        if (open) {
+            dialog.showModal();
+        }
+        else if (!open) {
+            dialog.close();
+        }
+    }, [open]);
+    useEffect(() => {
+        const dialog = dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.current;
+        if (!dialog)
+            return;
+        /**
+         * https://bugs.webkit.org/show_bug.cgi?id=190870
+         *
+         * There is a bug in Safari that means scrollable areas are not
+         * automatically focusable. To work around this, we would need to
+         * add tabindex=0 to the dialog body container, even if there isn't
+         * enough content to scroll, which would negatively impact
+         * accessibility for other browsers. We decided the least-worst
+         * option was to have the dialog itself scrollable as this works
+         * everywhere we tested it. If Safari ever fixes the bug, we'll
+         * update the dialog to scroll the body only.
+         */
+        const setScrolledState = () => {
+            const y = dialog.scrollTop;
+            dialog.setAttribute("data-scrolled", y && y > 0 ? "true" : "false");
+        };
+        dialog.addEventListener("scroll", setScrolledState, {
+            passive: true,
+        });
+        return () => {
+            dialog.removeEventListener("scroll", setScrolledState);
+        };
+    }, [dialogRef]);
+    const handleToggle = (e) => {
+        if (e.newState === "open") {
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen(e);
+        }
+    };
+    const handleBackdropClick = (event) => {
+        const dialog = dialogRef === null || dialogRef === void 0 ? void 0 : dialogRef.current;
+        if (dialog && event.target === dialog && closedBy !== "none") {
+            dialog.close();
+        }
+    };
+    const handleCancel = (event) => {
+        if (closedBy === "none") {
+            event.preventDefault();
+        }
+    };
+    const componentProps = {
+        "aria-label": label,
+        "aria-modal": true,
+        className: clsx("coop-dialog", mode === "sheet" && "coop-sheet", !hasUserBg(className) && "bg-tint-grey", className),
+        closedby: closedBy,
+        "data-mode": mode,
+        "data-open": open,
+        "data-position": position,
+        role,
+        ...props,
+    };
+    return (jsx(DialogContext.Provider, { value: { ref: dialogRef }, children: jsx("dialog", { ...componentProps, onCancel: handleCancel, onClick: handleBackdropClick, onClose: onClose, onToggle: (e) => {
+                handleToggle(e);
+                onToggle === null || onToggle === void 0 ? void 0 : onToggle(e);
+            }, ref: mergeRefs(dialogRef, ref), children: children }) }));
+};
+const DialogHeader = ({ children, className, close = 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" })] }))] }));
+};
+const DialogBody = ({ children, className, ...props }) => {
+    const componentProps = {
+        className: clsx("coop-dialog--body", className),
+        ...props,
+    };
+    return jsx("div", { ...componentProps, children: children });
+};
+Dialog.slot = { name: "Dialog" };
+DialogHeader.slot = { name: "DialogHeader" };
+DialogBody.slot = { name: "DialogBody" };
+Dialog.Header = DialogHeader;
+Dialog.Body = DialogBody;
+
+export { Dialog, DialogBody, DialogHeader, Dialog as default };

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

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

package/dist/components/icons/WarningCircleFilledIcon.d.ts

@@ -0,0 +1,6 @@
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const WarningCircleFilledIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react").JSX.Element;
+export {};

package/dist/components/icons/WarningCircleFilledIcon.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useId } from '../../hooks/useId.js';
+
+const WarningCircleFilledIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
+    const componentProps = {
+        "aria-labelledby": alt ? uid + "__title" : undefined,
+        className: clsx("coop-icon", className),
+        "data-icon": "warning-circle-filled",
+        fill: fill !== null && fill !== void 0 ? fill : "currentColor",
+        id: uid,
+        role: alt ? "img" : undefined,
+        viewBox: "0 0 32 32",
+        ...props,
+    };
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("path", { clipRule: "evenodd", d: "M16 2c7.732 0 14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16 8.268 2 16 2m0 18a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m0-11.5a1.5 1.5 0 0 0-1.5 1.5v6a1.5 1.5 0 0 0 3 0v-6A1.5 1.5 0 0 0 16 8.5", fillRule: "evenodd" })] }));
+};
+
+export { WarningCircleFilledIcon };

package/dist/components/icons/WarningCircleIcon.d.ts

@@ -0,0 +1,6 @@
+import { type SVGProps } from "react";
+interface IconProps extends SVGProps<SVGSVGElement> {
+    alt?: string;
+}
+export declare const WarningCircleIcon: ({ alt, className, fill, id, ref, ...props }: IconProps) => import("react").JSX.Element;
+export {};

package/dist/components/icons/WarningCircleIcon.js

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { useId } from '../../hooks/useId.js';
+
+const WarningCircleIcon = ({ alt, className, fill, id, ref, ...props }) => {
+    const uid = useId(id);
+    const componentProps = {
+        "aria-labelledby": alt ? uid + "__title" : undefined,
+        className: clsx("coop-icon", className),
+        "data-icon": "warning-circle",
+        fill: fill !== null && fill !== void 0 ? fill : "currentColor",
+        id: uid,
+        role: alt ? "img" : undefined,
+        viewBox: "0 0 32 32",
+        ...props,
+    };
+    return (jsxs("svg", { ...componentProps, ref: ref, children: [alt ? jsx("title", { id: uid + "__title", children: alt }) : null, jsx("path", { d: "M16 17.5a1.5 1.5 0 0 1-1.5-1.5v-6a1.5 1.5 0 0 1 3 0v6a1.5 1.5 0 0 1-1.5 1.5M16 23a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" }), jsx("path", { clipRule: "evenodd", d: "M16 30C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14m0-2c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12", fillRule: "evenodd" })] }));
+};
+
+export { WarningCircleIcon };

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

@@ -101,6 +101,8 @@ export { TruckIcon } from "./TruckIcon";
 export { UserWipeIcon } from "./UserWipeIcon";
 export { VoucherFilledIcon } from "./VoucherFilledIcon";
 export { VoucherIcon } from "./VoucherIcon";
+export { WarningCircleFilledIcon } from "./WarningCircleFilledIcon";
+export { WarningCircleIcon } from "./WarningCircleIcon";
 export { WarningFilledIcon } from "./WarningFilledIcon";
 export { WarningIcon } from "./WarningIcon";
 export { WifiIcon } from "./WifiIcon";

package/dist/components/icons/index.js

@@ -101,6 +101,8 @@ export { TruckIcon } from './TruckIcon.js';
 export { UserWipeIcon } from './UserWipeIcon.js';
 export { VoucherFilledIcon } from './VoucherFilledIcon.js';
 export { VoucherIcon } from './VoucherIcon.js';
+export { WarningCircleFilledIcon } from './WarningCircleFilledIcon.js';
+export { WarningCircleIcon } from './WarningCircleIcon.js';
 export { WarningFilledIcon } from './WarningFilledIcon.js';
 export { WarningIcon } from './WarningIcon.js';
 export { WifiIcon } from './WifiIcon.js';

package/dist/index.d.ts

@@ -4,6 +4,7 @@ export * from "./components/Button";
 export * from "./components/Card";
 export * from "./components/Checkbox";
 export * from "./components/DatePicker";
+export * from "./components/Dialog";
 export * from "./components/Expandable";
 export * from "./components/Field";
 export * from "./components/Fieldset";

package/dist/index.js

@@ -4,6 +4,7 @@ export { Button } from './components/Button/Button.js';
 export { Card, CardBadge, CardBody, CardHeading, CardImage, CardLabel } from './components/Card/Card.js';
 export { Checkbox } from './components/Checkbox/Checkbox.js';
 export { DatePicker } from './components/DatePicker/DatePicker.js';
+export { Dialog, DialogBody, DialogHeader } from './components/Dialog/Dialog.js';
 export { Expandable, ExpandableContent, ExpandableSummary } from './components/Expandable/Expandable.js';
 export { Field, FieldError, FieldHint, FieldLabel } from './components/Field/Field.js';
 export { Fieldset, FieldsetError, FieldsetFields, FieldsetHint, FieldsetLegend } from './components/Fieldset/Fieldset.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -38,6 +38,8 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",
+    "test:behaviour": "./test-utils/run-playwright-tests.sh -g behaviour",
+    "test:behaviour:ui": "npm run test:behaviour -- --ui",
     "test:avt": "./test-utils/run-playwright-tests.sh -g avt",
     "test:avt:ui": "npm run test:avt -- --ui",
     "test:vrt": "ENVIRONMENT=docker ./test-utils/run-playwright-tests.sh -g vrt --workers 4 --timeout 5000 --fully-parallel",
@@ -85,11 +87,12 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.3.3",
+    "@coopdigital/styles": "^1.4.0",
     "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-slot": "^1.3.0",
     "clsx": "^2.1.1",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.0"
   },
-  "gitHead": "002d135011d4864e286bc1f8e7f0e23a394e5e33"
+  "gitHead": "9c6acadccf25d1fe890f403e198a3bce9f3661e7"
 }

package/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,256 @@
+"use client"
+import clsx from "clsx"
+import mergeRefs from "merge-refs"
+import React, {
+  createContext,
+  type DialogHTMLAttributes,
+  type HTMLAttributes,
+  type JSX,
+  type MouseEvent,
+  type ReactEventHandler,
+  type ReactNode,
+  type Ref,
+  type RefObject,
+  type ToggleEvent,
+  useContext,
+  useEffect,
+  useRef,
+} from "react"
+
+import { hasUserBg } from "../../utils"
+import { CrossIcon } from "../icons"
+
+const DialogContext = createContext<{
+  ref: RefObject<HTMLDialogElement | null> | null
+}>({ ref: null })
+
+const useDialog = () => {
+  const ctx = useContext(DialogContext)
+  if (!ctx) throw new Error("Dialog components must be used inside <Dialog>")
+  return ctx
+}
+
+export interface DialogProps extends Omit<DialogHTMLAttributes<HTMLDialogElement>, "closedby"> {
+  /** Content inside the Dialog.
+   *
+   * This should be a `<Dialog.Header>` and `<Dialog.Body>`, although arbitrary JSX children are also accepted. */
+  children: string | ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify how the dialog can be closed. Set this to `none` to disable escape key and click-outside behaviour.
+   *
+   * Default: `any` */
+  closedBy?: "any" | "none"
+  /** **(Optional)** Specify the Dialog id. Will be auto-generated if not set. */
+  id?: string
+  /** Specify an accessible label for the dialog that will be read out by screen readers. */
+  label: string
+  /** **(Optional)** Specify the Dialog mode.
+   *
+   * Default: `dialog`
+   */
+  mode?: "sheet" | "dialog"
+  /** **(Optional)** Specific a callback to run when the Dialog closes. */
+  onClose?: ReactEventHandler<HTMLDialogElement>
+  /** **(Optional)** Specific a callback to run when the Dialog opens. */
+  onOpen?: ReactEventHandler<HTMLDialogElement>
+  /** **(Optional)** Specific a callback to run when the Dialog opens or closes. */
+  onToggle?: ReactEventHandler<HTMLDialogElement>
+  /** Specify the Dialog open state. This should reflect the value of your `useState`.
+   *
+   * Default: `false`
+   */
+  open: boolean
+  /** **(Optional)** Specify the Dialog position. This only applies when the `mode` is set to `sheet`.
+   *
+   * Default: `bottom`
+   */
+  position?: "right" | "bottom" | "left"
+  /** **(Optional)** Specify a custom React ref for this component. */
+  ref?: Ref<HTMLDialogElement>
+  /** **(Optional)** Specify an ARIA role for the dialog. Use `alertdialog` if the message includes urgent information that requires an explicit user action.
+   *
+   * Default: `dialog`
+   */
+  role?: "dialog" | "alertdialog"
+}
+
+interface DialogHeaderProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Content inside the Dialog Header. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+  /** **(Optional)** Specify whether to render the close button.
+   *
+   * Default: `true`
+   */
+  close?: boolean
+}
+interface DialogBodyProps extends HTMLAttributes<HTMLDivElement> {
+  /** **(Optional)** Content inside the Dialog Body. */
+  children?: React.ReactNode
+  /** **(Optional)** Specify additional CSS classes to be applied to the component. */
+  className?: string
+}
+
+const Dialog = ({
+  children,
+  className,
+  closedBy = "any",
+  label,
+  mode = "dialog",
+  onClose,
+  onOpen,
+  onToggle,
+  open = false,
+  position,
+  ref,
+  role,
+  ...props
+}: DialogProps): JSX.Element => {
+  const dialogRef = useRef<HTMLDialogElement>(null)
+
+  useEffect(() => {
+    const dialog = dialogRef.current
+    if (!dialog) return
+
+    if (open) {
+      dialog.showModal()
+    } else if (!open) {
+      dialog.close()
+    }
+  }, [open])
+
+  useEffect(() => {
+    const dialog = dialogRef?.current
+    if (!dialog) return
+
+    /**
+     * https://bugs.webkit.org/show_bug.cgi?id=190870
+     *
+     * There is a bug in Safari that means scrollable areas are not
+     * automatically focusable. To work around this, we would need to
+     * add tabindex=0 to the dialog body container, even if there isn't
+     * enough content to scroll, which would negatively impact
+     * accessibility for other browsers. We decided the least-worst
+     * option was to have the dialog itself scrollable as this works
+     * everywhere we tested it. If Safari ever fixes the bug, we'll
+     * update the dialog to scroll the body only.
+     */
+
+    const setScrolledState = () => {
+      const y = dialog.scrollTop
+      dialog.setAttribute("data-scrolled", y && y > 0 ? "true" : "false")
+    }
+
+    dialog.addEventListener("scroll", setScrolledState, {
+      passive: true,
+    })
+
+    return () => {
+      dialog.removeEventListener("scroll", setScrolledState)
+    }
+  }, [dialogRef])
+
+  const handleToggle = (e: ToggleEvent<HTMLDialogElement>) => {
+    if (e.newState === "open") {
+      onOpen?.(e)
+    }
+  }
+
+  const handleBackdropClick = (event: MouseEvent<HTMLDialogElement>) => {
+    const dialog = dialogRef?.current
+    if (dialog && event.target === dialog && closedBy !== "none") {
+      dialog.close()
+    }
+  }
+
+  const handleCancel = (event: MouseEvent<HTMLDialogElement>) => {
+    if (closedBy === "none") {
+      event.preventDefault()
+    }
+  }
+
+  const componentProps = {
+    "aria-label": label,
+    "aria-modal": true,
+    className: clsx(
+      "coop-dialog",
+      mode === "sheet" && "coop-sheet",
+      !hasUserBg(className) && "bg-tint-grey",
+      className
+    ),
+    closedby: closedBy,
+    "data-mode": mode,
+    "data-open": open,
+    "data-position": position,
+    role,
+    ...props,
+  }
+
+  return (
+    <DialogContext.Provider value={{ ref: dialogRef }}>
+      {/*eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
+      <dialog
+        {...componentProps}
+        onCancel={handleCancel}
+        onClick={handleBackdropClick}
+        onClose={onClose}
+        onToggle={(e) => {
+          handleToggle(e)
+          onToggle?.(e)
+        }}
+        ref={mergeRefs(dialogRef, ref)}
+      >
+        {children}
+      </dialog>
+    </DialogContext.Provider>
+  )
+}
+
+const DialogHeader = ({
+  children,
+  className,
+  close = true,
+  ...props
+}: DialogHeaderProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-dialog--header", !hasUserBg(className) && "bg-tint-grey", className),
+    ...props,
+  }
+
+  const dialog = useDialog()
+
+  return (
+    <div {...componentProps}>
+      {children}
+      {close && (
+        <button
+          aria-label="Close"
+          className="coop-dialog--close"
+          onClick={() => dialog.ref?.current?.close()}
+        >
+          Close <CrossIcon role="presentation" />
+        </button>
+      )}
+    </div>
+  )
+}
+
+const DialogBody = ({ children, className, ...props }: DialogBodyProps): JSX.Element => {
+  const componentProps = {
+    className: clsx("coop-dialog--body", className),
+    ...props,
+  }
+  return <div {...componentProps}>{children}</div>
+}
+
+Dialog.slot = { name: "Dialog" }
+DialogHeader.slot = { name: "DialogHeader" }
+DialogBody.slot = { name: "DialogBody" }
+
+Dialog.Header = DialogHeader
+Dialog.Body = DialogBody
+
+export default Dialog
+export { Dialog, DialogBody, DialogHeader }

package/src/components/Dialog/index.ts

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

package/src/components/icons/WarningCircleFilledIcon.tsx

@@ -0,0 +1,32 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const WarningCircleFilledIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "__title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "warning-circle-filled",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
+      <path
+        clipRule="evenodd"
+        d="M16 2c7.732 0 14 6.268 14 14s-6.268 14-14 14S2 23.732 2 16 8.268 2 16 2m0 18a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m0-11.5a1.5 1.5 0 0 0-1.5 1.5v6a1.5 1.5 0 0 0 3 0v-6A1.5 1.5 0 0 0 16 8.5"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}

package/src/components/icons/WarningCircleIcon.tsx

@@ -0,0 +1,33 @@
+import clsx from "clsx"
+import { type SVGProps } from "react"
+
+import { useId } from "../../hooks/useId"
+
+interface IconProps extends SVGProps<SVGSVGElement> {
+  alt?: string
+}
+
+export const WarningCircleIcon = ({ alt, className, fill, id, ref, ...props }: IconProps) => {
+  const uid = useId(id)
+  const componentProps = {
+    "aria-labelledby": alt ? uid + "__title" : undefined,
+    className: clsx("coop-icon", className),
+    "data-icon": "warning-circle",
+    fill: fill ?? "currentColor",
+    id: uid,
+    role: alt ? "img" : undefined,
+    viewBox: "0 0 32 32",
+    ...props,
+  }
+  return (
+    <svg {...componentProps} ref={ref}>
+      {alt ? <title id={uid + "__title"}>{alt}</title> : null}
+      <path d="M16 17.5a1.5 1.5 0 0 1-1.5-1.5v-6a1.5 1.5 0 0 1 3 0v6a1.5 1.5 0 0 1-1.5 1.5M16 23a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" />
+      <path
+        clipRule="evenodd"
+        d="M16 30C8.268 30 2 23.732 2 16S8.268 2 16 2s14 6.268 14 14-6.268 14-14 14m0-2c6.627 0 12-5.373 12-12S22.627 4 16 4 4 9.373 4 16s5.373 12 12 12"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}

package/src/components/icons/index.ts

@@ -101,6 +101,8 @@ export { TruckIcon } from "./TruckIcon"
 export { UserWipeIcon } from "./UserWipeIcon"
 export { VoucherFilledIcon } from "./VoucherFilledIcon"
 export { VoucherIcon } from "./VoucherIcon"
+export { WarningCircleFilledIcon } from "./WarningCircleFilledIcon"
+export { WarningCircleIcon } from "./WarningCircleIcon"
 export { WarningFilledIcon } from "./WarningFilledIcon"
 export { WarningIcon } from "./WarningIcon"
 export { WifiIcon } from "./WifiIcon"

package/src/index.ts

@@ -4,6 +4,7 @@ export * from "./components/Button"
 export * from "./components/Card"
 export * from "./components/Checkbox"
 export * from "./components/DatePicker"
+export * from "./components/Dialog"
 export * from "./components/Expandable"
 export * from "./components/Field"
 export * from "./components/Fieldset"