@dxc-technology/halstack-react 0.0.0-83f5e92 → 0.0.0-848db6e

package/date-input/DateInput.stories.tsx

@@ -0,0 +1,138 @@
+import React from "react";
+import { userEvent, within, fireEvent, screen } from "@storybook/testing-library";
+import DxcDateInput from "./DateInput";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { BackgroundColorProvider } from "../BackgroundColorContext";
+import DarkContainer from "../../.storybook/components/DarkSection";
+
+export default {
+  title: "Date input",
+  component: DxcDateInput,
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Complete date input" theme="light" level={4} />
+      <DxcDateInput label="Date input" helperText="Help message" format="dd/mm/yy" placeholder optional />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcDateInput label="Disabled date input" helperText="Help message" value="06-04-2027" clearable disabled />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Invalid" theme="light" level={4} />
+      <DxcDateInput label="Error date input" error="Error message." placeholder />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Relation between icons" theme="light" level={4} />
+      <DxcDateInput label="Error date input" error="Error message." value="06-04-2027" clearable />
+    </ExampleContainer>
+    <BackgroundColorProvider color="#333333">
+      <DarkContainer>
+        <Title title="Dark" theme="dark" level={2} />
+        <ExampleContainer>
+          <Title title="Complete date input" theme="dark" level={4} />
+          <DxcDateInput label="Date input" helperText="Help message" format="yyyy/dd/mm" placeholder optional />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled" theme="dark" level={4} />
+          <DxcDateInput label="Disabled Date input" helperText="Help message" value="06-04-2027" clearable disabled />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Invalid" theme="dark" level={4} />
+          <DxcDateInput label="Error date input" error="Error message." placeholder />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Relation between icons" theme="dark" level={4} />
+          <DxcDateInput label="Error date input" value="06-04-2027" error="Error message." clearable />
+        </ExampleContainer>
+      </DarkContainer>
+    </BackgroundColorProvider>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall" theme="light" level={4} />
+      <DxcDateInput label="Xxsmall" margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall" theme="light" level={4} />
+      <DxcDateInput label="Xsmall" margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcDateInput label="Small" margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcDateInput label="Medium" margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcDateInput label="Large" margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge" theme="light" level={4} />
+      <DxcDateInput label="Xlarge" margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge" theme="light" level={4} />
+      <DxcDateInput label="Xxlarge" margin="xxlarge" />
+    </ExampleContainer>
+    <Title title="Sizes" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Medium size" theme="light" level={4} />
+      <DxcDateInput label="Medium" size="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large size" theme="light" level={4} />
+      <DxcDateInput label="Large" size="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="FillParent size" theme="light" level={4} />
+      <DxcDateInput label="FillParent" size="fillParent" />
+    </ExampleContainer>
+  </>
+);
+
+const DatePicker = () => (
+  <ExampleContainer expanded>
+    <Title title="Show date input" theme="light" level={4} />
+    <DxcDateInput label="Date input" value="10-06-2023" />
+  </ExampleContainer>
+);
+
+export const ShowDatePicker = DatePicker.bind({});
+ShowDatePicker.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const dateBtn = canvas.getByRole("button");
+  await userEvent.click(dateBtn);
+  await userEvent.tab();
+};
+
+const YearPicker = () => (
+  <ExampleContainer expanded>
+    <Title title="Show date input" theme="light" level={4} />
+    <DxcDateInput label="Date input" value="10-06-2023" />
+  </ExampleContainer>
+);
+
+export const ShowYearPicker = YearPicker.bind({});
+ShowYearPicker.play = async () => {
+  await fireEvent.click(screen.getByRole("button"));
+  await fireEvent.click(screen.getByText("2023"));
+};
+
+const YearPickerFocus = () => (
+  <ExampleContainer expanded>
+    <Title title="Show date input" theme="light" level={4} />
+    <DxcDateInput label="Date input" value="10-06-2023" />
+  </ExampleContainer>
+);
+
+export const ShowYearPickerFocus = YearPickerFocus.bind({});
+ShowYearPickerFocus.play = async () => {
+  await fireEvent.click(screen.getByRole("button"));
+  await fireEvent.click(screen.getByText("2023"));
+  await screen.getByText("2021").focus();
+};

package/dialog/Dialog.js

@@ -23,9 +23,9 @@ var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
 
 var _variables = require("../common/variables.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
+var _BackgroundColorContext = require("../BackgroundColorContext");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 

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/dropdown/Dropdown.js

@@ -35,7 +35,7 @@ var _variables = require("../common/variables.js");
 
 var _utils = require("../common/utils.js");
 
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
+var _useTheme = _interopRequireDefault(require("../useTheme"));
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 

package/dropdown/types.d.ts

@@ -30,7 +30,7 @@ declare type Props = {
     /**
      * An array of objects representing the options.
      */
-    options: [Option, ...Option[]];
+    options: Option[];
     /**
      * In case options include icons, whether the icon should appear
      * after or before the label.

package/file-input/FileInput.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import FileInputPropsType from "./types";
+declare const DxcFileInput: ({ name, mode, label, buttonLabel, dropAreaLabel, helperText, accept, minSize, maxSize, showPreview, multiple, disabled, callbackFile, value, margin, tabIndex, }: FileInputPropsType) => JSX.Element;
+export default DxcFileInput;