@phillips/seldon 1.161.0 → 1.162.0

package/dist/components/ComposedModal/ComposedModal.d.ts

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { ModalProps } from '../Modal/Modal';
+export interface ModalButtonProps {
+    /**
+     * Callback click function for button
+     */
+    onClick?: () => void | unknown;
+    /**
+     * Button label text
+     */
+    buttonLabel?: string;
+}
+export interface ComposedModalProps extends Omit<ModalProps, 'onClose' | 'role' | 'style'> {
+    /**
+     * Title for Composed Modal
+     */
+    title: string;
+    /**
+     * The content of the modal.
+     */
+    children: React.ReactNode;
+    /**
+     * onClose handler for the modal
+     */
+    onClose?: () => void;
+    /**
+     * Maximum height value for the modal body
+     */
+    maxHeightValue?: string;
+    /**
+     * Left Button Props
+     */
+    secondaryButton?: ModalButtonProps;
+    /**
+     * Right Button Props
+     */
+    primaryButton?: ModalButtonProps;
+    /**
+     * Footer content for bottom of Viewings Details
+     */
+    footerContent?: ReactNode;
+}
+/**
+ * ## Overview
+ *
+ * A component for ComposedModal that extends the base Modal component.
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/Design-System--Responsive-Web?node-id=25578-15048&p=f&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-composedmodal--overview)
+ *
+ */
+declare const ComposedModal: import('react').ForwardRefExoticComponent<ComposedModalProps & import('react').RefAttributes<HTMLDivElement>>;
+export default ComposedModal;

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

@@ -0,0 +1,38 @@
+import { ComposedModalProps } from './ComposedModal';
+declare const _default: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<ComposedModalProps & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Playground: {
+    (props: ComposedModalProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        id: string;
+        title: string;
+        viewingDetailsProps: {
+            label: string;
+            sessionTimesLabel: string;
+            sessionTimes: {
+                sessionLabel: string;
+                sessionTime: string;
+            }[];
+            viewingTimes: string[];
+            location: string;
+            mapLink: string;
+        };
+    };
+};
+export declare const ComposedModalScroll: {
+    (props: ComposedModalProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        id: string;
+        title: string;
+    };
+};
+export declare const ComposedModalSingleButton: {
+    (props: ComposedModalProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        id: string;
+        title: string;
+    };
+};

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

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

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

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

package/dist/components/ExitGateCard/ExitGateCard.d.ts

@@ -0,0 +1,51 @@
+import { ComponentProps, ElementType, ReactNode } from 'react';
+import { ButtonVariants } from '../Button/types';
+export interface ExitGateCardProps extends ComponentProps<'div'> {
+    /**
+     * Image src to display at the right side of the article.
+     */
+    imageSrc?: string;
+    /**
+     * Top label for the article.
+     */
+    label?: ReactNode;
+    /**
+     * Header for the article.
+     */
+    header?: ReactNode;
+    /**
+     * Description for the article.
+     */
+    description?: ReactNode;
+    /**
+     * Custom link element to use for the link. Defaults to the `Link` component.
+     */
+    linkElement?: ElementType<ComponentProps<'a'>>;
+    /**
+     * Label for the link.
+     */
+    linkLabel?: ReactNode;
+    /**
+     * Href for the link.
+     */
+    linkHref?: string;
+    /**
+     * imageSrc alt text for accessibility.
+     */
+    altText?: string;
+    /**
+     * LinkVariants for the ExitGateCard.
+     */
+    variant?: ButtonVariants;
+}
+/**
+ * ## Overview
+ *
+ * Overview of this widget
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/Design-System--Foundations--RW-to-be-depreciated-?node-id=24825-524&p=f&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-ExitGateCard-overview)
+ */
+declare const ExitGateCard: import('react').ForwardRefExoticComponent<Omit<ExitGateCardProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default ExitGateCard;

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

@@ -0,0 +1,18 @@
+import { ExitGateCardProps } from './ExitGateCard';
+declare const meta: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<ExitGateCardProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default meta;
+export declare const Playground: {
+    (props: ExitGateCardProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        imageSrc: string;
+        label: string;
+        header: string;
+        description: string;
+        linkLabel: string;
+        linkHref: string;
+        variant: string;
+    };
+};

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

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

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

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

package/dist/components/SaleCard/SaleCard.js

@@ -1,48 +1,48 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { jsxs as s, jsx as r } from "react/jsx-runtime";
 import { forwardRef as R } from "react";
 import { getCommonProps as V } from "../../utils/index.js";
 import $ from "../../node_modules/classnames/index.js";
 import { TextVariants as i } from "../Text/types.js";
 import e from "../Text/Text.js";
 import j from "../SeldonImage/SeldonImage.js";
-import t from "../Button/Button.js";
+import n from "../Button/Button.js";
 import { ButtonVariants as m } from "../Button/types.js";
 import { SSRMediaQuery as D } from "../../providers/SeldonProvider/utils.js";
 import { SaleCardVariants as v } from "./types.js";
 const M = R(
   ({
     className: g,
-    imageSrc: o,
+    imageSrc: c,
     imageAlt: b = "Auction Image",
     auctionType: C,
     titleText: S,
     date: E,
     location: k,
-    primaryButtonText: c,
+    primaryButtonText: o,
     primaryButtonOnClick: d,
     secondaryButtonText: _,
-    secondaryButtonHref: s,
+    secondaryButtonHref: l,
     secondaryButtonOnClick: u,
     badgeText: h,
     modalButtonOnClick: p,
     modalButtonText: f,
-    variant: n = v.DEFAULT,
+    variant: t = v.DEFAULT,
     ...N
   }, A) => {
     const { className: a, ...L } = V(N, "SaleCard"), I = $(a, g, {
-      [`${a}--${n}`]: n
+      [`${a}--${t}`]: t
     }), P = { ...L, ...N };
-    return /* @__PURE__ */ l("div", { ...P, className: I, ref: A, children: [
-      o ? /* @__PURE__ */ r(j, { src: o, alt: b, className: `${a}__image` }) : null,
-      /* @__PURE__ */ l("div", { className: `${a}__details`, children: [
+    return /* @__PURE__ */ s("article", { ...P, className: I, ref: A, children: [
+      c ? /* @__PURE__ */ r(j, { src: c, alt: b, className: `${a}__image` }) : null,
+      /* @__PURE__ */ s("div", { className: `${a}__details`, children: [
         /* @__PURE__ */ r(e, { variant: i.badge, className: `${a}__auction-type`, children: C }),
         /* @__PURE__ */ r(e, { variant: i.title3, children: S }),
         h && /* @__PURE__ */ r(e, { variant: i.badge, className: `${a}__badge`, children: h }),
-        /* @__PURE__ */ l("div", { className: `${a}__info`, children: [
+        /* @__PURE__ */ s("div", { className: `${a}__info`, children: [
           /* @__PURE__ */ r(e, { variant: i.string2, children: k }),
           /* @__PURE__ */ r(e, { variant: i.string2, children: E }),
           f && p && /* @__PURE__ */ r("div", { className: `${a}__modal-link`, children: /* @__PURE__ */ r(
-            t,
+            n,
             {
               onClick: p,
               variant: m.tertiary,
@@ -52,25 +52,25 @@ const M = R(
           ) })
         ] })
       ] }),
-      n !== v.RELATED_SALE_TILE && /* @__PURE__ */ r(D.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ l("div", { className: `${a}__cta`, children: [
-        c && d && /* @__PURE__ */ r(
-          t,
+      t !== v.RELATED_SALE_TILE && /* @__PURE__ */ r(D.Media, { greaterThanOrEqual: "md", children: /* @__PURE__ */ s("div", { className: `${a}__cta`, children: [
+        o && d && /* @__PURE__ */ r(
+          n,
           {
             variant: m.primary,
             onClick: d,
             className: `${a}__cta-button`,
-            children: c
+            children: o
           }
         ),
         _ && /* @__PURE__ */ r(
-          t,
+          n,
           {
-            variant: s ? m.tertiary : m.secondary,
-            href: s,
-            target: s ? "_blank" : void 0,
+            variant: l ? m.tertiary : m.secondary,
+            href: l,
+            target: l ? "_blank" : void 0,
             onClick: u,
             className: $(`${a}__cta-button`, {
-              [`${a}__pdf-link`]: s
+              [`${a}__pdf-link`]: l
             }),
             children: _
           }

package/dist/patterns/ViewingDetails/ViewingDetails.d.ts

@@ -0,0 +1,62 @@
+import { ComponentProps, ElementType } from 'react';
+import { LinkProps } from '../../components/Link';
+export interface ViewingSessionProps {
+    /**
+     * Session label for viewing session text
+     */
+    sessionLabel?: string;
+    /**
+     * Session time for viewing session text
+     */
+    sessionTime?: string;
+}
+export interface ViewingDetailsProps extends ComponentProps<'div'> {
+    /**
+     * Unique id for component
+     */
+    id?: string;
+    /**
+     * Label for Viewings Details
+     */
+    label?: string;
+    /**
+     * Session Times label text for Viewings Details
+     */
+    sessionTimesLabel?: string;
+    /**
+     * Session Times data array
+     */
+    sessionTimes?: ViewingSessionProps[];
+    /**
+     * Viewing Times string array
+     */
+    viewingTimes?: string[];
+    /**
+     * Location of Viewings Details
+     */
+    location?: string;
+    /**
+     * Custom link element to use for the link. Defaults to the `Link` component.
+     */
+    linkElement?: ElementType<LinkProps>;
+    /**
+     * Google maps link for Viewings Details
+     */
+    mapLink?: string;
+    /**
+     * Callback for onClose function
+     */
+    onClose?: () => void | unknown;
+}
+/**
+ * ## Overview
+ *
+ * A simple component for displaying viewing details such as session times, viewing times, location, and a map link.
+ *
+ * [Figma Link](https://www.figma.com/design/H1kCh6MXU8jasYbQuCbyBt/Calendar?node-id=6-17&p=f&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-viewingdetails--overview)
+ *
+ */
+declare const ViewingDetails: import('react').ForwardRefExoticComponent<Omit<ViewingDetailsProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export default ViewingDetails;

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

@@ -0,0 +1,40 @@
+import { ViewingDetailsProps } from './ViewingDetails';
+declare const _default: {
+    title: string;
+    component: import('react').ForwardRefExoticComponent<Omit<ViewingDetailsProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const Playground: {
+    (props: ViewingDetailsProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        label: string;
+        sessionTimesLabel: string;
+        sessionTimes: {
+            sessionLabel: string;
+            sessionTime: string;
+        }[];
+        viewingTimes: string[];
+        location: string;
+        mapLink: string;
+    };
+};
+export declare const CenterAlignText: {
+    (props: ViewingDetailsProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        id: string;
+        title: string;
+        label: string;
+        sessionTimesLabel: string;
+        children: import('react').ReactElement<{
+            src: string;
+            alt: string;
+        }, string | import('react').JSXElementConstructor<any>>;
+        sessionTimes: {
+            sessionLabel: string;
+            sessionTime: string;
+        }[];
+        viewingTimes: string[];
+        location: string;
+        mapLink: string;
+    };
+};

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

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

package/dist/patterns/ViewingDetails/ViewingDetailsMock.d.ts

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export declare const viewingDetailsProps: {
+    label: string;
+    sessionTimesLabel: string;
+    sessionTimes: {
+        sessionLabel: string;
+        sessionTime: string;
+    }[];
+    viewingTimes: string[];
+    location: string;
+    mapLink: string;
+};
+export declare const viewingDetailsWithChildrenProps: {
+    id: string;
+    title: string;
+    label: string;
+    sessionTimesLabel: string;
+    children: React.ReactElement<{
+        src: string;
+        alt: string;
+    }, string | React.JSXElementConstructor<any>>;
+    sessionTimes: {
+        sessionLabel: string;
+        sessionTime: string;
+    }[];
+    viewingTimes: string[];
+    location: string;
+    mapLink: string;
+};

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

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

package/dist/scss/componentStyles.scss

@@ -50,12 +50,15 @@
 @use 'components/Filter/filter';
 @use 'components/FavoritingTileButton/favoritingTileButton';
 @use 'components/Toast/toast';
+@use 'components/ExitGateCard/exitGateCard';
+@use 'components/ComposedModal/composedModal';
 
 // Patterns
 @use 'patterns/HeroBanner/heroBanner';
 @use 'patterns/LanguageSelector/languageSelector';
 @use 'patterns/UserManagement/userManagement';
 @use 'patterns/ViewingsList/viewingsList';
+@use 'patterns/ViewingDetails/viewingDetails';
 @use 'patterns/Subscribe/subscribe';
 @use 'patterns/Social/social';
 @use 'patterns/SaleHeaderBanner/saleHeaderBanner';

package/dist/scss/components/ComposedModal/_composedModal.scss

@@ -0,0 +1,53 @@
+@use '../../allPartials' as *;
+
+.#{$px}-composed-modal {
+  border-radius: 1rem;
+  max-width: 95vw;
+  min-width: 0;
+  padding: $spacing-sm 0;
+  width: 95vw;
+
+  &__title {
+    margin-top: $spacing-md;
+    padding: 0 $spacing-md;
+  }
+
+  &__body {
+    max-height: var('--max-modal-body-height');
+    overflow-y: auto;
+  }
+
+  &__divider {
+    margin: 0;
+  }
+
+  &__btns-group {
+    display: flex;
+    gap: $spacing-sm;
+    justify-content: center;
+    padding: $spacing-sm $spacing-md;
+  }
+
+  &__btns-group > * {
+    flex: 1 1 50%;
+    max-width: 50%;
+  }
+
+  &__btns {
+    padding: 0 $spacing-md $spacing-sm;
+  }
+
+  &__disclaimer {
+    margin-top: $spacing-sm;
+    padding: 0 $spacing-md;
+  }
+
+  @media (min-width: $breakpoint-md) {
+    width: auto;
+  }
+}
+
+.#{$px}-composed-modal__body {
+  max-height: var(--max-modal-body-height);
+  overflow-y: auto;
+}

package/dist/scss/components/ExitGateCard/_exitGateCard.scss

@@ -0,0 +1,79 @@
+@use '../../allPartials' as *;
+
+.#{$px}-exit-gate-card {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: space-between;
+  padding-left: $spacing-md;
+
+  @media (max-width: $breakpoint-md) {
+    flex-direction: column;
+
+    &__desktop_image {
+      max-width: unset;
+      overflow: visible;
+    }
+  }
+
+  @media (min-width: $breakpoint-md) {
+    flex-direction: row;
+    padding-left: $spacing-lg;
+
+    &__desktop_image {
+      max-width: 405px;
+    }
+  }
+
+  &__content {
+    align-items: flex-start;
+    color: $pure-black;
+    display: flex;
+    flex-direction: column;
+    gap: $spacing-sm;
+    margin: auto 0;
+
+    &-label {
+      @media (max-width: $breakpoint-md) {
+        font-variation-settings: 'wght' 500;
+      }
+    }
+
+    &-title {
+      margin: 0;
+    }
+
+    &-description {
+      @media (max-width: $breakpoint-md) {
+        font-size: $body-size1;
+        text-align: center;
+      }
+    }
+
+    &-link {
+      font-size: $body-size3;
+      padding: $padding-xsm $padding-xxl;
+
+      @media (max-width: $breakpoint-md) {
+        font-size: $body-size2;
+      }
+    }
+  }
+}
+
+.#{$px}-exit-gate-card {
+  display: flex;
+  flex-direction: row-reverse;
+
+  @media (max-width: $breakpoint-md) {
+    flex-direction: column;
+    padding: 0;
+  }
+
+  &__content {
+    @media (max-width: $breakpoint-md) {
+      align-items: center;
+      margin-top: $spacing-md;
+      padding: 0 $spacing-md;
+    }
+  }
+}

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

@@ -98,6 +98,7 @@
       background-color: $button-hover;
 
       & svg {
+        color: $pure-white;
         fill: $pure-white;
         margin-inline-end: unset;
 

package/dist/scss/components/SaleCard/_saleCard.scss

@@ -4,11 +4,10 @@
   align-items: center;
   display: flex;
   flex-direction: column;
-  gap: $spacing-sm;
+  gap: $spacing-md;
 
   @include media($breakpoint-md) {
     flex-direction: row;
-    gap: $spacing-md;
   }
 
   &__image {
@@ -122,5 +121,8 @@
         max-width: calc($spacing-xxxl * 1.25);
       }
     }
+    .#{$px}-sale-card__auction-type {
+      font-size: 0.5rem;
+    }
   }
 }

package/dist/scss/patterns/ViewingDetails/_viewingDetails.scss

@@ -0,0 +1,51 @@
+@use '../../allPartials' as *;
+
+.#{$px}-viewing-details {
+  &__content {
+    padding: 0 $spacing-md;
+    position: relative;
+  }
+
+  &__children {
+    margin-bottom: $spacing-md;
+  }
+
+  &__center-align {
+    text-align: center;
+  }
+
+  &__label {
+    margin-bottom: 0;
+  }
+
+  &__close-icon {
+    cursor: pointer;
+    position: absolute;
+    right: $spacing-sm;
+    top: $spacing-sm;
+  }
+
+  &__text {
+    margin-bottom: $spacing-sm;
+  }
+
+  &__location {
+    margin-bottom: $spacing-xsm;
+    margin-top: $spacing-md;
+  }
+
+  &__map-link {
+    margin-bottom: $spacing-md;
+  }
+}
+
+.#{$px}-viewing-details__content .#{$px}-viewing-details__label {
+  margin-bottom: 0;
+}
+.#{$px}-viewing-details__content .#{$px}-viewing-details__text {
+  margin-bottom: $spacing-sm;
+}
+.#{$px}-viewing-details__content .#{$px}-viewing-details__location {
+  margin-bottom: $spacing-xsm;
+  margin-top: $spacing-md;
+}

package/dist/scss/patterns/ViewingDetails/_viewingDetails.stories.scss

@@ -0,0 +1,5 @@
+@import '../../allPartials';
+
+.story-center-align {
+  text-align: center;
+}

package/package.json

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