@phillips/seldon 1.71.0 → 1.72.1

package/dist/components/Detail/Detail.d.ts

@@ -0,0 +1,18 @@
+import { ComponentProps } from 'react';
+export interface DetailProps extends ComponentProps<'div'> {
+    label: string;
+    value: string;
+}
+/**
+ * ## Overview
+ *
+ * A simple component for displaying value with a label. Layout style is handled by the [DetailList](/docs/patterns-detaillist--overview)
+ *
+ * [Figma Link](https://www.figma.com/design/hxqgsE26wM7hII0WaUaDfF/RW---TIMED-Lot-Details-(PDP)?node-id=189-5590&node-type=instance&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-detail--overview)
+ *
+ */
+declare const Detail: import("react").ForwardRefExoticComponent<Omit<DetailProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export type DetailComponent = ReturnType<typeof Detail>;
+export default Detail;

package/dist/components/Detail/Detail.js

@@ -0,0 +1,14 @@
+import { jsxs as r, jsx as l } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { getCommonProps as i } from "../../utils/index.js";
+const c = t(({ className: s, ...a }, m) => {
+  const { className: e, ...o } = i(a, "Detail");
+  return /* @__PURE__ */ r("div", { ...o, className: `${e} ${s}`, ...a, ref: m, children: [
+    /* @__PURE__ */ l("dt", { className: `${e}__label`, children: a.label }),
+    /* @__PURE__ */ l("dd", { className: `${e}__value`, children: a.value })
+  ] });
+});
+c.displayName = "Detail";
+export {
+  c as default
+};

package/dist/components/Detail/index.d.ts

@@ -0,0 +1 @@
+export { default as Detail, type DetailProps, type DetailComponent } from './Detail';

package/dist/index.d.ts

@@ -46,4 +46,6 @@ export * from './components/Collapsible';
 export * from './providers/SeldonProvider';
 export { default as PageContentWrapper } from './components/PageContentWrapper/PageContentWrapper';
 export * from './components/Carousel';
+export * from './components/Detail';
+export * from './patterns/DetailList';
 export * from './components/PinchZoom';

package/dist/index.js

@@ -1,6 +1,6 @@
-import { PaddingTokens as f, SpacingTokens as p, defaultYear as l, emailValidation as m, encodeURLSearchParams as s, findChildrenExcludingTypes as d, findChildrenOfType as u, generatePaddingClassName as i, getCommonProps as n, noOp as x, px as g, useNormalizedInputProps as c } from "./utils/index.js";
+import { PaddingTokens as f, SpacingTokens as l, defaultYear as p, emailValidation as s, encodeURLSearchParams as m, findChildrenExcludingTypes as d, findChildrenOfType as u, generatePaddingClassName as i, getCommonProps as x, noOp as n, px as g, useNormalizedInputProps as c } from "./utils/index.js";
 import { default as C } from "./pages/Page.js";
-import { default as L } from "./components/Button/Button.js";
+import { default as P } from "./components/Button/Button.js";
 import { ButtonVariants as T } from "./components/Button/types.js";
 import { default as b } from "./components/IconButton/IconButton.js";
 import { default as B } from "./components/ErrorBoundary/ErrorBoundary.js";
@@ -20,14 +20,14 @@ import { default as _ } from "./components/LinkList/LinkList.js";
 import { default as ee } from "./components/Row/Row.js";
 import { default as re } from "./components/GridItem/GridItem.js";
 import { GridItemAlign as ae } from "./components/GridItem/types.js";
-import { default as pe } from "./components/Search/Search.js";
-import { default as me } from "./components/Select/Select.js";
+import { default as le } from "./components/Search/Search.js";
+import { default as se } from "./components/Select/Select.js";
 import { default as de } from "./components/SplitPanel/SplitPanel.js";
 import { default as ie } from "./patterns/Subscribe/Subscribe.js";
-import { SubscriptionState as xe } from "./patterns/Subscribe/types.js";
+import { SubscriptionState as ne } from "./patterns/Subscribe/types.js";
 import { default as ce } from "./patterns/Social/Social.js";
 import { default as Ce } from "./patterns/ViewingsList/ViewingsList.js";
-import { default as Le } from "./components/Modal/Modal.js";
+import { default as Pe } from "./components/Modal/Modal.js";
 import { default as Te } from "./components/Drawer/Drawer.js";
 import { default as be } from "./components/Pagination/Pagination.js";
 import { default as Be } from "./patterns/ViewingsList/StatefulViewingsList.js";
@@ -50,15 +50,17 @@ import { default as $e } from "./components/Video/Video.js";
 import { default as oo } from "./patterns/LanguageSelector/LanguageSelector.js";
 import { default as to } from "./components/ContentPeek/ContentPeek.js";
 import { default as fo } from "./components/Collapsible/Collapsible.js";
-import { default as lo } from "./components/Collapsible/CollapsibleContent.js";
-import { default as so } from "./components/Collapsible/CollapsibleTrigger.js";
+import { default as po } from "./components/Collapsible/CollapsibleContent.js";
+import { default as mo } from "./components/Collapsible/CollapsibleTrigger.js";
 import { SeldonProvider as io } from "./providers/SeldonProvider.js";
-import { default as xo } from "./components/PageContentWrapper/PageContentWrapper.js";
+import { default as no } from "./components/PageContentWrapper/PageContentWrapper.js";
 import { default as co } from "./components/Carousel/Carousel.js";
 import { default as Co } from "./components/Carousel/CarouselContent.js";
-import { default as Lo } from "./components/Carousel/CarouselItem.js";
+import { default as Po } from "./components/Carousel/CarouselItem.js";
 import { default as To } from "./components/Carousel/CarouselDots.js";
-import { default as bo } from "./components/PinchZoom/PinchZoom.js";
+import { default as bo } from "./components/Detail/Detail.js";
+import { default as Bo } from "./patterns/DetailList/DetailList.js";
+import { default as Ao } from "./components/PinchZoom/PinchZoom.js";
 export {
   He as Accordion,
   Oe as AccordionItem,
@@ -66,16 +68,18 @@ export {
   ze as AccordionVariants,
   Ze as AuthState,
   Ke as Breadcrumb,
-  L as Button,
+  P as Button,
   T as ButtonVariants,
   co as Carousel,
   Co as CarouselContent,
   To as CarouselDots,
-  Lo as CarouselItem,
+  Po as CarouselItem,
   fo as Collapsible,
-  lo as CollapsibleContent,
-  so as CollapsibleTrigger,
+  po as CollapsibleContent,
+  mo as CollapsibleTrigger,
   to as ContentPeek,
+  bo as Detail,
+  Bo as DetailList,
   Te as Drawer,
   Xe as Dropdown,
   B as ErrorBoundary,
@@ -92,26 +96,26 @@ export {
   Q as LinkBlock,
   _ as LinkList,
   J as LinkVariants,
-  Le as Modal,
+  Pe as Modal,
   G as Navigation,
   H as NavigationItem,
   O as NavigationItemTrigger,
   U as NavigationList,
   f as PaddingTokens,
   C as Page,
-  xo as PageContentWrapper,
+  no as PageContentWrapper,
   be as Pagination,
-  bo as PinchZoom,
+  Ao as PinchZoom,
   ee as Row,
-  pe as Search,
+  le as Search,
   io as SeldonProvider,
-  me as Select,
+  se as Select,
   ce as Social,
-  p as SpacingTokens,
+  l as SpacingTokens,
   de as SplitPanel,
   Be as StatefulViewingsList,
   ie as Subscribe,
-  xe as SubscriptionState,
+  ne as SubscriptionState,
   qe as SupportedLanguages,
   ve as Text,
   ye as TextSymbolVariants,
@@ -120,14 +124,14 @@ export {
   We as UserManagement,
   $e as Video,
   Ce as ViewingsList,
-  l as defaultYear,
-  m as emailValidation,
-  s as encodeURLSearchParams,
+  p as defaultYear,
+  s as emailValidation,
+  m as encodeURLSearchParams,
   d as findChildrenExcludingTypes,
   u as findChildrenOfType,
   i as generatePaddingClassName,
-  n as getCommonProps,
-  x as noOp,
+  x as getCommonProps,
+  n as noOp,
   g as px,
   c as useNormalizedInputProps
 };

package/dist/patterns/DetailList/DetailList.d.ts

@@ -0,0 +1,29 @@
+import { ComponentProps } from 'react';
+import { DetailComponent } from '../../components/Detail';
+import { DetailListAlignment } from './types';
+export interface DetailListProps extends ComponentProps<'dl'> {
+    /**
+     * Determines whether each Details' label and value are aligned in columns or justified
+     */
+    alignment: DetailListAlignment;
+    /**
+     * The Detail components to render
+     */
+    children: DetailComponent[];
+    /**
+     * Whether to render separators between each Detail component
+     */
+    hasSeparators: boolean;
+}
+/**
+ * ## Overview
+ *
+ * A container for displaying a list of [Detail](/docs/components-detail--overview) components. The alignment prop determines whether each Detail's label and value are aligned in columns or justified. Separators can also be added between each Detail component.
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=11364-24078&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/patterns-detaillist--overview)
+ *
+ */
+declare const DetailList: import("react").ForwardRefExoticComponent<Omit<DetailListProps, "ref"> & import("react").RefAttributes<HTMLDListElement>>;
+export default DetailList;

package/dist/patterns/DetailList/DetailList.js

@@ -0,0 +1,39 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import f from "../../node_modules/classnames/index.js";
+import { getCommonProps as $, px as s } from "../../utils/index.js";
+import { DetailListAlignment as m } from "./types.js";
+import { getDetailKey as j } from "./utils.js";
+const D = N(
+  ({ alignment: o, className: p, children: t, hasSeparators: l, ...a }, u) => {
+    const { className: e, ...c } = $(a, "DetailList");
+    return /* @__PURE__ */ r(
+      "dl",
+      {
+        ...c,
+        className: f(e, p, {
+          [`${s}-columns`]: o === m.columns,
+          [`${s}-justified`]: o === m.justified
+        }),
+        ...a,
+        ref: u,
+        children: t == null ? void 0 : t.map((i, d) => /* @__PURE__ */ r(
+          "div",
+          {
+            className: f(`${e}-wrapper`, {
+              [`${s}-has-separators`]: l,
+              [`${s}-columns`]: o === m.columns,
+              [`${s}-justified`]: o === m.justified
+            }),
+            children: i
+          },
+          j(i, d)
+        ))
+      }
+    );
+  }
+);
+D.displayName = "DetailList";
+export {
+  D as default
+};

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

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

package/dist/patterns/DetailList/types.d.ts

@@ -0,0 +1,4 @@
+export declare enum DetailListAlignment {
+    columns = "columns",
+    justified = "justified"
+}

package/dist/patterns/DetailList/types.js

@@ -0,0 +1,4 @@
+var r = /* @__PURE__ */ ((u) => (u.columns = "columns", u.justified = "justified", u))(r || {});
+export {
+  r as DetailListAlignment
+};

package/dist/patterns/DetailList/utils.d.ts

@@ -0,0 +1,2 @@
+import { DetailComponent } from '../../components/Detail';
+export declare const getDetailKey: (child: DetailComponent, index: number) => string;

package/dist/patterns/DetailList/utils.js

@@ -0,0 +1,11 @@
+import { isValidElement as a } from "react";
+const o = (e, t) => {
+  if (a(e)) {
+    const { label: r, value: l } = e.props;
+    return `detail-${r}-${l}`;
+  }
+  return `detail-${t}`;
+};
+export {
+  o as getDetailKey
+};

package/dist/scss/_utils.scss

@@ -83,8 +83,7 @@
 }
 
 @mixin media($breakpoint, $type: 'min') {
-  @if $breakpoint == $size-sm {
-    // $breakpoint-sm: 360px;
+  @if $breakpoint == $size-sm or $breakpoint == $breakpoint-sm {
     @if $type == 'min' {
       @media (min-width: $breakpoint-sm) {
         @content;
@@ -98,7 +97,7 @@
     }
   }
 
-  @if $breakpoint == $size-md {
+  @if $breakpoint == $size-md or $breakpoint == $breakpoint-md {
     // $breakpoint-md: 961px;
     @if $type == 'min' {
       @media (min-width: $breakpoint-md) {
@@ -113,7 +112,7 @@
     }
   }
 
-  @if $breakpoint == $size-lg {
+  @if $breakpoint == $size-lg or $breakpoint == $breakpoint-lg {
     // $breakpoint-lg: 1401px;
 
     @if $type == 'min' {
@@ -129,7 +128,7 @@
     }
   }
 
-  @if $breakpoint == $size-xl {
+  @if $breakpoint == $size-xl or $breakpoint == $breakpoint-xl {
     // $breakpoint-xl: 1801px;
     @if $type == 'min' {
       @media (min-width: $breakpoint-xl) {

package/dist/scss/componentStyles.scss

@@ -48,4 +48,6 @@
 // Site Furniture
 @use 'site-furniture/Header/header';
 @use 'site-furniture/Footer/footer';
+@use 'components/Detail/detail';
+@use 'patterns/DetailList/detailList';
 @use 'components/PinchZoom/pinchZoom';

package/dist/scss/components/Accordion/_accordion.scss

@@ -92,21 +92,21 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  opacity: 0.75;
 
   &--hoverable {
     cursor: pointer;
 
-    &:hover {
-      opacity: 1;
+    &:hover,
+    &:focus-visible {
+      opacity: 0.75;
     }
   }
 
   &__text {
     flex: auto;
+    font-variation-settings: 'wght' 600;
 
-    @include text($body2);
-    @include DistinctDisplay;
+    @include text($string2);
   }
 
   &__text--lg {
@@ -115,15 +115,41 @@
 
   &__icon {
     flex: initial;
-    height: 1.5rem;
+    height: 0.875rem;
     width: 1.5rem;
   }
 
   &__icon--lg {
-    height: 2rem;
+    height: 1.5rem;
     width: 2rem;
   }
 
+  @include media($breakpoint-md) {
+    &__icon {
+      flex: initial;
+      height: 1rem;
+      width: 1.5rem;
+    }
+
+    &__icon--lg {
+      height: 1.5rem;
+      width: 2rem;
+    }
+  }
+
+  @include media($breakpoint-xl) {
+    &__icon {
+      flex: initial;
+      height: 1.25rem;
+      width: 1.75rem;
+    }
+
+    &__icon--lg {
+      height: 2rem;
+      width: 3rem;
+    }
+  }
+
   &--blue-fill {
     filter: brightness(0) saturate(100%) invert(51%) sepia(72%) saturate(1698%) hue-rotate(191deg) brightness(95%)
       contrast(86%);

package/dist/scss/components/Detail/_detail.scss

@@ -0,0 +1,34 @@
+@use '../../allPartials' as *;
+
+.#{$px}-detail {
+  align-items: center;
+  align-items: flex-start;
+  align-self: stretch;
+  color: $pure-black;
+  display: flex;
+  gap: $spacing-md;
+
+  @include text($string2);
+
+  &__label {
+    flex-shrink: 0;
+    font-variation-settings: 'wght' 600;
+    width: 160px;
+
+    @media (max-width: $breakpoint-lg) {
+      width: 128px;
+    }
+
+    @media (max-width: $breakpoint-md) {
+      width: 128px;
+    }
+
+    @media (max-width: $breakpoint-sm) {
+      width: 96px;
+    }
+  }
+
+  &__value {
+    font-variation-settings: 'wght' 400;
+  }
+}

package/dist/scss/patterns/DetailList/_detailList.scss

@@ -0,0 +1,37 @@
+@use '../../allPartials' as *;
+
+.#{$px}-detail-list {
+  display: flex;
+  flex-direction: column;
+  gap: $spacing-sm;
+
+  &-wrapper {
+    .#{$px}-detail {
+      padding: 0;
+    }
+  }
+
+  .#{$px}-columns {
+    .#{px}-detail {
+      justify-content: start;
+    }
+  }
+
+  .#{$px}-justified {
+    .#{$px}-detail {
+      justify-content: space-between;
+    }
+  }
+
+  .#{$px}-has-separators {
+    border-top: 1px solid $light-gray;
+
+    &:last-child {
+      border-bottom: 1px solid $light-gray;
+    }
+
+    .#{$px}-detail {
+      padding: $spacing-sm 0;
+    }
+  }
+}

package/dist/scss/site-furniture/Header/_header.scss

@@ -178,4 +178,10 @@
       width: 100%;
     }
   }
+
+  .#{$px}-accordion-item-label__icon {
+    // slightly larger in header mobile than default
+    height: 1rem;
+    width: 1.5rem;
+  }
 }

package/package.json

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