@dxc-technology/halstack-react 0.0.0-e884f9f → 0.0.0-e922b5b

package/sidenav/Sidenav.stories.tsx

@@ -1,165 +1,180 @@
 import React from "react";
-import styled from "styled-components";
 import DxcSidenav from "./Sidenav";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { userEvent, within } from "@storybook/testing-library";
 
 export default {
   title: "Sidenav",
   component: DxcSidenav,
 };
 
-const linkClick = () => {
-  console.log("click");
-};
+const iconSVG = (
+  <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 StyledContainer = styled["div"]`
-  display: flex;
-  flex-direction: row;
-  height: 500px;
-`;
+const TitleComponent = () => {
+  return <DxcSidenav.Title>Dxc technology</DxcSidenav.Title>;
+};
 
 export const Chromatic = () => (
   <>
     <ExampleContainer>
-      <Title title="Deafult sidenav" theme="light" level={4} />
-      <DxcSidenav>
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
-
-    <ExampleContainer>
-      <Title title="Sidenav with xxsmall padding" theme="light" level={4} />
-      <DxcSidenav padding="xxsmall">
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
-
-    <ExampleContainer>
-      <Title title="Sidenav with xsmall padding" theme="light" level={4} />
-      <DxcSidenav padding="xsmall">
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
-
-    <ExampleContainer>
-      <Title title="Sidenav with small padding" theme="light" level={4} />
-      <DxcSidenav padding="small">
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
-
-    <ExampleContainer>
-      <Title title="Sidenav with medium padding" theme="light" level={4} />
-      <DxcSidenav padding="medium">
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
+      <Title title="Default sidenav" theme="light" level={4} />
+      <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>
     </ExampleContainer>
+  </>
+);
 
-    <ExampleContainer>
-      <Title title="Sidenav with large padding" theme="light" level={4} />
-      <DxcSidenav padding="large">
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
+export const FocusedSidenav = () => (
+  <ExampleContainer pseudoState="pseudo-focus">
+    <Title title="Default sidenav" theme="light" level={4} />
+    <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.Link>Single Link</DxcSidenav.Link>
+        <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+          <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="Collapsable 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={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>
+);
 
+const CollapsedGroup = () => (
+  <>
     <ExampleContainer>
-      <Title title="Sidenav with xlarge padding" theme="light" level={4} />
-      <DxcSidenav padding="xlarge">
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
+      <Title title="Default sidenav" theme="light" level={4} />
+      <DxcSidenav title={<TitleComponent />}>
+        <DxcSidenav.Section>
+          <DxcSidenav.Group collapsable={true} title="Collapsable 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="Collapsable Group">
+            <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+          <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>
-      <Title title="Sidenav with xxlarge padding" theme="light" level={4} />
-      <DxcSidenav padding="xxlarge">
-        {" "}
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>
-        <p>Lorem ipsum</p>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
+const HoverSidenav = () => (
+  <ExampleContainer pseudoState="pseudo-hover">
+    <Title title="Default sidenav" theme="light" level={4} />
+    <DxcSidenav title={<TitleComponent />}>
+      <DxcSidenav.Section>
+        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+        <DxcSidenav.Group collapsable={true} title="Collapsable 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="Collapsable Group">
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+        </DxcSidenav.Group>
 
-    <ExampleContainer>
-      <Title title="Sidenav compound components" theme="light" level={4} />
-      <DxcSidenav>
-        <DxcSidenav.Title>My sidenav</DxcSidenav.Title>
-        <DxcSidenav.Subtitle>Components</DxcSidenav.Subtitle>
-        <DxcSidenav.Link href="#">Button</DxcSidenav.Link>
-        <DxcSidenav.Link href="#">Date</DxcSidenav.Link>
-        <DxcSidenav.Subtitle>Guidelines</DxcSidenav.Subtitle>
-        <DxcSidenav.Link onClick={linkClick}>Layout</DxcSidenav.Link>
-        <DxcSidenav.Link onClick={linkClick}>Footer</DxcSidenav.Link>
-      </DxcSidenav>
-    </ExampleContainer>
+        <DxcSidenav.Group collapsable={true} title="Collapsable 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>
-      <Title title="Sidenav with scroll" theme="light" level={4} />
-      <StyledContainer>
-        <DxcSidenav>
-          <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>
-        </DxcSidenav>
-      </StyledContainer>
-    </ExampleContainer>
+export const CollapseGroup = CollapsedGroup.bind({});
+CollapseGroup.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const collapsableGroups = canvas.getAllByText("Collapsable Group");
+  collapsableGroups.forEach((group) => {
+    userEvent.click(group);
+  });
+};
 
-    <ExampleContainer pseudoState="pseudo-focus-visible">
-      <Title title="Focused" theme="light" level={4} />
-      <DxcSidenav>
-        <DxcSidenav.Title>My sidenav</DxcSidenav.Title>
-        <DxcSidenav.Subtitle>Components</DxcSidenav.Subtitle>
-        <DxcSidenav.Link href="#">Button</DxcSidenav.Link>
-        <DxcSidenav.Link href="#">Date</DxcSidenav.Link>
-        <DxcSidenav.Subtitle>Guidelines</DxcSidenav.Subtitle>
-        <DxcSidenav.Link onClick={linkClick}>Layout</DxcSidenav.Link>
-        <DxcSidenav.Link onClick={linkClick}>Footer</DxcSidenav.Link>
-      </DxcSidenav>
-    </ExampleContainer>
-  </>
-);
+export const CollapseHoverGroup = HoverSidenav.bind({});
+CollapseHoverGroup.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const collapsableGroups = canvas.getAllByText("Collapsable Group");
+  collapsableGroups.forEach((group) => {
+    userEvent.click(group);
+  });
+};

package/sidenav/Sidenav.test.js

@@ -0,0 +1,44 @@
+"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/types.d.ts

@@ -1,50 +1,73 @@
 /// <reference types="react" />
-declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
-declare type Padding = {
-    top?: Space;
-    bottom?: Space;
-    left?: Space;
-    right?: Space;
-};
-export declare type SidenavLinkPropsType = {
-    /**
-     * Value of the tabindex.
-     */
-    tabIndex?: number;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+declare type SidenavPropsType = {
     /**
-     * Page to be opened when the user clicks on the link.
+     * The area inside the sidenav. This area can be used to render the content inside the sidenav.
      */
-    href?: string;
+    children: React.ReactNode;
     /**
-     * This function will be called when the user clicks the link.
+     * The area assigned to render the sidenav title. It is highly recommended to use the sidenav title.
      */
-    onClick?: () => void;
+    title?: React.ReactNode;
+};
+export declare type SidenavTitlePropsType = {
     /**
-     * The area inside the sidenav link. This area can be used to render custom content.
+     * The area inside the sidenav title. This area can be used to render custom content.
      */
     children: React.ReactNode;
 };
-export declare type SidenavTitlePropsType = {
+export declare type SidenavSectionPropsType = {
     /**
-     * The area inside the sidenav title. This area can be used to render custom content.
+     * 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 SidenavSubtitlePropsType = {
+export declare type SidenavGroupPropsType = {
     /**
-     * The area inside the sidenav subtitle. This area can be used to render custom content.
+     * The area inside the sidenav group. This area can be used to render sidenav links.
      */
     children: React.ReactNode;
+    /**
+     * 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.
+     */
+    collapsable?: boolean;
+    /**
+     * The icon to be displayed next to the title of the group.
+     */
+    icon?: string | SVG;
 };
-declare type SidenavPropsType = {
+export declare type SidenavLinkPropsType = {
     /**
-     * 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.
+     * Value of the tabindex.
      */
-    padding?: Space | Padding;
+    tabIndex?: number;
     /**
-     * The area inside the sidenav. This area can be used to render custom content.
+     * Page to be opened when the user clicks on the link.
      */
-    children: React.ReactNode;
+    href?: string;
+    /**
+     * If true, the page is opened in a new browser tab.
+     */
+    newWindow?: boolean;
+    /**
+     * Element or path 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.
+     */
+    selected?: boolean;
+    /**
+     * The area inside the sidenav link.
+     */
+    children: string;
+    /**
+     * This function will be called when the user clicks the link.
+     */
+    onClick?: ($event: any) => void;
 };
 export default SidenavPropsType;

package/slider/Slider.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import SliderPropsType from "./types";
-declare const DxcSlider: ({ label, name, value, helperText, minValue, maxValue, step, showLimitsValues, showInput, disabled, marks, onChange, onDragEnd, labelFormatCallback, margin, size, }: SliderPropsType) => JSX.Element;
+declare const DxcSlider: ({ label, name, defaultValue, value, helperText, minValue, maxValue, step, showLimitsValues, showInput, disabled, marks, onChange, onDragEnd, labelFormatCallback, margin, size, }: SliderPropsType) => JSX.Element;
 export default DxcSlider;