@dxc-technology/halstack-react 0.0.0-a25956f → 0.0.0-a33ff0e

package/dialog/Dialog.stories.tsx

@@ -0,0 +1,212 @@
+import React from "react";
+import { userEvent, within } from "@storybook/testing-library";
+import DxcDialog from "./Dialog";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+
+export default {
+  title: "Dialog ",
+  component: DxcDialog,
+};
+
+export const DefaultDialog = () => (
+  <>
+    <ExampleContainer expanded={true}>
+      <Title title="Default dialog" theme="light" level={4} />
+      <DxcDialog>
+        {" "}
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
+          placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
+          elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
+          tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
+          eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
+          enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
+          fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
+          augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
+          dignissim, pharetra neque molestie, molestie lectus.
+        </p>{" "}
+      </DxcDialog>
+    </ExampleContainer>
+  </>
+);
+
+export const DialogWithoutOverlay = () => (
+  <ExampleContainer expanded={true}>
+    <Title title="Dialog Without Overlay" theme="light" level={4} />
+    <DxcDialog overlay={false}>
+      {" "}
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
+        placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
+        tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
+        eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
+        enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
+        fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
+        augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
+        dignissim, pharetra neque molestie, molestie lectus.
+      </p>{" "}
+    </DxcDialog>
+  </ExampleContainer>
+);
+
+export const DialogCloseVisibleFalse = () => (
+  <ExampleContainer expanded={true}>
+    <Title title="Dialog Close Visible" theme="dark" level={4} />
+    <DxcDialog isCloseVisible={false}>
+      {" "}
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
+        placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
+        tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
+        eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
+        enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
+        fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
+        augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
+        dignissim, pharetra neque molestie, molestie lectus.
+      </p>{" "}
+    </DxcDialog>
+  </ExampleContainer>
+);
+
+export const DialogWithXxsmallPadding = () => (
+  <ExampleContainer expanded={true}>
+    <Title title="Dialog With Xxsmall Padding" theme="light" level={4} />
+    <DxcDialog padding={"xxsmall"}>
+      {" "}
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
+        placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
+        tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
+        eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
+        enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
+        fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
+        augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
+        dignissim, pharetra neque molestie, molestie lectus.
+      </p>{" "}
+    </DxcDialog>
+  </ExampleContainer>
+);
+
+export const DialogWithXsmallPadding = () => (
+  <ExampleContainer expanded={true}>
+    <Title title="Dialog With Xsmall Padding" theme="light" level={4} />
+    <DxcDialog padding={"xsmall"}>
+      {" "}
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
+        placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
+        tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
+        eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
+        enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
+        fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
+        augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
+        dignissim, pharetra neque molestie, molestie lectus.
+      </p>{" "}
+    </DxcDialog>
+  </ExampleContainer>
+);
+
+export const DialogWithSmallPadding = () => (
+  <ExampleContainer expanded={true}>
+    <Title title="Dialog With Small Padding" theme="light" level={4} />
+    <DxcDialog padding={"small"}>
+      {" "}
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
+        placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
+        tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
+        eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
+        enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
+        fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
+        augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
+        dignissim, pharetra neque molestie, molestie lectus.
+      </p>{" "}
+    </DxcDialog>
+  </ExampleContainer>
+);
+
+export const DialogWithMediumPadding = () => (
+  <ExampleContainer expanded={true}>
+    <Title title="Dialog With Medium Padding" theme="light" level={4} />
+    <DxcDialog padding={"medium"}>
+      {" "}
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
+        placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
+        tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
+        eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
+        enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
+        fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
+        augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
+        dignissim, pharetra neque molestie, molestie lectus.
+      </p>{" "}
+    </DxcDialog>
+  </ExampleContainer>
+);
+
+export const DialogWithLargePadding = () => (
+  <ExampleContainer expanded={true}>
+    <Title title="Dialog With Large Padding" theme="light" level={4} />
+    <DxcDialog padding={"large"}>
+      {" "}
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
+        placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
+        tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
+        eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
+        enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
+        fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
+        augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
+        dignissim, pharetra neque molestie, molestie lectus.
+      </p>{" "}
+    </DxcDialog>
+  </ExampleContainer>
+);
+
+export const DialogWithXlargePadding = () => (
+  <ExampleContainer expanded={true}>
+    <Title title="Dialog With Xlarge Padding" theme="light" level={4} />
+    <DxcDialog padding={"xlarge"}>
+      {" "}
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
+        placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
+        tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
+        eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
+        enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
+        fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
+        augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
+        dignissim, pharetra neque molestie, molestie lectus.
+      </p>{" "}
+    </DxcDialog>
+  </ExampleContainer>
+);
+
+export const DialogWithXxlargePadding = () => (
+  <ExampleContainer expanded={true}>
+    <Title title="Dialog With Xxlarge Padding" theme="light" level={4} />
+    <DxcDialog padding={"xxlarge"}>
+      {" "}
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi egestas luctus porttitor. Donec massa magna,
+        placerat sit amet felis eget, venenatis fringilla ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Donec congue laoreet orci, nec elementum dolor consequat quis. Curabitur rhoncus justo sed dapibus
+        tincidunt. Vestibulum cursus ut risus sit amet congue. Nunc luctus, urna ullamcorper facilisis Jia Le, risus
+        eros aliquam erat, ut efficitur ante neque id odio. Nam orci leo, dignissim sit amet dolor ut, congue gravida
+        enim. Donec rhoncus aliquam nisl, ac cursus enim bibendum vitae. Nunc sit amet elit ornare, malesuada urna eu,
+        fringilla mauris. Vivamus bibendum turpis est, id elementum purus euismod sit amet. Etiam sit amet maximus
+        augue. Vivamus erat sapien, ultricies fringilla tellus id, condimentum blandit justo. Praesent quis nunc
+        dignissim, pharetra neque molestie, molestie lectus.
+      </p>{" "}
+    </DxcDialog>
+  </ExampleContainer>
+);

package/dialog/types.d.ts

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Padding = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type Props = {
+    /**
+     * If true, the close 'x' button will be visible.
+     */
+    isCloseVisible?: boolean;
+    /**
+     * This function will be called when the user clicks the close 'x' button.
+     * The responsibility of hiding the modal lies with the user.
+     */
+    onCloseClick?: () => void;
+    /**
+     * If true, the dialog will be displayed over a darker background that covers the content behind.
+     */
+    overlay?: boolean;
+    /**
+     * This function will be called when the user clicks background of the modal.
+     * The responsibility of hiding the modal lies with the user.
+     */
+    onBackgroundClick?: () => void;
+    /**
+     * Size of the padding 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 padding sizes.
+     */
+    padding?: Padding | Space;
+    /**
+     * Value of the tabindex given to the close 'x' button.
+     */
+    tabIndex?: number;
+    /**
+     * The area inside the dialog. This area can be used to render
+     * custom content.
+     */
+    children: React.ReactNode;
+};
+export default Props;

package/dialog/types.js

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

package/dropdown/Dropdown.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import DropdownPropsType from "./types";
+declare const DxcDropdown: ({ options, optionsIconPosition, icon, iconSrc, iconPosition, label, caretHidden, onSelectOption, expandOnHover, margin, size, tabIndex, disabled, }: DropdownPropsType) => JSX.Element;
+export default DxcDropdown;