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

package/toggle-group/ToggleGroup.stories.tsx

@@ -0,0 +1,218 @@
+import React from "react";
+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: "Toggle Group",
+  component: DxcToggleGroup,
+};
+
+const ethernetSVG = (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+    <path d="M0 0h24v24H0V0z" fill="none" />
+    <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" />
+  </svg>
+);
+const gMobileSVG = (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+    <g>
+      <path d="M0,0h24v24H0V0z" fill="none" />
+    </g>
+    <g>
+      <g>
+        <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" />
+      </g>
+    </g>
+  </svg>
+);
+const wifiSVG = (
+  <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+    <path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
+    <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" />
+  </svg>
+);
+
+const options = [
+  {
+    value: 1,
+    label: "Facebook",
+  },
+  {
+    value: 2,
+    label: "X",
+  },
+  {
+    value: 3,
+    label: "Linkedin",
+  },
+];
+const optionsWithIcon = [
+  {
+    value: 1,
+    icon: "wifi",
+    title: "WiFi connection",
+  },
+  {
+    value: 2,
+    icon: "filled_lan",
+    title: "Ethernet connection",
+  },
+  {
+    value: 3,
+    icon: "5g",
+    title: "3G Mobile data connection",
+  },
+];
+const optionsWithIconAndLabel = [
+  {
+    value: 1,
+    label: "Wi-fi",
+    icon: wifiSVG,
+  },
+  {
+    value: 2,
+    label: "Ethernet",
+    icon: ethernetSVG,
+  },
+  {
+    value: 3,
+    label: "3G Mobile",
+    icon: gMobileSVG,
+  },
+];
+const twoOptions = [
+  {
+    value: 1,
+    label: "Facebook",
+  },
+  {
+    value: 2,
+    label: "X",
+  },
+];
+
+const opinionatedTheme = {
+  toggleGroup: {
+    selectedBaseColor: "#5f249f",
+    selectedFontColor: "#ffffff",
+    unselectedBaseColor: "#e6e6e6",
+    unselectedFontColor: "#000000",
+  },
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Basic toggle group" theme="light" level={4} />
+      <DxcToggleGroup label="Toggle group" helperText="HelperText" options={options} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Selected" theme="light" level={4} />
+      <DxcToggleGroup label="Selected" helperText="HelperText" defaultValue={2} options={options} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Icons toggle group" theme="light" level={4} />
+      <DxcToggleGroup label="Icons group" options={optionsWithIcon} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Icons & label toggle group" theme="light" level={4} />
+      <DxcToggleGroup label="Icons & label" options={optionsWithIconAndLabel} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <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} defaultValue={2} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Multiple toggleGroup" theme="light" level={4} />
+      <DxcToggleGroup
+        label="Toggle group"
+        helperText="Please select one or more"
+        options={options}
+        defaultValue={[1, 3]}
+        multiple
+      ></DxcToggleGroup>
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="xxSmall" theme="light" level={4} />
+      <DxcToggleGroup label="xxSmall margin" options={options} margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="xSmall" theme="light" level={4} />
+      <DxcToggleGroup label="xSmall margin" options={options} margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcToggleGroup label="Small margin" options={options} margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcToggleGroup label="Medium margin" options={options} margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcToggleGroup label="Large margin" options={options} margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="xLarge" theme="light" level={4} />
+      <DxcToggleGroup label="xLarge margin" options={options} margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <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} />;
+
+export const ToggleGroupSelectedActived = OptionSelected.bind({});
+ToggleGroupSelectedActived.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const option = canvas.getByText("Linkedin");
+  await userEvent.click(option);
+};
+export const ToggleGroupUnselectedActived = OptionSelected.bind({});
+ToggleGroupUnselectedActived.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const option = canvas.getByText("X");
+  await userEvent.click(option);
+  userEvent.tab();
+};

package/toggle-group/ToggleGroup.test.js

@@ -0,0 +1,137 @@
+"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.tsx"));
+var options = [{
+  value: 1,
+  label: "Amazon"
+}, {
+  value: 2,
+  label: "Ebay"
+}, {
+  value: 3,
+  label: "Apple"
+}, {
+  value: 4,
+  label: "Google"
+}];
+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;
+    expect(getByText("Toggle group label")).toBeTruthy();
+    expect(getByText("Toggle group helper text")).toBeTruthy();
+    expect(getByText("Amazon")).toBeTruthy();
+    expect(getByText("Ebay")).toBeTruthy();
+    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 _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 _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 _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 _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 _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

@@ -0,0 +1,114 @@
+/// <reference types="react" />
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+type OptionIcon = {
+    /**
+     * String with the option display value.
+     */
+    label?: never;
+    /**
+     * 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;
+};
+export type OptionLabel = {
+    /**
+     * String with the option display value.
+     */
+    label: string;
+    /**
+     * 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;
+};
+type Option = {
+    /**
+     * Number with the option inner value.
+     */
+    value: number;
+} & (OptionIcon | OptionLabel);
+type CommonProps = {
+    /**
+     * Text to be placed above the component.
+     */
+    label?: string;
+    /**
+     * Helper text to be placed above the component.
+     */
+    helperText?: string;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * An array of objects representing the selectable options.
+     */
+    options: Option[];
+    /**
+     * 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;
+    /**
+     * Value of the tabindex.
+     */
+    tabIndex?: number;
+};
+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.
+     */
+    value?: number;
+    /**
+     * This function will be called every time the selection changes. The number with the key of the selected
+     * value will be passed as a parameter to this function.
+     */
+    onChange?: (optionIndex: number) => void;
+};
+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.
+     */
+    value?: number[];
+    /**
+     * This function will be called every time the selection changes. An array with the key of
+     * the selected values will be passed as a parameter to this function.
+     */
+    onChange?: (optionIndex: number[]) => void;
+};
+type Props = SingleSelectionToggleGroup | MultipleSelectionToggleGroup;
+export default Props;

package/toggle-group/types.js

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