@dxc-technology/halstack-react 0.0.0-74ba970 → 0.0.0-74c93cf

package/resultsetTable/ResultsetTable.test.js

@@ -1,348 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
-var _ResultsetTable = _interopRequireDefault(require("./ResultsetTable"));
-
-// Mocking DOMRect for Radix Primitive Popover
-global.globalThis = global;
-
-global.ResizeObserver = /*#__PURE__*/function () {
-  function ResizeObserver(cb) {
-    (0, _classCallCheck2["default"])(this, ResizeObserver);
-    this.cb = cb;
-  }
-
-  (0, _createClass2["default"])(ResizeObserver, [{
-    key: "observe",
-    value: function observe() {
-      this.cb([{
-        borderBoxSize: {
-          inlineSize: 0,
-          blockSize: 0
-        }
-      }]);
-    }
-  }, {
-    key: "unobserve",
-    value: function unobserve() {}
-  }]);
-  return ResizeObserver;
-}();
-
-global.DOMRect = {
-  fromRect: function fromRect() {
-    return {
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      width: 0,
-      height: 0
-    };
-  }
-};
-var columns = [{
-  displayValue: "Id",
-  isSortable: false
-}, {
-  displayValue: "Name",
-  isSortable: true
-}, {
-  displayValue: "City",
-  isSortable: false
-}];
-var rows = [[{
-  displayValue: "001",
-  sortValue: "001"
-}, {
-  displayValue: "Peter",
-  sortValue: "Peter"
-}, {
-  displayValue: "Oviedo",
-  sortValue: "Oviedo"
-}], [{
-  displayValue: "002",
-  sortValue: "002"
-}, {
-  displayValue: "Louis",
-  sortValue: "Louis"
-}, {
-  displayValue: "Oviedo",
-  sortValue: "Oviedo"
-}, {
-  displayValue: ""
-}], [{
-  displayValue: "003",
-  sortValue: "003"
-}, {
-  displayValue: "Lana",
-  sortValue: "Lana"
-}, {
-  displayValue: "Albacete",
-  sortValue: "Albacete"
-}], [{
-  displayValue: "004",
-  sortValue: "004"
-}, {
-  displayValue: "Rick",
-  sortValue: "Rick"
-}, {
-  displayValue: "Albacete",
-  sortValue: "Albacete"
-}], [{
-  displayValue: "005",
-  sortValue: "005"
-}, {
-  displayValue: "Mark",
-  sortValue: "Mark"
-}, {
-  displayValue: "Madrid",
-  sortValue: "Madrid"
-}], [{
-  displayValue: "006",
-  sortValue: "006"
-}, {
-  displayValue: "Cris",
-  sortValue: "Cris"
-}, {
-  displayValue: "Barcelona",
-  sortValue: "Barcelona"
-}, {
-  displayValue: ""
-}], [{
-  displayValue: "007",
-  sortValue: "007"
-}, {
-  displayValue: "Susan",
-  sortValue: "Susan"
-}, {
-  displayValue: "Madrid",
-  sortValue: "Madrid"
-}], [{
-  displayValue: "008",
-  sortValue: "008"
-}, {
-  displayValue: "Tina",
-  sortValue: "Tina"
-}, {
-  displayValue: "Barcelona",
-  sortValue: "Barcelona"
-}], [{
-  displayValue: "009",
-  sortValue: "009"
-}, {
-  displayValue: "Kevin",
-  sortValue: "Kevin"
-}, {
-  displayValue: "Oviedo",
-  sortValue: "Oviedo"
-}, {
-  displayValue: ""
-}], [{
-  displayValue: "010",
-  sortValue: "010"
-}, {
-  displayValue: "Cosmin",
-  sortValue: "Cosmin"
-}, {
-  displayValue: "Barcelona",
-  sortValue: "Barcelona"
-}, {
-  displayValue: ""
-}]];
-var rows2 = [[{
-  displayValue: "546",
-  sortValue: "465"
-}, {
-  displayValue: "OtherValue",
-  sortValue: "OtherValue"
-}, {
-  displayValue: "OtherValue",
-  sortValue: "OtherValue"
-}], [{
-  displayValue: "978",
-  sortValue: "465"
-}, {
-  displayValue: "OtherValue",
-  sortValue: "OtherValue"
-}, {
-  displayValue: "OtherValue",
-  sortValue: "OtherValue"
-}, {
-  displayValue: ""
-}], [{
-  displayValue: "678",
-  sortValue: "344"
-}, {
-  displayValue: "OtherValue",
-  sortValue: "OtherValue"
-}, {
-  displayValue: "OtherValue",
-  sortValue: "OtherValue"
-}]];
-describe("ResultsetTable component tests", function () {
-  test("ResultsetTable rendered correctly", function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-      columns: columns,
-      rows: rows,
-      itemsPerPage: 3
-    })),
-        getByText = _render.getByText;
-
-    expect(getByText("Peter")).toBeTruthy();
-  });
-  test("Resultsettable shows as many rows as itemsPerPage", function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-      columns: columns,
-      rows: rows,
-      itemsPerPage: 3
-    })),
-        getAllByRole = _render2.getAllByRole;
-
-    expect(getAllByRole("row").length - 1).toEqual(3);
-  });
-  test("Resultsettable shows rows on second page", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-      columns: columns,
-      rows: rows,
-      itemsPerPage: 3
-    })),
-        getByText = _render3.getByText,
-        getAllByRole = _render3.getAllByRole;
-
-    expect(getByText("Peter")).toBeTruthy();
-    expect(getByText("Louis")).toBeTruthy();
-    expect(getByText("Lana")).toBeTruthy();
-    expect(getAllByRole("row").length - 1).toEqual(3);
-    var nextButton = getAllByRole("button")[2];
-
-    _react2.fireEvent.click(nextButton);
-
-    expect(getByText("4 to 6 of 10")).toBeTruthy(); // expect(getByText("Page: 2 of 4")).toBeTruthy();
-
-    expect(getByText("Rick")).toBeTruthy();
-    expect(getByText("Mark")).toBeTruthy();
-    expect(getByText("Cris")).toBeTruthy();
-    expect(getAllByRole("row").length - 1).toEqual(3);
-  });
-  test("Resultsettable goToPage works as expected", function () {
-    window.HTMLElement.prototype.scrollIntoView = function () {};
-
-    window.HTMLElement.prototype.scrollTo = function () {};
-
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-      columns: columns,
-      showGoToPage: true,
-      rows: rows,
-      itemsPerPage: 3
-    })),
-        getByText = _render4.getByText,
-        getAllByRole = _render4.getAllByRole,
-        getByRole = _render4.getByRole;
-
-    expect(getByText("Peter")).toBeTruthy();
-    expect(getByText("Louis")).toBeTruthy();
-    expect(getByText("Lana")).toBeTruthy();
-    expect(getAllByRole("row").length - 1).toEqual(3);
-    var goToPageSelect = getAllByRole("button")[2];
-    (0, _react2.act)(function () {
-      _userEvent["default"].click(goToPageSelect);
-    });
-    var goToPageOption = getByText("2");
-    (0, _react2.act)(function () {
-      _userEvent["default"].click(goToPageOption);
-    });
-    expect(getByText("4 to 6 of 10")).toBeTruthy();
-    expect(getByText("Rick")).toBeTruthy();
-    expect(getByText("Mark")).toBeTruthy();
-    expect(getByText("Cris")).toBeTruthy();
-    expect(getAllByRole("row").length - 1).toEqual(3);
-  });
-  test("Resultsettable going to the last page shows only one row", function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-      columns: columns,
-      rows: rows,
-      itemsPerPage: 3
-    })),
-        getByText = _render5.getByText,
-        getAllByRole = _render5.getAllByRole;
-
-    var lastButton = getAllByRole("button")[3];
-
-    _react2.fireEvent.click(lastButton);
-
-    expect(getByText("10 to 10 of 10")).toBeTruthy();
-    expect(getAllByRole("row")).toHaveLength(2);
-    expect(getByText("Cosmin")).toBeTruthy();
-  });
-  test("Resultsettable sort rows by column", function () {
-    var component = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-      columns: columns,
-      rows: rows,
-      itemsPerPage: 3
-    }));
-    expect(component.queryByText("Peter")).toBeTruthy();
-
-    _react2.fireEvent.click(component.queryByText("Name"));
-
-    expect(component.queryByText("Tina")).not.toBeTruthy();
-    expect(component.queryByText("Cosmin")).toBeTruthy();
-
-    _react2.fireEvent.click(component.queryByText("Name"));
-
-    expect(component.queryByText("Tina")).toBeTruthy();
-    expect(component.queryByText("Cosmin")).not.toBeTruthy();
-  });
-  test("Resultsettable change rows should go to first page", function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-      columns: columns,
-      rows: rows,
-      itemsPerPage: 3
-    })),
-        queryByText = _render6.queryByText,
-        rerender = _render6.rerender;
-
-    expect(queryByText("Peter")).toBeTruthy();
-    rerender( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-      columns: columns,
-      rows: rows2,
-      itemsPerPage: 3
-    }));
-    expect(queryByText("1 to 3 of 3")).toBeTruthy();
-  });
-  test("Resultsettable change itemsPerPage should go to first page", function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-      columns: columns,
-      rows: rows,
-      itemsPerPage: 3,
-      itemsPerPageOptions: [2, 3]
-    })),
-        getAllByRole = _render7.getAllByRole,
-        queryByText = _render7.queryByText,
-        rerender = _render7.rerender;
-
-    var lastButton = getAllByRole("button")[3];
-
-    _react2.fireEvent.click(lastButton);
-
-    expect(getAllByRole("row").length - 1).toEqual(1);
-    rerender( /*#__PURE__*/_react["default"].createElement(_ResultsetTable["default"], {
-      columns: columns,
-      rows: rows,
-      itemsPerPage: 6
-    }));
-    expect(getAllByRole("row").length - 1).toEqual(6);
-    expect(queryByText("Peter")).toBeTruthy();
-  });
-});

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>
-  </>
-);