@dxc-technology/halstack-react 0.0.0-d5ae9d7 → 0.0.0-d618bea

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/wizard/types.d.ts

@@ -0,0 +1,64 @@
+/// <reference types="react" />
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+declare type Step = {
+    /**
+     * Step label.
+     */
+    label: string;
+    /**
+     * Description that will be placed next to the step.
+     */
+    description?: string;
+    /**
+     * Element used as the icon to be displayed in the step.
+     */
+    icon?: SVG;
+    /**
+     * @deprecated URL of the icon to be displayed in the step.
+     */
+    iconSrc?: string;
+    /**
+     * Whether the step is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Whether the step is valid or not.
+     */
+    valid?: boolean;
+};
+declare type Props = {
+    /**
+     * The wizard can be showed in horizontal or vertical.
+     */
+    mode?: "horizontal" | "vertical";
+    /**
+     * Defines which step is marked as the current. The numeration starts in 0.
+     */
+    currentStep?: number;
+    /**
+     * This function will be called when the user clicks a step. The step
+     * number will be passed as a parameter.
+     */
+    onStepClick?: (newCurrentStep: number) => void;
+    /**
+     * An array of objects representing the steps.
+     */
+    steps: Step[];
+    /**
+     * 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 that is given to all the steps.
+     */
+    tabIndex?: number;
+};
+export default Props;

package/wizard/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/accordion-group/index.d.ts

@@ -1,16 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  disabled?: boolean;
-  onActiveChange?: void;
-  indexActive?: number;
-  margin?: Space | Margin;
-};
-
-export default function DxcAccordionGroup(props: Props): JSX.Element;

package/box/index.d.ts

@@ -1,25 +0,0 @@
-type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-type Padding = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-
-type Props = {
-  shadowDepth?: 0 | 1 | 2;
-  margin?: Space | Margin;
-  padging?: Space | Padding;
-  display: string;
-  size: Size;
-};
-
-export default function DxcBox(props: Props): JSX.Element;

package/card/index.d.ts

@@ -1,22 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  imageSrc?: string;
-  margin?: Space | Margin;
-  contentPadding?: any;
-  linkHref?: string;
-  onClick?: void;
-  imageBgColor?: string;
-  imagePadding?: any;
-  imagePosition?: "before" | "after";
-  outlined?: boolean; 
-  imageCover?: boolean;
-};
-
-export default function DxcCard(props: Props): JSX.Element;

package/chip/index.d.ts

@@ -1,22 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  label?: string;
-  suffixIcon?: any;
-  preffixIcon?: any;
-  suffixIconSrc?: string;
-  onClickSuffix?: void;
-  prefixIconSrc?: string;
-  onClickPrefix?: void;
-  disabled?: boolean;
-  margin?: Space | Margin;
-  tabIndex?: number;
-};
-
-export default function DxcChip(props: Props): JSX.Element;

package/dialog/index.d.ts

@@ -1,18 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Padding = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  isCloseVisible?: boolean;
-  onCloseClick?: void;
-  overlay?: boolean;
-  onBackgroundClick?: void;
-  padding?: Padding,
-  tabIndex?: number;
-};
-
-export default function DxcDialog(props: Props): JSX.Element;

package/dropdown/index.d.ts

@@ -1,26 +0,0 @@
-type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  options?: any;
-  optionsIconPosition?: "before" | "after";
-  icon?: any;
-  iconSrc?: string;
-  iconPosition?: "before" | "after";
-  label?: string;
-  disabled?: boolean;
-  caretHidden?: boolean;
-  onSelectOption?: void;
-  expandOnHover?: boolean;
-  margin?: Space | Margin;
-  size?: Size;
-  tabIndex?: number;
-};
-
-export default function DxcDropdown(props: Props): JSX.Element;

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/footer/index.d.ts

@@ -1,25 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-type Padding = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  socialLinks?: any;
-  bottomLinks?: any;
-  copyright?: string;
-  padding?: Space | Padding;
-  margin?: Space | Margin;
-  tabIndex?: number;
-  
-};
-
-export default function DxcFooter(props: Props): JSX.Element;

package/header/index.d.ts

@@ -1,25 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-type Padding = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  underlined?: boolean;
-  onClick?: void;
-  content?: any;
-  responsiveContent?: any;
-  margin?: Space | Margin;
-  padding?: Space | Padding;
-  tabIndex?: number;
-};
-
-export default function DxcHeader(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;

package/link/index.d.ts

@@ -1,23 +0,0 @@
-type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-type Margin = {
-  top?: Space;
-  bottom?: Space;
-  left?: Space;
-  right?: Space;
-};
-
-type Props = {
-  inheritColor?: boolean;
-  disabled?: boolean;
-  iconSrc?: string;
-  icon?: any;
-  iconPosition?: "before" | "after";
-  href?: string;
-  newWindow?: boolean;
-  onClick?: void;
-  text?: string;
-  margin?: Space | Margin;
-  tabIndex?: number;
-};
-
-export default function DxcLink(props: Props): JSX.Element;