modal functionality and styles

SU-SWS · Dec 10, 2024 · 3e26f1d · 3e26f1d
1 parent 7410386
commit 3e26f1d
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 54 deletions.
diff --git 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
@@ -40,43 +40,23 @@ export const ChangemakerCard = ({
   className,
   ...props
 }: ChangemakerCardProps) => {
-  const cardRef = useRef<HTMLDivElement>(null);
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const contentId = useId();
-  const headingId = useId();
-  const [isShown, toggle, setIsShown] = useToggle();
-
-  // For the mobile modal
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(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 (
     <>
       <AnimateInView animation={animation} delay={delay}>
         <article
-          ref={cardRef}
           className={cnb('changemaker-card', styles.root(isHorizontal), className)}
           {...props}
         >
           <div className={styles.cardInner(isHorizontal)}>
             {/* Front of the card */}
-            <div aria-hidden={isShown} className={styles.cardFront}>
+            <div className={styles.cardFront}>
               {!!imageSrc && (
                 <div className={styles.imageWrapper(isHorizontal)}>
                   {/* No need to use different sources for vertical cards because
@@ -134,7 +114,6 @@ export const ChangemakerCard = ({
                 {heading && (
                   <Heading
                     as={headingLevel || 'h3'}
-                    id={headingId}
                     leading="tight"
                     align="center"
                     color="white"
@@ -149,7 +128,6 @@ export const ChangemakerCard = ({
               </FlexBox>
             </div>
             <button
-              ref={buttonRef}
               type="button"
               onClick={() => setIsModalOpen(true)}
               aria-label={`Read more about ${heading}`}
@@ -167,7 +145,7 @@ export const ChangemakerCard = ({
           </div>
         </article>
       </AnimateInView>
-      {/* Content is displayed in a modal for XS breakpoint only */}
+      {/* Content is displayed in a modal */}
       <Transition show={isModalOpen}>
         <Dialog onClose={() => setIsModalOpen(false)} className={styles.dialog}>
           <TransitionChild
@@ -190,25 +168,43 @@ export const ChangemakerCard = ({
           >
             <div className={styles.dialogWrapper}>
               <DialogPanel className={styles.dialogPanel}>
-                <button
-                  type="button"
-                  aria-label="Close modal"
-                  onClick={() => setIsModalOpen(false)}
-                  className={styles.modalClose}
-                >
-                  <HeroIcon
-                    noBaseStyle
-                    focusable="false"
-                    strokeWidth={2}
-                    icon='close'
-                    className={styles.modalIcon}
-                  />
-                </button>
-                <DialogTitle className={styles.srOnly}>{heading}</DialogTitle>
-                {subheading && (
-                  <Description className={styles.srOnly}>{subheading}</Description>
-                )}
-                {children}
+                <div ref={panelRef} className={styles.dialogContentWrapper}>
+                  <button
+                    type="button"
+                    aria-label="Close modal"
+                    onClick={() => setIsModalOpen(false)}
+                    className={styles.modalClose}
+                  >
+                    <HeroIcon
+                      noBaseStyle
+                      focusable="false"
+                      strokeWidth={2}
+                      icon='close'
+                      className={styles.modalIcon}
+                    />
+                  </button>
+                  <div className={styles.modalTextWrapper}>
+                    {(heading || subheading) && (
+                      <div className={styles.modalHeader}>
+                        {heading &&
+                          <DialogTitle className={styles.modalHeading}>
+                            {heading}
+                          </DialogTitle>
+                        }
+                        {subheading &&
+                          <Description>
+                            <Text weight="semibold" variant="big" leading="tight" className={styles.modalSubhead}>
+                              {subheading}
+                            </Text>
+                          </Description>
+                        }
+                      </div>
+                    )}
+                    <div className="rs-pl-4">
+                      {children}
+                    </div>
+                  </div>
+                </div>
               </DialogPanel>
             </div>
           </TransitionChild>

diff --git 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
@@ -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) => (
   <div {...storyblokEditable(blok)}>
-    <RichText baseFontSize={baseFontSize} type="card" wysiwyg={content} textColor={isLightText ? 'white' : 'black'} />
+    <RichText
+      baseFontSize={baseFontSize}
+      type="card"
+      wysiwyg={content}
+      textColor={isLightText ? 'white' : 'black'}
+      linkColor={linkColor}
+    />
   </div>
 );
diff --git a/components/Storyblok/SbChangemakerCard.tsx b/components/Storyblok/SbChangemakerCard.tsx
@@ -34,7 +34,7 @@ export const SbChangemakerCard = ({
   },
   blok,
 }: SbChangemakerCardProps) => {
-  const Body = !!getNumBloks(body) ? <CreateBloks blokSection={body} baseFontSize="card" /> : undefined;
+  const Body = !!getNumBloks(body) ? <CreateBloks blokSection={body} linkColor="digital-red-xlight" /> : undefined;
 
   return (
     <ChangemakerCard