@dxc-technology/halstack-react 0.0.0-1b8b460 → 0.0.0-1bfe223

package/wizard/Wizard.test.js

@@ -1,25 +1,20 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _react2 = require("@testing-library/react");
-
-var _Wizard = _interopRequireDefault(require("./Wizard"));
-
+var _Wizard = _interopRequireDefault(require("./Wizard.tsx"));
 describe("Wizard components tests", function () {
   test("Wizard renders with correct steps", function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
-      steps: [{
-        label: "first-step"
-      }, {
-        label: "second-step"
-      }]
-    })),
-        getByText = _render.getByText,
-        getAllByRole = _render.getAllByRole;
-
+        steps: [{
+          label: "first-step"
+        }, {
+          label: "second-step"
+        }]
+      })),
+      getByText = _render.getByText,
+      getAllByRole = _render.getAllByRole;
     var steps = getAllByRole("button");
     expect(getByText("first-step")).toBeTruthy();
     expect(getByText("second-step")).toBeTruthy();
@@ -28,112 +23,90 @@ describe("Wizard components tests", function () {
   });
   test("Wizard renders with initially selected step", function () {
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
-      defaultCurrentStep: 1,
-      steps: [{
-        label: "first-step"
-      }, {
-        label: "second-step"
-      }]
-    })),
-        getAllByRole = _render2.getAllByRole;
-
+        defaultCurrentStep: 1,
+        steps: [{
+          label: "first-step"
+        }, {
+          label: "second-step"
+        }]
+      })),
+      getAllByRole = _render2.getAllByRole;
     var steps = getAllByRole("button");
     expect(steps[1].getAttribute("aria-current")).toBe("step");
   });
   test("Click on step text", function () {
     var onClick = jest.fn();
-
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
-      onStepClick: onClick,
-      steps: [{
-        label: "first-step"
-      }]
-    })),
-        getByText = _render3.getByText;
-
+        onStepClick: onClick,
+        steps: [{
+          label: "first-step"
+        }]
+      })),
+      getByText = _render3.getByText;
     var step = getByText("first-step");
-
     _react2.fireEvent.click(step);
-
     expect(onClick).toHaveBeenCalled();
   });
   test("Click on step description", function () {
     var onClick = jest.fn();
-
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
-      onStepClick: onClick,
-      steps: [{
-        label: "first-step",
-        description: "step-description"
-      }]
-    })),
-        getByText = _render4.getByText;
-
+        onStepClick: onClick,
+        steps: [{
+          label: "first-step",
+          description: "step-description"
+        }]
+      })),
+      getByText = _render4.getByText;
     var step = getByText("step-description");
-
     _react2.fireEvent.click(step);
-
     expect(onClick).toHaveBeenCalled();
   });
   test("Click on step number", function () {
     var onClick = jest.fn();
-
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
-      onStepClick: onClick,
-      steps: [{
-        label: "first-step"
-      }]
-    })),
-        getByText = _render5.getByText;
-
+        onStepClick: onClick,
+        steps: [{
+          label: "first-step"
+        }]
+      })),
+      getByText = _render5.getByText;
     var step = getByText("1");
-
     _react2.fireEvent.click(step);
-
     expect(onClick).toHaveBeenCalled();
   });
   test("Click on disable step", function () {
     var onClick = jest.fn();
-
     var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
-      onStepClick: onClick,
-      steps: [{
-        label: "first-step"
-      }, {
-        label: "second-step",
-        disabled: true
-      }]
-    })),
-        getByText = _render6.getByText;
-
+        onStepClick: onClick,
+        steps: [{
+          label: "first-step"
+        }, {
+          label: "second-step",
+          disabled: true
+        }]
+      })),
+      getByText = _render6.getByText;
     var step = getByText("second-step");
-
     _react2.fireEvent.click(step);
-
     expect(onClick).toHaveBeenCalledTimes(0);
   });
   test("Controlled wizard function is called", function () {
     var onClick = jest.fn(function (i) {
       return i;
     });
-
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Wizard["default"], {
-      currentStep: 0,
-      onStepClick: onClick,
-      steps: [{
-        label: "first-step"
-      }, {
-        label: "second-step"
-      }]
-    })),
-        getAllByRole = _render7.getAllByRole;
-
+        currentStep: 0,
+        onStepClick: onClick,
+        steps: [{
+          label: "first-step"
+        }, {
+          label: "second-step"
+        }]
+      })),
+      getAllByRole = _render7.getAllByRole;
     var steps = getAllByRole("button");
-
     _react2.fireEvent.click(steps[1]);
-
     _react2.fireEvent.click(steps[0]);
-
     expect(onClick).toHaveBeenCalledTimes(2);
     expect(onClick).toHaveBeenNthCalledWith(1, 1);
     expect(onClick).toHaveBeenNthCalledWith(2, 0);

package/wizard/types.d.ts

@@ -1,13 +1,13 @@
 /// <reference types="react" />
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Margin = {
+type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+type Margin = {
     top?: Space;
     bottom?: Space;
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-declare type Step = {
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+export type StepProps = {
     /**
      * Step label.
      */
@@ -29,12 +29,11 @@ declare type Step = {
      */
     valid?: boolean;
 };
-export declare type Mode = "horizontal" | "vertical";
-declare type Props = {
+type Props = {
     /**
      * The wizard can be showed in horizontal or vertical.
      */
-    mode?: Mode;
+    mode?: "horizontal" | "vertical";
     /**
      * Initially selected step, only when it is uncontrolled.
      */
@@ -47,11 +46,11 @@ declare type Props = {
      * This function will be called when the user clicks a step. The step
      * number will be passed as a parameter.
      */
-    onStepClick?: (newCurrentStep: number) => void;
+    onStepClick?: (currentStep: number) => void;
     /**
      * An array of objects representing the steps.
      */
-    steps: Step[];
+    steps: StepProps[];
     /**
      * 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.

package/number-input/NumberInputContext.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import NumberInputContextPropsType from "./numberInputContextTypes";
-declare const NumberInputContext: React.Context<NumberInputContextPropsType>;
-export default NumberInputContext;

package/number-input/NumberInputContext.js

@@ -1,19 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var defaultState = {
-  stepNumber: 1
-};
-
-var NumberInputContext = /*#__PURE__*/_react["default"].createContext(defaultState);
-
-var _default = NumberInputContext;
-exports["default"] = _default;

package/number-input/numberInputContextTypes.d.ts

@@ -1,19 +0,0 @@
-declare type Props = {
-    /**
-     * Type of the input.
-     */
-    typeNumber?: string;
-    /**
-     * Minimum value allowed by the number input.
-     */
-    minNumber?: number;
-    /**
-     * Maximum value allowed by the number input.
-     */
-    maxNumber?: number;
-    /**
-     * The step interval to use when using the up and down arrows to adjust the value.
-     */
-    stepNumber?: number;
-};
-export default Props;

package/resultsetTable/Icons.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-declare const icons: {
-    arrowUp: JSX.Element;
-    arrowDown: JSX.Element;
-    bothArrows: JSX.Element;
-};
-export default icons;

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/tabs-nav/Tab.js

@@ -1,130 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Badge = _interopRequireDefault(require("../badge/Badge"));
-
-var _NavTabs = require("./NavTabs");
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
-var _excluded = ["href", "active", "icon", "disabled", "notificationNumber", "children"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var DxcTab = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, _ref2) {
-  var href = _ref.href,
-      _ref$active = _ref.active,
-      active = _ref$active === void 0 ? false : _ref$active,
-      icon = _ref.icon,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-      _ref$notificationNumb = _ref.notificationNumber,
-      notificationNumber = _ref$notificationNumb === void 0 ? false : _ref$notificationNumb,
-      children = _ref.children,
-      otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var tabRef = /*#__PURE__*/(0, _react.createRef)();
-
-  var _useContext = (0, _react.useContext)(_NavTabs.NavTabsContext),
-      iconPosition = _useContext.iconPosition,
-      tabIndex = _useContext.tabIndex,
-      hasIcons = _useContext.hasIcons,
-      focusedLabel = _useContext.focusedLabel;
-
-  (0, _react.useLayoutEffect)(function () {
-    var _tabRef$current;
-
-    focusedLabel === children.toString() && (tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current = tabRef.current) === null || _tabRef$current === void 0 ? void 0 : _tabRef$current.focus());
-  }, [focusedLabel]);
-
-  var handleOnKeyDown = function handleOnKeyDown(event) {
-    var _tabRef$current2;
-
-    switch (event.key) {
-      case " ":
-      case "Enter":
-        tabRef === null || tabRef === void 0 ? void 0 : (_tabRef$current2 = tabRef.current) === null || _tabRef$current2 === void 0 ? void 0 : _tabRef$current2.click();
-        event.preventDefault();
-        break;
-    }
-  };
-
-  return /*#__PURE__*/_react["default"].createElement(TabContainer, {
-    active: active,
-    role: "tab",
-    "aria-selected": active
-  }, /*#__PURE__*/_react["default"].createElement(Tab, (0, _extends2["default"])({
-    href: !disabled && href ? href : undefined,
-    disabled: disabled,
-    iconPosition: iconPosition,
-    hasIcon: hasIcons,
-    ref: function ref(anchorRef) {
-      tabRef.current = anchorRef;
-
-      if (_ref2) {
-        if (typeof _ref2 === "function") _ref2(anchorRef);else {
-          _ref2.current = anchorRef;
-        }
-      }
-    },
-    onKeyDown: handleOnKeyDown,
-    tabIndex: active ? tabIndex : -1
-  }, otherProps), icon && /*#__PURE__*/_react["default"].createElement(TabIconContainer, {
-    iconPosition: iconPosition
-  }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(TabIcon, {
-    src: icon
-  }) : icon), /*#__PURE__*/_react["default"].createElement(LabelContainer, null, children, notificationNumber && /*#__PURE__*/_react["default"].createElement(BadgeContainer, null, /*#__PURE__*/_react["default"].createElement(_Badge["default"], {
-    notificationText: notificationNumber > 99 ? "+99" : notificationNumber,
-    disabled: disabled
-  })))));
-});
-
-var TabContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  border-bottom: 2px solid ", ";\n"])), function (props) {
-  return props.active ? "#6f2c91" : "#0000001a";
-});
-
-var Tab = _styledComponents["default"].a(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: center;\n  align-items: center;\n\n  font-family: \"Open Sans\";\n  font-style: normal;\n  font-weight: 400;\n  font-size: 1rem;\n  color: ", ";\n  text-decoration-color: transparent;\n  cursor: ", ";\n\n  height: ", ";\n  min-width: 164px;\n  margin: 0.5rem;\n  padding: 0.375rem;\n\n  border-radius: 4px;\n\n  ", "\n"])), function (props) {
-  return props.hasIcon && props.iconPosition === "top" ? "column" : "row";
-}, function (props) {
-  return props.disabled ? "#0000004D" : "#333333";
-}, function (props) {
-  return props.disabled ? "not-allowed" : "pointer";
-}, function (props) {
-  return props.hasIcon && props.iconPosition === "top" ? "66px" : "32px";
-}, function (props) {
-  return !props.disabled && ":hover {\n    background: #0000000D;\n  }\n\n  :focus {\n    outline: 2px solid #33aaff};\n  }\n\n  :active {\n    background: #0000001A;\n    outline: 2px solid #33aaff};\n  }";
-});
-
-var TabIcon = _styledComponents["default"].img(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
-
-var TabIconContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  max-height: 24px;\n  max-width: 24px;\n  margin-bottom: ", ";\n  margin-right: ", ";\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  img,\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) {
-  return props.iconPosition === "top" && "0.375rem";
-}, function (props) {
-  return props.iconPosition === "left" && "0.625rem";
-});
-
-var LabelContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n"])));
-
-var BadgeContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: 0.5rem;\n"])));
-
-var _default = DxcTab;
-exports["default"] = _default;