From 3e26f1d9218ac93de239250091a60a51bc1b9147 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Mon, 9 Dec 2024 18:28:51 -0800 Subject: [PATCH] modal functionality and styles --- .../ChangemakerCard/ChangemakerCard.styles.ts | 14 ++- .../ChangemakerCard/ChangemakerCard.tsx | 88 +++++++++---------- components/RichText.tsx | 3 +- components/Storyblok/SbCardWysiwyg.tsx | 12 ++- components/Storyblok/SbChangemakerCard.tsx | 2 +- 5 files changed, 65 insertions(+), 54 deletions(-) diff --git a/components/ChangemakerCard/ChangemakerCard.styles.ts b/components/ChangemakerCard/ChangemakerCard.styles.ts index ade984de..2782f1ca 100644 --- a/components/ChangemakerCard/ChangemakerCard.styles.ts +++ b/components/ChangemakerCard/ChangemakerCard.styles.ts @@ -44,8 +44,14 @@ 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/80 backdrop-blur-md w-screen'; -export const dialogWrapper = 'fixed inset-0 w-screen overflow-y-auto overscroll-contain'; -export const dialogPanel = 'relative cc w-screen min-h-screen inset-0 pt-20 pb-60 text-white'; -export const modalClose = 'block mr-0 ml-auto rs-mb-2 p-9 border-2 border-white rounded-full hocus:border-dashed transition-transform'; +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 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'; diff --git a/components/ChangemakerCard/ChangemakerCard.tsx b/components/ChangemakerCard/ChangemakerCard.tsx index ac20832e..da691e0b 100644 --- a/components/ChangemakerCard/ChangemakerCard.tsx +++ b/components/ChangemakerCard/ChangemakerCard.tsx @@ -40,43 +40,23 @@ export const ChangemakerCard = ({ className, ...props }: ChangemakerCardProps) => { - const cardRef = useRef(null); - const buttonRef = useRef(null); - const contentRef = useRef(null); - const contentId = useId(); - const headingId = useId(); - const [isShown, toggle, setIsShown] = useToggle(); - - // For the mobile modal const [isModalOpen, setIsModalOpen] = useState(false); + const panelRef = useRef(null); - // If card content is shown, clicking outside it will dismiss it - useOnClickOutside(cardRef, () => { - if (isShown) { - setIsShown(false); - } - }); - - // If card content is shown, pressing escape will dismiss it - // and focus on the button - useEscape(() => { - if (isShown) { - setIsShown(false); - buttonRef.current?.focus(); - } + useOnClickOutside(panelRef, () => { + setIsModalOpen(false); }); return ( <>
{/* Front of the card */} -
+
{!!imageSrc && (
{/* No need to use different sources for vertical cards because @@ -134,7 +114,6 @@ export const ChangemakerCard = ({ {heading && (
- {/* Content is displayed in a modal for XS breakpoint only */} + {/* Content is displayed in a modal */} setIsModalOpen(false)} className={styles.dialog}>
- - {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 (