@dxc-technology/halstack-react 0.0.0-f2bad31 → 0.0.0-f319e71

package/select/Select.accessibility.test.js

@@ -7,9 +7,20 @@ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/cl
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _Select = _interopRequireDefault(require("./Select.tsx"));
-var _Flex = _interopRequireDefault(require("../flex/Flex.tsx"));
+var _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Select = _interopRequireDefault(require("./Select"));
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+var _disabledRules = require("../../test/accessibility/rules/specific/select/disabledRules.js");
+// TODO: REMOVE
+
+var disabledRules = {
+  rules: _disabledRules.disabledRules.reduce(function (rulesObj, rule) {
+    rulesObj[rule] = {
+      enabled: false
+    };
+    return rulesObj;
+  }, {})
+};
 var iconSVG = /*#__PURE__*/_react["default"].createElement("svg", {
   xmlns: "http://www.w3.org/2000/svg",
   height: "24px",
@@ -119,7 +130,7 @@ global.ResizeObserver = /*#__PURE__*/function () {
   function ResizeObserver() {
     (0, _classCallCheck2["default"])(this, ResizeObserver);
   }
-  (0, _createClass2["default"])(ResizeObserver, [{
+  return (0, _createClass2["default"])(ResizeObserver, [{
     key: "observe",
     value: function observe() {}
   }, {
@@ -129,7 +140,6 @@ global.ResizeObserver = /*#__PURE__*/function () {
     key: "disconnect",
     value: function disconnect() {}
   }]);
-  return ResizeObserver;
 }();
 describe("Select component accessibility tests", function () {
   it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
@@ -143,7 +153,7 @@ describe("Select component accessibility tests", function () {
             helperText: "test-select-helper-text",
             placeholder: "Example text",
             options: single_options,
-            defaultValue: 1,
+            defaultValue: "1",
             margin: "medium",
             name: "Name",
             size: "medium",
@@ -162,7 +172,7 @@ describe("Select component accessibility tests", function () {
             optional: true
           }))), baseElement = _render.baseElement;
           _context.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement, disabledRules);
         case 3:
           results = _context.sent;
           expect(results).toHaveNoViolations();
@@ -204,7 +214,7 @@ describe("Select component accessibility tests", function () {
             disabled: true
           }))), baseElement = _render2.baseElement;
           _context2.next = 3;
-          return (0, _jestAxe.axe)(baseElement);
+          return (0, _axeHelper.axe)(baseElement, disabledRules);
         case 3:
           results = _context2.sent;
           expect(results).toHaveNoViolations();

package/select/Select.js

@@ -15,14 +15,13 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 var _variables = require("../common/variables");
-var _uuid = require("uuid");
 var _utils = require("../common/utils");
-var _Icons = _interopRequireDefault(require("./Icons"));
 var _Listbox = _interopRequireDefault(require("./Listbox"));
 var Popover = _interopRequireWildcard(require("@radix-ui/react-popover"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var isOptionGroup = function isOptionGroup(option) {
   return "options" in option && option.options != null;
 };
@@ -158,28 +157,27 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     size = _ref$size === void 0 ? "medium" : _ref$size,
     _ref$tabIndex = _ref.tabIndex,
     tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var _useState3 = (0, _react.useState)("select-".concat((0, _uuid.v4)())),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
-    selectId = _useState4[0];
+  var selectId = "select-".concat((0, _react.useId)());
   var selectLabelId = "label-".concat(selectId);
+  var searchableInputId = "searchable-input-".concat(selectId);
   var errorId = "error-".concat(selectId);
   var optionsListId = "".concat(selectId, "-listbox");
-  var _useState5 = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : ""),
+  var _useState3 = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : ""),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    innerValue = _useState4[0],
+    setInnerValue = _useState4[1];
+  var _useState5 = (0, _react.useState)(""),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    innerValue = _useState6[0],
-    setInnerValue = _useState6[1];
-  var _useState7 = (0, _react.useState)(""),
+    searchValue = _useState6[0],
+    setSearchValue = _useState6[1];
+  var _useState7 = (0, _react.useState)(-1),
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
-    searchValue = _useState8[0],
-    setSearchValue = _useState8[1];
-  var _useState9 = (0, _react.useState)(-1),
+    visualFocusIndex = _useState8[0],
+    changeVisualFocusIndex = _useState8[1];
+  var _useState9 = (0, _react.useState)(false),
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
-    visualFocusIndex = _useState10[0],
-    changeVisualFocusIndex = _useState10[1];
-  var _useState11 = (0, _react.useState)(false),
-    _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
-    isOpen = _useState12[0],
-    changeIsOpen = _useState12[1];
+    isOpen = _useState10[0],
+    changeIsOpen = _useState10[1];
   var selectRef = (0, _react.useRef)(null);
   var selectSearchInputRef = (0, _react.useRef)(null);
   var selectedOptionLabelRef = (0, _react.useRef)(null);
@@ -271,6 +269,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
       case "Esc":
       case "Escape":
         event.preventDefault();
+        isOpen && event.stopPropagation();
         closeOptions();
         setSearchValue("");
         break;
@@ -341,7 +340,8 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     onClick: function onClick() {
       selectRef.current.focus();
     },
-    helperText: helperText
+    helperText: helperText,
+    htmlFor: searchable ? searchableInputId : undefined
   }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, translatedLabels.formFields.optionalLabel)), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled
   }, helperText), /*#__PURE__*/_react["default"].createElement(Popover.Root, {
@@ -381,13 +381,16 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     tabIndex: -1,
     title: translatedLabels.select.actionClearSelectionTitle,
     "aria-label": translatedLabels.select.actionClearSelectionTitle
-  }, _Icons["default"].clear)), /*#__PURE__*/_react["default"].createElement(SearchableValueContainer, null, /*#__PURE__*/_react["default"].createElement(ValueInput, {
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "clear"
+  }))), /*#__PURE__*/_react["default"].createElement(SearchableValueContainer, null, /*#__PURE__*/_react["default"].createElement(ValueInput, {
     name: name,
     disabled: disabled,
     value: multiple ? ((_ref4 = value && Array.isArray(value) && value) !== null && _ref4 !== void 0 ? _ref4 : innerValue && Array.isArray(innerValue) && innerValue).join(",") : value !== null && value !== void 0 ? value : innerValue,
     readOnly: true,
     "aria-hidden": "true"
   }), searchable && /*#__PURE__*/_react["default"].createElement(SearchInput, {
+    id: searchableInputId,
     value: searchValue,
     disabled: disabled,
     onChange: handleSearchIOnChange,
@@ -400,7 +403,9 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     atBackground: (multiple ? (value !== null && value !== void 0 ? value : innerValue).length === 0 : !(value !== null && value !== void 0 ? value : innerValue)) || searchable && isOpen
   }, /*#__PURE__*/_react["default"].createElement(SelectedOptionLabel, {
     ref: selectedOptionLabelRef
-  }, getSelectedOptionLabel(placeholder, selectedOption)))), !disabled && error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, null, _Icons["default"].error), searchable && searchValue.length > 0 && /*#__PURE__*/_react["default"].createElement(ClearSearchAction, {
+  }, getSelectedOptionLabel(placeholder, selectedOption)))), !disabled && error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, null, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "filled_error"
+  })), searchable && searchValue.length > 0 && /*#__PURE__*/_react["default"].createElement(ClearSearchAction, {
     onMouseDown: function onMouseDown(event) {
       // Avoid input to lose focus
       event.preventDefault();
@@ -409,9 +414,13 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     tabIndex: -1,
     title: translatedLabels.select.actionClearSearchTitle,
     "aria-label": translatedLabels.select.actionClearSearchTitle
-  }, _Icons["default"].clear), /*#__PURE__*/_react["default"].createElement(CollapseIndicator, {
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: "clear"
+  })), /*#__PURE__*/_react["default"].createElement(CollapseIndicator, {
     disabled: disabled
-  }, isOpen ? _Icons["default"].arrowUp : _Icons["default"].arrowDown))), /*#__PURE__*/_react["default"].createElement(Popover.Portal, null, /*#__PURE__*/_react["default"].createElement(Popover.Content, {
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: isOpen ? "keyboard_arrow_up" : "keyboard_arrow_down"
+  })))), /*#__PURE__*/_react["default"].createElement(Popover.Portal, null, /*#__PURE__*/_react["default"].createElement(Popover.Content, {
     sideOffset: 4,
     style: {
       zIndex: "2147483647"
@@ -440,6 +449,7 @@ var DxcSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
     }
   })))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
     id: errorId,
+    role: "alert",
     "aria-live": error ? "assertive" : "off"
   }, error)));
 });
@@ -452,8 +462,10 @@ var sizes = {
 var calculateWidth = function calculateWidth(margin, size) {
   return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
 };
-var SelectContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+var SelectContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n\n  width: ", ";\n  ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
   return calculateWidth(props.margin, props.size);
+}, function (props) {
+  return props.size !== "fillParent" && "min-width:" + calculateWidth(props.margin, props.size);
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
 }, function (props) {
@@ -465,7 +477,7 @@ var SelectContainer = _styledComponents["default"].div(_templateObject || (_temp
 }, function (props) {
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
-var Label = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  cursor: default;\n  ", "\n"])), function (props) {
+var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n  cursor: default;\n  ", "\n"])), function (props) {
   return props.disabled ? props.theme.disabledColor : props.theme.labelFontColor;
 }, function (props) {
   return props.theme.fontFamily;
@@ -527,7 +539,7 @@ var SelectionNumber = _styledComponents["default"].span(_templateObject7 || (_te
 }, function (props) {
   return props.disabled ? "cursor: not-allowed;" : "cursor: default;";
 });
-var ClearOptionsAction = _styledComponents["default"].button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  width: 23px;\n  height: 22px;\n  border: none;\n  padding: 0.25rem;\n  ", "\n  background-color: ", ";\n  color: ", ";\n\n  :focus-visible {\n    outline: none;\n  }\n  ", "\n\n  svg {\n    line-height: 18px;\n  }\n"])), function (props) {
+var ClearOptionsAction = _styledComponents["default"].button(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  width: 23px;\n  height: 22px;\n  border: none;\n  padding: 0.25rem;\n  ", "\n  background-color: ", ";\n  color: ", ";\n\n  :focus-visible {\n    outline: none;\n  }\n  ", "\n\n  font-size:16px;\n"])), function (props) {
   return props.disabled ? "cursor: not-allowed;" : "cursor: pointer;";
 }, function (props) {
   return props.disabled ? "transparent" : props.theme.enabledSelectionIndicatorActionBackgroundColor;
@@ -561,7 +573,7 @@ var SearchInput = _styledComponents["default"].input(_templateObject13 || (_temp
 }, function (props) {
   return props.theme.valueFontWeight;
 });
-var ErrorIcon = _styledComponents["default"].span(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  padding: 3px;\n  height: 18px;\n  width: 18px;\n  margin-left: 0.25rem;\n  pointer-events: none;\n  color: ", ";\n\n  svg {\n    line-height: 18px;\n    font-size: 1.25rem;\n  }\n"])), function (props) {
+var ErrorIcon = _styledComponents["default"].span(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  padding: 3px;\n  height: 18px;\n  width: 18px;\n  margin-left: 0.25rem;\n  pointer-events: none;\n  color: ", ";\n\n  font-size: 1.25rem;\n"])), function (props) {
   return props.theme.errorIconColor;
 });
 var Error = _styledComponents["default"].span(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n  min-height: 1.5em;\n  color: ", ";\n  font-family: ", ";\n  font-size: 0.75rem;\n  font-weight: 400;\n  line-height: 1.5em;\n  margin-top: 0.25rem;\n"])), function (props) {
@@ -572,7 +584,7 @@ var Error = _styledComponents["default"].span(_templateObject15 || (_templateObj
 var CollapseIndicator = _styledComponents["default"].span(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 16px;\n  width: 16px;\n  padding: 4px;\n  margin-left: 0.25rem;\n  color: ", ";\n"])), function (props) {
   return props.disabled ? props.theme.disabledColor : props.theme.collapseIndicatorColor;
 });
-var ClearSearchAction = _styledComponents["default"].button(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 1rem;\n  font-family: ", ";\n  border: 1px solid transparent;\n  border-radius: 2px;\n  padding: 3px;\n  margin-left: 0.25rem;\n  background-color: ", ";\n  color: ", ";\n\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n  svg {\n    line-height: 18px;\n  }\n"])), function (props) {
+var ClearSearchAction = _styledComponents["default"].button(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 1rem;\n  font-family: ", ";\n  border: 1px solid transparent;\n  border-radius: 2px;\n  padding: 3px;\n  margin-left: 0.25rem;\n  background-color: ", ";\n  color: ", ";\n\n  cursor: pointer;\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    color: ", ";\n  }\n  font-size: 16px;\n"])), function (props) {
   return props.theme.fontFamily;
 }, function (props) {
   return props.theme.actionBackgroundColor;

package/select/Select.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent, within } from "@storybook/test";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DxcSelect from "./Select";
@@ -7,10 +7,23 @@ import Listbox from "./Listbox";
 import { ThemeProvider } from "styled-components";
 import useTheme from "../useTheme";
 import { HalstackProvider } from "../HalstackContext";
+import { disabledRules } from "../../test/accessibility/rules/specific/select/disabledRules";
+import preview from "../../.storybook/preview";
+import DxcFlex from "../flex/Flex";
 
 export default {
   title: "Select",
   component: DxcSelect,
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          ...disabledRules.map((ruleId) => ({ id: ruleId, reviewOnFail: true })),
+          ...preview?.parameters?.a11y?.config?.rules,
+        ],
+      },
+    },
+  },
 };
 
 const one_option = [{ label: "Option 01", value: "1" }];
@@ -65,25 +78,14 @@ const group_options = [
   },
 ];
 
-const icon_options_grouped = [
+const icon_options_grouped_material = [
   {
     label: "Group 001",
     options: [
       {
         label: "3G Mobile",
         value: "1",
-        icon: (
-          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
-            <g>
-              <path d="M0,0h24v24H0V0z" fill="none" />
-            </g>
-            <g>
-              <g>
-                <path d="M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z" />
-              </g>
-            </g>
-          </svg>
-        ),
+        icon: "3g_mobiledata",
       },
     ],
   },
@@ -93,12 +95,7 @@ const icon_options_grouped = [
       {
         label: "Ethernet",
         value: "2",
-        icon: (
-          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path d="M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z" />
-          </svg>
-        ),
+        icon: "settings_ethernet",
       },
     ],
   },
@@ -108,22 +105,12 @@ const icon_options_grouped = [
       {
         label: "Wi-fi",
         value: "3",
-        icon: (
-          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
-            <path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
-            <path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z" />
-          </svg>
-        ),
+        icon: "wifi",
       },
       {
         label: "Settings backup restore (just for previous configuration)",
         value: "4",
-        icon: (
-          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
-            <path d="M0 0h24v24H0V0z" fill="none" />
-            <path d="M14 12c0-1.1-.9-2-2-2s-2 .9-2 2 .9 2 2 2 2-.9 2-2zm-2-9c-4.97 0-9 4.03-9 9H0l4 4 4-4H5c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.51 0-2.91-.49-4.06-1.3l-1.42 1.44C8.04 20.3 9.94 21 12 21c4.97 0 9-4.03 9-9s-4.03-9-9-9z" />
-          </svg>
-        ),
+        icon: "settings_backup_restore",
       },
     ],
   },
@@ -178,70 +165,49 @@ const icon_options = [
   },
 ];
 
-const url_options = [
+const options_material = [
   {
-    label: "Social Media",
+    label: "Transport",
     options: [
       {
-        label: "Instagram",
-        value: "instagram",
-        icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/800px-Instagram_logo_2016.svg.png",
+        label: "Electric Car",
+        value: "car",
+        icon: "electric_car",
       },
       {
-        label: "X",
-        value: "x",
-        icon: "https://static.dezeen.com/uploads/2023/07/x-logo-twitter-elon-musk_dezeen_2364_col_0.jpg",
+        label: "Motorcycle",
+        value: "motorcycle",
+        icon: "Motorcycle",
       },
       {
-        label: "Facebook",
-        value: "facebook",
-        icon: (
-          <svg
-            version="1.1"
-            x="0px"
-            y="0px"
-            width="438.536px"
-            height="438.536px"
-            viewBox="0 0 438.536 438.536"
-            fill="#4267B2"
-          >
-            <g>
-              <path
-                d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
-      C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
-      h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
-      C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
-      c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
-      c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
-              />
-            </g>
-          </svg>
-        ),
+        label: "Train",
+        value: "train",
+        icon: "train",
       },
       {
-        label: "Pinterest",
-        value: "pinterest",
-        icon: "https://cdn-icons-png.flaticon.com/512/145/145808.png",
+        label: "Bike",
+        value: "bike",
+        icon: "pedal_bike",
       },
     ],
   },
   {
-    label: "Design",
+    label: "Entertainment",
     options: [
       {
-        label: "Figma",
-        value: "figma",
-        icon: "https://logowik.com/content/uploads/images/figma.jpg",
+        label: "Movie",
+        value: "movie",
+        icon: "movie",
       },
       {
-        label: "Adobe XD",
-        value: "adobexd",
-        icon: "https://cdn.worldvectorlogo.com/logos/adobe-xd-2.svg",
+        label: "Music",
+        value: "music",
+        icon: "music_note",
       },
       {
-        label: "Sketch",
-        value: "sketch",
-        icon: "https://cdn.worldvectorlogo.com/logos/sketch-2.svg",
+        label: "Games",
+        value: "games",
+        icon: "joystick",
       },
     ],
   },
@@ -340,6 +306,14 @@ const Select = () => (
       <Title title="Fillparent size" theme="light" level={4} />
       <DxcSelect label="Fillparent" options={single_options} size="fillParent" />
     </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Different sizes inside a flex" theme="light" level={4} />
+      <DxcFlex justifyContent="space-between" gap="1rem">
+        <DxcSelect label="fillParent" size="fillParent" options={single_options} />
+        <DxcSelect label="medium" size="medium" options={single_options} />
+        <DxcSelect label="large" size="large" options={single_options} />
+      </DxcFlex>
+    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="xxsmall margin" theme="light" level={4} />
@@ -473,7 +447,7 @@ const SelectListbox = () => {
         <ExampleContainer pseudoState="pseudo-hover">
           <Title title="Hovered option" theme="light" level={4} />
           <Listbox
-            id="x"
+            id="x8"
             currentValue=""
             options={one_option}
             visualFocusIndex={-1}
@@ -489,7 +463,7 @@ const SelectListbox = () => {
         <ExampleContainer pseudoState="pseudo-active">
           <Title title="Active option" theme="light" level={4} />
           <Listbox
-            id="x"
+            id="x9"
             currentValue=""
             options={one_option}
             visualFocusIndex={-1}
@@ -505,7 +479,7 @@ const SelectListbox = () => {
         <ExampleContainer>
           <Title title="Focused option" theme="light" level={4} />
           <Listbox
-            id="x"
+            id="x10"
             currentValue=""
             options={one_option}
             visualFocusIndex={0}
@@ -521,7 +495,7 @@ const SelectListbox = () => {
         <ExampleContainer pseudoState="pseudo-hover">
           <Title title="Hovered selected option" theme="light" level={4} />
           <Listbox
-            id="x"
+            id="x11"
             currentValue="1"
             options={single_options}
             visualFocusIndex={-1}
@@ -537,7 +511,7 @@ const SelectListbox = () => {
         <ExampleContainer pseudoState="pseudo-active">
           <Title title="Active selected option" theme="light" level={4} />
           <Listbox
-            id="x"
+            id="x12"
             currentValue="2"
             options={single_options}
             visualFocusIndex={0}
@@ -554,7 +528,7 @@ const SelectListbox = () => {
         <ExampleContainer>
           <Title title="Icons (SVGs)" theme="light" level={4} />
           <Listbox
-            id="x"
+            id="x13"
             currentValue="3"
             options={icon_options}
             visualFocusIndex={-1}
@@ -568,27 +542,11 @@ const SelectListbox = () => {
           />
         </ExampleContainer>
         <ExampleContainer>
-          <Title title="Icons (Images)" theme="light" level={4} />
-          <Listbox
-            id="x"
-            currentValue="facebook"
-            options={url_options}
-            visualFocusIndex={-1}
-            lastOptionIndex={6}
-            multiple={false}
-            optional={false}
-            optionalItem={{ label: "Empty", value: "" }}
-            searchable={false}
-            handleOptionOnClick={() => {}}
-            styles={{ width: 360 }}
-          />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Grouped icons (SVGs)" theme="light" level={4} />
+          <Title title="Grouped icons (Material Symbols)" theme="light" level={4} />
           <Listbox
-            id="x"
+            id="x14"
             currentValue={["0", "3"]}
-            options={icon_options_grouped}
+            options={icon_options_grouped_material}
             visualFocusIndex={-1}
             lastOptionIndex={3}
             multiple={false}
@@ -600,11 +558,11 @@ const SelectListbox = () => {
           />
         </ExampleContainer>
         <ExampleContainer>
-          <Title title="Grouped icons (Images)" theme="light" level={4} />
+          <Title title="Grouped icons (Material)" theme="light" level={4} />
           <Listbox
-            id="x"
+            id="x15"
             currentValue={["facebook", "figma"]}
-            options={url_options}
+            options={options_material}
             visualFocusIndex={-1}
             lastOptionIndex={6}
             multiple={true}
@@ -622,7 +580,7 @@ const SelectListbox = () => {
           <Title title="Hovered option" theme="light" level={4} />
           <HalstackProvider theme={opinionatedTheme}>
             <Listbox
-              id="x"
+              id="x16"
               currentValue=""
               options={one_option}
               visualFocusIndex={-1}
@@ -640,7 +598,7 @@ const SelectListbox = () => {
           <Title title="Active option" theme="light" level={4} />{" "}
           <HalstackProvider theme={opinionatedTheme}>
             <Listbox
-              id="x"
+              id="x17"
               currentValue=""
               options={one_option}
               visualFocusIndex={-1}
@@ -658,7 +616,7 @@ const SelectListbox = () => {
           <Title title="Focused option" theme="light" level={4} />{" "}
           <HalstackProvider theme={opinionatedTheme}>
             <Listbox
-              id="x"
+              id="x18"
               currentValue=""
               options={one_option}
               visualFocusIndex={0}
@@ -676,7 +634,7 @@ const SelectListbox = () => {
           <Title title="Hovered selected option" theme="light" level={4} />{" "}
           <HalstackProvider theme={opinionatedTheme}>
             <Listbox
-              id="x"
+              id="x19"
               currentValue="1"
               options={single_options}
               visualFocusIndex={-1}
@@ -694,7 +652,7 @@ const SelectListbox = () => {
           <Title title="Active selected option" theme="light" level={4} />{" "}
           <HalstackProvider theme={opinionatedTheme}>
             <Listbox
-              id="x"
+              id="x20"
               currentValue="2"
               options={single_options}
               visualFocusIndex={0}
@@ -713,7 +671,7 @@ const SelectListbox = () => {
           <Title title="Icons (SVGs)" theme="light" level={4} />{" "}
           <HalstackProvider theme={opinionatedTheme}>
             <Listbox
-              id="x"
+              id="x21"
               currentValue="3"
               options={icon_options}
               visualFocusIndex={-1}

package/select/Select.test.d.ts

@@ -0,0 +1 @@
+export {};