@dxc-technology/halstack-react 0.0.0-da3a230 → 0.0.0-da56eb6

package/toggle-group/ToggleGroup.stories.tsx

@@ -1,218 +0,0 @@
-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

@@ -1,137 +0,0 @@
-"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

@@ -1,114 +0,0 @@
-/// <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

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