Update Storybook stories with new sidenav display logic (#696)

* fix(sidenav): update react report storybook example * fix(sidenav): update web component reports storybook example Update the sidenav in the Reports example to handle showing/hiding at a certain window size. This used to be the default behaviors of the sidenav before the v14 release` * fix(layout): default sidenav layouts to open Because the sidnav no longer contains the logic to open and close, the layout stories were broken. Now, the default state is open, although the mobile experience could probably be improved. * fix(sidenav): update storybook mobile breakpoint to match wc version * chore: add changeset * fix(sidenav): default stories to use close button Because the default story a hidden the sidenav, the close button should be enabled by default. * fix(sidenav): update import syntax * refactor: update sidenav stories to use a ResizeObserver * chore: trigger new build * chore(deps-dev): bump vite from 4.3.9 to 4.5.2 (#672) Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.3.9 to 4.5.2. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/v4.5.2/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v4.5.2/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * DropdownMenuNav: Add pharos-elevation-level-3 token (#670) * fix(dropdown-menu-nav): add elevation 3 to dropdown-menu-nav * add changeset * fix(dropdown-menu): add elevation 3 to dropdown-menu * Update link, dropdown-menu-nav, and popover to use a11y-label (#675) * chore: merge upstream Squashed commit of the following: * feat: update label to a11y-label Added the a11y-label attribute to replace the label attribute when needing to update a components aria-label * feat: update references from label to a11y-label For components and tests that referenced the label attribute this updates those to now use the a11y-label attribute * chore: add changeset * fix: update a11y-label descriptions for each component * Fix the all-contributors badge (#680) * fix(docs): update all-contributors badge to show proper count The all-contributors badge was stuck at a count of 20, as we seem to have been using a hard-coded image. This updates the badge to a proper dynamic badge with the right count. * chore(docs): add color parameter to badge * Icon: Add "add to folder" icon (#678) * feat(icon): add add to folder icon * docs(icon): update change log for addin add to folder icon * Update .changeset/good-readers-lay.md --------- Co-authored-by: Dane Hillard <github@danehillard.com> * chore: version packages (#685) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore(deps): bump ip from 1.1.8 to 1.1.9 (#687) Bumps [ip](https://github.com/indutny/node-ip) from 1.1.8 to 1.1.9. - [Commits](indutny/node-ip@v1.1.8...v1.1.9) --- updated-dependencies: - dependency-name: ip dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix(icon): add media query style for WHCM (#689) * fix(icon): add media query style for Windows High Contrast Mode * chore: add changeset * chore(deps): bump es5-ext from 0.10.62 to 0.10.64 (#692) Bumps [es5-ext](https://github.com/medikoo/es5-ext) from 0.10.62 to 0.10.64. - [Release notes](https://github.com/medikoo/es5-ext/releases) - [Changelog](https://github.com/medikoo/es5-ext/blob/main/CHANGELOG.md) - [Commits](medikoo/es5-ext@v0.10.62...v0.10.64) --- updated-dependencies: - dependency-name: es5-ext dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore(deps): upgrade to Yarn 4 (#694) * chore(deps): upgrade to Yarn 4 Some recent ecosystem changes no longer support Yarn v1 moving forward. Coupled with a potential desire to use Yarn PnP / Zero installs (#635), this upgrade puts us in good shape to keep moving. * fix(infra): update Yarn cache dir in GitHub Actions * fix(infra): update Yarn cache dir in GitHub Actions * fix(infra): update Yarn installation flags * fix: prevent report example from being tree-shaken Without an actual export of the report example, it was being tree-shaken when storybook was being built. --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: Dane Hillard <github@danehillard.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Markell Torres <54967638+mtorres3@users.noreply.github.com> Co-authored-by: Mat Harris <mat.harris@ithaka.org> Co-authored-by: mariadevadoss <132926833+mariadevadoss@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
ithaka · Mar 7, 2024 · df71253 · df71253
1 parent bbdb966
commit df71253
Show file tree

Hide file tree

Showing 12 changed files with 274 additions and 158 deletions.
diff --git a/.changeset/kind-cows-mix.md b/.changeset/kind-cows-mix.md
@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Update storybook stories to work with new sidenav display logic
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/packages/pharos/src/components/layout/PharosLayout.react.stories.jsx b/packages/pharos/src/components/layout/PharosLayout.react.stories.jsx
@@ -75,7 +75,7 @@ export const OneColumnWithSidenav = {
         gridTemplateColumns: 'max-content 1fr',
       }}
     >
-      <PharosSidenav style={{ gridArea: 'sidenav' }}>
+      <PharosSidenav open={true} style={{ gridArea: 'sidenav' }}>
         <PharosLink slot="top" href="/" id="jstor-logo">
           <img src={logo} alt="Pharos Home" width="72" height="100" />
         </PharosLink>
@@ -98,7 +98,7 @@ export const OneColumnWithSidenavAndComfySpacing = {
         gridTemplateColumns: 'max-content 1fr',
       }}
     >
-      <PharosSidenav style={{ gridArea: 'sidenav' }}>
+      <PharosSidenav open={true} style={{ gridArea: 'sidenav' }}>
         <PharosLink slot="top" href="/" id="jstor-logo">
           <img src={logo} alt="Pharos Home" width="72" height="100" />
         </PharosLink>

diff --git a/packages/pharos/src/components/layout/pharos-layout.wc.stories.jsx b/packages/pharos/src/components/layout/pharos-layout.wc.stories.jsx
@@ -64,7 +64,7 @@ export const OneColumnWithSidenav = {
       <div
         style="display: grid; grid-template-areas: 'sidenav main'; grid-template-columns: max-content 1fr"
       >
-        <storybook-pharos-sidenav style="grid-area: sidenav">
+        <storybook-pharos-sidenav open="true" style="grid-area: sidenav">
           <storybook-pharos-link slot="top" href="/" id="jstor-logo">
             <img src="${logo}" alt="Pharos Home" width="72" height="100" />
           </storybook-pharos-link>
@@ -85,7 +85,7 @@ export const OneColumnWithSidenavAndComfySpacing = {
       <div
         style="display: grid; grid-template-areas: 'sidenav main'; grid-template-columns: max-content 1fr"
       >
-        <storybook-pharos-sidenav style="grid-area: sidenav">
+        <storybook-pharos-sidenav open="true" style="grid-area: sidenav">
           <storybook-pharos-link slot="top" href="/" id="jstor-logo">
             <img src="${logo}" alt="Pharos Home" width="72" height="100" />
           </storybook-pharos-link>

diff --git a/packages/pharos/src/components/sidenav/PharosSidenav.react.stories.jsx b/packages/pharos/src/components/sidenav/PharosSidenav.react.stories.jsx
@@ -115,6 +115,6 @@ export const Base = {
       </PharosSidenav>
     </Fragment>
   ),
-  args: { open: false, hasCloseButton: false },
+  args: { open: false, hasCloseButton: true },
   parameters: {},
 };
diff --git a/packages/pharos/src/components/sidenav/pharos-sidenav.wc.stories.jsx b/packages/pharos/src/components/sidenav/pharos-sidenav.wc.stories.jsx
@@ -99,7 +99,7 @@ export const Base = {
         </storybook-pharos-sidenav-section>
       </storybook-pharos-sidenav>
     `,
-  args: { open: false, hasCloseButton: false },
+  args: { open: false, hasCloseButton: true },
   parameters: {
     chromatic: { viewports: [320, 1200] },
   },

diff --git a/packages/pharos/src/pages/reports/react/ReportExample.tsx b/packages/pharos/src/pages/reports/react/ReportExample.tsx
@@ -0,0 +1,113 @@
+import { useEffect, type FC, useState, useRef } from 'react';
+import { Sidenav } from './Sidenav';
+import { CreateReportModal } from './CreateReportModal';
+import { ReportsTable } from './ReportsTable';
+import { historyTable, scheduledTable } from '../mocks';
+import logo from '@config/assets/images/reports/jstor-horizontal.svg';
+
+import {
+  PharosHeading,
+  PharosLink,
+  PharosButton,
+  PharosTabs,
+  PharosTab,
+  PharosTabPanel,
+  PharosToaster,
+  PharosLayout,
+} from '../../../react-components';
+
+export const ReportExample: FC = () => {
+  const mobileBreakpoint = 1055;
+  const [isMobile, setIsMobile] = useState<boolean>(window.innerWidth < mobileBreakpoint);
+  const [isSidenavDisplayed, setIsSidenavDisplayed] = useState<boolean>(!isMobile);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const currentRef = containerRef.current;
+    const resizeObserver = new ResizeObserver(() => {
+      const windowWidth = window.innerWidth;
+      setIsSidenavDisplayed(windowWidth >= mobileBreakpoint);
+      setIsMobile(windowWidth < mobileBreakpoint);
+    });
+
+    if (currentRef) {
+      resizeObserver.observe(currentRef);
+    }
+
+    return () => {
+      if (currentRef) {
+        resizeObserver.unobserve(currentRef);
+      }
+    };
+  }, []);
+  return (
+    <>
+      <div className="reports-page__container" ref={containerRef}>
+        <Sidenav open={isSidenavDisplayed} showCloseButton={isMobile} />
+        <main id="main-content">
+          <PharosLayout preset="1-col--sidenav" className="reports-page__container--main-content">
+            <div className="reports-page__container--top" slot="top">
+              <div className="reports-page__container--nav-header">
+                <PharosButton
+                  variant="subtle"
+                  icon="menu"
+                  data-sidenav-id="report-sidenav"
+                  a11yLabel="Open side navigation"
+                />
+                <img src={logo} alt="logo" width="96" height="24" />
+                <span className="reports-page__separator">/</span>
+                <PharosHeading level={1} preset="4" noMargin>
+                  Admin
+                </PharosHeading>
+              </div>
+              <PharosButton
+                variant="subtle"
+                iconRight="chevron-down"
+                className="reports-page__button--user"
+              >
+                Gerry Larry Burla
+              </PharosButton>
+            </div>
+            <div className="reports-page__container--disclaimer">
+              <PharosHeading level={2} preset="5--bold">
+                COUNTER 5 Usage Reports
+              </PharosHeading>
+              <p>
+                Welcome to the COUNTER 5 reporting service for participating institutions. JSTOR
+                offers COUNTER 5 compliant reports for usage beginning January 2019. COUNTER 4
+                reports are still available for usage from January 2017 - April 2019 from the{' '}
+                <PharosLink href="#">COUNTER 4 reporting service</PharosLink>. Please visit our
+                COUNTER 5 <PharosLink href="#">support page</PharosLink> for more information on
+                JSTOR usage reports.
+              </p>
+            </div>
+            <div className="reports-page__container--table">
+              <PharosButton
+                className="reports-page__button--create"
+                data-modal-id="create-report-modal"
+              >
+                Create Report
+              </PharosButton>
+              <PharosTabs>
+                <PharosTab id="tab-1" data-panel-id="panel-1">
+                  Report History
+                </PharosTab>
+                <PharosTab id="tab-2" data-panel-id="panel-2">
+                  Scheduled Reports
+                </PharosTab>
+                <PharosTabPanel id="panel-1" slot="panel" style={{ overflow: 'visible' }}>
+                  {ReportsTable(historyTable)}
+                </PharosTabPanel>
+                <PharosTabPanel id="panel-2" slot="panel">
+                  {ReportsTable(scheduledTable)}
+                </PharosTabPanel>
+              </PharosTabs>
+            </div>
+          </PharosLayout>
+        </main>
+      </div>
+      <PharosToaster></PharosToaster>
+      <CreateReportModal />
+    </>
+  );
+};
diff --git a/packages/pharos/src/pages/reports/react/Sidenav.tsx b/packages/pharos/src/pages/reports/react/Sidenav.tsx
@@ -6,9 +6,19 @@ import { PharosSidenavSection } from '../../../react-components/sidenav/pharos-s
 import { PharosSidenavLink } from '../../../react-components/sidenav/pharos-sidenav-link';
 import { PharosSidenavMenu } from '../../../react-components/sidenav/pharos-sidenav-menu';
 import logo from '@config/assets/images/jstor-logo-inverse.svg';
+export interface SideNavProps {
+  open: boolean;
+  showCloseButton: boolean;
+}
 
-export const Sidenav: FC = () => (
-  <PharosSidenav className="reports-page__sidenav" mainContentId="main-content">
+export const Sidenav: FC<SideNavProps> = ({ open, showCloseButton }) => (
+  <PharosSidenav
+    className="reports-page__sidenav"
+    mainContentId="main-content"
+    id="report-sidenav"
+    open={open}
+    hasCloseButton={showCloseButton}
+  >
     <PharosLink slot="top" href="/" id="jstor-logo">
       <img src={logo} alt="Pharos Home" width="72" height="100" />
     </PharosLink>

diff --git a/packages/pharos/src/pages/reports/react/reports.pages.stories.tsx b/packages/pharos/src/pages/reports/react/reports.pages.stories.tsx
@@ -2,23 +2,8 @@ import type { Meta } from '@storybook/react';
 
 import '../reports.scss';
 import { viewports } from '../../shared/viewports';
-import { Sidenav } from './Sidenav';
-import { CreateReportModal } from './CreateReportModal';
-import { ReportsTable } from './ReportsTable';
-import { historyTable, scheduledTable } from '../mocks';
-import logo from '@config/assets/images/reports/jstor-horizontal.svg';
-
-import {
-  PharosHeading,
-  PharosLink,
-  PharosButton,
-  PharosTabs,
-  PharosTab,
-  PharosTabPanel,
-  PharosToaster,
-  PharosLayout,
-} from '../../../react-components';
 import { PharosContext } from '../../../utils/PharosContext';
+import { ReportExample } from './ReportExample';
 
 export default {
   title: 'Pages/Reports',
@@ -40,66 +25,7 @@ export default {
 export const Reports = {
   render: () => (
     <>
-      <div className="reports-page__container">
-        <Sidenav />
-        <main id="main-content">
-          <PharosLayout preset="1-col--sidenav" className="reports-page__container--main-content">
-            <div className="reports-page__container--top" slot="top">
-              <div className="reports-page__container--nav-header">
-                <img src={logo} alt="logo" width="96" height="24" />
-                <span className="reports-page__separator">/</span>
-                <PharosHeading level={1} preset="4" noMargin>
-                  Admin
-                </PharosHeading>
-              </div>
-              <PharosButton
-                variant="subtle"
-                iconRight="chevron-down"
-                className="reports-page__button--user"
-              >
-                Gerry Larry Burla
-              </PharosButton>
-            </div>
-            <div className="reports-page__container--disclaimer">
-              <PharosHeading level={2} preset="5--bold">
-                COUNTER 5 Usage Reports
-              </PharosHeading>
-              <p>
-                Welcome to the COUNTER 5 reporting service for participating institutions. JSTOR
-                offers COUNTER 5 compliant reports for usage beginning January 2019. COUNTER 4
-                reports are still available for usage from January 2017 - April 2019 from the{' '}
-                <PharosLink href="#">COUNTER 4 reporting service</PharosLink>. Please visit our
-                COUNTER 5 <PharosLink href="#">support page</PharosLink> for more information on
-                JSTOR usage reports.
-              </p>
-            </div>
-            <div className="reports-page__container--table">
-              <PharosButton
-                className="reports-page__button--create"
-                data-modal-id="create-report-modal"
-              >
-                Create Report
-              </PharosButton>
-              <PharosTabs>
-                <PharosTab id="tab-1" data-panel-id="panel-1">
-                  Report History
-                </PharosTab>
-                <PharosTab id="tab-2" data-panel-id="panel-2">
-                  Scheduled Reports
-                </PharosTab>
-                <PharosTabPanel id="panel-1" slot="panel" style={{ overflow: 'visible' }}>
-                  {ReportsTable(historyTable)}
-                </PharosTabPanel>
-                <PharosTabPanel id="panel-2" slot="panel">
-                  {ReportsTable(scheduledTable)}
-                </PharosTabPanel>
-              </PharosTabs>
-            </div>
-          </PharosLayout>
-        </main>
-      </div>
-      <PharosToaster></PharosToaster>
-      <CreateReportModal />
+      <ReportExample />
     </>
   ),
 };