@dxc-technology/halstack-react 10.0.0 → 10.1.0

package/toggle-group/ToggleGroup.test.js

@@ -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;
 };
-export declare type OptionLabel = OptionCommons & {
+export declare type OptionLabel = {
     /**
      * String with the option display value.
      */
@@ -32,8 +31,18 @@ export 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/useTheme.d.ts

@@ -488,6 +488,14 @@ declare const useTheme: () => {
         level5LineHeight: string;
         level5LetterSpacing: string;
     }>;
+    image?: Partial<{
+        captionFontColor: string;
+        captionFontFamily: string;
+        captionFontSize: string;
+        captionFontStyle: string;
+        captionFontWeight: string;
+        captionLineHeight: string;
+    }>;
     link?: Partial<{
         fontColor: string;
         fontFamily: string;

package/number-input/NumberInputContext.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import NumberInputContextPropsType from "./numberInputContextTypes";
-declare const NumberInputContext: React.Context<NumberInputContextPropsType>;
-export default NumberInputContext;

package/number-input/NumberInputContext.js

@@ -1,19 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var defaultState = {
-  stepNumber: 1
-};
-
-var NumberInputContext = /*#__PURE__*/_react["default"].createContext(defaultState);
-
-var _default = NumberInputContext;
-exports["default"] = _default;

package/number-input/numberInputContextTypes.d.ts

@@ -1,19 +0,0 @@
-declare type Props = {
-    /**
-     * Type of the input.
-     */
-    typeNumber?: string;
-    /**
-     * Minimum value allowed by the number input.
-     */
-    minNumber?: number;
-    /**
-     * Maximum value allowed by the number input.
-     */
-    maxNumber?: number;
-    /**
-     * The step interval to use when using the up and down arrows to adjust the value.
-     */
-    stepNumber?: number;
-};
-export default Props;