@dxc-technology/halstack-react 0.0.0-5aa300b → 0.0.0-5b16c7e

package/slider/Slider.stories.tsx

@@ -1,183 +0,0 @@
-import React from "react";
-import DxcSlider from "./Slider";
-import { BackgroundColorProvider } from "../BackgroundColorContext";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import DarkContainer from "../../.storybook/components/DarkSection";
-
-export default {
-  title: "Slider",
-  component: DxcSlider,
-};
-
-const labelFormat = (value) => `${value}E100000000000000000000000`;
-
-export const Chromatic = () => (
-  <>
-    <Title title="States" theme="light" level={2} />
-    <ExampleContainer pseudoState="pseudo-hover">
-      <Title title="Hovered" theme="light" level={4} />
-      <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-    </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-active">
-      <Title title="Active" theme="light" level={4} />
-      <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-    </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-focus">
-      <Title title="Focused" theme="light" level={4} />
-      <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Disabled" theme="light" level={4} />
-      <DxcSlider label="Slider" helperText="Help message" disabled showLimitsValues />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Disabled discrete slider with input" theme="light" level={4} />
-      <DxcSlider
-        label="Slider"
-        helperText="Help message"
-        disabled
-        defaultValue={40}
-        minValue={0}
-        maxValue={50}
-        showLimitsValues
-        showInput
-        marks
-        step={10}
-      />
-    </ExampleContainer>
-    <Title title="Variants" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Continuous slider" theme="light" level={4} />
-      <DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Discrete slider" theme="light" level={4} />
-      <DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Discrete slider with input" theme="light" level={4} />
-      <DxcSlider
-        defaultValue={20}
-        minValue={0}
-        maxValue={50}
-        label="Slider"
-        helperText="Help message"
-        showLimitsValues
-        showInput
-        marks
-        step={10}
-      />
-    </ExampleContainer>
-    <BackgroundColorProvider color="#333333">
-      <DarkContainer>
-        <Title title="Dark" theme="dark" level={2} />
-        <ExampleContainer pseudoState="pseudo-hover">
-          <Title title="Hovered" theme="dark" level={4} />
-          <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-        </ExampleContainer>
-        <ExampleContainer pseudoState="pseudo-active">
-          <Title title="Active" theme="dark" level={4} />
-          <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-        </ExampleContainer>
-        <ExampleContainer pseudoState="pseudo-focus">
-          <Title title="Focused" theme="dark" level={4} />
-          <DxcSlider label="Slider" helperText="Help message" showLimitsValues />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Disabled" theme="dark" level={4} />
-          <DxcSlider label="Slider" helperText="Help message" disabled showLimitsValues />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Disabled discrete slider with input" theme="dark" level={4} />
-          <DxcSlider
-            label="Slider"
-            helperText="Help message"
-            disabled
-            defaultValue={40}
-            minValue={0}
-            maxValue={50}
-            showLimitsValues
-            showInput
-            marks
-            step={5}
-          />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Continuous slider" theme="dark" level={4} />
-          <DxcSlider defaultValue={65} label="Slider" helperText="Help message" showLimitsValues />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Discrete slider" theme="dark" level={4} />
-          <DxcSlider defaultValue={20} label="Slider" helperText="Help message" showLimitsValues marks step={5} />
-        </ExampleContainer>
-        <ExampleContainer>
-          <Title title="Discrete slider with input" theme="dark" level={4} />
-          <DxcSlider
-            defaultValue={20}
-            minValue={0}
-            maxValue={50}
-            label="Slider"
-            helperText="Help message"
-            showLimitsValues
-            showInput
-            marks
-            step={10}
-          />
-        </ExampleContainer>
-      </DarkContainer>
-    </BackgroundColorProvider>
-    <Title title="Margins" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Xxsmall" theme="light" level={4} />
-      <DxcSlider label="Xxsmall" margin="xxsmall" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xsmall" theme="light" level={4} />
-      <DxcSlider label="Xsmall" margin="xsmall" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Small" theme="light" level={4} />
-      <DxcSlider label="Small" margin="small" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Medium" theme="light" level={4} />
-      <DxcSlider label="Medium" margin="medium" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Large" theme="light" level={4} />
-      <DxcSlider label="Large" margin="large" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xlarge" theme="light" level={4} />
-      <DxcSlider label="Xlarge" margin="xlarge" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xxlarge" theme="light" level={4} />
-      <DxcSlider label="Xxlarge" margin="xxlarge" />
-    </ExampleContainer>
-    <Title title="Sizes" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Medium" theme="light" level={4} />
-      <DxcSlider label="Medium" size="medium" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Large" theme="light" level={4} />
-      <DxcSlider label="Large" size="large" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="FillParent" theme="light" level={4} />
-      <DxcSlider label="FillParent" size="fillParent" />
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Large limit values labels" theme="light" level={4} />
-      <DxcSlider
-        label="Slider"
-        helperText="Help message"
-        showLimitsValues
-        labelFormatCallback={labelFormat}
-        size="large"
-      />
-    </ExampleContainer>
-  </>
-);

package/slider/Slider.test.js

@@ -1,250 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
-var _Slider = _interopRequireDefault(require("./Slider"));
-
-describe("Slider component tests", function () {
-  test("Slider renders with correct text and label id", function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
-      label: "label",
-      minValue: 0,
-      maxValue: 100,
-      showLimitsValues: true
-    })),
-        getByText = _render.getByText,
-        getByRole = _render.getByRole;
-
-    expect(getByText("0")).toBeTruthy();
-    expect(getByText("100")).toBeTruthy();
-    var sliderId = getByText("label").getAttribute("id");
-    expect(getByRole("slider").getAttribute("aria-labelledby")).toBe(sliderId);
-    expect(getByRole("slider").getAttribute("aria-orientation")).toBe("horizontal");
-  });
-  test("Slider renders with correct initial value when it is uncontrolled", function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
-      defaultValue: 30,
-      minValue: 0,
-      maxValue: 100,
-      showLimitsValues: true,
-      showInput: true
-    })),
-        getByRole = _render2.getByRole;
-
-    var slider = getByRole("slider");
-    var input = getByRole("textbox");
-    expect(slider.getAttribute("aria-valuenow")).toBe("30");
-    expect(input.value).toBe("30");
-  });
-  test("Slider correct limit values", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
-      defaultValue: 125,
-      minValue: 30,
-      maxValue: 125,
-      showLimitsValues: true
-    })),
-        getByRole = _render3.getByRole,
-        getByText = _render3.getByText;
-
-    var slider = getByRole("slider");
-    expect(slider.getAttribute("aria-valuemin")).toBe("30");
-    expect(slider.getAttribute("aria-valuemax")).toBe("125");
-
-    _userEvent["default"].tab();
-
-    _react2.fireEvent.keyDown(slider, {
-      key: "ArrowRight",
-      code: "ArrowRight",
-      keyCode: 39,
-      charCode: 39
-    });
-
-    expect(slider.getAttribute("aria-valuenow")).toBe("125");
-    expect(getByText("30")).toBeTruthy();
-    expect(getByText("125")).toBeTruthy();
-  });
-  test("Calls correct function onChange in controlled slider", function () {
-    var onChange = jest.fn();
-
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
-      minValue: 0,
-      maxValue: 100,
-      onChange: onChange,
-      showLimitsValues: true,
-      value: 13,
-      showInput: true
-    })),
-        getByRole = _render4.getByRole;
-
-    expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("13");
-    expect(getByRole("textbox").value).toBe("13");
-    (0, _react2.act)(function () {
-      _react2.fireEvent.change(getByRole("textbox"), {
-        target: {
-          value: 25
-        }
-      });
-    });
-    expect(onChange).toHaveBeenCalledWith(25);
-    expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("13");
-    expect(getByRole("textbox").value).toBe("13");
-  });
-  test("Calls correct function onChange in uncontrolled slider", function () {
-    var onChange = jest.fn();
-
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
-      minValue: 0,
-      maxValue: 100,
-      onChange: onChange,
-      showLimitsValues: true,
-      showInput: true
-    })),
-        getByRole = _render5.getByRole;
-
-    (0, _react2.act)(function () {
-      _react2.fireEvent.change(getByRole("textbox"), {
-        target: {
-          value: 25
-        }
-      });
-    });
-    expect(onChange).toHaveBeenCalledWith(25);
-    expect(getByRole("slider").getAttribute("aria-valuenow")).toBe("25");
-    expect(getByRole("textbox").value).toBe("25");
-  });
-  test("Disabled slider have disabled input and slider", function () {
-    var onChange = jest.fn();
-
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
-      minValue: 0,
-      maxValue: 100,
-      onChange: onChange,
-      showLimitsValues: true,
-      disabled: true,
-      showInput: true,
-      value: 13
-    })),
-        getByRole = _render6.getByRole;
-
-    (0, _react2.act)(function () {
-      _react2.fireEvent.change(getByRole("textbox"), {
-        target: {
-          value: 25
-        }
-      });
-    });
-    expect(getByRole("textbox").hasAttribute("disabled")).toBeTruthy();
-    expect(getByRole("textbox").value).toBe("13");
-    expect(getByRole("slider").hasAttribute("disabled")).toBeTruthy();
-  });
-  test("Calls correct function onDragEnd when it is uncontrolled", function () {
-    var onDragEnd = jest.fn();
-
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
-      minValue: 0,
-      maxValue: 150,
-      onDragEnd: onDragEnd,
-      showInput: true
-    })),
-        getByRole = _render7.getByRole;
-
-    var slider = getByRole("slider");
-    (0, _react2.act)(function () {
-      _react2.fireEvent.mouseDown(slider);
-    });
-    (0, _react2.act)(function () {
-      _react2.fireEvent.mouseUp(slider, {
-        target: {
-          value: 120
-        }
-      });
-    });
-    expect(onDragEnd).toHaveBeenCalledWith("120");
-  });
-  test("Calls correct function onDragEnd when it is controlled", function () {
-    var onDragEnd = jest.fn();
-
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
-      minValue: 0,
-      maxValue: 150,
-      value: 50,
-      onDragEnd: onDragEnd,
-      showInput: true
-    })),
-        getByRole = _render8.getByRole;
-
-    var slider = getByRole("slider");
-    (0, _react2.act)(function () {
-      _react2.fireEvent.mouseDown(slider);
-    });
-    (0, _react2.act)(function () {
-      _react2.fireEvent.mouseUp(slider, {
-        target: {
-          value: 120
-        }
-      });
-    });
-    expect(onDragEnd).toHaveBeenCalledWith("120");
-    expect(slider.getAttribute("aria-valuenow")).toBe("50");
-  });
-  test("Calls correct function labelFormatCallback", function () {
-    var labelFormatCallback = jest.fn(function (x) {
-      return "".concat(x, "$");
-    });
-
-    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
-      minValue: 0,
-      maxValue: 100,
-      showLimitsValues: true,
-      showInput: true,
-      value: 25,
-      labelFormatCallback: labelFormatCallback
-    })),
-        getByText = _render9.getByText;
-
-    expect(getByText("0$")).toBeTruthy();
-    expect(getByText("100$")).toBeTruthy();
-    expect(labelFormatCallback).toHaveBeenCalledTimes(2);
-  });
-  test("Change value correctly to 0 from external function", function () {
-    var onChange = jest.fn();
-
-    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
-      minValue: 0,
-      maxValue: 100,
-      onChange: onChange,
-      showLimitsValues: true,
-      value: 13,
-      showInput: true
-    })),
-        rerender = _render10.rerender,
-        getByRole = _render10.getByRole;
-
-    var slider = getByRole("slider");
-
-    _userEvent["default"].tab();
-
-    _react2.fireEvent.keyDown(slider, {
-      key: "ArrowRight",
-      code: "ArrowRight",
-      keyCode: 39,
-      charCode: 39
-    });
-
-    rerender( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
-      minValue: 0,
-      maxValue: 100,
-      onChange: onChange,
-      showLimitsValues: true,
-      value: 0,
-      showInput: true
-    }));
-    expect(slider.getAttribute("aria-valuenow")).toBe("0");
-  });
-});

package/slider/types.d.ts

@@ -1,86 +0,0 @@
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Margin = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-declare type Props = {
-    /**
-     * Text to be placed above the slider.
-     */
-    label?: string;
-    /**
-     * Name attribute of the input element.
-     */
-    name?: string;
-    /**
-     * Initial value of the slider, only when it is uncontrolled.
-     */
-    defaultValue?: number;
-    /**
-     * The selected value. If undefined, the component will be uncontrolled and the value will be managed internally by the component.
-     */
-    value?: number;
-    /**
-     * Helper text to be placed above the slider.
-     */
-    helperText?: string;
-    /**
-     * The minimum value available for selection.
-     */
-    minValue?: number;
-    /**
-     * The maximum value available for selection.
-     */
-    maxValue?: number;
-    /**
-     * The step interval between values available for selection.
-     */
-    step?: number;
-    /**
-     * Whether the min/max value labels should be displayed next to the slider
-     */
-    showLimitsValues?: boolean;
-    /**
-     * Whether the input element for displaying/controlling the slider value should be displayed next to the slider.
-     */
-    showInput?: boolean;
-    /**
-     * If true, the component will be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether the marks between each step should be shown or not.
-     */
-    marks?: boolean;
-    /**
-     * This function will be called when the slider changes its value, as it's being dragged.
-     * The new value will be passed as a parameter when this function is executed.
-     */
-    onChange?: (value: number) => void;
-    /**
-     * This function will be called when the slider changes its value, but only when the thumb is released.
-     * The new value will be passed as a parameter when this function is executed.
-     */
-    onDragEnd?: (value: number) => void;
-    /**
-     * This function will be used to format the labels displayed next to the slider.
-     * The value will be passed as parameter and the function must return the formatted value.
-     */
-    labelFormatCallback?: (value: number) => string;
-    /**
-     * 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;
-    /**
-     * Size of the component.
-     */
-    size?: "medium" | "large" | "fillParent";
-};
-/**
- * Reference to the component.
- */
-export declare type RefType = HTMLDivElement;
-export default Props;

package/slider/types.js

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

package/spinner/Spinner.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import SpinnerPropsType from "./types";
-declare const DxcSpinner: ({ label, value, showValue, mode, margin, }: SpinnerPropsType) => JSX.Element;
-export default DxcSpinner;