@dxc-technology/halstack-react 0.0.0-d30020b → 0.0.0-d3ac293

package/textarea/Textarea.test.js

@@ -0,0 +1,437 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _Textarea = _interopRequireDefault(require("./Textarea.tsx"));
+
+describe("Textarea component tests", function () {
+  test("Renders with correct label", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("Example label")).toBeTruthy();
+  });
+  test("Renders with correct label and helper text", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      helperText: "Example helper text"
+    })),
+        getByText = _render2.getByText;
+
+    expect(getByText("Example label")).toBeTruthy();
+    expect(getByText("Example helper text")).toBeTruthy();
+  });
+  test("Renders with correct label and optional", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      helperText: "Example helper text",
+      optional: true
+    })),
+        getByText = _render3.getByText,
+        getByRole = _render3.getByRole;
+
+    var textarea = getByRole("textbox");
+    expect(getByText("Example label")).toBeTruthy();
+    expect(getByText("(Optional)")).toBeTruthy();
+    expect(getByText("Example helper text")).toBeTruthy();
+    expect(textarea.getAttribute("aria-required")).toBe("false");
+  });
+  test("Renders with correct placeholder", function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      placeholder: "Placeholder"
+    })),
+        getByRole = _render4.getByRole;
+
+    var textarea = getByRole("textbox");
+    expect(textarea.getAttribute("placeholder")).toBe("Placeholder");
+  });
+  test("Renders with error message and correct aria attributes", function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      error: "Error message."
+    })),
+        getByText = _render5.getByText,
+        getByLabelText = _render5.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+    var errorMessage = getByText("Error message.");
+    expect(errorMessage).toBeTruthy();
+    expect(textarea.getAttribute("aria-errormessage")).toBe(errorMessage.id);
+    expect(textarea.getAttribute("aria-invalid")).toBe("true");
+    expect(errorMessage.getAttribute("aria-live")).toBe("assertive");
+  });
+  test("Renders with correct default rows", function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      rows: 10
+    })),
+        getByLabelText = _render6.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+    expect(textarea.rows).toBe(10);
+  });
+  test("Renders with correct accesibility attributes", function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label"
+    })),
+        getByLabelText = _render7.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+    expect(textarea.getAttribute("aria-disabled")).toBe("false");
+    expect(textarea.getAttribute("aria-invalid")).toBe("false");
+    expect(textarea.getAttribute("aria-describedBy")).toBeNull();
+    expect(textarea.getAttribute("aria-required")).toBe("true");
+  });
+  test("Renders with correct initial value", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      defaultValue: "Example text"
+    })),
+        getByLabelText = _render8.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+    expect(textarea.value).toBe("Example text");
+  });
+  test("Disabled textarea renders with correct aria and can not be modified", function () {
+    var onChange = jest.fn();
+
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      onChange: onChange,
+      disabled: true
+    })),
+        getByLabelText = _render9.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+    expect(textarea.getAttribute("aria-disabled")).toBe("true");
+
+    _userEvent["default"].type(textarea, "Test");
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  test("Not optional constraint (onBlur)", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur
+    })),
+        getByLabelText = _render10.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.focus(textarea);
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value."
+    });
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "Test"
+      }
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "Test"
+    });
+  });
+  test("Not optional constraint (onChange)", function () {
+    var onChange = jest.fn();
+
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange
+    })),
+        getByLabelText = _render11.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.focus(textarea);
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "Test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "Test"
+    });
+
+    _userEvent["default"].clear(textarea);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "",
+      error: "This field is required. Please, enter a value."
+    });
+  });
+  test("Pattern constraint", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur,
+      margin: {
+        left: "medium",
+        right: "medium"
+      },
+      pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$"
+    })),
+        getByLabelText = _render12.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "pattern test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "pattern test",
+      error: "Please match the format requested."
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "pattern test",
+      error: "Please match the format requested."
+    });
+
+    _userEvent["default"].clear(textarea);
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "pattern4&"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "pattern4&"
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "pattern4&"
+    });
+  });
+  test("Length constraint", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur,
+      margin: {
+        left: "medium",
+        right: "medium"
+      },
+      minLength: 5,
+      maxLength: 10
+    })),
+        getByLabelText = _render13.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _userEvent["default"].clear(textarea);
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "length"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "length"
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "length"
+    });
+  });
+  test("Pattern and length constraints", function () {
+    var onChange = jest.fn();
+    var onBlur = jest.fn();
+
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      placeholder: "Placeholder",
+      onChange: onChange,
+      onBlur: onBlur,
+      margin: {
+        left: "medium",
+        right: "medium"
+      },
+      pattern: "^.*(?=.*[a-zA-Z])(?=.*\\d)(?=.*[!&$%&? \"]).*$",
+      minLength: 5,
+      maxLength: 10
+    })),
+        getByLabelText = _render14.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test",
+      error: "Min length 5, max length 10."
+    });
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "tests"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "tests",
+      error: "Please match the format requested."
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "tests",
+      error: "Please match the format requested."
+    });
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "tests4&"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "tests4&"
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "tests4&"
+    });
+  });
+  test("onBlur function is called correctly", function () {
+    var onBlur = jest.fn();
+
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      onBlur: onBlur
+    })),
+        getByLabelText = _render15.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "Blur test"
+      }
+    });
+
+    _react2.fireEvent.blur(textarea);
+
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "Blur test"
+    });
+  });
+  test("onChange function is called correctly", function () {
+    var onChange = jest.fn();
+
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+      label: "Example label",
+      value: "Test value",
+      onChange: onChange
+    })),
+        getByLabelText = _render16.getByLabelText;
+
+    var textarea = getByLabelText("Example label");
+
+    _react2.fireEvent.change(textarea, {
+      target: {
+        value: "Controlled test"
+      }
+    });
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "Controlled test"
+    });
+    expect(textarea.value).toBe("Test value");
+  });
+});

package/textarea/types.d.ts

@@ -14,6 +14,10 @@ declare type Props = {
      * Name attribute of the textarea element.
      */
     name?: string;
+    /**
+     * Initial value of the textarea, only when it is uncontrolled.
+     */
+    defaultValue?: string;
     /**
      * Value of the textarea. If undefined, the component will be uncontrolled and the value will be managed internally.
      */
@@ -52,26 +56,29 @@ declare type Props = {
      * This function will be called when the user types within the textarea.
      * An object including the current value and the error (if the value
      * entered is not valid) will be passed to this function.
-     * If there is no error, error will be null.
+     * If there is no error, error will not be defined.
      */
     onChange?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
      * This function will be called when the textarea loses the focus. An
      * object including the textarea value and the error (if the value entered
      * is not valid) will be passed to this function. If there is no error,
-     * error will be null.
+     * error will not be defined.
      */
     onBlur?: (val: {
         value: string;
-        error: string | null;
+        error?: string;
     }) => void;
     /**
-     * If it is defined, the component will change its appearance, showing
-     * the error below the textarea. If it is not defined, the error
-     * messages will be managed internally, but never displayed on its own.
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the textarea. If the
+     * defined value is an empty string, it will reserve a space below the
+     * component for a future error, but it would not change its look. In
+     * case of being undefined or null, both the appearance and the space for
+     * the error message would not be modified.
      */
     error?: string;
     /**
@@ -81,7 +88,7 @@ declare type Props = {
      * pattern, the onBlur and onChange functions will be called with the
      * current value and an internal error informing that this value does not
      * match the pattern. If the pattern is met, the error parameter of both
-     * events will be null.
+     * events will not be defined.
      */
     pattern?: string;
     /**
@@ -91,7 +98,7 @@ declare type Props = {
      * comply the minimum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will be null.
+     * reached, the error parameter of both events will not be defined.
      */
     minLength?: number;
     /**
@@ -101,7 +108,7 @@ declare type Props = {
      * comply the maximum length, the onBlur and onChange functions will be called
      * with the current value and an internal error informing that the value
      * length does not comply the specified range. If a valid length is
-     * reached, the error parameter of both events will be null.
+     * reached, the error parameter of both events will not be defined.
      */
     maxLength?: number;
     /**
@@ -115,7 +122,7 @@ declare type Props = {
      */
     margin?: Space | Margin;
     /**
-     * Size of the component ('small' | 'medium' | 'large' | 'fillParent').
+     * Size of the component.
      */
     size?: "small" | "medium" | "large" | "fillParent";
     /**

package/toggle-group/ToggleGroup.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import ToogleGroupPropsType from "./types";
-declare const DxcToggleGroup: ({ label, helperText, value, onChange, disabled, options, margin, multiple, tabIndex, }: ToogleGroupPropsType) => JSX.Element;
+declare const DxcToggleGroup: ({ label, helperText, defaultValue, value, onChange, disabled, options, margin, multiple, tabIndex, }: ToogleGroupPropsType) => JSX.Element;
 export default DxcToggleGroup;

package/toggle-group/ToggleGroup.js

@@ -21,7 +21,7 @@ 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"));
 
@@ -34,6 +34,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var DxcToggleGroup = function DxcToggleGroup(_ref) {
   var label = _ref.label,
       helperText = _ref.helperText,
+      defaultValue = _ref.defaultValue,
       value = _ref.value,
       onChange = _ref.onChange,
       _ref$disabled = _ref.disabled,
@@ -46,7 +47,7 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
   var colorsTheme = (0, _useTheme["default"])();
 
-  var _useState = (0, _react.useState)(multiple ? [] : -1),
+  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];
@@ -108,9 +109,9 @@ var DxcToggleGroup = function DxcToggleGroup(_ref) {
     role: multiple ? "group" : "radiogroup"
   }, options.map(function (option, i) {
     return /*#__PURE__*/_react["default"].createElement(ToggleContainer, {
-      selected: multiple && Array.isArray(value) ? value ? value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
+      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 && Array.isArray(value) ? value ? value.includes(option.value) : Array.isArray(selectedValue) && selectedValue.includes(option.value) : value ? option.value === value : option.value === selectedValue,
+      "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);
@@ -172,7 +173,7 @@ var ToggleGroup = _styledComponents["default"].div(_templateObject3 || (_templat
   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  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  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) {
   return props.theme.containerBorderThickness;
 }, function (props) {
   return props.theme.containerBorderStyle;

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>
@@ -97,7 +108,7 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Selected" theme="light" level={4} />
-      <DxcToggleGroup label="Selected" helperText="HelperText" value={2} options={options} />
+      <DxcToggleGroup label="Selected" helperText="HelperText" defaultValue={2} options={options} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Icons toggle group" theme="light" level={4} />
@@ -109,11 +120,11 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
-      <DxcToggleGroup label="Disabled" value={2} options={options} disabled />
+      <DxcToggleGroup label="Disabled" defaultValue={2} options={options} disabled />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered" theme="light" level={4} />
-      <DxcToggleGroup label="Hovered" options={twoOptions} value={2} />
+      <DxcToggleGroup label="Hovered" options={twoOptions} defaultValue={2} />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Multiple toggleGroup" theme="light" level={4} />
@@ -121,7 +132,7 @@ export const Chromatic = () => (
         label="Toggle group"
         helperText="Please select one or more"
         options={options}
-        value={[1, 3]}
+        defaultValue={[1, 3]}
         multiple
       ></DxcToggleGroup>
     </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} />;