@dxc-technology/halstack-react 0.0.0-84c9364 → 0.0.0-850ec24

package/link/Link.stories.tsx

@@ -21,6 +21,7 @@ const icon = (
 
 export const Chromatic = () => (
   <>
+    <Title title="With anchor" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Disabled" theme="light" level={4} />
       <DxcLink text="Test" disabled></DxcLink>
@@ -49,6 +50,81 @@ export const Chromatic = () => (
       <Title title="Inherit color" theme="light" level={4} />
       This is a <DxcLink text="Test" inheritColor={true}></DxcLink>.
     </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="With brackets and focus" theme="light" level={4} />
+      This is a (<DxcLink text="Test" inheritColor={true}></DxcLink>).
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Long text with hover" theme="light" level={4} />
+      Lorem <DxcLink text="Test" href="https://www.google.com"></DxcLink> 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. Duis aute irure dolor in reprehenderit in
+      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+      in culpa qui officia deserunt mollit anim id est laborum.
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Long text with focus" theme="light" level={4} />
+      Lorem <DxcLink text="Test" href="https://www.google.com"></DxcLink> 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. Duis aute irure dolor in reprehenderit in
+      voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
+      in culpa qui officia deserunt mollit anim id est laborum.
+    </ExampleContainer>
+    <Title title="With button" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcLink text="Test" onClick={() => {}} disabled></DxcLink>
+      <Title title="Icon before" theme="light" level={4} />
+      <DxcLink text="Test" onClick={() => {}} href="https://www.google.com" icon={icon} iconPosition="before"></DxcLink>
+      <Title title="Icon after" theme="light" level={4} />
+      <DxcLink
+        text="Test"
+        onClick={() => {}}
+        href="https://www.youtube.com/"
+        icon={icon}
+        iconPosition="after"
+      ></DxcLink>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="With link hovered" theme="light" level={4} />
+      <DxcLink text="Test" onClick={() => {}} href="https://www.dxc.com"></DxcLink>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="With link focused" theme="light" level={4} />
+      <DxcLink text="Test" onClick={() => {}} href="https://www.dxc.com"></DxcLink>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="With link active" theme="light" level={4} />
+      <DxcLink text="Test" onClick={() => {}} href="https://www.dxc.com"></DxcLink>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-visited">
+      <Title title="With link visited" theme="light" level={4} />
+      <DxcLink text="Test" onClick={() => {}} href="https://www.amazon.com"></DxcLink>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Inherit color" theme="light" level={4} />
+      This is a <DxcLink text="Test" onClick={() => {}} inheritColor={true}></DxcLink>.
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="With brackets and focus" theme="light" level={4} />
+      This is a (<DxcLink text="Test" onClick={() => {}} inheritColor={true}></DxcLink>).
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Long text with hover" theme="light" level={4} />
+      Lorem <DxcLink text="Test" onClick={() => {}} href="https://www.google.com"></DxcLink> 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. Duis aute irure dolor
+      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Long text with focus" theme="light" level={4} />
+      Lorem <DxcLink text="Test" onClick={() => {}} href="https://www.google.com"></DxcLink> 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. Duis aute irure dolor
+      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
+      non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "0.0.0-84c9364",
+  "version": "0.0.0-850ec24",
   "description": "DXC Halstack React components library",
   "repository": "dxc-technology/halstack-react",
   "homepage": "http://developer.dxc.com/tools/react",

package/radio/types.d.ts

@@ -42,8 +42,8 @@ declare type Props = {
      */
     onClick?: (val: boolean) => void;
     /**
-     * Size of the margin to be applied to the component. You can pass an object with 'top',
-     * 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     * 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.
      */
     margin?: Space | Margin;
     /**

package/slider/Slider.js

@@ -150,7 +150,7 @@ var DxcSlider = function DxcSlider(_ref) {
 };
 
 var sizes = {
-  medium: "240px",
+  medium: "360px",
   large: "480px",
   fillParent: "100%"
 };
@@ -201,7 +201,7 @@ var HelperText = _styledComponents["default"].span(_templateObject3 || (_templat
   return props.theme.helperTextLineHeight;
 });
 
-var SliderContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  height: 48px;\n  align-items: center;\n\n  .MultiSlider-root {\n    display: flex;\n    align-items: center;\n  }\n  .MuiSlider-container {\n    padding: 30px 24px;\n  }\n  .MuiSlider-root.Mui-disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n  .Mui-disabled {\n    & .MuiSlider-thumb {\n      height: ", ";\n      width: ", ";\n      background-color: ", ";\n      top: ", ";\n    }\n    & .MuiSlider-track {\n      background-color: ", ";\n    }\n    & .MuiSlider-rail {\n      background-color: ", ";\n    }\n    & > .MuiSlider-mark.MuiSlider-markActive {\n      background-color: ", " !important;\n    }\n    & > .MuiSlider-mark {\n      background-color: ", ";\n      height: ", ";\n      width: ", ";\n      border-radius: 18px;\n      top: ", ";\n    }\n  }\n  .MuiSlider-thumb {\n    height: ", ";\n    width: ", ";\n    background-color: ", ";\n    top: ", ";\n    border-radius: 9999px;\n\n    :hover,\n    &.Mui-focusVisible {\n      box-shadow: none;\n    }\n    &.MuiSlider-active {\n      box-shadow: none;\n    }\n    :focus {\n      outline: ", "\n        auto 1px;\n      outline-offset: 2px;\n      background-color: ", ";\n    }\n    :hover {\n      background-color: ", ";\n      transform: scale(", ");\n      transform-origin: center;\n      height: ", ";\n      width: ", ";\n      top: ", ";\n    }\n    :active {\n      background-color: ", ";\n      transform: scale(", ");\n      transform-origin: center;\n    }\n  }\n  .MuiSlider-track {\n    background-color: ", ";\n    height: ", ";\n    top: ", ";\n    border-radius: 9999px;\n  }\n  .MuiSlider-track.MuiSlider-trackAfter {\n    background-color: ", ";\n  }\n  .MuiSlider-rail {\n    background-color: ", ";\n    height: ", ";\n    top: ", ";\n  }\n  .MuiSlider-mark.MuiSlider-markActive {\n    background-color: ", ";\n  }\n  .MuiSlider-mark {\n    background-color: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: 18px;\n    top: ", ";\n  }\n"])), function (props) {
+var SliderContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  height: 48px;\n  align-items: center;\n\n  .MuiSlider-root {\n    min-width: 15rem;\n  }\n  .MuiSlider-container {\n    padding: 30px 24px;\n  }\n  .MuiSlider-root.Mui-disabled {\n    color: ", ";\n    cursor: not-allowed;\n  }\n  .Mui-disabled {\n    & .MuiSlider-thumb {\n      height: ", ";\n      width: ", ";\n      background-color: ", ";\n      top: ", ";\n    }\n    & .MuiSlider-track {\n      background-color: ", ";\n    }\n    & .MuiSlider-rail {\n      background-color: ", ";\n    }\n    & > .MuiSlider-mark.MuiSlider-markActive {\n      background-color: ", " !important;\n    }\n    & > .MuiSlider-mark {\n      background-color: ", ";\n      height: ", ";\n      width: ", ";\n      border-radius: 18px;\n      top: ", ";\n    }\n  }\n  .MuiSlider-thumb {\n    height: ", ";\n    width: ", ";\n    background-color: ", ";\n    top: ", ";\n    border-radius: 9999px;\n\n    :hover,\n    &.Mui-focusVisible {\n      box-shadow: none;\n    }\n    &.MuiSlider-active {\n      box-shadow: none;\n    }\n    :focus {\n      outline: ", "\n        auto 1px;\n      outline-offset: 2px;\n      background-color: ", ";\n    }\n    :hover {\n      background-color: ", ";\n      transform: scale(", ");\n      transform-origin: center;\n      height: ", ";\n      width: ", ";\n      top: ", ";\n    }\n    :active {\n      background-color: ", ";\n      transform: scale(", ");\n      transform-origin: center;\n    }\n  }\n  .MuiSlider-track {\n    background-color: ", ";\n    height: ", ";\n    top: ", ";\n    border-radius: 9999px;\n  }\n  .MuiSlider-track.MuiSlider-trackAfter {\n    background-color: ", ";\n  }\n  .MuiSlider-rail {\n    background-color: ", ";\n    height: ", ";\n    top: ", ";\n  }\n  .MuiSlider-mark.MuiSlider-markActive {\n    background-color: ", ";\n  }\n  .MuiSlider-mark {\n    background-color: ", ";\n    height: ", ";\n    width: ", ";\n    border-radius: 18px;\n    top: ", ";\n  }\n"])), function (props) {
   return props.backgroundType === "dark" ? props.theme.disabledThumbBackgroundColorOnDark : props.theme.disabledThumbBackgroundColor;
 }, function (props) {
   return props.theme.thumbHeight;
@@ -277,7 +277,7 @@ var SliderContainer = _styledComponents["default"].div(_templateObject4 || (_tem
   return props.theme.tickVerticalPosition;
 });
 
-var MinLabelContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  margin-right: ", ";\n"])), function (props) {
+var MinLabelContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  white-space: nowrap;\n  margin-right: ", ";\n"])), function (props) {
   return props.disabled ? props.theme.disabledLimitValuesFontColor : props.backgroundType === "dark" ? props.theme.limitValuesFontColorOnDark : props.theme.limitValuesFontColor;
 }, function (props) {
   return props.theme.fontFamily;
@@ -293,7 +293,7 @@ var MinLabelContainer = _styledComponents["default"].span(_templateObject5 || (_
   return props.theme.floorLabelMarginRight;
 });
 
-var MaxLabelContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  margin-left: ", ";\n"])), function (props) {
+var MaxLabelContainer = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", ";\n\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  white-space: nowrap;\n  margin-left: ", ";\n"])), function (props) {
   return props.disabled ? props.theme.disabledLimitValuesFontColor : props.backgroundType === "dark" ? props.theme.limitValuesFontColorOnDark : props.theme.limitValuesFontColor;
 }, function (props) {
   return props.theme.fontFamily;

package/slider/Slider.stories.tsx

@@ -4,13 +4,14 @@ import { BackgroundColorProvider } from "../BackgroundColorContext";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DarkContainer from "../../.storybook/components/DarkSection";
-import { userEvent, within } from "@storybook/testing-library";
 
 export default {
   title: "Slider",
   component: DxcSlider,
 };
 
+const labelFormat = (value) => `${value}E100000000000000000000000`;
+
 export const Chromatic = () => (
   <>
     <Title title="States" theme="light" level={2} />
@@ -168,5 +169,9 @@ export const Chromatic = () => (
       <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/types.d.ts

@@ -58,9 +58,8 @@ declare type Props = {
      */
     onTabHover?: (tabIndex: number) => void;
     /**
-     * Size of the margin to be applied to the component. You can pass an object
-     * with 'top', 'bottom', 'left' and 'right' properties in order to specify
-     * different margin sizes.
+     * 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.
      */
     margin?: Space | Margin;
     /**

package/wizard/Wizard.stories.jsx

@@ -0,0 +1,224 @@
+import React from "react";
+import DxcWizard from "./Wizard";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { userEvent, within } from "@storybook/testing-library";
+
+export default {
+  title: "Wizard",
+  component: DxcWizard,
+};
+
+const favoriteSVG = () => {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+    </svg>
+  );
+};
+
+const largeIcon = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+    </svg>
+  );
+};
+
+const stepWithLabel = [
+  {
+    label: "First step",
+  },
+  {
+    label: "Second step",
+  },
+  {
+    label: "Third step",
+  },
+  {
+    label: "Forth step",
+  },
+];
+
+const stepWithLabelDescription = [
+  {
+    label: "First step",
+    description: "Description",
+  },
+  {
+    label: "Second step",
+    description: "Description",
+  },
+  {
+    label: "Third step",
+    description: "Description",
+    valid: true,
+  },
+  {
+    label: "Forth step",
+    description: "Description",
+    valid: false,
+  },
+];
+
+const stepWithLongDescription = [
+  {
+    label: "First step",
+    description:
+      "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. ",
+  },
+  {
+    label: "Second step",
+    description:
+      "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. ",
+  },
+  {
+    label: "Third step",
+    description:
+      "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",
+    description: "Description",
+    disabled: true,
+  },
+  {
+    label: "Second step",
+    description: "Description",
+    icon: favoriteSVG,
+    disabled: true,
+  },
+  {
+    label: "Third step",
+    description: "Description",
+    disabled: true,
+    valid: true,
+  },
+  {
+    label: "Forth step",
+    description: "Description",
+    valid: false,
+    disabled: true,
+  },
+];
+
+const stepIcons = [
+  {
+    label: "First step",
+    icon: favoriteSVG,
+  },
+  {
+    label: "Second step",
+    icon: favoriteSVG,
+  },
+  {
+    label: "Third step",
+    icon: favoriteSVG,
+  },
+];
+
+const stepLargeIcons = [
+  {
+    label: "First step",
+    icon: largeIcon,
+  },
+  {
+    label: "Second step",
+    icon: largeIcon,
+  },
+  {
+    label: "Third step",
+    icon: largeIcon,
+  },
+];
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Current step in the third step, labels and description" theme="light" level={4} />
+      <DxcWizard currentStep={2} steps={stepWithLabelDescription}></DxcWizard>
+      <Title title="With long description in horizontal" theme="light" level={4} />
+      <DxcWizard steps={stepWithLongDescription}></DxcWizard>
+      <Title title="With long description in vertical" theme="light" level={4} />
+      <DxcWizard mode="vertical" steps={stepWithLongDescription}></DxcWizard>
+      <Title title="Disabled steps" theme="light" level={4} />
+      <DxcWizard steps={stepDisabled}></DxcWizard>
+      <Title title="With icons" theme="light" level={4} />
+      <DxcWizard steps={stepIcons}></DxcWizard>
+      <Title title="With large icons" theme="light" level={4} />
+      <DxcWizard steps={stepLargeIcons}></DxcWizard>
+    </ExampleContainer>
+    <Title title="Margins horizontal" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcWizard margin="xxsmall" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcWizard margin="xsmall" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcWizard margin="small" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcWizard margin="medium" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcWizard margin="large" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcWizard margin="xlarge" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcWizard margin="xxlarge" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <Title title="Margins vertical" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcWizard mode="vertical" margin="xxsmall" steps={stepWithLabelDescription}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcWizard mode="vertical" margin="xsmall" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcWizard mode="vertical" margin="small" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcWizard mode="vertical" margin="medium" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcWizard mode="vertical" margin="large" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcWizard mode="vertical" margin="xlarge" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcWizard mode="vertical" margin="xxlarge" steps={stepWithLabel}></DxcWizard>
+    </ExampleContainer>
+  </>
+);
+
+const WizardSelected = () => <DxcWizard steps={stepWithLabel}></DxcWizard>;
+
+export const WizardStepActived = WizardSelected.bind({});
+WizardStepActived.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const option = canvas.getByText("Third step");
+  await userEvent.click(option);
+};

package/file-input/index.d.ts

@@ -1,81 +0,0 @@
-type Size = "small" | "medium" | "large" | "fillParent";
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-type FileData = {
-  error?: string;
-  file?: File;
-  preview?: string;
-};
-
-type Props = {
-  /**
-   * Name attribute of the file input element.
-   */
-  name?: string;
-  /**
-   * Text to be placed above the file input.
-   */
-  label?: string;
-  /**
-   * Uses one of the available file input modes:
-   *    'file': Files are selected by clicking the button and selecting it through the file explorer.
-   *    'filedrop': Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area.
-   *    'dropzone':  Files can be selected by clicking the button and selecting it through the file explorer or by dropping them inside the drag and drop area. 
-   *     The drag and drop area of this mode is bigger than the one of the filedrop mode.
-   */
-   mode?: "file" | "filedrop" | "dropzone";
-  /**
-   * Helper text to be placed above the file input.
-   */
-  helperText?: string;
-  /**
-   * Defines the file types accepted by the component. It is not possible to select a file with a non valid type.
-   */
-  accept?: string;
-  /**
-   * An array of FileData representing the selected files. 
-   */
-  value?: FileData[];
-  /**
-   * Minimum file size allowed (in bytes). If the file size does not comply the minSize, an error will be passed to the FileData.
-   */
-   minSize?: number;
-  /**
-   * Maximum file size allowed (in bytes). If the file size does not comply the maxSize, an error will be passed to the FileData.
-   */
-   maxSize?: number;
-  /**
-   * If true and if the file is an image, a preview of it will be shown. If it is not an image, an icon refering to the file's type will be shown. 
-   * If mode is not multiple and there is one file already selected, the file will be replaced by the last selected one.
-   */
-   showPreview?: boolean;
-  /**
-   * If true, more than one file can be selected. If false, only one file can be selected.
-   */
-   multiple?: boolean;
-  /**
-   * If true, the component will be disabled.
-   */
-  disabled?: boolean;
-  /**
-   * This function will be called when the user selects or drops a file. The list of files will be sent as a parameter.
-   * In this function, the files can be updated or returned as they come. These files must be passed to the value in order to be shown.
-   */
-  callbackFile?: (files: FileData[]) => void;
-  /**
-   * 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.
-   */
-  margin?: Space | Margin;
-  /**
-   * Value of the tabindex attribute.
-   */
-  tabIndex?: number;
-};
-
-export default function DxcFileInput(props: Props): JSX.Element;

package/heading/index.d.ts

@@ -1,17 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  level?: 1 | 2 | 3 | 4 | 5;
-  text?: string;
-  as?: "h1" | "h2" | "h3" | "h4" | "h5";
-  weight?: "light" | "normal" | "bold";
-  margin?: Space | Margin;
-};
-
-export default function DxcHeading(props: Props): JSX.Element;