@phillips/seldon 1.172.0 → 1.173.0

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

@@ -4,6 +4,14 @@ export interface InputProps extends Omit<React.ComponentProps<'input'>, 'size'>
      * Optional className to be applied to the `<input>` node
      */
     className?: string;
+    /**
+     * Optional adornment to be displayed before the input value
+     */
+    inputAdornment?: string | React.ReactNode;
+    /**
+     * Optional position to place the adornment. Defaults to 'start'
+     */
+    adornmentPosition?: 'start' | 'end';
     /**
      * Optionally provide the default value of the `<input>`. Should not be passed into controlled input!
      */

package/dist/components/Input/Input.js

@@ -1,85 +1,99 @@
-import { jsxs as P, jsx as d } from "react/jsx-runtime";
-import * as R from "react";
-import n from "../../node_modules/classnames/index.js";
-import { px as t, useNormalizedInputProps as k } from "../../utils/index.js";
-const z = R.forwardRef(
+import { jsxs as c, jsx as n } from "react/jsx-runtime";
+import * as z from "react";
+import p from "../../node_modules/classnames/index.js";
+import { px as t, useNormalizedInputProps as F } from "../../utils/index.js";
+const q = z.forwardRef(
   ({
-    className: p,
-    defaultValue: o,
-    disabled: u,
-    hideLabel: $,
-    id: a,
-    inline: m,
-    invalid: c,
-    invalidText: _,
-    labelText: b,
-    onChange: h,
-    onClick: f,
-    placeholder: v,
-    readOnly: e,
-    size: x = "md",
-    type: s = "text",
-    value: w,
-    warn: N,
-    warnText: y,
-    isSkeletonLoading: l,
-    ...r
-  }, I) => {
-    const i = k({
-      disabled: u,
-      id: a,
-      invalid: c,
-      invalidText: _,
-      readOnly: e,
-      type: s,
-      warn: N,
-      warnText: y
-    }), j = n(`${t}-${s}-input`, `${t}-input`, `${t}-input--${x}`, {
-      [`${t}-input--inline`]: m,
-      [`${t}-input--readonly`]: e,
-      [`${t}-input--disabled`]: i.disabled,
-      [`${t}-input--invalid`]: i.invalid,
-      [`${t}-input--warn`]: i.warn,
-      [`${p}__wrapper`]: p,
-      [`${t}-input--hidden`]: r.hidden
-    });
-    return /* @__PURE__ */ P("div", { className: j, children: [
-      /* @__PURE__ */ d(
+    className: s,
+    inputAdornment: i,
+    adornmentPosition: l = "start",
+    defaultValue: _,
+    disabled: h,
+    hideLabel: w,
+    id: e,
+    inline: b,
+    invalid: N,
+    invalidText: f,
+    labelText: v,
+    onChange: x,
+    onClick: y,
+    placeholder: I,
+    readOnly: d,
+    size: T = "md",
+    type: u = "text",
+    value: C,
+    warn: P,
+    warnText: j,
+    isSkeletonLoading: r,
+    ...o
+  }, k) => {
+    const a = F({
+      disabled: h,
+      id: e,
+      invalid: N,
+      invalidText: f,
+      readOnly: d,
+      type: u,
+      warn: P,
+      warnText: j
+    }), R = p(`${t}-${u}-input`, `${t}-input`, `${t}-input--${T}`, {
+      [`${t}-input--inline`]: b,
+      [`${t}-input--readonly`]: d,
+      [`${t}-input--disabled`]: a.disabled,
+      [`${t}-input--invalid`]: a.invalid,
+      [`${t}-input--warn`]: a.warn,
+      [`${s}__wrapper`]: s,
+      [`${t}-input--hidden`]: o.hidden
+    }), m = [
+      "text",
+      "number",
+      "password",
+      "email",
+      "tel",
+      "url",
+      "search",
+      "date",
+      "datetime-local",
+      "month",
+      "time",
+      "week"
+    ].includes(a.type ?? ""), $ = {
+      className: i && m ? p(`${t}-input__wrapper__input`, s, { [`${t}-skeleton`]: r }) : p(`${t}-input__input`, s, { [`${t}-skeleton`]: r }),
+      "data-testid": e,
+      disabled: a.disabled,
+      id: e,
+      onChange: x,
+      onClick: y,
+      placeholder: r ? "" : I,
+      readOnly: d,
+      ref: k,
+      type: a.type,
+      ...a.type !== "checkbox" && a.type !== "radio" ? { value: C, defaultValue: _ } : {},
+      ...o
+    };
+    return /* @__PURE__ */ c("div", { className: R, children: [
+      /* @__PURE__ */ n(
         "label",
         {
-          "data-testid": `label-${a}`,
-          htmlFor: a,
-          className: n(`${t}-input__label`, {
-            [`${t}-input__label--hidden`]: $,
-            [`${t}-skeleton`]: l
+          "data-testid": `label-${e}`,
+          htmlFor: e,
+          className: p(`${t}-input__label`, {
+            [`${t}-input__label--hidden`]: w,
+            [`${t}-skeleton`]: r
           }),
-          children: b
+          children: v
         }
       ),
-      /* @__PURE__ */ d(
-        "input",
-        {
-          className: n(`${t}-input__input`, p, {
-            [`${t}-skeleton`]: l
-          }),
-          "data-testid": a,
-          disabled: i.disabled,
-          id: a,
-          onChange: h,
-          onClick: f,
-          placeholder: l ? "" : v,
-          readOnly: e,
-          ref: I,
-          type: i.type,
-          ...i.type !== "checkbox" && i.type !== "radio" ? { value: w, defaultValue: o } : {},
-          ...r
-        }
-      ),
-      i.validation ? i.validation : /* @__PURE__ */ d("p", { className: n(`${t}-input__validation`), children: " " })
+      i && m ? /* @__PURE__ */ c("div", { className: `${t}-input__wrapper`, "data-testid": `wrapper-${e}`, children: [
+        l === "start" && /* @__PURE__ */ n("span", { className: `${t}-input__wrapper__adornment`, id: "adornment", "data-testid": `adornment-${e}`, children: i }),
+        /* @__PURE__ */ n("input", { ...$ }),
+        l === "end" && /* @__PURE__ */ n("span", { className: `${t}-input__wrapper__adornment`, id: "adornment", "data-testid": `adornment-${e}`, children: i })
+      ] }) : /* @__PURE__ */ n("input", { ...$ }),
+      a.validation ? a.validation : /* @__PURE__ */ n("p", { className: p(`${t}-input__validation`), children: " " })
     ] });
   }
 );
-z.displayName = "Input";
+q.displayName = "Input";
 export {
-  z as default
+  q as default
 };

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

@@ -80,6 +80,17 @@ export declare const CheckboxInput: {
                 type: string;
             };
         };
+        inputAdornment: {
+            control: {
+                type: string;
+            };
+        };
+        adornmentPosition: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
         labelText: {
             control: {
                 type: string;
@@ -177,6 +188,17 @@ export declare const RangeInput: {
                 type: string;
             };
         };
+        inputAdornment: {
+            control: {
+                type: string;
+            };
+        };
+        adornmentPosition: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
         labelText: {
             control: {
                 type: string;
@@ -270,6 +292,17 @@ export declare const ControlledInput: {
                 type: string;
             };
         };
+        inputAdornment: {
+            control: {
+                type: string;
+            };
+        };
+        adornmentPosition: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
         labelText: {
             control: {
                 type: string;
@@ -329,6 +362,104 @@ export declare const CustomLabel: {
     };
     argTypes: {};
 };
+export declare const InputWithAdornment: {
+    ({ playgroundWidth, ...args }: StoryProps): import("react/jsx-runtime").JSX.Element;
+    args: {
+        labelText: string;
+        playgroundWidth: number;
+        size: string;
+        inputAdornment: import("react/jsx-runtime").JSX.Element;
+        adornmentPosition: string;
+    };
+    argTypes: {
+        className: {
+            control: {
+                type: string;
+            };
+        };
+        defaultValue: {
+            control: {
+                type: string;
+            };
+        };
+        disabled: {
+            control: {
+                type: string;
+            };
+        };
+        invalid: {
+            control: {
+                type: string;
+            };
+        };
+        invalidText: {
+            control: {
+                type: string;
+            };
+        };
+        inputAdornment: {
+            control: {
+                type: string;
+            };
+        };
+        adornmentPosition: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        labelText: {
+            control: {
+                type: string;
+            };
+        };
+        onChange: {
+            action: string;
+        };
+        onClick: {
+            action: string;
+        };
+        placeholder: {
+            control: {
+                type: string;
+            };
+        };
+        playgroundWidth: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+                step: number;
+            };
+        };
+        size: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
+        type: {
+            control: {
+                type: string;
+            };
+        };
+        value: {
+            control: {
+                type: string;
+            };
+        };
+        warn: {
+            control: {
+                type: string;
+            };
+        };
+        warnText: {
+            control: {
+                type: string;
+            };
+        };
+    };
+};
 export declare const Playground: {
     ({ playgroundWidth, ...args }: StoryProps): import("react/jsx-runtime").JSX.Element;
     args: {
@@ -369,6 +500,17 @@ export declare const Playground: {
                 type: string;
             };
         };
+        inputAdornment: {
+            control: {
+                type: string;
+            };
+        };
+        adornmentPosition: {
+            options: string[];
+            control: {
+                type: string;
+            };
+        };
         labelText: {
             control: {
                 type: string;

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

@@ -27,6 +27,53 @@ $lg: #{$px}-input--lg;
     }
   }
 
+  &__wrapper {
+    @include text($string2);
+
+    accent-color: $soft-black;
+    align-items: center;
+    border: 1px solid $keyline-gray;
+    border-radius: 0.1875rem;
+    display: inline-flex;
+    font-variation-settings: 'wght' 600;
+    justify-content: space-between;
+    margin-bottom: 0.25rem;
+    padding: $padding-xsm;
+    position: relative;
+
+    &::placeholder {
+      font-variation-settings: 'wght' 400;
+    }
+
+    &:focus-visible,
+    &:focus-within {
+      outline: 1px solid $pure-black;
+    }
+
+    .#{$px}-input__wrapper__input,
+    .#{$px}-input__input {
+      border: none;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+
+      &:focus-visible {
+        outline: none;
+      }
+    }
+
+    &__adornment {
+      align-items: center;
+      display: flex;
+      margin-right: 0.25rem;
+      user-select: none;
+      user-select: none;
+      user-select: none;
+      user-select: none;
+      white-space: nowrap;
+    }
+  }
+
   &__input {
     @include text($string2);
 
@@ -60,7 +107,8 @@ $lg: #{$px}-input--lg;
     flex-flow: row wrap;
     gap: 1rem;
 
-    .#{$px}-input__input {
+    .#{$px}-input__input,
+    .#{$px}-input__wrapper {
       align-self: center;
       width: unset;
     }
@@ -72,7 +120,8 @@ $lg: #{$px}-input--lg;
     cursor: default;
 
     .#{$px}-input__label,
-    .#{$px}-input__input {
+    .#{$px}-input__input,
+    .#{$px}-input__wrapper {
       color: inherit;
     }
     .#{$px}-input__label:hover,
@@ -86,7 +135,8 @@ $lg: #{$px}-input--lg;
     pointer-events: none;
 
     .#{$px}-input__label,
-    .#{$px}-input__input {
+    .#{$px}-input__input,
+    .#{$px}-input__wrapper {
       cursor: default;
     }
 
@@ -109,7 +159,8 @@ $lg: #{$px}-input--lg;
       color: $pure-black;
     }
 
-    .#{$px}-input__input {
+    .#{$px}-input__input,
+    .#{$px}-input__wrapper {
       border: 1px solid $error-red;
       box-shadow: inset 0 0 3px 3px $error-pink;
 
@@ -117,6 +168,12 @@ $lg: #{$px}-input--lg;
         outline: 1px solid $error-red;
       }
     }
+
+    .#{$px}-input__wrapper .#{$px}-input__input {
+      border: none;
+      box-shadow: none;
+      outline: none;
+    }
   }
 
   // warn

package/dist/scss/components/Toggle/_toggle.scss

@@ -77,7 +77,8 @@ $lg: #{$px}-input--lg;
   }
 
   // Hide actual checkbox input
-  .#{$px}-input__input {
+  .#{$px}-input__input,
+  .#{$px}-input__wrapper {
     @include hidden;
 
     margin-bottom: 0;

package/package.json

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