@dxc-technology/halstack-react 0.0.0-97eade8 → 0.0.0-9852702

package/toggle-group/ToggleGroup.test.js

@@ -1,156 +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("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 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 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 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
-    })),
-        getAllByRole = _render5.getAllByRole;
-
-    var toggleOptions = getAllByRole("switch");
-
-    _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-checked")).toBe("true");
-    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
-    expect(toggleOptions[3].getAttribute("aria-checked")).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 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 _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
-      options: options,
-      defaultValue: 2
-    })),
-        getAllByRole = _render7.getAllByRole;
-
-    var toggleOptions = getAllByRole("radio");
-    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
-  });
-  test("Multiple selection: Renders with correct default value", function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
-      options: options,
-      defaultValue: [2, 4],
-      multiple: true
-    })),
-        getAllByRole = _render8.getAllByRole;
-
-    var toggleOptions = getAllByRole("switch");
-    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
-    expect(toggleOptions[3].getAttribute("aria-checked")).toBe("true");
-  });
-});

package/toggle-group/types.d.ts

@@ -1,105 +0,0 @@
-/// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Margin = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    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 & {
-    /**
-     * String with the option display value.
-     */
-    label?: string;
-    /**
-     * Element used as the icon. Icon and label can't be used at same time.
-     */
-    icon: string | SVG;
-};
-export declare type OptionLabel = OptionCommons & {
-    /**
-     * String with the option display value.
-     */
-    label: string;
-    /**
-     * Element used as the icon. Icon and label can't be used at same time.
-     */
-    icon?: string | SVG;
-};
-declare type Option = OptionIcon | OptionLabel;
-declare 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;
-};
-declare type SingleSelectionToggle = 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;
-};
-declare type MultipleSelectionToggle = 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;
-};
-declare type Props = SingleSelectionToggle | MultipleSelectionToggle;
-export default Props;

package/toggle-group/types.js

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

package/typography/Typography.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import TypographyPropsTypes from "./types";
-declare const DxcTypography: ({ textOverflow, whiteSpace, children, ...props }: TypographyPropsTypes) => JSX.Element;
-export default DxcTypography;

package/typography/Typography.js

@@ -1,32 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
-
-var _excluded = ["textOverflow", "whiteSpace", "children"];
-
-var DxcTypography = function DxcTypography(_ref) {
-  var textOverflow = _ref.textOverflow,
-      whiteSpace = _ref.whiteSpace,
-      children = _ref.children,
-      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], (0, _extends2["default"])({
-    textOverflow: textOverflow,
-    whiteSpace: whiteSpace == null && textOverflow != null && textOverflow !== "unset" ? "nowrap" : whiteSpace
-  }, props), children);
-};
-
-var _default = DxcTypography;
-exports["default"] = _default;

package/typography/Typography.stories.tsx

@@ -1,198 +0,0 @@
-import React from "react";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import DxcTypography from "./Typography";
-
-export default {
-  title: "Typography",
-  component: DxcTypography,
-};
-
-export const Chromatic = () => (
-  <>
-    <ExampleContainer>
-      <Title title="Default Typography" theme="light" level={4} />
-      <DxcTypography>Default typography.</DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography font sizes" theme="light" level={4} />
-      <DxcTypography display="block" fontSize="3.75rem">
-        3.75rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="3rem">
-        3rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="2rem">
-        2rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="1.5rem">
-        1.5rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="1.25rem">
-        1.25rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="1rem">
-        1rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="0.875rem">
-        0.875rem.
-      </DxcTypography>
-      <DxcTypography display="block" fontSize="0.75rem">
-        0.75rem.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography letter spacing" theme="light" level={4} />
-      <DxcTypography display="block" letterSpacing="-0.025em">
-        -0.025em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="-0.0125em">
-        -0.0125em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="0em">
-        0em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="0.025em">
-        0.025em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="0.05em">
-        0.05em.
-      </DxcTypography>
-      <DxcTypography display="block" letterSpacing="0.1em">
-        0.1em.
-      </DxcTypography>{" "}
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography line height" theme="light" level={4} />
-      <DxcTypography display="block" lineHeight="1em">
-        1em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="1.25em">
-        1.25em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="1.365em">
-        1.365em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="1.5em">
-        1.5em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="1.715em">
-        1.715em.
-      </DxcTypography>
-      <DxcTypography display="block" lineHeight="2em">
-        2em.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography font weight" theme="light" level={4} />
-      <DxcTypography display="block" fontWeight="300">
-        300.
-      </DxcTypography>
-      <DxcTypography display="block" fontWeight="400">
-        400.
-      </DxcTypography>
-      <DxcTypography display="block" fontWeight="600">
-        600.
-      </DxcTypography>
-      <DxcTypography display="block" fontWeight="700">
-        700.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography decoration" theme="light" level={4} />
-      <DxcTypography display="block" textDecoration="underline">
-        Underline.
-      </DxcTypography>
-      <DxcTypography display="block" textDecoration="line-through">
-        Line-through.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography font family" theme="light" level={4} />
-      <DxcTypography display="block" fontFamily="Open Sans, sans-serif">
-        Open Sans, sans-serif.
-      </DxcTypography>
-      <DxcTypography display="block" fontFamily="Source Code Pro, monospace">
-        Source Code Pro, monospace.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography font style" theme="light" level={4} />
-      <DxcTypography display="block" fontStyle="italic">
-        Italic.
-      </DxcTypography>
-      <DxcTypography display="block" fontStyle="normal">
-        Normal.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography align" theme="light" level={4} />
-      <DxcTypography display="block" textAlign="left">
-        Left.
-      </DxcTypography>
-      <DxcTypography display="block" textAlign="center">
-        Center.
-      </DxcTypography>
-      <DxcTypography display="block" textAlign="right">
-        Right.
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography whitespace" theme="light" level={4} />
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography fontSize="2rem">
-          {"                  "} Normal: A bunch of words you see.
-        </DxcTypography>
-      </div>
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography whiteSpace="nowrap" fontSize="2rem">
-          {"                  "}No-wrap: A bunch of words you see.
-        </DxcTypography>
-      </div>
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography whiteSpace="pre" fontSize="2rem">
-          {"                  "} pre: A bunch of words you see.
-        </DxcTypography>
-      </div>
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography whiteSpace="pre-line" fontSize="2rem">
-          {"                  "}pre-line: A bunch of words you see.
-        </DxcTypography>
-      </div>
-      <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography whiteSpace="pre-wrap" fontSize="2rem">
-          {"                  "} pre-wrap: A bunch of words you see.
-        </DxcTypography>
-      </div>
-    </ExampleContainer>{" "}
-    <ExampleContainer>
-      <Title title="Typography display" theme="light" level={4} />
-      <DxcTypography display="block" textAlign="left">
-        Display Block.
-        <DxcTypography>A different text.</DxcTypography>
-      </DxcTypography>
-      <DxcTypography display="inline" textAlign="left">
-        Display Inline.
-        <DxcTypography>A different text.</DxcTypography>
-      </DxcTypography>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Typography text-overflow" theme="light" level={4} />
-      <div style={{ width: "75px" }}>
-        <DxcTypography display="block" textOverflow="clip">
-          Overflow clip.
-        </DxcTypography>
-      </div>
-      <div style={{ width: "75px" }}>
-        <DxcTypography display="block" textOverflow="ellipsis">
-          Overflow ellipsis.
-        </DxcTypography>
-      </div>
-      <div style={{ width: "75px" }}>
-        <DxcTypography display="block" textOverflow="unset">
-          Overflow unset.
-        </DxcTypography>
-      </div>
-    </ExampleContainer>
-  </>
-);

package/typography/types.d.ts

@@ -1,18 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    as?: keyof HTMLElementTagNameMap;
-    display?: "inline" | "block";
-    fontFamily?: "Open Sans, sans-serif" | "Source Code Pro, monospace";
-    fontSize?: "0.75rem" | "0.875rem" | "1rem" | "1.25rem" | "1.5rem" | "2rem" | "3rem" | "3.75rem";
-    fontStyle?: "italic" | "normal";
-    fontWeight?: "300" | "400" | "600" | "700";
-    letterSpacing?: "-0.025em" | "-0.0125em" | "0em" | "0.025em" | "0.05em" | "0.1em";
-    lineHeight?: "1em" | "1.25em" | "1.365em" | "1.5em" | "1.715em" | "2em";
-    textAlign?: "left" | "center" | "right";
-    color?: string;
-    textDecoration?: "none" | "underline" | "line-through";
-    textOverflow?: "clip" | "ellipsis" | "unset";
-    whiteSpace?: "normal" | "nowrap" | "pre" | "pre-line" | "pre-wrap";
-    children: React.ReactNode;
-};
-export default Props;

package/typography/types.js

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