@phillips/seldon 1.52.0 → 1.53.0

package/dist/assets/minus.svg.js

@@ -1,5 +1,5 @@
 import * as e from "react";
-const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.5 11.8929C4.5 11.4195 4.83579 11.0357 5.25 11.0357L18.75 11.0357C19.1642 11.0357 19.5 11.4195 19.5 11.8929C19.5 12.3662 19.1642 12.75 18.75 12.75L5.25 12.75C4.83579 12.75 4.5 12.3662 4.5 11.8929Z", fill: "#323232" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.5 11.8929C4.5 11.4195 4.83579 11.0357 5.25 11.0357L18.75 11.0357C19.1642 11.0357 19.5 11.4195 19.5 11.8929C19.5 12.3662 19.1642 12.75 18.75 12.75L5.25 12.75C4.83579 12.75 4.5 12.3662 4.5 11.8929Z", fill: "#323232" }));
+const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.5 11.8929C4.5 11.4195 4.83579 11.0357 5.25 11.0357L18.75 11.0357C19.1642 11.0357 19.5 11.4195 19.5 11.8929C19.5 12.3662 19.1642 12.75 18.75 12.75L5.25 12.75C4.83579 12.75 4.5 12.3662 4.5 11.8929Z", fill: "currentColor" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.5 11.8929C4.5 11.4195 4.83579 11.0357 5.25 11.0357L18.75 11.0357C19.1642 11.0357 19.5 11.4195 19.5 11.8929C19.5 12.3662 19.1642 12.75 18.75 12.75L5.25 12.75C4.83579 12.75 4.5 12.3662 4.5 11.8929Z", fill: "currentColor" }));
 export {
   t as default
 };

package/dist/assets/plus.svg.js

@@ -1,5 +1,5 @@
 import * as e from "react";
-const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.5 11.8929C4.5 11.4195 4.83579 11.0357 5.25 11.0357L18.75 11.0357C19.1642 11.0357 19.5 11.4195 19.5 11.8929C19.5 12.3662 19.1642 12.75 18.75 12.75L5.25 12.75C4.83579 12.75 4.5 12.3662 4.5 11.8929Z", fill: "#323232" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.1071 4.5C12.5805 4.5 12.9643 4.83579 12.9643 5.25L12.9643 18.75C12.9643 19.1642 12.5805 19.5 12.1071 19.5C11.6338 19.5 11.25 19.1642 11.25 18.75L11.25 5.25C11.25 4.83579 11.6338 4.5 12.1071 4.5Z", fill: "#323232" }));
+const t = (l) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...l }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M4.5 11.8929C4.5 11.4195 4.83579 11.0357 5.25 11.0357L18.75 11.0357C19.1642 11.0357 19.5 11.4195 19.5 11.8929C19.5 12.3662 19.1642 12.75 18.75 12.75L5.25 12.75C4.83579 12.75 4.5 12.3662 4.5 11.8929Z", fill: "currentColor" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.1071 4.5C12.5805 4.5 12.9643 4.83579 12.9643 5.25L12.9643 18.75C12.9643 19.1642 12.5805 19.5 12.1071 19.5C11.6338 19.5 11.25 19.1642 11.25 18.75L11.25 5.25C11.25 4.83579 11.6338 4.5 12.1071 4.5Z", fill: "currentColor" }));
 export {
   t as default
 };

package/dist/components/Collapsible/Collapsible.d.ts

@@ -0,0 +1,10 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+export type CollapsibleProps = CollapsiblePrimitive.CollapsibleProps;
+/**
+ * ## Overview
+ *
+ * A 1:1 port of the [Radix UI Collapsible Component](https://www.radix-ui.com/primitives/docs/components/collapsible).
+ *
+ */
+declare const Collapsible: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & import("react").RefAttributes<HTMLDivElement>>;
+export default Collapsible;

package/dist/components/Collapsible/Collapsible.js

@@ -0,0 +1,13 @@
+import { jsx as l } from "react/jsx-runtime";
+import { Root as e } from "../../node_modules/@radix-ui/react-collapsible/dist/index.js";
+import { getCommonProps as t } from "../../utils/index.js";
+import p from "../../node_modules/classnames/index.js";
+import { forwardRef as i } from "react";
+const f = i(({ className: m, ...o }, s) => {
+  const { className: a, ...r } = t(o, "Collapsible");
+  return /* @__PURE__ */ l(e, { className: p(a, m), ...r, ...o, ref: s });
+});
+f.displayName = "Collapsible";
+export {
+  f as default
+};

package/dist/components/Collapsible/CollapsibleContent.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+export type CollapsibleContentProps = CollapsiblePrimitive.CollapsibleContentProps;
+/**
+ * ## Overview
+ *
+ * A 1:1 port of the [Radix UI Collapsible Content Component](https://www.radix-ui.com/primitives/docs/components/collapsible#content).
+ *
+ */
+declare const CollapsibleContent: React.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & React.RefAttributes<HTMLDivElement>>;
+export default CollapsibleContent;

package/dist/components/Collapsible/CollapsibleContent.js

@@ -0,0 +1,21 @@
+import { jsx as s } from "react/jsx-runtime";
+import l from "react";
+import { Content as r } from "../../node_modules/@radix-ui/react-collapsible/dist/index.js";
+import { getCommonProps as n } from "../../utils/index.js";
+import p from "../../node_modules/classnames/index.js";
+const f = l.forwardRef(({ className: t, ...o }, e) => {
+  const { className: a, ...m } = n(o, "CollapsibleContent");
+  return /* @__PURE__ */ s(
+    r,
+    {
+      ref: e,
+      className: p(a, t),
+      ...m,
+      ...o
+    }
+  );
+});
+f.displayName = "CollapsibleContent";
+export {
+  f as default
+};

package/dist/components/Collapsible/CollapsibleTrigger.d.ts

@@ -0,0 +1,10 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+export type CollapsibleTriggerProps = CollapsiblePrimitive.CollapsibleTriggerProps;
+/**
+ * ## Overview
+ *
+ * A 1:1 port of the [Radix UI Collapsible Trigger Component](https://www.radix-ui.com/primitives/docs/components/collapsible#trigger).
+ *
+ */
+declare const CollapsibleTrigger: import("react").ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default CollapsibleTrigger;

package/dist/components/Collapsible/CollapsibleTrigger.js

@@ -0,0 +1,21 @@
+import { jsx as a } from "react/jsx-runtime";
+import { Trigger as l } from "../../node_modules/@radix-ui/react-collapsible/dist/index.js";
+import { getCommonProps as i } from "../../utils/index.js";
+import t from "../../node_modules/classnames/index.js";
+import { forwardRef as p } from "react";
+const g = p(({ className: o, ...r }, m) => {
+  const { className: s, ...e } = i(r, "CollapsibleTrigger");
+  return /* @__PURE__ */ a(
+    l,
+    {
+      className: t(s, o),
+      ...e,
+      ...r,
+      ref: m
+    }
+  );
+});
+g.displayName = "CollapsibleTrigger";
+export {
+  g as default
+};

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

@@ -0,0 +1,3 @@
+export { default as Collapsible, type CollapsibleProps } from './Collapsible';
+export { default as CollapsibleContent, type CollapsibleContentProps } from './CollapsibleContent';
+export { default as CollapsibleTrigger, type CollapsibleTriggerProps } from './CollapsibleTrigger';

package/dist/components/ReadMore/ReadMore.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+export interface ReadMoreProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Unique id for component testing
+     */
+    id?: string;
+    /**
+     * Child element pass in to display as item content.
+     */
+    children?: React.ReactNode;
+    /**
+     * Text for the "Read More" button
+     */
+    readMoreText?: string;
+    /**
+     * Text for the "Read Less" button
+     */
+    readLessText?: string;
+    /**
+     * Maximum height of the content when collapsed
+     */
+    maxHeight?: number;
+}
+/**
+ * ## Overview
+ *
+ * A component for displaying expandable content with a "Read More" functionality.
+ *
+ * This component is a wrapper around the Collapsible and Button component and uses the CollapsibleTrigger and CollapsibleContent components to control the expand and collapse functionality.
+ *
+ * [Figma Link](https://www.figma.com/design/hMu9IWH5N3KamJy8tLFdyV/EASEL-Compendium%3A-Tokens%2C-Components-%26-Patterns?node-id=7755-5572&t=JCYbkM8yQcdb51UQ-4)
+ *
+ */
+declare const ReadMore: React.ForwardRefExoticComponent<ReadMoreProps & React.RefAttributes<HTMLDivElement>>;
+export default ReadMore;

package/dist/components/ReadMore/ReadMore.js

@@ -0,0 +1,57 @@
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
+import { forwardRef as N, useState as i, useRef as R, useEffect as x, useCallback as $ } from "react";
+import c from "../../node_modules/classnames/index.js";
+import { getCommonProps as M } from "../../utils/index.js";
+import b from "../Button/Button.js";
+import { ButtonVariants as w } from "../Button/types.js";
+import E from "../Collapsible/Collapsible.js";
+import O from "../Collapsible/CollapsibleContent.js";
+import P from "../Collapsible/CollapsibleTrigger.js";
+import S from "../../assets/plus.svg.js";
+import j from "../../assets/minus.svg.js";
+const B = N(
+  ({ className: d, children: l, readMoreText: f = "Read More", readLessText: u = "Read Less", maxHeight: s = 480, ...o }, p) => {
+    const { className: e, ...g } = M(o, "ReadMore"), [a, v] = i(!1), [n, C] = i(!1), t = R(null);
+    x(() => {
+      t.current && C(t.current.scrollHeight > s);
+    }, [l, s]);
+    const h = $(() => {
+      v((y) => !y);
+    }, []);
+    return /* @__PURE__ */ m(
+      E,
+      {
+        id: o == null ? void 0 : o.id,
+        open: a,
+        onOpenChange: h,
+        className: c(e, d),
+        style: {
+          "--read-more-max-height": `${s}px`
+        },
+        ref: p,
+        ...g,
+        ...o,
+        children: [
+          /* @__PURE__ */ r(O, { className: `${e}-content`, ref: t, forceMount: !0, children: l }),
+          n ? /* @__PURE__ */ r(
+            "div",
+            {
+              className: c(`${e}-overlay`, {
+                [`${e}-overlay--expanded`]: a,
+                [`${e}-overlay--gradient`]: n && !a
+              }),
+              children: /* @__PURE__ */ r("div", { className: `${e}-overlay-trigger-wrapper`, children: /* @__PURE__ */ r(P, { asChild: !0, className: `${e}-overlay-trigger`, children: /* @__PURE__ */ m(b, { variant: w.secondary, children: [
+                a ? /* @__PURE__ */ r(j, {}) : /* @__PURE__ */ r(S, {}),
+                a ? u : f
+              ] }) }) })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+B.displayName = "ReadMore";
+export {
+  B as default
+};

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

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

package/dist/index.d.ts

@@ -39,3 +39,5 @@ export { Breadcrumb, type BreadcrumbProps } from './components/Breadcrumb';
 export * from './components/Dropdown';
 export { default as Video, type VideoProps } from './components/Video/Video';
 export * from './components/LanguageSelector';
+export * from './components/ReadMore';
+export * from './components/Collapsible';

package/dist/index.js

@@ -1,16 +1,16 @@
-import { PaddingTokens as a, SpacingTokens as f, defaultYear as d, emailValidation as p, encodeURLSearchParams as m, findChildrenExcludingTypes as s, findChildrenOfType as l, generatePaddingClassName as u, getCommonProps as i, noOp as n, px as x, useNormalizedInputProps as g } from "./utils/index.js";
+import { PaddingTokens as a, SpacingTokens as f, defaultYear as p, emailValidation as d, encodeURLSearchParams as l, findChildrenExcludingTypes as s, findChildrenOfType as m, generatePaddingClassName as u, getCommonProps as i, noOp as x, px as n, useNormalizedInputProps as g } from "./utils/index.js";
 import { default as S } from "./pages/Page.js";
-import { default as I } from "./components/Button/Button.js";
-import { ButtonVariants as B } from "./components/Button/types.js";
-import { default as T } from "./components/IconButton/IconButton.js";
-import { default as N } from "./components/ErrorBoundary/ErrorBoundary.js";
-import { default as w } from "./components/Footer/Footer.js";
-import { Grid as v } from "./components/Grid/Grid.js";
-import { default as C } from "./components/Header/Header.js";
+import { default as C } from "./components/Button/Button.js";
+import { ButtonVariants as T } from "./components/Button/types.js";
+import { default as k } from "./components/IconButton/IconButton.js";
+import { default as P } from "./components/ErrorBoundary/ErrorBoundary.js";
+import { default as N } from "./components/Footer/Footer.js";
+import { Grid as w } from "./components/Grid/Grid.js";
+import { default as A } from "./components/Header/Header.js";
 import { default as G } from "./components/Navigation/Navigation.js";
-import { default as E } from "./components/Navigation/NavigationItem/NavigationItem.js";
-import { default as M } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
-import { default as R } from "./components/Navigation/NavigationList/NavigationList.js";
+import { default as R } from "./components/Navigation/NavigationItem/NavigationItem.js";
+import { default as E } from "./components/Navigation/NavigationItemTrigger/NavigationItemTrigger.js";
+import { default as O } from "./components/Navigation/NavigationList/NavigationList.js";
 import { default as z } from "./components/HeroBanner/HeroBanner.js";
 import { default as Y } from "./components/Input/Input.js";
 import { default as q } from "./components/Link/Link.js";
@@ -18,84 +18,92 @@ import { LinkVariants as K } from "./components/Link/types.js";
 import { default as W } from "./components/LinkBlock/LinkBlock.js";
 import { default as Z } from "./components/LinkList/LinkList.js";
 import { default as $ } from "./components/Row/Row.js";
-import { default as re } from "./components/GridItem/GridItem.js";
+import { default as oe } from "./components/GridItem/GridItem.js";
 import { GridItemAlign as te } from "./components/GridItem/types.js";
 import { default as fe } from "./components/Search/Search.js";
-import { default as pe } from "./components/Select/Select.js";
+import { default as de } from "./components/Select/Select.js";
 import { default as se } from "./components/SplitPanel/SplitPanel.js";
 import { default as ue } from "./components/Subscribe/Subscribe.js";
-import { SubscriptionState as ne } from "./components/Subscribe/types.js";
+import { SubscriptionState as xe } from "./components/Subscribe/types.js";
 import { default as ge } from "./components/Social/Social.js";
 import { default as Se } from "./components/ViewingsList/ViewingsList.js";
-import { default as Ie } from "./components/Modal/Modal.js";
-import { default as Be } from "./components/Drawer/Drawer.js";
-import { default as Te } from "./components/ViewingsList/StatefulViewingsList.js";
-import { TextVariants as Ne } from "./components/Text/types.js";
-import { default as we } from "./components/Text/Text.js";
-import { default as ve } from "./components/Accordion/Accordion.js";
-import { default as Ce } from "./components/Accordion/AccordionItem.js";
+import { default as Ce } from "./components/Modal/Modal.js";
+import { default as Te } from "./components/Drawer/Drawer.js";
+import { default as ke } from "./components/ViewingsList/StatefulViewingsList.js";
+import { TextVariants as Pe } from "./components/Text/types.js";
+import { default as Ne } from "./components/Text/Text.js";
+import { default as we } from "./components/Accordion/Accordion.js";
+import { default as Ae } from "./components/Accordion/AccordionItem.js";
 import { default as Ge } from "./components/UserManagement/UserManagement.js";
-import { AuthState as Ee } from "./components/UserManagement/types.js";
-import { SupportedLanguages as Me } from "./types/commonTypes.js";
-import { default as Re } from "./components/Breadcrumb/Breadcrumb.js";
+import { AuthState as Re } from "./components/UserManagement/types.js";
+import { SupportedLanguages as Ee } from "./types/commonTypes.js";
+import { default as Oe } 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 "./components/LanguageSelector/LanguageSelector.js";
+import { default as Ke } from "./components/ReadMore/ReadMore.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";
 export {
-  ve as Accordion,
-  Ce as AccordionItem,
-  Ee as AuthState,
-  Re as Breadcrumb,
-  I as Button,
-  B as ButtonVariants,
-  Be as Drawer,
+  we as Accordion,
+  Ae as AccordionItem,
+  Re as AuthState,
+  Oe as Breadcrumb,
+  C as Button,
+  T as ButtonVariants,
+  We as Collapsible,
+  Ze as CollapsibleContent,
+  $e as CollapsibleTrigger,
+  Te as Drawer,
   ze as Dropdown,
-  N as ErrorBoundary,
-  w as Footer,
-  v as Grid,
-  re as GridItem,
+  P as ErrorBoundary,
+  N as Footer,
+  w as Grid,
+  oe as GridItem,
   te as GridItemAlign,
-  C as Header,
+  A as Header,
   z as HeroBanner,
-  T as IconButton,
+  k as IconButton,
   Y as Input,
   qe as LanguageSelector,
   q as Link,
   W as LinkBlock,
   Z as LinkList,
   K as LinkVariants,
-  Ie as Modal,
+  Ce as Modal,
   G as Navigation,
-  E as NavigationItem,
-  M as NavigationItemTrigger,
-  R as NavigationList,
+  R as NavigationItem,
+  E as NavigationItemTrigger,
+  O as NavigationList,
   a as PaddingTokens,
   S as Page,
+  Ke as ReadMore,
   $ as Row,
   fe as Search,
-  pe as Select,
+  de as Select,
   ge as Social,
   f as SpacingTokens,
   se as SplitPanel,
-  Te as StatefulViewingsList,
+  ke as StatefulViewingsList,
   ue as Subscribe,
-  ne as SubscriptionState,
-  Me as SupportedLanguages,
-  we as Text,
-  Ne as TextVariants,
+  xe as SubscriptionState,
+  Ee as SupportedLanguages,
+  Ne as Text,
+  Pe as TextVariants,
   Ge as UserManagement,
   Ye as Video,
   Se as ViewingsList,
-  d as defaultYear,
-  p as emailValidation,
-  m as encodeURLSearchParams,
+  p as defaultYear,
+  d as emailValidation,
+  l as encodeURLSearchParams,
   s as findChildrenExcludingTypes,
-  l as findChildrenOfType,
+  m as findChildrenOfType,
   u as generatePaddingClassName,
   i as getCommonProps,
-  n as noOp,
-  x as px,
+  x as noOp,
+  n as px,
   g as useNormalizedInputProps
 };

package/dist/scss/componentStyles.scss

@@ -40,3 +40,4 @@
 @use 'components/Dropdown/dropdown';
 @use 'components/Video/video';
 @use 'components/LanguageSelector/languageSelector';
+@use 'components/ReadMore/readMore';

package/dist/scss/components/Button/_button.scss

@@ -19,7 +19,7 @@
     font-weight 0.25s;
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     background-color: $primary-black;
 
     svg {
@@ -41,7 +41,7 @@
     color: $text-color;
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       color: $pure-white;
 
       svg {

package/dist/scss/components/ReadMore/_readMore.scss

@@ -0,0 +1,58 @@
+@use '../../allPartials' as *;
+
+.#{$px}-read-more {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  position: relative;
+
+  &-content {
+    overflow: hidden;
+
+    &[data-state='closed'] {
+      max-height: var(--read-more-max-height);
+    }
+  }
+
+  &-overlay {
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+    left: 0;
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+
+    &--expanded {
+      position: relative;
+    }
+
+    &--gradient {
+      &::before {
+        background: linear-gradient(
+          180deg,
+          rgba(250, 250, 250, 0%) 0%,
+          rgba(255, 255, 255, 5%) 6.25%,
+          rgba(255, 255, 255, 75%) 53.65%,
+          #fff 90.62%
+        );
+        content: '';
+        height: 100px;
+        pointer-events: none;
+        width: 100%;
+      }
+    }
+  }
+
+  &-overlay-trigger-wrapper {
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    pointer-events: auto;
+    width: 100%;
+  }
+
+  &-overlay-trigger {
+    width: fit-content;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phillips/seldon",
-  "version": "1.52.0",
+  "version": "1.53.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/PhillipsAuctionHouse/seldon"
@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-select": "^2.1.1",
     "@types/dompurify": "^3.0.5",