@phillips/seldon 1.88.1 → 1.89.0

package/dist/components/Tags/Tags.d.ts

@@ -0,0 +1,55 @@
+export interface I18nObject {
+    clearAllLabel?: string;
+}
+export interface TagsListProps {
+    /**
+     * Unique id for component testing
+     */
+    id: string;
+    /**
+     * Base class for TagsList component.
+     */
+    className?: string;
+    /**
+     * Child element pass in to display as item content.
+     */
+    children?: React.ReactNode;
+    /**
+     * `onRemove` callback provides the tag that is to be removed as a string
+     */
+    onClear: () => void;
+    /**
+     * Clear All label is translatable
+     */
+    clearAllLabel?: string;
+}
+export interface TagProps {
+    /**
+     * Unique id for component testing
+     */
+    id: string;
+    /**
+     * Base class for TagsList component.
+     */
+    className?: string;
+    /**
+     * `onRemove` callback provides the tag that is to be removed as a string
+     */
+    onRemove: (tag: string) => void;
+    /**
+     * Tag item label.
+     */
+    label: string;
+}
+export declare const Tag: ({ id, className, onRemove, label }: TagProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * ## Overview
+ *
+ * Overview of Tags component
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=11648-3225&node-type=canvas&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-tags--overview)
+ */
+declare const TagsList: import('react').ForwardRefExoticComponent<TagsListProps & import('react').RefAttributes<HTMLDivElement>>;
+export default TagsList;

package/dist/components/Tags/Tags.js

@@ -0,0 +1,43 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import $ from "../../node_modules/classnames/index.js";
+import { getCommonProps as g, px as a } from "../../utils/index.js";
+import N from "../Button/Button.js";
+import { ButtonVariants as v } from "../Button/types.js";
+import h from "../../assets/chevronRight.svg.js";
+const u = p(
+  ({ className: l, children: t, clearAllLabel: e = "Clear All", onClear: n, ...s }, c) => {
+    const r = "tags-list", { className: d, ...f } = g(s, "TagsList"), { id: i } = s;
+    return /* @__PURE__ */ m(
+      "div",
+      {
+        className: $(`${a}-${r}`, d, l),
+        ...f,
+        ...s,
+        "data-testid": `${r}-${i}`,
+        ref: c,
+        children: [
+          t,
+          Array.isArray(t) && t.length > 0 && /* @__PURE__ */ m(
+            N,
+            {
+              onClick: n,
+              "data-testid": `${i}-clear-all-button`,
+              className: `${a}-${r}--clear`,
+              "aria-label": e,
+              variant: v.tertiary,
+              children: [
+                /* @__PURE__ */ o("div", { className: `${a}-left-arrow`, children: /* @__PURE__ */ o(h, {}) }),
+                /* @__PURE__ */ o("div", { className: `${a}-label`, children: e })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+u.displayName = "Tags";
+export {
+  u as default
+};

package/dist/components/Tags/Tags.stories.d.ts

@@ -0,0 +1,27 @@
+import { TagsListProps } from './Tags';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<TagsListProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+interface StoryProps extends TagsListProps {
+    playgroundWidth: string;
+}
+export declare const Playground: {
+    ({ playgroundWidth, ...args }: StoryProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        playgroundWidth: number;
+        className: string;
+    };
+    argTypes: {
+        onClear: {
+            action: string;
+        };
+        playgroundWidth: {
+            control: {
+                type: string;
+                min: number;
+            };
+        };
+    };
+};

package/dist/components/Tags/Tags.test.d.ts

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

package/dist/index.d.ts

@@ -33,6 +33,7 @@ export { default as ViewingsList, type ViewingsListProps } from './patterns/View
 export { default as Modal, type ModalProps } from './components/Modal/Modal';
 export { default as Drawer } from './components/Drawer/Drawer';
 export { default as Pagination, type PaginationProps, type PaginationOption, type PaginationOptionValue, } from './components/Pagination/Pagination';
+export { default as TagsList } from './components/Tags/Tags';
 export { default as StatefulViewingsList, type StatefulViewingsListProps, } from './patterns/ViewingsList/StatefulViewingsList';
 export * from './components/Text';
 export * from './components/TextSymbol';

package/dist/index.js

@@ -56,77 +56,78 @@ import { default as co } from "./patterns/ViewingsList/ViewingsList.js";
 import { default as So } from "./components/Modal/Modal.js";
 import { default as Po } from "./components/Drawer/Drawer.js";
 import { default as Io } from "./components/Pagination/Pagination.js";
-import { default as To } from "./patterns/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as Ao } from "./components/Text/types.js";
-import { default as vo } from "./components/Text/Text.js";
-import { TextSymbolVariants as yo } from "./components/TextSymbol/types.js";
-import { default as Do } from "./components/TextSymbol/TextSymbol.js";
-import { default as Ro } from "./components/Accordion/Accordion.js";
-import { default as Mo } from "./components/Accordion/AccordionItem.js";
-import { AccordionItemVariant as Go, AccordionVariants as Oo } from "./components/Accordion/types.js";
-import { default as Eo } from "./patterns/UserManagement/UserManagement.js";
-import { AuthState as Uo } from "./patterns/UserManagement/types.js";
-import { SupportedLanguages as zo } from "./types/commonTypes.js";
-import { default as jo } from "./components/Breadcrumb/Breadcrumb.js";
+import { default as To } from "./components/Tags/Tags.js";
+import { default as Ao } from "./patterns/ViewingsList/StatefulViewingsList.js";
+import { TextVariants as vo } from "./components/Text/types.js";
+import { default as yo } from "./components/Text/Text.js";
+import { TextSymbolVariants as Do } from "./components/TextSymbol/types.js";
+import { default as Ro } from "./components/TextSymbol/TextSymbol.js";
+import { default as Mo } from "./components/Accordion/Accordion.js";
+import { default as Go } from "./components/Accordion/AccordionItem.js";
+import { AccordionItemVariant as Wo, AccordionVariants as Eo } from "./components/Accordion/types.js";
+import { default as Uo } from "./patterns/UserManagement/UserManagement.js";
+import { AuthState as zo } from "./patterns/UserManagement/types.js";
+import { SupportedLanguages as jo } from "./types/commonTypes.js";
+import { default as Jo } from "./components/Breadcrumb/Breadcrumb.js";
 import "react/jsx-runtime";
 import "./node_modules/classnames/index.js";
-import { default as Jo } from "./components/Dropdown/Dropdown.js";
-import { default as Xo } from "./components/Video/Video.js";
-import { default as $o } from "./patterns/LanguageSelector/LanguageSelector.js";
-import { default as ot } from "./components/ContentPeek/ContentPeek.js";
-import { default as rt } from "./components/Collapsible/Collapsible.js";
-import { default as ft } from "./components/Collapsible/CollapsibleContent.js";
-import { default as lt } from "./components/Collapsible/CollapsibleTrigger.js";
-import { SeldonProvider as dt } from "./providers/SeldonProvider/SeldonProvider.js";
-import { default as ut } from "./components/PageContentWrapper/PageContentWrapper.js";
-import { default as nt } from "./components/Carousel/Carousel.js";
-import { default as gt } from "./components/Carousel/CarouselContent.js";
-import { default as Ct } from "./components/Carousel/CarouselItem.js";
-import { default as Lt } from "./components/Carousel/CarouselDots.js";
-import { default as ht } from "./components/Detail/Detail.js";
-import { default as bt } from "./patterns/DetailList/DetailList.js";
-import { DetailListAlignment as kt } from "./patterns/DetailList/types.js";
-import { default as Vt } from "./components/PinchZoom/PinchZoom.js";
-import { default as wt } from "./components/Tabs/TabsContainer.js";
-import { default as Bt } from "./components/Tabs/TabsContent.js";
-import { default as Nt } from "./components/SeldonImage/SeldonImage.js";
-import { default as Ft } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
-import { default as Ht } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
-import { AuctionState as Ot } from "./patterns/SaleHeaderBanner/types.js";
-import { default as Et } from "./components/Countdown/Countdown.js";
-import { CountdownVariants as Ut } from "./components/Countdown/types.js";
+import { default as Xo } from "./components/Dropdown/Dropdown.js";
+import { default as $o } from "./components/Video/Video.js";
+import { default as ot } from "./patterns/LanguageSelector/LanguageSelector.js";
+import { default as rt } from "./components/ContentPeek/ContentPeek.js";
+import { default as ft } from "./components/Collapsible/Collapsible.js";
+import { default as lt } from "./components/Collapsible/CollapsibleContent.js";
+import { default as dt } from "./components/Collapsible/CollapsibleTrigger.js";
+import { SeldonProvider as ut } from "./providers/SeldonProvider/SeldonProvider.js";
+import { default as nt } from "./components/PageContentWrapper/PageContentWrapper.js";
+import { default as gt } from "./components/Carousel/Carousel.js";
+import { default as Ct } from "./components/Carousel/CarouselContent.js";
+import { default as Lt } from "./components/Carousel/CarouselItem.js";
+import { default as ht } from "./components/Carousel/CarouselDots.js";
+import { default as bt } from "./components/Detail/Detail.js";
+import { default as kt } from "./patterns/DetailList/DetailList.js";
+import { DetailListAlignment as Vt } from "./patterns/DetailList/types.js";
+import { default as wt } from "./components/PinchZoom/PinchZoom.js";
+import { default as Bt } from "./components/Tabs/TabsContainer.js";
+import { default as Nt } from "./components/Tabs/TabsContent.js";
+import { default as Ft } from "./components/SeldonImage/SeldonImage.js";
+import { default as Ht } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
+import { default as Ot } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
+import { AuctionState as Et } from "./patterns/SaleHeaderBanner/types.js";
+import { default as Ut } from "./components/Countdown/Countdown.js";
+import { CountdownVariants as zt } from "./components/Countdown/types.js";
 export {
-  Ro as Accordion,
-  Mo as AccordionItem,
-  Go as AccordionItemVariant,
-  Oo as AccordionVariants,
+  Mo as Accordion,
+  Go as AccordionItem,
+  Wo as AccordionItemVariant,
+  Eo as AccordionVariants,
   S as AccountCircle,
   P as ArrowPrev,
-  Ot as AuctionState,
-  Uo as AuthState,
-  jo as Breadcrumb,
+  Et as AuctionState,
+  zo as AuthState,
+  Jo as Breadcrumb,
   Ce as Button,
   Le as ButtonVariants,
   I as Calendar,
-  nt as Carousel,
-  gt as CarouselContent,
-  Lt as CarouselDots,
-  Ct as CarouselItem,
+  gt as Carousel,
+  Ct as CarouselContent,
+  ht as CarouselDots,
+  Lt as CarouselItem,
   T as ChevronDown,
   A as ChevronNext,
   v as ChevronRight,
   y as Close,
-  rt as Collapsible,
-  ft as CollapsibleContent,
-  lt as CollapsibleTrigger,
-  ot as ContentPeek,
-  Et as Countdown,
-  Ut as CountdownVariants,
-  ht as Detail,
-  bt as DetailList,
-  kt as DetailListAlignment,
+  ft as Collapsible,
+  lt as CollapsibleContent,
+  dt as CollapsibleTrigger,
+  rt as ContentPeek,
+  Ut as Countdown,
+  zt as CountdownVariants,
+  bt as Detail,
+  kt as DetailList,
+  Vt as DetailListAlignment,
   Po as Drawer,
-  Jo as Dropdown,
+  Xo as Dropdown,
   be as ErrorBoundary,
   R as Facebook,
   D as FavoriteOutline,
@@ -141,7 +142,7 @@ export {
   he as IconButton,
   Ee as Input,
   Y as Instagram,
-  $o as LanguageSelector,
+  ot as LanguageSelector,
   Ue as Link,
   je as LinkBlock,
   Je as LinkList,
@@ -156,38 +157,39 @@ export {
   He as NavigationList,
   f as PaddingTokens,
   pe as Page,
-  ut as PageContentWrapper,
+  nt as PageContentWrapper,
   Io as Pagination,
   K as PhillipsLogo,
-  Vt as PinchZoom,
+  wt as PinchZoom,
   _ as Plus,
   ee as React,
   W as Reddit,
   Xe as Row,
   ie as SSRMediaQuery,
-  Ft as SaleHeaderBanner,
-  Ht as SaleHeaderBrowseAuctions,
+  Ht as SaleHeaderBanner,
+  Ot as SaleHeaderBrowseAuctions,
   ro as Search,
-  Nt as SeldonImage,
-  dt as SeldonProvider,
+  Ft as SeldonImage,
+  ut as SeldonProvider,
   fo as Select,
   te as Share,
   io as Social,
   s as SpacingTokens,
   lo as SplitPanel,
   ae as Spotify,
-  To as StatefulViewingsList,
+  Ao as StatefulViewingsList,
   po as Subscribe,
   xo as SubscriptionState,
-  zo as SupportedLanguages,
-  wt as TabsContainer,
-  Bt as TabsContent,
-  vo as Text,
-  yo as TextSymbolVariants,
-  Do as TextSymbols,
-  Ao as TextVariants,
-  Eo as UserManagement,
-  Xo as Video,
+  jo as SupportedLanguages,
+  Bt as TabsContainer,
+  Nt as TabsContent,
+  To as TagsList,
+  yo as Text,
+  Do as TextSymbolVariants,
+  Ro as TextSymbols,
+  vo as TextVariants,
+  Uo as UserManagement,
+  $o as Video,
   co as ViewingsList,
   se as WeChat,
   me as Youtube,

package/dist/scss/_vars.scss

@@ -149,6 +149,7 @@ $breakpoint-xl: 1801px;
   --link-label-line-height: 0.75rem;
   --button-label-size: 0.75rem;
   --button-label-line-height: 1rem;
+  --button-tertiary-height: 1.75rem;
   --badge-label-size: 0.5rem;
   --badge-label-line-height: 0.67rem;
   --snw-header-link-size: 1rem;
@@ -290,6 +291,7 @@ $link-label-size: var(--link-label-size);
 $button-label-size: var(--button-label-size);
 $link-label-line-height: var(--link-label-line-height);
 $button-label-line-height: var(--button-label-line-height);
+$button-tertiary-height: var(--button-tertiary-height);
 $badge-label-size: var(--badge-label-size);
 $badge-label-line-height: var(--badge-label-line-height);
 $snw-header-link-size: var(--snw-header-link-size);

package/dist/scss/componentStyles.scss

@@ -36,6 +36,7 @@
 @use 'components/ContentPeek/contentPeek';
 @use 'components/PageContentWrapper/pageContentWrapper';
 @use 'components/Carousel/carousel';
+@use 'components/Tags/tags';
 @use 'components/Countdown/countdown';
 @use 'components/Countdown/duration';
 

package/dist/scss/components/Tags/_tags.scss

@@ -0,0 +1,137 @@
+@use '../../allPartials' as *;
+
+.#{$px}-tags-list {
+  align-items: center;
+  display: flex;
+  flex-flow: row wrap;
+  gap: $spacing-sm;
+
+  .#{$px}-tag {
+    align-items: center;
+    background-color: $pure-white;
+    border: 1px solid $button-hover;
+    border-radius: 6.25rem;
+    cursor: default;
+    display: flex;
+    gap: 0;
+    height: $button-tertiary-height;
+    justify-content: center;
+    padding: 0 $spacing-xsm 0 $spacing-sm;
+
+    &__label {
+      color: $button-hover;
+      font-size: 0.75rem;
+      font-variation-settings: 'wght' 600;
+      text-align: center;
+    }
+
+    &__button {
+      align-items: center;
+      display: flex;
+      gap: $spacing-micro;
+      height: $button-tertiary-height;
+      justify-content: center;
+      padding: 0;
+
+      &--close {
+        height: 1.25rem;
+        width: 1.25rem;
+
+        svg {
+          height: 1rem;
+          width: 1rem;
+
+          path {
+            fill: $button-hover;
+          }
+
+          &:focus {
+            fill: $pure-black;
+          }
+        }
+
+        &:hover {
+          background-color: $pure-white;
+
+          svg {
+            path {
+              fill: $pure-black;
+            }
+          }
+        }
+
+        &:focus {
+          svg {
+            path {
+              fill: $pure-black;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &--clear {
+    align-items: center;
+    border-color: $pure-white;
+    display: flex;
+    gap: 0;
+    height: 2rem;
+
+    &:hover {
+      cursor: pointer;
+
+      .#{$px}-left-arrow {
+        svg {
+          fill: $pure-black;
+
+          path {
+            fill: $pure-black;
+          }
+        }
+      }
+    }
+
+    &:focus-visible {
+      border-color: $button-hover;
+      border-radius: 6.25rem;
+      gap: 0;
+      outline-offset: 0;
+      padding: 0;
+    }
+
+    .#{$px}-left-arrow {
+      transform: rotateX(-1);
+
+      svg {
+        height: 1rem;
+        width: 1rem;
+      }
+
+      &:hover {
+        background: $pure-white;
+
+        svg {
+          fill: $pure-black;
+
+          path {
+            fill: $pure-black;
+          }
+        }
+      }
+
+      &:focus-visible {
+        &:focus-visible {
+          outline: none;
+          outline-offset: none;
+        }
+      }
+    }
+
+    .#{$px}-label {
+      color: $pure-black;
+      font-size: 0.875rem;
+      font-variation-settings: 'wght' 600;
+    }
+  }
+}

package/package.json

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