@dxc-technology/halstack-react 0.0.0-a062293 → 0.0.0-a0fadb7

package/sidenav/Sidenav.stories.tsx

@@ -1,8 +1,11 @@
 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",
@@ -12,7 +15,6 @@ export default {
 const iconSVG = (
   <svg
     version="1.1"
-    id="Capa_1"
     x="0px"
     y="0px"
     width="438.536px"
@@ -33,6 +35,16 @@ c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.11
   </svg>
 );
 
+const TitleComponent = () => {
+  return <DxcSidenav.Title>Dxc technology</DxcSidenav.Title>;
+};
+
+const opinionatedTheme = {
+  sidenav: {
+    baseColor: "#f2f2f2",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -54,15 +66,11 @@ export const Chromatic = () => (
           </DxcSidenav.Group>
         </DxcSidenav.Section>
         <DxcSidenav.Section>
-          <DxcSidenav.Group
-            collapsable={true}
-            title="Section Group"
-            icon="https://cdn-icons-png.flaticon.com/512/5039/5039041.png"
-          >
+          <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="https://upload.wikimedia.org/wikipedia/commons/7/73/Flat_tick_icon.svg" newWindow>
+          <DxcSidenav.Link icon="filled_bottom_app_bar" newWindow>
             Single Link
           </DxcSidenav.Link>
           <DxcSidenav.Link newWindow>Single Link</DxcSidenav.Link>
@@ -86,7 +94,7 @@ export const Chromatic = () => (
         <DxcSidenav.Section>
           <DxcSidenav.Link>Single Link</DxcSidenav.Link>
           <DxcSidenav.Group collapsable={true} title="Collapsable Group">
-            <DxcSidenav.Link icon="https://cdn-icons-png.flaticon.com/512/5039/5039041.png">Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link icon="filled_bottom_app_bar">Group Link</DxcSidenav.Link>
           </DxcSidenav.Group>
         </DxcSidenav.Section>
         <DxcSidenav.Section>
@@ -101,16 +109,51 @@ export const Chromatic = () => (
         </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 CollapsedGroup = () => (
+const CollapsedGroupSidenav = () => (
   <>
     <ExampleContainer>
-      <Title title="Default sidenav" theme="light" level={4} />
+      <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="Collapsable Group" icon={iconSVG}>
+          <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>
@@ -118,11 +161,11 @@ const CollapsedGroup = () => (
           </DxcSidenav.Group>
         </DxcSidenav.Section>
         <DxcSidenav.Section>
-          <DxcSidenav.Group collapsable={true} title="Collapsable Group">
-            <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
+          <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={false} title="Section 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>
@@ -133,14 +176,14 @@ const CollapsedGroup = () => (
   </>
 );
 
-const HoverSidenav = () => (
+const HoveredGroupSidenav = () => (
   <ExampleContainer pseudoState="pseudo-hover">
-    <Title title="Default sidenav" theme="light" level={4} />
+    <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="Collapsable Group">
+        <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>
@@ -154,36 +197,81 @@ const HoverSidenav = () => (
         </DxcSidenav.Group>
         <DxcSidenav.Link>Single Link</DxcSidenav.Link>
         <DxcSidenav.Link>Single Link</DxcSidenav.Link>
-        <DxcSidenav.Group collapsable={true} title="Collapsable 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.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>
+);
 
-        <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+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 CollapseGroup = CollapsedGroup.bind({});
-CollapseGroup.play = async ({ canvasElement }) => {
+export const CollapsableGroup = CollapsedGroupSidenav.bind({});
+CollapsableGroup.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const collapsableGroups = canvas.getAllByText("Collapsable Group");
+  const collapsableGroups = canvas.getAllByText("Collapsed Group");
   collapsableGroups.forEach((group) => {
     userEvent.click(group);
   });
 };
 
-export const CollapseHoverGroup = HoverSidenav.bind({});
-CollapseHoverGroup.play = async ({ canvasElement }) => {
+export const CollapsedHoverGroup = HoveredGroupSidenav.bind({});
+CollapsedHoverGroup.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
-  const collapsableGroups = canvas.getAllByText("Collapsable Group");
+  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.d.ts

@@ -0,0 +1 @@
+export {};

package/sidenav/Sidenav.test.js

@@ -1,20 +1,15 @@
 "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"));
-
+var _Sidenav = _interopRequireDefault(require("./Sidenav"));
 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;
-
+        href: "#"
+      }, "Link")))),
+      getByText = _render.getByText;
     expect(getByText("nav-content-test")).toBeTruthy();
     var link = getByText("Link");
     expect(link.closest("a").getAttribute("href")).toBe("#");
@@ -36,9 +31,7 @@ describe("Sidenav component tests", function () {
     }, "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/{layout → sidenav}/SidenavContext.d.ts

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

package/{layout → sidenav}/SidenavContext.js

@@ -4,16 +4,10 @@ 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 = SidenavContext.Provider;
-exports.SidenavContextProvider = SidenavContextProvider;
-
-var useResponsiveSidenavVisibility = function useResponsiveSidenavVisibility() {
+var SidenavContextProvider = exports.SidenavContextProvider = SidenavContext.Provider;
+var useResponsiveSidenavVisibility = exports.useResponsiveSidenavVisibility = function useResponsiveSidenavVisibility() {
   var changeResponsiveSidenavVisibility = (0, _react.useContext)(SidenavContext);
   return changeResponsiveSidenavVisibility;
-};
-
-exports.useResponsiveSidenavVisibility = useResponsiveSidenavVisibility;
+};

package/sidenav/types.d.ts

@@ -1,50 +1,37 @@
 /// <reference types="react" />
-declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-declare type SidenavPropsType = {
-    /**
-     * The area inside the sidenav. This area can be used to render the content inside the sidenav.
-     */
-    children: React.ReactNode;
-    /**
-     * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
-     */
-    title?: React.ReactNode;
-};
-export declare type SidenavTitlePropsType = {
+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 declare type SidenavSectionPropsType = {
+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 declare type SidenavGroupPropsType = {
-    /**
-     * The area inside the sidenav group. This area can be used to render sidenav links.
-     */
-    children: React.ReactNode;
+export type SidenavGroupPropsType = {
     /**
      * The title of the sidenav group.
      */
     title?: string;
     /**
-     * If true the sidenav group title will be considered a button and the group will be collapsable.
+     * 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;
     /**
-     * The icon to be displayed next to the title of the group.
+     * Material Symbol name or SVG icon to be displayed next to the title of the group.
      */
     icon?: string | SVG;
-};
-export declare type SidenavLinkPropsType = {
     /**
-     * Value of the tabindex.
+     * The area inside the sidenav group. This area can be used to render sidenav links.
      */
-    tabIndex?: number;
+    children: React.ReactNode;
+};
+export type SidenavLinkPropsType = {
     /**
      * Page to be opened when the user clicks on the link.
      */
@@ -54,20 +41,36 @@ export declare type SidenavLinkPropsType = {
      */
     newWindow?: boolean;
     /**
-     * Element or path used as the icon that will be placed to the left of the link text.
+     * 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. This can also affect the group if it is closed to indicate that one of its links is selected.
+     * 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: string;
+    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;
     /**
-     * This function will be called when the user clicks the link.
+     * The area inside the sidenav. This area can be used to render the content inside the sidenav.
      */
-    onClick?: ($event: any) => void;
+    children: React.ReactNode;
 };
-export default SidenavPropsType;
+export default Props;

package/slider/Slider.accessibility.test.d.ts

@@ -0,0 +1 @@
+export {};

package/slider/Slider.accessibility.test.js

@@ -0,0 +1,104 @@
+"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 _axeHelper = require("../../test/accessibility/axe-helper.js");
+var _Slider = _interopRequireDefault(require("./Slider"));
+// 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, _axeHelper.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, _axeHelper.axe)(container);
+        case 3:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+        case 5:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  })));
+});