@dxc-technology/halstack-react 0.0.0-5aa300b → 0.0.0-5b43b04

package/date-input/types.d.ts

@@ -132,16 +132,10 @@ export declare type CalendarPropsType = {
      * Function called when a date is selected.
      */
     onDaySelect: (date: Dayjs) => void;
-};
-export declare type MonthPickerPropsType = {
     /**
-     * Initial selected date value. If invalid the actual date will be used instead.
+     * Current date
      */
-    selectedDate: Dayjs;
-    /**
-     * Function called when a month is selected.
-     */
-    onMonthSelect: (month: number) => void;
+    today: Dayjs;
 };
 export declare type YearPickerPropsType = {
     /**
@@ -152,6 +146,10 @@ export declare type YearPickerPropsType = {
      * Function called when a year is selected.
      */
     onYearSelect: (year: number) => void;
+    /**
+     * Current date
+     */
+    today: Dayjs;
 };
 /**
  * Reference to the component.

package/dialog/Dialog.js

@@ -102,10 +102,8 @@ var BodyStyle = (0, _styledComponents.createGlobalStyle)(_templateObject || (_te
 
 var DialogContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: fixed;\n  inset: 0px;\n  height: 100%;\n  z-index: 1300;\n"])));
 
-var Overlay = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  inset: 0px;\n  height: 100%;\n  background-color: ", ";\n  opacity: ", ";\n"])), function (props) {
+var Overlay = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  inset: 0px;\n  height: 100%;\n  background-color: ", ";\n"])), function (props) {
   return props.theme.overlayColor;
-}, function (props) {
-  return props.theme.overlayOpacity;
 });
 
 var Dialog = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  z-index: 1300;\n  background-color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  ", "\n  box-sizing: border-box;\n  box-shadow: ", ";\n  border-radius: 4px;\n  position: relative;\n\n  @media (min-width: ", "rem) {\n    max-width: 80%;\n    min-width: 800px;\n  }\n\n  @media (max-width: ", "rem) {\n    //mobile phones\n    max-width: 92%;\n    min-width: 92%;\n  }\n"])), function (props) {

package/dialog/Dialog.stories.tsx

@@ -6,18 +6,26 @@ import DxcFlex from "../flex/Flex";
 import DxcInset from "../inset/Inset";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Dialog ",
   component: DxcDialog,
 };
 
+const opinionatedTheme = {
+  dialog: {
+    baseColor: "#ffffff",
+    closeIconColor: "#000000",
+    overlayColor: "#000000b3",
+  },
+};
+
 export const DefaultDialog = () => (
   <>
     <ExampleContainer expanded={true}>
       <Title title="Default dialog" theme="light" level={4} />
       <DxcDialog>
-        {" "}
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
           placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -28,12 +36,35 @@ export const DefaultDialog = () => (
           fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
           augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
           dignissim, pharetra neque molestie, molestie lectus.
-        </p>{" "}
+        </p>
       </DxcDialog>
     </ExampleContainer>
   </>
 );
 
+export const DefaultDialogOpinionated = () => (
+  <>
+    <ExampleContainer expanded={true}>
+      <Title title="Default dialog" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDialog>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
+            placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
+            elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
+            tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
+            eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue
+            gravida enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare,
+            malesuada urna eu, fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam
+            sit amet maximus augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo.
+            Praesent quis nunc dignissim, pharetra neque molestie, molestie lectus.
+          </p>
+        </DxcDialog>
+      </HalstackProvider>
+    </ExampleContainer>
+  </>
+);
+
 export const DialogWithInputs = () => (
   <>
     <ExampleContainer expanded={true}>
@@ -82,7 +113,6 @@ export const DialogWithoutOverlay = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog Without Overlay" theme="light" level={4} />
     <DxcDialog overlay={false}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -93,7 +123,7 @@ export const DialogWithoutOverlay = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -102,7 +132,6 @@ export const DialogCloseVisibleFalse = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog Close Visible" theme="dark" level={4} />
     <DxcDialog isCloseVisible={false}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -113,7 +142,7 @@ export const DialogCloseVisibleFalse = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -122,7 +151,6 @@ export const DialogWithXxsmallPadding = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog With Xxsmall Padding" theme="light" level={4} />
     <DxcDialog padding={"xxsmall"}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -133,7 +161,7 @@ export const DialogWithXxsmallPadding = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -142,7 +170,6 @@ export const DialogWithXsmallPadding = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog With Xsmall Padding" theme="light" level={4} />
     <DxcDialog padding={"xsmall"}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -153,7 +180,7 @@ export const DialogWithXsmallPadding = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -162,7 +189,6 @@ export const DialogWithSmallPadding = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog With Small Padding" theme="light" level={4} />
     <DxcDialog padding={"small"}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -173,7 +199,7 @@ export const DialogWithSmallPadding = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -182,7 +208,6 @@ export const DialogWithMediumPadding = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog With Medium Padding" theme="light" level={4} />
     <DxcDialog padding={"medium"}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -193,7 +218,7 @@ export const DialogWithMediumPadding = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -202,7 +227,6 @@ export const DialogWithLargePadding = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog With Large Padding" theme="light" level={4} />
     <DxcDialog padding={"large"}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -213,7 +237,7 @@ export const DialogWithLargePadding = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -222,7 +246,6 @@ export const DialogWithXlargePadding = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog With Xlarge Padding" theme="light" level={4} />
     <DxcDialog padding={"xlarge"}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -233,7 +256,7 @@ export const DialogWithXlargePadding = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );
@@ -242,7 +265,6 @@ export const DialogWithXxlargePadding = () => (
   <ExampleContainer expanded={true}>
     <Title title="Dialog With Xxlarge Padding" theme="light" level={4} />
     <DxcDialog padding={"xxlarge"}>
-      {" "}
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
         placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
@@ -253,7 +275,7 @@ export const DialogWithXxlargePadding = () => (
         fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
         augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
         dignissim, pharetra neque molestie, molestie lectus.
-      </p>{" "}
+      </p>
     </DxcDialog>
   </ExampleContainer>
 );

package/dropdown/Dropdown.js

@@ -258,7 +258,6 @@ var DxcDropdown = function DxcDropdown(_ref) {
     asChild: true,
     type: undefined
   }, /*#__PURE__*/_react["default"].createElement(DropdownTrigger, {
-    opened: isOpen,
     onClick: handleTriggerOnClick,
     onKeyDown: handleTriggerOnKeyDown,
     onBlur: function onBlur(event) {

package/dropdown/Dropdown.stories.tsx

@@ -4,9 +4,11 @@ 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";
+import useTheme from "../useTheme";
+import DxcFlex from "../flex/Flex";
+import { HalstackProvider } from "../HalstackContext";
+import { ThemeProvider } from "styled-components";
 
 export default {
   title: "Dropdown",
@@ -19,20 +21,14 @@ const hamburguerIcon = (
   </svg>
 );
 const iconSVG = (
-  <svg viewBox="0 0 24 24" fill="currentColor">
+  <svg viewBox="0 0 24 24" height="24" width="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="48" viewBox="0 0 24 24" width="48" fill="currentColor">
-    <g>
-      <path d="M0,0h24v24H0V0z" fill="none" />
-      <path d="M0,0h24v24H0V0z" fill="none" />
-    </g>
-    <g>
-      <path d="M12,17.27L18.18,21l-1.64-7.03L22,9.24l-7.19-0.61L12,2L9.19,8.63L2,9.24l5.46,4.73L5.82,21L12,17.27z" />
-    </g>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" height="48" width="48">
+    <path d="M11 44q-1.2 0-2.1-.9Q8 42.2 8 41V15q0-1.2.9-2.1.9-.9 2.1-.9h5.5v-.5q0-3.15 2.175-5.325Q20.85 4 24 4q3.15 0 5.325 2.175Q31.5 8.35 31.5 11.5v.5H37q1.2 0 2.1.9.9.9.9 2.1v26q0 1.2-.9 2.1-.9.9-2.1.9Zm0-3h26V15h-5.5v4.5q0 .65-.425 1.075Q30.65 21 30 21q-.65 0-1.075-.425-.425-.425-.425-1.075V15h-9v4.5q0 .65-.425 1.075Q18.65 21 18 21q-.65 0-1.075-.425-.425-.425-.425-1.075V15H11v26Zm8.5-29h9v-.5q0-1.9-1.3-3.2Q25.9 7 24 7q-1.9 0-3.2 1.3-1.3 1.3-1.3 3.2ZM11 41V15v26Z" />
   </svg>
 );
 const iconUrl = "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png";
@@ -59,6 +55,18 @@ const defaultOptions: Option[] = [
     value: "5",
     label: "Aliexpress",
   },
+  {
+    value: "6",
+    label: "Etsy",
+  },
+  {
+    value: "7",
+    label: "Alibaba",
+  },
+  {
+    value: "8",
+    label: "Gearbest shop",
+  },
 ];
 const options: Option[] = [
   {
@@ -84,7 +92,15 @@ const optionWithIcon: Option[] = [
 
 const optionsIcon: any = options.map((op, i) => ({ ...op, icon: icons[i] }));
 
-export const Chromatic = () => (
+const opinionatedTheme = {
+  dropdown: {
+    baseColor: "#ffffff",
+    fontColor: "#000000",
+    optionFontColor: "#000000",
+  },
+};
+
+const Dropdown = () => (
   <>
     <ExampleContainer>
       <Title title="Default" theme="light" level={4} />
@@ -227,94 +243,196 @@ export const Chromatic = () => (
         size="fillParent"
       />
     </ExampleContainer>
+    <ExampleContainer expanded>
+      <Title title="Opened menu" theme="light" level={4} />
+      <DxcDropdown label="Label" options={options} onSelectOption={(value) => {}} margin={{ top: "xxlarge" }} />
+    </ExampleContainer>
   </>
 );
 
-const DropdownListStates = () => (
+const DropdownListStates = () => {
+  const colorsTheme: any = useTheme();
+
+  return (
+    <>
+      <Title title="Dropdown Menu" 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={{
+            position: "relative",
+            display: "flex",
+            flexDirection: "column",
+            gap: "20px",
+            height: "150px",
+            width: "min-content",
+            marginBottom: "100px",
+            padding: "20px",
+            border: "1px solid black",
+            borderRadius: "4px",
+            overflow: "auto",
+            zIndex: "1300",
+          }}
+        >
+          <DxcDropdown
+            label="Select a platform"
+            options={defaultOptions}
+            onSelectOption={(option) => {}}
+            size="medium"
+          />
+          <button style={{ zIndex: "1", width: "100px" }}>Submit</button>
+        </div>
+      </ExampleContainer>
+      <ThemeProvider theme={colorsTheme.dropdown}>
+        <Title title="Option states" theme="light" level={3} />
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Hovered option" theme="light" level={4} />
+          <DropdownMenu
+            id="x"
+            dropdownTriggerId="dtx"
+            iconsPosition="before"
+            visualFocusIndex={-1}
+            menuItemOnClick={(value) => {}}
+            onKeyDown={(e) => {}}
+            options={optionWithIcon}
+            styles={{ width: 240 }}
+          />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-active">
+          <Title title="Active option" theme="light" level={4} />
+          <DropdownMenu
+            id="x"
+            dropdownTriggerId="dtx"
+            iconsPosition="before"
+            visualFocusIndex={-1}
+            menuItemOnClick={(value) => {}}
+            onKeyDown={(e) => {}}
+            options={optionWithIcon}
+            styles={{ width: 240 }}
+          />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Focused option" theme="light" level={4} />
+          <DropdownMenu
+            id="x"
+            dropdownTriggerId="dtx"
+            iconsPosition="before"
+            visualFocusIndex={0}
+            menuItemOnClick={(value) => {}}
+            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"
+            dropdownTriggerId="dtx"
+            iconsPosition="before"
+            visualFocusIndex={-1}
+            menuItemOnClick={(value) => {}}
+            onKeyDown={(e) => {}}
+            options={optionsIcon}
+            styles={{ width: 240 }}
+          />
+          <Title title="After" theme="light" level={4} />
+          <DropdownMenu
+            id="x"
+            dropdownTriggerId="dtx"
+            iconsPosition="after"
+            visualFocusIndex={-1}
+            menuItemOnClick={(value) => {}}
+            onKeyDown={(e) => {}}
+            options={optionsIcon}
+            styles={{ width: 240 }}
+          />
+        </ExampleContainer>
+      </ThemeProvider>
+    </>
+  );
+};
+
+const DropdownRightAlignment = () => (
+  <ExampleContainer expanded>
+    <Title title="Dropdown collisions on the right boundary (right)" theme="light" level={4} />
+    <DxcFlex justifyContent="flex-end">
+      <DxcDropdown label="Label" options={options} onSelectOption={(value) => {}} />
+    </DxcFlex>
+  </ExampleContainer>
+);
+
+const DropdownCenterAlignment = () => (
+  <ExampleContainer expanded>
+    <Title title="Dropdown collisions on the right boundary (centered)" theme="light" level={4} />
+    <DxcFlex justifyContent="flex-end">
+      <DxcDropdown label="Label" options={defaultOptions} onSelectOption={(value) => {}} margin="small" />
+    </DxcFlex>
+  </ExampleContainer>
+);
+
+export const Chromatic = Dropdown.bind({});
+Chromatic.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const buttonList = canvas.getAllByRole("button");
+  await userEvent.click(buttonList[buttonList.length - 1]);
+};
+
+export const OpinionatedTheme = () => (
   <>
-    <Title title="Dropdown Menu" theme="light" level={2} />
-    <Title title="Default with opened menu" theme="light" level={3} />
+    <Title title="Opinionated theme" theme="light" level={2} />
     <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>
+      <Title title="Default" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDropdown label="Default" options={options} onSelectOption={(value) => {}} icon={iconSVG} />
+      </HalstackProvider>
     </ExampleContainer>
-    <Title title="Option states" theme="light" level={3} />
     <ExampleContainer pseudoState="pseudo-hover">
-      <Title title="Hovered option" theme="light" level={4} />
-      <DropdownMenu
-        id="x"
-        dropdownTriggerId="dtx"
-        iconsPosition="before"
-        visualFocusIndex={-1}
-        menuItemOnClick={(value) => {}}
-        onKeyDown={(e) => {}}
-        options={optionWithIcon}
-        styles={{ width: 240 }}
-      />
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDropdown label="Hovered" options={options} onSelectOption={(value) => {}} icon={iconSVG} />
+      </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
-      <Title title="Active option" theme="light" level={4} />
-      <DropdownMenu
-        id="x"
-        dropdownTriggerId="dtx"
-        iconsPosition="before"
-        visualFocusIndex={-1}
-        menuItemOnClick={(value) => {}}
-        onKeyDown={(e) => {}}
-        options={optionWithIcon}
-        styles={{ width: 240 }}
-      />
+      <Title title="Actived" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDropdown label="Actived" options={options} onSelectOption={(value) => {}} icon={iconSVG} />
+      </HalstackProvider>
     </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Focused option" theme="light" level={4} />
-      <DropdownMenu
-        id="x"
-        dropdownTriggerId="dtx"
-        iconsPosition="before"
-        visualFocusIndex={0}
-        menuItemOnClick={(value) => {}}
-        onKeyDown={(e) => {}}
-        options={options}
-        styles={{ width: 240 }}
-      />
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDropdown label="Focused" options={options} onSelectOption={(value) => {}} icon={iconSVG} />
+      </HalstackProvider>
     </ExampleContainer>
-    <Title title="Icons" theme="light" level={3} />
     <ExampleContainer>
-      <Title title="Before" theme="light" level={4} />
-      <DropdownMenu
-        id="x"
-        dropdownTriggerId="dtx"
-        iconsPosition="before"
-        visualFocusIndex={-1}
-        menuItemOnClick={(value) => {}}
-        onKeyDown={(e) => {}}
-        options={optionsIcon}
-        styles={{ width: 240 }}
-      />
-      <Title title="After" theme="light" level={4} />
-      <DropdownMenu
-        id="x"
-        dropdownTriggerId="dtx"
-        iconsPosition="after"
-        visualFocusIndex={-1}
-        menuItemOnClick={(value) => {}}
-        onKeyDown={(e) => {}}
-        options={optionsIcon}
-        styles={{ width: 240 }}
-      />
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcDropdown label="Disabled" options={options} onSelectOption={(value) => {}} icon={iconSVG} disabled />
+      </HalstackProvider>
     </ExampleContainer>
   </>
 );
 
 export const DropdownMenuStates = DropdownListStates.bind({});
 DropdownMenuStates.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getAllByRole("button")[0]);
+};
+
+export const DropdownMenuAlignedRight = DropdownRightAlignment.bind({});
+DropdownMenuAlignedRight.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole("button"));
+};
+
+export const DropdownMenuAlignedCenter = DropdownCenterAlignment.bind({});
+DropdownMenuAlignedCenter.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.click(canvas.getByRole("button"));
 };