@dxc-technology/halstack-react 0.0.0-951bb80 → 0.0.0-95b953e

package/text-input/TextInput.stories.tsx

@@ -1,14 +1,15 @@
 import React from "react";
-import { userEvent, within, waitFor } from "@storybook/testing-library";
-import { fireEvent } from "@testing-library/react";
-import { BackgroundColorProvider } from "../BackgroundColorContext";
+import { userEvent, within } from "@storybook/testing-library";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import DarkContainer from "../../.storybook/components/DarkSection";
 import DxcTextInput from "./TextInput";
+import Suggestions from "./Suggestions";
+import { ThemeProvider } from "styled-components";
+import useTheme from "../useTheme";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
-  title: "Text input",
+  title: "Text Input",
   component: DxcTextInput,
 };
 
@@ -22,7 +23,7 @@ const action = {
   ),
 };
 
-const actionLargeIcon = {
+const actionLargeIconSVG = {
   onClick: () => {},
   icon: (
     <svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
@@ -32,14 +33,19 @@ const actionLargeIcon = {
   ),
 };
 
+const actionLargeIconURL = {
+  onClick: () => {},
+  icon: "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png",
+};
+
 const country = ["Afghanistan"];
 const countries = [
   "Afghanistan",
   "Albania",
   "Algeria",
-  "Andorra Andorra Andorra Andorra Andorra Andorra Andorra Andorra",
+  "Andorra",
   "Angola",
-  "Antigua and Barbuda Antigua and Barbuda Antigua and Barbuda",
+  "Antigua and Barbuda",
   "Bahamas",
   "Bahrain",
   "Bangladesh",
@@ -58,6 +64,13 @@ const countries = [
   "Djibouti",
 ];
 
+const opinionatedTheme = {
+  textInput: {
+    fontColor: "#000000",
+    hoverBorderColor: "#a46ede",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer pseudoState="pseudo-hover">
@@ -70,7 +83,15 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered action" theme="light" level={4} />
-      <DxcTextInput label="Text input" value="Text" clearable />
+      <DxcTextInput label="Text input" defaultValue="Text" clearable />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Actived action" theme="light" level={4} />
+      <DxcTextInput label="Text input" action={action} clearable />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused action" theme="light" level={4} />
+      <DxcTextInput label="Text input" action={action} clearable />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Without label" theme="light" level={4} />
@@ -82,15 +103,24 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Helper text, optional, and clearable" theme="light" level={4} />
-      <DxcTextInput label="Text input" clearable value="Text" helperText="Help message" optional />
+      <DxcTextInput label="Text input" clearable defaultValue="Text" helperText="Help message" optional />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Clearable and large icon action (SVG)" theme="light" level={4} />
+      <DxcTextInput
+        label="Text input"
+        defaultValue="Text text text text text text text text text text"
+        clearable
+        action={actionLargeIconSVG}
+      />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Clearable and large icon action" theme="light" level={4} />
+      <Title title="Clearable and large icon action (URL)" theme="light" level={4} />
       <DxcTextInput
         label="Text input"
-        value="Text text text text text text text text text text"
+        defaultValue="Text text text text text text text text text text"
         clearable
-        action={actionLargeIcon}
+        action={actionLargeIconURL}
       />
     </ExampleContainer>
     <ExampleContainer>
@@ -107,12 +137,21 @@ export const Chromatic = () => (
         label="Error text input"
         helperText="Help message"
         error="Error message."
-        value="Text"
+        defaultValue="Text"
         clearable
         optional
         action={action}
       />
     </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Invalid and hovered" theme="light" level={4} />
+      <DxcTextInput
+        label="Error text input"
+        helperText="Help message"
+        placeholder="Placeholder"
+        error="Error message."
+      />
+    </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled and placeholder" theme="light" level={4} />
       <DxcTextInput label="Disabled text input" disabled placeholder="Placeholder" />
@@ -124,7 +163,7 @@ export const Chromatic = () => (
         helperText="Help message"
         disabled
         optional
-        value="Text"
+        defaultValue="Text"
         action={action}
       />
     </ExampleContainer>
@@ -137,81 +176,49 @@ export const Chromatic = () => (
         optional
         prefix="+34"
         suffix="USD"
-        value="Text"
+        defaultValue="Text"
+        action={action}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Read only" theme="light" level={4} />
+      <DxcTextInput
+        label="Example label"
+        helperText="Help message"
+        clearable
+        readOnly
+        optional
+        prefix="+34"
+        defaultValue="Text"
+        action={action}
+      />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered read only" theme="light" level={4} />
+      <DxcTextInput
+        label="Example label"
+        helperText="Help message"
+        clearable
+        readOnly
+        optional
+        prefix="+34"
+        defaultValue="Text"
+        action={action}
+      />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Active read only" theme="light" level={4} />
+      <DxcTextInput
+        label="Example label"
+        helperText="Help message"
+        clearable
+        readOnly
+        optional
+        prefix="+34"
+        defaultValue="Text"
         action={action}
       />
     </ExampleContainer>
-    <BackgroundColorProvider color="#333333">
-      <DarkContainer>
-        <Title title="Dark" theme="dark" level={2} />
-        <ExampleContainer pseudoState="pseudo-hover">
-          <Title title="Hovered" theme="dark" level={4} />
-          <DxcTextInput label="Text input" />
-        </ExampleContainer>
-        <ExampleContainer pseudoState="pseudo-focus-within">
-          <Title title="Focused" theme="dark" level={4} />
-          <DxcTextInput label="Text input" />
-        </ExampleContainer>
-        <ExampleContainer pseudoState="pseudo-hover">
-          <Title title="Hovered action" theme="dark" level={4} />
-          <DxcTextInput label="Text input" value="Text" clearable />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Helper text, placeholder, optional and action" theme="dark" level={4} />
-          <DxcTextInput
-            label="Text input"
-            helperText="Help message"
-            placeholder="Placeholder"
-            clearable
-            optional
-            action={action}
-          />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Helper text, clearable value, error and action" theme="dark" level={4} />
-          <DxcTextInput
-            label="Text input"
-            helperText="Help message"
-            error="Error message."
-            value="Text"
-            clearable
-            action={action}
-          />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Prefix and suffix" theme="dark" level={4} />
-          <DxcTextInput label="With prefix and suffix" prefix="+34" suffix="USD" />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Disabled and placeholder" theme="dark" level={4} />
-          <DxcTextInput label="Disabled text input" disabled placeholder="Placeholder" />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Disabled, helper text, optional, value and action" theme="dark" level={4} />
-          <DxcTextInput
-            label="Disabled text input"
-            helperText="Help message"
-            disabled
-            optional
-            value="Text"
-            action={action}
-          />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Disabled with prefix and suffix" theme="dark" level={4} />
-          <DxcTextInput
-            label="Disabled text input"
-            helperText="Help message"
-            disabled
-            optional
-            prefix="+34"
-            suffix="USD"
-            value="Text"
-            action={action}
-          />
-        </ExampleContainer>
-      </DarkContainer>
-    </BackgroundColorProvider>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
@@ -258,199 +265,201 @@ export const Chromatic = () => (
       <Title title="FillParent size" theme="light" level={4} />
       <DxcTextInput label="FillParent" size="fillParent" />
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Hovered input" theme="light" level={4} />
+          <DxcTextInput label="Text input" helperText="Help message" />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-focus-within">
+          <Title title="Focused input" theme="light" level={4} />
+          <DxcTextInput label="Text input" helperText="Help message" />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Hovered action" theme="light" level={4} />
+          <DxcTextInput label="Text input" helperText="Help message" defaultValue="Text" clearable />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-active">
+          <Title title="Actived action" theme="light" level={4} />
+          <DxcTextInput label="Text input" helperText="Help message" action={action} clearable />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-focus">
+          <Title title="Focused action" theme="light" level={4} />
+          <DxcTextInput label="Text input" helperText="Help message" action={action} clearable />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Prefix" theme="light" level={4} />
+          <DxcTextInput label="With prefix" prefix="+34" helperText="Help message" />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Suffix and action" theme="light" level={4} />
+          <DxcTextInput label="With suffix" helperText="Help message" suffix="USD" action={action} />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Invalid" theme="light" level={4} />
+          <DxcTextInput
+            label="Error text input"
+            helperText="Help message"
+            error="Error message."
+            defaultValue="Text"
+            clearable
+            optional
+            action={action}
+          />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled and placeholder" theme="light" level={4} />
+          <DxcTextInput label="Disabled text input" disabled placeholder="Placeholder" prefix="+34" suffix="USD" />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled, helper text, optional, value and action" theme="light" level={4} />
+          <DxcTextInput
+            label="Disabled text input"
+            helperText="Help message"
+            disabled
+            optional
+            defaultValue="Text"
+            action={action}
+          />
+        </ExampleContainer>
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 
-const FocusedActionTextInput = () => (
-  <ExampleContainer expanded>
-    <Title title="Focused action" theme="light" level={4} />
-    <DxcTextInput label="Text input" action={action} clearable />
-  </ExampleContainer>
-);
-
-const ActivedActionTextInput = () => (
-  <ExampleContainer pseudoState="pseudo-active" expanded>
-    <Title title="Actived action" theme="light" level={4} />
-    <DxcTextInput label="Text input" action={action} clearable />
-  </ExampleContainer>
-);
-
-const ShowOptionsAutosuggest = () => (
-  <ExampleContainer expanded>
-    <Title title="Show options" theme="light" level={4} />
-    <DxcTextInput label="Text input" suggestions={countries} clearable />
-  </ExampleContainer>
-);
-
-const HoveredOptionAutosuggest = () => (
-  <ExampleContainer expanded pseudoState="pseudo-hover">
-    <Title title="Hovered option" theme="light" level={4} />
-    <DxcTextInput label="Text input" suggestions={country} clearable />
-  </ExampleContainer>
-);
-
-const FocusedOptionAutosuggest = () => (
-  <ExampleContainer expanded>
-    <Title title="Focused option" theme="light" level={4} />
-    <DxcTextInput label="Text input" suggestions={country} clearable />
-  </ExampleContainer>
-);
-
-const ActivedOptionAutosuggest = () => (
-  <ExampleContainer expanded pseudoState="pseudo-active">
-    <Title title="Actived option" theme="light" level={4} />
-    <DxcTextInput label="Text input" suggestions={country} clearable />
-  </ExampleContainer>
-);
-
-const FocusedActionTextInputOnDark = () => (
-  <BackgroundColorProvider color="#333333">
-    <DarkContainer>
-      <ExampleContainer expanded>
-        <Title title="Focused action" theme="dark" level={4} />
-        <DxcTextInput label="Text input" action={action} clearable />
-      </ExampleContainer>
-    </DarkContainer>
-  </BackgroundColorProvider>
-);
-
-const ActivedActionTextInputOnDark = () => (
-  <BackgroundColorProvider color="#333333">
-    <DarkContainer>
-      <ExampleContainer pseudoState="pseudo-active" expanded>
-        <Title title="Actived action" theme="dark" level={4} />
-        <DxcTextInput label="Text input" action={action} clearable />
-      </ExampleContainer>
-    </DarkContainer>
-  </BackgroundColorProvider>
-);
-
-const ShowOptionsAutosuggestOnDark = () => (
-  <BackgroundColorProvider color="#333333">
-    <DarkContainer>
-      <ExampleContainer expanded>
-        <Title title="Show options" theme="dark" level={4} />
-        <DxcTextInput label="Text input" suggestions={countries} clearable />
-      </ExampleContainer>
-    </DarkContainer>
-  </BackgroundColorProvider>
-);
+const AutosuggestListbox = () => {
+  const colorsTheme: any = useTheme();
 
-const HoveredActionAutosuggestOnDark = () => (
-  <BackgroundColorProvider color="#333333">
-    <DarkContainer>
-      <ExampleContainer expanded pseudoState="pseudo-hover">
-        <Title title="Hovered option" theme="dark" level={4} />
-        <DxcTextInput label="Text input" suggestions={country} clearable />
+  return (
+    <ThemeProvider theme={colorsTheme.textInput}>
+      <ExampleContainer>
+        <Title title="Autosuggest listbox" theme="light" level={2} />
+        <ExampleContainer>
+          <Title
+            title="List dialog uses a Radix Popover to appear over elements with a certain z-index"
+            theme="light"
+            level={3}
+          />
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: "20px",
+              height: "150px",
+              width: "500px",
+              marginBottom: "250px",
+              padding: "20px",
+              border: "1px solid black",
+              borderRadius: "4px",
+              overflow: "auto",
+              zIndex: "1300",
+              position: "relative",
+            }}
+          >
+            <DxcTextInput
+              label="Label"
+              suggestions={countries}
+              optional
+              placeholder="Choose an option"
+              size="fillParent"
+            />
+            <button style={{ zIndex: "1", width: "100px" }}>Submit</button>
+          </div>
+        </ExampleContainer>
+        <Title title="Listbox suggestion states" theme="light" level={3} />
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Hovered suggestion" theme="light" level={4} />
+          <Suggestions
+            id="x"
+            value=""
+            suggestions={country}
+            visualFocusIndex={-1}
+            highlightedSuggestions={false}
+            searchHasErrors={false}
+            isSearching={false}
+            suggestionOnClick={() => {}}
+            styles={{ width: 350 }}
+          />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-active">
+          <Title title="Active suggestion" theme="light" level={4} />
+          <Suggestions
+            id="x"
+            value=""
+            suggestions={country}
+            visualFocusIndex={-1}
+            highlightedSuggestions={false}
+            searchHasErrors={false}
+            isSearching={false}
+            suggestionOnClick={(suggestion) => {}}
+            styles={{ width: 350 }}
+          />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Focused suggestion" theme="light" level={4} />
+          <Suggestions
+            id="x"
+            value=""
+            suggestions={country}
+            visualFocusIndex={0}
+            highlightedSuggestions={false}
+            searchHasErrors={false}
+            isSearching={false}
+            suggestionOnClick={(suggestion) => {}}
+            styles={{ width: 350 }}
+          />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Highlighted suggestion" theme="light" level={4} />
+          <Suggestions
+            id="x"
+            value="Afgh"
+            suggestions={country}
+            visualFocusIndex={-1}
+            highlightedSuggestions={true}
+            searchHasErrors={false}
+            isSearching={false}
+            suggestionOnClick={(suggestion) => {}}
+            styles={{ width: 350 }}
+          />
+        </ExampleContainer>
       </ExampleContainer>
-    </DarkContainer>
-  </BackgroundColorProvider>
-);
-
-const FocusedOptionAutosuggestOnDark = () => (
-  <BackgroundColorProvider color="#333333">
-    <DarkContainer>
-      <ExampleContainer expanded>
-        <Title title="Focused option" theme="dark" level={4} />
-        <DxcTextInput label="Text input" suggestions={country} clearable />
+      <ExampleContainer>
+        <Title title="Autosuggest Error" theme="light" level={3} />
+        <Suggestions
+          id="x"
+          value=""
+          suggestions={country}
+          visualFocusIndex={-1}
+          highlightedSuggestions={false}
+          searchHasErrors={true}
+          isSearching={false}
+          suggestionOnClick={(suggestion) => {}}
+          styles={{ width: 350 }}
+        />
       </ExampleContainer>
-    </DarkContainer>
-  </BackgroundColorProvider>
-);
-
-const ActivedOptionAutosuggestOnDark = () => (
-  <BackgroundColorProvider color="#333333">
-    <DarkContainer>
-      <ExampleContainer expanded pseudoState="pseudo-active">
-        <Title title="Actived option" theme="dark" level={4} />
-        <DxcTextInput label="Text input" suggestions={country} clearable />
+      <ExampleContainer>
+        <Title title="Autosuggest Searching message" theme="light" level={3} />
+        <Suggestions
+          id="x"
+          value=""
+          suggestions={country}
+          visualFocusIndex={-1}
+          highlightedSuggestions={false}
+          searchHasErrors={false}
+          isSearching={true}
+          suggestionOnClick={(suggestion) => {}}
+          styles={{ width: 350 }}
+        />
       </ExampleContainer>
-    </DarkContainer>
-  </BackgroundColorProvider>
-);
-
-export const FocusedAction = FocusedActionTextInput.bind({});
-FocusedAction.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const action = canvas.getByRole("button");
-  await action.focus();
-};
-
-export const ActivedAction = ActivedActionTextInput.bind({});
-ActivedAction.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const action = canvas.getByRole("button");
-  await userEvent.click(action);
-};
-
-export const ShowOptions = ShowOptionsAutosuggest.bind({});
-ShowOptions.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const autosuggest = canvas.getByRole("combobox");
-  await userEvent.click(autosuggest);
-};
-
-export const HoveredOption = HoveredOptionAutosuggest.bind({});
-HoveredOption.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const autosuggest = canvas.getByRole("combobox");
-  await userEvent.click(autosuggest);
-};
-
-export const FocusedOption = FocusedOptionAutosuggest.bind({});
-FocusedOption.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const autosuggest = canvas.getByRole("combobox");
-  await userEvent.click(autosuggest);
-  fireEvent.keyDown(autosuggest, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
-};
-
-export const ActivedOption = ActivedOptionAutosuggest.bind({});
-ActivedOption.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const autosuggest = canvas.getByRole("combobox");
-  await userEvent.click(autosuggest);
-};
-
-export const FocusedActionOnDark = FocusedActionTextInputOnDark.bind({});
-FocusedActionOnDark.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const action = canvas.getByRole("button");
-  await action.focus();
-};
-
-export const ActivedActionOnDark = ActivedActionTextInputOnDark.bind({});
-ActivedActionOnDark.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const action = canvas.getByRole("button");
-  await userEvent.click(action);
-};
-
-export const ShowOptionsOnDark = ShowOptionsAutosuggestOnDark.bind({});
-ShowOptionsOnDark.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const autosuggest = canvas.getByRole("combobox");
-  await userEvent.click(autosuggest);
-};
-
-export const HoveredActionOnDark = HoveredActionAutosuggestOnDark.bind({});
-HoveredActionOnDark.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const autosuggest = canvas.getByRole("combobox");
-  await userEvent.click(autosuggest);
-};
-
-export const FocusedOptionOnDark = FocusedOptionAutosuggestOnDark.bind({});
-FocusedOptionOnDark.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const autosuggest = canvas.getByRole("combobox");
-  await userEvent.click(autosuggest);
-  fireEvent.keyDown(autosuggest, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
+    </ThemeProvider>
+  );
 };
 
-export const ActivedOptionOnDark = ActivedOptionAutosuggestOnDark.bind({});
-ActivedOptionOnDark.play = async ({ canvasElement }) => {
+export const AutosuggestListboxStates = AutosuggestListbox.bind({});
+AutosuggestListboxStates.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const autosuggest = canvas.getByRole("combobox");
-  await userEvent.click(autosuggest);
+  const select = canvas.getByRole("combobox");
+  await userEvent.click(select);
 };