@dxc-technology/halstack-react 0.0.0-d3554d7 → 0.0.0-d3624d0

package/toggle-group/ToggleGroup.stories.tsx

@@ -3,9 +3,10 @@ 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",
+  title: "Toggle Group",
   component: DxcToggleGroup,
 };
 
@@ -41,7 +42,7 @@ const options = [
   },
   {
     value: 2,
-    label: "Twitter",
+    label: "X",
   },
   {
     value: 3,
@@ -51,15 +52,18 @@ const options = [
 const optionsWithIcon = [
   {
     value: 1,
-    icon: wifiSVG,
+    icon: "wifi",
+    title: "WiFi connection",
   },
   {
     value: 2,
-    icon: ethernetSVG,
+    icon: "filled_lan",
+    title: "Ethernet connection",
   },
   {
     value: 3,
-    icon: gMobileSVG,
+    icon: "5g",
+    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>
@@ -97,7 +111,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 +123,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 +135,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 +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

@@ -1,13 +1,9 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 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,
   label: "Amazon"
@@ -24,12 +20,11 @@ var options = [{
 describe("Toggle group component tests", function () {
   test("Toggle group renders with correct labels", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
-      label: "Toggle group label",
-      helperText: "Toggle group helper text",
-      options: options
-    })),
-        getByText = _render.getByText;
-
+        label: "Toggle group label",
+        helperText: "Toggle group helper text",
+        options: options
+      })),
+      getByText = _render.getByText;
     expect(getByText("Toggle group label")).toBeTruthy();
     expect(getByText("Toggle group helper text")).toBeTruthy();
     expect(getByText("Amazon")).toBeTruthy();
@@ -37,89 +32,106 @@ 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"], {
-      options: options,
-      onChange: onChange
-    })),
-        getByText = _render2.getByText;
-
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+        options: options,
+        onChange: onChange
+      })),
+      getByText = _render3.getByText;
     var option = getByText("Ebay");
-
     _react2.fireEvent.click(option);
-
     expect(onChange).toHaveBeenCalledWith(2);
   });
   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"], {
-      options: options,
-      onChange: onChange,
-      value: 1
-    })),
-        getByText = _render3.getByText;
-
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+        options: options,
+        onChange: onChange,
+        value: 1
+      })),
+      getByText = _render4.getByText;
     var option = getByText("Ebay");
-
     _react2.fireEvent.click(option);
-
     expect(onChange).toHaveBeenCalledWith(2);
   });
   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"], {
-      options: options,
-      onChange: onChange,
-      disabled: true
-    })),
-        getByText = _render4.getByText;
-
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+        options: options,
+        onChange: onChange,
+        disabled: true
+      })),
+      getByText = _render5.getByText;
     var option = getByText("Ebay");
-
     _react2.fireEvent.click(option);
-
     expect(onChange).toHaveBeenCalledTimes(0);
   });
   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"], {
-      options: options,
-      onChange: onChange,
-      multiple: true
-    })),
-        getByText = _render5.getByText;
-
-    var option = getByText("Ebay");
-
-    _react2.fireEvent.click(option);
-
-    expect(onChange).toHaveBeenCalledWith([2]);
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+        options: options,
+        onChange: onChange,
+        multiple: true
+      })),
+      getAllByRole = _render6.getAllByRole;
+    var toggleOptions = getAllByRole("button");
+    _react2.fireEvent.click(toggleOptions[0]);
+    expect(onChange).toHaveBeenCalledWith([1]);
+    _react2.fireEvent.click(toggleOptions[1]);
+    _react2.fireEvent.click(toggleOptions[3]);
+    expect(onChange).toHaveBeenCalledWith([1, 2, 4]);
+    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"], {
-      options: options,
-      onChange: onChange,
-      value: [1],
-      multiple: true
-    })),
-        getByText = _render6.getByText;
-
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+        options: options,
+        onChange: onChange,
+        value: [1],
+        multiple: true
+      })),
+      getByText = _render7.getByText;
     var option = getByText("Ebay");
-
     _react2.fireEvent.click(option);
-
     expect(onChange).toHaveBeenCalledWith([1, 2]);
     var option2 = getByText("Google");
-
     _react2.fireEvent.click(option2);
-
     expect(onChange).toHaveBeenNthCalledWith(2, [1, 4]);
   });
+  test("Single selection: Renders with correct default value", function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+        options: options,
+        defaultValue: 2
+      })),
+      getAllByRole = _render8.getAllByRole;
+    var toggleOptions = getAllByRole("button");
+    expect(toggleOptions[1].getAttribute("aria-pressed")).toBe("true");
+  });
+  test("Multiple selection: Renders with correct default value", function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+        options: options,
+        defaultValue: [2, 4],
+        multiple: true
+      })),
+      getAllByRole = _render9.getAllByRole;
+    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

@@ -1,40 +1,49 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
-declare type OptionCommons = {
-    /**
-     * Number with the option inner value.
-     */
-    value: number;
-};
-declare type OptionIcon = OptionCommons & {
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+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.
+     * Material Symbols icon or SVG element. 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 type OptionLabel = {
     /**
      * String with the option display value.
      */
     label: string;
     /**
-     * Element used as the icon. Icon and label can't be used at same time.
+     * Material Symbols icon or SVG element. 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 CommonProps = {
+type Option = {
+    /**
+     * Number with the option inner value.
+     */
+    value: number;
+} & (OptionIcon | OptionLabel);
+type CommonProps = {
     /**
      * Text to be placed above the component.
      */
@@ -61,11 +70,15 @@ declare type CommonProps = {
      */
     tabIndex?: number;
 };
-declare type SingleSelectionToggle = CommonProps & {
+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.
      */
     multiple?: false;
+    /**
+     * The key of the initially selected value.
+     */
+    defaultValue?: number;
     /**
      * The key of the selected value. If the component allows multiple selection, value must be an array.
      * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
@@ -77,11 +90,15 @@ declare type SingleSelectionToggle = CommonProps & {
      */
     onChange?: (optionIndex: number) => void;
 };
-declare type MultipleSelectionToggle = CommonProps & {
+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.
      */
     multiple: true;
+    /**
+     * The array of keys with the initially selected values.
+     */
+    defaultValue?: number[];
     /**
      * An array with the keys of the selected values.
      * If undefined, the component will be uncontrolled and the value will be managed internally by the component.
@@ -93,5 +110,5 @@ declare type MultipleSelectionToggle = CommonProps & {
      */
     onChange?: (optionIndex: number[]) => void;
 };
-declare type Props = SingleSelectionToggle | MultipleSelectionToggle;
+type Props = SingleSelectionToggleGroup | MultipleSelectionToggleGroup;
 export default Props;