@phillips/seldon 1.150.1 → 1.151.1

package/dist/components/TextArea/TextArea.d.ts

@@ -12,6 +12,26 @@ export interface TextAreaProps extends ComponentProps<'textarea'> {
      * Text that will be read by a screen reader when visiting this control
      */
     labelText: React.ReactNode;
+    /**
+     * Boolean to specify whether the control is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Boolean to specify whether the control is currently in an invalid state
+     */
+    invalid?: boolean;
+    /**
+     * Text that is displayed when the control is in an invalid state
+     */
+    invalidText?: React.ReactNode;
+    /**
+     * Boolean to specify whether the control is currently in warning state
+     */
+    warn?: boolean;
+    /**
+     * Text that is displayed when the control is in warning state
+     */
+    warnText?: React.ReactNode;
 }
 /**
  * ## Overview

package/dist/components/TextArea/TextArea.js

@@ -1,43 +1,73 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { forwardRef as $, useId as u } from "react";
+import { jsxs as n, Fragment as w, jsx as s } from "react/jsx-runtime";
+import { forwardRef as I, useId as A } from "react";
 import l from "../../node_modules/classnames/index.js";
-import { px as r } from "../../utils/index.js";
-import N from "../Icon/Icon.js";
-const _ = $(
-  ({ className: m, id: e, isSkeletonLoading: o, labelText: n, maxLength: c = 3e3, name: i, rows: d = 2, ...p }, x) => {
-    const s = `${r}-text-area`, a = u();
-    return /* @__PURE__ */ f("div", { className: l(`${s}__wrapper`), children: [
-      /* @__PURE__ */ t(
-        "label",
-        {
-          "data-testid": `text-area-${e ?? a}-label`,
-          htmlFor: e ?? a,
-          className: l(`${r}-input__label`, {
-            [`${r}-skeleton`]: o
-          }),
-          children: n
-        }
-      ),
-      /* @__PURE__ */ t(
-        "textarea",
-        {
-          ...p,
-          className: l(s, m, {
-            [`${r}-skeleton`]: o
-          }),
-          id: e ?? a,
-          rows: d,
-          maxLength: c,
-          name: i,
-          ref: x,
-          "data-testid": `text-area-${e ?? a}-input`
-        }
-      ),
-      /* @__PURE__ */ t("div", { className: `${s}-resizer__icon`, children: /* @__PURE__ */ t(N, { icon: "Menu" }) })
+import { px as a, useNormalizedInputProps as j } from "../../utils/index.js";
+import y from "../Icon/Icon.js";
+const z = I(
+  ({
+    className: o,
+    id: t,
+    isSkeletonLoading: d,
+    labelText: m,
+    maxLength: c = 3e3,
+    name: p,
+    rows: x = 2,
+    disabled: $,
+    warn: _,
+    warnText: N,
+    invalid: b,
+    invalidText: f,
+    ...u
+  }, v) => {
+    const i = `${a}-text-area`, r = A(), e = j({
+      disabled: $,
+      id: t ?? r,
+      invalid: b,
+      invalidText: f,
+      type: "text-area",
+      warn: _,
+      warnText: N
+    }), h = l(`${i}__wrapper`, {
+      [`${a}-text-area--disabled`]: e.disabled,
+      [`${a}-text-area--invalid`]: e.invalid,
+      [`${a}-text-area--warn`]: e.warn
+    });
+    return /* @__PURE__ */ n(w, { children: [
+      /* @__PURE__ */ n("div", { className: h, children: [
+        /* @__PURE__ */ s(
+          "label",
+          {
+            "data-testid": `text-area-${t ?? r}-label`,
+            htmlFor: t ?? r,
+            className: l(`${a}-text-area__label`, {
+              [`${a}-skeleton`]: d
+            }),
+            children: m
+          }
+        ),
+        /* @__PURE__ */ s(
+          "textarea",
+          {
+            ...u,
+            className: l(i, o, `${a}-text-area__input`, {
+              [`${a}-skeleton`]: d
+            }),
+            id: t ?? r,
+            rows: x,
+            maxLength: c,
+            name: p,
+            ref: v,
+            "data-testid": `text-area-${t ?? r}-input`,
+            disabled: e.disabled
+          }
+        ),
+        /* @__PURE__ */ s(y, { icon: "Menu", className: `${i}-resizer__icon` })
+      ] }),
+      /* @__PURE__ */ s("div", { children: e.validation ?? /* @__PURE__ */ s("div", { className: `${a}-text-area__validation`, id: e.invalidId }) })
     ] });
   }
 );
-_.displayName = "TextArea";
+z.displayName = "TextArea";
 export {
-  _ as default
+  z as default
 };

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

@@ -7,7 +7,7 @@ export default meta;
 export declare const Playground: {
     (props: TextAreaProps): import("react/jsx-runtime").JSX.Element;
     args: {
-        children: string;
+        defaultValue: string;
         labelText: string;
         rows: number;
         isSkeletonLoading: boolean;
@@ -40,5 +40,30 @@ export declare const Playground: {
                 type: string;
             };
         };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        invalid: {
+            control: {
+                type: string;
+            };
+        };
+        invalidText: {
+            control: {
+                type: string;
+            };
+        };
+        warn: {
+            control: {
+                type: string;
+            };
+        };
+        warnText: {
+            control: {
+                type: string;
+            };
+        };
     };
 };

package/dist/patterns/FavoritesCollectionTile/FavoritesCollectionTile.d.ts

@@ -10,9 +10,9 @@ export interface FavoritesCollectionTileProps extends ComponentProps<'div'> {
      */
     emptyFavoritesText?: string;
     /**
-     * Lot blank list text en/zh
+     * Lot create first list text en/zh
      */
-    blankListText?: string;
+    createFirstListText?: string;
     /**
      * Lot empty lists text en/zh
      */
@@ -40,7 +40,7 @@ export interface FavoritesCollectionTileProps extends ComponentProps<'div'> {
     /**
      * Whether this card is in favorites view or lists view
      */
-    variant: 'favorites' | 'lists';
+    variant: 'favorites' | 'lists' | 'create';
     /**
      * React component to render within the navigation item, renders <Link> by default
      */
@@ -61,6 +61,14 @@ export interface FavoritesCollectionTileProps extends ComponentProps<'div'> {
      * Function to modify strings for lot string translation
      */
     formatlotStr?: (count: number, lotText?: string) => string;
+    /**
+     * Custom class name for the Link component
+     */
+    linkClassName?: string;
+    /**
+     * Custom icon size for the icon in the tile
+     */
+    iconSize?: number;
 }
 /**
  * ## Overview

package/dist/patterns/FavoritesCollectionTile/FavoritesCollectionTile.js

@@ -1,121 +1,148 @@
-import { jsx as t, jsxs as i, Fragment as R } from "react/jsx-runtime";
-import { Root as j, Trigger as I, Portal as D, Content as P } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
-import m from "../../node_modules/classnames/index.js";
-import { memo as E, forwardRef as O, useRef as Y } from "react";
-import _ from "../../components/Icon/Icon.js";
-import A from "../../components/Link/Link.js";
-import K from "../../components/SeldonImage/SeldonImage.js";
-import { TextVariants as p } from "../../components/Text/types.js";
-import $ from "../../components/Text/Text.js";
-import { getCommonProps as S } from "../../utils/index.js";
-const W = E(
-  O(
+import { jsx as t, jsxs as a, Fragment as f } from "react/jsx-runtime";
+import { Root as O, Trigger as V, Portal as A, Content as Y } from "../../node_modules/@radix-ui/react-popover/dist/index.js";
+import l from "../../node_modules/classnames/index.js";
+import { memo as H, forwardRef as K, useRef as q } from "react";
+import $ from "../../components/Icon/Icon.js";
+import B from "../../components/Link/Link.js";
+import G from "../../components/SeldonImage/SeldonImage.js";
+import { TextVariants as y } from "../../components/Text/types.js";
+import g from "../../components/Text/Text.js";
+import { getCommonProps as J } from "../../utils/index.js";
+const ae = H(
+  K(
     ({
-      id: r,
-      className: v,
-      count: n,
-      name: c,
-      imageSrc: N,
-      variant: l,
-      element: f = A,
-      href: y,
-      emptyFavoritesText: u = "You have not added any objects to your Favorites yet.",
-      emptyListsText: g = "You have not added any objects to your List yet.",
-      blankListText: b = "Create your first List.",
-      editListText: C = "Edit List",
-      deleteListText: k = "Delete List",
-      onEdit: w,
-      onDelete: x,
-      formatlotStr: h = (e, d = e > 1 ? "LOTS" : "LOT") => `${e} ${d}`,
-      ...L
-    }, F) => {
-      const { className: e, ...d } = S({ id: r, ...L }, "FavoritesCollectionTile"), T = Y(null), o = c && n !== null && n !== void 0, s = n === 0;
-      return /* @__PURE__ */ t("div", { ...d, className: m(e, v), ref: F, id: r, children: /* @__PURE__ */ i("div", { className: `${e}__content`, children: [
-        /* @__PURE__ */ i("div", { className: `${e}__header`, children: [
-          /* @__PURE__ */ i("div", { className: `${e}__info`, children: [
-            o && /* @__PURE__ */ t($, { element: "span", className: `${e}__count`, variant: p.body3, children: h && o && h(n) }),
-            /* @__PURE__ */ t($, { element: "h3", className: `${e}__title`, variant: p.heading5, children: c })
+      id: c,
+      className: u,
+      count: d,
+      name: _,
+      imageSrc: b,
+      variant: h,
+      element: C = B,
+      href: L,
+      emptyFavoritesText: k = "You have not added any objects to your Favorites yet.",
+      emptyListsText: w = "You have not added any objects to your List yet.",
+      createFirstListText: x = "Create your first List.",
+      editListText: F = "Edit List",
+      deleteListText: T = "Delete List",
+      onEdit: R,
+      onDelete: j,
+      formatlotStr: v = (e, p = e === 1 ? "LOT" : "LOTS") => `${e} ${p}`,
+      linkClassName: I,
+      iconSize: o = 22,
+      ...P
+    }, D) => {
+      const { className: e, ...p } = J({ id: c, ...P }, "FavoritesCollectionTile"), E = q(null), i = _ && d !== null && d !== void 0, r = d === 0, m = h === "lists", n = h === "create", N = i && r;
+      return /* @__PURE__ */ t("div", { ...p, className: l(e, u), ref: D, id: c, children: /* @__PURE__ */ a("div", { className: `${e}__content`, children: [
+        /* @__PURE__ */ a("div", { className: `${e}__header`, children: [
+          /* @__PURE__ */ a("div", { className: `${e}__info`, children: [
+            i && /* @__PURE__ */ t(g, { element: "span", className: `${e}__count`, variant: y.body3, children: v && i && v(d) }),
+            /* @__PURE__ */ t(g, { element: "h3", className: `${e}__title`, variant: y.heading5, children: _ })
           ] }),
-          /* @__PURE__ */ t(R, { children: o && (l === "lists" || l === "favorites" && !s) && /* @__PURE__ */ i(j, { children: [
-            /* @__PURE__ */ t(I, { asChild: !0, children: /* @__PURE__ */ t(
+          /* @__PURE__ */ t(f, { children: i && m && /* @__PURE__ */ a(O, { children: [
+            /* @__PURE__ */ t(V, { asChild: !0, children: /* @__PURE__ */ t(
               "div",
               {
                 className: `${e}__actions`,
                 "data-testid": "menu-trigger",
                 tabIndex: 0,
                 role: "button",
-                onKeyDown: (a) => {
-                  a.key === "Enter" && (a.preventDefault(), a.stopPropagation(), a.target.click());
+                onKeyDown: (s) => {
+                  s.key === "Enter" && (s.preventDefault(), s.stopPropagation(), s.target.click());
                 },
-                children: /* @__PURE__ */ t(
-                  _,
+                children: /* @__PURE__ */ t("div", { className: `${e}__icon-rotate`, children: /* @__PURE__ */ t(
+                  $,
                   {
                     icon: "Icon",
-                    width: 24,
-                    height: 24,
+                    width: o,
+                    height: o,
                     color: "$dark-gray",
-                    className: `${e}__icon-rotate`
+                    className: `${e}__icon-button`
                   }
-                )
+                ) })
               }
             ) }),
-            /* @__PURE__ */ t(D, { children: /* @__PURE__ */ t(P, { sideOffset: 5, className: `${e}__popover-content`, children: /* @__PURE__ */ i("div", { className: `${e}__dropdown`, "data-testid": "dropdown-menu", children: [
-              /* @__PURE__ */ t(
-                "button",
-                {
-                  className: `${e}__dropdown--item`,
-                  onClick: (a) => w?.(r, a),
-                  type: "button",
-                  children: C
-                }
-              ),
-              /* @__PURE__ */ t(
-                "button",
-                {
-                  className: `${e}__dropdown--item`,
-                  onClick: (a) => x?.(r, a),
-                  type: "button",
-                  children: k
-                }
-              )
-            ] }) }) })
+            /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(
+              Y,
+              {
+                avoidCollisions: !0,
+                collisionPadding: 10,
+                sideOffset: 5,
+                align: "start",
+                alignOffset: 5,
+                className: `${e}__popover-content`,
+                children: /* @__PURE__ */ a("div", { className: `${e}__dropdown`, "data-testid": "dropdown-menu", children: [
+                  /* @__PURE__ */ t(
+                    "button",
+                    {
+                      className: `${e}__dropdown--item`,
+                      onClick: (s) => R?.(c, s),
+                      type: "button",
+                      children: F
+                    }
+                  ),
+                  /* @__PURE__ */ t(
+                    "button",
+                    {
+                      className: `${e}__dropdown--item`,
+                      onClick: (s) => j?.(c, s),
+                      type: "button",
+                      children: T
+                    }
+                  )
+                ] })
+              }
+            ) })
           ] }) })
         ] }),
-        /* @__PURE__ */ i(f, { href: y, className: `${e}__media-link`, tabIndex: 0, children: [
-          s && l === "favorites" && /* @__PURE__ */ t("div", { className: `${e}__media-container`, "data-testid": "favorites", "aria-label": "Favorites", children: /* @__PURE__ */ t("div", { className: m(`${e}__empty`, `${e}__empty--favorites`), children: /* @__PURE__ */ i("div", { className: `${e}__empty__content`, children: [
+        /* @__PURE__ */ a(C, { href: L, className: l(`${e}__media-link`, I), tabIndex: 0, children: [
+          r && h === "favorites" && /* @__PURE__ */ t("div", { className: `${e}__media-container`, "data-testid": "favorites", "aria-label": "Favorites", children: /* @__PURE__ */ t("div", { className: l(`${e}__empty`, `${e}__empty--bg`), children: /* @__PURE__ */ a("div", { className: `${e}__empty__content`, children: [
             /* @__PURE__ */ t(
-              _,
+              $,
               {
                 icon: "Favorite",
-                width: 24,
-                height: 24,
+                width: o,
+                height: o,
                 color: "$dark-gray",
                 className: `${e}__icon`
               }
             ),
-            /* @__PURE__ */ t("div", { className: `${e}__text`, children: u })
+            /* @__PURE__ */ t("div", { className: `${e}__text`, children: k })
           ] }) }) }),
-          (s || !o) && l === "lists" && /* @__PURE__ */ t("div", { className: `${e}__media-container`, "data-testid": "list", "aria-label": "Lists", children: /* @__PURE__ */ t("div", { className: m(`${e}__empty`, `${e}__empty--list`), children: /* @__PURE__ */ i("div", { className: `${e}__empty__content`, children: [
-            /* @__PURE__ */ t(
-              _,
+          (r || !i) && (m || n) && /* @__PURE__ */ a(f, { children: [
+            n && /* @__PURE__ */ t("div", { className: `${e}__create-spacing` }),
+            /* @__PURE__ */ t("div", { className: `${e}__media-container`, "data-testid": "list", "aria-label": "Lists", children: /* @__PURE__ */ t(
+              "div",
               {
-                icon: o && s ? "Favorite" : "Add",
-                width: 24,
-                height: 24,
-                color: "$dark-gray",
-                className: `${e}__icon`
+                className: l(`${e}__empty`, {
+                  [`${e}__empty--create-list`]: !i && (m || n),
+                  [`${e}__empty--bg`]: r && !n
+                }),
+                children: /* @__PURE__ */ a("div", { className: `${e}__empty__content`, children: [
+                  /* @__PURE__ */ t(
+                    $,
+                    {
+                      icon: N ? "Favorite" : "Add",
+                      width: o,
+                      height: o,
+                      color: "$dark-gray",
+                      className: l(`${e}__icon`, {
+                        [`${e}__icon-circle`]: !i && (m || n)
+                      })
+                    }
+                  ),
+                  /* @__PURE__ */ t("div", { className: `${e}__text`, children: N ? w : x })
+                ] })
               }
-            ),
-            /* @__PURE__ */ t("div", { className: `${e}__text`, children: o && s ? g : b })
-          ] }) }) }),
-          !s && o && /* @__PURE__ */ t("div", { className: `${e}__media-container`, ref: T, children: /* @__PURE__ */ t(
-            K,
+            ) })
+          ] }),
+          !r && i && /* @__PURE__ */ t("div", { className: `${e}__media-container`, ref: E, children: /* @__PURE__ */ t(
+            G,
             {
-              alt: c,
+              alt: _,
               aspectRatio: "1/1",
               className: `${e}__media`,
               objectFit: "cover",
-              src: N,
+              src: b,
               style: {
                 cursor: "pointer"
               }
@@ -127,5 +154,5 @@ const W = E(
   )
 );
 export {
-  W as default
+  ae as default
 };

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

@@ -16,6 +16,7 @@ export declare const Playground: {
         onEdit: () => void;
         onDelete: () => void;
         element: string;
+        linkClassName: string;
     };
     argTypes: {
         variant: {
@@ -42,16 +43,18 @@ export declare const EmptyFavorites: {
         variant: string;
         element: string;
         formatlotStr: (count: number, lotText?: string) => string;
+        linkClassName: string;
     };
 };
-export declare const BlankList: {
+export declare const CreateList: {
     (props: ComponentProps<typeof FavoritesCollectionTile>): import("react/jsx-runtime").JSX.Element;
     args: {
         id: string;
         count: number;
-        name: string;
+        name: null;
         variant: string;
         element: string;
+        linkClassName: string;
     };
 };
 export declare const EmptyList: {
@@ -62,6 +65,7 @@ export declare const EmptyList: {
         name: string;
         variant: string;
         element: string;
+        linkClassName: string;
     };
 };
 export declare const TranslatedList: {
@@ -74,5 +78,6 @@ export declare const TranslatedList: {
         element: string;
         emptyListsText: string;
         formatlotStr: (count: number) => string;
+        linkClassName: string;
     };
 };

package/dist/scss/components/TextArea/_textArea.scss

@@ -47,6 +47,63 @@
     word-break: break-word;
   }
 
+  &__validation {
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    line-height: $spacing-md;
+    min-height: 2em;
+    overflow: hidden;
+  }
+
+  &--disabled {
+    color: $keyline-gray;
+    cursor: default;
+
+    .#{$px}-text-area__label,
+    .#{$px}-text-area__input {
+      color: inherit;
+    }
+    .#{$px}-text-area__label:hover,
+    .#{$px}-text-area__input:hover {
+      cursor: default;
+    }
+  }
+
+  &--invalid {
+    color: $error-red;
+
+    label {
+      color: $error-red;
+    }
+
+    .#{$px}-text-area__input,
+    .#{$px}-text-area__input::placeholder,
+    .#{$px}-input__validation {
+      color: $pure-black;
+    }
+
+    .#{$px}-text-area__input {
+      border: 1px solid $error-red;
+      box-shadow: inset 0 0 3px 3px $error-pink;
+
+      &:focus-within {
+        outline: 1px solid $error-red;
+      }
+    }
+  }
+
+  &--warn {
+    .#{$px}-text-area__label {
+      position: relative;
+    }
+  }
+
+  .#{$px}-input__validation {
+    animation: reveal 0.45s linear forwards;
+  }
+
   &::-webkit-resizer {
     bottom: 0;
     height: 28px;

package/dist/scss/patterns/FavoritesCollectionTile/_favoritesCollectionTile.scss

@@ -3,7 +3,6 @@
 .#{$px}-favorites-collection-tile {
   display: flex;
   flex-direction: column;
-  max-width: 24.5rem;
   text-align: left;
 
   &__content {
@@ -16,7 +15,7 @@
     align-items: flex-end;
     display: flex;
     justify-content: space-between;
-    margin-bottom: $spacing-sm;
+    padding-bottom: $spacing-sm;
   }
 
   &__info {
@@ -55,7 +54,8 @@
     display: flex;
     height: 2.5rem;
     justify-content: center;
-    margin-left: $spacing-sm;
+    position: relative;
+    top: $spacing-sm;
     transition: background 0.8s;
     width: 2.5rem;
 
@@ -70,11 +70,14 @@
       background-size: 100%;
       transition: background 0s;
     }
+
+    @media (min-width: $breakpoint-xl) {
+      top: calc($spacing-sm + 0.45rem);
+    }
   }
 
   &__popover-content {
     outline: none;
-    transform: translateX(2.5rem);
   }
 
   &__dropdown {
@@ -100,6 +103,9 @@
       color: inherit;
       text-decoration: none;
     }
+    &.#{$px}-link {
+      text-transform: none;
+    }
   }
 
   &__media-container {
@@ -121,11 +127,11 @@
     display: block;
     position: relative;
 
-    &--favorites {
+    &--bg {
       background-color: $soft-gray;
     }
 
-    &--list {
+    &--create-list {
       border: 1px solid #0000001f;
       border-radius: 0;
     }
@@ -134,23 +140,41 @@
       bottom: 20px;
       left: 20px;
       position: absolute;
+      width: calc(100% - 40px);
     }
   }
 
   &__icon {
     grid-column: 1;
     justify-self: start;
+    pointer-events: none;
 
     &-rotate {
       transform: rotate(90deg);
     }
+
+    &-circle {
+      border: 2px solid $dark-gray;
+      border-radius: 50%;
+      transform: scale(0.846);
+    }
+  }
+
+  &__icon-button {
+    pointer-events: none;
   }
 
+  // will update font size with variable rem sizing after design takes a pass at it some point in the future
   &__text {
     color: $dark-gray;
-    font-size: $body-size3;
+    font-size: 0.75rem;
     font-variation-settings: 'wght' 400;
     padding-top: 5px;
+    text-transform: none;
+  }
+
+  &__create-spacing {
+    height: calc($spacing-xsm + var(--body-line-height-size3) + var(--heading-line-height-size5));
   }
 
   [data-radix-popper-content-wrapper] > * {

package/package.json

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