@dxc-technology/halstack-react 0.0.0-b0ab1e3 → 0.0.0-b0ec7b9

package/sidenav/Sidenav.stories.tsx

@@ -1,182 +1,277 @@
 import React from "react";
-import styled from "styled-components";
 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/test";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Sidenav",
   component: DxcSidenav,
 };
 
-const linkClick = () => {
-  console.log("click");
+const iconSVG = (
+  <svg
+    version="1.1"
+    x="0px"
+    y="0px"
+    width="438.536px"
+    height="438.536px"
+    viewBox="0 0 438.536 438.536"
+    fill="currentColor"
+  >
+    <g>
+      <path
+        d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
+C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
+h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
+C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
+c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
+c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
+      />
+    </g>
+  </svg>
+);
+
+const TitleComponent = () => {
+  return <DxcSidenav.Title>Dxc technology</DxcSidenav.Title>;
 };
 
-const StyledContainer = styled["div"]`
-  display: flex;
-  flex-direction: row;
-  height: 500px;
-`;
+const opinionatedTheme = {
+  sidenav: {
+    baseColor: "#f2f2f2",
+  },
+};
 
 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>{" "}
+      <Title title="Default sidenav" theme="light" level={4} />
+      <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
+        <DxcSidenav.Section>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper consectetur mollis. Suspendisse
+            vitae lacinia libero.
+          </p>
+        </DxcSidenav.Section>
+        <DxcSidenav.Section>
+          <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+          <DxcSidenav.Group collapsable={false} title="Single Group" icon={iconSVG}>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+        </DxcSidenav.Section>
+        <DxcSidenav.Section>
+          <DxcSidenav.Group collapsable={true} title="Section Group" icon="filled_bottom_app_bar">
+            <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link icon={iconSVG}>Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+          <DxcSidenav.Link icon="filled_bottom_app_bar" newWindow>
+            Single Link
+          </DxcSidenav.Link>
+          <DxcSidenav.Link newWindow>Single Link</DxcSidenav.Link>
+          <DxcSidenav.Group collapsable={false} title="Section Group">
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+        </DxcSidenav.Section>
       </DxcSidenav>
     </ExampleContainer>
-
-    <ExampleContainer>
-      <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>{" "}
+    <ExampleContainer pseudoState="pseudo-focus">
+      <Title title="Focused options sidenav" theme="light" level={4} />
+      <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
+        <DxcSidenav.Section>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper consectetur mollis. Suspendisse
+            vitae lacinia libero.
+          </p>
+        </DxcSidenav.Section>
+        <DxcSidenav.Section>
+          <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+          <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+            <DxcSidenav.Link icon="filled_bottom_app_bar">Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+        </DxcSidenav.Section>
+        <DxcSidenav.Section>
+          <DxcSidenav.Group collapsable={true} title="Collapsable Group">
+            <DxcSidenav.Link selected icon={iconSVG}>
+              Group Link
+            </DxcSidenav.Link>
+          </DxcSidenav.Group>
+          <DxcSidenav.Group collapsable={false} title="Section Group">
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+        </DxcSidenav.Section>
       </DxcSidenav>
     </ExampleContainer>
-
+    <Title title="Opinionated theme" theme="light" level={2} />
     <ExampleContainer>
-      <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>{" "}
-      </DxcSidenav>
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcSidenav title={<TitleComponent />}>
+          <DxcSidenav.Section>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ullamcorper consectetur mollis. Suspendisse
+              vitae lacinia libero.
+            </p>
+          </DxcSidenav.Section>
+          <DxcSidenav.Section>
+            <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+            <DxcSidenav.Group collapsable={false} title="Single Group" icon={iconSVG}>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            </DxcSidenav.Group>
+          </DxcSidenav.Section>
+          <DxcSidenav.Section>
+            <DxcSidenav.Group collapsable={true} title="Section Group" icon={iconSVG}>
+              <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link icon={iconSVG}>Group Link</DxcSidenav.Link>
+            </DxcSidenav.Group>
+            <DxcSidenav.Link icon={iconSVG}>Single Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+            <DxcSidenav.Group collapsable={false} title="Section Group">
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+              <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            </DxcSidenav.Group>
+          </DxcSidenav.Section>
+        </DxcSidenav>
+      </HalstackProvider>
     </ExampleContainer>
+  </>
+);
 
+const CollapsedGroupSidenav = () => (
+  <>
     <ExampleContainer>
-      <Title title="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>{" "}
+      <Title title="Collapsed group with a selected link" theme="light" level={4} />
+      <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
+        <DxcSidenav.Section>
+          <DxcSidenav.Group collapsable={true} title="Collapsed Group" icon={iconSVG}>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+        </DxcSidenav.Section>
+        <DxcSidenav.Section>
+          <DxcSidenav.Group collapsable={true} title="Collapsed Group">
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+          <DxcSidenav.Group collapsable={true} title="Section Group">
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+            <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          </DxcSidenav.Group>
+        </DxcSidenav.Section>
       </DxcSidenav>
     </ExampleContainer>
+  </>
+);
 
-    <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>{" "}
-      </DxcSidenav>
-    </ExampleContainer>
+const HoveredGroupSidenav = () => (
+  <ExampleContainer pseudoState="pseudo-hover">
+    <Title title="Hover state for groups (selected and not)" theme="light" level={4} />
+    <DxcSidenav title={<DxcSidenav.Title>Dxc technology</DxcSidenav.Title>}>
+      <DxcSidenav.Section>
+        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+        <DxcSidenav.Group collapsable={true} title="Collapsed Group">
+          <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+        </DxcSidenav.Group>
+      </DxcSidenav.Section>
+      <DxcSidenav.Section>
+        <DxcSidenav.Group collapsable={true} title="Not Collapsed Group">
+          <DxcSidenav.Link selected>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+        </DxcSidenav.Group>
+        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+        <DxcSidenav.Link>Single Link</DxcSidenav.Link>
+        <DxcSidenav.Group collapsable={true} title="Collapsed Group">
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+        </DxcSidenav.Group>
+        <DxcSidenav.Group collapsable={true} title="Collapsed Group">
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+          <DxcSidenav.Link>Group Link</DxcSidenav.Link>
+        </DxcSidenav.Group>
+      </DxcSidenav.Section>
+    </DxcSidenav>
+  </ExampleContainer>
+);
 
-    <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 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>
+);
 
-    <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>
+export const CollapsableGroup = CollapsedGroupSidenav.bind({});
+CollapsableGroup.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const collapsableGroups = canvas.getAllByText("Collapsed Group");
+  collapsableGroups.forEach((group) => {
+    userEvent.click(group);
+  });
+};
 
-    <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 CollapsedHoverGroup = HoveredGroupSidenav.bind({});
+CollapsedHoverGroup.play = async ({ canvasElement }) => {
+  const canvas = within(canvasElement);
+  const collapsableGroups = canvas.getAllByText("Collapsed Group");
+  collapsableGroups.forEach((group) => {
+    userEvent.click(group);
+  });
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+};
 
-    <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 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,56 +1,37 @@
 "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"));
-
-var navContent = /*#__PURE__*/_react["default"].createElement("p", null, "nav-content-test");
-
 describe("Sidenav component tests", function () {
-  test("Sidenav  renders nav  content", function () {
-    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Sidenav["default"], null, navContent)),
-        getByText = _render.getByText;
-
-    expect(getByText("nav-content-test")).toBeTruthy();
-  });
-  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;
-
+  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 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");
-
-    _react2.fireEvent.click(link);
-
-    expect(onClick).toHaveBeenCalled();
+    }, "Lorem ipsum"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
+      href: "#"
+    }, "Lorem ipsum"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
+      href: "#"
+    }, "Lorem ipsum"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
+      href: "#"
+    }, "Lorem ipsum"), /*#__PURE__*/_react["default"].createElement(_Sidenav["default"].Link, {
+      href: "#"
+    }, "Lorem ipsum")))));
+    expect(sidenav.getByText("Collapsable")).toBeTruthy();
+    expect(sidenav.getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("true");
+    _react2.fireEvent.click(sidenav.getByText("Collapsable"));
+    expect(sidenav.getAllByRole("button")[0].getAttribute("aria-expanded")).toBe("false");
   });
 });

package/sidenav/SidenavContext.d.ts

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

package/sidenav/SidenavContext.js

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