@dxc-technology/halstack-react 8.0.0 → 9.0.1

package/text-input/TextInput.test.js

@@ -16,7 +16,7 @@ var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
-var _TextInput = _interopRequireDefault(require("./TextInput"));
+var _TextInput = _interopRequireDefault(require("./TextInput.tsx"));
 
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
@@ -57,6 +57,7 @@ global.DOMRect = {
   }
 };
 var countries = ["Afghanistan", "Albania", "Algeria", "Andorra", "Angola", "Antigua and Barbuda", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Cabo Verde", "Cambodia", "Cameroon", "Canada", "Cayman Islands, The", "Central African Republic", "Chad", "Democratic Republic of the Congo", "Dominican Republic", "Dominica", "Denmark", "Djibouti"];
+var specialCharacters = ["/", "\\", "*", "(", ")", "[", "]", "+", "?", "*{[]}|"];
 describe("TextInput component tests", function () {
   test("Renders with correct error aria attributes", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
@@ -1183,10 +1184,108 @@ describe("TextInput component synchronous autosuggest tests", function () {
     expect(input.value).toBe("");
     expect(queryByRole("listbox")).toBeFalsy();
   });
+  test("Autosuggest escapes special characters", function () {
+    var onChange = jest.fn();
+
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+      label: "Autocomplete Countries",
+      suggestions: specialCharacters,
+      onChange: onChange
+    })),
+        getAllByText = _render37.getAllByText,
+        getByRole = _render37.getByRole;
+
+    var input = getByRole("combobox");
+
+    _react2.fireEvent.focus(input);
+
+    var list = getByRole("listbox");
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "/"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("/").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "\\"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("\\").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "*"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("*").length).toBe(2);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "("
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("(").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: ")"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText(")").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "["
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("[").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "]"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("]").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "+"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("+").length).toBe(1);
+
+    _react2.fireEvent.change(input, {
+      target: {
+        value: "?"
+      }
+    });
+
+    expect(list).toBeTruthy();
+    expect(getAllByText("?").length).toBe(1);
+  });
 });
 describe("TextInput component asynchronous autosuggest tests", function () {
   test("Autosuggest 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-    var callbackFunc, onChange, _render37, getByRole, getByText, input;
+    var callbackFunc, onChange, _render38, getByRole, getByText, input;
 
     return _regenerator["default"].wrap(function _callee$(_context) {
       while (1) {
@@ -1203,11 +1302,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               suggestions: callbackFunc,
               onChange: onChange
-            })), getByRole = _render37.getByRole, getByText = _render37.getByText;
+            })), getByRole = _render38.getByRole, getByText = _render38.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1270,14 +1369,14 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     });
     var onChange = jest.fn();
 
-    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
       label: "Autosuggest Countries",
       suggestions: callbackFunc,
       onChange: onChange
     })),
-        getByRole = _render38.getByRole,
-        queryByText = _render38.queryByText,
-        queryByRole = _render38.queryByRole;
+        getByRole = _render39.getByRole,
+        queryByText = _render39.queryByText,
+        queryByRole = _render39.queryByRole;
 
     var input = getByRole("combobox");
 
@@ -1299,7 +1398,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     expect(input.value).toBe("");
   });
   test("Autosuggest Esc + arrow down working while 'Searching...' message is shown", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-    var callbackFunc, onChange, _render39, getByRole, getByText, queryByText, queryByRole, input, list;
+    var callbackFunc, onChange, _render40, getByRole, getByText, queryByText, queryByRole, input, list;
 
     return _regenerator["default"].wrap(function _callee2$(_context2) {
       while (1) {
@@ -1316,11 +1415,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               suggestions: callbackFunc,
               onChange: onChange
-            })), getByRole = _render39.getByRole, getByText = _render39.getByText, queryByText = _render39.queryByText, queryByRole = _render39.queryByRole;
+            })), getByRole = _render40.getByRole, getByText = _render40.getByText, queryByText = _render40.queryByText, queryByRole = _render40.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1368,7 +1467,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee2);
   })));
   test("Asynchronous uncontrolled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
-    var callbackFunc, onChange, _render40, getByRole, getByText, input;
+    var callbackFunc, onChange, _render41, getByRole, getByText, input;
 
     return _regenerator["default"].wrap(function _callee3$(_context3) {
       while (1) {
@@ -1385,11 +1484,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByRole = _render40.getByRole, getByText = _render40.getByText;
+            })), getByRole = _render41.getByRole, getByText = _render41.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1419,7 +1518,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee3);
   })));
   test("Asynchronous controlled autosuggest test", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee4() {
-    var callbackFunc, onChange, _render41, getByRole, getByText, queryByRole, input;
+    var callbackFunc, onChange, _render42, getByRole, getByText, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee4$(_context4) {
       while (1) {
@@ -1436,12 +1535,12 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               value: "Denm",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByRole = _render41.getByRole, getByText = _render41.getByText, queryByRole = _render41.queryByRole;
+            })), getByRole = _render42.getByRole, getByText = _render42.getByText, queryByRole = _render42.queryByRole;
             input = getByRole("combobox");
             expect(input.value).toBe("Denm");
 
@@ -1472,7 +1571,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee4);
   })));
   test("Asynchronous autosuggest closes the listbox after finishing no matches search", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee5() {
-    var callbackFunc, onChange, _render42, getByText, getByRole, queryByRole, input;
+    var callbackFunc, onChange, _render43, getByText, getByRole, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee5$(_context5) {
       while (1) {
@@ -1489,11 +1588,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByText = _render42.getByText, getByRole = _render42.getByRole, queryByRole = _render42.queryByRole;
+            })), getByText = _render43.getByText, getByRole = _render43.getByRole, queryByRole = _render43.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1516,7 +1615,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee5);
   })));
   test("Asynchronous autosuggest with no matches founded doesn't let the listbox to be opened", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee6() {
-    var callbackFunc, onChange, _render43, getByText, getByRole, queryByRole, input;
+    var callbackFunc, onChange, _render44, getByText, getByRole, queryByRole, input;
 
     return _regenerator["default"].wrap(function _callee6$(_context6) {
       while (1) {
@@ -1533,11 +1632,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: callbackFunc
-            })), getByText = _render43.getByText, getByRole = _render43.getByRole, queryByRole = _render43.queryByRole;
+            })), getByText = _render44.getByText, getByRole = _render44.getByRole, queryByRole = _render44.queryByRole;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);
@@ -1582,7 +1681,7 @@ describe("TextInput component asynchronous autosuggest tests", function () {
     }, _callee6);
   })));
   test("Asynchronous autosuggest request failed, shows 'Error fetching data' message", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee7() {
-    var errorCallbackFunc, onChange, _render44, getByRole, getByText, input;
+    var errorCallbackFunc, onChange, _render45, getByRole, getByText, input;
 
     return _regenerator["default"].wrap(function _callee7$(_context7) {
       while (1) {
@@ -1597,11 +1696,11 @@ describe("TextInput component asynchronous autosuggest tests", function () {
               return result;
             });
             onChange = jest.fn();
-            _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
+            _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
               label: "Autosuggest Countries",
               onChange: onChange,
               suggestions: errorCallbackFunc
-            })), getByRole = _render44.getByRole, getByText = _render44.getByText;
+            })), getByRole = _render45.getByRole, getByText = _render45.getByText;
             input = getByRole("combobox");
 
             _react2.fireEvent.focus(input);

package/textarea/Textarea.js

@@ -19,13 +19,13 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _utils = require("../common/utils.js");
+var _utils = require("../common/utils");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
 
-var _variables = require("../common/variables.js");
+var _variables = require("../common/variables");
 
 var _uuid = require("uuid");
 
@@ -193,7 +193,7 @@ 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 TextareaContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n\n  width: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"])), function (props) {
+var TextareaContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  width: ", ";\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.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";

package/textarea/Textarea.stories.jsx

@@ -4,12 +4,20 @@ import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { BackgroundColorProvider } from "../BackgroundColorContext";
 import DarkContainer from "../../.storybook/components/DarkSection";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Textarea",
   component: DxcTextarea,
 };
 
+const opinionatedTheme = {
+  textarea: {
+    fontColor: "#000000",
+    hoverBorderColor: "#a46ede",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <>
@@ -151,7 +159,58 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcTextarea label="Xxlarge" margin="xxlarge" />
-      <hr />
+    </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Hovered" helperText="Sample text" placeholder="Placeholder" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Focused" helperText="Sample text" />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Disabled"
+          optional
+          helperText="Sample text"
+          placeholder="Enter your text here..."
+          disabled
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled with value" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea label="Disabled" helperText="Sample text" defaultValue="Example text" disabled />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With error" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Textarea with error"
+          helperText="Helper text"
+          placeholder="Enter your text here..."
+          error="Error message."
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Grow manual" theme="light" level={4} />{" "}
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcTextarea
+          label="Manual vertical grow"
+          verticalGrow="manual"
+          defaultValue="Long textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
+        />
+      </HalstackProvider>
     </ExampleContainer>
   </>
 );

package/textarea/Textarea.test.js

@@ -8,7 +8,7 @@ var _react2 = require("@testing-library/react");
 
 var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
 
-var _Textarea = _interopRequireDefault(require("./Textarea"));
+var _Textarea = _interopRequireDefault(require("./Textarea.tsx"));
 
 describe("Textarea component tests", function () {
   test("Renders with correct label", function () {

package/toggle-group/ToggleGroup.js

@@ -21,10 +21,12 @@ 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 _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 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); }
@@ -56,6 +58,8 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
       _useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
       toggleGroupId = _useState4[0];
 
+  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
+
   var handleToggleChange = function handleToggleChange(selectedOption) {
     var newSelectedOptions;
 
@@ -97,8 +101,7 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
   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,
     disabled: disabled
@@ -111,12 +114,12 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
     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",
+      backgroundType: backgroundType,
       "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,
       onClick: function onClick() {
         return !disabled && handleToggleChange(option.value);
       },
-      isFirst: i === 0,
       isLast: i === options.length - 1,
       isIcon: option.icon,
       optionLabel: option.label,

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",
@@ -89,6 +90,16 @@ const twoOptions = [
     label: "Twitter",
   },
 ];
+
+const opinionatedTheme = {
+  toggleGroup: {
+    selectedBaseColor: "#5f249f",
+    selectedFontColor: "#ffffff",
+    unselectedBaseColor: "#e6e6e6",
+    unselectedFontColor: "#000000",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -154,6 +165,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} />;

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,

package/toggle-group/types.d.ts

@@ -23,7 +23,7 @@ declare type OptionIcon = OptionCommons & {
      */
     icon: string | SVG;
 };
-declare type OptionLabel = OptionCommons & {
+export declare type OptionLabel = OptionCommons & {
     /**
      * String with the option display value.
      */

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;