From 6408abcd557a9aa05aed4a11f1f35fe2995c9e61 Mon Sep 17 00:00:00 2001 From: Ilya Date: Thu, 2 Jun 2022 22:23:08 +0300 Subject: [PATCH] Implement Wayfinder 2.1 (#565) * Added Wayfinder 2.1 & removed scrolljacking * Fixes * Made entire bar clickable --- spotlight-client/package.json | 1 + .../src/GlobalStyles/GlobalStyles.tsx | 17 +- .../src/NarrativeLayout/NarrativeLayout.tsx | 52 +--- .../NarrativeNavigation/AdvanceLink.tsx | 63 +++-- .../NarrativeNavigation.tsx | 85 ------ .../NarrativeNavigation/ProgressBar.tsx | 68 +++++ .../NarrativeNavigation/SectionLinks.tsx | 49 ++-- .../NarrativeNavigation/Wayfinder.tsx | 248 ++++++++++++++++++ .../NarrativeNavigation/index.ts | 2 +- .../NarrativeNavigation/utils.ts | 4 +- .../src/NarrativeLayout/NarrativeSection.tsx | 6 - .../src/NarrativeLayout/StickySection.tsx | 1 - .../NarrativeLayout/useInternalNavigation.ts | 16 -- .../RacialDisparitiesNarrativePage.tsx | 1 - .../src/UiLibrary/UnStyledButton.ts | 4 +- spotlight-client/src/UiLibrary/narrative.ts | 1 - spotlight-client/src/constants.ts | 2 + spotlight-client/yarn.lock | 5 + 18 files changed, 408 insertions(+), 217 deletions(-) delete mode 100644 spotlight-client/src/NarrativeLayout/NarrativeNavigation/NarrativeNavigation.tsx create mode 100644 spotlight-client/src/NarrativeLayout/NarrativeNavigation/ProgressBar.tsx create mode 100644 spotlight-client/src/NarrativeLayout/NarrativeNavigation/Wayfinder.tsx diff --git a/spotlight-client/package.json b/spotlight-client/package.json index 25c94ab4..a5a84f23 100644 --- a/spotlight-client/package.json +++ b/spotlight-client/package.json @@ -87,6 +87,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 index f86bef8f..a0ecfbe8 100644 --- 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 . // ============================================================================= -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 index de4a533b..a98161db 100644 --- 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 . // ============================================================================= -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 = ({ sections }) => { - const showSectionNavigation = useBreakpoint(true, ["mobile-", false]); - const { alwaysExpanded, currentSectionNumber, - enableSnapping, fixedHeightSections, scrollToSection, sectionsContainerRef, - getOnSectionExpanded, onSectionInViewChange, } = useInternalNavigation(); return ( - {showSectionNavigation && ( - - - - - - - - )} + {sections.map((section, index) => { // 1-indexed for human readability const sectionNumber = index + 1; return ( -
+
diff --git a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/AdvanceLink.tsx b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/AdvanceLink.tsx index 2abbe3ef..ae552785 100644 --- a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/AdvanceLink.tsx +++ b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/AdvanceLink.tsx @@ -15,20 +15,16 @@ // along with this program. If not, see . // ============================================================================= -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 = ({ @@ -36,26 +32,44 @@ const AdvanceLink: React.FC = ({ 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 ( - { + onClick={(e) => { + e.stopPropagation(); if (!disabled) { track(`advance_section_link_clicked`, { category: "navigation", @@ -65,14 +79,17 @@ const AdvanceLink: React.FC = ({ } }} aria-label={`${type} section`} - onMouseOver={() => setHovered(true)} - onFocus={() => setHovered(true)} - onMouseOut={() => setHovered(false)} - onBlur={() => setHovered(false)} > - - + { + if (disabled) e.stopPropagation(); + }} + /> + ); }; - export default AdvanceLink; diff --git a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/NarrativeNavigation.tsx b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/NarrativeNavigation.tsx deleted file mode 100644 index dcadf24c..00000000 --- a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/NarrativeNavigation.tsx +++ /dev/null @@ -1,85 +0,0 @@ -// Recidiviz - a data platform for criminal justice reform -// Copyright (C) 2021 Recidiviz, Inc. -// -// This program is free software: you can redistribute it and/or modify -// it under the terms of the GNU General Public License as published by -// the Free Software Foundation, either version 3 of the License, or -// (at your option) any later version. -// -// This program is distributed in the hope that it will be useful, -// but WITHOUT ANY WARRANTY; without even the implied warranty of -// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the -// GNU General Public License for more details. -// -// You should have received a copy of the GNU General Public License -// along with this program. If not, see . -// ============================================================================= - -import { format } from "d3-format"; -import { rem } from "polished"; -import React from "react"; -import styled from "styled-components/macro"; -import { LayoutSection } from "../types"; -import AdvanceLink from "./AdvanceLink"; -import SectionLinks from "./SectionLinks"; -import { SectionNavProps } from "./types"; - -const formatPageNum = format("02"); - -const SectionNav = styled.nav` - align-items: center; - display: flex; - flex-direction: column; - height: 100%; - justify-content: center; - margin-left: ${rem(32)}; -`; - -const SectionNumber = styled.div` - font-size: ${rem(13)}; - font-weight: 600; - letter-spacing: -0.01em; - line-height: ${rem(16)}; -`; - -const SectionNumberFaded = styled(SectionNumber)` - opacity: 0.3; -`; - -type NavigationProps = SectionNavProps & { - sections: LayoutSection[]; -}; - -const SectionNavigation: React.FC = ({ - activeSection, - goToSection, - sections, -}) => { - const totalPages = sections.length; - - // these will be used to toggle prev/next links - const disablePrev = activeSection === 1; - const disableNext = activeSection === totalPages; - - return ( - - {formatPageNum(activeSection)} - {formatPageNum(totalPages)} - - - - - ); -}; - -export default SectionNavigation; diff --git a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/ProgressBar.tsx b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/ProgressBar.tsx new file mode 100644 index 00000000..f5e47485 --- /dev/null +++ b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/ProgressBar.tsx @@ -0,0 +1,68 @@ +// Recidiviz - a data platform for criminal justice reform +// Copyright (C) 2022 Recidiviz, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. +// +// You should have received a copy of the GNU General Public License +// along with this program. If not, see . +// ============================================================================= + +import React, { useState, useEffect, useCallback } from "react"; +import styled from "styled-components/macro"; +import { rem } from "polished"; +import { FOOTER_HEIGHT, PROGRESS_BAR_HEIGHT } from "../../constants"; +import { colors } from "../../UiLibrary"; + +const Container = styled.div` + background: ${colors.checkbox}; + height: ${rem(PROGRESS_BAR_HEIGHT)}; + width: 100%; +`; + +const Bar = styled.div<{ scrolled: number }>` + background: ${colors.link}; + height: ${rem(PROGRESS_BAR_HEIGHT)}; + max-width: 100%; + width: ${(props) => props.scrolled}%; +`; + +const ProgressBar: React.FC<{ + onScroll: (scrolled: number) => void; +}> = ({ onScroll }) => { + const [scrolledPercent, setScrolled] = useState(0); + + const scrollProgress = useCallback(() => { + const scrollPx = document.documentElement.scrollTop; + const winHeightPx = + document.documentElement.scrollHeight - + document.documentElement.clientHeight - + FOOTER_HEIGHT; + const scrolled = (scrollPx / winHeightPx) * 100; + setScrolled(scrolled); + onScroll(scrolled); + }, [onScroll]); + + useEffect(() => { + window.addEventListener("scroll", scrollProgress); + + return () => { + window.removeEventListener("scroll", scrollProgress); + }; + }); + + return ( + + + + ); +}; + +export default ProgressBar; diff --git a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/SectionLinks.tsx b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/SectionLinks.tsx index 190f9bb9..3e37dbee 100644 --- a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/SectionLinks.tsx +++ b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/SectionLinks.tsx @@ -15,20 +15,20 @@ // along with this program. If not, see . // ============================================================================= +import { palette } from "@recidiviz/design-system"; import { rem } from "polished"; import React, { useEffect } from "react"; import { animated, useSpring, useSprings } from "react-spring/web.cjs"; import styled from "styled-components/macro"; import { track } from "../../analytics"; -import { colors, UnStyledButton } from "../../UiLibrary"; +import { colors, fluidFontSizeStyles, UnStyledButton } from "../../UiLibrary"; import { LayoutSection } from "../types"; import { SectionNavProps } from "./types"; import { THUMB_SIZE } from "./utils"; const PageProgressContainer = styled.div` display: flex; - justify-content: center; - margin: ${rem(24)} 0; + justify-content: left; position: relative; width: 100%; `; @@ -69,7 +69,7 @@ const SectionLink = styled(UnStyledButton)` color: ${colors.text}; display: flex; height: ${rem(THUMB_SIZE.height)}; - justify-content: center; + justify-content: left; margin-bottom: ${rem(THUMB_SIZE.paddingBottom)}; position: relative; width: 100%; @@ -82,16 +82,22 @@ const SectionLinkBarSegment = styled(animated.div)` width: ${rem(THUMB_SIZE.width)}; `; -const SectionLinkLabel = styled(animated.div)` - font-size: ${rem(11)}; - left: calc(50% + ${rem(THUMB_SIZE.width)}); +const SectionLinkLabel = styled(animated.div)<{ + active?: boolean; + minSize: number; + maxSize: number; +}>` + height: 100%; + display: flex; + align-items: center; + text-align: left; letter-spacing: -0.01em; - line-height: 1.45; padding-left: ${rem(16)}; pointer-events: none; position: absolute; top: 0; - width: ${rem(96)}; + ${(props) => props.active && `color: ${colors.accent} !important;`} + ${(props) => fluidFontSizeStyles(props.minSize, props.maxSize)} `; const getThumbOffset = (activeSection: number) => @@ -124,7 +130,7 @@ const SectionLinks: React.FC< // animating the section link hover states const [linkLabelHoverStyles, setLinkLabelHoverStyles] = useSprings( totalPages, - () => ({ opacity: 0 }) + () => ({ color: palette.slate85 }) ); const [linkBarSegmentStyles, setLinkBarSegmentStyles] = useSprings( totalPages, @@ -132,11 +138,11 @@ const SectionLinks: React.FC< ); // convenience methods for animating one link's hover state at a time - const showLinkLabel = (index: number) => () => { + const focusLinkLabel = (index: number) => () => { // @ts-expect-error type error in current version, // https://github.com/pmndrs/react-spring/issues/861 setLinkLabelHoverStyles((springIndex: number) => - springIndex === index ? { opacity: 1 } : { opacity: 0 } + springIndex === index ? { color: palette.signal.links } : {} ); // @ts-expect-error type error in current version, // https://github.com/pmndrs/react-spring/issues/861 @@ -146,11 +152,11 @@ const SectionLinks: React.FC< : { background: colors.rule } ); }; - const hideLinkLabel = (index: number) => () => { + const blurLinkLabel = (index: number) => () => { // @ts-expect-error type error in current version, // https://github.com/pmndrs/react-spring/issues/861 setLinkLabelHoverStyles((springIndex: number) => - springIndex === index ? { opacity: 0 } : {} + springIndex === index ? { color: palette.slate85 } : {} ); // @ts-expect-error type error in current version, // https://github.com/pmndrs/react-spring/issues/861 @@ -177,13 +183,18 @@ const SectionLinks: React.FC< }); goToSection(index + 1); }} - onMouseOver={showLinkLabel(index)} - onFocus={showLinkLabel(index)} - onMouseOut={hideLinkLabel(index)} - onBlur={hideLinkLabel(index)} + onMouseOver={focusLinkLabel(index)} + onFocus={focusLinkLabel(index)} + onMouseOut={blurLinkLabel(index)} + onBlur={blurLinkLabel(index)} > - + {section.title} diff --git a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/Wayfinder.tsx b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/Wayfinder.tsx new file mode 100644 index 00000000..581aa3ce --- /dev/null +++ b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/Wayfinder.tsx @@ -0,0 +1,248 @@ +// Recidiviz - a data platform for criminal justice reform +// Copyright (C) 2022 Recidiviz, Inc. +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU General Public License as published by +// the Free Software Foundation, either version 3 of the License, or +// (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU General Public License for more details. +// +// You should have received a copy of the GNU General Public License +// along with this program. If not, see . +// ============================================================================= + +import { + Button as BasicButton, + palette, + Icon, + IconSVG, +} from "@recidiviz/design-system"; +import React, { useState, useEffect } from "react"; +import { createPortal } from "react-dom"; +import useBreakpoint from "@w11r/use-breakpoint"; +import { useSwipeable } from "react-swipeable"; +import { rem } from "polished"; +import styled, { css } from "styled-components/macro"; +import { NAV_BAR_HEIGHT, PROGRESS_BAR_HEIGHT } from "../../constants"; +import { SectionNavProps } from "./types"; +import { LayoutSection } from "../types"; +import { breakpoints, colors, fluidFontSizeStyles } from "../../UiLibrary"; +import { NarrativeSectionTitle } from "../../UiLibrary/narrative"; +import SectionLinks from "./SectionLinks"; +import AdvanceLink from "./AdvanceLink"; +import ProgressBar from "./ProgressBar"; + +const HEADER_HEIGHT = PROGRESS_BAR_HEIGHT + NAV_BAR_HEIGHT; + +const Wrapper = styled.div<{ expanded: boolean; open: boolean }>` + position: fixed; + overflow: hidden; + bottom: 0; + width: 100%; + z-index: 501; + outline: 0; + transition: transform 500ms ease; + transform: translateY( + ${(props) => { + if (props.open && props.expanded) { + return `0%`; + } + if (props.open && !props.expanded) { + return `calc(100% - ${HEADER_HEIGHT}px)`; + } + if (!props.open) { + return `105%`; + } + }} + ); +`; + +const Container = styled.nav` + display: flex; + flex-direction: column; + background: white; + height: 100%; + margin: 0 ${rem(108)}; + box-shadow: 0px 4px 20px #a6bebd; + + @media screen and (max-width: ${breakpoints.desktop[0]}px) { + margin: 0; + } +`; + +const Header = styled.div` + display: flex; + align-items: center; + padding: 0 ${rem(30)}; + height: ${rem(NAV_BAR_HEIGHT)}; + gap: ${rem(16)}; + cursor: pointer; + + @media screen and (max-width: ${breakpoints.tablet[0]}px) { + padding: 0 ${rem(16)}; + } + + div { + display: flex; + gap: ${rem(16)}; + margin-left: auto; + } +`; + +const Body = styled.div` + max-height: ${rem(666)}; + border-top: 1px solid ${colors.chartGridLine}; + padding: ${rem(30)}; + + @media screen and (max-width: ${breakpoints.tablet[0]}px) { + padding: ${rem(24)} ${rem(16)}; + } +`; + +const activeButtonStyles = css` + background: ${palette.signal.links} !important; + color: ${palette.white} !important; +`; + +const flashingButtonStyles = css` + animation: blinker 1s infinite; + + @keyframes blinker { + 0% { + opacity: 0.3; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0.3; + } + } +`; + +export const Button = styled(BasicButton)<{ + active?: boolean; + rounded?: boolean; + flashing?: boolean; +}>` + min-width: ${(props) => rem(props.rounded ? 42 : 109)}; + height: ${rem(42)}; + background: ${palette.marble3} !important; + color: ${palette.slate85}; + font-weight: 500; + font-size: ${rem(16)}; + gap: ${rem(16)}; + padding: 0; + + &:hover:not([disabled]) { + ${activeButtonStyles} + } + &:disabled { + color: #c4c4c4; + } + + ${(props) => props.active && activeButtonStyles} + ${(props) => props.flashing && flashingButtonStyles} +`; + +const SectionTitle = styled(NarrativeSectionTitle)<{ + minSize: number; + maxSize: number; +}>` + margin: 0; + ${(props) => fluidFontSizeStyles(props.minSize, props.maxSize)} +`; + +type NavigationProps = SectionNavProps & { + sections: LayoutSection[]; + isOpen?: boolean; +}; + +const Wayfinder: React.FC = ({ + isOpen = true, + activeSection, + sections, + goToSection, +}) => { + const isMobile = useBreakpoint(false, ["mobile-", true]); + + const [isOpenWayfinder, openWayfinder] = useState(isOpen); + const [isExpanded, setExpanded] = useState(false); + const [scrolled, setScrolled] = useState(0); + + useEffect(() => { + if (scrolled > 98) { + openWayfinder(false); + } else { + openWayfinder(true); + } + + setExpanded(false); + }, [scrolled, activeSection]); + + const handlers = useSwipeable({ + onSwipedUp: () => setExpanded(true), + onSwipedDown: () => setExpanded(false), + swipeDuration: 300, + preventScrollOnSwipe: true, + }); + + const totalPages = sections.length; + const disablePrev = activeSection === 1; + const disableNext = activeSection === totalPages; + + return createPortal( + + + setScrolled(v)} /> +
setExpanded(!isExpanded)}> + {!isMobile && ( + + )} + + {sections[activeSection - 1].title} + +
+ + +
+
+ + + + + , + document.body + ); +}; + +export default Wayfinder; diff --git a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/index.ts b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/index.ts index 789d9d9d..d29e754f 100644 --- a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/index.ts +++ b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/index.ts @@ -15,4 +15,4 @@ // along with this program. If not, see . // ============================================================================= -export { default } from "./NarrativeNavigation"; +export { default } from "./Wayfinder"; diff --git a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/utils.ts b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/utils.ts index 28e900a4..9d959125 100644 --- a/spotlight-client/src/NarrativeLayout/NarrativeNavigation/utils.ts +++ b/spotlight-client/src/NarrativeLayout/NarrativeNavigation/utils.ts @@ -17,7 +17,7 @@ // eslint-disable-next-line import/prefer-default-export export const THUMB_SIZE = { - height: 22, - paddingBottom: 4, + height: 40, + paddingBottom: 20, width: 2, }; diff --git a/spotlight-client/src/NarrativeLayout/NarrativeSection.tsx b/spotlight-client/src/NarrativeLayout/NarrativeSection.tsx index 03a63a41..63f54e94 100644 --- a/spotlight-client/src/NarrativeLayout/NarrativeSection.tsx +++ b/spotlight-client/src/NarrativeLayout/NarrativeSection.tsx @@ -57,7 +57,6 @@ const NarrativeSection: React.FC = ({ alwaysExpanded, children, onInViewChange, - onSectionExpanded, restrictHeight, sectionNumber, }) => { @@ -68,11 +67,6 @@ const NarrativeSection: React.FC = ({ height: restrictHeight ? window.innerHeight - actualNavBarHeight : contentHeight, - onRest: () => { - if (!restrictHeight && onSectionExpanded) { - onSectionExpanded(); - } - }, }); const topSensor = useInView({ diff --git a/spotlight-client/src/NarrativeLayout/StickySection.tsx b/spotlight-client/src/NarrativeLayout/StickySection.tsx index 6310cc0d..22dbad19 100644 --- a/spotlight-client/src/NarrativeLayout/StickySection.tsx +++ b/spotlight-client/src/NarrativeLayout/StickySection.tsx @@ -29,7 +29,6 @@ const Container = styled(FullScreenSection)` display: flex; flex-direction: column; justify-content: center; - padding-left: 0; } @media screen and (min-width: ${breakpoints.desktop[0]}px) { diff --git a/spotlight-client/src/NarrativeLayout/useInternalNavigation.ts b/spotlight-client/src/NarrativeLayout/useInternalNavigation.ts index c792ab96..49cbae68 100644 --- a/spotlight-client/src/NarrativeLayout/useInternalNavigation.ts +++ b/spotlight-client/src/NarrativeLayout/useInternalNavigation.ts @@ -31,9 +31,7 @@ import { useDataStore } from "../StoreProvider"; export const useInternalNavigation = (): { alwaysExpanded: boolean; currentSectionNumber: number; - enableSnapping: boolean; fixedHeightSections: number[]; - getOnSectionExpanded: (s: number) => (() => void) | undefined; onSectionInViewChange: (props: { inView: boolean; sectionNumber: number; @@ -130,18 +128,6 @@ export const useInternalNavigation = (): { // we can skip the height restrictions and animations if we landed at the top const alwaysExpanded = initialSection === 1; - // scroll snapping and fixed-height sections do not play nicely together, - // so disable snapping if we have any sections that may need to expand - const [enableSnapping, setEnableSnapping] = useState(initialSection === 1); - // call this on animation end; when all sections are fully expanded, it will enable snapping - const getOnSectionExpanded = (sectionNumber: number) => { - if (sectionNumber === 1) { - return () => { - setEnableSnapping(true); - }; - } - }; - // remove sections from the fixed-height list as we pass through their range; // retain any still above the current section until we get all the way to the top useEffect(() => { @@ -184,9 +170,7 @@ export const useInternalNavigation = (): { return { alwaysExpanded, currentSectionNumber, - enableSnapping, fixedHeightSections, - getOnSectionExpanded, onSectionInViewChange, scrollToSection, sectionsContainerRef, diff --git a/spotlight-client/src/RacialDisparitiesNarrativePage/RacialDisparitiesNarrativePage.tsx b/spotlight-client/src/RacialDisparitiesNarrativePage/RacialDisparitiesNarrativePage.tsx index baaa42eb..6b5c497a 100644 --- a/spotlight-client/src/RacialDisparitiesNarrativePage/RacialDisparitiesNarrativePage.tsx +++ b/spotlight-client/src/RacialDisparitiesNarrativePage/RacialDisparitiesNarrativePage.tsx @@ -54,7 +54,6 @@ const CopyOnlySection = styled(FullScreenSection)` display: flex; flex-direction: column; justify-content: center; - padding-left: 0; } `; diff --git a/spotlight-client/src/UiLibrary/UnStyledButton.ts b/spotlight-client/src/UiLibrary/UnStyledButton.ts index c7fc8016..1d0e2ab4 100644 --- a/spotlight-client/src/UiLibrary/UnStyledButton.ts +++ b/spotlight-client/src/UiLibrary/UnStyledButton.ts @@ -21,7 +21,7 @@ export const UnStyledButton = styled.button.attrs({ type: "button" })` background: none; cursor: pointer; font-size: 1rem; - margin: none; - padding: none; + margin: 0; + padding: 0; border: none; `; diff --git a/spotlight-client/src/UiLibrary/narrative.ts b/spotlight-client/src/UiLibrary/narrative.ts index 88e4775d..fa12078e 100644 --- a/spotlight-client/src/UiLibrary/narrative.ts +++ b/spotlight-client/src/UiLibrary/narrative.ts @@ -29,7 +29,6 @@ export const NarrativeIntroContainer = styled(FullScreenSection)` @media screen and (min-width: ${breakpoints.tablet[0]}px) { padding-bottom: ${rem(172)}; - padding-left: 0; padding-top: ${rem(160)}; } `; diff --git a/spotlight-client/src/constants.ts b/spotlight-client/src/constants.ts index aa44c2d3..5cb462ed 100644 --- a/spotlight-client/src/constants.ts +++ b/spotlight-client/src/constants.ts @@ -24,6 +24,8 @@ export const ERROR_MESSAGES = { disabledTenant: "This tenant has not been enabled.", }; +export const PROGRESS_BAR_HEIGHT = 7; + export const NAV_BAR_HEIGHT = 80; export const FOOTER_HEIGHT = 130; diff --git a/spotlight-client/yarn.lock b/spotlight-client/yarn.lock index f8361641..1a24a0cd 100644 --- a/spotlight-client/yarn.lock +++ b/spotlight-client/yarn.lock @@ -11401,6 +11401,11 @@ react-stickyfill@^0.2.5: Stickyfill "git+https://github.com/seleckis/stickyfill.git" prop-types "^15.5.10" +react-swipeable@^7.0.0: + version "7.0.0" + resolved "https://registry.yarnpkg.com/react-swipeable/-/react-swipeable-7.0.0.tgz#7a12570ee435d35ac700511de338384aa78d12cd" + integrity sha512-NI7KGfQ6gwNFN0Hor3vytYW3iRfMMaivGEuxcADOOfBCx/kqwXE8IfHFxEcxSUkxCYf38COLKYd9EMYZghqaUA== + react-tabs@^3.2.2: version "3.2.3" resolved "https://registry.yarnpkg.com/react-tabs/-/react-tabs-3.2.3.tgz#ccbb3e1241ad3f601047305c75db661239977f2f"