Allow nested components

SU-SWS · Sep 6, 2024 · 7f22656 · 7f22656
1 parent 80e2db1
commit 7f22656
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 36 deletions.
diff --git a/components/AnnotatedImage/AnnotatedImage.styles.ts b/components/AnnotatedImage/AnnotatedImage.styles.ts
@@ -1 +1,3 @@
 export const root = 'relative';
+export const ul = 'list-unstyled';
+export const li = 'mb-0';
diff --git a/components/AnnotatedImage/AnnotatedImage.tsx b/components/AnnotatedImage/AnnotatedImage.tsx
@@ -1,11 +1,10 @@
 import { Container } from '@/components/Container';
-import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer-ts';
 import { ImageHotspot } from './ImageHotspot';
 import { StoryImage, type StoryImageProps } from '@/components/StoryImage';
 import { type ImageAspectRatioType } from '@/utilities/datasource';
 import { type WidthType } from '@/components/WidthBox';
 import { type MarginType } from '@/utilities/datasource';
-import { type SbImageType, type SbImageHotspotType } from '@/components/Storyblok/Storyblok.types';
+import { type SbImageHotspotType } from '@/components/Storyblok/Storyblok.types';
 import { type CaptionBgColorType } from '@/components/StoryImage';
 import * as styles from './AnnotatedImage.styles';
 
@@ -53,9 +52,19 @@ export const AnnotatedImage = ({
         captionBgColor={captionBgColor}
       />
       {/* Hotspots */}
-      {hotspots.map((hotspot, index) => (
-        <ImageHotspot key={index} {...hotspot} />
-      ))}
+      {!!hotspots?.length &&
+        (hotspots.length > 1 ? (
+          <ul className={styles.ul}>
+            {hotspots.map((hotspot) => (
+              <li key={hotspot.ariaLabel} className={styles.li}>
+                <ImageHotspot {...hotspot} />
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <ImageHotspot {...hotspots[0]} />
+        ))
+      }
     </Container>
   );
 };
diff --git a/components/AnnotatedImage/ImageHotspot.styles.ts b/components/AnnotatedImage/ImageHotspot.styles.ts
@@ -1,13 +1,13 @@
 import { cnb } from 'cnbuilder';
 
-export const button = 'group absolute z-[100] size-65 bg-black-true/50 rounded-full border-2 border-white hocus-visible:bg-black-true/70 hocus-visible:border-dashed group-aria-expanded:rotate-45 transition-transform hocus-visible:bg-gc-black/80 transition-colors hocus-visible:outline-none focus-visible:ring-4 focus-visible:ring-digital-red-xlight';
-export const icon = 'will-change text-white p-16 group-hocus-visible:scale-125 group-aria-expanded:rotate-45 transition-transform';
+export const button = 'group flex items-center justify-center absolute z-[100] size-50 bg-black-true/50 rounded-full border-2 border-white hocus-visible:bg-black-true/70 hocus-visible:border-dashed group-aria-expanded:rotate-45 transition-transform hocus-visible:bg-gc-black/80 transition-colors hocus-visible:outline-none focus-visible:ring-4 focus-visible:ring-digital-red-xlight';
+export const icon = 'will-change text-white group-hocus-visible:scale-125 group-aria-expanded:rotate-45 transition-transform w-30';
 
 // Modal styles
 export const dialog = 'relative z-[150]';
 export const srOnly = 'sr-only';
-export const dialogOverlay = 'fixed inset-0 bg-gc-black/80 backdrop-blur-md w-screen';
+export const dialogOverlay = 'fixed inset-0 bg-gc-black/50 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 dialogPanel = 'relative cc flex items-center w-screen min-h-screen inset-0 pt-20 pb-60 text-white';
+export const modalClose = 'absolute top-20 right-20 block mr-0 ml-auto rs-mb-2 p-9 border-2 border-white rounded-full hocus:border-dashed transition-transform';
 export const modalIcon = 'text-white size-26';
diff --git a/components/AnnotatedImage/ImageHotspot.tsx b/components/AnnotatedImage/ImageHotspot.tsx
@@ -3,22 +3,13 @@ import {
   Description, Dialog, DialogPanel, DialogTitle, Transition, TransitionChild,
 } from '@headlessui/react';
 import { cnb } from 'cnbuilder';
+import { CreateBloks } from '../CreateBloks';
 import { Grid } from '@/components/Grid';
 import { Heading } from '@/components/Typography';
 import { HeroIcon } from '@/components/HeroIcon';
 import { type SbImageHotspotType } from '../Storyblok/Storyblok.types';
 import * as styles from './ImageHotspot.styles';
 
-// export type ImageHotspotType = {
-//   positionX: number;
-//   positionY: number;
-//   heading?: string;
-//   subhead?: string;
-//   description?: React.ReactNode;
-//   imageSrc?: string;
-//   imageFocus?: string;
-// }
-
 export const ImageHotspot = ({
   positionX: { value: x } = {},
   positionY: { value: y } = {},
@@ -27,6 +18,7 @@ export const ImageHotspot = ({
   subhead,
   description,
   image,
+  content,
 }: SbImageHotspotType) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
@@ -66,27 +58,28 @@ export const ImageHotspot = ({
             >
               <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>
                   {subhead && (
                     <Description className={styles.srOnly}>{subhead}</Description>
                   )}
-                  <div className="bg-white w-full aspect-2 text-gc-black">
+                  <div className="relative flex items-center bg-black-true/60 w-full aspect-2 text-gc-black">
+                    <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>
                     <Heading size={3}>{heading}</Heading>
                     <span>{subhead}</span>
+                    <CreateBloks blokSection={content} />
                   </div>
                 </DialogPanel>
               </div>

diff --git a/components/Storyblok/Storyblok.types.ts b/components/Storyblok/Storyblok.types.ts
@@ -1,4 +1,4 @@
-import { image } from './../Banner/Banner.styles';
+import { type SbBlokData } from '@storyblok/react/rsc';
 import { type FontSizeType } from '@/components/Typography';
 import { type StoryblokRichtext } from 'storyblok-rich-text-react-renderer-ts';
 
@@ -89,4 +89,5 @@ export type SbImageHotspotType = {
   subhead: string;
   description: StoryblokRichtext;
   image: SbImageType;
+  content: SbBlokData[];
 };