@phillips/seldon 1.94.0 → 1.95.0

package/dist/components/Pagination/Pagination.js

@@ -19,15 +19,15 @@ const E = ({
   selectLabel: C = "Select",
   ...s
 }) => {
-  const N = "pagination", { className: u, ..._ } = w(s, "Pagination"), { id: c } = s, { pendingState: y, setPendingState: I } = k(o(g)), m = y || g, d = (t, e) => {
+  const N = "pagination", { className: u, ...I } = w(s, "Pagination"), { id: c } = s, { pendingState: _, setPendingState: y } = k(o(g)), m = _ || g, d = (t, e) => {
     const a = o(t);
-    I(a), P(a, e);
+    y(a), P(a, e);
   };
   return /* @__PURE__ */ O(
     "div",
     {
       className: p(`${r}-${N}`, { [`${u}__wrapper`]: u }, b),
-      ..._,
+      ...I,
       ...s,
       children: [
         /* @__PURE__ */ i(
@@ -58,6 +58,7 @@ const E = ({
             "data-testid": `${c}-select-button`,
             hideLabel: !0,
             disabled: l,
+            showIcon: !1,
             children: n.map((t) => {
               const e = o(t);
               return /* @__PURE__ */ i("option", { value: e, children: typeof t == "string" || typeof t == "number" ? t : t.label }, e);

package/dist/components/Select/Select.d.ts

@@ -1,10 +1,19 @@
 import { InputProps } from '../Input/Input';
+import { SelectVariants } from './types';
 import * as React from 'react';
 export interface SelectProps extends InputProps {
     /**
      * Option elements that are selectable
      */
     children: React.ReactNode;
+    /**
+     * Determines if you want to show the icon
+     */
+    showIcon?: boolean;
+    /**
+     * Determines the variant of the select
+     */
+    variant: SelectVariants;
 }
 /**
  * ## Overview

package/dist/components/Select/Select.js

@@ -1,59 +1,70 @@
-import { jsxs as P, jsx as l } from "react/jsx-runtime";
-import * as R from "react";
-import n from "../../node_modules/classnames/index.js";
-import { px as t, useNormalizedInputProps as S } from "../../utils/index.js";
-const z = R.forwardRef(
+import { jsxs as p, jsx as s } from "react/jsx-runtime";
+import * as k from "react";
+import i from "../../node_modules/classnames/index.js";
+import { px as e, useNormalizedInputProps as z } from "../../utils/index.js";
+import { SelectVariants as c } from "./types.js";
+import D from "../../assets/chevronDown.svg.js";
+const F = k.forwardRef(
   ({
-    children: r,
+    children: d,
     className: a,
-    defaultValue: d,
-    disabled: o,
-    hideLabel: u,
-    id: i,
-    inline: m,
-    invalid: $,
-    invalidText: c,
-    labelText: _,
-    onChange: b,
-    onClick: f,
-    readOnly: p,
-    size: w = "md",
-    value: h,
-    warn: v,
-    warnText: x,
-    ...N
+    defaultValue: m,
+    disabled: u,
+    hideLabel: $,
+    id: n,
+    showIcon: l = !0,
+    variant: _ = c.default,
+    inline: f,
+    invalid: b,
+    invalidText: v,
+    labelText: h,
+    onChange: w,
+    onClick: V,
+    readOnly: r,
+    size: C = "md",
+    value: x,
+    warn: y,
+    warnText: N,
+    ...S
   }, j) => {
-    const s = "select", e = S({ disabled: o, id: i, invalid: $, invalidText: c, readOnly: p, type: s, warn: v, warnText: x }), y = n(`${t}-${s}-input`, `${t}-input`, `${t}-input--${w}`, {
-      [`${t}-input--inline`]: m,
-      [`${t}-input--readonly`]: p,
-      [`${t}-input--disabled`]: e.disabled,
-      [`${t}-input--invalid`]: e.invalid,
-      [`${t}-input--warn`]: e.warn,
+    const o = "select", t = z({ disabled: u, id: n, invalid: b, invalidText: v, readOnly: r, type: o, warn: y, warnText: N }), P = i(`${e}-${o}-input`, `${e}-input`, `${e}-input--${C}`, {
+      [`${e}-input--inline`]: f,
+      [`${e}-input--readonly`]: r,
+      [`${e}-input--disabled`]: t.disabled,
+      [`${e}-input--invalid`]: t.invalid,
+      [`${e}-input--warn`]: t.warn,
       [`${a}__wrapper`]: a
+    }), R = i(`${e}-input__input`, {
+      className: a,
+      [`${e}-input__select--tertiary`]: _ === c.tertiary
+    }), g = i(`${e}-select-container`, {
+      [`${e}-select-container--show__icon`]: l
     });
-    return /* @__PURE__ */ P("div", { className: y, children: [
-      /* @__PURE__ */ l("label", { htmlFor: i, className: n(`${t}-input__label`, { [`${t}-input__label--hidden`]: u }), children: _ }),
-      /* @__PURE__ */ l(
-        "select",
-        {
-          className: n(`${t}-input__input`, { className: a }),
-          "data-testid": i,
-          defaultValue: d,
-          disabled: e.disabled,
-          id: i,
-          onChange: b,
-          onClick: f,
-          ref: j,
-          value: h,
-          ...N,
-          children: r
-        }
-      ),
-      e.validation
+    return /* @__PURE__ */ p("div", { className: P, children: [
+      /* @__PURE__ */ s("label", { htmlFor: n, className: i(`${e}-input__label`, { [`${e}-input__label--hidden`]: $ }), children: h }),
+      /* @__PURE__ */ p("div", { className: g, children: [
+        /* @__PURE__ */ s(
+          "select",
+          {
+            className: R,
+            "data-testid": n,
+            defaultValue: m,
+            disabled: t.disabled,
+            id: n,
+            onChange: w,
+            ref: j,
+            value: x,
+            ...S,
+            children: d
+          }
+        ),
+        l ? /* @__PURE__ */ s(D, {}) : null
+      ] }),
+      t.validation
     ] });
   }
 );
-z.displayName = "Select";
+F.displayName = "Select";
 export {
-  z as default
+  F as default
 };

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

@@ -1,4 +1,5 @@
 import { SelectProps } from './Select';
+import { SelectVariants } from './types';
 declare const meta: {
     title: string;
     component: import('react').ForwardRefExoticComponent<Omit<SelectProps, "ref"> & import('react').RefAttributes<HTMLSelectElement>>;
@@ -13,12 +14,14 @@ export declare const Playground: {
         playgroundWidth: number;
         className: string;
         defaultValue: string;
+        showIcon: boolean;
         disabled: boolean;
         invalid: boolean;
         invalidText: string;
         labelText: string;
         readOnly: boolean;
         size: string;
+        variant: SelectVariants;
         warn: boolean;
         warnText: string;
     };
@@ -33,6 +36,11 @@ export declare const Playground: {
                 type: string;
             };
         };
+        showIcon: {
+            control: {
+                type: string;
+            };
+        };
         invalid: {
             control: {
                 type: string;
@@ -68,6 +76,12 @@ export declare const Playground: {
                 type: string;
             };
         };
+        variant: {
+            options: SelectVariants[];
+            control: {
+                type: string;
+            };
+        };
         value: {
             control: {
                 type: string;
@@ -90,3 +104,19 @@ export declare const Playground: {
         };
     };
 };
+export declare const Tertiary: {
+    ({ playgroundWidth, ...args }: StoryProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        showIcon: boolean;
+        variant: SelectVariants;
+    };
+    argTypes: {
+        variant: {
+            options: SelectVariants[];
+            control: {
+                type: string;
+            };
+            defaultValue: SelectVariants;
+        };
+    };
+};

package/dist/components/Select/types.d.ts

@@ -0,0 +1,4 @@
+export declare enum SelectVariants {
+    default = "default",
+    tertiary = "tertiary"
+}

package/dist/components/Select/types.js

@@ -0,0 +1,4 @@
+var t = /* @__PURE__ */ ((r) => (r.default = "default", r.tertiary = "tertiary", r))(t || {});
+export {
+  t as SelectVariants
+};

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export { default as GridItem, type GridItemProps } from './components/GridItem/G
 export { GridItemAlign } from './components/GridItem/types';
 export { default as Search, type SearchProps } from './components/Search/Search';
 export { default as Select, type SelectProps } from './components/Select/Select';
+export { SelectVariants } from './components/Select/types';
 export { default as SplitPanel, type SplitPanelProps } from './components/SplitPanel/SplitPanel';
 export { default as Subscribe, type SubscribeProps } from './patterns/Subscribe/Subscribe';
 export { SubscriptionState } from './patterns/Subscribe/types';

package/dist/index.js

@@ -4,7 +4,7 @@ import { default as L } from "./assets/arrowPrev.svg.js";
 import { default as b } from "./assets/calendar.svg.js";
 import { default as T } from "./assets/calendarAlt.svg.js";
 import { default as k } from "./assets/chevronDown.svg.js";
-import { default as B } from "./assets/chevronNext.svg.js";
+import { default as v } from "./assets/chevronNext.svg.js";
 import { default as w } from "./assets/chevronRight.svg.js";
 import { default as D } from "./assets/close.svg.js";
 import { default as F } from "./assets/favorite.svg.js";
@@ -31,7 +31,7 @@ import { SSRMediaQuery as Se, ssrMediaQueryStyle as he } from "./providers/Seldo
 import { AuctionStatus as Pe, SupportedLanguages as be } from "./types/commonTypes.js";
 import { default as Te } from "./components/Button/Button.js";
 import { ButtonVariants as ke } from "./components/Button/types.js";
-import { default as Be } from "./components/IconButton/IconButton.js";
+import { default as ve } from "./components/IconButton/IconButton.js";
 import { default as we } from "./components/ErrorBoundary/ErrorBoundary.js";
 import { default as De } from "./site-furniture/Footer/Footer.js";
 import { Grid as Fe } from "./components/Grid/Grid.js";
@@ -51,94 +51,95 @@ import { default as so } from "./components/GridItem/GridItem.js";
 import { GridItemAlign as mo } from "./components/GridItem/types.js";
 import { default as uo } from "./components/Search/Search.js";
 import { default as no } from "./components/Select/Select.js";
-import { default as go } from "./components/SplitPanel/SplitPanel.js";
-import { default as Co } from "./patterns/Subscribe/Subscribe.js";
-import { SubscriptionState as ho } from "./patterns/Subscribe/types.js";
-import { default as Po } from "./patterns/Social/Social.js";
-import { default as Io } from "./patterns/ViewingsList/ViewingsList.js";
-import { default as Ao } from "./components/Modal/Modal.js";
-import { default as vo } from "./components/Drawer/Drawer.js";
-import { default as Vo } from "./components/Pagination/Pagination.js";
-import { default as yo } from "./components/Tags/Tags.js";
-import { default as No } from "./patterns/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as Ho } from "./components/Text/types.js";
-import { default as Ro } from "./components/Text/Text.js";
-import { TextSymbolVariants as Uo } from "./components/TextSymbol/types.js";
-import { default as Wo } from "./components/TextSymbol/TextSymbol.js";
-import { default as Qo } from "./components/Accordion/Accordion.js";
-import { default as jo } from "./components/Accordion/AccordionItem.js";
-import { AccordionItemVariant as Zo, AccordionVariants as qo } from "./components/Accordion/types.js";
-import { default as Ko } from "./patterns/UserManagement/UserManagement.js";
-import { AuthState as _o } from "./patterns/UserManagement/types.js";
-import { default as et } from "./components/Breadcrumb/Breadcrumb.js";
+import { SelectVariants as go } from "./components/Select/types.js";
+import { default as Co } from "./components/SplitPanel/SplitPanel.js";
+import { default as ho } from "./patterns/Subscribe/Subscribe.js";
+import { SubscriptionState as Po } from "./patterns/Subscribe/types.js";
+import { default as Io } from "./patterns/Social/Social.js";
+import { default as Ao } from "./patterns/ViewingsList/ViewingsList.js";
+import { default as Vo } from "./components/Modal/Modal.js";
+import { default as Bo } from "./components/Drawer/Drawer.js";
+import { default as yo } from "./components/Pagination/Pagination.js";
+import { default as No } from "./components/Tags/Tags.js";
+import { default as Ho } from "./patterns/ViewingsList/StatefulViewingsList.js";
+import { TextVariants as Ro } from "./components/Text/types.js";
+import { default as Uo } from "./components/Text/Text.js";
+import { TextSymbolVariants as Wo } from "./components/TextSymbol/types.js";
+import { default as Qo } from "./components/TextSymbol/TextSymbol.js";
+import { default as jo } from "./components/Accordion/Accordion.js";
+import { default as Zo } from "./components/Accordion/AccordionItem.js";
+import { AccordionItemVariant as Jo, AccordionVariants as Ko } from "./components/Accordion/types.js";
+import { default as _o } from "./patterns/UserManagement/UserManagement.js";
+import { AuthState as et } from "./patterns/UserManagement/types.js";
+import { default as tt } from "./components/Breadcrumb/Breadcrumb.js";
 import "react/jsx-runtime";
 import "./node_modules/classnames/index.js";
-import { default as tt } from "./components/Dropdown/Dropdown.js";
-import { default as at } from "./components/Video/Video.js";
-import { default as st } from "./patterns/LanguageSelector/LanguageSelector.js";
-import { default as dt } from "./components/ContentPeek/ContentPeek.js";
-import { HeightUnits as pt } from "./components/ContentPeek/utils.js";
-import { default as xt } from "./components/Collapsible/Collapsible.js";
-import { default as it } from "./components/Collapsible/CollapsibleContent.js";
-import { default as ct } from "./components/Collapsible/CollapsibleTrigger.js";
-import { SeldonProvider as St } from "./providers/SeldonProvider/SeldonProvider.js";
-import { default as Lt } from "./components/PageContentWrapper/PageContentWrapper.js";
-import { default as bt } from "./components/Carousel/Carousel.js";
-import { default as Tt } from "./components/Carousel/CarouselContent.js";
-import { default as kt } from "./components/Carousel/CarouselItem.js";
-import { default as Bt } from "./components/Carousel/CarouselDots.js";
-import { default as wt } from "./components/Detail/Detail.js";
-import { default as Dt } from "./patterns/DetailList/DetailList.js";
-import { DetailListAlignment as Ft } from "./patterns/DetailList/types.js";
-import { default as Mt } from "./components/PinchZoom/PinchZoom.js";
-import { default as Ot } from "./components/Tabs/TabsContainer.js";
-import { default as Gt } from "./components/Tabs/TabsContent.js";
-import { default as Et } from "./components/SeldonImage/SeldonImage.js";
-import { default as Yt } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
-import { default as zt } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
-import { AuctionState as qt } from "./patterns/SaleHeaderBanner/types.js";
-import { default as Kt } from "./components/Countdown/Countdown.js";
-import { CountdownVariants as _t } from "./components/Countdown/types.js";
-import { default as er } from "./patterns/ObjectTile/ObjectTile.js";
-import { default as tr } from "./patterns/BidSnapshot/BidSnapshot.js";
-import { default as ar } from "./patterns/BidSnapshot/BidMessage.js";
+import { default as at } from "./components/Dropdown/Dropdown.js";
+import { default as st } from "./components/Video/Video.js";
+import { default as dt } from "./patterns/LanguageSelector/LanguageSelector.js";
+import { default as pt } from "./components/ContentPeek/ContentPeek.js";
+import { HeightUnits as xt } from "./components/ContentPeek/utils.js";
+import { default as it } from "./components/Collapsible/Collapsible.js";
+import { default as ct } from "./components/Collapsible/CollapsibleContent.js";
+import { default as St } from "./components/Collapsible/CollapsibleTrigger.js";
+import { SeldonProvider as Lt } from "./providers/SeldonProvider/SeldonProvider.js";
+import { default as bt } from "./components/PageContentWrapper/PageContentWrapper.js";
+import { default as Tt } from "./components/Carousel/Carousel.js";
+import { default as kt } from "./components/Carousel/CarouselContent.js";
+import { default as vt } from "./components/Carousel/CarouselItem.js";
+import { default as wt } from "./components/Carousel/CarouselDots.js";
+import { default as Dt } from "./components/Detail/Detail.js";
+import { default as Ft } from "./patterns/DetailList/DetailList.js";
+import { DetailListAlignment as Mt } from "./patterns/DetailList/types.js";
+import { default as Ot } from "./components/PinchZoom/PinchZoom.js";
+import { default as Gt } from "./components/Tabs/TabsContainer.js";
+import { default as Et } from "./components/Tabs/TabsContent.js";
+import { default as Yt } from "./components/SeldonImage/SeldonImage.js";
+import { default as zt } from "./patterns/SaleHeaderBanner/SaleHeaderBanner.js";
+import { default as qt } from "./patterns/SaleHeaderBanner/SaleHeaderBrowseAuctions.js";
+import { AuctionState as Kt } from "./patterns/SaleHeaderBanner/types.js";
+import { default as _t } from "./components/Countdown/Countdown.js";
+import { CountdownVariants as er } from "./components/Countdown/types.js";
+import { default as tr } from "./patterns/ObjectTile/ObjectTile.js";
+import { default as ar } from "./patterns/BidSnapshot/BidSnapshot.js";
+import { default as sr } from "./patterns/BidSnapshot/BidMessage.js";
 export {
-  Qo as Accordion,
-  jo as AccordionItem,
-  Zo as AccordionItemVariant,
-  qo as AccordionVariants,
+  jo as Accordion,
+  Zo as AccordionItem,
+  Jo as AccordionItemVariant,
+  Ko as AccordionVariants,
   S as AccountCircle,
   L as ArrowPrev,
-  qt as AuctionState,
+  Kt as AuctionState,
   Pe as AuctionStatus,
-  _o as AuthState,
-  ar as BidMessage,
-  tr as BidSnapshot,
-  et as Breadcrumb,
+  et as AuthState,
+  sr as BidMessage,
+  ar as BidSnapshot,
+  tt as Breadcrumb,
   Te as Button,
   ke as ButtonVariants,
   b as Calendar,
   T as CalendarAlt,
-  bt as Carousel,
-  Tt as CarouselContent,
-  Bt as CarouselDots,
-  kt as CarouselItem,
+  Tt as Carousel,
+  kt as CarouselContent,
+  wt as CarouselDots,
+  vt as CarouselItem,
   k as ChevronDown,
-  B as ChevronNext,
+  v as ChevronNext,
   w as ChevronRight,
   D as Close,
-  xt as Collapsible,
-  it as CollapsibleContent,
-  ct as CollapsibleTrigger,
-  dt as ContentPeek,
-  pt as ContentPeekHeightUnits,
-  Kt as Countdown,
-  _t as CountdownVariants,
-  wt as Detail,
-  Dt as DetailList,
-  Ft as DetailListAlignment,
-  vo as Drawer,
-  tt as Dropdown,
+  it as Collapsible,
+  ct as CollapsibleContent,
+  St as CollapsibleTrigger,
+  pt as ContentPeek,
+  xt as ContentPeekHeightUnits,
+  _t as Countdown,
+  er as CountdownVariants,
+  Dt as Detail,
+  Ft as DetailList,
+  Mt as DetailListAlignment,
+  Bo as Drawer,
+  at as Dropdown,
   we as ErrorBoundary,
   O as Facebook,
   F as Favorite,
@@ -151,10 +152,10 @@ export {
   mo as GridItemAlign,
   Me as Header,
   ze as HeroBanner,
-  Be as IconButton,
+  ve as IconButton,
   qe as Input,
   q as Instagram,
-  st as LanguageSelector,
+  dt as LanguageSelector,
   Ke as Link,
   eo as LinkBlock,
   to as LinkList,
@@ -162,48 +163,49 @@ export {
   E as LinkedIn,
   K as Lock,
   _ as Minus,
-  Ao as Modal,
+  Vo as Modal,
   Oe as Navigation,
   Ge as NavigationItem,
   Ee as NavigationItemTrigger,
   Ye as NavigationList,
-  er as ObjectTile,
+  tr as ObjectTile,
   f as PaddingTokens,
   ie as Page,
-  Lt as PageContentWrapper,
-  Vo as Pagination,
+  bt as PageContentWrapper,
+  yo as Pagination,
   ee as PhillipsLogo,
-  Mt as PinchZoom,
+  Ot as PinchZoom,
   te as Plus,
   ae as React,
   Y as Reddit,
   ao as Row,
   Se as SSRMediaQuery,
-  Yt as SaleHeaderBanner,
-  zt as SaleHeaderBrowseAuctions,
+  zt as SaleHeaderBanner,
+  qt as SaleHeaderBrowseAuctions,
   uo as Search,
-  Et as SeldonImage,
-  St as SeldonProvider,
+  Yt as SeldonImage,
+  Lt as SeldonProvider,
   no as Select,
+  go as SelectVariants,
   se as Share,
-  Po as Social,
+  Io as Social,
   s as SpacingTokens,
-  go as SplitPanel,
+  Co as SplitPanel,
   de as Spotify,
-  No as StatefulViewingsList,
-  Co as Subscribe,
-  ho as SubscriptionState,
+  Ho as StatefulViewingsList,
+  ho as Subscribe,
+  Po as SubscriptionState,
   be as SupportedLanguages,
-  Ot as TabsContainer,
-  Gt as TabsContent,
-  yo as TagsList,
-  Ro as Text,
-  Uo as TextSymbolVariants,
-  Wo as TextSymbols,
-  Ho as TextVariants,
-  Ko as UserManagement,
-  at as Video,
-  Io as ViewingsList,
+  Gt as TabsContainer,
+  Et as TabsContent,
+  No as TagsList,
+  Uo as Text,
+  Wo as TextSymbolVariants,
+  Qo as TextSymbols,
+  Ro as TextVariants,
+  _o as UserManagement,
+  st as Video,
+  Ao as ViewingsList,
   pe as WeChat,
   xe as Youtube,
   l as defaultYear,

package/dist/scss/componentStyles.scss

@@ -32,6 +32,7 @@
 @use 'components/Drawer/drawer';
 @use 'components/Dropdown/dropdown';
 @use 'components/Video/video';
+@use 'components/Select/select';
 @use 'components/Pagination/pagination';
 @use 'components/ContentPeek/contentPeek';
 @use 'components/PageContentWrapper/pageContentWrapper';

package/dist/scss/components/Select/_select.scss

@@ -0,0 +1,74 @@
+@use '../../allPartials' as *;
+
+.#{$px}-select-input {
+  position: relative;
+
+  .#{$px}-select-container {
+    position: relative;
+
+    &--show__icon {
+      select {
+        appearance: none;
+        padding-right: 1.55rem;
+
+        @media (min-width: $breakpoint-md) {
+          padding-right: 1.95rem;
+        }
+
+        @media (min-width: $breakpoint-xl) {
+          padding-right: 2.25rem;
+        }
+      }
+    }
+  }
+
+  svg {
+    height: 1rem;
+    pointer-events: none;
+    position: absolute;
+    right: 0.35rem;
+    top: 45%;
+    transform: translateY(-45%);
+    width: 1rem;
+
+    @media (min-width: $breakpoint-md) {
+      height: 1.25rem;
+      right: 0.5rem;
+      width: 1.25rem;
+    }
+
+    @media (min-width: $breakpoint-xl) {
+      height: 1.5rem;
+      right: 0.55rem;
+      width: 1.5rem;
+    }
+
+    path {
+      fill: $pure-black;
+    }
+  }
+
+  select.#{$px}-input {
+    &__select {
+      &--tertiary {
+        border: 0;
+        color: inherit;
+
+        &:hover {
+          cursor: pointer;
+        }
+
+        &:focus-visible {
+          background-color: $pure-white;
+          border-radius: 0;
+          outline-color: $soft-black;
+          outline-offset: 4.5px;
+        }
+
+        svg {
+          top: 0.625rem;
+        }
+      }
+    }
+  }
+}

package/package.json

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