From 9685ca9a723308304106edee0e03d181847d4080 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 24 Sep 2024 16:40:28 -0700 Subject: [PATCH] Fix issue with bounding width and moving hotspots --- components/AnnotatedImage/AnnotatedImage.tsx | 71 +++++++++---------- .../AnnotatedImage/ImageHotspot.styles.ts | 10 +-- components/AnnotatedImage/ImageHotspot.tsx | 2 +- components/Storyblok/SbAnnotatedImage.tsx | 2 - 4 files changed, 38 insertions(+), 47 deletions(-) diff --git a/components/AnnotatedImage/AnnotatedImage.tsx b/components/AnnotatedImage/AnnotatedImage.tsx index 2e96a2ec..53fd77ce 100644 --- 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 & { 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 ( - - - {/* Hotspots */} - {!!hotspots?.length && - (hotspots.length > 1 ? ( -
    - {hotspots.map((hotspot) => ( -
  • - -
    • - ))} -
- ) : ( - - )) - } + + {/* Extra div is essential to ensure hotspot doesn't move relative to image when browser is resized */} +
+ + {/* Hotspots */} + {!!hotspots?.length && + (hotspots.length > 1 ? ( +
    + {hotspots.map((hotspot) => ( +
  • + +
    • + ))} +
+ ) : ( + + )) + } +
); }; diff --git a/components/AnnotatedImage/ImageHotspot.styles.ts b/components/AnnotatedImage/ImageHotspot.styles.ts index a21d30e8..2652b327 100644 --- 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 index 644a9b42..d882335e 100644 --- a/components/AnnotatedImage/ImageHotspot.tsx +++ b/components/AnnotatedImage/ImageHotspot.tsx @@ -90,7 +90,7 @@ export const ImageHotspot = ({ leaveTo="opacity-0 scale-95" >
- + {heading || ariaLabel} {subhead && ( {subhead} diff --git a/components/Storyblok/SbAnnotatedImage.tsx b/components/Storyblok/SbAnnotatedImage.tsx index e66ece21..5b273c83 100644 --- 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}