@dxc-technology/halstack-react 0.0.0-c9efd3e → 0.0.0-ca89a03

package/sidenav/Sidenav.stories.tsx

@@ -1,277 +0,0 @@
-import React from "react";
-import DxcSidenav from "./Sidenav";
-import DxcSelect from "../select/Select";
-import DxcInset from "../inset/Inset";
-import Title from "../../.storybook/components/Title";
-import ExampleContainer from "../../.storybook/components/ExampleContainer";
-import { userEvent, within } from "@storybook/testing-library";
-import { HalstackProvider } from "../HalstackContext";
-
-export default {
-  title: "Sidenav",
-  component: DxcSidenav,
-};
-
-const iconSVG = (
-  <svg
-    version="1.1"
-    x="0px"
-    y="0px"
-    width="438.536px"
-    height="438.536px"
-    viewBox="0 0 438.536 438.536"
-    fill="currentColor"
-  >
-    <g>
-      <path
-        d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
-C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
-h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
-C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
-c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
-c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
-      />
-    </g>
-  </svg>
-);
-
-const TitleComponent = () => {
-  return <DxcSidenav.Title>Dxc technology</DxcSidenav.Title>;
-};
-
-const opinionatedTheme = {
-  sidenav: {
-    baseColor: "#f2f2f2",
-  },
-};
-
-export const Chromatic = () => (
-  <>
-    <ExampleContainer>
-      <Title title="Default sidenav" theme="light" level={4} />
-      <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
-        <DxcSidenav.Section>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper consectetur mollis. Suspendisse
-            vitae lacinia libero.
-          </p>
-        </DxcSidenav.Section>
-        <DxcSidenav.Section>
-          <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-          <DxcSidenav.Group collapsable={false} title="Single Group" icon={iconSVG}>
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          </DxcSidenav.Group>
-        </DxcSidenav.Section>
-        <DxcSidenav.Section>
-          <DxcSidenav.Group collapsable={true} title="Section Group" icon="filled_bottom_app_bar">
-            <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
-            <DxcSidenav.Link icon={iconSVG}>Group Link</DxcSidenav.Link>
-          </DxcSidenav.Group>
-          <DxcSidenav.Link icon="filled_bottom_app_bar" newWindow>
-            Single Link
-          </DxcSidenav.Link>
-          <DxcSidenav.Link newWindow>Single Link</DxcSidenav.Link>
-          <DxcSidenav.Group collapsable={false} title="Section Group">
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          </DxcSidenav.Group>
-        </DxcSidenav.Section>
-      </DxcSidenav>
-    </ExampleContainer>
-    <ExampleContainer pseudoState="pseudo-focus">
-      <Title title="Focused options sidenav" theme="light" level={4} />
-      <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
-        <DxcSidenav.Section>
-          <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper consectetur mollis. Suspendisse
-            vitae lacinia libero.
-          </p>
-        </DxcSidenav.Section>
-        <DxcSidenav.Section>
-          <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-          <DxcSidenav.Group collapsable={true} title="Collapsable Group">
-            <DxcSidenav.Link icon="filled_bottom_app_bar">Group Link</DxcSidenav.Link>
-          </DxcSidenav.Group>
-        </DxcSidenav.Section>
-        <DxcSidenav.Section>
-          <DxcSidenav.Group collapsable={true} title="Collapsable Group">
-            <DxcSidenav.Link selected icon={iconSVG}>
-              Group Link
-            </DxcSidenav.Link>
-          </DxcSidenav.Group>
-          <DxcSidenav.Group collapsable={false} title="Section Group">
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          </DxcSidenav.Group>
-        </DxcSidenav.Section>
-      </DxcSidenav>
-    </ExampleContainer>
-    <Title title="Opinionated theme" theme="light" level={2} />
-    <ExampleContainer>
-      <HalstackProvider theme={opinionatedTheme}>
-        <DxcSidenav title={<TitleComponent />}>
-          <DxcSidenav.Section>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper consectetur mollis. Suspendisse
-              vitae lacinia libero.
-            </p>
-          </DxcSidenav.Section>
-          <DxcSidenav.Section>
-            <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-            <DxcSidenav.Group collapsable={false} title="Single Group" icon={iconSVG}>
-              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-            </DxcSidenav.Group>
-          </DxcSidenav.Section>
-          <DxcSidenav.Section>
-            <DxcSidenav.Group collapsable={true} title="Section Group" icon={iconSVG}>
-              <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
-              <DxcSidenav.Link icon={iconSVG}>Group Link</DxcSidenav.Link>
-            </DxcSidenav.Group>
-            <DxcSidenav.Link icon={iconSVG}>Single Link</DxcSidenav.Link>
-            <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-            <DxcSidenav.Group collapsable={false} title="Section Group">
-              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-            </DxcSidenav.Group>
-          </DxcSidenav.Section>
-        </DxcSidenav>
-      </HalstackProvider>
-    </ExampleContainer>
-  </>
-);
-
-const CollapsedGroupSidenav = () => (
-  <>
-    <ExampleContainer>
-      <Title title="Collapsed group with a selected link" theme="light" level={4} />
-      <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
-        <DxcSidenav.Section>
-          <DxcSidenav.Group collapsable={true} title="Collapsed Group" icon={iconSVG}>
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          </DxcSidenav.Group>
-        </DxcSidenav.Section>
-        <DxcSidenav.Section>
-          <DxcSidenav.Group collapsable={true} title="Collapsed Group">
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-            <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
-          </DxcSidenav.Group>
-          <DxcSidenav.Group collapsable={true} title="Section Group">
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          </DxcSidenav.Group>
-        </DxcSidenav.Section>
-      </DxcSidenav>
-    </ExampleContainer>
-  </>
-);
-
-const HoveredGroupSidenav = () => (
-  <ExampleContainer pseudoState="pseudo-hover">
-    <Title title="Hover state for groups (selected and not)" theme="light" level={4} />
-    <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
-      <DxcSidenav.Section>
-        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Group collapsable={true} title="Collapsed Group">
-          <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-        </DxcSidenav.Group>
-      </DxcSidenav.Section>
-      <DxcSidenav.Section>
-        <DxcSidenav.Group collapsable={true} title="Not Collapsed Group">
-          <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-        </DxcSidenav.Group>
-        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Group collapsable={true} title="Collapsed Group">
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-        </DxcSidenav.Group>
-        <DxcSidenav.Group collapsable={true} title="Collapsed Group">
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-        </DxcSidenav.Group>
-      </DxcSidenav.Section>
-    </DxcSidenav>
-  </ExampleContainer>
-);
-
-const ActiveGroupSidenav = () => (
-  <ExampleContainer pseudoState="pseudo-active">
-    <Title title="Active state for groups (selected and not)" theme="light" level={4} />
-    <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
-      <DxcSidenav.Section>
-        <DxcInset space="1rem">
-          <DxcSelect
-            defaultValue="1"
-            options={[
-              { label: "v1.0.0", value: "1" },
-              { label: "v2.0.0", value: "2" },
-              { label: "v3.0.0", value: "3" },
-              { label: "v4.0.0", value: "4" },
-            ]}
-            size="fillParent"
-          />
-        </DxcInset>
-      </DxcSidenav.Section>
-      <DxcSidenav.Section>
-        <DxcSidenav.Group collapsable={true} title="Collapsed Group">
-          <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-        </DxcSidenav.Group>
-      </DxcSidenav.Section>
-      <DxcSidenav.Section>
-        <DxcSidenav.Group collapsable={true} title="Not Collapsed Group">
-          <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
-          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
-        </DxcSidenav.Group>
-        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-      </DxcSidenav.Section>
-    </DxcSidenav>
-  </ExampleContainer>
-);
-
-export const CollapsableGroup = CollapsedGroupSidenav.bind({});
-CollapsableGroup.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const collapsableGroups = canvas.getAllByText("Collapsed Group");
-  collapsableGroups.forEach((group) => {
-    userEvent.click(group);
-  });
-};
-
-export const CollapsedHoverGroup = HoveredGroupSidenav.bind({});
-CollapsedHoverGroup.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const collapsableGroups = canvas.getAllByText("Collapsed Group");
-  collapsableGroups.forEach((group) => {
-    userEvent.click(group);
-  });
-  await new Promise((resolve) => setTimeout(resolve, 1000));
-};
-
-export const CollapsedActiveGroup = ActiveGroupSidenav.bind({});
-CollapsedActiveGroup.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const collapsableGroups = canvas.getAllByText("Collapsed Group");
-  userEvent.click(collapsableGroups[0]);
-};

package/sidenav/Sidenav.test.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
-var _Sidenav = _interopRequireDefault(require("./Sidenav.tsx"));
-describe("Sidenav component tests", function () {
-  test("Sidenav renders anchors and Section correctly", function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], null, /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Section, null, /*#__PURE__*/_react["default"].createElement("p", null, "nav-content-test"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
-        href: "#"
-      }, "Link")))),
-      getByText = _render.getByText;
-    expect(getByText("nav-content-test")).toBeTruthy();
-    var link = getByText("Link");
-    expect(link.closest("a").getAttribute("href")).toBe("#");
-  });
-  test("Sidenav renders groups correctly", function () {
-    var sidenav = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], null, /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Section, null, /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Group, {
-      title: "Collapsable",
-      collapsable: true
-    }, /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
-      href: "#"
-    }, "Lorem ipsum"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
-      href: "#"
-    }, "Lorem ipsum"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
-      href: "#"
-    }, "Lorem ipsum"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
-      href: "#"
-    }, "Lorem ipsum"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
-      href: "#"
-    }, "Lorem ipsum")))));
-    expect(sidenav.getByText("Collapsable")).toBeTruthy();
-    expect(sidenav.getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
-    _react2.fireEvent.click(sidenav.getByText("Collapsable"));
-    expect(sidenav.getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
-  });
-});

package/sidenav/SidenavContext.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-type SidenavContextType = (isSidenavVisible: boolean) => void;
-export declare const SidenavContextProvider: import("react").Provider<SidenavContextType>;
-export declare const useResponsiveSidenavVisibility: () => SidenavContextType;
-export {};

package/sidenav/SidenavContext.js

@@ -1,13 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useResponsiveSidenavVisibility = exports.SidenavContextProvider = void 0;
-var _react = require("react");
-var SidenavContext = /*#__PURE__*/(0, _react.createContext)(null);
-var SidenavContextProvider = exports.SidenavContextProvider = SidenavContext.Provider;
-var useResponsiveSidenavVisibility = exports.useResponsiveSidenavVisibility = function useResponsiveSidenavVisibility() {
-  var changeResponsiveSidenavVisibility = (0, _react.useContext)(SidenavContext);
-  return changeResponsiveSidenavVisibility;
-};

package/sidenav/types.d.ts

@@ -1,76 +0,0 @@
-/// <reference types="react" />
-type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-export type SidenavTitlePropsType = {
-    /**
-     * The area inside the sidenav title. This area can be used to render custom content.
-     */
-    children: React.ReactNode;
-};
-export type SidenavSectionPropsType = {
-    /**
-     * The area inside the sidenav section. This area can be used to render sidenav groups, links and custom content.
-     */
-    children: React.ReactNode;
-};
-export type SidenavGroupPropsType = {
-    /**
-     * The title of the sidenav group.
-     */
-    title?: string;
-    /**
-     * If true, the sidenav group will be a button that will allow you to collapse the links contained within it.
-     * In addition, if it's collapsed and contains the currently selected link, the group title will also be marked as selected.
-     */
-    collapsable?: boolean;
-    /**
-     * Material Symbol name or SVG icon to be displayed next to the title of the group.
-     */
-    icon?: string | SVG;
-    /**
-     * The area inside the sidenav group. This area can be used to render sidenav links.
-     */
-    children: React.ReactNode;
-};
-export type SidenavLinkPropsType = {
-    /**
-     * Page to be opened when the user clicks on the link.
-     */
-    href?: string;
-    /**
-     * If true, the page is opened in a new browser tab.
-     */
-    newWindow?: boolean;
-    /**
-     * The Material symbol or SVG element used as the icon that will be placed to the left of the link text.
-     */
-    icon?: string | SVG;
-    /**
-     * If true, the link will be marked as selected. Moreover, in that same case,
-     * if it is contained within a collapsed group, and consequently, the currently selected link is not visible,
-     * the group title will appear as selected too.
-     */
-    selected?: boolean;
-    /**
-     * This function will be called when the user clicks the link and the event will be passed to this function.
-     */
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-    /**
-     * The area inside the sidenav link.
-     */
-    children: React.ReactNode;
-    /**
-     * Value of the tabindex.
-     */
-    tabIndex?: number;
-};
-type Props = {
-    /**
-     * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
-     */
-    title?: React.ReactNode;
-    /**
-     * The area inside the sidenav. This area can be used to render the content inside the sidenav.
-     */
-    children: React.ReactNode;
-};
-export default Props;

package/sidenav/types.js

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

package/slider/Slider.accessibility.test.js

@@ -1,104 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@testing-library/react");
-var _jestAxe = require("jest-axe");
-var _Slider = _interopRequireDefault(require("./Slider.tsx"));
-// Mocking DOMRect for Radix Primitive Popover
-global.globalThis = global;
-global.DOMRect = {
-  fromRect: function fromRect() {
-    return {
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      width: 0,
-      height: 0
-    };
-  }
-};
-global.ResizeObserver = /*#__PURE__*/function () {
-  function ResizeObserver() {
-    (0, _classCallCheck2["default"])(this, ResizeObserver);
-  }
-  (0, _createClass2["default"])(ResizeObserver, [{
-    key: "observe",
-    value: function observe() {}
-  }, {
-    key: "unobserve",
-    value: function unobserve() {}
-  }, {
-    key: "disconnect",
-    value: function disconnect() {}
-  }]);
-  return ResizeObserver;
-}();
-describe("Slider component accessibility tests", function () {
-  it("Should not have basic accessibility issues", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
-    var _render, container, results;
-    return _regenerator["default"].wrap(function _callee$(_context) {
-      while (1) switch (_context.prev = _context.next) {
-        case 0:
-          _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
-            helperText: "Helper Text",
-            margin: "medium",
-            name: "Name",
-            size: "medium",
-            label: "label",
-            step: 10,
-            minValue: 0,
-            maxValue: 100,
-            value: 50,
-            showLimitsValues: true,
-            showInput: true,
-            marks: true
-          })), container = _render.container;
-          _context.next = 3;
-          return (0, _jestAxe.axe)(container);
-        case 3:
-          results = _context.sent;
-          expect(results).toHaveNoViolations();
-        case 5:
-        case "end":
-          return _context.stop();
-      }
-    }, _callee);
-  })));
-  it("Should not have basic accessibility issues for disabled mode", /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
-    var _render2, container, results;
-    return _regenerator["default"].wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
-        case 0:
-          _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
-            helperText: "Helper Text",
-            margin: "medium",
-            name: "Name",
-            size: "medium",
-            label: "label",
-            step: 10,
-            minValue: 0,
-            maxValue: 100,
-            value: 50,
-            showLimitsValues: true,
-            showInput: true,
-            marks: true,
-            disabled: true
-          })), container = _render2.container;
-          _context2.next = 3;
-          return (0, _jestAxe.axe)(container);
-        case 3:
-          results = _context2.sent;
-          expect(results).toHaveNoViolations();
-        case 5:
-        case "end":
-          return _context2.stop();
-      }
-    }, _callee2);
-  })));
-});

package/slider/Slider.d.ts

@@ -1,4 +0,0 @@
-import React from "react";
-import SliderPropsType from "./types";
-declare const DxcSlider: React.ForwardRefExoticComponent<SliderPropsType & React.RefAttributes<HTMLDivElement>>;
-export default DxcSlider;