Web components - Input: Create unit tests

eslint.config.js

@@ -1,4 +1,5 @@
 import js from "@eslint/js";
 import eslintConfigPrettierRecommended from "eslint-config-prettier";
+import vitest from "@vitest/eslint-plugin";
 
-export default [js.configs.recommended, eslintConfigPrettierRecommended];
+export default [js.configs.recommended, eslintConfigPrettierRecommended, vitest];

package.json

@@ -57,6 +57,7 @@
     "@storybook/theming": "^8.2.9",
     "@storybook/web-components": "^8.2.9",
     "@storybook/web-components-vite": "^8.2.9",
+    "@vitest/eslint-plugin": "^1.1.7",
     "@vitest/ui": "^1.6.0",
     "axe-playwright": "^2.0.2",
     "concurrently": "^8.2.2",

src/components/usa-text-input/index.js

@@ -1,4 +1,4 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, html } from "lit";
 import styles from "./usa-text-input.css.js";
 
 /**
@@ -9,6 +9,8 @@ import styles from "./usa-text-input.css.js";
  * @cssprop --theme-input-line-height - Sets the line-height of input element
  * @cssprop --theme-input-max-width - Sets the max width of the input element
  * @cssprop --theme-input-state-border-width - Sets the border width of error and success states.
+ * 
+ * @prop State - Controls state variants
  *
  * @tagname usa-text-input
  */

src/components/usa-text-input/text-input.stories.js

@@ -1,12 +1,24 @@
 import "./index";
 
-import { html } from "lit";
+import { html, nothing } from "lit";
 
 export default {
   title: "Components/Text input",
   component: "usa-text-input",
-  render: () => html`
-    <usa-text-input>
+  argTypes: {
+    state: {
+      control: { type: "radio" },
+      options: ["Default", "success", "error", "disabled"],
+      table: {
+        defaultValue: { summary: "Default" },
+      },
+    },
+  },
+  args: {
+    state: "Default",
+  },
+  render: ({ state }) => html`
+    <usa-text-input state=${state == "Default" ? nothing : state}>
       <label for="input-type-text">Text input label</label>
       <input id="input-type-text" name="input-type-text" />
     </usa-text-input>

src/components/usa-text-input/usa-text-input.css.js

@@ -7,8 +7,11 @@ export default css`
     --theme-input-line-height: 1.3;
     --theme-input-max-width: 30rem;
     --theme-input-state-border-width: var(--usa-system-unit-05);
+    --theme-input-state-border-negative-margin: calc(
+      var(--usa-system-unit-1) - vcar(--theme-input-state-border-width)
+    );
 
-    .usa-input {
+    input {
       box-sizing: border-box;
       background: var(--usa-theme-page-background-color);
       border-width: 1px;
@@ -44,7 +47,13 @@ export default css`
       outline-offset: var(--usa-theme-focus-offset);
     }
 
-    .usa-label {
+    input:disabled {
+      background-color: var(--usa-theme-color-disabled-lighter);
+      color: var(--usa-theme-color-disabled-dark);
+      cursor: not-allowed;
+    }
+
+    label {
       color: var(--usa-theme-text-color);
       font-family:
         Source Sans Pro Web,
@@ -61,4 +70,38 @@ export default css`
       max-width: var(--usa-system-unit-mobile-lg);
     }
   }
+
+  :host([state=success]),
+  :host([state=error]) {
+    input {
+      border-width: var(--theme-input-state-border-width);
+      padding-top: var(--theme-input-state-border-negative-margin);
+      padding-bottom: var(--theme-input-state-border-negative-margin);
+    }
+  }
+
+  :host([state=success]) {
+    input {
+      border-color: var(--usa-system-color-green-cool-40v);
+    }
+  }
+
+  :host([state=error]) {
+    input {
+      border-color: var(--usa-theme-color-error-dark);
+    }
+
+    label {
+      font-weight: 700;
+      margin-top: 0;
+    }
+  }
+
+  :host([state=disabled]) {
+    input {
+      background-color: var(--usa-theme-color-disabled-lighter);
+      color: var(--usa-theme-color-disabled-dark);
+      cursor: not-allowed;
+    }
+  }
 `;