@dxc-technology/halstack-react 0.0.0-e081e21 → 0.0.0-e1a279c

package/tag/Tag.stories.tsx

@@ -0,0 +1,145 @@
+import React from "react";
+import { userEvent, within } from "@storybook/testing-library";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import DxcTag from "./Tag";
+
+export default {
+  title: "Tag",
+  component: DxcTag,
+};
+
+const icon = () => {
+  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 0h24v24H0V0z" fill="none" />
+      <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.5-13H11v6l5.25 3.15.75-1.23-4.5-2.67z" />
+    </svg>
+  );
+};
+
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Without label" theme="light" level={4} />
+      <DxcTag />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With icon" theme="light" level={4} />
+      <DxcTag icon={icon} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With large icon" theme="light" level={4} />
+      <DxcTag icon={largeIcon} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With label" theme="light" level={4} />
+      <DxcTag label="Tag" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With label and icon" theme="light" level={4} />
+      <DxcTag label="Tag" icon={icon} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="With right icon" theme="light" level={4} />
+      <DxcTag label="Tag" icon={icon} labelPosition="before" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Icon background color" theme="light" level={4} />
+      <DxcTag label="Tag" icon={icon} iconBgColor="#fabada" />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="With link focused" theme="light" level={4} />
+      <DxcTag icon={icon} label="Tag" linkHref="https://www.dxc.com" />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="With action focused" theme="light" level={4} />
+      <DxcTag
+        icon={icon}
+        label="Tag"
+        onClick={() => {
+          console.log("click");
+        }}
+      />
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcTag label="Xxsmall" margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcTag label="Xsmall" margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcTag label="Small" margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcTag label="Medium" margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcTag label="Large" margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcTag label="Xlarge" margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcTag label="Xxlarge" margin="xxlarge" />
+    </ExampleContainer>
+    <Title title="Sizes" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Small size" theme="light" level={4} />
+      <DxcTag label="Small" size="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium size" theme="light" level={4} />
+      <DxcTag label="Medium size medium s" size="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium size with ellipsis" theme="light" level={4} />
+      <DxcTag label="Medium size medium si medium" size="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large size" theme="light" level={4} />
+      <DxcTag label="Large size large size large size large size large size" size="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large size with ellipsis" theme="light" level={4} />
+      <DxcTag label="Large size large size large size large size large size large size" size="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="FillParent size" theme="light" level={4} />
+      <DxcTag label="FillParent" size="fillParent" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="FitContent size" theme="light" level={4} />
+      <DxcTag label="FitContent" size="fitContent" />
+    </ExampleContainer>
+  </>
+);
+
+const LinkTag = () => (
+  <ExampleContainer>
+    <Title title="Hover link tag" theme="light" level={4} />
+    <DxcTag label="Tag" icon={icon} linkHref="https://www.dxc.com" />
+  </ExampleContainer>
+);
+
+export const HoverLinkTag = LinkTag.bind({});
+HoverLinkTag.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  await userEvent.hover(canvas.getByText("Tag"));
+};

package/tag/types.d.ts

@@ -0,0 +1,60 @@
+/// <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 Props = {
+    /**
+     * Element used as the icon that will be placed next to the label.
+     */
+    icon?: SVG;
+    /**
+     * @deprecated URL of the icon.
+     */
+    iconSrc?: string;
+    /**
+     * Text to be placed next inside the tag.
+     */
+    label?: string;
+    /**
+     * If defined, the tag will be displayed as an anchor, using this prop as "href".
+     * Component will show some visual feedback on hover.
+     */
+    linkHref?: string;
+    /**
+     * If defined, the tag will be displayed as a button. This function will
+     * be called when the user clicks the tag. Component will show some
+     * visual feedback on hover.
+     */
+    onClick?: () => void;
+    /**
+     * Background color of the icon section of the tag.
+     */
+    iconBgColor?: string;
+    /**
+     * Whether the label should appear after or before the icon.
+     */
+    labelPosition?: "before" | "after";
+    /**
+     * If true, the page is opened in a new browser tab.
+     */
+    newWindow?: boolean;
+    /**
+     * 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;
+    /**
+     * Size of the component.
+     */
+    size?: "small" | "medium" | "large" | "fillParent" | "fitContent";
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+export default Props;

package/tag/types.js

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

package/text-input/index.d.ts

@@ -6,10 +6,10 @@ type Margin = {
   left?: Space;
   right?: Space;
 };
-type SVG = string | (HTMLElement & SVGElement);
+type SVG = React.SVGProps<SVGSVGElement> | React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
 type Action = {
   onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  icon: SVG;
+  icon: string | SVG;
 };
 
 type Props = {

package/textarea/Textarea.stories.jsx

@@ -0,0 +1,135 @@
+import React from "react";
+import DxcTextarea from "./Textarea";
+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: "Textarea",
+  component: DxcTextarea,
+};
+
+export const Chromatic = () => (
+  <>
+    <>
+      <ExampleContainer pseudoState="pseudo-hover">
+        <Title title="Hovered" theme="light" level={4} />
+        <DxcTextarea label="Hovered" />
+      </ExampleContainer>
+      <ExampleContainer pseudoState="pseudo-focus">
+        <Title title="Focused" theme="light" level={4} />
+        <DxcTextarea label="Focused" />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="Disabled" theme="light" level={4} />
+        <DxcTextarea
+          label="Disabled"
+          optional
+          helperText="Sample text"
+          placeholder="Enter your text here..."
+          disabled
+        />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="Disabled with value" theme="light" level={4} />
+        <DxcTextarea label="Disabled" value="Example text" disabled />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="With error" theme="light" level={4} />
+        <DxcTextarea
+          label="Textarea with error"
+          helperText="Helper text"
+          placeholder="Enter your text here..."
+          error="Error message"
+        />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="Helper text and optional with value" theme="light" level={4} />
+        <DxcTextarea label="Helper & optional" value="Some text" helperText="Sample text" optional />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="Resizable" theme="light" level={4} />
+        <DxcTextarea label="With resizer" helperText="Helper text" verticalGrow="manual" />
+      </ExampleContainer>
+      <ExampleContainer>
+        <Title title="Grow manual" theme="light" level={4} />
+        <DxcTextarea
+          label="Manual vertical grow"
+          verticalGrow="manual"
+          value="Long textttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt"
+        />
+      </ExampleContainer>
+    </>
+    <BackgroundColorProvider color="#333333">
+      <DarkContainer>
+        <>
+          <Title title="Helper text and optional with value" theme="dark" level={4} />
+          <DxcTextarea label="Helper & optional" value="Some text" margin="medium" helperText="Sample text" optional />
+
+          <Title title="Disabled" theme="dark" level={4} />
+          <DxcTextarea
+            label="Disabled"
+            margin="medium"
+            optional
+            helperText="Sample text"
+            placeholder="Enter your text here..."
+            disabled
+          />
+          <Title title="Disabled with value" theme="dark" level={4} />
+          <DxcTextarea label="Disabled" margin="medium" value="Example text" disabled />
+          <Title title="With error" theme="dark" level={4} />
+          <DxcTextarea
+            label="Textarea with error"
+            margin="medium"
+            helperText="Helper text"
+            placeholder="Enter your text here..."
+            error="Error message"
+          />
+        </>
+      </DarkContainer>
+    </BackgroundColorProvider>
+    <Title title="Sizes" theme="light" level={2} />
+    <ExampleContainer>
+      <DxcTextarea label="Small" size="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <DxcTextarea label="Medium" size="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <DxcTextarea label="Large" size="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <DxcTextarea label="Fill parent" size="fillParent" />
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Xxsmall margin" theme="light" level={4} />
+      <DxcTextarea label="Xxsmmall" margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xsmall margin" theme="light" level={4} />
+      <DxcTextarea label="xsmmall" margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small margin" theme="light" level={4} />
+      <DxcTextarea label="smmall" margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium margin" theme="light" level={4} />
+      <DxcTextarea label="medium" margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large margin" theme="light" level={4} />
+      <DxcTextarea label="Large" margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xlarge margin" theme="light" level={4} />
+      <DxcTextarea label="Xlarge" margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Xxlarge margin" theme="light" level={4} />
+      <DxcTextarea label="Xxlarge" margin="xxlarge" />
+    </ExampleContainer>
+  </>
+);

package/toggle-group/ToggleGroup.stories.tsx

@@ -0,0 +1,178 @@
+import React from "react";
+import { userEvent, within } from "@storybook/testing-library";
+import DxcToggleGroup from "./ToggleGroup";
+import Title from "../../.storybook/components/Title";
+import ExampleContainer from "../../.storybook/components/ExampleContainer";
+
+export default {
+  title: "ToggleGroup",
+  component: DxcToggleGroup,
+};
+
+const ethernetSVG = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <path d="M0 0h24v24H0V0z" fill="none" />
+      <path d="M7.77 6.76L6.23 5.48.82 12l5.41 6.52 1.54-1.28L3.42 12l4.35-5.24zM7 13h2v-2H7v2zm10-2h-2v2h2v-2zm-6 2h2v-2h-2v2zm6.77-7.52l-1.54 1.28L20.58 12l-4.35 5.24 1.54 1.28L23.18 12l-5.41-6.52z" />
+    </svg>
+  );
+};
+const gMobileSVG = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <g>
+        <path d="M0,0h24v24H0V0z" fill="none" />
+      </g>
+      <g>
+        <g>
+          <path d="M3,7v2h5v2H4v2h4v2H3v2h5c1.1,0,2-0.9,2-2v-1.5c0-0.83-0.67-1.5-1.5-1.5c0.83,0,1.5-0.67,1.5-1.5V9c0-1.1-0.9-2-2-2H3z M21,11v4c0,1.1-0.9,2-2,2h-5c-1.1,0-2-0.9-2-2V9c0-1.1,0.9-2,2-2h5c1.1,0,2,0.9,2,2h-7v6h5v-2h-2.5v-2H21z" />
+        </g>
+      </g>
+    </svg>
+  );
+};
+const wifiSVG = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor">
+      <path d="M0 0h24v24H0V0zm0 0h24v24H0V0z" fill="none" />
+      <path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z" />
+    </svg>
+  );
+};
+const options = [
+  {
+    value: 1,
+    label: "Facebook",
+  },
+  {
+    value: 2,
+    label: "Twitter",
+  },
+  {
+    value: 3,
+    label: "Linkedin",
+  },
+];
+const optionsWithIcon = [
+  {
+    value: 1,
+    icon: wifiSVG,
+  },
+  {
+    value: 2,
+    icon: ethernetSVG,
+  },
+  {
+    value: 3,
+    icon: gMobileSVG,
+  },
+];
+const optionsWithIconAndLabel = [
+  {
+    value: 1,
+    label: "Wi-fi",
+    icon: wifiSVG,
+  },
+  {
+    value: 2,
+    label: "Ethernet",
+    icon: ethernetSVG,
+  },
+  {
+    value: 3,
+    label: "3G Mobile",
+    icon: gMobileSVG,
+  },
+];
+const twoOptions = [
+  {
+    value: 1,
+    label: "Facebook",
+  },
+  {
+    value: 2,
+    label: "Twitter",
+  },
+];
+export const Chromatic = () => (
+  <>
+    <ExampleContainer>
+      <Title title="Basic toggle group" theme="light" level={4} />
+      <DxcToggleGroup label="Toggle group" helperText="HelperText" options={options} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Selected" theme="light" level={4} />
+      <DxcToggleGroup label="Selected" helperText="HelperText" value={2} options={options} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Icons toggle group" theme="light" level={4} />
+      <DxcToggleGroup label="Icons group" options={optionsWithIcon} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Icons & label toggle group" theme="light" level={4} />
+      <DxcToggleGroup label="Icons & label" options={optionsWithIconAndLabel} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled" theme="light" level={4} />
+      <DxcToggleGroup label="Disabled" value={2} options={options} disabled />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <DxcToggleGroup label="Hovered" options={twoOptions} value={2} />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Multiple toggleGroup" theme="light" level={4} />
+      <DxcToggleGroup
+        label="Toggle group"
+        helperText="Please select one or more"
+        options={options}
+        value={[1, 3]}
+        multiple
+      ></DxcToggleGroup>
+    </ExampleContainer>
+    <Title title="Margins" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="xxSmall" theme="light" level={4} />
+      <DxcToggleGroup label="xxSmall margin" options={options} margin="xxsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="xSmall" theme="light" level={4} />
+      <DxcToggleGroup label="xSmall margin" options={options} margin="xsmall" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Small" theme="light" level={4} />
+      <DxcToggleGroup label="Small margin" options={options} margin="small" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Medium" theme="light" level={4} />
+      <DxcToggleGroup label="Medium margin" options={options} margin="medium" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Large" theme="light" level={4} />
+      <DxcToggleGroup label="Large margin" options={options} margin="large" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="xLarge" theme="light" level={4} />
+      <DxcToggleGroup label="xLarge margin" options={options} margin="xlarge" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="xxLarge" theme="light" level={4} />
+      <DxcToggleGroup label="xxLarge margin" options={options} margin="xxlarge" />
+    </ExampleContainer>
+  </>
+);
+const OptionSelected = () => <DxcToggleGroup label="Toggle group" helperText="HelperText" options={options} />;
+
+export const ToggleGroupSelectedActived = OptionSelected.bind({});
+ToggleGroupSelectedActived.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const option = canvas.getByText("Linkedin");
+  await userEvent.click(option);
+};
+export const ToggleGroupUnselectedActived = OptionSelected.bind({});
+ToggleGroupUnselectedActived.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const option = canvas.getByText("Twitter");
+  await userEvent.click(option);
+  userEvent.tab();
+};

package/wizard/Wizard.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import WizardPropsType from "./types";
+declare const DxcWizard: ({ mode, currentStep, onStepClick, steps, margin, tabIndex, }: WizardPropsType) => JSX.Element;
+export default DxcWizard;