@dxc-technology/halstack-react 0.0.0-f54247d → 0.0.0-f6d6be5

package/toggle-group/ToggleGroup.js

@@ -21,11 +21,15 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _uuid = require("uuid");
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
+
+var _Flex = _interopRequireDefault(require("../flex/Flex"));
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -45,16 +49,18 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
       multiple = _ref$multiple === void 0 ? false : _ref$multiple,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var colorsTheme = (0, _useTheme["default"])();
 
-  var _useState = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : -1),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      selectedValue = _useState2[0],
-      setSelectedValue = _useState2[1];
+  var _useState = (0, _react.useState)("label-toggle-group-".concat((0, _uuid.v4)())),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 1),
+      toggleGroupLabelId = _useState2[0];
 
-  var _useState3 = (0, _react.useState)("toggle-group-".concat((0, _uuid.v4)())),
-      _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
-      toggleGroupId = _useState4[0];
+  var _useState3 = (0, _react.useState)(defaultValue !== null && defaultValue !== void 0 ? defaultValue : multiple ? [] : -1),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      selectedValue = _useState4[0],
+      setSelectedValue = _useState4[1];
+
+  var colorsTheme = (0, _useTheme["default"])();
+  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
 
   var handleToggleChange = function handleToggleChange(selectedOption) {
     var newSelectedOptions;
@@ -89,51 +95,67 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
     onChange === null || onChange === void 0 ? void 0 : onChange(multiple ? newSelectedOptions : selectedOption);
   };
 
-  var handleKeyPress = function handleKeyPress(event, optionValue) {
-    event.preventDefault();
-    if (!disabled && (event.nativeEvent.code === "Enter" || event.nativeEvent.code === "Space")) handleToggleChange(optionValue);
+  var handleOnKeyDown = function handleOnKeyDown(event, optionValue) {
+    switch (event.key) {
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        handleToggleChange(optionValue);
+    }
   };
 
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.toggleGroup
   }, /*#__PURE__*/_react["default"].createElement(ToggleGroup, {
-    margin: margin,
-    disabled: disabled
+    margin: margin
   }, /*#__PURE__*/_react["default"].createElement(Label, {
-    htmlFor: toggleGroupId,
+    id: toggleGroupLabelId,
     disabled: disabled
   }, label), /*#__PURE__*/_react["default"].createElement(HelperText, {
     disabled: disabled
   }, helperText), /*#__PURE__*/_react["default"].createElement(OptionsContainer, {
-    id: toggleGroupId,
-    role: multiple ? "group" : "radiogroup"
+    "aria-labelledby": toggleGroupLabelId
   }, options.map(function (option, i) {
-    return /*#__PURE__*/_react["default"].createElement(ToggleContainer, {
-      selected: multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
-      role: multiple ? "switch" : "radio",
-      "aria-checked": multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
-      tabIndex: !disabled ? tabIndex : -1,
+    return /*#__PURE__*/_react["default"].createElement(ToggleButton, {
+      key: "toggle-".concat(i, "-").concat(option.label),
+      "aria-label": option.title,
+      "aria-pressed": multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
+      disabled: disabled,
       onClick: function onClick() {
-        return !disabled && handleToggleChange(option.value);
+        handleToggleChange(option.value);
       },
-      isFirst: i === 0,
-      isLast: i === options.length - 1,
-      isIcon: option.icon,
-      optionLabel: option.label,
-      disabled: disabled,
-      onKeyPress: function onKeyPress(event) {
-        handleKeyPress(event, option.value);
+      onKeyDown: function onKeyDown(event) {
+        handleOnKeyDown(event, option.value);
       },
-      key: "toggle-".concat(i, "-").concat(option.label)
-    }, /*#__PURE__*/_react["default"].createElement(OptionContent, null, option.icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
+      tabIndex: !disabled ? tabIndex : -1,
+      title: option.title,
+      backgroundType: backgroundType,
+      hasIcon: option.icon,
+      optionLabel: option.label,
+      selected: multiple ? value ? Array.isArray(value) && value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue
+    }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
+      alignItems: "center"
+    }, option.icon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
       optionLabel: option.label
-    }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(Icon, {
+    }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
       src: option.icon
     }) : option.icon), option.label && /*#__PURE__*/_react["default"].createElement(LabelContainer, null, option.label)));
   }))));
 };
 
-var Label = _styledComponents["default"].label(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
+var ToggleGroup = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  flex-direction: column;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
+}, function (props) {
+  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
+});
+
+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"])), function (props) {
   return props.disabled ? props.theme.disabledLabelFontColor : props.theme.labelFontColor;
 }, function (props) {
   return props.theme.labelFontFamily;
@@ -147,7 +169,7 @@ var Label = _styledComponents["default"].label(_templateObject || (_templateObje
   return props.theme.labelLineHeight;
 });
 
-var HelperText = _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"])), function (props) {
+var HelperText = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  line-height: ", ";\n"])), function (props) {
   return props.disabled ? props.theme.disabledHelperTextFontcolor : props.theme.helperTextFontColor;
 }, function (props) {
   return props.theme.helperTextFontFamily;
@@ -161,19 +183,7 @@ var HelperText = _styledComponents["default"].span(_templateObject2 || (_templat
   return props.theme.helperTextLineHeight;
 });
 
-var ToggleGroup = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  flex-direction: column;\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
-}, function (props) {
-  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
-});
-
-var OptionsContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  width: max-content;\n  opacity: 1;\n  height: calc(48px - 4px - 4px);\n  border-width: ", ";\n  border-style: ", ";\n  border-radius: ", ";\n  border-color: ", ";\n  background-color: ", ";\n  padding: 4px;\n  margin-top: ", ";\n"])), function (props) {
+var OptionsContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  gap: 0.25rem;\n  width: max-content;\n  height: calc(48px - 4px - 4px);\n  padding: 0.25rem;\n  border-width: ", ";\n  border-style: ", ";\n  border-radius: ", ";\n  border-color: ", ";\n  margin-top: ", ";\n  background-color: ", ";\n"])), function (props) {
   return props.theme.containerBorderThickness;
 }, function (props) {
   return props.theme.containerBorderStyle;
@@ -181,16 +191,36 @@ var OptionsContainer = _styledComponents["default"].div(_templateObject4 || (_te
   return props.theme.containerBorderRadius;
 }, function (props) {
   return props.theme.containerBorderColor;
-}, function (props) {
-  return props.theme.containerBackgroundColor;
 }, function (props) {
   return props.theme.containerMarginTop;
+}, function (props) {
+  return props.theme.containerBackgroundColor;
 });
 
-var ToggleContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin-right: ", ";\n\n  ", "\n"])), function (props) {
-  return !props.isLast && "4px";
+var ToggleButton = _styledComponents["default"].button(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  padding-left: ", ";\n  padding-right: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-radius: ", ";\n  background-color: ", ";\n  color: ", ";\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n  }\n  &:active {\n    background-color: ", ";\n    color: #ffffff;\n  }\n  &:focus {\n    outline: none;\n    box-shadow: ", ";\n  }\n  &:disabled {\n    background-color: ", ";\n    color: ", ";\n    cursor: not-allowed;\n  }\n"])), function (props) {
+  return props.optionLabel && props.hasIcon || props.optionLabel && !props.hasIcon ? props.theme.labelPaddingLeft : props.theme.iconPaddingLeft;
 }, function (props) {
-  return "\n    background-color: ".concat(props.selected ? props.disabled ? props.theme.selectedDisabledBackgroundColor : props.theme.selectedBackgroundColor : props.disabled ? props.theme.unselectedDisabledBackgroundColor : props.theme.unselectedBackgroundColor, ";\n    border-width: ").concat(props.theme.optionBorderThickness, ";\n    border-style: ").concat(props.theme.optionBorderStyle, ";\n    border-radius: ").concat(props.theme.optionBorderRadius, ";\n    padding-left: ").concat(props.optionLabel && props.isIcon || props.optionLabel && !props.isIcon ? props.theme.labelPaddingLeft : props.theme.iconPaddingLeft, ";\n    padding-right: ").concat(props.optionLabel && props.isIcon || props.optionLabel && !props.isIcon ? props.theme.labelPaddingRight : props.theme.iconPaddingRight, ";\n    ").concat(!props.disabled ? ":hover {\n          background-color: ".concat(props.selected ? props.theme.selectedHoverBackgroundColor : props.theme.unselectedHoverBackgroundColor, ";\n        }\n        :active {\n          background-color: ").concat(props.selected ? props.theme.selectedActiveBackgroundColor : props.theme.unselectedActiveBackgroundColor, ";\n          color: #ffffff;\n        }        \n        :focus {\n          border-color: transparent;\n          box-shadow: 0 0 0 ").concat(props.theme.optionFocusBorderThickness, " ").concat(props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor, ";\n        }\n        &:focus-visible {\n          outline: none;\n        }\n        cursor: pointer;\n        color: ").concat(props.selected ? props.theme.selectedFontColor : props.theme.unselectedFontColor, ";\n") : "color: ".concat(props.selected ? props.theme.selectedDisabledFontColor : props.theme.unselectedDisabledFontColor, ";\n        cursor: not-allowed;"), "\n  ");
+  return props.optionLabel && props.hasIcon || props.optionLabel && !props.hasIcon ? props.theme.labelPaddingRight : props.theme.iconPaddingRight;
+}, function (props) {
+  return props.theme.optionBorderThickness;
+}, function (props) {
+  return props.theme.optionBorderStyle;
+}, function (props) {
+  return props.theme.optionBorderRadius;
+}, function (props) {
+  return props.selected ? props.theme.selectedBackgroundColor : props.theme.unselectedBackgroundColor;
+}, function (props) {
+  return props.selected ? props.theme.selectedFontColor : props.theme.unselectedFontColor;
+}, function (props) {
+  return props.selected ? props.theme.selectedHoverBackgroundColor : props.theme.unselectedHoverBackgroundColor;
+}, function (props) {
+  return props.selected ? props.theme.selectedActiveBackgroundColor : props.theme.unselectedActiveBackgroundColor;
+}, function (props) {
+  return "0 0 0 ".concat(props.theme.optionFocusBorderThickness, " ").concat(props.backgroundType === "dark" ? props.theme.focusColorOnDark : props.theme.focusColor);
+}, function (props) {
+  return props.selected ? props.theme.selectedDisabledBackgroundColor : props.theme.unselectedDisabledBackgroundColor;
+}, function (props) {
+  return props.selected ? props.theme.selectedDisabledFontColor : props.theme.unselectedDisabledFontColor;
 });
 
 var LabelContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n"])), function (props) {
@@ -203,11 +233,7 @@ var LabelContainer = _styledComponents["default"].span(_templateObject6 || (_tem
   return props.theme.optionLabelFontWeight;
 });
 
-var OptionContent = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-
-var Icon = _styledComponents["default"].img(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])([""])));
-
-var IconContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-right: ", ";\n  height: 24px;\n  width: 24px;\n  overflow: hidden;\n  display: flex;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
+var IconContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  height: 24px;\n  width: 24px;\n  margin-right: ", ";\n  overflow: hidden;\n\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
   return props.optionLabel && props.theme.iconMarginRight;
 });
 

package/toggle-group/ToggleGroup.stories.tsx

@@ -3,6 +3,7 @@ import { userEvent, within } from "@storybook/testing-library";
 import DxcToggleGroup from "./ToggleGroup";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "ToggleGroup",
@@ -41,7 +42,7 @@ const options = [
   },
   {
     value: 2,
-    label: "Twitter",
+    label: "X",
   },
   {
     value: 3,
@@ -52,14 +53,17 @@ const optionsWithIcon = [
   {
     value: 1,
     icon: wifiSVG,
+    title: "WiFi connection",
   },
   {
     value: 2,
     icon: ethernetSVG,
+    title: "Ethernet connection",
   },
   {
     value: 3,
     icon: gMobileSVG,
+    title: "3G Mobile data connection",
   },
 ];
 const optionsWithIconAndLabel = [
@@ -86,9 +90,19 @@ const twoOptions = [
   },
   {
     value: 2,
-    label: "Twitter",
+    label: "X",
   },
 ];
+
+const opinionatedTheme = {
+  toggleGroup: {
+    selectedBaseColor: "#5f249f",
+    selectedFontColor: "#ffffff",
+    unselectedBaseColor: "#e6e6e6",
+    unselectedFontColor: "#000000",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -154,6 +168,37 @@ export const Chromatic = () => (
       <Title title="xxLarge" theme="light" level={4} />
       <DxcToggleGroup label="xxLarge margin" options={options} margin="xxlarge" />
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Selected" theme="light" level={4} />
+        <DxcToggleGroup label="Selected" helperText="HelperText" defaultValue={2} options={options} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Icons & label toggle group" theme="light" level={4} />
+        <DxcToggleGroup label="Icons & label" options={optionsWithIconAndLabel} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <Title title="Disabled" theme="light" level={4} />
+        <DxcToggleGroup label="Disabled" defaultValue={2} options={options} disabled />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcToggleGroup label="Hovered" options={twoOptions} defaultValue={2} />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Actived" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcToggleGroup label="Actived" options={twoOptions} defaultValue={2} />
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 const OptionSelected = () => <DxcToggleGroup label="Toggle group" helperText="HelperText" options={options} />;
@@ -167,7 +212,7 @@ ToggleGroupSelectedActived.play = async ({ canvasElement }) => {
 export const ToggleGroupUnselectedActived = OptionSelected.bind({});
 ToggleGroupUnselectedActived.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const option = canvas.getByText("Twitter");
+  const option = canvas.getByText("X");
   await userEvent.click(option);
   userEvent.tab();
 };

package/toggle-group/ToggleGroup.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup"));
+var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup.tsx"));
 
 var options = [{
   value: 1,
@@ -37,14 +37,28 @@ describe("Toggle group component tests", function () {
     expect(getByText("Apple")).toBeTruthy();
     expect(getByText("Google")).toBeTruthy();
   });
+  test("Toggle group renders with correct aria-label in only-icon scenario", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      label: "Toggle group label",
+      helperText: "Toggle group helper text",
+      options: [{
+        value: 1,
+        icon: "https://cdn.icon-icons.com/icons2/2645/PNG/512/mic_mute_icon_159965.png",
+        title: "Mute"
+      }]
+    })),
+        getByRole = _render2.getByRole;
+
+    expect(getByRole("button").getAttribute("aria-label")).toBe("Mute");
+  });
   test("Uncontrolled toggle group calls correct function on change with value", function () {
     var onChange = jest.fn();
 
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange
     })),
-        getByText = _render2.getByText;
+        getByText = _render3.getByText;
 
     var option = getByText("Ebay");
 
@@ -55,12 +69,12 @@ describe("Toggle group component tests", function () {
   test("Controlled toggle group calls correct function on change with value", function () {
     var onChange = jest.fn();
 
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange,
       value: 1
     })),
-        getByText = _render3.getByText;
+        getByText = _render4.getByText;
 
     var option = getByText("Ebay");
 
@@ -71,12 +85,12 @@ describe("Toggle group component tests", function () {
   test("Function on change is not called when disable", function () {
     var onChange = jest.fn();
 
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange,
       disabled: true
     })),
-        getByText = _render4.getByText;
+        getByText = _render5.getByText;
 
     var option = getByText("Ebay");
 
@@ -87,14 +101,14 @@ describe("Toggle group component tests", function () {
   test("Uncontrolled multiple toggle group calls correct function on change with value when is multiple", function () {
     var onChange = jest.fn();
 
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange,
       multiple: true
     })),
-        getAllByRole = _render5.getAllByRole;
+        getAllByRole = _render6.getAllByRole;
 
-    var toggleOptions = getAllByRole("switch");
+    var toggleOptions = getAllByRole("button");
 
     _react2.fireEvent.click(toggleOptions[0]);
 
@@ -105,20 +119,20 @@ describe("Toggle group component tests", function () {
     _react2.fireEvent.click(toggleOptions[3]);
 
     expect(onChange).toHaveBeenCalledWith([1, 2, 4]);
-    expect(toggleOptions[0].getAttribute("aria-checked")).toBe("true");
-    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
-    expect(toggleOptions[3].getAttribute("aria-checked")).toBe("true");
+    expect(toggleOptions[0].getAttribute("aria-pressed")).toBe("true");
+    expect(toggleOptions[1].getAttribute("aria-pressed")).toBe("true");
+    expect(toggleOptions[3].getAttribute("aria-pressed")).toBe("true");
   });
   test("Controlled multiple toggle returns always same values", function () {
     var onChange = jest.fn();
 
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange,
       value: [1],
       multiple: true
     })),
-        getByText = _render6.getByText;
+        getByText = _render7.getByText;
 
     var option = getByText("Ebay");
 
@@ -132,25 +146,25 @@ describe("Toggle group component tests", function () {
     expect(onChange).toHaveBeenNthCalledWith(2, [1, 4]);
   });
   test("Single selection: Renders with correct default value", function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       defaultValue: 2
     })),
-        getAllByRole = _render7.getAllByRole;
+        getAllByRole = _render8.getAllByRole;
 
-    var toggleOptions = getAllByRole("radio");
-    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
+    var toggleOptions = getAllByRole("button");
+    expect(toggleOptions[1].getAttribute("aria-pressed")).toBe("true");
   });
   test("Multiple selection: Renders with correct default value", function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       defaultValue: [2, 4],
       multiple: true
     })),
-        getAllByRole = _render8.getAllByRole;
+        getAllByRole = _render9.getAllByRole;
 
-    var toggleOptions = getAllByRole("switch");
-    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
-    expect(toggleOptions[3].getAttribute("aria-checked")).toBe("true");
+    var toggleOptions = getAllByRole("button");
+    expect(toggleOptions[1].getAttribute("aria-pressed")).toBe("true");
+    expect(toggleOptions[3].getAttribute("aria-pressed")).toBe("true");
   });
 });

package/toggle-group/types.d.ts

@@ -7,23 +7,22 @@ declare type Margin = {
     right?: Space;
 };
 declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-declare type OptionCommons = {
-    /**
-     * Number with the option inner value.
-     */
-    value: number;
-};
-declare type OptionIcon = OptionCommons & {
+declare type OptionIcon = {
     /**
      * String with the option display value.
      */
-    label?: string;
+    label?: never;
     /**
      * Element used as the icon. Icon and label can't be used at same time.
      */
     icon: string | SVG;
+    /**
+     * Value for the HTML properties title and aria-label.
+     * When a label is defined, this prop can not be use.
+     */
+    title: string;
 };
-declare type OptionLabel = OptionCommons & {
+export declare type OptionLabel = {
     /**
      * String with the option display value.
      */
@@ -32,8 +31,18 @@ declare type OptionLabel = OptionCommons & {
      * Element used as the icon. Icon and label can't be used at same time.
      */
     icon?: string | SVG;
+    /**
+     * Value for the HTML properties title and aria-label.
+     * When a label is defined, this prop can not be use.
+     */
+    title?: never;
 };
-declare type Option = OptionIcon | OptionLabel;
+declare type Option = {
+    /**
+     * Number with the option inner value.
+     */
+    value: number;
+} & (OptionIcon | OptionLabel);
 declare type CommonProps = {
     /**
      * Text to be placed above the component.
@@ -61,7 +70,7 @@ declare type CommonProps = {
      */
     tabIndex?: number;
 };
-declare type SingleSelectionToggle = CommonProps & {
+declare type SingleSelectionToggleGroup = CommonProps & {
     /**
      * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
      */
@@ -81,7 +90,7 @@ declare type SingleSelectionToggle = CommonProps & {
      */
     onChange?: (optionIndex: number) => void;
 };
-declare type MultipleSelectionToggle = CommonProps & {
+declare type MultipleSelectionToggleGroup = CommonProps & {
     /**
      * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
      */
@@ -101,5 +110,5 @@ declare type MultipleSelectionToggle = CommonProps & {
      */
     onChange?: (optionIndex: number[]) => void;
 };
-declare type Props = SingleSelectionToggle | MultipleSelectionToggle;
+declare type Props = SingleSelectionToggleGroup | MultipleSelectionToggleGroup;
 export default Props;

package/typography/Typography.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import TypographyPropsTypes from "./types";
-declare const Typography: ({ as, display, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, color, textDecoration, textOverflow, whiteSpace, children, }: TypographyPropsTypes) => JSX.Element;
-export default Typography;
+declare const DxcTypography: ({ textOverflow, whiteSpace, children, ...props }: TypographyPropsTypes) => JSX.Element;
+export default DxcTypography;