From 74103864715fc13c54443077d1c44e7ff120a2a2 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 9 Dec 2024 01:52:09 -0800 Subject: [PATCH 1/5] Use modal for all breakpoints --- .../ChangemakerCard/ChangemakerCard.tsx | 40 +++---------------- components/Storyblok/SbChangemakerCard.tsx | 2 +- 2 files changed, 6 insertions(+), 36 deletions(-) diff --git a/components/ChangemakerCard/ChangemakerCard.tsx b/components/ChangemakerCard/ChangemakerCard.tsx index ad254f88..ac20832e 100644 --- a/components/ChangemakerCard/ChangemakerCard.tsx +++ b/components/ChangemakerCard/ChangemakerCard.tsx @@ -4,13 +4,12 @@ import { useId, useRef, useState } from 'react'; import { Description, Dialog, DialogPanel, DialogTitle, Transition, TransitionChild, } from '@headlessui/react'; -import { useMediaQuery, useOnClickOutside, useToggle } from 'usehooks-ts'; +import { useOnClickOutside, useToggle } from 'usehooks-ts'; import { AnimateInView, type AnimationType } from '@/components/Animate'; import { Heading, type HeadingType, Text } from '@/components/Typography'; import { FlexBox } from '@/components/FlexBox'; import { HeroIcon } from '@/components/HeroIcon'; import useEscape from '@/hooks/useEscape'; -import { config } from '@/utilities/config'; import { getProcessedImage } from '@/utilities/getProcessedImage'; import * as styles from './ChangemakerCard.styles'; @@ -41,8 +40,6 @@ export const ChangemakerCard = ({ className, ...props }: ChangemakerCardProps) => { - const isNotPhone = useMediaQuery(`(min-width: ${config.breakpoints.sm}px)`); - const cardRef = useRef(null); const buttonRef = useRef(null); const contentRef = useRef(null); @@ -53,19 +50,6 @@ export const ChangemakerCard = ({ // For the mobile modal const [isModalOpen, setIsModalOpen] = useState(false); - const handleClick = () => { - // If it's not XS breakpoint, toggle the card content and if it is shown, focus on contentRef - if (isNotPhone) { - toggle(); - if (!isShown) { - contentRef.current?.focus(); - } - } else { - // Open the modal if it's XS breakpoint - setIsModalOpen(true); - } - }; - // If card content is shown, clicking outside it will dismiss it useOnClickOutside(cardRef, () => { if (isShown) { @@ -164,27 +148,13 @@ export const ChangemakerCard = ({ )} - {/* Content layer */} - {/* Content is displayed on an overlay over the card for all breakpoint except XS */} - -
- {children} -
-
- {heading} - {subheading && ( - {subheading} - )} - {children} +
+ +
+ {(heading || subheading) && ( +
+ {heading && + + {heading} + + } + {subheading && + + + {subheading} + + + } +
+ )} +
+ {children} +
+
+
diff --git a/components/RichText.tsx b/components/RichText.tsx index 39d93eba..81208333 100644 --- a/components/RichText.tsx +++ b/components/RichText.tsx @@ -18,6 +18,7 @@ import { */ export type RichTextBaseFontSizeType = 'default' | 'card' | 'changemaker' | 'changemakerHorizontal' | 'big'; +export type RichTextLinkColorType = 'unset' | 'white' | 'digital-red-xlight'; export type RichTextProps = { wysiwyg: StoryblokRichtext; @@ -28,7 +29,7 @@ export type RichTextProps = { type?: 'default' | 'card'; baseFontSize?: RichTextBaseFontSizeType; textColor?: 'black' | 'white' | 'black-70'; - linkColor?: 'unset' | 'white' | 'digital-red-xlight'; + linkColor?: RichTextLinkColorType; bgColor?: 'black' | 'black-50' | 'black-60' | 'black-70' | 'white' | 'none'; textAlign?: TextAlignType; className?: string; diff --git a/components/Storyblok/SbCardWysiwyg.tsx b/components/Storyblok/SbCardWysiwyg.tsx index 822d8e4b..71e16d95 100644 --- a/components/Storyblok/SbCardWysiwyg.tsx +++ b/components/Storyblok/SbCardWysiwyg.tsx @@ -1,6 +1,6 @@ import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer-ts'; import { storyblokEditable } from '@storyblok/react/rsc'; -import { RichText } from '../RichText'; +import { RichText, type RichTextLinkColorType } from '../RichText'; /** * This is used only as a sub-component currently @@ -14,6 +14,7 @@ type SbCardWysiwygProps = { isLightText?: boolean; }, baseFontSize?: 'default' | 'changemaker' | 'changemakerHorizontal' | 'card'; + linkColor?: RichTextLinkColorType; }; export const SbCardWysiwyg = ({ @@ -23,8 +24,15 @@ export const SbCardWysiwyg = ({ }, blok, baseFontSize, + linkColor, }: SbCardWysiwygProps) => (
- +
); diff --git a/components/Storyblok/SbChangemakerCard.tsx b/components/Storyblok/SbChangemakerCard.tsx index 9239fcd8..5591bccf 100644 --- a/components/Storyblok/SbChangemakerCard.tsx +++ b/components/Storyblok/SbChangemakerCard.tsx @@ -34,7 +34,7 @@ export const SbChangemakerCard = ({ }, blok, }: SbChangemakerCardProps) => { - const Body = !!getNumBloks(body) ? : undefined; + const Body = !!getNumBloks(body) ? : undefined; return ( Date: Tue, 10 Dec 2024 11:44:33 -0800 Subject: [PATCH 3/5] Change close button border to red; clean up --- .../AnnotatedImage/AnnotatedImage.styles.ts | 2 +- .../ChangemakerCard/ChangemakerCard.styles.ts | 12 ++--- .../ChangemakerCard/ChangemakerCard.tsx | 49 +++++++------------ 3 files changed, 21 insertions(+), 42 deletions(-) diff --git a/components/AnnotatedImage/AnnotatedImage.styles.ts b/components/AnnotatedImage/AnnotatedImage.styles.ts index 4970ba30..30970cf5 100644 --- a/components/AnnotatedImage/AnnotatedImage.styles.ts +++ b/components/AnnotatedImage/AnnotatedImage.styles.ts @@ -1,4 +1,4 @@ -export const root = 'relative self-start'; +export const root = 'relative self-start annotated-image'; export const imageWrapper = 'relative @container'; export const ul = 'list-unstyled'; export const li = 'mb-0'; diff --git a/components/ChangemakerCard/ChangemakerCard.styles.ts b/components/ChangemakerCard/ChangemakerCard.styles.ts index 2782f1ca..4fe5904f 100644 --- a/components/ChangemakerCard/ChangemakerCard.styles.ts +++ b/components/ChangemakerCard/ChangemakerCard.styles.ts @@ -6,7 +6,7 @@ import { cnb } from 'cnbuilder'; * It caused a weird bug when you have the dialog open and click around sometimes * it will bring the body content under the dialog overlay to the front even though it is not focusable. */ -export const root = (isHorizontal: boolean) => cnb('relative w-full mx-auto break-words max-w-[29rem]', { +export const root = (isHorizontal: boolean) => cnb('relative w-full mx-auto break-words max-w-[29rem] bg-black', { 'sm:max-w-300 lg:max-w-[35rem]': !isHorizontal, 'sm:max-w-550 md:max-w-600 xl:max-w-1000 2xl:max-w-1200': isHorizontal, }); @@ -30,12 +30,6 @@ export const heading = (isHorizontal: boolean) => cnb('mb-02em mt-auto text-30 w }); export const subhead = 'text-19 md:text-21 xl:max-w-prose mx-auto whitespace-pre-line'; -export const cardContent = (isHorizontal: boolean) => cnb('hidden sm:block absolute size-full top-0 left-0 aria-hidden:opacity-0 opacity-100 backdrop-blur-sm transition-opacity duration-500 bg-gradient-to-b from-gc-black/60 to-gc-black/90 *:*:*:!mb-1em', { - 'px-20 py-30 pb-120 3xl:pt-48 3xl:px-36' : !isHorizontal, - 'rs-pt-3 rs-px-3 pb-150': isHorizontal, -}); -export const contentWrapper = (isHorizontal: boolean) => isHorizontal && 'xl:columns-2 gap-x-38 xl:first:*:*:*:mt-0'; - export const button = 'group absolute size-full top-0 left-0'; export const icon = (isHorizontal: boolean) => cnb('absolute bottom-40 right-36 text-white size-65 border-2 border-white rounded-full p-16 group-hocus-visible:border-dashed group-aria-expanded:rotate-45 transition-transform group-hocus-visible:bg-gc-black/80 transition-color', { 'md:bottom-58 2xl:bottom-61 md:right-45': isHorizontal, @@ -43,15 +37,15 @@ export const icon = (isHorizontal: boolean) => cnb('absolute bottom-40 right-36 // Modal styles export const dialog = 'relative z-[100]'; -export const srOnly = 'sr-only'; export const dialogOverlay = 'fixed inset-0 bg-gc-black/60 backdrop-blur-lg w-screen'; export const dialogWrapper = 'fixed inset-0 sm:py-30 w-screen overflow-y-auto overscroll-contain overflow-x-hidden'; export const dialogPanel = 'relative sm:cc flex w-screen min-h-screen inset-0 break-words justify-center items-start sm:items-center'; export const dialogContentWrapper = 'relative flex flex-col items-center justify-center max-w-prose-wide text-white bg-black-true/60'; -export const modalClose = 'block ml-auto rs-mb-4 mr-20 mt-20 p-9 border-2 border-white rounded-full hocus-visible:border-dashed hocus-visible:rotate-90 transition-transform'; +export const modalClose = 'block ml-auto rs-mb-4 mr-20 mt-20 p-9 border-2 border-digital-red-xlight rounded-full hocus-visible:border-dashed hocus-visible:border-white hocus-visible:rotate-90 transition-transform'; export const modalIcon = 'text-white size-26'; export const modalTextWrapper = 'rs-pr-4 rs-pb-6 w-[75ch] max-w-[100vw] md:max-w-full'; export const modalHeader = 'rs-mb-3 border-l-[1.2rem] md:border-l-[1.8rem] border-digital-red-light'; export const modalHeading = 'mb-02em leading-tight ml-22 md:ml-40 2xl:ml-43 type-3 font-serif'; export const modalSubhead = 'ml-22 md:ml-40 2xl:ml-43'; +export const nestedBloksWrapper = 'rs-pl-4'; diff --git a/components/ChangemakerCard/ChangemakerCard.tsx b/components/ChangemakerCard/ChangemakerCard.tsx index da691e0b..272fe283 100644 --- a/components/ChangemakerCard/ChangemakerCard.tsx +++ b/components/ChangemakerCard/ChangemakerCard.tsx @@ -1,15 +1,14 @@ 'use client'; import { cnb } from 'cnbuilder'; -import { useId, useRef, useState } from 'react'; +import { useRef, useState } from 'react'; import { Description, Dialog, DialogPanel, DialogTitle, Transition, TransitionChild, } from '@headlessui/react'; -import { useOnClickOutside, useToggle } from 'usehooks-ts'; +import { useOnClickOutside } from 'usehooks-ts'; import { AnimateInView, type AnimationType } from '@/components/Animate'; import { Heading, type HeadingType, Text } from '@/components/Typography'; import { FlexBox } from '@/components/FlexBox'; import { HeroIcon } from '@/components/HeroIcon'; -import useEscape from '@/hooks/useEscape'; import { getProcessedImage } from '@/utilities/getProcessedImage'; import * as styles from './ChangemakerCard.styles'; @@ -111,17 +110,15 @@ export const ChangemakerCard = ({ )} - {heading && ( - - {heading} - - )} + + {heading} + {subheading && ( {subheading} )} @@ -184,25 +181,13 @@ export const ChangemakerCard = ({ />
- {(heading || subheading) && ( -
- {heading && - - {heading} - - } - {subheading && - - - {subheading} - - - } -
- )} -
- {children} +
+ {heading} + {subheading && + {subheading} + }
+
{children}
From 6fd2aab54d0c4fa67aeca90e205a753756eb788a Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 10 Dec 2024 15:34:23 -0800 Subject: [PATCH 4/5] Use headlessui description without nesting; update PR template --- .github/pull_request_template.md | 2 +- components/ChangemakerCard/ChangemakerCard.styles.ts | 2 +- components/ChangemakerCard/ChangemakerCard.tsx | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 4cef4992..40ed4937 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -20,7 +20,7 @@ 3. Verify... # Associated Issues and/or People -- JIRA ticket(s) - GIVCAMP- +- JIRA ticket(s) - DS- - Other PRs - Any other contextual information that might be helpful (e.g., description of a bug that this PR fixes, new functionality that it adds, etc.) - Anyone who should be notified? (`@mention` them here) diff --git a/components/ChangemakerCard/ChangemakerCard.styles.ts b/components/ChangemakerCard/ChangemakerCard.styles.ts index 4fe5904f..8eb916fe 100644 --- a/components/ChangemakerCard/ChangemakerCard.styles.ts +++ b/components/ChangemakerCard/ChangemakerCard.styles.ts @@ -47,5 +47,5 @@ export const modalIcon = 'text-white size-26'; export const modalTextWrapper = 'rs-pr-4 rs-pb-6 w-[75ch] max-w-[100vw] md:max-w-full'; export const modalHeader = 'rs-mb-3 border-l-[1.2rem] md:border-l-[1.8rem] border-digital-red-light'; export const modalHeading = 'mb-02em leading-tight ml-22 md:ml-40 2xl:ml-43 type-3 font-serif'; -export const modalSubhead = 'ml-22 md:ml-40 2xl:ml-43'; +export const modalSubhead = 'block font-semibold big-paragraph leading-tight ml-22 md:ml-40 2xl:ml-43'; export const nestedBloksWrapper = 'rs-pl-4'; diff --git a/components/ChangemakerCard/ChangemakerCard.tsx b/components/ChangemakerCard/ChangemakerCard.tsx index 272fe283..8090b713 100644 --- a/components/ChangemakerCard/ChangemakerCard.tsx +++ b/components/ChangemakerCard/ChangemakerCard.tsx @@ -181,12 +181,12 @@ export const ChangemakerCard = ({ />
-
+
{heading} {subheading && - {subheading} + {subheading} } -
+
{children}
From 4be59bc6ec628a9be2c967537c3da4cbbe5a495e Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 10 Dec 2024 15:59:34 -0800 Subject: [PATCH 5/5] Remove unnecessary code --- components/AnnotatedImage/ImageHotspot.tsx | 2 -- components/ChangemakerCard/ChangemakerCard.tsx | 1 - 2 files changed, 3 deletions(-) diff --git a/components/AnnotatedImage/ImageHotspot.tsx b/components/AnnotatedImage/ImageHotspot.tsx index ac0fa8e4..31064fb5 100644 --- a/components/AnnotatedImage/ImageHotspot.tsx +++ b/components/AnnotatedImage/ImageHotspot.tsx @@ -30,7 +30,6 @@ export const ImageHotspot = ({ descriptionSize, }: SbImageHotspotType) => { const [isModalOpen, setIsModalOpen] = useState(false); - const buttonRef = useRef(null); const [isClicked, setIsClicked] = useState(false); const panelRef = useRef(null); @@ -58,7 +57,6 @@ export const ImageHotspot = ({