@phillips/seldon 1.150.1 → 1.151.0

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/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/package.json

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