@phillips/seldon 1.54.2 → 1.55.1

package/dist/assets/chevronRight.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { width: 32, height: 32, viewBox: "0 0 32 32", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M20.2524 16.1313L11.9644 24.4194C11.6715 24.7123 11.6191 25.4883 12.0654 25.9346C12.5117 26.3809 13.2877 26.3285 13.5806 26.0356L22.773 16.8432C22.9215 16.6948 23.0081 16.4222 22.9994 16.1313C23.0081 15.8404 22.9215 15.5678 22.773 15.4194L13.5806 6.227C13.2877 5.9341 12.5117 5.8817 12.0654 6.32801C11.6191 6.77432 11.6715 7.55035 11.9644 7.84324L20.2524 16.1313Z", fill: "black" }));
+export {
+  l as default
+};

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,50 @@
+import React, { ComponentProps } from 'react';
+export interface PaginationProps extends Omit<ComponentProps<'div'>, 'onChange'> {
+    /**
+     * Unique id for component testing
+     */
+    id: string;
+    /**
+     * Base class for Pagination component.
+     */
+    className?: string;
+    /**
+     * Options Array of string
+     */
+    options?: string[];
+    /**
+     * Boolean to specify whether the `<Pagination>` should be disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Current value of the `<Pagination>` component
+     */
+    value: string | number;
+    /**
+     * `onChange` handler that is called whenever the `<Pagination>` value is changed
+     */
+    onChange: (selectedValue: string, event?: React.ChangeEvent<HTMLSelectElement>) => void;
+    /**
+     * Specify the variant style of the `<Pagination>`
+     */
+    variant?: 'inline';
+    /**
+     * Option previous label
+     */
+    previousLabel?: string;
+    /**
+     * Option next label
+     */
+    nextLabel?: string;
+}
+/**
+ * ## Overview
+ *
+ * A controlled component that supports selecting a new page and moving next and previous through pages. It expects consumers to keep track of the current value and update it by listening to the `onChange` event.
+ *
+ * [Figma Link](https://www.figma.com/design/hxqgsE26wM7hII0WaUaDfF/RW---TIMED-Lot-Details-(PDP)?node-id=1-2&node-type=CANVAS&m=dev)
+ *
+ * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-pagination--overview)
+ */
+declare const Pagination: ({ className, onChange, variant, options, value, isDisabled, previousLabel, nextLabel, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
+export default Pagination;

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,66 @@
+import { jsxs as x, jsx as i } from "react/jsx-runtime";
+import c from "../../node_modules/classnames/index.js";
+import { getCommonProps as N, px as n } from "../../utils/index.js";
+import _ from "../Select/Select.js";
+import d from "../Button/Button.js";
+import u from "../../assets/chevronRight.svg.js";
+const S = ({
+  className: f,
+  onChange: e,
+  variant: g = "inline",
+  options: t = [],
+  value: r,
+  isDisabled: l,
+  previousLabel: $ = "Previous",
+  nextLabel: p = "Next",
+  ...o
+}) => {
+  const b = "pagination", { className: s, ...h } = N(o, "Pagination"), { id: m } = o;
+  return /* @__PURE__ */ x(
+    "div",
+    {
+      className: c(`${n}-${b}`, { [`${s}__wrapper`]: s }, f),
+      ...h,
+      ...o,
+      children: [
+        /* @__PURE__ */ i(
+          d,
+          {
+            className: c(`${n}__pagination-button`, `${n}-left-arrow`),
+            onClick: () => e(t.at(t.findIndex((a) => a === r) - 1) || ""),
+            "data-testid": `${m}-previous-button`,
+            isDisabled: l,
+            "aria-label": $,
+            children: /* @__PURE__ */ i(u, {})
+          }
+        ),
+        /* @__PURE__ */ i(
+          _,
+          {
+            className: g === "inline" && `${n}--inline-pagination`,
+            value: r,
+            onChange: (a) => e(a == null ? void 0 : a.currentTarget.value, a),
+            "data-testid": `${m}-select-button`,
+            hideLabel: !0,
+            disabled: l,
+            children: t.map((a) => /* @__PURE__ */ i("option", { value: a, children: a }, a))
+          }
+        ),
+        /* @__PURE__ */ i(
+          d,
+          {
+            className: `${n}__pagination-button`,
+            onClick: () => e(t[(t.findIndex((a) => a === r) + 1) % t.length] || ""),
+            "data-testid": `${m}-next-button`,
+            isDisabled: l,
+            "aria-label": p,
+            children: /* @__PURE__ */ i(u, {})
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  S as default
+};

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export { default as Social, type SocialProps } from './patterns/Social/Social';
 export { default as ViewingsList, type ViewingsListProps } from './patterns/ViewingsList/ViewingsList';
 export { default as Modal, type ModalProps } from './components/Modal/Modal';
 export { default as Drawer } from './components/Drawer/Drawer';
+export { default as Pagination, type PaginationProps } from './components/Pagination/Pagination';
 export { default as StatefulViewingsList, type StatefulViewingsListProps, } from './patterns/ViewingsList/StatefulViewingsList';
 export * from './components/Text';
 export * from './components/Accordion';

package/dist/index.js

@@ -1,6 +1,6 @@
 import { PaddingTokens as a, SpacingTokens as f, defaultYear as p, emailValidation as d, encodeURLSearchParams as l, findChildrenExcludingTypes as m, findChildrenOfType as s, generatePaddingClassName as i, getCommonProps as u, noOp as n, px as x, useNormalizedInputProps as g } from "./utils/index.js";
 import { default as S } from "./pages/Page.js";
-import { default as C } from "./components/Button/Button.js";
+import { default as P } from "./components/Button/Button.js";
 import { ButtonVariants as k } from "./components/Button/types.js";
 import { default as T } from "./components/IconButton/IconButton.js";
 import { default as B } from "./components/ErrorBoundary/ErrorBoundary.js";
@@ -27,40 +27,41 @@ import { default as ie } from "./patterns/Subscribe/Subscribe.js";
 import { SubscriptionState as ne } from "./patterns/Subscribe/types.js";
 import { default as ge } from "./patterns/Social/Social.js";
 import { default as Se } from "./patterns/ViewingsList/ViewingsList.js";
-import { default as Ce } from "./components/Modal/Modal.js";
+import { default as Pe } from "./components/Modal/Modal.js";
 import { default as ke } from "./components/Drawer/Drawer.js";
-import { default as Te } from "./patterns/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as Be } from "./components/Text/types.js";
-import { default as Ne } from "./components/Text/Text.js";
-import { default as ve } from "./components/Accordion/Accordion.js";
-import { default as Ae } from "./components/Accordion/AccordionItem.js";
-import { default as Ge } from "./patterns/UserManagement/UserManagement.js";
-import { AuthState as Ee } from "./patterns/UserManagement/types.js";
-import { SupportedLanguages as Me } from "./types/commonTypes.js";
-import { default as Re } from "./components/Breadcrumb/Breadcrumb.js";
+import { default as Te } from "./components/Pagination/Pagination.js";
+import { default as Be } from "./patterns/ViewingsList/StatefulViewingsList.js";
+import { TextVariants as Ne } from "./components/Text/types.js";
+import { default as ve } from "./components/Text/Text.js";
+import { default as Ae } from "./components/Accordion/Accordion.js";
+import { default as Ge } from "./components/Accordion/AccordionItem.js";
+import { default as Ee } from "./patterns/UserManagement/UserManagement.js";
+import { AuthState as Me } from "./patterns/UserManagement/types.js";
+import { SupportedLanguages as Re } from "./types/commonTypes.js";
+import { default as ze } from "./components/Breadcrumb/Breadcrumb.js";
 import "react/jsx-runtime";
 import "./node_modules/classnames/index.js";
-import { default as ze } from "./components/Dropdown/Dropdown.js";
-import { default as Ye } from "./components/Video/Video.js";
-import { default as qe } from "./patterns/LanguageSelector/LanguageSelector.js";
-import { default as Ke } from "./components/ContentPeek/ContentPeek.js";
-import { default as We } from "./components/Collapsible/Collapsible.js";
-import { default as Ze } from "./components/Collapsible/CollapsibleContent.js";
-import { default as $e } from "./components/Collapsible/CollapsibleTrigger.js";
-import { SeldonProvider as oo } from "./providers/SeldonProvider.js";
+import { default as Ye } from "./components/Dropdown/Dropdown.js";
+import { default as qe } from "./components/Video/Video.js";
+import { default as Ke } from "./patterns/LanguageSelector/LanguageSelector.js";
+import { default as We } from "./components/ContentPeek/ContentPeek.js";
+import { default as Ze } from "./components/Collapsible/Collapsible.js";
+import { default as $e } from "./components/Collapsible/CollapsibleContent.js";
+import { default as oo } from "./components/Collapsible/CollapsibleTrigger.js";
+import { SeldonProvider as to } from "./providers/SeldonProvider.js";
 export {
-  ve as Accordion,
-  Ae as AccordionItem,
-  Ee as AuthState,
-  Re as Breadcrumb,
-  C as Button,
+  Ae as Accordion,
+  Ge as AccordionItem,
+  Me as AuthState,
+  ze as Breadcrumb,
+  P as Button,
   k as ButtonVariants,
-  We as Collapsible,
-  Ze as CollapsibleContent,
-  $e as CollapsibleTrigger,
-  Ke as ContentPeek,
+  Ze as Collapsible,
+  $e as CollapsibleContent,
+  oo as CollapsibleTrigger,
+  We as ContentPeek,
   ke as Drawer,
-  ze as Dropdown,
+  Ye as Dropdown,
   B as ErrorBoundary,
   N as Footer,
   v as Grid,
@@ -70,33 +71,34 @@ export {
   z as HeroBanner,
   T as IconButton,
   Y as Input,
-  qe as LanguageSelector,
+  Ke as LanguageSelector,
   q as Link,
   W as LinkBlock,
   Z as LinkList,
   K as LinkVariants,
-  Ce as Modal,
+  Pe as Modal,
   G as Navigation,
   E as NavigationItem,
   M as NavigationItemTrigger,
   R as NavigationList,
   a as PaddingTokens,
   S as Page,
+  Te as Pagination,
   $ as Row,
   fe as Search,
-  oo as SeldonProvider,
+  to as SeldonProvider,
   de as Select,
   ge as Social,
   f as SpacingTokens,
   me as SplitPanel,
-  Te as StatefulViewingsList,
+  Be as StatefulViewingsList,
   ie as Subscribe,
   ne as SubscriptionState,
-  Me as SupportedLanguages,
-  Ne as Text,
-  Be as TextVariants,
-  Ge as UserManagement,
-  Ye as Video,
+  Re as SupportedLanguages,
+  ve as Text,
+  Ne as TextVariants,
+  Ee as UserManagement,
+  qe as Video,
   Se as ViewingsList,
   p as defaultYear,
   d as emailValidation,

package/dist/scss/componentStyles.scss

@@ -32,6 +32,7 @@
 @use 'components/HTMLParser/htmlParser';
 @use 'components/Dropdown/dropdown';
 @use 'components/Video/video';
+@use 'components/Pagination/pagination';
 @use 'components/ContentPeek/contentPeek';
 
 // Patterns

package/dist/scss/components/Input/_input.scss

@@ -31,7 +31,7 @@ $lg: #{$px}-input--lg;
     border-radius: 0.1875rem;
     font-size: 0.8125rem;
     margin-bottom: 0.25rem;
-    padding: 0.5rem;
+    padding: $padding-xsm;
 
     // width: 100%;
   }
@@ -44,20 +44,6 @@ $lg: #{$px}-input--lg;
     overflow: hidden;
   }
 
-  // Small input size
-  &--sm {
-    .#{$px}-input__input {
-      padding: 0.25rem 0.5rem;
-    }
-  }
-
-  // Large input size
-  &--lg {
-    .#{$px}-input__input {
-      padding: 0.75rem 0.5rem;
-    }
-  }
-
   // Inline
   &--inline {
     align-items: center;
@@ -68,10 +54,6 @@ $lg: #{$px}-input--lg;
       align-self: center;
       width: unset;
     }
-
-    .#{$px}-input__label {
-      // max-width: 8.75rem;
-    }
   }
 
   // Disabled
@@ -174,8 +156,11 @@ $lg: #{$px}-input--lg;
   }
 }
 
+.#{$px}-select-input.#{$px}-input {
+  width: fit-content;
+}
 .#{$px}-select-input .#{$px}-input__input {
-  flex: 1;
+  width: fit-content;
 }
 
 @keyframes reveal {

package/dist/scss/components/Pagination/_pagination.scss

@@ -0,0 +1,74 @@
+@use '../../allPartials' as *;
+
+.#{$px}-pagination {
+  display: flex;
+  flex-direction: row;
+  gap: $spacing-md;
+}
+
+.#{$px} {
+  &--inline-pagination__wrapper {
+    select {
+      @include pText($body-size2);
+
+      appearance: none;
+      border: none;
+      font-weight: 600;
+      line-height: 2.5rem;
+      margin-bottom: 0;
+      outline: none;
+      text-align: center;
+      text-decoration: underline;
+      text-underline-offset: 10px;
+
+      &:disabled {
+        border: 1px solid $medium-gray;
+        margin: auto;
+        max-height: 3.5rem;
+        max-width: 5rem;
+        padding: 0.5rem;
+        text-decoration: none;
+      }
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &:focus {
+        outline: 1px solid $medium-gray;
+      }
+    }
+
+    select::-ms-expand {
+      border: none;
+      display: none;
+    }
+  }
+}
+
+.#{$px}__pagination-button {
+  background: none;
+  flex-direction: row;
+  padding: 0;
+
+  svg {
+    width: 2rem;
+
+    @include media($size-md, $type: 'max') {
+      width: 1rem;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    background: none;
+  }
+
+  &:disabled {
+    border: none;
+  }
+}
+
+.#{$px}-left-arrow {
+  transform: scaleX(-1);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.54.2",
+  "version": "1.55.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -50,6 +50,7 @@
     "classnames": "^2.5.1",
     "dompurify": "^3.1.6",
     "flatpickr": "^4.6.13",
+    "fresnel": "^1.1.1",
     "html-react-parser": "^5.1.12",
     "react-modal": "^3.16.1",
     "react-transition-group": "^4.4.5",
@@ -111,7 +112,7 @@
     "stylelint-scss": "^6.4.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.4",
-    "vite": "^5.3.5",
+    "vite": "^5.4.6",
     "vite-plugin-dts": "^2.3.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2",