@payfit/unity-components 2.7.2 → 2.8.0

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

@@ -27,6 +27,7 @@ type UnityButtonProps = AriaButtonProps & ButtonBase & {
      * @default false
      */
     isLoading?: boolean;
+    truncateLabelLength?: number;
 };
 type UnionButtonProps = (UnityButtonProps & {
     variant: 'primary';

package/dist/esm/components/button/Button.js

@@ -1,68 +1,78 @@
-import { jsx as m, jsxs as y } from "react/jsx-runtime";
-import { forwardRef as h, useMemo as x } from "react";
-import { uyMerge as l } from "@payfit/unity-themes";
-import { Button as b } from "react-aria-components";
+import { jsx as s, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as b, useMemo as w } from "react";
+import { uyMerge as m } from "@payfit/unity-themes";
+import { Button as x } from "react-aria-components";
 import { Icon as v } from "../icon/Icon.js";
 import { Spinner as B } from "../spinner/Spinner.js";
-import { buttonGhost as w, buttonOutlined as N, buttonFilled as j } from "./Button.variants.js";
-const I = (e, n) => e ? /* @__PURE__ */ m(B, { size: "small", color: "inherit", label: "Loading..." }) : n ? /* @__PURE__ */ m(v, { src: n, size: 20, color: "inherit", role: "presentation" }) : null, M = h(
+import { buttonGhost as N, buttonOutlined as j, buttonFilled as I } from "./Button.variants.js";
+const M = (e, r) => e ? /* @__PURE__ */ s(B, { size: "small", color: "inherit", label: "Loading..." }) : r ? /* @__PURE__ */ s(v, { src: r, size: 20, color: "inherit", role: "presentation" }) : null, $ = b(
   ({
     variant: e,
-    children: n,
+    children: r,
     color: o = "primary",
     size: c = "default",
-    isDisabled: s = !1,
+    isDisabled: a = !1,
     isLoading: t = !1,
-    prefixIcon: u = void 0,
-    ...i
-  }, p) => {
-    const f = x(() => {
-      const a = { size: c, isDisabled: s, isLoading: t };
+    prefixIcon: i = void 0,
+    truncateLabelLength: u,
+    ...p
+  }, y) => {
+    const f = w(() => {
+      const l = { size: c, isDisabled: a, isLoading: t };
       switch (e) {
         case "primary": {
-          const r = {
-            ...a,
+          const n = {
+            ...l,
             color: o
           };
-          return l(j(r));
+          return m(I(n));
         }
         case "secondary": {
-          const r = {
-            ...a,
+          const n = {
+            ...l,
             color: o
           };
-          return l(N(r));
+          return m(j(n));
         }
         case "ghost": {
-          const r = {
-            ...a,
+          const n = {
+            ...l,
             color: o
           };
-          return l(w(r));
+          return m(N(n));
         }
       }
-    }, [e, o, c, s, t]), d = {
+    }, [e, o, c, a, t]), d = {
       ...t && { "data-loading": t }
     };
-    return /* @__PURE__ */ m(
-      b,
+    return /* @__PURE__ */ s(
+      x,
       {
         "data-dd-privacy": "allow",
-        ...i,
-        ref: p,
-        isDisabled: s || t,
+        ...p,
+        ref: y,
+        isDisabled: a || t,
         isPending: t,
         className: f,
         ...d,
-        children: /* @__PURE__ */ y("span", { className: "uy:inline-flex uy:gap-50 uy:items-center", children: [
-          I(t, u),
-          n
+        children: /* @__PURE__ */ h("span", { className: "uy:inline-flex uy:gap-50 uy:items-center", children: [
+          M(t, i),
+          u && u > 0 ? /* @__PURE__ */ s(
+            "span",
+            {
+              style: {
+                "--uy-button-label-truncation-length": `${u}ch`
+              },
+              className: "uy:truncate uy:min-w-0 uy:w-(--uy-button-label-truncation-length)",
+              children: r
+            }
+          ) : r
         ] })
       }
     );
   }
 );
-M.displayName = "Button";
+$.displayName = "Button";
 export {
-  M as Button
+  $ as Button
 };

package/dist/esm/components/funnel-layout/parts/FunnelBackButton.d.ts

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+export interface FunnelBackButtonProps {
+    /**
+     * Label for the back button.
+     * Shown as text on desktop, used as aria-label on mobile.
+     */
+    label: string;
+    /**
+     * Callback when back button is pressed.
+     */
+    onPress: () => void;
+    /**
+     * Maximum length of the label to truncate.
+     * Defaults to 10 characters.
+     */
+    truncateLabelLength?: number;
+}
+/**
+ * Back button component for use in FunnelTopBar leading slot.
+ * Automatically adapts between desktop (text + icon) and mobile (icon only) layouts.
+ * @example
+ * ```tsx
+ * import { FunnelTopBar, FunnelBackButton } from '@payfit/unity-components'
+ *
+ * function MyFunnel() {
+ *   return (
+ *     <FunnelTopBar
+ *       leading={
+ *         <FunnelBackButton
+ *           label="Back to dashboard"
+ *           onPress={handleBack}
+ *         />
+ *       }
+ *       title="Step 2"
+ *       progressValue={50}
+ *     />
+ *   )
+ * }
+ * ```
+ */
+export declare const FunnelBackButton: FC<FunnelBackButtonProps>;

package/dist/esm/components/funnel-layout/parts/FunnelBackButton.js

@@ -0,0 +1,35 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useBreakpointListener as i } from "../../../hooks/use-breakpoint-listener.js";
+import { Button as s } from "../../button/Button.js";
+import { IconButton as c } from "../../icon-button/IconButton.js";
+const u = ({
+  label: t,
+  onPress: o,
+  truncateLabelLength: r
+}) => {
+  const e = i();
+  return !["xs", "sm"].includes(e) ? /* @__PURE__ */ n(
+    s,
+    {
+      variant: "ghost",
+      color: "neutral",
+      prefixIcon: "ArrowLeftOutlined",
+      onPress: o,
+      truncateLabelLength: r,
+      children: t
+    }
+  ) : /* @__PURE__ */ n(
+    c,
+    {
+      variant: "ghost",
+      color: "neutral",
+      icon: "ArrowLeftOutlined",
+      label: t,
+      onClick: o
+    }
+  );
+};
+u.displayName = "FunnelBackButton";
+export {
+  u as FunnelBackButton
+};

package/dist/esm/components/funnel-layout/parts/FunnelTopBar.d.ts

@@ -39,10 +39,50 @@ export declare const funnelTopBar: import('tailwind-variants').TVReturnType<{
 export interface FunnelTopBarProps extends VariantProps<typeof funnelTopBar> {
     /** The title text to display in the funnel top bar */
     title: string;
-    /** Label for the back button. */
-    backButtonLabel: string;
-    /** Callback function to be called when the back button is pressed */
-    onBackButtonPress: () => void;
+    /**
+     * Custom content to display in the leading area (left side).
+     * Typically a logo on first step or a back button on subsequent steps.
+     * @example
+     * ```tsx
+     * // With FunnelBackButton
+     * <FunnelTopBar
+     *   leading={<FunnelBackButton label="Back" onPress={handleBack} />}
+     *   title="My Funnel"
+     * />
+     *
+     * // With logo
+     * <FunnelTopBar
+     *   leading={<PayFitBrand color="original" />}
+     *   title="Get Started"
+     * />
+     * ```
+     */
+    leading?: React.ReactNode;
+    /**
+     * Label for the back button.
+     * @deprecated Use `leading` with <FunnelBackButton> instead. Will be removed in v2.0.
+     * @example
+     * ```tsx
+     * // Old way (deprecated)
+     * <FunnelTopBar
+     *   backButtonLabel="Back"
+     *   onBackButtonPress={handleBack}
+     *   title="My Funnel"
+     * />
+     *
+     * // New way (recommended)
+     * <FunnelTopBar
+     *   leading={<FunnelBackButton label="Back" onPress={handleBack} />}
+     *   title="My Funnel"
+     * />
+     * ```
+     */
+    backButtonLabel?: string;
+    /**
+     * Callback function to be called when the back button is pressed.
+     * @deprecated Use `leading` with <FunnelBackButton> instead. Will be removed in v2.0.
+     */
+    onBackButtonPress?: () => void;
     /** Optional actions slot to display in the top bar */
     actions?: React.ReactNode;
     /** Optional flag to show or hide the progress indicator. Defaults to false */

package/dist/esm/components/funnel-layout/parts/FunnelTopBar.js

@@ -1,115 +1,110 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { forwardRef as x, useMemo as I } from "react";
-import { uyTv as N } from "@payfit/unity-themes";
-import { useIntl as w } from "react-intl";
-import { useBreakpointListener as M } from "../../../hooks/use-breakpoint-listener.js";
-import { Button as P } from "../../button/Button.js";
-import { IconButton as T } from "../../icon-button/IconButton.js";
-import { useFunnelLayoutContext as B } from "../FunnelLayout.context.js";
-import { FunnelProgressBar as F } from "./FunnelProgressBar.js";
-const A = N({
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { forwardRef as w, useMemo as y } from "react";
+import { uyTv as B } from "@payfit/unity-themes";
+import { useIntl as F } from "react-intl";
+import { useFunnelLayoutContext as I } from "../FunnelLayout.context.js";
+import { FunnelBackButton as T } from "./FunnelBackButton.js";
+import { FunnelProgressBar as M } from "./FunnelProgressBar.js";
+var c = {};
+const P = B({
   slots: {
-    base: ["uy:bg-surface-neutral uy:shadow-raising"],
+    base: ["uy:bg-surface-neutral uy:shadow-raising uy:min-h-800"],
     titleWrapper: [
-      "uy:px-200 uy:py-150 uy:md:px-500",
-      "uy:grid uy:grid-cols-[minmax(var(--uy-spacing-500),max-content)_1fr_minmax(var(--uy-spacing-500),max-content)] uy:items-center"
+      "uy:px-200 uy:py-150 uy:md:px-500 uy:min-h-[calc(var(--uy-spacing-800)-4px)]",
+      "uy:flex uy:justify-between uy:items-center"
     ],
     title: [
-      "uy:text-content-neutral uy:typography-body-strong uy:sm:typography-h4 uy:text-center"
+      "uy:text-content-neutral uy:typography-body-strong uy:sm:typography-h4 uy:flex-1 uy:sm:flex-auto uy:text-center uy:col-2"
     ]
   }
-}), L = x(
+}), _ = w(
   ({
-    actions: r,
-    backButtonLabel: i,
-    currentTaskDescription: s,
-    onBackButtonPress: l,
-    progressAnnouncement: u,
-    progressValue: t,
-    showProgress: c = !0,
-    title: m,
-    ...p
-  }, y) => {
-    const a = w(), { ids: n } = B(), { base: f, titleWrapper: g, title: h } = A(), v = M(), b = !["xs", "sm"].includes(v), d = I(
+    actions: s,
+    backButtonLabel: t,
+    currentTaskDescription: u,
+    leading: r,
+    onBackButtonPress: o,
+    progressAnnouncement: d,
+    progressValue: n,
+    showProgress: m = !0,
+    title: f,
+    ...v
+  }, g) => {
+    const i = F(), { ids: a } = I(), { base: h, titleWrapper: b, title: x } = P(), N = y(() => r !== void 0 ? r : t && o ? (c.NODE_ENV === "development" && console.warn(
+      "FunnelTopBar: backButtonLabel and onBackButtonPress are deprecated. Use leading={<FunnelBackButton />} instead."
+    ), /* @__PURE__ */ e(
+      T,
+      {
+        label: t,
+        onPress: o
+      }
+    )) : null, [r, t, o]);
+    c.NODE_ENV === "development" && r !== void 0 && (t || o) && console.warn(
+      "FunnelTopBar: Both leading and deprecated props (backButtonLabel/onBackButtonPress) provided. leading takes precedence."
+    );
+    const p = y(
       () => ({
-        navigationDescription: a.formatMessage({
+        navigationDescription: i.formatMessage({
           id: "unity:layout:funnel:top-bar:navigation-desc",
           defaultMessage: "Process navigation"
         }),
-        progressAnnouncement: u ?? a.formatMessage(
+        progressAnnouncement: d ?? i.formatMessage(
           {
             id: "unity:layout:funnel:top-bar:progress-announcement",
-            defaultMessage: t !== void 0 ? `Process is ${t}% complete` : "Progress status unavailable"
+            defaultMessage: n !== void 0 ? `Process is ${n}% complete` : "Progress status unavailable"
           },
           {
-            progress: t
+            progress: n
           }
         )
       }),
-      [a, u, t]
+      [i, d, n]
     );
-    return /* @__PURE__ */ o(
+    return /* @__PURE__ */ l(
       "header",
       {
-        ref: y,
-        id: n.topbarId,
-        className: f(),
+        ref: g,
+        id: a.topbarId,
+        className: h(),
         role: "banner",
-        "aria-labelledby": n.funnelTitleId,
-        "aria-describedby": n.funnelStatusId,
+        "aria-labelledby": a.funnelTitleId,
+        "aria-describedby": a.funnelStatusId,
         "data-dd-privacy": "allow",
-        ...p,
+        ...v,
         children: [
-          /* @__PURE__ */ o(
+          /* @__PURE__ */ l(
             "nav",
             {
-              className: g(),
-              "aria-label": d.navigationDescription,
+              className: b(),
+              "aria-label": p.navigationDescription,
               children: [
-                b ? /* @__PURE__ */ e(
-                  P,
-                  {
-                    variant: "ghost",
-                    color: "neutral",
-                    prefixIcon: "ArrowLeftOutlined",
-                    onPress: l,
-                    children: i
-                  }
-                ) : /* @__PURE__ */ e(
-                  T,
-                  {
-                    variant: "ghost",
-                    color: "neutral",
-                    icon: "ArrowLeftOutlined",
-                    label: i,
-                    onClick: l
-                  }
-                ),
-                /* @__PURE__ */ o("h1", { className: h(), id: n.funnelTitleId, children: [
-                  m,
-                  s && /* @__PURE__ */ e("span", { className: "uy:sr-only", children: s })
+                /* @__PURE__ */ e("div", { className: "uy:grow-0 uy:basis-[100px]", children: N }),
+                /* @__PURE__ */ l("h1", { className: x(), id: a.funnelTitleId, children: [
+                  f,
+                  u && /* @__PURE__ */ e("span", { className: "uy:sr-only", children: u })
                 ] }),
                 /* @__PURE__ */ e(
                   "div",
                   {
-                    "aria-hidden": !r,
-                    role: r ? "group" : "presentation",
-                    children: r
+                    className: "uy:grow-0 uy:basis-[100px]",
+                    "aria-hidden": !s,
+                    role: s ? "group" : "presentation",
+                    children: s
                   }
                 )
               ]
             }
           ),
-          c && /* @__PURE__ */ e("div", { "aria-hidden": "true", children: /* @__PURE__ */ e(F, { value: t ?? 0 }) }),
+          m && /* @__PURE__ */ e("div", { "aria-hidden": "true", children: /* @__PURE__ */ e(M, { value: n ?? 0 }) }),
           /* @__PURE__ */ e(
             "div",
             {
-              id: n.funnelStatusId,
+              id: a.funnelStatusId,
               role: "status",
               "aria-live": "polite",
               "aria-atomic": "true",
               className: "uy:sr-only",
-              children: d.progressAnnouncement
+              children: p.progressAnnouncement
             }
           )
         ]
@@ -117,8 +112,8 @@ const A = N({
     );
   }
 );
-L.displayName = "FunnelTopBar";
+_.displayName = "FunnelTopBar";
 export {
-  L as FunnelTopBar,
-  A as funnelTopBar
+  _ as FunnelTopBar,
+  P as funnelTopBar
 };

package/dist/esm/index.d.ts

@@ -83,6 +83,7 @@ export * from './components/funnel-layout/parts/FunnelPage.js';
 export * from './components/funnel-layout/parts/FunnelPageAction.js';
 export * from './components/funnel-layout/parts/FunnelPageActions.js';
 export * from './components/funnel-layout/parts/FunnelPageContent.js';
+export * from './components/funnel-layout/parts/FunnelBackButton.js';
 export * from './components/funnel-layout/parts/FunnelPageFooter.js';
 export * from './components/funnel-layout/parts/FunnelPageHeader.js';
 export * from './components/funnel-layout/parts/FunnelSidebar.js';