Merge pull request #1245 from dxc-technology/gomezivann-dropdown-refactor

[Major] Removed Material UI dependencies from Dropdown

Author: marcialfps

docs/src/pages/components/cdk-components/dropdown/examples/darkThemeDropdown.js

@@ -3,21 +3,30 @@ import { userEvent, within } from "@storybook/testing-library";
 import DxcDropdown from "./Dropdown";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DropdownMenu from "./DropdownMenu";
+import DxcCheckbox from "../checkbox/Checkbox";
+import DxcTextInput from "../text-input/TextInput";
+import { Option } from "./types";
+
 
 export default {
   title: "Dropdown",
   component: DxcDropdown,
 };
 
+const hamburguerIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20">
+    <path d="M3 14.5V13h14v1.5Zm0-3.75v-1.5h14v1.5ZM3 7V5.5h14V7Z" />
+  </svg>
+);
 const iconSVG = (
   <svg viewBox="0 0 24 24" fill="currentColor">
     <path d="M0 0h24v24H0z" fill="none" />
     <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
   </svg>
 );
-
 const iconSVGLarge = (
-  <svg enableBackground="new 0 0 24 24" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
+  <svg enableBackground="new 0 0 24 24" height="48" viewBox="0 0 24 24" width="48" fill="currentColor">
     <g>
       <path d="M0,0h24v24H0V0z" fill="none" />
       <path d="M0,0h24v24H0V0z" fill="none" />
@@ -27,11 +36,13 @@ const iconSVGLarge = (
     </g>
   </svg>
 );
+const iconUrl = "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png";
+const icons = [iconSVG, iconSVGLarge, iconUrl];
 
-const options: any = [
+const defaultOptions: Option[] = [
   {
     value: "1",
-    label: "Amazon with a very long text",
+    label: "Amazon",
   },
   {
     value: "2",
@@ -41,19 +52,35 @@ const options: any = [
     value: "3",
     label: "Apple",
   },
+  {
+    value: "4",
+    label: "Wallapop",
+  },
+  {
+    value: "5",
+    label: "Aliexpress",
+  },
 ];
-
-const option: any = [
+const options: Option[] = [
   {
     value: "1",
+    label: "Amazon with a very long text",
+  },
+  {
+    value: "2",
     label: "Ebay",
   },
+  {
+    value: "3",
+    label: "Apple",
+  },
 ];
-
-const icons = [
-  iconSVG,
-  iconSVGLarge,
-  "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png",
+const optionWithIcon: Option[] = [
+  {
+    value: "1",
+    label: "Ebay",
+    icon: iconUrl,
+  },
 ];
 
 const optionsIcon: any = options.map((op, i) => ({ ...op, icon: icons[i] }));
@@ -68,7 +95,7 @@ export const Chromatic = () => (
       <Title title="Hovered" theme="light" level={4} />
       <DxcDropdown label="Hovered" options={options} onSelectOption={(value) => {}} />
     </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-focus-visible">
+    <ExampleContainer pseudoState="pseudo-focus">
       <Title title="Focused" theme="light" level={4} />
       <DxcDropdown label="Focused" options={options} onSelectOption={(value) => {}} />
     </ExampleContainer>
@@ -102,6 +129,10 @@ export const Chromatic = () => (
       <Title title="Only icon" theme="light" level={4} />
       <DxcDropdown options={options} onSelectOption={(value) => {}} icon={iconSVG} />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Only icon without caret" theme="light" level={4} />
+      <DxcDropdown options={options} onSelectOption={(value) => {}} icon={hamburguerIcon} caretHidden />
+    </ExampleContainer>
     <ExampleContainer>
       <Title title="Large icon" theme="light" level={4} />
       <DxcDropdown label="Large icon" options={options} onSelectOption={(value) => {}} icon={iconSVGLarge} />
@@ -191,59 +222,91 @@ export const Chromatic = () => (
   </>
 );
 
-const DropdownWithOptions = () => (
-  <ExampleContainer expanded>
-    <Title title="Options" theme="light" level={4} />
-    <DxcDropdown label="Options with icon" options={optionsIcon} onSelectOption={(value) => {}} />
-  </ExampleContainer>
-);
-
-const DropdownHoverOption = () => (
-  <ExampleContainer pseudoState="pseudo-hover" expanded>
-    <Title title="Hovered option" theme="light" level={4} />
-    <DxcDropdown label="Hovered options" options={option} onSelectOption={(value) => {}} />
-  </ExampleContainer>
-);
-
-const DropdownActiveOption = () => (
-  <ExampleContainer pseudoState="pseudo-active" expanded>
-    <Title title="Actived option" theme="light" level={4} />
-    <DxcDropdown label="Actived options" options={option} onSelectOption={(value) => {}} />
-  </ExampleContainer>
-);
-
-const DropdownWithOptionsIconAfter = () => (
-  <ExampleContainer expanded>
-    <Title title="Icon after options" theme="light" level={4} />
-    <DxcDropdown
-      label="Icon after options"
-      options={optionsIcon}
-      onSelectOption={(value) => {}}
-      optionsIconPosition="after"
-    />
-  </ExampleContainer>
+const DropdownListStates = () => (
+  <>
+    <Title title="Dropdown Menu" theme="light" level={2} />
+    <Title title="Default with opened menu" theme="light" level={3} />
+    <ExampleContainer>
+      <div style={{ display: "flex", gap: "30px", flexDirection: "column", marginBottom: "80px" }}>
+        <DxcDropdown label="Select a platform" options={defaultOptions} onSelectOption={(option) => {}} size="medium" />
+        <DxcTextInput label="Your name" onChange={() => {}} />
+        <DxcCheckbox
+          label="You understand the selection and give your consent"
+          onChange={() => {}}
+          labelPosition="after"
+        />
+      </div>
+    </ExampleContainer>
+    <Title title="Option states" theme="light" level={3} />
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered option" theme="light" level={4} />
+      <DropdownMenu
+        id="x"
+        dropdownId="dX"
+        iconsPosition="before"
+        visualFocusIndex={-1}
+        optionOnClick={(option) => {}}
+        onKeyDown={(e) => {}}
+        options={optionWithIcon}
+        styles={{ width: 240 }}
+      />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Active option" theme="light" level={4} />
+      <DropdownMenu
+        id="x"
+        dropdownId="dX"
+        iconsPosition="before"
+        visualFocusIndex={-1}
+        optionOnClick={(option) => {}}
+        onKeyDown={(e) => {}}
+        options={optionWithIcon}
+        styles={{ width: 240 }}
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Focused option" theme="light" level={4} />
+      <DropdownMenu
+        id="x"
+        dropdownId="dX"
+        iconsPosition="before"
+        visualFocusIndex={0}
+        optionOnClick={(option) => {}}
+        onKeyDown={(e) => {}}
+        options={options}
+        styles={{ width: 240 }}
+      />
+    </ExampleContainer>
+    <Title title="Icons" theme="light" level={3} />
+    <ExampleContainer>
+      <Title title="Before" theme="light" level={4} />
+      <DropdownMenu
+        id="x"
+        dropdownId="dX"
+        iconsPosition="before"
+        visualFocusIndex={-1}
+        optionOnClick={(option) => {}}
+        onKeyDown={(e) => {}}
+        options={optionsIcon}
+        styles={{ width: 240 }}
+      />
+      <Title title="After" theme="light" level={4} />
+      <DropdownMenu
+        id="x"
+        dropdownId="dX"
+        iconsPosition="after"
+        visualFocusIndex={-1}
+        optionOnClick={(option) => {}}
+        onKeyDown={(e) => {}}
+        options={optionsIcon}
+        styles={{ width: 240 }}
+      />
+    </ExampleContainer>
+  </>
 );
 
-export const DropdownOptions = DropdownWithOptions.bind({});
-DropdownOptions.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole("button"));
-};
-
-export const DropdownHoveredOption = DropdownHoverOption.bind({});
-DropdownHoveredOption.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole("button"));
-};
-
-export const DropdownActivedOption = DropdownActiveOption.bind({});
-DropdownActivedOption.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await userEvent.click(canvas.getByRole("button"));
-};
-
-export const DropdownOptionsIconAfter = DropdownWithOptionsIconAfter.bind({});
-DropdownOptionsIconAfter.play = async ({ canvasElement }) => {
+export const DropdownMenuStates = DropdownListStates.bind({});
+DropdownMenuStates.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.click(canvas.getByRole("button"));
 };