@ukic/web-components 2.35.2 → 3.0.0-alpha.10

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

@@ -1,32 +1,5 @@
 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",
@@ -36,11 +9,19 @@ 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> `,
+      </ic-text-field>`,
 
   name: "Default",
 };
 
+export const Autofocus = {
+  render: (args) =>
+    html`<ic-text-field autofocus label="What is your favourite coffee?">
+    </ic-text-field>`,
+
+  name: "Autofocus",
+};
+
 export const PlaceholderAndRequired = {
   render: (args) =>
     html`<ic-text-field
@@ -177,110 +158,6 @@ export const WithValue = {
   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>
@@ -290,7 +167,7 @@ export const CustomWidth = {
       </style>
       <ic-text-field
         value="Arabica"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         size="small"
         required="true"
@@ -314,7 +191,7 @@ export const CustomWidth = {
       <ic-text-field
         rows="6"
         value="Arabica"
-        max-length="25"
+        max-characters="25"
         resize
         label="What is your favourite coffee?"
         size="small"
@@ -346,7 +223,7 @@ export const FullWidth = {
         <ic-text-field
           full-width="true"
           value="Arabica"
-          max-length="25"
+          max-characters="25"
           label="What is your favourite coffee?"
           size="small"
           required="true"
@@ -372,7 +249,7 @@ export const FullWidth = {
         full-width="true"
         rows="6"
         value="Arabica"
-        max-length="25"
+        max-characters="25"
         resize
         label="What is your favourite coffee?"
         size="small"
@@ -445,7 +322,7 @@ export const Disabled = {
       </ic-text-field>
       <ic-text-field
         value="Arabica"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         disabled
         placeholder="Placeholder"
@@ -468,7 +345,7 @@ export const Disabled = {
       <ic-text-field
         rows="6"
         value="Arabica"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         disabled
         placeholder="Placeholder"
@@ -496,7 +373,7 @@ export const ReadOnly = {
   render: (args) =>
     html`<ic-text-field
         value="Arabica"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         readonly
         placeholder="Placeholder"
@@ -519,7 +396,7 @@ export const ReadOnly = {
       <ic-text-field
         rows="6"
         value="Arabica"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         readonly
         placeholder="Placeholder"
@@ -541,7 +418,7 @@ export const ReadOnly = {
       </ic-text-field>
       <ic-text-field
         value="Arabica"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         readonly
         placeholder="Placeholder"
@@ -551,7 +428,7 @@ export const ReadOnly = {
       <ic-text-field
         rows="6"
         value="Arabica"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         readonly
         placeholder="Placeholder"
@@ -568,7 +445,7 @@ export const Validation = {
         validation-status="success"
         validation-text="Good choice!"
         value="Arabica"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         required
         placeholder="Placeholder"
@@ -593,7 +470,7 @@ export const Validation = {
         validation-status="success"
         validation-text="Good choice!"
         value="Arabica"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         required
         placeholder="Placeholder"
@@ -618,7 +495,7 @@ export const Validation = {
         validation-text="Good choice!"
         validation-inline="true"
         value="Arabica"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         required
         placeholder="Placeholder"
@@ -643,7 +520,7 @@ export const Validation = {
         validation-text="Good choice!"
         validation-inline="true"
         value="Arabica"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         required
         size="small"
@@ -668,7 +545,7 @@ export const Validation = {
         validation-status="warning"
         validation-text="A very long warning message to test if wrapping works"
         value="Arabica"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         required
         placeholder="Placeholder"
@@ -693,7 +570,6 @@ export const Validation = {
         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"
@@ -717,7 +593,7 @@ export const Validation = {
         validation-status="error"
         validation-text="now it has really gone to (coffee) pot"
         value="Tea"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         required
         placeholder="Placeholder"
@@ -742,7 +618,7 @@ export const Validation = {
         validation-status="error"
         validation-text="now it has really gone to (coffee) pot"
         value="Tea"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         required
         placeholder="Placeholder"
@@ -766,7 +642,7 @@ export const Validation = {
         validation-status="error"
         validation-text="now it has really gone to (coffee) pot"
         value="Tea with milk and 2 sugars"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         required
         placeholder="Placeholder"
@@ -791,7 +667,7 @@ export const Validation = {
         validation-status="error"
         validation-text="now it has really gone to (coffee) pot"
         value="Tea with milk and 2 sugars"
-        max-length="25"
+        max-characters="25"
         label="What is your favourite coffee?"
         required
         placeholder="Placeholder"
@@ -884,7 +760,7 @@ export const TextAreaWithResize = {
     html`<ic-text-field
       rows="6"
       value="Arabica"
-      max-length="25"
+      max-characters="25"
       resize
       label="What is your favourite coffee?"
       size="small"
@@ -968,6 +844,13 @@ export const MaximumAndMinimumCharacters = {
         helper-text="Short answers only."
       >
       </ic-text-field>
+      <ic-text-field
+        max-characters="2"
+        label="What is your favourite coffee?"
+        helper-text="Short answers only. The character count is hidden."
+        hide-char-count
+      >
+      </ic-text-field>
       <ic-text-field
         min-characters="3"
         label="What is your favourite coffee?"
@@ -977,107 +860,3 @@ export const MaximumAndMinimumCharacters = {
 
   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",
-      },
-    },
-  },
-};

package/dist/collection/components/ic-text-field/test/basic/ic-text-field.input.spec.js

@@ -1,4 +1,7 @@
 import { TextField } from "../../ic-text-field";
+import { InputContainer } from "../../../ic-input-container/ic-input-container";
+import { InputLabel } from "../../../ic-input-label/ic-input-label";
+import { Typography } from "../../../ic-typography/ic-typography";
 import { newSpecPage } from "@stencil/core/testing";
 import { waitForTimeout } from "../../../../testspec.setup";
 describe("ic-text-field", () => {
@@ -33,7 +36,7 @@ describe("ic-text-field", () => {
     it("should render with autoprops", async () => {
         const page = await newSpecPage({
             components: [TextField],
-            html: `<ic-text-field label="Test label" value="test value" autofocus=true autocapitalize="on" autocomplete="on" autocorrect="on"></ic-text-field>`,
+            html: `<ic-text-field label="Test label" value="test value" autocapitalize="on" autocomplete="on" autocorrect="on"></ic-text-field>`,
         });
         expect(page.root).toMatchSnapshot("renders-with-autoprops");
     });
@@ -82,19 +85,40 @@ describe("ic-text-field", () => {
         });
         expect(page.root).toMatchSnapshot("renders-readonly");
     });
-    it("should render with max length", async () => {
+    it("should render with max characters", async () => {
         const page = await newSpecPage({
             components: [TextField],
-            html: `<ic-text-field label="Test label" value="a long test value to exceed limit" max-length=25></ic-text-field>`,
+            html: `<ic-text-field label="Test label" value="Test value" max-characters=25></ic-text-field>`,
         });
-        expect(page.root).toMatchSnapshot("renders-with-maxlength");
+        expect(page.root).toMatchSnapshot("renders-with-max-characters");
     });
-    it("should render with max length message", async () => {
+    it("should render with max characters and hidden character count", async () => {
         const page = await newSpecPage({
             components: [TextField],
-            html: `<ic-text-field label="Test label" value="a long test value to exceed limit" max-length=25 max-length-message="You have exceeded the maximum length"></ic-text-field>`,
+            html: `<ic-text-field label="Test label" value="Test value" max-characters=25 hide-char-count></ic-text-field>`,
         });
-        expect(page.root).toMatchSnapshot("renders-with-max-length-message");
+        expect(page.root).toMatchSnapshot("renders-with-hidden-char-count");
+    });
+    it("should render with max characters and a value set which exceeds the max number of characters", async () => {
+        const page = await newSpecPage({
+            components: [TextField],
+            html: `<ic-text-field label="Test label" value="A long value which exceeds the max characters" max-characters=25></ic-text-field>`,
+        });
+        expect(page.root).toMatchSnapshot("renders-with-max-characters-long-value");
+    });
+    it("should render with max characters and hidden character count", async () => {
+        const page = await newSpecPage({
+            components: [TextField],
+            html: `<ic-text-field label="Test label" value="Test value" max-characters=25 hide-char-count></ic-text-field>`,
+        });
+        expect(page.root).toMatchSnapshot("renders-with-hidden-char-count");
+    });
+    it("should render with max characters and a value set which exceeds the max number of characters", async () => {
+        const page = await newSpecPage({
+            components: [TextField],
+            html: `<ic-text-field label="Test label" value="A long value which exceeds the max characters" max-characters=25></ic-text-field>`,
+        });
+        expect(page.root).toMatchSnapshot("renders-with-max-characters-long-value");
     });
     it("should render with name & full width", async () => {
         const page = await newSpecPage({
@@ -131,17 +155,6 @@ describe("ic-text-field", () => {
         });
         expect(page.root).toMatchSnapshot("renders-with-inline-success-validation");
     });
-    it("should focus", async () => {
-        const page = await newSpecPage({
-            components: [TextField],
-            html: `<ic-text-field label="Test label" rows=1></ic-text-field>`,
-        });
-        const callbackFn = jest.fn();
-        page.doc.addEventListener("icFocus", callbackFn);
-        const input = page.root.shadowRoot.querySelector("input");
-        await input.focus();
-        expect(callbackFn).toHaveBeenCalled();
-    });
     it("should blur", async () => {
         const page = await newSpecPage({
             components: [TextField],
@@ -175,14 +188,6 @@ describe("ic-text-field", () => {
         const slot = page.root.shadowRoot.querySelector(`[slot="icon"]`);
         expect(slot).toBeNull();
     });
-    it("should not exceed max length if new value < max length", async () => {
-        const page = await newSpecPage({
-            components: [TextField],
-            html: `<ic-text-field label="Test label" rows=1 max-length=5></ic-text-field>`,
-        });
-        page.rootInstance.watchValueHandler("test");
-        expect(page.rootInstance.maxLengthExceeded).toBe(false);
-    });
     it("should test keydown", async () => {
         const page = await newSpecPage({
             components: [TextField],
@@ -242,6 +247,15 @@ it("should render with min/max and min validation", async () => {
     });
     expect(page.root).toMatchSnapshot("renders-with-min");
 });
+it("should test setting value cannot exceed maxCharacters", async () => {
+    const page = await newSpecPage({
+        components: [TextField],
+        html: `<ic-text-field label="Test label" rows=1 max-characters=5 value="Test value"></ic-text-field>`,
+    });
+    expect(page.rootInstance.value).toBe("Test ");
+    page.rootInstance.watchValueHandler("Another test value");
+    expect(page.rootInstance.value).toBe("Anoth");
+});
 it("should test maxCharacters method", async () => {
     const page = await newSpecPage({
         components: [TextField],
@@ -276,4 +290,23 @@ it("should update any attributes that are inherited from the root element", asyn
     await page.waitForChanges();
     expect(page.root.shadowRoot.querySelector("input").getAttribute("title")).toBe("new-label");
 });
+it("should autofocus", async () => {
+    jest.useFakeTimers();
+    const page = await newSpecPage({
+        components: [TextField, InputContainer, InputLabel, Typography],
+        html: `<ic-text-field label="Test label" autofocus>
+        <ic-typography>Helper text</ic-typography>
+      </ic-text-field>`,
+    });
+    await page.waitForChanges();
+    const textField = page.rootInstance;
+    expect(textField.autofocus).toBe(true);
+    const typo = page.root.shadowRoot.querySelector("ic-typography");
+    typo.classList.add("hydrated");
+    const callbackFn = jest.fn();
+    page.doc.addEventListener("icFocus", callbackFn);
+    jest.advanceTimersByTime(100);
+    await page.waitForChanges();
+    expect(callbackFn).toHaveBeenCalled();
+});
 //# sourceMappingURL=ic-text-field.input.spec.js.map