Merge branch 'main' of https://github.com/Recidiviz/public-dashboard …

…into nasaownsky/480-small-numbers
Recidiviz · Jun 6, 2022 · b5ee2e1 · b5ee2e1
2 parents 879c76c + 6408abc
commit b5ee2e1
Show file tree

Hide file tree

Showing 18 changed files with 408 additions and 217 deletions.
diff --git a/spotlight-client/package.json b/spotlight-client/package.json
@@ -88,6 +88,7 @@
     "react-simple-maps": "^2.3.0",
     "react-spring": "^8.0.27",
     "react-stickyfill": "^0.2.5",
+    "react-swipeable": "^7.0.0",
     "react-use-clipboard": "^1.0.7",
     "semiotic": "^1.20.6",
     "smoothscroll-polyfill": "^0.4.4",

diff --git a/spotlight-client/src/GlobalStyles/GlobalStyles.tsx b/spotlight-client/src/GlobalStyles/GlobalStyles.tsx
@@ -15,27 +15,18 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import { rem } from "polished";
 import React from "react";
 import { Helmet } from "react-helmet-async";
-import { createGlobalStyle, css } from "styled-components/macro";
+import { createGlobalStyle } from "styled-components/macro";
 import reset from "styled-reset";
-import { NAV_BAR_HEIGHT } from "../constants";
 import { colors, typefaces } from "../UiLibrary";
 
-const scrollSnapStyles = css`
-  scroll-padding-top: ${rem(NAV_BAR_HEIGHT)};
-  scroll-snap-type: y proximity;
-`;
-
 const BaseStyles = createGlobalStyle`
   ${reset}
 
   html {
     box-sizing: border-box;
     font-family: ${typefaces.body};
-    /* most browsers support full-page scroll snapping with this element */
-    ${scrollSnapStyles}
 
     *, *:before, *:after {
       box-sizing: inherit;
@@ -46,12 +37,6 @@ const BaseStyles = createGlobalStyle`
   body {
     background-color: ${colors.background};
     color: ${colors.text};
-    /*
-      Safari only supports full-page scroll snapping with this element for some reason;
-      see https://stackoverflow.com/a/60470570.
-      Setting it on both elements does not appear to create any conflicts
-    */
-    ${scrollSnapStyles}
   }
 
   strong {

diff --git a/spotlight-client/src/NarrativeLayout/NarrativeLayout.tsx b/spotlight-client/src/NarrativeLayout/NarrativeLayout.tsx
@@ -15,35 +15,18 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import useBreakpoint from "@w11r/use-breakpoint";
 import { observer } from "mobx-react-lite";
-import { rem } from "polished";
 import React from "react";
-import Sticker from "react-stickyfill";
 import styled from "styled-components/macro";
-import { NAV_BAR_HEIGHT } from "../constants";
-import { X_PADDING } from "../SystemNarrativePage/constants";
-import NarrativeNavigation from "./NarrativeNavigation";
+import Wayfinder from "./NarrativeNavigation";
 import NarrativeSection from "./NarrativeSection";
 import { LayoutSection } from "./types";
 import { useInternalNavigation } from "./useInternalNavigation";
 
-const Wrapper = styled.article`
+const Wrapper = styled.div`
   display: flex;
 `;
 
-const NavWrapper = styled.div`
-  flex: 0 0 auto;
-  width: ${rem(X_PADDING)};
-`;
-
-const NavStickyWrapper = styled.div`
-  display: flex;
-  height: calc(100vh - ${rem(NAV_BAR_HEIGHT)});
-  position: sticky;
-  top: ${rem(NAV_BAR_HEIGHT)};
-`;
-
 const SectionsWrapper = styled.div`
   /* flex-basis needs to be set or contents may overflow in IE 11 */
   flex: 1 1 100%;
@@ -56,51 +39,32 @@ type NarrativeLayoutProps = {
 };
 
 const NarrativeLayout: React.FC<NarrativeLayoutProps> = ({ sections }) => {
-  const showSectionNavigation = useBreakpoint(true, ["mobile-", false]);
-
   const {
     alwaysExpanded,
     currentSectionNumber,
-    enableSnapping,
     fixedHeightSections,
     scrollToSection,
     sectionsContainerRef,
-    getOnSectionExpanded,
     onSectionInViewChange,
   } = useInternalNavigation();
 
   return (
     <Wrapper>
-      {showSectionNavigation && (
-        <NavWrapper>
-          <Sticker>
-            <NavStickyWrapper>
-              <NarrativeNavigation
-                activeSection={currentSectionNumber}
-                goToSection={scrollToSection}
-                sections={sections}
-              />
-            </NavStickyWrapper>
-          </Sticker>
-        </NavWrapper>
-      )}
+      <Wayfinder
+        activeSection={currentSectionNumber}
+        sections={sections}
+        goToSection={scrollToSection}
+      />
       <SectionsWrapper ref={sectionsContainerRef}>
         {sections.map((section, index) => {
           // 1-indexed for human readability
           const sectionNumber = index + 1;
 
           return (
-            <div
-              id={`section${sectionNumber}`}
-              key={sectionNumber}
-              style={{
-                scrollSnapAlign: enableSnapping ? "start" : undefined,
-              }}
-            >
+            <div id={`section${sectionNumber}`} key={sectionNumber}>
               <NarrativeSection
                 alwaysExpanded={alwaysExpanded}
                 onInViewChange={onSectionInViewChange}
-                onSectionExpanded={getOnSectionExpanded(sectionNumber)}
                 restrictHeight={fixedHeightSections.includes(sectionNumber)}
                 sectionNumber={sectionNumber}
               >

diff --git a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/AdvanceLink.tsx b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/AdvanceLink.tsx
@@ -15,47 +15,61 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import { rem } from "polished";
-import React, { useState } from "react";
-import styled from "styled-components/macro";
+import { Icon, IconSVG } from "@recidiviz/design-system";
+import React, { useState, useEffect } from "react";
 import { track } from "../../analytics";
-import { colors, Chevron, UnStyledButton } from "../../UiLibrary";
 import { SectionNavProps } from "./types";
-
-const NavLink = styled(UnStyledButton)`
-  padding: ${rem(8)};
-`;
+import { Button } from "./Wayfinder";
 
 type AdvanceLinkProps = SectionNavProps & {
   disabled: boolean;
   type: "previous" | "next";
+  flashing?: boolean;
 };
 
 const AdvanceLink: React.FC<AdvanceLinkProps> = ({
   activeSection,
   disabled,
   goToSection,
   type,
+  flashing,
 }) => {
+  const [isFlashing, setFlashing] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setFlashing(true);
+    }, 3000);
+
+    return () => {
+      clearTimeout(timer);
+      setFlashing(false);
+    };
+  }, [activeSection]);
+
   let targetSection: number;
-  let direction: "up" | "down";
+  let rotate: 0 | 180;
 
   if (type === "previous") {
     targetSection = activeSection - 1;
-    direction = "up";
+    rotate = 180;
   } else {
     targetSection = activeSection + 1;
-    direction = "down";
+    rotate = 0;
   }
 
-  const [hovered, setHovered] = useState(false);
-
-  const color = hovered && !disabled ? colors.accent : undefined;
+  const isAllowFlashing =
+    !disabled && flashing && isFlashing && activeSection === 1;
 
   return (
-    <NavLink
+    <Button
+      rounded
+      kind="borderless"
+      active={isAllowFlashing}
+      flashing={isAllowFlashing}
       disabled={disabled}
-      onClick={() => {
+      onClick={(e) => {
+        e.stopPropagation();
         if (!disabled) {
           track(`advance_section_link_clicked`, {
             category: "navigation",
@@ -65,14 +79,17 @@ const AdvanceLink: React.FC<AdvanceLinkProps> = ({
         }
       }}
       aria-label={`${type} section`}
-      onMouseOver={() => setHovered(true)}
-      onFocus={() => setHovered(true)}
-      onMouseOut={() => setHovered(false)}
-      onBlur={() => setHovered(false)}
     >
-      <Chevron direction={direction} faded={disabled} color={color} />
-    </NavLink>
+      <Icon
+        kind={IconSVG.Arrow}
+        width={20}
+        rotate={rotate}
+        style={{ rotate: `${rotate}deg` }}
+        onClick={(e) => {
+          if (disabled) e.stopPropagation();
+        }}
+      />
+    </Button>
   );
 };
-
 export default AdvanceLink;
diff --git a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/NarrativeNavigation.tsx b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/NarrativeNavigation.tsx