Sidenav: remove sidenav button (#478)

* refactor(sidenav): remove sidenav button

* refactor(sidenav-button): remove sus comma

* refactor(sidenav-button): remove test for sidenav button

* fix(sidenav): remove automatic sliding behavior

* feat(sidenav): render button conditionally and add unit tests

* refactor(sidenav-button): add changeset

* Remove console log statement

Co-authored-by: Dane Hillard <github@danehillard.com>

* fix(sidenav): fix storybook

---------

Co-authored-by: Evan Shoup <evan.shoup@ithaka.org>
Co-authored-by: Jialin He <jialin.he@ithaka.org>
Co-authored-by: Jialin He <38861633+jialin-he@users.noreply.github.com>
Co-authored-by: Evan Shoup <112417900+shoupeva-ithaka@users.noreply.github.com>
Co-authored-by: Dane Hillard <github@danehillard.com>

.changeset/gorgeous-months-vanish.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': major
+---
+
+remove sidenav button, add consumer controls

.storybook/initComponents.js

@@ -30,7 +30,6 @@ import {
   PharosSelect,
   PharosSheet,
   PharosSidenav,
-  PharosSidenavButton,
   PharosSidenavLink,
   PharosSidenavMenu,
   PharosSidenavSection,
@@ -80,7 +79,6 @@ registerComponents('storybook', [
   PharosSelect,
   PharosSheet,
   PharosSidenav,
-  PharosSidenavButton,
   PharosSidenavLink,
   PharosSidenavMenu,
   PharosSidenavSection,

packages/pharos-site/initComponents.tsx

@@ -33,7 +33,6 @@ if (typeof window !== `undefined`) {
     pharos.PharosRadioGroup,
     pharos.PharosSelect,
     pharos.PharosSidenav,
-    pharos.PharosSidenavButton,
     pharos.PharosSidenavLink,
     pharos.PharosSidenavMenu,
     pharos.PharosSidenavSection,

packages/pharos-site/src/components/layout.tsx

@@ -37,12 +37,11 @@ const Layout: FC<LayoutProps> = ({ children, location, fill }) => {
   const [MainContent, setMainContent] = useState<ReactElement | null>(null);
 
   useEffect(() => {
-    const { PharosSidenavButton, PharosLink, PharosLayout } = Pharos;
+    const { PharosLink, PharosLayout } = Pharos;
 
     const body = (
       <main className={main}>
         <div className={topBar}>
-          <PharosSidenavButton onBackground />
           <PharosLink id="skip-link" skip href="#sidenav-skip-link" onBackground>
             Skip to main navigation
           </PharosLink>

packages/pharos/src/components/sidenav/PharosSidenav.react.stories.jsx

@@ -7,7 +7,6 @@ import {
   PharosSidenavMenu,
   PharosInputGroup,
   PharosButton,
-  PharosSidenavButton,
   PharosLink,
 } from '../../react-components';
 import { configureDocsPage } from '@config/docsPageConfig';
@@ -28,18 +27,24 @@ export default {
     PharosSidenavMenu,
     PharosSidenavSection,
     PharosSidenavLink,
-    PharosSidenavButton,
   },
   parameters: {
     docs: { page: configureDocsPage('sidenav') },
   },
 };
 
 export const Base = {
-  render: () => (
+  render: (args) => (
     <Fragment>
-      <PharosSidenavButton />
-      <PharosSidenav>
+      <PharosButton
+        data-sidenav-id="storybook-sidenav"
+        icon="menu"
+        label="menu"
+        onClick={(e) => {
+          e.target.focus();
+        }}
+      ></PharosButton>
+      <PharosSidenav id="storybook-sidenav" open={args.open} has-close-button={args.hasCloseButton}>
         <PharosLink slot="top" href="/" id="jstor-logo">
           <img src={logo} alt="Pharos Home" width="72" height="100" />
         </PharosLink>
@@ -110,5 +115,6 @@ export const Base = {
       </PharosSidenav>
     </Fragment>
   ),
-  parameters: { docs: { disable: true } },
+  args: { open: false, hasCloseButton: false },
+  parameters: {},
 };

packages/pharos/src/components/sidenav/pharos-sidenav.scss

@@ -6,13 +6,23 @@
 #nav-element {
   position: fixed;
   top: 0;
-  left: 0;
   height: 100vh;
   overflow: scroll;
   background-color: var(--pharos-color-black);
   color: var(--pharos-color-text-white);
-  visibility: visible;
-  transition: visibility 0s linear 0s, left var(--pharos-transition-duration-long) ease-in-out;
+  left: -17rem;
+  visibility: hidden;
+  transition: visibility var(--pharos-transition-duration-long) linear
+      var(--pharos-transition-duration-long),
+    left var(--pharos-transition-duration-long) ease-in-out;
+}
+
+:host([open]) {
+  #nav-element {
+    left: 0;
+    visibility: visible;
+    transition: visibility 0s linear 0s, left var(--pharos-transition-duration-long) ease-in-out;
+  }
 }
 
 .side-element__container {
@@ -42,31 +52,11 @@
   left: var(--pharos-spacing-one-quarter-x);
 }
 
-@media screen and (width <= 1055px) {
-  :host {
-    width: initial;
-  }
-
-  #nav-element {
-    left: -17rem;
-    visibility: hidden;
-    transition: visibility var(--pharos-transition-duration-long) linear
-        var(--pharos-transition-duration-long),
-      left var(--pharos-transition-duration-long) ease-in-out;
-  }
-
+:host([has-close-button]) {
   .side-element__button {
     visibility: visible;
     opacity: 1;
     transition: visibility 0s var(--pharos-transition-duration-short),
       opacity var(--pharos-transition-duration-long) linear var(--pharos-transition-duration-short);
   }
 }
-
-:host([slide]) {
-  #nav-element {
-    left: 0;
-    visibility: visible;
-    transition: visibility 0s linear 0s, left var(--pharos-transition-duration-long) ease-in-out;
-  }
-}