@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/components/Alert/Alert.d.ts

@@ -0,0 +1,71 @@
+import { IressIconProps } from '../Icon';
+import { IressTextProps } from '../Text';
+import { ReactNode, MouseEvent } from 'react';
+import { Statuses } from '../../types';
+import { IressButtonProps } from '../Button';
+export interface IressAlertButtonProps extends Omit<IressButtonProps, 'mode' | 'status'> {
+    mode?: 'secondary' | 'tertiary';
+}
+export interface IressAlertProps extends Omit<IressTextProps, 'element'> {
+    /**
+     * Actions to display in the alert. These will be rendered as buttons with opinionated styling.
+     * If you want to use custom buttons, use the `footer` prop instead.
+     **/
+    actions?: IressAlertButtonProps[];
+    /**
+     * Contents of the alert. Is automatically wrapped in `<IressText />` and will inherit its styling.
+     **/
+    children?: ReactNode;
+    /**
+     * If true, the alert will be dismissed and unrendered from the DOM. Use for uncontrolled dismissal of the alert, where the component manages its own dismissed state internally.
+     **/
+    defaultClosed?: boolean;
+    /**
+     * If true, the alert will be dismissed and unrendered from the DOM. Use for controlled dismissal of the alert, where the parent component manages the dismissed state and passes it down via this prop.
+     **/
+    closed?: boolean;
+    /**
+     * Optional override for the default close button label "Close".
+     */
+    closeLabel?: string;
+    /**
+     * Buttons and controls for the alert.
+     * @deprecated Use `actions` instead for buttons with opinionated styling. If you need other footer content, use the `children` prop instead.
+     **/
+    footer?: ReactNode;
+    /**
+     * Text for alert heading. If a string, it will use a heading with level 2.
+     **/
+    heading?: ReactNode;
+    /**
+     * Icon to display in the alert.
+     * If set to `false`, no icon will be displayed.
+     * If not provided, the icon will be determined by the `status` prop.
+     **/
+    icon?: IressIconProps['name'] | false;
+    /**
+     * If true, the alert will have a layout that supports longer content, with increased spacing and the icon aligned to the top of the alert instead of centered. Should be used when the content of the alert is more than a couple of sentences.
+     */
+    multiLine?: boolean;
+    /**
+     * Icon to display in the alert.
+     * If set to `false`, no icon will be displayed.
+     * If not provided, the icon will be determined by the `status` prop.
+     **/
+    onClose?: (e?: MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Alert type - danger, info, success or warning.
+     * @default info
+     */
+    status?: Statuses | 'neutral';
+    /**
+     * Variants of the alert, allowing it to be styled differently based on where its used in the application.
+     * - Sidebar: The icon will be aligned to the heading, and the text will appear below the icon.
+     * - Full-width: The border will be removed, except for the bottom border.
+     */
+    variant?: 'sidebar' | 'full-width';
+}
+export declare const IressAlert: {
+    ({ actions, children, className, defaultClosed, closed: closedProp, closeLabel, footer, heading, icon: iconProp, multiLine, onClose, status, variant, ...restProps }: IressAlertProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/components/Alert/Alert.js

@@ -1,109 +1,118 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import { useMemo as k, createElement as y } from "react";
-import { IressIcon as j } from "../Icon/Icon.js";
+import { jsx as o, jsxs as l } from "react/jsx-runtime";
+import { useMemo as V, createElement as _ } from "react";
+import { IressIcon as F } from "../Icon/Icon.js";
 import "../Icon/Icon.styles.js";
+import "../Icon/IconProvider.js";
 import { IressText as u } from "../Text/Text.js";
-import { propagateTestid as h } from "../../helpers/utility/propagateTestid.js";
-import { alert as w } from "./Alert.styles.js";
-import { c as N } from "../../cx-DN21T1EH.js";
-import { GlobalCSSClass as B } from "../../enums.js";
-import { I as E } from "../../Button-mmhMLwp9.js";
-import { IressCloseButton as V } from "../Button/CloseButton/CloseButton.js";
-import "../Inline/Inline.styles.js";
-import { IressInline as $ } from "../Inline/Inline.js";
-import { useControlledState as q } from "../../hooks/useControlledState.js";
-const F = {
-  danger: "ban",
-  info: "info-square",
-  success: "check",
-  warning: "exclamation-triangle"
-}, Y = ({
+import { propagateTestid as I } from "../../helpers/utility/propagateTestid.js";
+import { alert as x } from "./Alert.styles.js";
+import { c as G } from "../../css-DVJ-ALYD.js";
+import { c as A } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as M } from "../../enums.js";
+import { I as O } from "../../Button-C0p8bEXn.js";
+import { IressCloseButton as R } from "../Button/CloseButton/CloseButton.js";
+import { useControlledState as $ } from "../../hooks/useControlledState.js";
+import { s as q } from "../../is-valid-prop-C5D641yn.js";
+const z = {
+  danger: "cancel",
+  info: "info",
+  success: "check_circle",
+  warning: "error",
+  neutral: "info"
+}, D = ({
   actions: n,
-  children: I,
-  className: x,
-  defaultDismissed: g,
-  dismissed: b,
-  footer: c,
-  heading: o,
-  icon: a,
-  onDismiss: d,
-  status: r = "info",
-  variant: m,
-  ...l
+  children: y,
+  className: C,
+  defaultClosed: g,
+  closed: S,
+  closeLabel: T,
+  footer: d,
+  heading: t,
+  icon: c,
+  multiLine: p = !1,
+  onClose: f,
+  status: s = "info",
+  variant: a,
+  ...i
 }) => {
-  const C = !!d, e = w({ status: r, variant: m }), p = !!n?.length, A = !!c || p, { value: v, setValue: S } = q({
+  const b = !!f, N = !!n?.length, m = !!d || N, e = x({ hasFooter: m, multiLine: p, status: s, variant: a }), v = x.raw({ hasFooter: m, multiLine: p, status: s, variant: a }), [k, w] = q(i), { value: j, setValue: B } = $({
     component: "IressAlert",
     defaultValue: g,
-    propName: "dismissed",
-    value: b
-  }), f = k(() => {
-    if (a === !1)
+    propName: "closed",
+    value: S
+  }), h = V(() => {
+    if (c === !1)
       return null;
-    const s = a ?? F[r];
-    return /* @__PURE__ */ t(
-      j,
+    const r = c ?? z[s];
+    return /* @__PURE__ */ o(
+      F,
       {
-        name: s,
-        screenreaderText: `${r}: `,
-        fixedWidth: !0,
+        name: r,
+        screenreaderText: `${s}: `,
         className: e.icon
       }
     );
-  }, [e.icon, a, r]);
-  return v ? null : /* @__PURE__ */ i(
+  }, [e.icon, c, s]);
+  return j ? null : /* @__PURE__ */ l(
     u,
     {
-      className: N(x, e.alert, B.Alert),
-      ...l,
+      className: A(
+        C,
+        G(v.alert, k),
+        M.Alert
+      ),
+      ...w,
       children: [
-        m !== "sidebar" && f,
-        /* @__PURE__ */ i("div", { className: e.wrapper, children: [
-          o && /* @__PURE__ */ t(
+        a !== "sidebar" && h,
+        /* @__PURE__ */ l("div", { className: e.wrapper, children: [
+          t && /* @__PURE__ */ o(
             "div",
             {
               className: e.heading,
-              "data-testid": h(l["data-testid"], "heading"),
-              children: typeof o == "string" ? /* @__PURE__ */ i(u, { element: "h2", className: e.heading, children: [
-                m === "sidebar" && f,
+              "data-testid": I(i["data-testid"], "heading"),
+              children: typeof t == "string" ? /* @__PURE__ */ l(u, { element: "h2", className: e.heading, children: [
+                a === "sidebar" && h,
                 " ",
-                o
-              ] }) : o
+                t
+              ] }) : t
             }
           ),
-          /* @__PURE__ */ t("div", { className: e.children, children: I }),
-          A && /* @__PURE__ */ i(
+          /* @__PURE__ */ o("div", { className: e.children, children: y }),
+          m && /* @__PURE__ */ l(
             "div",
             {
               className: e.footer,
-              "data-testid": h(l["data-testid"], "footer"),
+              "data-testid": I(i["data-testid"], "footer"),
               children: [
-                p && /* @__PURE__ */ t($, { gap: "sm", pb: "spacing.1", children: n?.map((s, T) => /* @__PURE__ */ y(
-                  E,
+                N && /* @__PURE__ */ o("div", { className: e.footerActions, children: n?.map((r, E) => /* @__PURE__ */ _(
+                  O,
                   {
-                    ...s,
-                    className: N(s.className, e.action),
-                    color: `colour.system.${r}.text`,
-                    key: T
+                    ...r,
+                    className: A(r.className, e.action),
+                    status: s,
+                    key: E
                   }
                 )) }),
-                c
+                d
               ]
             }
           )
         ] }),
-        C && /* @__PURE__ */ t(
-          V,
+        b && /* @__PURE__ */ o(
+          R,
           {
             className: e.dismiss,
-            onClick: (s) => {
-              d?.(s), S(!0);
-            }
+            onClick: (r) => {
+              f?.(r), B(!0);
+            },
+            screenreaderText: T
           }
         )
       ]
     }
   );
 };
+D.displayName = "IressAlert";
 export {
-  Y as IressAlert
+  D as IressAlert
 };

package/dist/components/Alert/Alert.styles.d.ts

@@ -0,0 +1,238 @@
+export declare const alert: import('../../styled-system/types').SlotRecipeRuntimeFn<"children" | "footer" | "alert" | "heading" | "icon" | "wrapper" | "footerActions" | "action" | "dismiss", {
+    hasFooter: {
+        true: {
+            dismiss: {
+                my: "-spacing.1";
+            };
+        };
+    };
+    multiLine: {
+        true: {
+            wrapper: {
+                md: {
+                    flexDirection: "column";
+                };
+            };
+            footer: {
+                md: {
+                    pt: "spacing.1";
+                    ml: "spacing.0";
+                };
+            };
+            action: {
+                textStyle: "typography.body.md.medium";
+            };
+        };
+    };
+    status: {
+        danger: {
+            alert: {
+                backgroundColor: "colour.system.danger.surface";
+                color: "colour.neutral.80";
+                borderColor: "colour.system.danger.text";
+            };
+            heading: {
+                color: "colour.system.danger.text";
+            };
+            children: {
+                color: "colour.system.danger.text";
+            };
+            icon: {
+                color: "colour.system.danger.text";
+            };
+            dismiss: {
+                color: "colour.system.danger.text";
+                _hover: {
+                    bg: "colour.system.danger.surfaceHover";
+                    borderColor: "colour.system.danger.surfaceHover";
+                };
+            };
+            action: {
+                '&.button__root--mode_secondary': {
+                    bg: "colour.system.danger.fill";
+                    borderColor: "colour.system.danger.fill";
+                    color: "colour.system.danger.onFill";
+                    _hover: {
+                        bg: "colour.system.danger.fillHover";
+                        borderColor: "colour.system.danger.fillHover";
+                    };
+                    _active: {
+                        boxShadow: "color-mix(in srgb, {colors.colour.system.danger.fill}, transparent 80%) 0px 0px 0px 3px";
+                    };
+                };
+            };
+        };
+        info: {
+            alert: {
+                backgroundColor: "colour.system.info.surface";
+                color: "colour.neutral.80";
+                borderColor: "colour.system.info.text";
+            };
+            heading: {
+                color: "colour.system.info.text";
+            };
+            children: {
+                color: "colour.system.info.text";
+            };
+            icon: {
+                color: "colour.system.info.text";
+            };
+            dismiss: {
+                color: "colour.system.info.text";
+                _hover: {
+                    bg: "colour.system.info.surfaceHover";
+                    borderColor: "colour.system.info.surfaceHover";
+                };
+            };
+            action: {
+                '&.button__root--mode_secondary': {
+                    bg: "colour.system.info.fill";
+                    borderColor: "colour.system.info.fill";
+                    color: "colour.system.info.onFill";
+                    _hover: {
+                        bg: "colour.system.info.fillHover";
+                        borderColor: "colour.system.info.fillHover";
+                    };
+                    _active: {
+                        boxShadow: "color-mix(in srgb, {colors.colour.system.info.fill}, transparent 80%) 0px 0px 0px 3px";
+                    };
+                };
+            };
+        };
+        success: {
+            alert: {
+                backgroundColor: "colour.system.success.surface";
+                color: "colour.neutral.80";
+                borderColor: "colour.system.success.text";
+            };
+            heading: {
+                color: "colour.system.success.text";
+            };
+            children: {
+                color: "colour.system.success.text";
+            };
+            icon: {
+                color: "colour.system.success.text";
+            };
+            dismiss: {
+                color: "colour.system.success.text";
+                _hover: {
+                    bg: "colour.system.success.surfaceHover";
+                    borderColor: "colour.system.success.surfaceHover";
+                };
+            };
+            action: {
+                '&.button__root--mode_secondary': {
+                    bg: "colour.system.success.fill";
+                    borderColor: "colour.system.success.fill";
+                    color: "colour.system.success.onFill";
+                    _hover: {
+                        bg: "colour.system.success.fillHover";
+                        borderColor: "colour.system.success.fillHover";
+                    };
+                    _active: {
+                        boxShadow: "color-mix(in srgb, {colors.colour.system.success.fill}, transparent 80%) 0px 0px 0px 3px";
+                    };
+                };
+            };
+        };
+        warning: {
+            alert: {
+                backgroundColor: "colour.system.warning.surface";
+                color: "colour.neutral.80";
+                borderColor: "colour.system.warning.text";
+            };
+            heading: {
+                color: "colour.system.warning.text";
+            };
+            children: {
+                color: "colour.system.warning.text";
+            };
+            icon: {
+                color: "colour.system.warning.text";
+            };
+            dismiss: {
+                color: "colour.system.warning.text";
+                _hover: {
+                    bg: "colour.system.warning.surfaceHover";
+                    borderColor: "colour.system.warning.surfaceHover";
+                };
+            };
+            action: {
+                '&.button__root--mode_secondary': {
+                    bg: "colour.system.warning.fill";
+                    borderColor: "colour.system.warning.fill";
+                    color: "colour.system.warning.onFill";
+                    _hover: {
+                        bg: "colour.system.warning.fillHover";
+                        borderColor: "colour.system.warning.fillHover";
+                    };
+                    _active: {
+                        boxShadow: "color-mix(in srgb, {colors.colour.system.warning.fill}, transparent 80%) 0px 0px 0px 3px";
+                    };
+                };
+            };
+        };
+        neutral: {
+            alert: {
+                backgroundColor: "colour.neutral.20";
+                color: "colour.neutral.90";
+                borderColor: "colour.neutral.90";
+            };
+            heading: {
+                color: "colour.neutral.90";
+            };
+            children: {
+                color: "colour.neutral.90";
+            };
+            icon: {
+                color: "colour.neutral.90";
+            };
+            dismiss: {
+                color: "colour.neutral.90";
+                _hover: {
+                    bg: "colour.neutral.30";
+                    borderColor: "colour.neutral.30";
+                };
+            };
+            action: {
+                '&.button__root--mode_secondary': {
+                    bg: "colour.neutral.70";
+                    borderColor: "colour.neutral.70";
+                    color: "colour.neutral.20";
+                    _hover: {
+                        bg: "colour.neutral.80";
+                        borderColor: "colour.neutral.80";
+                    };
+                    _active: {
+                        boxShadow: "color-mix(in srgb, {colour.neutral.70}, transparent 80%) 0px 0px 0px 3px";
+                    };
+                };
+                '&.button__root--mode_tertiary': {
+                    _hover: {
+                        bg: "colour.neutral.30";
+                    };
+                };
+            };
+        };
+    };
+    variant: {
+        sidebar: {
+            alert: {
+                borderTopLeftRadius: "none";
+                borderBottomLeftRadius: "none";
+                borderWidth: "[0]";
+                borderLeftWidth: "[2.5px]";
+                paddingBlock: "spacing.4";
+            };
+        };
+        'full-width': {
+            alert: {
+                borderRadius: "none";
+                borderWidth: "[0]";
+                borderTopWidth: "[1px]";
+                borderBottomWidth: "[1px]";
+            };
+        };
+    };
+}>;