@dxc-technology/halstack-react 0.0.0-28a98e5 → 0.0.0-290c489

package/dropdown/Dropdown.js

@@ -9,20 +9,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _Popper = _interopRequireDefault(require("@material-ui/core/Popper"));
 
 var _MenuItem = _interopRequireDefault(require("@material-ui/core/MenuItem"));
@@ -39,7 +35,7 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
@@ -48,29 +44,26 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var DxcDropdown = function DxcDropdown(_ref) {
-  var _ref$options = _ref.options,
-      options = _ref$options === void 0 ? [] : _ref$options,
+  var options = _ref.options,
       _ref$optionsIconPosit = _ref.optionsIconPosition,
       optionsIconPosition = _ref$optionsIconPosit === void 0 ? "before" : _ref$optionsIconPosit,
       icon = _ref.icon,
-      _ref$iconSrc = _ref.iconSrc,
-      iconSrc = _ref$iconSrc === void 0 ? "" : _ref$iconSrc,
       _ref$iconPosition = _ref.iconPosition,
       iconPosition = _ref$iconPosition === void 0 ? "before" : _ref$iconPosition,
       _ref$label = _ref.label,
       label = _ref$label === void 0 ? "" : _ref$label,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$caretHidden = _ref.caretHidden,
       caretHidden = _ref$caretHidden === void 0 ? false : _ref$caretHidden,
       onSelectOption = _ref.onSelectOption,
+      _ref$expandOnHover = _ref.expandOnHover,
+      expandOnHover = _ref$expandOnHover === void 0 ? false : _ref$expandOnHover,
       margin = _ref.margin,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? "fitContent" : _ref$size,
-      _ref$expandOnHover = _ref.expandOnHover,
-      expandOnHover = _ref$expandOnHover === void 0 ? false : _ref$expandOnHover,
       _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
 
   var _useState = (0, _react.useState)(),
       _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
@@ -106,10 +99,7 @@ var DxcDropdown = function DxcDropdown(_ref) {
 
   function handleMenuItemClick(option) {
     setAnchorEl(null);
-
-    if (typeof onSelectOption === "function") {
-      onSelectOption(option.value);
-    }
+    onSelectOption(option.value);
   }
 
   function handleClose() {
@@ -148,6 +138,11 @@ var DxcDropdown = function DxcDropdown(_ref) {
     }));
   };
 
+  var labelComponent = /*#__PURE__*/_react["default"].createElement(DropdownTriggerLabel, {
+    iconPosition: iconPosition,
+    label: label
+  }, label);
+
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.dropdown
   }, /*#__PURE__*/_react["default"].createElement(DXCDropdownContainer, {
@@ -170,20 +165,14 @@ var DxcDropdown = function DxcDropdown(_ref) {
     ref: ref,
     tabIndex: tabIndex
   }, /*#__PURE__*/_react["default"].createElement(DropdownTriggerContainer, {
-    iconPosition: iconPosition,
     caretHidden: caretHidden
-  }, icon ? /*#__PURE__*/_react["default"].createElement(ButtonIconContainer, {
+  }, iconPosition === "after" && labelComponent, icon && /*#__PURE__*/_react["default"].createElement(ButtonIconContainer, {
     label: label,
     iconPosition: iconPosition,
     disabled: disabled
-  }, (0, _typeof2["default"])(icon) === "object" ? icon : /*#__PURE__*/_react["default"].createElement(icon)) : iconSrc && /*#__PURE__*/_react["default"].createElement(ButtonIcon, {
-    label: label,
-    src: iconSrc,
-    iconPosition: iconPosition
-  }), /*#__PURE__*/_react["default"].createElement(DropdownTriggerLabel, {
-    iconPosition: iconPosition,
-    label: label
-  }, label)), /*#__PURE__*/_react["default"].createElement(CaretIconContainer, {
+  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(ButtonIcon, {
+    src: icon
+  }) : icon), iconPosition === "before" && labelComponent), /*#__PURE__*/_react["default"].createElement(CaretIconContainer, {
     caretHidden: caretHidden,
     disabled: disabled
   }, !caretHidden && (anchorEl === null ? /*#__PURE__*/_react["default"].createElement(DownArrowIcon, null) : /*#__PURE__*/_react["default"].createElement(UpArrowIcon, null)))), /*#__PURE__*/_react["default"].createElement(DXCMenu, {
@@ -199,7 +188,6 @@ var DxcDropdown = function DxcDropdown(_ref) {
       vertical: "top",
       horizontal: "left"
     },
-    optionsIconPosition: optionsIconPosition,
     size: size,
     width: width,
     role: undefined,
@@ -221,14 +209,14 @@ var DxcDropdown = function DxcDropdown(_ref) {
         onClick: function onClick(event) {
           return handleMenuItemClick(option);
         }
-      }, option.icon ? /*#__PURE__*/_react["default"].createElement(ListIconContainer, {
-        label: option.label,
-        iconPosition: optionsIconPosition
-      }, (0, _typeof2["default"])(option.icon) === "object" ? option.icon : /*#__PURE__*/_react["default"].createElement(option.icon)) : option.iconSrc && /*#__PURE__*/_react["default"].createElement(ListIcon, {
+      }, optionsIconPosition === "after" && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "optionLabel"
+      }, option.label), option.icon && /*#__PURE__*/_react["default"].createElement(ListIconContainer, {
         label: option.label,
-        src: option.iconSrc,
         iconPosition: optionsIconPosition
-      }), /*#__PURE__*/_react["default"].createElement("span", {
+      }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(ListIcon, {
+        src: option.icon
+      }) : option.icon), optionsIconPosition === "before" && /*#__PURE__*/_react["default"].createElement("span", {
         className: "optionLabel"
       }, option.label));
     })))));
@@ -265,7 +253,7 @@ var DXCDropdownContainer = _styledComponents["default"].div(_templateObject || (
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
 
-var DXCMenu = (0, _styledComponents["default"])(_Popper["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 1;\n\n  .MuiMenuItem-gutters {\n    width: ", ";\n  }\n  .MuiMenuItem-root {\n    min-height: 36px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    height: auto;\n  }\n  .MuiPaper-root {\n    min-width: ", ";\n    border-width: ", ";\n    border-style: ", ";\n    border-color: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-top-left-radius: 0px;\n    border-top-right-radius: 0px;\n    max-height: 230px;\n    overflow-y: auto;\n\n    ::-webkit-scrollbar {\n      width: 3px;\n    }\n    ::-webkit-scrollbar-track {\n      background-color: ", ";\n      border-radius: 3px;\n    }\n    ::-webkit-scrollbar-thumb {\n      background-color: ", ";\n      border-radius: 3px;\n    }\n\n    .MuiList-padding {\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n    .MuiListItem-button {\n      display: flex;\n      flex-direction: ", ";\n      justify-content: ", ";\n      background-color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      font-style: ", ";\n      font-weight: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n    .MuiListItem-button:focus {\n      outline: ", " solid 2px;\n      outline-offset: -2px;\n    }\n    .MuiListItem-button:hover {\n      background-color: ", ";\n    }\n    .MuiListItem-button:active {\n      background-color: ", ";\n      outline: ", " solid 2px;\n      outline-offset: -2px;\n    }\n  }\n"])), function (props) {
+var DXCMenu = (0, _styledComponents["default"])(_Popper["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 1;\n\n  .MuiMenuItem-gutters {\n    width: ", ";\n  }\n  .MuiMenuItem-root {\n    min-height: 36px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    height: auto;\n  }\n  .MuiPaper-root {\n    min-width: ", ";\n    border-width: ", ";\n    border-style: ", ";\n    border-color: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-top-left-radius: 0px;\n    border-top-right-radius: 0px;\n    max-height: 230px;\n    overflow-y: auto;\n\n    ::-webkit-scrollbar {\n      width: 3px;\n    }\n    ::-webkit-scrollbar-track {\n      background-color: ", ";\n      border-radius: 3px;\n    }\n    ::-webkit-scrollbar-thumb {\n      background-color: ", ";\n      border-radius: 3px;\n    }\n\n    .MuiList-padding {\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n    .MuiListItem-button {\n      display: flex;\n      background-color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      font-style: ", ";\n      font-weight: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n    .MuiListItem-button:focus {\n      outline: ", " solid 2px;\n      outline-offset: -2px;\n    }\n    .MuiListItem-button:hover {\n      background-color: ", ";\n    }\n    .MuiListItem-button:active {\n      background-color: ", ";\n      outline: ", " solid 2px;\n      outline-offset: -2px;\n    }\n  }\n"])), function (props) {
   return calculateWidth(props.margin, props.size);
 }, function (props) {
   return props.theme.optionPaddingTop;
@@ -291,10 +279,6 @@ var DXCMenu = (0, _styledComponents["default"])(_Popper["default"])(_templateObj
   return props.theme.scrollBarTrackColor;
 }, function (props) {
   return props.theme.scrollBarThumbColor;
-}, function (props) {
-  return props.optionsIconPosition === "after" && "row-reverse" || "row";
-}, function (props) {
-  return props.optionsIconPosition === "after" && "flex-end" || "";
 }, function (props) {
   return props.theme.optionBackgroundColor;
 }, function (props) {
@@ -359,21 +343,11 @@ var DropdownTrigger = _styledComponents["default"].button(_templateObject3 || (_
 
 var DropdownTriggerLabel = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  text-align: left;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 
-var DropdownTriggerContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  flex-direction: ", ";\n  margin-left: 0px;\n  margin-right: 0px;\n  width: ", ";\n  white-space: nowrap;\n"])), function (props) {
-  return props.iconPosition === "after" && "row-reverse" || "row";
-}, function (props) {
+var DropdownTriggerContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-left: 0px;\n  margin-right: 0px;\n  width: ", ";\n  white-space: nowrap;\n"])), function (props) {
   return props.caretHidden ? "100%" : "calc(100% - 36px)";
 });
 
-var ButtonIcon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (props) {
-  return props.theme.buttonIconSize;
-}, function (props) {
-  return props.theme.buttonIconSize;
-}, function (props) {
-  return props.iconPosition === "after" && props.label !== "" && props.theme.buttonIconSpacing || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && props.label !== "" && props.theme.buttonIconSpacing || "0px";
-});
+var ButtonIcon = _styledComponents["default"].img(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])([""])));
 
 var ButtonIconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  color: ", ";\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.buttonIconSize;
@@ -387,15 +361,7 @@ var ButtonIconContainer = _styledComponents["default"].div(_templateObject7 || (
   return props.disabled ? props.theme.disabledColor : props.theme.buttonIconColor;
 });
 
-var ListIcon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), function (props) {
-  return props.theme.optionIconSize;
-}, function (props) {
-  return props.theme.optionIconSize;
-}, function (props) {
-  return props.iconPosition === "after" && props.label !== "" && props.theme.optionIconSpacing || "0px";
-}, function (props) {
-  return props.iconPosition === "before" && props.label !== "" && props.theme.optionIconSpacing || "0px";
-});
+var ListIcon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])([""])));
 
 var ListIconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: hidden;\n  width: ", ";\n  height: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  color: ", ";\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.theme.optionIconSize;
@@ -421,30 +387,5 @@ var CaretIconContainer = _styledComponents["default"].div(_templateObject10 || (
   return props.theme.caretIconSize;
 });
 
-DxcDropdown.propTypes = {
-  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  optionsIconPosition: _propTypes["default"].oneOf(["after", "before", ""]),
-  icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
-  iconSrc: _propTypes["default"].string,
-  iconPosition: _propTypes["default"].oneOf(["after", "before", ""]),
-  label: _propTypes["default"].string,
-  caretHidden: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  expandOnHover: _propTypes["default"].bool,
-  onSelectOption: _propTypes["default"].func,
-  options: _propTypes["default"].arrayOf(_propTypes["default"].shape({
-    value: _propTypes["default"].any.isRequired,
-    label: _propTypes["default"].any.isRequired,
-    icon: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].func]),
-    iconSrc: _propTypes["default"].string
-  })),
-  tabIndex: _propTypes["default"].number
-};
 var _default = DxcDropdown;
 exports["default"] = _default;

package/dropdown/Dropdown.stories.tsx

@@ -0,0 +1,249 @@
+import React from "react";
+import { userEvent, within } from "@storybook/testing-library";
+import DxcDropdown from "./Dropdown";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+
+export default {
+  title: "Dropdown",
+  component: DxcDropdown,
+};
+
+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">
+    <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>
+);
+
+const options: any = [
+  {
+    value: "1",
+    label: "Amazon with a very long text",
+  },
+  {
+    value: "2",
+    label: "Ebay",
+  },
+  {
+    value: "3",
+    label: "Apple",
+  },
+];
+
+const option: any = [
+  {
+    value: "1",
+    label: "Ebay",
+  },
+];
+
+const icons = [
+  iconSVG,
+  iconSVGLarge,
+  "https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png",
+];
+
+const optionsIcon: any = options.map((op, i) => ({ ...op, icon: icons[i] }));
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Default" theme="light" level={4} />
+      <DxcDropdown label="Default" options={options} onSelectOption={(value) => {}} />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <DxcDropdown label="Hovered" options={options} onSelectOption={(value) => {}} />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus-visible">
+      <Title title="Focused" theme="light" level={4} />
+      <DxcDropdown label="Focused" options={options} onSelectOption={(value) => {}} />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Actived" theme="light" level={4} />
+      <DxcDropdown label="Actived" options={options} onSelectOption={(value) => {}} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcDropdown label="Disabled" options={options} onSelectOption={(value) => {}} disabled />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Caret hidden" theme="light" level={4} />
+      <DxcDropdown label="Caret hidden" options={options} onSelectOption={(value) => {}} caretHidden />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With icon before" theme="light" level={4} />
+      <DxcDropdown label="Icon before" options={options} onSelectOption={(value) => {}} icon={iconSVG} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With icon after" theme="light" level={4} />
+      <DxcDropdown
+        label="Icon after"
+        options={options}
+        onSelectOption={(value) => {}}
+        icon="https://iconape.com/wp-content/files/yd/367773/svg/logo-linkedin-logo-icon-png-svg.png"
+        iconPosition="after"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Only icon" theme="light" level={4} />
+      <DxcDropdown options={options} onSelectOption={(value) => {}} icon={iconSVG} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large icon" theme="light" level={4} />
+      <DxcDropdown label="Large icon" options={options} onSelectOption={(value) => {}} icon={iconSVGLarge} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled with icon" theme="light" level={4} />
+      <DxcDropdown
+        label="Disabled with icon"
+        options={options}
+        onSelectOption={(value) => {}}
+        icon={iconSVG}
+        disabled
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Ellipsis" theme="light" level={4} />
+      <DxcDropdown
+        label="Very long text in dropdown button"
+        options={options}
+        onSelectOption={(value) => {}}
+        icon={iconSVG}
+        size="medium"
+      />
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall" theme="light" level={4} />
+      <DxcDropdown label="Xxsmall" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall" theme="light" level={4} />
+      <DxcDropdown label="Xsmall" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcDropdown label="Small" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcDropdown label="Medium" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcDropdown label="Large" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge" theme="light" level={4} />
+      <DxcDropdown label="Xlarge" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge" theme="light" level={4} />
+      <DxcDropdown label="Xxlarge" options={options} onSelectOption={(value) => {}} icon={iconSVG} margin="xxlarge" />
+    </ExampleContainer>
+    <Title title="Sizes" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcDropdown label="Small" options={options} onSelectOption={(value) => {}} icon={iconSVG} size="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcDropdown label="Medium" options={options} onSelectOption={(value) => {}} icon={iconSVG} size="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcDropdown label="Large" options={options} onSelectOption={(value) => {}} icon={iconSVG} size="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="FitContent" theme="light" level={4} />
+      <DxcDropdown
+        label="FitContent"
+        options={options}
+        onSelectOption={(value) => {}}
+        icon={iconSVG}
+        size="fitContent"
+      />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="FillParent" theme="light" level={4} />
+      <DxcDropdown
+        label="FillParent"
+        options={options}
+        onSelectOption={(value) => {}}
+        icon={iconSVG}
+        size="fillParent"
+      />
+    </ExampleContainer>
+  </>
+);
+
+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>
+);
+
+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 }) => {
+  const canvas = within(canvasElement);
+  await userEvent.click(canvas.getByRole("button"));
+};