@phillips/seldon 1.145.0 → 1.145.1

package/dist/patterns/AccountPageHeader/AccountPageHeader.d.ts

@@ -4,7 +4,7 @@ export interface AccountPageHeaderProps extends ComponentProps<'div'> {
     /** The main title displayed at the top of the account page */
     title: string;
     /** Optional subtitle text that appears below the main title */
-    subheader?: string;
+    subtitle?: string;
     /**
      * Array of action buttons to display in the header
      * @property {string} [label] - Optional text to display on the button
@@ -17,7 +17,7 @@ export interface AccountPageHeaderProps extends ComponentProps<'div'> {
         label?: string;
         ariaLabel: string;
         icon: IconName;
-        onClick: () => void;
+        onClick: (e?: React.SyntheticEvent) => void;
         isPrimary?: boolean;
     }>;
     /** Optional text displayed above the title */

package/dist/patterns/AccountPageHeader/AccountPageHeader.js

@@ -1,6 +1,6 @@
 import { jsxs as n, jsx as r, Fragment as p } from "react/jsx-runtime";
-import { forwardRef as P } from "react";
-import { getCommonProps as $ } from "../../utils/index.js";
+import { forwardRef as b } from "react";
+import { getCommonProps as P } from "../../utils/index.js";
 import k from "../../node_modules/classnames/index.js";
 import l from "../../components/Text/Text.js";
 import { TextVariants as c } from "../../components/Text/types.js";
@@ -8,31 +8,31 @@ import y from "../../components/Divider/Divider.js";
 import x from "../../components/Button/Button.js";
 import { ButtonVariants as L } from "../../components/Button/types.js";
 import m from "../../components/Icon/Icon.js";
-import h from "../../components/IconButton/IconButton.js";
-import { SSRMediaQuery as f } from "../../providers/SeldonProvider/utils.js";
-const T = P(
-  ({ className: _, title: v, subheader: t, actionButtons: o, overline: s, showDivider: N = !0, ...g }, u) => {
-    const { className: e, ...C } = $(g, "AccountPageHeader"), i = o?.find((a) => a.isPrimary), d = o?.filter((a) => !a.isPrimary), b = () => /* @__PURE__ */ n("div", { className: `${e}__button-wrapper`, children: [
-      d && /* @__PURE__ */ r(p, { children: d.map((a) => /* @__PURE__ */ r(h, { onClick: a.onClick, "aria-label": a.ariaLabel, children: /* @__PURE__ */ r(m, { icon: a.icon, "aria-label": a.ariaLabel, title: a.ariaLabel }) }, `icon-button-${a.icon}`)) }),
-      i && /* @__PURE__ */ n(p, { children: [
-        /* @__PURE__ */ r(f.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ n(x, { variant: L.secondary, onClick: i.onClick, children: [
-          /* @__PURE__ */ r(m, { icon: i.icon }),
+import f from "../../components/IconButton/IconButton.js";
+import { SSRMediaQuery as h } from "../../providers/SeldonProvider/utils.js";
+const T = b(
+  ({ className: _, title: N, subtitle: t, actionButtons: o, overline: s, showDivider: v = !0, ...g }, u) => {
+    const { className: i, ...C } = P(g, "AccountPageHeader"), e = o?.find((a) => a.isPrimary), d = o?.filter((a) => !a.isPrimary), $ = () => /* @__PURE__ */ n("div", { className: `${i}__button-wrapper`, children: [
+      d && /* @__PURE__ */ r(p, { children: d.map((a) => /* @__PURE__ */ r(f, { onClick: a.onClick, "aria-label": a.ariaLabel, children: /* @__PURE__ */ r(m, { icon: a.icon, "aria-label": a.ariaLabel, title: a.ariaLabel }) }, `icon-button-${a.icon}`)) }),
+      e && /* @__PURE__ */ n(p, { children: [
+        /* @__PURE__ */ r(h.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ n(x, { variant: L.secondary, onClick: e.onClick, children: [
+          /* @__PURE__ */ r(m, { icon: e.icon }),
           " ",
-          i.label
+          e.label
         ] }) }),
-        /* @__PURE__ */ r(f.Media, { lessThan: "md", children: /* @__PURE__ */ r(h, { onClick: i.onClick, "aria-label": i.ariaLabel, children: /* @__PURE__ */ r(m, { icon: i.icon, title: i.ariaLabel }) }) })
+        /* @__PURE__ */ r(h.Media, { lessThan: "md", children: /* @__PURE__ */ r(f, { onClick: e.onClick, "aria-label": e.ariaLabel, children: /* @__PURE__ */ r(m, { icon: e.icon, title: e.ariaLabel }) }) })
       ] })
     ] });
-    return /* @__PURE__ */ n("div", { ...C, className: k(e, _), ref: u, children: [
-      /* @__PURE__ */ n("div", { className: `${e}__container`, children: [
-        s && /* @__PURE__ */ r(l, { variant: c.string2, className: `${e}__overline`, children: s }),
-        /* @__PURE__ */ n("div", { className: `${e}__header`, children: [
-          /* @__PURE__ */ r(l, { variant: c.title1, children: v }),
-          o && o.length > 0 && b()
+    return /* @__PURE__ */ n("div", { ...C, className: k(i, _), ref: u, children: [
+      /* @__PURE__ */ n("div", { className: `${i}__container`, children: [
+        s && /* @__PURE__ */ r(l, { variant: c.string2, className: `${i}__overline`, children: s }),
+        /* @__PURE__ */ n("div", { className: `${i}__title-wrapper`, children: [
+          /* @__PURE__ */ r(l, { variant: c.title1, className: `${i}__title`, children: N }),
+          o && o.length > 0 && $()
         ] }),
-        t && /* @__PURE__ */ r(l, { variant: c.string2, className: `${e}__subheader`, children: t })
+        t && /* @__PURE__ */ r(l, { variant: c.string2, className: `${i}__subtitle`, children: t })
       ] }),
-      N && /* @__PURE__ */ r(y, { className: `${e}__divider` })
+      v && /* @__PURE__ */ r(y, { className: `${i}__divider` })
     ] });
   }
 );

package/dist/patterns/AccountPageHeader/AccountPageHeader.stories.d.ts

@@ -11,7 +11,7 @@ export declare const Playground: {
     (props: AccountPageHeaderProps): import("react/jsx-runtime").JSX.Element;
     args: {
         title: string;
-        subheader: string;
+        subtitle: string;
         overline: string;
         actionButtons: ({
             label: string;

package/dist/scss/patterns/AccountPageHeader/_accountPageHeader.scss

@@ -8,7 +8,12 @@
     width: 100%;
   }
 
-  &__header {
+  &__title {
+    // To help center the title, accounts for the extra space inside the span below the text
+    margin-top: $spacing-micro;
+  }
+
+  &__title-wrapper {
     align-items: center;
     display: flex;
     gap: $spacing-md;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.145.0",
+  "version": "1.145.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"