@dxc-technology/halstack-react 0.0.0-efa7c74 → 0.0.0-eff2879

package/textarea/Textarea.test.js

@@ -0,0 +1,406 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+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 accessibility 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-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 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");
+    _userEvent["default"].type(textarea, "Test");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  test("Read-only textarea does not trigger onChange function", function () {
+    var onChange = jest.fn();
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+        label: "Example label",
+        onChange: onChange,
+        readOnly: true
+      })),
+      getByLabelText = _render10.getByLabelText;
+    var textarea = getByLabelText("Example label");
+    _userEvent["default"].type(textarea, "Test");
+    expect(onChange).not.toHaveBeenCalled();
+  });
+  test("Read-only textarea sends its value on submit", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var handlerOnSubmit, _render11, getByText, submit;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          handlerOnSubmit = jest.fn(function (e) {
+            e.preventDefault();
+            var formData = new FormData(e.target);
+            var formProps = Object.fromEntries(formData);
+            expect(formProps).toStrictEqual({
+              data: "Comments"
+            });
+          });
+          _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("form", {
+            onSubmit: handlerOnSubmit
+          }, /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+            label: "Example label",
+            name: "data",
+            defaultValue: "Comments",
+            readOnly: true
+          }), /*#__PURE__*/_react["default"].createElement("button", {
+            type: "submit"
+          }, "Submit"))), getByText = _render11.getByText;
+          submit = getByText("Submit");
+          _context.next = 5;
+          return _userEvent["default"].click(submit);
+        case 5:
+          expect(handlerOnSubmit).toHaveBeenCalled();
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  test("Not optional constraint (onBlur)", 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
+      })),
+      getByLabelText = _render12.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 _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+        label: "Example label",
+        placeholder: "Placeholder",
+        onChange: onChange
+      })),
+      getByLabelText = _render13.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 _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)(?=.*[!&$%&? \"]).*$"
+      })),
+      getByLabelText = _render14.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 _render15 = (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 = _render15.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 _render16 = (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 = _render16.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 _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+        label: "Example label",
+        onBlur: onBlur
+      })),
+      getByLabelText = _render17.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 _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Textarea["default"], {
+        label: "Example label",
+        value: "Test value",
+        onChange: onChange
+      })),
+      getByLabelText = _render18.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

@@ -0,0 +1,141 @@
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+type Props = {
+    /**
+     * Text to be placed above the textarea.
+     */
+    label?: string;
+    /**
+     * 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.
+     */
+    value?: string;
+    /**
+     * Helper text to be placed above the textarea.
+     */
+    helperText?: string;
+    /**
+     * Text to be put as placeholder of the textarea.
+     */
+    placeholder?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * If true, the component will not be mutable, meaning the user can not edit the control.
+     */
+    readOnly?: boolean;
+    /**
+     * If true, the textarea will be optional, showing '(Optional)'
+     * next to the label. Otherwise, the field will be considered required
+     * and an error will be passed as a parameter to the OnBlur and onChange functions
+     * when it has not been filled.
+     */
+    optional?: boolean;
+    /**
+     * Defines the textarea's ability to resize vertically. It can be:
+     *    - 'auto': The textarea grows or shrinks automatically in order to fit the content.
+     *    - 'manual': The height of the textarea is enabled to be manually modified.
+     *    - 'none': The textarea has a fixed height and can't be modified.
+     */
+    verticalGrow?: "auto" | "manual" | "none";
+    /**
+     * Number of rows of the textarea.
+     */
+    rows?: number;
+    /**
+     * 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 not be defined.
+     */
+    onChange?: (val: {
+        value: string;
+        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 not be defined.
+     */
+    onBlur?: (val: {
+        value: string;
+        error?: string;
+    }) => void;
+    /**
+     * 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;
+    /**
+     * Regular expression that defines the valid format allowed by the
+     * textarea. This will be checked both when the textarea loses the focus
+     * and while typing within it. If the string entered does not match the
+     * 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 not be defined.
+     */
+    pattern?: string;
+    /**
+     * Specifies the minimum length allowed by the textarea.
+     * This will be checked both when the textarea loses the
+     * focus and while typing within it. If the string entered does not
+     * 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 not be defined.
+     */
+    minLength?: number;
+    /**
+     * Specifies the maximum length allowed by the textarea.
+     * This will be checked both when the textarea loses the
+     * focus and while typing within it. If the string entered does not
+     * 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 not be defined.
+     */
+    maxLength?: number;
+    /**
+     * HTML autocomplete attribute. Lets the user specify if any permission the user agent has to provide automated assistance in filling out the textarea value.
+     * Its value must be one of all the possible values of the HTML autocomplete attribute: 'on', 'off', 'email', 'username', 'new-password', ...
+     */
+    autocomplete?: string;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+/**
+ * Reference to the component.
+ */
+export type RefType = HTMLDivElement;
+export default Props;

package/textarea/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/toggle-group/ToggleGroup.accessibility.test.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _jestAxe = require("jest-axe");
+var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup.tsx"));
+var ethernetSVG = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0 0h24v24H0V0z",
+  fill: "none"
+}), /*#__PURE__*/_react["default"].createElement("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"
+}));
+var gMobileSVG = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0,0h24v24H0V0z",
+  fill: "none"
+})), /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("g", null, /*#__PURE__*/_react["default"].createElement("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"
+}))));
+var wifiSVG = /*#__PURE__*/_react["default"].createElement("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  height: "24px",
+  viewBox: "0 0 24 24",
+  width: "24px",
+  fill: "currentColor"
+}, /*#__PURE__*/_react["default"].createElement("path", {
+  d: "M0 0h24v24H0V0zm0 0h24v24H0V0z",
+  fill: "none"
+}), /*#__PURE__*/_react["default"].createElement("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"
+}));
+var options = [{
+  value: 1,
+  icon: wifiSVG,
+  title: "WiFi connection"
+}, {
+  value: 2,
+  icon: ethernetSVG,
+  title: "Ethernet connection"
+}, {
+  value: 3,
+  icon: gMobileSVG,
+  title: "3G Mobile data connection"
+}];
+describe("Toggle group component accessibility tests", function () {
+  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var _render, container, results;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+            label: "Toggle group label",
+            helperText: "Toggle group helper text",
+            options: options,
+            margin: "medium",
+            defaultValue: 2,
+            multiple: true
+          })), container = _render.container;
+          _context.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var _render2, container, results;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+            label: "Toggle group label",
+            helperText: "Toggle group helper text",
+            options: options,
+            margin: "medium",
+            disabled: true
+          })), container = _render2.container;
+          _context2.next = 3;
+          return (0, _jestAxe.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});

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;
+import ToggleGroupPropsType from "./types";
+declare const DxcToggleGroup: ({ label, helperText, defaultValue, value, onChange, disabled, options, margin, multiple, tabIndex, }: ToggleGroupPropsType) => JSX.Element;
 export default DxcToggleGroup;