@dxc-technology/halstack-react 0.0.0-61a8ced → 0.0.0-62702b8

package/text-input/TextInput.stories.tsx

@@ -1,10 +1,17 @@
 import React from "react";
-import { userEvent, within, fireEvent } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/testing-library";
 import { BackgroundColorProvider } from "../BackgroundColorContext";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DarkContainer from "../../.storybook/components/DarkSection";
 import DxcTextInput from "./TextInput";
+import DxcButton from "../button/Button";
+import DxcCheckbox from "../checkbox/Checkbox";
+import DxcFlex from "../flex/Flex";
+import Suggestions from "./Suggestions";
+import { ThemeProvider } from "styled-components";
+import useTheme from "../useTheme";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Text input",
@@ -21,7 +28,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">
@@ -31,6 +38,11 @@ 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",
@@ -55,8 +67,16 @@ const countries = [
   "Dominica",
   "Denmark",
   "Djibouti",
+  "*",
 ];
 
+const opinionatedTheme = {
+  textInput: {
+    fontColor: "#000000",
+    hoverBorderColor: "#a46ede",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer pseudoState="pseudo-hover">
@@ -71,6 +91,14 @@ export const Chromatic = () => (
       <Title title="Hovered action" theme="light" level={4} />
       <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} />
       <DxcTextInput />
@@ -84,12 +112,21 @@ export const Chromatic = () => (
       <DxcTextInput label="Text input" clearable defaultValue="Text" helperText="Help message" optional />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Clearable and large icon action" theme="light" level={4} />
+      <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={actionLargeIcon}
+        action={actionLargeIconSVG}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Clearable and large icon action (URL)" theme="light" level={4} />
+      <DxcTextInput
+        label="Text input"
+        defaultValue="Text text text text text text text text text text"
+        clearable
+        action={actionLargeIconURL}
       />
     </ExampleContainer>
     <ExampleContainer>
@@ -149,9 +186,48 @@ export const Chromatic = () => (
         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} />
+        <Title title="Dark theme" theme="dark" level={2} />
         <ExampleContainer pseudoState="pseudo-hover">
           <Title title="Hovered" theme="dark" level={4} />
           <DxcTextInput label="Text input" />
@@ -164,6 +240,14 @@ export const Chromatic = () => (
           <Title title="Hovered action" theme="dark" level={4} />
           <DxcTextInput label="Text input" defaultValue="Text" clearable />
         </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-active">
+          <Title title="Actived action" theme="dark" level={4} />
+          <DxcTextInput label="Text input" action={action} clearable />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-focus">
+          <Title title="Focused action" theme="dark" level={4} />
+          <DxcTextInput label="Text input" action={action} clearable />
+        </ExampleContainer>
         <ExampleContainer>
           <Title title="Helper text, placeholder, optional and action" theme="dark" level={4} />
           <DxcTextInput
@@ -275,199 +359,250 @@ 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 AutosuggestListbox = () => {
+  const colorsTheme: any = useTheme();
 
-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 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={() => {}}
+            getTextInputWidth={() => 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) => {}}
+            getTextInputWidth={() => 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) => {}}
+            getTextInputWidth={() => 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) => {}}
+            getTextInputWidth={() => 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) => {}}
+          getTextInputWidth={() => 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) => {}}
+          getTextInputWidth={() => 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);
+    </ThemeProvider>
+  );
 };
 
-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);
-};
+const DarkAutosuggestListbox = () => {
+  const colorsTheme: any = useTheme();
 
-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);
+  return (
+    <ThemeProvider theme={colorsTheme.textInput}>
+      <BackgroundColorProvider color="#333333">
+        <DarkContainer>
+          <Title title="Dark theme" theme="dark" level={2} />
+          <ExampleContainer>
+            <Title title="Default with opened suggestions" theme="dark" level={3} />
+            <DxcFlex direction="column" gap="5rem">
+              <DxcTextInput label="Label" suggestions={countries} optional placeholder="Choose an option" />
+              <DxcCheckbox
+                label="You understand the selection and give your consent"
+                onChange={() => {}}
+                labelPosition="after"
+              />
+              <DxcButton label="Submit" onClick={() => {}} size="medium" margin={{ bottom: "xxlarge" }} />
+            </DxcFlex>
+          </ExampleContainer>
+          <ExampleContainer>
+            <Title title="Autosuggest Error" theme="dark" level={3} />
+            <div style={{ height: "100px" }}>
+              <Suggestions
+                id="x"
+                value=""
+                suggestions={country}
+                visualFocusIndex={-1}
+                highlightedSuggestions={false}
+                searchHasErrors={true}
+                isSearching={false}
+                suggestionOnClick={(suggestion) => {}}
+                getTextInputWidth={() => 350}
+              />
+            </div>
+          </ExampleContainer>
+        </DarkContainer>
+      </BackgroundColorProvider>
+    </ThemeProvider>
+  );
 };
 
-export const FocusedOptionOnDark = FocusedOptionAutosuggestOnDark.bind({});
-FocusedOptionOnDark.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);
-  fireEvent.keyDown(autosuggest, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
+  const select = canvas.getByRole("combobox");
+  await userEvent.click(select);
 };
 
-export const ActivedOptionOnDark = ActivedOptionAutosuggestOnDark.bind({});
-ActivedOptionOnDark.play = async ({ canvasElement }) => {
+export const AutosuggestListboxOnDark = DarkAutosuggestListbox.bind({});
+AutosuggestListboxOnDark.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);
 };