@dxc-technology/halstack-react 0.0.0-0a9608a → 0.0.0-0ab346a

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,6 +133,14 @@ const stepLargeIcons = [
   },
 ];
 
+const opinionatedTheme = {
+  wizard: {
+    baseColor: "#5f249f",
+    fontColor: "#000000",
+    selectedStepFontColor: "#ffffff",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -215,6 +229,12 @@ 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>
   </>
 );
 

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.
+     * The wizard can be shown 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/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/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/resultsetTable/ResultsetTable.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import ResultsetTablePropsType from "./types";
-declare const DxcResultsetTable: ({ columns, rows, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, margin, tabIndex, }: ResultsetTablePropsType) => JSX.Element;
-export default DxcResultsetTable;

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