@phillips/seldon 1.124.0 → 1.125.0

package/dist/components/Button/Button.d.ts

@@ -36,6 +36,10 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement | HT
      * prefetch the link
      */
     prefetch?: 'none' | 'intent' | 'render' | 'viewport';
+    /**
+     * Boolean to specify whether we need to display skeleton loader
+     */
+    isSkeletonLoading?: boolean;
 }
 /**
  * ## Overview

package/dist/components/Button/Button.js

@@ -1,12 +1,12 @@
-import { jsxs as f, Fragment as k, jsx as o } from "react/jsx-runtime";
-import p from "../../node_modules/classnames/index.js";
-import { getCommonProps as N } from "../../utils/index.js";
-import { ButtonVariants as v } from "./types.js";
-import { forwardRef as x, useState as P } from "react";
-const j = x(
+import { jsxs as k, Fragment as p, jsx as o } from "react/jsx-runtime";
+import f from "../../node_modules/classnames/index.js";
+import { getCommonProps as N, px as v } from "../../utils/index.js";
+import { ButtonVariants as P } from "./types.js";
+import { forwardRef as j, useState as y } from "react";
+const H = j(
   ({
-    variant: r = v.primary,
-    children: s,
+    variant: s = P.primary,
+    children: r,
     className: a,
     isIconLast: l = !1,
     type: $ = "button",
@@ -14,24 +14,25 @@ const j = x(
     href: t,
     target: i,
     prefetch: m = "none",
+    isSkeletonLoading: x,
     ...n
   }, d) => {
-    const { className: e, ...c } = N(n, "Button"), [B, C] = P(!1);
+    const { className: e, ...c } = N(n, "Button"), [B, C] = y(!1);
     if (t) {
-      const u = () => /* @__PURE__ */ f(k, { children: [
+      const u = () => /* @__PURE__ */ k(p, { children: [
         /* @__PURE__ */ o("link", { "data-testid": "prefetch-link", rel: "prefetch", href: t }),
         /* @__PURE__ */ o("link", { "data-testid": "modulepreload-link", rel: "modulepreload", href: t })
       ] });
-      return /* @__PURE__ */ f(k, { children: [
+      return /* @__PURE__ */ k(p, { children: [
         /* @__PURE__ */ o(
           "a",
           {
             ...c,
             ref: d,
             href: t,
-            className: p(
+            className: f(
               `${e}`,
-              `${e}--${r}`,
+              `${e}--${s}`,
               {
                 [`${e}--icon-last`]: l
               },
@@ -41,7 +42,7 @@ const j = x(
             rel: i === "_blank" ? "noopener noreferrer" : void 0,
             onMouseOver: () => C(!0),
             onClick: n.onClick,
-            children: s
+            children: r
           }
         ),
         m === "intent" && B && /* @__PURE__ */ o(u, {}),
@@ -54,22 +55,23 @@ const j = x(
           ...c,
           ref: d,
           type: $,
-          className: p(
+          className: f(
             `${e}`,
-            `${e}--${r}`,
+            `${e}--${s}`,
             {
-              [`${e}--icon-last`]: l
+              [`${e}--icon-last`]: l,
+              [`${v}-skeleton`]: x
             },
             a
           ),
           disabled: b,
           ...n,
-          children: s
+          children: r
         }
       );
   }
 );
-j.displayName = "Button";
+H.displayName = "Button";
 export {
-  j as default
+  H as default
 };

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

@@ -29,11 +29,21 @@ export declare const ButtonAsLinkWithPrefetch: {
     args: {
         variant: ButtonVariants;
         size: string;
+    } | {
+        variant: ButtonVariants;
+        size: string;
     };
 };
+export declare const ButtonWithSkeleton: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Playground: {
     args: {
         children: string;
         variant: ButtonVariants;
+        isSkeletonLoading: boolean;
+    };
+    argTypes: {
+        isSkeletonLoading: {
+            control: string;
+        };
     };
 };

package/dist/components/Input/Input.d.ts

@@ -74,6 +74,10 @@ export interface InputProps extends Omit<React.ComponentProps<'input'>, 'size'>
      * Text that is displayed when the control is in warning state
      */
     warnText?: React.ReactNode;
+    /**
+     * Boolean to specify whether we need to display skeleton loader
+     */
+    isSkeletonLoading?: boolean;
 }
 /**
  * ## Overview

package/dist/components/Input/Input.js

@@ -1,79 +1,85 @@
-import { jsxs as R, jsx as s } from "react/jsx-runtime";
-import * as o from "react";
-import e from "../../node_modules/classnames/index.js";
-import { px as i, useNormalizedInputProps as g } from "../../utils/index.js";
-const k = o.forwardRef(
+import { jsxs as k, jsx as s } from "react/jsx-runtime";
+import * as u from "react";
+import n from "../../node_modules/classnames/index.js";
+import { px as t, useNormalizedInputProps as z } from "../../utils/index.js";
+const C = u.forwardRef(
   ({
     className: p,
-    defaultValue: u,
-    disabled: $,
-    hideLabel: m,
+    defaultValue: $,
+    disabled: m,
+    hideLabel: c,
     id: a,
-    inline: c,
-    invalid: _,
-    invalidText: b,
-    labelText: h,
-    onChange: f,
-    onClick: v,
-    placeholder: x,
+    inline: _,
+    invalid: b,
+    invalidText: h,
+    labelText: f,
+    onChange: v,
+    onClick: x,
+    placeholder: w,
     readOnly: d,
-    size: w = "md",
-    type: l = "text",
-    value: I,
-    warn: N,
-    warnText: y,
-    ...r
-  }, j) => {
-    const n = o.useId(), t = g({
-      disabled: $,
-      id: a || n,
-      invalid: _,
-      invalidText: b,
+    size: I = "md",
+    type: r = "text",
+    value: N,
+    warn: y,
+    warnText: j,
+    isSkeletonLoading: l,
+    ...o
+  }, P) => {
+    const e = u.useId(), i = z({
+      disabled: m,
+      id: a || e,
+      invalid: b,
+      invalidText: h,
       readOnly: d,
-      type: l,
-      warn: N,
-      warnText: y
-    }), P = e(`${i}-${l}-input`, `${i}-input`, `${i}-input--${w}`, {
-      [`${i}-input--inline`]: c,
-      [`${i}-input--readonly`]: d,
-      [`${i}-input--disabled`]: t.disabled,
-      [`${i}-input--invalid`]: t.invalid,
-      [`${i}-input--warn`]: t.warn,
+      type: r,
+      warn: y,
+      warnText: j
+    }), R = n(`${t}-${r}-input`, `${t}-input`, `${t}-input--${I}`, {
+      [`${t}-input--inline`]: _,
+      [`${t}-input--readonly`]: d,
+      [`${t}-input--disabled`]: i.disabled,
+      [`${t}-input--invalid`]: i.invalid,
+      [`${t}-input--warn`]: i.warn,
       [`${p}__wrapper`]: p,
-      [`${i}-input--hidden`]: r.hidden
+      [`${t}-input--hidden`]: o.hidden
     });
-    return /* @__PURE__ */ R("div", { className: P, children: [
+    return /* @__PURE__ */ k("div", { className: R, children: [
       /* @__PURE__ */ s(
         "label",
         {
-          "data-testid": `label-${a || n}`,
-          htmlFor: a || n,
-          className: e(`${i}-input__label`, { [`${i}-input__label--hidden`]: m }),
-          children: h
+          "data-testid": `label-${a || e}`,
+          htmlFor: a || e,
+          className: n(`${t}-input__label`, {
+            [`${t}-input__label--hidden`]: c,
+            [`${t}-skeleton`]: l
+          }),
+          children: f
         }
       ),
       /* @__PURE__ */ s(
         "input",
         {
-          className: e(`${i}-input__input`, p),
+          className: n(`${t}-input__input`, p, {
+            [`${t}-skeleton`]: l
+          }),
           "data-testid": a,
-          disabled: t.disabled,
-          id: a || n,
-          onChange: f,
-          onClick: v,
-          placeholder: x,
+          disabled: i.disabled,
+          id: a || e,
+          onChange: v,
+          onClick: x,
+          placeholder: l ? "" : w,
           readOnly: d,
-          ref: j,
-          type: t.type,
-          ...t.type !== "checkbox" && t.type !== "radio" ? { value: I, defaultValue: u } : {},
-          ...r
+          ref: P,
+          type: i.type,
+          ...i.type !== "checkbox" && i.type !== "radio" ? { value: N, defaultValue: $ } : {},
+          ...o
         }
       ),
-      t.validation ? t.validation : /* @__PURE__ */ s("p", { className: e(`${i}-input__validation`), children: " " })
+      i.validation ? i.validation : /* @__PURE__ */ s("p", { className: n(`${t}-input__validation`), children: " " })
     ] });
   }
 );
-k.displayName = "Input";
+C.displayName = "Input";
 export {
-  k as default
+  C as default
 };

package/dist/components/Text/Text.d.ts

@@ -13,6 +13,10 @@ export interface TextProps extends React.HTMLAttributes<HTMLElement> {
      * The alignment of the text
      */
     align?: TextAlignments;
+    /**
+     * Boolean to specify whether we need to display skeleton loader
+     */
+    isSkeletonLoading?: boolean;
 }
 /**
  * ## Overview
@@ -23,5 +27,5 @@ export interface TextProps extends React.HTMLAttributes<HTMLElement> {
  *
  * [Storybook Link](https://phillips-seldon.netlify.app/?path=/docs/components-text--overview)
  */
-declare const Text: ({ children, className, element: CustomElement, variant, align, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
+declare const Text: ({ children, className, element: CustomElement, variant, align, isSkeletonLoading, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
 export default Text;

package/dist/components/Text/Text.js

@@ -1,29 +1,38 @@
-import { jsx as c } from "react/jsx-runtime";
-import { getCommonProps as f } from "../../utils/index.js";
-import { TextVariants as p } from "./types.js";
-import { determineDefaultTextElement as x, determineTextClassName as i } from "./utils.js";
-import T from "../../node_modules/classnames/index.js";
-const P = ({
-  children: s,
-  className: r,
-  element: a,
-  variant: e = p.body2,
+import { jsx as s } from "react/jsx-runtime";
+import { getCommonProps as f, px as i } from "../../utils/index.js";
+import { TextVariants as d } from "./types.js";
+import { determineDefaultTextElement as N, determineTextClassName as T } from "./utils.js";
+import r from "../../node_modules/classnames/index.js";
+const h = ({
+  children: a,
+  className: n,
+  element: l,
+  variant: e = d.body2,
   align: m,
+  isSkeletonLoading: c,
   ...t
 }) => {
-  const n = a || x(e), { className: o, ...l } = f(t, "Text");
-  return /* @__PURE__ */ c(
-    n,
+  const p = l || N(e), { className: o, ...x } = f(t, "Text");
+  return /* @__PURE__ */ s(
+    p,
     {
-      ...l,
-      className: T(o, r, i(e), {
+      ...x,
+      className: r(o, n, T(e), {
         [`${o}--${m}`]: !!m
       }),
       ...t,
-      children: s
+      children: /* @__PURE__ */ s(
+        "span",
+        {
+          className: r({
+            [`${i}-skeleton`]: c
+          }),
+          children: a
+        }
+      )
     }
   );
 };
 export {
-  P as default
+  h as default
 };

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

@@ -2,7 +2,7 @@ import { TextProps } from './Text';
 import { TextAlignments, TextVariants } from './types';
 declare const meta: {
     title: string;
-    component: ({ children, className, element: CustomElement, variant, align, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ children, className, element: CustomElement, variant, align, isSkeletonLoading, ...props }: TextProps) => import("react/jsx-runtime").JSX.Element;
 };
 export default meta;
 export declare const Playground: {
@@ -25,6 +25,31 @@ export declare const Playground: {
         };
     };
 };
+export declare const TextWithSkeleton: {
+    (props: TextProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        children: string;
+        variant: TextVariants;
+        isSkeletonLoading: boolean;
+    };
+    argTypes: {
+        variant: {
+            options: typeof TextVariants;
+            control: {
+                type: string;
+            };
+        };
+        align: {
+            options: typeof TextAlignments;
+            control: {
+                type: string;
+            };
+        };
+        isSkeletonLoading: {
+            control: string;
+        };
+    };
+};
 export declare const SuperScript: {
     (props: TextProps): import("react/jsx-runtime").JSX.Element;
     args: {

package/dist/scss/_sharedClasses.scss

@@ -1,3 +1,5 @@
+/* stylelint-disable order/properties-alphabetical-order */
+/* stylelint-disable declaration-empty-line-before */
 @use './vars' as *;
 @use './utils' as *;
 
@@ -9,3 +11,61 @@
     }
   }
 }
+
+.#{$px}-skeleton,
+.#{$px}-skeleton::before,
+.#{$px}-skeleton::after {
+  animation: skeleton-pulse 1s infinite alternate-reverse !important;
+  background-image: none !important;
+  background-clip: initial !important;
+  border-radius: 0.1875rem !important;
+
+  border-color: #0000 !important;
+  box-shadow: none !important;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-box-decoration-break: clone !important;
+  box-decoration-break: clone !important;
+  color: #0000 !important;
+  outline: none !important;
+  pointer-events: none !important;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-user-select: none !important;
+  user-select: none !important;
+  cursor: default !important;
+}
+
+input[type='checkbox'].#{$px}-skeleton,
+input[type='radio'].#{$px}-skeleton {
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -webkit-appearance: none;
+  /* stylelint-disable-next-line property-no-vendor-prefix */
+  -moz-appearance: none;
+  appearance: none;
+  padding: 0 !important;
+  width: 13px !important;
+  height: 13px !important;
+}
+
+button.#{$px}-skeleton {
+  border-radius: 6.25rem !important;
+}
+
+.#{$px}-toggle-input {
+  .#{$px}-skeleton::before,
+  .#{$px}-skeleton::after {
+    border-radius: 6.25rem !important;
+  }
+  .#{$px}-skeleton::after {
+    display: none !important;
+  }
+}
+
+@keyframes skeleton-pulse {
+  0% {
+    background-color: #0000000f;
+  }
+
+  100% {
+    background-color: #0000001f;
+  }
+}

package/dist/scss/components/Drawer/_drawer.scss

@@ -5,7 +5,7 @@
   background-color: $white;
   display: flex;
   flex-direction: column;
-  height: 100vh;
+  height: 100dvh;
   max-width: 600px;
   padding: $padding-xl $padding-md $padding-md;
   position: fixed;
@@ -22,6 +22,10 @@
     max-width: 100%;
   }
 
+  @media (max-width: $breakpoint-md) {
+    padding-bottom: $padding-sm;
+  }
+
   &__overlay {
     background-color: $overlay-black;
     inset: 0;

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

@@ -19,6 +19,7 @@ $lg: #{$px}-input--lg;
     color: $pure-black;
     font-variation-settings: 'wght' 600;
     margin-bottom: 0.5rem;
+    width: fit-content;
     word-break: break-word;
 
     &--hidden {

package/package.json

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