@dxc-technology/halstack-react 5.0.0 → 6.1.0

package/sidenav/Sidenav.stories.tsx

@@ -1,182 +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. 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.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

@@ -6,51 +6,39 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Sidenav = _interopRequireDefault(require("./Sidenav"));
-
-var navContent = /*#__PURE__*/_react["default"].createElement("p", null, "nav-content-test");
+var _Sidenav = _interopRequireDefault(require("./Sidenav.tsx"));
 
 describe("Sidenav component tests", function () {
-  test("Sidenav  renders nav  content", function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], null, navContent)),
+  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 nav and page content in mobile version", function () {
-    //425 is mobile width
-    Object.defineProperty(HTMLElement.prototype, "offsetWidth", {
-      configurable: true,
-      value: 425
-    });
-
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], null, navContent)),
-        getByText = _render2.getByText;
-
-    expect(getByText("nav-content-test")).toBeTruthy();
-  });
-  test("Sidenav renders compound components", function () {
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], null, /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Title, null, "test-title"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Subtitle, null, "test-subtitle"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
+  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: "#"
-    }, "test-link"))),
-        getByText = _render3.getByText;
-
-    expect(getByText("test-title")).toBeTruthy();
-    expect(getByText("test-subtitle")).toBeTruthy();
-    expect(getByText("test-link")).toBeTruthy();
-  });
-  test("Sidenav link onClick", function () {
-    var onClick = jest.fn();
-
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], null, /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
-      onClick: onClick
-    }, "test-link"))),
-        getByText = _render4.getByText;
-
-    var link = getByText("test-link");
+    }, "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(link);
+    _react2.fireEvent.click(sidenav.getByText("Collapsable"));
 
-    expect(onClick).toHaveBeenCalled();
+    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.js

@@ -89,7 +89,7 @@ var DxcSlider = function DxcSlider(_ref) {
   }, [labelFormatCallback, maxValue]);
 
   var handlerSliderChange = function handlerSliderChange(event, newValue) {
-    var valueToCheck = value !== null && value !== void 0 ? value : innerValue;
+    var valueToCheck = value != null && value >= 0 ? value : innerValue;
     valueToCheck !== newValue && setInnerValue(newValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
   };
@@ -128,7 +128,7 @@ var DxcSlider = function DxcSlider(_ref) {
     backgroundType: backgroundType,
     disabled: disabled
   }, minLabel), /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
-    value: value != null && value >= 0 && value || innerValue,
+    value: value != null && value >= 0 ? value : innerValue,
     min: minValue,
     max: maxValue,
     onChange: handlerSliderChange,
@@ -143,7 +143,7 @@ var DxcSlider = function DxcSlider(_ref) {
     step: step
   }, maxLabel), showInput && /*#__PURE__*/_react["default"].createElement(StyledTextInput, null, /*#__PURE__*/_react["default"].createElement(_TextInput["default"], {
     name: name,
-    value: value != null && value >= 0 && value.toString() || innerValue.toString(),
+    value: value != null && value >= 0 ? value.toString() : innerValue.toString(),
     disabled: disabled,
     onChange: handlerInputChange,
     size: "fillParent"

package/slider/Slider.test.js

@@ -6,6 +6,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
 var _Slider = _interopRequireDefault(require("./Slider"));
 
 describe("Slider component tests", function () {
@@ -147,4 +149,39 @@ describe("Slider component tests", function () {
     expect(getByText("100$")).toBeTruthy();
     expect(labelFormatCallback).toHaveBeenCalledTimes(2);
   });
+  test("Change value correctly to 0 from external function", function () {
+    var onChange = jest.fn();
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+      minValue: 0,
+      maxValue: 100,
+      onChange: onChange,
+      showLimitsValues: true,
+      value: 13,
+      showInput: true
+    })),
+        rerender = _render8.rerender,
+        getByRole = _render8.getByRole;
+
+    var slider = getByRole("slider");
+
+    _userEvent["default"].tab();
+
+    _react2.fireEvent.keyDown(slider, {
+      key: "ArrowRight",
+      code: "ArrowRight",
+      keyCode: 39,
+      charCode: 39
+    });
+
+    rerender( /*#__PURE__*/_react["default"].createElement(_Slider["default"], {
+      minValue: 0,
+      maxValue: 100,
+      onChange: onChange,
+      showLimitsValues: true,
+      value: 0,
+      showInput: true
+    }));
+    expect(slider.getAttribute("aria-valuenow")).toBe("0");
+  });
 });

package/spinner/Spinner.js

@@ -199,7 +199,7 @@ var SVGSpinner = _styledComponents["default"].svg(_templateObject8 || (_template
 var CircleSpinner = _styledComponents["default"].circle(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  fill: transparent;\n  stroke-linecap: initial;\n  vector-effect: non-scaling-stroke;\n  animation: ", ";\n  stroke: ", ";\n  transform-origin: ", ";\n  stroke-dasharray: ", ";\n  stroke-width: ", ";\n  stroke-dashoffset: ", ";\n"])), function (props) {
   return props.isDeterminated ? "none" : props.mode !== "small" ? "1.4s ease-in-out infinite both svg-circle-large" : "1.4s ease-in-out infinite both svg-circle-small";
 }, function (props) {
-  return props.backgroundType === "dark" ? props.theme.trackCircleColorOnDark : props.theme.trackCircleColor;
+  return props.backgroundType === "dark" || props.mode === "overlay" ? props.theme.trackCircleColorOverlay : props.theme.trackCircleColor;
 }, function (props) {
   return !props.isDeterminated ? "50% 50%" : "";
 }, function (props) {

package/switch/Switch.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import SwitchPropsType from "./types";
+import { SwitchPropsType } from "./types";
 declare const DxcSwitch: ({ defaultChecked, checked, value, label, labelPosition, name, disabled, optional, onChange, margin, size, tabIndex, }: SwitchPropsType) => JSX.Element;
 export default DxcSwitch;