@dxc-technology/halstack-react 0.0.0-a799608 → 0.0.0-a88c0fe

package/accordion-group/AccordionGroup.stories.tsx

@@ -1,251 +0,0 @@
-import React from "react";
-import DxcAccordionGroup from "./AccordionGroup";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-
-export default {
-  title: "Accordion group",
-  component: DxcAccordionGroup,
-};
-
-export const Chromatic = () => (
-  <>
-    <Title title="States" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Default" theme="light" level={4} />
-      <DxcAccordionGroup>
-        <DxcAccordionGroup.Accordion label="Accordion1" assistiveText="Assistive text" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" assistiveText="Assistive text" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Expanded" theme="light" level={4} />
-      <DxcAccordionGroup defaultIndexActive={1}>
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
-            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. 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.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Disabled" theme="light" level={4} />
-      <DxcAccordionGroup disabled>
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
-            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. 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.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-focus">
-      <Title title="Focused" theme="light" level={4} />
-      <DxcAccordionGroup defaultIndexActive={2}>
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
-            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. 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.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    </ExampleContainer>
-    <Title title="Margins" theme="light" level={2} />
-    <ExampleContainer>
-      <Title title="Xxsmall" theme="light" level={4} />
-      <DxcAccordionGroup margin="xxsmall">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
-            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. 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.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xsmall" theme="light" level={4} />
-      <DxcAccordionGroup margin="xsmall">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
-            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. 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.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Small" theme="light" level={4} />
-      <DxcAccordionGroup margin="small">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
-            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. 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.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Medium" theme="light" level={4} />
-      <DxcAccordionGroup margin="medium">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
-            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. 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.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Large" theme="light" level={4} />
-      <DxcAccordionGroup margin="large">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
-            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. 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.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xlarge" theme="light" level={4} />
-      <DxcAccordionGroup margin="xlarge">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
-            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. 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.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Xxlarge" theme="light" level={4} />
-      <DxcAccordionGroup margin="xxlarge">
-        <DxcAccordionGroup.Accordion label="Accordion1" padding="medium">
-          <div>
-            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. 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.
-          </div>
-        </DxcAccordionGroup.Accordion>
-        <DxcAccordionGroup.Accordion label="Accordion2" padding="medium">
-          <div>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
-            leo lobortis eget.
-          </div>
-        </DxcAccordionGroup.Accordion>
-      </DxcAccordionGroup>
-    </ExampleContainer>
-  </>
-);

package/accordion-group/AccordionGroup.test.js

@@ -1,126 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _AccordionGroup = _interopRequireDefault(require("./AccordionGroup"));
-
-describe("Accordion component tests", function () {
-  test("Uncontrolled accordion group calls correct function on click", function () {
-    var onActiveChange = jest.fn();
-
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
-      margin: "large",
-      onActiveChange: onActiveChange
-    }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      padding: "medium",
-      margin: "large"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.")))),
-        getByText = _render.getByText,
-        getAllByRole = _render.getAllByRole;
-
-    expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
-    expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
-
-    _react2.fireEvent.click(getByText("Accordion1"));
-
-    expect(onActiveChange).toHaveBeenCalled();
-    expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
-    expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
-  });
-  test("Uncontrolled accordion group renders initially with an accordion expanded using defaultIndexActive", function () {
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
-      defaultIndexActive: 1
-    }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "First accordion")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Second accordion")))),
-        queryByText = _render2.queryByText,
-        getByText = _render2.getByText,
-        getAllByRole = _render2.getAllByRole;
-
-    expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
-    expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("true");
-    expect(getByText("Second accordion")).toBeTruthy();
-    expect(queryByText("First accordion")).toBeFalsy();
-  });
-  test("Controlled accordion with indexActive change", function () {
-    var onActiveChange = jest.fn();
-
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
-      margin: "large",
-      indexActive: 1,
-      onActiveChange: onActiveChange
-    }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      padding: "medium",
-      margin: "large"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
-        queryByText = _render3.queryByText,
-        getByText = _render3.getByText,
-        getAllByRole = _render3.getAllByRole,
-        rerender = _render3.rerender;
-
-    expect(queryByText("Text1")).toBeFalsy();
-    expect(getByText("Text2")).toBeTruthy();
-
-    _react2.fireEvent.click(getByText("Accordion1"));
-
-    _react2.fireEvent.click(getByText("Accordion2"));
-
-    expect(onActiveChange.mock.calls[0][0]).toBe(0);
-    expect(onActiveChange.mock.calls[1][0]).toBe(1);
-    expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
-    expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("true");
-    rerender( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
-      margin: "large",
-      indexActive: 0,
-      onActiveChange: onActiveChange
-    }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      padding: "medium",
-      margin: "large"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2"))));
-    expect(getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
-    expect(getAllByRole("button")[1].getAttribute("aria-expanded")).toBe("false");
-  });
-  test("Disabled uncontrolled accordion group", function () {
-    var onActiveChange = jest.fn();
-
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"], {
-      margin: "large",
-      onActiveChange: onActiveChange,
-      disabled: true
-    }, /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion1",
-      padding: "medium",
-      margin: "large"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Text1")), /*#__PURE__*/_react["default"].createElement(_AccordionGroup["default"].Accordion, {
-      label: "Accordion2",
-      padding: "medium"
-    }, /*#__PURE__*/_react["default"].createElement("div", null, "Text2")))),
-        getByText = _render4.getByText;
-
-    _react2.fireEvent.click(getByText("Accordion1"));
-
-    _react2.fireEvent.click(getByText("Accordion2"));
-
-    expect(onActiveChange).toHaveBeenCalledTimes(0);
-  });
-});

package/accordion-group/types.d.ts

@@ -1,78 +0,0 @@
-/// <reference types="react" />
-export declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-export declare type Margin = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-declare type Padding = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-export declare type AccordionPropsType = {
-    /**
-     * The panel label.
-     */
-    label: string;
-    /**
-     * Element or path used as the icon that will be placed next to panel label.
-     */
-    icon?: string | SVG;
-    /**
-     * Assistive text to be placed on the right side of the panel.
-     */
-    assistiveText?: string;
-    /**
-     * If true, the component will be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Size of the padding to be applied to the custom area ('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?: Space | Padding;
-    /**
-     * The expanded panel of the accordion. This area can be used to render
-     * custom content.
-     */
-    children: React.ReactNode;
-};
-declare type Props = {
-    /**
-     * Initially active accordion, only when it is uncontrolled.
-     */
-    defaultIndexActive?: number;
-    /**
-     * The index of the active accordion. If undefined, the component will be uncontrolled and the active accordion will be managed internally by the component.
-     * If null, the component will be controlled and all accordions will be closed.
-     */
-    indexActive?: number;
-    /**
-     * If true, the component will be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * This function will be called when the user clicks on an accordion. The index of the clicked accordion will be passed as a parameter.
-     */
-    onActiveChange?: (indexActive: number) => 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;
-    /**
-     * Customized accordion(s) that are allowed inside an Accordion Group.
-     */
-    children: React.ReactElement<AccordionPropsType>[] | React.ReactElement<AccordionPropsType>;
-};
-export declare type AccordionGroupAccordionContextProps = {
-    activeIndex: number;
-    handlerActiveChange: (index: number) => void;
-    disabled: boolean;
-    index: number;
-};
-export default Props;

package/accordion-group/types.js

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

package/alert/Alert.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import AlertPropsType from "./types";
-declare const DxcAlert: ({ type, mode, inlineText, onClose, children, margin, size, tabIndex, }: AlertPropsType) => JSX.Element;
-export default DxcAlert;