@phillips/seldon 1.140.0 → 1.141.0

package/dist/index.d.ts

@@ -66,6 +66,7 @@ export * from './components/FavoritingTileButton';
 export * from './components/Filter';
 export * from './components/Icon';
 export * from './components/TextArea';
+export * from './patterns/AccountPageHeader';
 export * from './patterns/BidSnapshot';
 export * from './patterns/FilterMenu';
 export * from './patterns/ObjectTile';

package/dist/index.js

@@ -1,12 +1,12 @@
 import { PaddingTokens as a, SpacingTokens as f, defaultYear as s, emailValidation as l, encodeURLSearchParams as d, findChildrenExcludingTypes as m, findChildrenOfType as p, generatePaddingClassName as u, getCommonProps as i, noOp as n, px as x, useNormalizedInputProps as g } from "./utils/index.js";
 import { default as S } from "./pages/Page.js";
 import { SSRMediaQuery as T, ssrMediaQueryStyle as L } from "./providers/SeldonProvider/utils.js";
-import { usePendingState as P } from "./utils/hooks.js";
+import { usePendingState as A } from "./utils/hooks.js";
 import { AuctionStatus as I, LotStatus as V, SupportedLanguages as b } from "./types/commonTypes.js";
 import { default as k } from "./components/Button/Button.js";
 import { ButtonVariants as v } from "./components/Button/types.js";
-import { default as D } from "./components/IconButton/IconButton.js";
-import { default as H } from "./components/Accordion/Accordion.js";
+import { default as H } from "./components/IconButton/IconButton.js";
+import { default as F } from "./components/Accordion/Accordion.js";
 import { default as N } from "./components/Accordion/AccordionItem.js";
 import { AccordionItemVariant as E, AccordionVariants as G } from "./components/Accordion/types.js";
 import { default as R } from "./components/Breadcrumb/Breadcrumb.js";
@@ -28,13 +28,13 @@ import { default as ne } from "./components/Drawer/Drawer.js";
 import { default as ge } from "./components/Dropdown/Dropdown.js";
 import { default as Se } from "./components/ErrorBoundary/ErrorBoundary.js";
 import { Grid as Te } from "./components/Grid/Grid.js";
-import { default as Be } from "./components/GridItem/GridItem.js";
-import { GridItemAlign as Ae } from "./components/GridItem/types.js";
+import { default as Pe } from "./components/GridItem/GridItem.js";
+import { GridItemAlign as Be } from "./components/GridItem/types.js";
 import { default as Ve } from "./components/Input/Input.js";
 import { default as he } from "./components/Link/Link.js";
 import { LinkVariants as we } from "./components/Link/types.js";
 import { default as ye } from "./components/LinkBlock/LinkBlock.js";
-import { default as Fe } from "./components/LinkList/LinkList.js";
+import { default as De } from "./components/LinkList/LinkList.js";
 import { default as Me } from "./components/Modal/Modal.js";
 import { default as Ue } from "./components/Navigation/Navigation.js";
 import { default as Ge } from "./components/Navigation/NavigationItem/NavigationItem.js";
@@ -54,13 +54,13 @@ import { default as ut } from "./components/Tabs/TabsContent.js";
 import { Tag as nt, default as xt } from "./components/Tags/Tags.js";
 import { TextAlignments as ct, TextVariants as St } from "./components/Text/types.js";
 import { default as Tt } from "./components/Text/Text.js";
-import { TextSymbolVariants as Bt } from "./components/TextSymbol/types.js";
-import { default as At } from "./components/TextSymbol/TextSymbol.js";
+import { TextSymbolVariants as Pt } from "./components/TextSymbol/types.js";
+import { default as Bt } from "./components/TextSymbol/TextSymbol.js";
 import { default as Vt } from "./components/Video/Video.js";
 import { default as ht } from "./patterns/DetailList/DetailList.js";
 import { DetailListAlignment as wt } from "./patterns/DetailList/types.js";
 import { default as yt } from "./patterns/FavoritesCollectionTile/FavoritesCollectionTile.js";
-import { default as Ft } from "./patterns/HeroBanner/HeroBanner.js";
+import { default as Dt } from "./patterns/HeroBanner/HeroBanner.js";
 import { default as Mt } from "./patterns/LanguageSelector/LanguageSelector.js";
 import { default as Ut } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
 import { default as Gt } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
@@ -81,25 +81,27 @@ import { default as xo } from "./components/Divider/Divider.js";
 import { default as co } from "./components/FavoritingTileButton/FavoritingTileButton.js";
 import { default as Co } from "./components/Filter/Filter.js";
 import { default as Lo } from "./components/Filter/FilterInput.js";
-import { default as Po } from "./components/Filter/FilterHeader.js";
+import { default as Ao } from "./components/Filter/FilterHeader.js";
 import { default as Io } from "./components/TextArea/TextArea.js";
-import { default as bo } from "./patterns/BidSnapshot/BidSnapshot.js";
-import { default as ko } from "./patterns/BidSnapshot/BidMessage.js";
-import { BidMessageVariants as vo, BidStatusEnum as yo } from "./patterns/BidSnapshot/types.js";
-import { default as Fo } from "./patterns/FilterMenu/FilterMenu.js";
-import { default as Mo } from "./patterns/ObjectTile/ObjectTile.js";
+import { default as bo } from "./patterns/AccountPageHeader/AccountPageHeader.js";
+import { default as ko } from "./patterns/BidSnapshot/BidSnapshot.js";
+import { default as vo } from "./patterns/BidSnapshot/BidMessage.js";
+import { BidMessageVariants as Ho, BidStatusEnum as Do } from "./patterns/BidSnapshot/types.js";
+import { default as Mo } from "./patterns/FilterMenu/FilterMenu.js";
+import { default as Uo } from "./patterns/ObjectTile/ObjectTile.js";
 export {
-  H as Accordion,
+  F as Accordion,
   N as AccordionItem,
   E as AccordionItemVariant,
   G as AccordionVariants,
+  bo as AccountPageHeader,
   lo as Article,
   I as AuctionStatus,
   Zt as AuthState,
-  ko as BidMessage,
-  vo as BidMessageVariants,
-  bo as BidSnapshot,
-  yo as BidStatusEnum,
+  vo as BidMessage,
+  Ho as BidMessageVariants,
+  ko as BidSnapshot,
+  Do as BidStatusEnum,
   R as Breadcrumb,
   k as Button,
   v as ButtonVariants,
@@ -125,22 +127,22 @@ export {
   yt as FavoritesCollectionTile,
   co as FavoritingTileButton,
   Co as Filter,
-  Po as FilterHeader,
+  Ao as FilterHeader,
   Lo as FilterInput,
-  Fo as FilterMenu,
+  Mo as FilterMenu,
   ro as Footer,
   Te as Grid,
-  Be as GridItem,
-  Ae as GridItemAlign,
+  Pe as GridItem,
+  Be as GridItemAlign,
   fo as Header,
-  Ft as HeroBanner,
+  Dt as HeroBanner,
   j as Icon,
-  D as IconButton,
+  H as IconButton,
   Ve as Input,
   Mt as LanguageSelector,
   he as Link,
   ye as LinkBlock,
-  Fe as LinkList,
+  De as LinkList,
   we as LinkVariants,
   V as LotStatus,
   Me as Modal,
@@ -148,7 +150,7 @@ export {
   Ge as NavigationItem,
   Re as NavigationItemTrigger,
   je as NavigationList,
-  Mo as ObjectTile,
+  Uo as ObjectTile,
   a as PaddingTokens,
   S as Page,
   We as PageContentWrapper,
@@ -177,8 +179,8 @@ export {
   Tt as Text,
   ct as TextAlignments,
   Io as TextArea,
-  Bt as TextSymbolVariants,
-  At as TextSymbols,
+  Pt as TextSymbolVariants,
+  Bt as TextSymbols,
   St as TextVariants,
   Jt as UserManagement,
   Vt as Video,
@@ -194,5 +196,5 @@ export {
   x as px,
   L as ssrMediaQueryStyle,
   g as useNormalizedInputProps,
-  P as usePendingState
+  A as usePendingState
 };

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

@@ -0,0 +1,41 @@
+import { ComponentProps } from 'react';
+import { IconName } from '../../components/Icon';
+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;
+    /**
+     * Array of action buttons to display in the header
+     * @property {string} [label] - Optional text to display on the button
+     * @property {string} ariaLabel - Accessible label for the button
+     * @property {IconName} icon - Icon to display on the button
+     * @property {() => void} onClick - Function to call when the button is clicked
+     * @property {boolean} [isPrimary] - When true, renders as a regular button; when false or undefined, renders as an icon button
+     */
+    actionButtons?: Array<{
+        label?: string;
+        ariaLabel: string;
+        icon: IconName;
+        onClick: () => void;
+        isPrimary?: boolean;
+    }>;
+    /** Optional text displayed above the title */
+    overline?: string;
+    /**
+     * Show or hide the bottom divider
+     * @default true
+     */
+    showDivider?: boolean;
+}
+/**
+ * ## Overview
+ *
+ * AccountPageHeader is the component that displays at the top of each page in the account section.
+ *
+ * [Figma Link, Click into the playground for more details](https://www.figma.com/design/rIefa3bRPyZbZmtyV9PSQv/My-Account?node-id=497-47896&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/patterns-accountpageheader--overview)
+ */
+declare const AccountPageHeader: import('react').ForwardRefExoticComponent<Omit<AccountPageHeaderProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default AccountPageHeader;

package/dist/patterns/AccountPageHeader/AccountPageHeader.js

@@ -0,0 +1,42 @@
+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 k from "../../node_modules/classnames/index.js";
+import l from "../../components/Text/Text.js";
+import { TextVariants as c } from "../../components/Text/types.js";
+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 }),
+          " ",
+          i.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 }) }) })
+      ] })
+    ] });
+    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()
+        ] }),
+        t && /* @__PURE__ */ r(l, { variant: c.string2, className: `${e}__subheader`, children: t })
+      ] }),
+      N && /* @__PURE__ */ r(y, { className: `${e}__divider` })
+    ] });
+  }
+);
+T.displayName = "AccountPageHeader";
+export {
+  T as default
+};

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

@@ -0,0 +1,34 @@
+import { AccountPageHeaderProps } from './AccountPageHeader';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<AccountPageHeaderProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+    args: {
+        showDivider: true;
+    };
+};
+export default meta;
+export declare const Playground: {
+    (props: AccountPageHeaderProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        title: string;
+        subheader: string;
+        overline: string;
+        actionButtons: ({
+            label: string;
+            ariaLabel: string;
+            icon: string;
+            onClick: () => void;
+            isPrimary: boolean;
+        } | {
+            ariaLabel: string;
+            icon: string;
+            onClick: () => void;
+            label?: undefined;
+            isPrimary?: undefined;
+        })[];
+    };
+};
+export declare const Details: () => import("react/jsx-runtime").JSX.Element;
+export declare const Bids: () => import("react/jsx-runtime").JSX.Element;
+export declare const FavoritesAndLists: () => import("react/jsx-runtime").JSX.Element;
+export declare const List: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1 @@
+export { default as AccountPageHeader, type AccountPageHeaderProps } from './AccountPageHeader';

package/dist/scss/componentStyles.scss

@@ -61,6 +61,7 @@
 @use 'patterns/BidSnapshot/bidSnapshot';
 @use 'patterns/FilterMenu/filterMenu';
 @use 'patterns/DetailList/detailList';
+@use 'patterns/AccountPageHeader/accountPageHeader';
 @use 'patterns/FavoritesCollectionTile/favoritesCollectionTile';
 
 // Site Furniture

package/dist/scss/components/IconButton/_iconButton.scss

@@ -20,7 +20,7 @@
   &:focus-visible {
     &:focus-visible {
       outline: 0.5px solid $soft-black;
-      outline-offset: -4.5px;
+      outline-offset: 0;
 
       svg {
         fill: $pure-white;
@@ -49,7 +49,7 @@
         color: $pure-white;
 
         path {
-          color: $pure-white;
+          fill: $pure-white;
         }
       }
     }

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

@@ -0,0 +1,33 @@
+@use '../../allPartials' as *;
+
+.#{$px}-account-page-header {
+  &__container {
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-xsm;
+    width: 100%;
+  }
+
+  &__header {
+    align-items: center;
+    display: flex;
+    gap: $spacing-md;
+    justify-content: space-between;
+  }
+
+  &__overline {
+    color: $button-hover;
+    font-variation-settings: 'wght' 600;
+  }
+
+  &__button-wrapper {
+    align-items: center;
+    display: flex;
+    gap: $spacing-sm;
+    justify-content: center;
+  }
+
+  &__divider.seldon-divider {
+    margin: $spacing-md 0;
+  }
+}

package/package.json

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