@dxc-technology/halstack-react 0.0.0-c291a0c → 0.0.0-c3c521c

package/wizard/Wizard.stories.tsx

@@ -3,6 +3,7 @@ import DxcWizard from "./Wizard";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { userEvent, within } from "@storybook/testing-library";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Wizard",
@@ -36,6 +37,7 @@ const stepWithLabel = [
     label: "Forth step",
   },
 ];
+
 const stepWithLabelDescription = [
   {
     label: "First step",
@@ -56,6 +58,7 @@ const stepWithLabelDescription = [
     valid: false,
   },
 ];
+
 const stepWithLongDescription = [
   {
     label: "First step",
@@ -73,6 +76,7 @@ const stepWithLongDescription = [
       "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. ",
   },
 ];
+
 const stepDisabled = [
   {
     label: "First step",
@@ -98,6 +102,7 @@ const stepDisabled = [
     disabled: true,
   },
 ];
+
 const stepIcons = [
   {
     label: "First step",
@@ -112,6 +117,7 @@ const stepIcons = [
     icon: favoriteSVG,
   },
 ];
+
 const stepLargeIcons = [
   {
     label: "First step",
@@ -127,19 +133,41 @@ const stepLargeIcons = [
   },
 ];
 
+const opinionatedTheme = {
+  wizard: {
+    baseColor: "#5f249f",
+    fontColor: "#000000",
+    selectedStepFontColor: "#ffffff",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
       <Title title="Current step in the third step, labels and description" theme="light" level={4} />
       <DxcWizard defaultCurrentStep={2} steps={stepWithLabelDescription}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="With long description in horizontal" theme="light" level={4} />
       <DxcWizard steps={stepWithLongDescription}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="With long description in vertical" theme="light" level={4} />
       <DxcWizard mode="vertical" steps={stepWithLongDescription}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="Disabled steps" theme="light" level={4} />
       <DxcWizard steps={stepDisabled}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused steps" theme="light" level={4} />
+      <DxcWizard steps={stepIcons}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="With icons" theme="light" level={4} />
       <DxcWizard steps={stepIcons}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
       <Title title="With large icons" theme="light" level={4} />
       <DxcWizard steps={stepLargeIcons}></DxcWizard>
     </ExampleContainer>
@@ -201,10 +229,21 @@ export const Chromatic = () => (
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcWizard mode="vertical" margin="xxlarge" steps={stepWithLabel}></DxcWizard>
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcWizard defaultCurrentStep={2} steps={stepWithLabelDescription}></DxcWizard>
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 
-const WizardSelected = () => <DxcWizard steps={stepWithLabel}></DxcWizard>;
+const WizardSelected = () => (
+  <ExampleContainer>
+    <Title title="Clicked step" theme="light" level={4} />
+    <DxcWizard steps={stepWithLabel} mode="vertical"></DxcWizard>
+  </ExampleContainer>
+);
 
 export const WizardStepActived = WizardSelected.bind({});
 WizardStepActived.play = async ({ canvasElement }) => {

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" />
-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.
      */
@@ -29,7 +29,7 @@ declare type Step = {
      */
     valid?: boolean;
 };
-declare type Props = {
+type Props = {
     /**
      * The wizard can be showed in horizontal or 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/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/inline/Inline.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import InlineProps from "./types";
-declare const DxcInline: ({ alignX, alignY, as, divider, gutter, reverse, children, }: InlineProps) => JSX.Element;
-export default DxcInline;

package/inline/Inline.js

@@ -1,54 +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 _templateObject, _templateObject2;
-
-var DxcInline = function DxcInline(_ref) {
-  var _ref$alignX = _ref.alignX,
-      alignX = _ref$alignX === void 0 ? "start" : _ref$alignX,
-      _ref$alignY = _ref.alignY,
-      alignY = _ref$alignY === void 0 ? "stretch" : _ref$alignY,
-      _ref$as = _ref.as,
-      as = _ref$as === void 0 ? "div" : _ref$as,
-      _ref$divider = _ref.divider,
-      divider = _ref$divider === void 0 ? false : _ref$divider,
-      _ref$gutter = _ref.gutter,
-      gutter = _ref$gutter === void 0 ? "0rem" : _ref$gutter,
-      _ref$reverse = _ref.reverse,
-      reverse = _ref$reverse === void 0 ? false : _ref$reverse,
-      children = _ref.children;
-  return /*#__PURE__*/_react["default"].createElement(Inline, {
-    as: as,
-    alignX: alignX,
-    alignY: alignY,
-    gutter: gutter,
-    reverse: reverse
-  }, _react["default"].Children.map(children, function (child, index) {
-    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, child, divider && index !== _react["default"].Children.count(children) - 1 && /*#__PURE__*/_react["default"].createElement(Divider, null));
-  }));
-};
-
-var Inline = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  ", "\n  flex-wrap: wrap;\n"])), function (_ref2) {
-  var alignX = _ref2.alignX,
-      alignY = _ref2.alignY,
-      gutter = _ref2.gutter,
-      reverse = _ref2.reverse;
-  return "\n    flex-direction: ".concat(reverse ? "row-reverse" : "row", ";\n    align-items: ").concat(alignY === "start" || alignY === "end" ? "flex-".concat(alignY) : alignY, ";\n    justify-content: ").concat(alignX === "start" || alignX === "end" ? "flex-".concat(alignX) : alignX, ";\n    gap: ").concat(gutter, ";\n  ");
-});
-
-var Divider = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 1px;\n  background-color: #999999;\n"])));
-
-var _default = DxcInline;
-exports["default"] = _default;