@ukic/web-components 2.35.0 → 2.35.1

package/dist/collection/components/ic-text-field/ic-text-field.stories.js

@@ -0,0 +1,1083 @@
+import { html } from "lit-html";
+
+const defaultArgs = {
+  disabled: false,
+  fullWidth: false,
+  helperText: "",
+  hideLabel: false,
+  inputId: "ic-text-field-input-0",
+  inputmode: "text",
+  label: "Text Field",
+  maxCharacters: 0,
+  maxLength: 0,
+  maxLengthMessage: "Too many characters",
+  minCharacters: 0,
+  name: "0",
+  placeholder: "",
+  readonly: false,
+  required: false,
+  resize: false,
+  rows: 1,
+  size: "default",
+  spellcheck: false,
+  type: "text",
+  validationInline: false,
+  validationStatus: "none",
+  validationText: "",
+  debounce: 0,
+};
+
+export default {
+  title: "Web Components/Text field",
+  component: "ic-text-field",
+};
+
+export const Default = {
+  render: (args) =>
+    html`<ic-text-field label="What is your favourite coffee?"> </ic-text-field>
+      <ic-text-field rows="6" label="What is your favourite coffee?">
+      </ic-text-field> `,
+
+  name: "Default",
+};
+
+export const PlaceholderAndRequired = {
+  render: (args) =>
+    html`<ic-text-field
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+      >
+      </ic-text-field>
+      <ic-text-field
+        rows="6"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+      >
+      </ic-text-field> `,
+
+  name: "Placeholder and required",
+};
+
+export const HelperText = {
+  render: (args) =>
+    html`<ic-text-field
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+      </ic-text-field>
+      <ic-text-field
+        rows="6"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+      </ic-text-field> `,
+
+  name: "Helper text",
+};
+
+export const WithIcon = {
+  render: (args) =>
+    html`<ic-text-field
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        rows="6"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field> `,
+
+  name: "With icon",
+};
+
+export const WithValue = {
+  render: (args) =>
+    html`<ic-text-field
+        value="Arabica"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        rows="6"
+        value="Arabica"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field> `,
+
+  name: "With value",
+};
+
+export const MaxLength = {
+  render: (args) =>
+    html`<ic-text-field
+        max-length="25"
+        value="Arabica"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        rows="6"
+        max-length="25"
+        value="Arabica"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field> `,
+
+  name: "Max length",
+};
+
+export const MaxLengthMessage = {
+  render: (args) =>
+    html`<ic-text-field
+        max-length="25"
+        value="Arabica"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+        max-length-message="You have exceeded the maximum length"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        rows="6"
+        max-length="25"
+        value="Arabica"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+        max-length-message="You have exceeded the maximum length"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field> `,
+
+  name: "Max length message",
+};
+
+export const CustomWidth = {
+  render: (args) =>
+    html`<style>
+        ic-text-field {
+          --input-width: 400px;
+        }
+      </style>
+      <ic-text-field
+        value="Arabica"
+        max-length="25"
+        label="What is your favourite coffee?"
+        size="small"
+        required="true"
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        rows="6"
+        value="Arabica"
+        max-length="25"
+        resize
+        label="What is your favourite coffee?"
+        size="small"
+        required="true"
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field> `,
+
+  name: "Custom width",
+};
+
+export const FullWidth = {
+  render: (args) =>
+    html`<div style="display: flex">
+        <ic-text-field
+          full-width="true"
+          value="Arabica"
+          max-length="25"
+          label="What is your favourite coffee?"
+          size="small"
+          required="true"
+          placeholder="Placeholder"
+          helper-text="Such as Arabica, Robusta or Liberica"
+        >
+          <svg
+            slot="icon"
+            xmlns="http://www.w3.org/2000/svg"
+            height="24px"
+            viewBox="0 0 24 24"
+            width="24px"
+            fill="#000000"
+          >
+            <path d="M0 0h24v24H0z" fill="none" />
+            <path
+              d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+            />
+          </svg>
+        </ic-text-field>
+      </div>
+      <ic-text-field
+        full-width="true"
+        rows="6"
+        value="Arabica"
+        max-length="25"
+        resize
+        label="What is your favourite coffee?"
+        size="small"
+        required="true"
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field> `,
+
+  name: "Full width",
+};
+
+export const Disabled = {
+  render: (args) =>
+    html`<ic-text-field
+        value="Arabica"
+        label="What is your favourite coffee?"
+        disabled
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        value="Arabica"
+        rows="6"
+        label="What is your favourite coffee?"
+        disabled
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        value="Arabica"
+        max-length="25"
+        label="What is your favourite coffee?"
+        disabled
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        rows="6"
+        value="Arabica"
+        max-length="25"
+        label="What is your favourite coffee?"
+        disabled
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field> `,
+
+  name: "Disabled",
+};
+
+export const ReadOnly = {
+  render: (args) =>
+    html`<ic-text-field
+        value="Arabica"
+        max-length="25"
+        label="What is your favourite coffee?"
+        readonly
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        rows="6"
+        value="Arabica"
+        max-length="25"
+        label="What is your favourite coffee?"
+        readonly
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        value="Arabica"
+        max-length="25"
+        label="What is your favourite coffee?"
+        readonly
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+      </ic-text-field>
+      <ic-text-field
+        rows="6"
+        value="Arabica"
+        max-length="25"
+        label="What is your favourite coffee?"
+        readonly
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+      </ic-text-field> `,
+
+  name: "Read only",
+};
+
+export const Validation = {
+  render: (args) =>
+    html`<ic-text-field
+        validation-status="success"
+        validation-text="Good choice!"
+        value="Arabica"
+        max-length="25"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        rows="6"
+        validation-status="success"
+        validation-text="Good choice!"
+        value="Arabica"
+        max-length="25"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta, Liberica or something else to make this label long"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        validation-status="success"
+        validation-text="Good choice!"
+        validation-inline="true"
+        value="Arabica"
+        max-length="25"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        validation-status="success"
+        validation-text="Good choice!"
+        validation-inline="true"
+        value="Arabica"
+        max-length="25"
+        label="What is your favourite coffee?"
+        required
+        size="small"
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        validation-status="warning"
+        validation-text="A very long warning message to test if wrapping works"
+        value="Arabica"
+        max-length="25"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        rows="6"
+        validation-status="warning"
+        validation-text="A very long warning message to test if wrapping works"
+        value="Arabica"
+        max-length="25"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        validation-status="error"
+        validation-text="now it has really gone to (coffee) pot"
+        value="Tea"
+        max-length="25"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        rows="6"
+        validation-status="error"
+        validation-text="now it has really gone to (coffee) pot"
+        value="Tea"
+        max-length="25"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        validation-status="error"
+        validation-text="now it has really gone to (coffee) pot"
+        value="Tea with milk and 2 sugars"
+        max-length="25"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        rows="6"
+        validation-status="error"
+        validation-text="now it has really gone to (coffee) pot"
+        value="Tea with milk and 2 sugars"
+        max-length="25"
+        label="What is your favourite coffee?"
+        required
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        validation-status="error"
+        validation-text="now it has really gone to (coffee) pot"
+        value="6"
+        inputmode="numeric"
+        label="How many coffees do you want?"
+        helper-text="Our coffee machines have a maximum capacity of 4 coffees at a time."
+        type="number"
+        min="1"
+        max="4"
+        required
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        validation-status="error"
+        validation-text="now it has really gone to (coffee) pot"
+        value="0"
+        inputmode="numeric"
+        label="How many coffees do you want?"
+        helper-text="Our coffee machines have a maximum capacity of 4 coffees at a time."
+        type="number"
+        min="1"
+        max="4"
+        required
+      >
+        <svg
+          slot="icon"
+          xmlns="http://www.w3.org/2000/svg"
+          height="24px"
+          viewBox="0 0 24 24"
+          width="24px"
+          fill="#000000"
+        >
+          <path d="M0 0h24v24H0z" fill="none" />
+          <path
+            d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z"
+          />
+        </svg>
+      </ic-text-field>
+      <ic-text-field
+        validation-status="error"
+        validation-text="I'm not familiar with this type of coffee"
+        validation-inline-internal="true"
+        value="Milkshake"
+        label="What is your favourite coffee?"
+        required
+        hide-label
+        size="small"
+        placeholder="Placeholder"
+        helper-text="Such as Arabica, Robusta or Liberica"
+      ></ic-text-field>`,
+
+  name: "Validation",
+};
+
+export const TextAreaWithResize = {
+  render: (args) =>
+    html`<ic-text-field
+      rows="6"
+      value="Arabica"
+      max-length="25"
+      resize
+      label="What is your favourite coffee?"
+      size="small"
+      required="true"
+      placeholder="Placeholder"
+      helper-text="Such as Arabica, Robusta or Liberica"
+    >
+      <svg
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z" />
+      </svg>
+    </ic-text-field> `,
+
+  name: "Text area with resize",
+};
+
+export const Form = {
+  render: (args) => html`
+    <form>
+      <ic-text-field label="What is your favourite coffee?"></ic-text-field>
+      <br />
+      <br />
+      <input type="submit" value="Submit" />
+      <input type="reset" value="Reset" />
+    </form>
+    <script>
+      document.querySelector("form").addEventListener("submit", (ev) => {
+        ev.preventDefault();
+        console.log(
+          document.querySelector('input[name="ic-text-field-input-0"]').value
+        );
+      });
+    </script>
+  `,
+
+  name: "Form",
+};
+
+export const MinAndMax = {
+  render: (args) =>
+    html`<ic-text-field
+      inputmode="numeric"
+      label="How many coffees do you want?"
+      helper-text="Our coffee machines have a maximum capacity of 4 coffees at a time."
+      type="number"
+      min="1"
+      max="4"
+    >
+    </ic-text-field>`,
+
+  name: "Min and max",
+};
+
+export const LoggingIcChange = {
+  render: (args) =>
+    html`<script>
+        function handleIcChange(ev) {
+          console.log(ev.detail.value, "icChange");
+        }
+        document
+          .querySelector("ic-text-field")
+          .addEventListener("icChange", handleIcChange);
+      </script>
+      <ic-text-field label="What is your favourite coffee?"> </ic-text-field>`,
+
+  name: "Logging icChange",
+};
+
+export const MaximumAndMinimumCharacters = {
+  render: (args) =>
+    html`<ic-text-field
+        max-characters="2"
+        label="What is your favourite coffee?"
+        helper-text="Short answers only."
+      >
+      </ic-text-field>
+      <ic-text-field
+        min-characters="3"
+        label="What is your favourite coffee?"
+        helper-text="Long answer please."
+      >
+      </ic-text-field> `,
+
+  name: "Maximum and minimum characters",
+};
+
+export const Playground = {
+  render: (args) =>
+    html`<ic-text-field
+      label=${args.label}
+      disabled=${args.disabled}
+      full-width=${args.fullWidth}
+      helper-text=${args.helperText}
+      hide-label=${args.hideLabel}
+      input-id=${args.inputId}
+      inputmode=${args.inputmode}
+      max=${args.max}
+      max-characters=${args.maxCharacters}
+      max-length=${args.maxLength}
+      max-length-message=${args.maxLengthMessage}
+      min=${args.min}
+      min-characters=${args.minCharacters}
+      name=${args.name}
+      placeholder=${args.placeholder}
+      readonly=${args.readonly}
+      required=${args.required}
+      resize=${args.resize}
+      rows=${args.rows}
+      size=${args.size}
+      spellcheck=${args.spellcheck}
+      type=${args.type}
+      validation-status=${args.validationStatus}
+      validation-text=${args.validationText}
+      validation-inline=${args.validationInline}
+      debounce=${args.debounce}
+    >
+      {${args.showIconSlot} && (
+      <SlottedSVG
+        slot="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        height="24px"
+        viewBox="0 0 24 24"
+        width="24px"
+        fill="#000000"
+      >
+        <path d="M0 0h24v24H0z" fill="none" />
+        <path d="M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2z" />
+      </SlottedSVG>
+    </ic-text-field> `,
+
+  name: "Playground",
+  args: defaultArgs,
+
+  argTypes: {
+    inputmode: {
+      options: [
+        "none",
+        "text",
+        "tel",
+        "url",
+        "email",
+        "numeric",
+        "decimal",
+        "search",
+      ],
+
+      control: {
+        type: "select",
+      },
+    },
+
+    size: {
+      options: ["default", "small"],
+
+      control: {
+        type: "inline-radio",
+      },
+    },
+
+    type: {
+      options: ["email", "password", "tel", "text", "url", "number", "search"],
+
+      control: {
+        type: "select",
+      },
+    },
+
+    validationStatus: {
+      options: ["warning", "error", "success", "none"],
+
+      mapping: {
+        warning: "warning",
+        error: "error",
+        success: "success",
+        none: "",
+      },
+
+      control: {
+        type: "select",
+      },
+    },
+
+    showIconSlot: {
+      control: {
+        type: "boolean",
+      },
+    },
+  },
+};