@dxc-technology/halstack-react 5.0.0 → 6.0.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.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/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.js

@@ -29,6 +29,8 @@ var _utils = require("../common/utils.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
 
 var _templateObject, _templateObject2;
@@ -70,6 +72,7 @@ var DxcSwitch = function DxcSwitch(_ref) {
       setInnerChecked = _useState4[1];
 
   var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
   var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
 
   var handlerSwitchChange = function handlerSwitchChange(event) {
@@ -88,7 +91,7 @@ var DxcSwitch = function DxcSwitch(_ref) {
     onClick: !disabled && handlerSwitchChange,
     disabled: disabled,
     backgroundType: backgroundType
-  }, labelPosition === "before" ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, label, " ", optional && /*#__PURE__*/_react["default"].createElement("span", null, "(Optional)")) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, optional && /*#__PURE__*/_react["default"].createElement("span", null, "(Optional)"), " ", label));
+  }, labelPosition === "before" ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, label, " ", optional && /*#__PURE__*/_react["default"].createElement("span", null, translatedLabels.formFields.optionalLabel)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, optional && /*#__PURE__*/_react["default"].createElement("span", null, translatedLabels.formFields.optionalLabel), " ", label));
 
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme["switch"]

package/tabs/Tabs.stories.tsx

@@ -78,12 +78,6 @@ export const Chromatic = () => (
       <Title title="With icon on the left and notification number" theme="light" level={4} />
       <DxcTabs tabs={tabsNotificationIcon} iconPosition="left" />
     </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Scrollable" theme="light" level={4} />
-      <div style={{ width: "400px" }}>
-        <DxcTabs tabs={tabsNotificationIcon} iconPosition="left" defaultActiveTabIndex={1} />
-      </div>
-    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />

package/tabs-nav/NavTabs.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { NavTabsContextProps, NavTabsProps } from "./types";
+export declare const NavTabsContext: React.Context<NavTabsContextProps>;
+declare const DxcNavTabs: {
+    ({ iconPosition, tabIndex, children }: NavTabsProps): JSX.Element;
+    Tab: React.ForwardRefExoticComponent<import("./types").TabProps & React.RefAttributes<HTMLAnchorElement>>;
+};
+export default DxcNavTabs;