@dxc-technology/halstack-react 0.0.0-b0ab1e3 → 0.0.0-b0ec7b9

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"));
-
 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" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-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.SVGProps<SVGSVGElement>;
-declare type Step = {
+type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+export type StepProps = {
     /**
      * Step label.
      */
@@ -17,7 +17,7 @@ declare type Step = {
      */
     description?: string;
     /**
-     * Element or path used as the icon displayed in the step.
+     * Material Symbol name or SVG element used as the icon displayed in the step.
      */
     icon?: string | SVG;
     /**
@@ -29,9 +29,9 @@ declare type Step = {
      */
     valid?: boolean;
 };
-declare type Props = {
+type Props = {
     /**
-     * The wizard can be showed in horizontal or vertical.
+     * The wizard can be shown in horizontal or vertical.
      */
     mode?: "horizontal" | "vertical";
     /**
@@ -46,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/common/OpenSans.css

@@ -1,81 +0,0 @@
-
- @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-Light.ttf')
-      format('truetype');
-    font-style: normal;
-    font-weight: 200;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-Regular.ttf')
-      format('truetype');
-    font-style: normal;
-    font-weight: 400;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-SemiBold.ttf')
-      format('truetype');
-    font-style: normal;
-    font-weight: 600;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-Bold.ttf')
-      format('truetype');
-    font-style: normal;
-    font-weight: 700;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-ExtraBold.ttf')
-      format('truetype');
-    font-style: normal;
-    font-weight: 800;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-LightItalic.ttf')
-      format('truetype');
-    font-style: italic;
-    font-weight: 200;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-Italic.ttf')
-      format('truetype');
-    font-style: italic;
-    font-weight: 400;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-SemiBoldItalic.ttf')
-      format('truetype');
-    font-style: italic;
-    font-weight: 600;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-BoldItalic.ttf')
-      format('truetype');
-    font-style: italic;
-    font-weight: 700;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-ExtraBoldItalic.ttf')
-      format('truetype');
-    font-style: italic;
-    font-weight: 800;
-  }
-  

package/common/RequiredComponent.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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _templateObject;
-
-var DxcRequired = function DxcRequired(_ref) {
-  var _ref$theme = _ref.theme,
-      theme = _ref$theme === void 0 ? "light" : _ref$theme;
-  return /*#__PURE__*/_react["default"].createElement(RequiredSpan, null, "*");
-};
-
-var RequiredSpan = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  color: #d0011b;\n  margin-right: 1px;\n  cursor: default;\n"])));
-
-DxcRequired.propTypes = {
-  theme: _propTypes["default"].oneOf(["dark", "light"])
-};
-var _default = DxcRequired;
-exports["default"] = _default;

package/list/List.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import ListPropsType from "./types";
-declare function List({ children, type, gutter }: ListPropsType): JSX.Element;
-export default List;

package/list/List.js

@@ -1,47 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _Stack = _interopRequireDefault(require("../stack/Stack"));
-
-var _Text = _interopRequireDefault(require("../text/Text"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-
-function List(_ref) {
-  var children = _ref.children,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? "disc" : _ref$type,
-      _ref$gutter = _ref.gutter,
-      gutter = _ref$gutter === void 0 ? "xxsmall" : _ref$gutter;
-  return /*#__PURE__*/_react["default"].createElement(_Stack["default"], {
-    as: type === "number" ? "ol" : "ul",
-    gutter: gutter
-  }, _react["default"].Children.map(children, function (child, index) {
-    return /*#__PURE__*/_react["default"].createElement(ListItem, null, type === "number" ? /*#__PURE__*/_react["default"].createElement(Number, null, /*#__PURE__*/_react["default"].createElement(_Text["default"], null, index + 1, ".")) : type === "square" ? /*#__PURE__*/_react["default"].createElement(Square, null) : type === "circle" ? /*#__PURE__*/_react["default"].createElement(Circle, null) : /*#__PURE__*/_react["default"].createElement(Disc, null), child);
-  }));
-}
-
-var Number = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  user-select: none;\n  margin-right: 10px;\n  flex-shrink: 0;\n"])));
-
-var Square = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: black;\n  width: 5px;\n  height: 5px;\n  flex-shrink: 0;\n  margin-top: 10px;\n  margin-right: 10px;\n"])));
-
-var Circle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  border: 1px solid black;\n  flex-shrink: 0;\n  margin-top: 10px;\n  margin-right: 10px;\n  box-sizing: border-box;\n"])));
-
-var Disc = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: black;\n  width: 5px;\n  height: 5px;\n  border-radius: 50%;\n  flex-shrink: 0;\n  margin-top: 10px;\n  margin-right: 10px;\n"])));
-
-var ListItem = _styledComponents["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px;\n  padding: 0px;\n  list-style: none;\n  display: flex;\n"])));
-
-var _default = List;
-exports["default"] = _default;

package/list/List.stories.tsx

@@ -1,95 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import Title from "../../.storybook/components/Title";
-import DxcList from "./List";
-import DxcText from "../text/Text";
-
-export default {
-  title: "List",
-  component: DxcList,
-};
-
-export const Chromatic = () => (
-  <>
-    <Title title="Default list" theme="light" level={4} />
-    <DxcList>
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-    <Title title="Number" theme="light" level={4} />
-    <DxcList type="number">
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-    <Title title="Square" theme="light" level={4} />
-    <DxcList type="square">
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-    <Title title="Circle" theme="light" level={4} />
-    <DxcList type="circle">
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-    <Title title="Multiple lines" theme="light" level={4} />
-    <Container>
-      <DxcList>
-        <DxcText>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua.
-        </DxcText>
-        <DxcText>Text 2.</DxcText>
-      </DxcList>
-    </Container>
-    <Title title="gutter = xxxsmall" theme="light" level={4} />
-    <DxcList gutter="xxsmall">
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-    <Title title="gutter = xxsmall" theme="light" level={4} />
-    <DxcList gutter="xxsmall">
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-    <Title title="gutter = xsmall" theme="light" level={4} />
-    <DxcList gutter="xsmall">
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-    <Title title="gutter = small" theme="light" level={4} />
-    <DxcList gutter="small">
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-    <Title title="gutter = medium" theme="light" level={4} />
-    <DxcList gutter="medium">
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-    <Title title="gutter = large" theme="light" level={4} />
-    <DxcList gutter="large">
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-    <Title title="gutter = xlarge" theme="light" level={4} />
-    <DxcList gutter="xlarge">
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-    <Title title="gutter = xxlarge" theme="light" level={4} />
-    <DxcList gutter="xxlarge">
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-    <Title title="gutter = xxxlarge" theme="light" level={4} />
-    <DxcList gutter="xxxlarge">
-      <DxcText>Text 1.</DxcText>
-      <DxcText>Text 2.</DxcText>
-    </DxcList>
-
-  </>
-);
-
-const Container = styled.div`
-  width: 400px;
-`;

package/list/types.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-declare type Props = {
-    children: React.ReactNode;
-    gutter?: "none" | "xxxsmall" | "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge" | "xxxlarge";
-    type?: "disc" | "circle" | "square" | "number";
-};
-export default Props;

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/paginator/Icons.js

@@ -1,66 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.previousIcon = exports.nextIcon = exports.lastIcon = exports.firstIcon = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var firstIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "12.41",
-  height: "12",
-  viewBox: "0 0 12.41 12"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  id: "Path_2463",
-  "data-name": "Path 2463",
-  d: "M18.41,16.59,13.82,12l4.59-4.59L17,6l-6,6,6,6ZM6,6H8V18H6Z",
-  transform: "translate(-6 -6)"
-}));
-
-exports.firstIcon = firstIcon;
-
-var previousIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "7.41",
-  height: "12",
-  viewBox: "0 0 7.41 12"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  id: "Path_2459",
-  "data-name": "Path 2459",
-  d: "M15.41,7.41,14,6,8,12l6,6,1.41-1.41L10.83,12Z",
-  transform: "translate(-8 -6)"
-}));
-
-exports.previousIcon = previousIcon;
-
-var nextIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "7.41",
-  height: "12",
-  viewBox: "0 0 7.41 12"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  id: "Path_2461",
-  "data-name": "Path 2461",
-  d: "M10,6,8.59,7.41,13.17,12,8.59,16.59,10,18l6-6Z",
-  transform: "translate(-8.59 -6)"
-}));
-
-exports.nextIcon = nextIcon;
-
-var lastIcon = /*#__PURE__*/_react["default"].createElement("svg", {
-  xmlns: "http://www.w3.org/2000/svg",
-  width: "12.41",
-  height: "12",
-  viewBox: "0 0 12.41 12"
-}, /*#__PURE__*/_react["default"].createElement("path", {
-  id: "Path_2465",
-  "data-name": "Path 2465",
-  d: "M5.59,7.41,10.18,12,5.59,16.59,7,18l6-6L7,6ZM16,6h2V18H16Z",
-  transform: "translate(-5.59 -6)"
-}));
-
-exports.lastIcon = lastIcon;