Fix issue with bounding width and moving hotspots

SU-SWS · Sep 24, 2024 · 9685ca9 · 9685ca9
1 parent 4f2fe3a
commit 9685ca9
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 47 deletions.
diff --git a/components/AnnotatedImage/AnnotatedImage.tsx b/components/AnnotatedImage/AnnotatedImage.tsx
@@ -1,5 +1,5 @@
-import { Container } from '@/components/Container';
 import { ImageHotspot } from './ImageHotspot';
+import { Container } from '@/components/Container';
 import { StoryImage, type StoryImageProps } from '@/components/StoryImage';
 import { type ImageAspectRatioType } from '@/utilities/datasource';
 import { type WidthType } from '@/components/WidthBox';
@@ -8,19 +8,10 @@ import { type SbImageHotspotType } from '@/components/Storyblok/Storyblok.types'
 import { type CaptionBgColorType } from '@/components/StoryImage';
 import * as styles from './AnnotatedImage.styles';
 
-type AnnotatedImageProps = StoryImageProps & {
+type AnnotatedImageProps = Omit<StoryImageProps, 'width' | 'isParallax' | 'animation' | 'delay' | 'isFullHeight'>  & {
   hotspots: SbImageHotspotType[];
-  imageSrc?: string;
-  imageFocus?: string;
-  alt?: string;
-  aspectRatio?: ImageAspectRatioType;
-  boundingWidth?: 'site' | 'full';
-  width?: WidthType;
   marginTop?: MarginType;
   marginBottom?: MarginType;
-  caption?: React.ReactNode;
-  isCaptionInset?: boolean;
-  captionBgColor?: CaptionBgColorType;
 };
 
 export const AnnotatedImage = ({
@@ -29,42 +20,44 @@ export const AnnotatedImage = ({
   imageFocus,
   alt,
   aspectRatio,
-  boundingWidth = 'full',
-  width,
   caption,
   isCaptionInset,
   captionBgColor,
+  boundingWidth,
   marginTop,
   marginBottom,
   ...props
 }: AnnotatedImageProps) => {
   return (
-    <Container width="full" mt={marginTop} mb={marginBottom} className={styles.root} {...props}>
-      <StoryImage
-        imageSrc={imageSrc}
-        imageFocus={imageFocus}
-        alt={alt}
-        aspectRatio={aspectRatio}
-        boundingWidth={boundingWidth}
-        width={width}
-        caption={caption}
-        isCaptionInset={isCaptionInset}
-        captionBgColor={captionBgColor}
-      />
-      {/* Hotspots */}
-      {!!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 width={boundingWidth} mt={marginTop} mb={marginBottom} className={styles.root} {...props}>
+      {/* Extra div is essential to ensure hotspot doesn't move relative to image when browser is resized */}
+      <div className="relative">
+        <StoryImage
+          imageSrc={imageSrc}
+          imageFocus={imageFocus}
+          alt={alt}
+          aspectRatio={aspectRatio}
+          boundingWidth="full"
+          width="12"
+          caption={caption}
+          isCaptionInset={isCaptionInset}
+          captionBgColor={captionBgColor}
+        />
+        {/* Hotspots */}
+        {!!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]} />
+          ))
+        }
+      </div>
     </Container>
   );
 };
diff --git a/components/AnnotatedImage/ImageHotspot.styles.ts b/components/AnnotatedImage/ImageHotspot.styles.ts
@@ -10,13 +10,13 @@ export const hotspotRing = 'absolute top-6 left-6 content-[""] size-28 md:size-3
 // Modal styles
 export const dialog = 'relative z-[150]';
 export const srOnly = 'sr-only';
-export const dialogOverlay = 'fixed inset-0 bg-gc-black/50 backdrop-blur-md w-screen';
+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 items-center w-screen min-h-screen inset-0 text-white text-white';
+export const dialogPanel  = (modalContentType: SbImageHotspotModalContentType) => cnb('relative sm:cc flex w-screen min-h-screen inset-0 text-white text-white', modalContentType === 'text-image' ? 'items-start sm:items-center' : 'items-center');
 export const modalClose = 'absolute top-20 z-[200] right-20 block mr-0 ml-auto rs-mb-2 p-9 border-2 border-digital-red-xlight bg-black-true rounded-full hocus-visible:border-dashed hocus-visible:border-white transition-transform hocus-visible:rotate-90';
 export const modalIcon = 'text-white size-26';
 
-export const contentWrapper = (modalContentType: SbImageHotspotModalContentType) => cnb('relative flex items-center justify-center w-full h-screen sm:h-auto 2xl:aspect-[16/9] 3xl:aspect-2', {
-  'bg-white text-black': modalContentType === 'text-image',
-  'bg-black-true/60 text-white': modalContentType !== 'text-image',
+export const contentWrapper = (modalContentType: SbImageHotspotModalContentType) => cnb('relative flex items-center justify-center w-full  2xl:aspect-[16/9] 3xl:aspect-2', {
+  'bg-white text-black sm:h-auto': modalContentType === 'text-image',
+  'bg-black-true/70 text-white h-screen sm:h-auto': modalContentType !== 'text-image',
 });
diff --git a/components/AnnotatedImage/ImageHotspot.tsx b/components/AnnotatedImage/ImageHotspot.tsx
@@ -90,7 +90,7 @@ export const ImageHotspot = ({
               leaveTo="opacity-0 scale-95"
             >
               <div className={styles.dialogWrapper}>
-                <DialogPanel className={styles.dialogPanel}>
+                <DialogPanel className={styles.dialogPanel(modalContentType)}>
                   <DialogTitle className={styles.srOnly}>{heading || ariaLabel}</DialogTitle>
                   {subhead && (
                     <Description className={styles.srOnly}>{subhead}</Description>

diff --git a/components/Storyblok/SbAnnotatedImage.tsx b/components/Storyblok/SbAnnotatedImage.tsx
@@ -33,7 +33,6 @@ export const SbAnnotatedImage = ({
     caption,
     aspectRatio,
     boundingWidth = 'full',
-    width,
     marginTop,
     marginBottom,
     isCaptionInset,
@@ -61,7 +60,6 @@ export const SbAnnotatedImage = ({
       caption={Caption}
       aspectRatio={aspectRatio}
       boundingWidth={boundingWidth}
-      width={width}
       marginTop={marginTop}
       marginBottom={marginBottom}
       isCaptionInset={isCaptionInset}