DS-850 | Annotated image component

components/AnnotatedImage/AnnotatedImage.styles.ts

@@ -0,0 +1,4 @@
+export const root = 'relative self-start';
+export const imageWrapper = 'relative @container';
+export const ul = 'list-unstyled';
+export const li = 'mb-0';

components/AnnotatedImage/AnnotatedImage.tsx

@@ -0,0 +1,60 @@
+import { ImageHotspot } from './ImageHotspot';
+import { Container } from '@/components/Container';
+import { StoryImage, type StoryImageProps } from '@/components/StoryImage';
+import { type MarginType } from '@/utilities/datasource';
+import { type SbImageHotspotType } from '@/components/Storyblok/Storyblok.types';
+import * as styles from './AnnotatedImage.styles';
+
+type AnnotatedImageProps = Omit<StoryImageProps, 'width' | 'isParallax' | 'animation' | 'delay' | 'isFullHeight' | 'spacingTop' | 'spacingBottom'> & {
+  hotspots: SbImageHotspotType[];
+  marginTop?: MarginType;
+  marginBottom?: MarginType;
+};
+
+export const AnnotatedImage = ({
+  hotspots,
+  imageSrc,
+  imageFocus,
+  alt,
+  aspectRatio,
+  caption,
+  isCaptionInset,
+  captionBgColor,
+  boundingWidth,
+  marginTop,
+  marginBottom,
+  ...props
+}: AnnotatedImageProps) => {
+  return (
+    <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={styles.imageWrapper}>
+        <StoryImage
+          imageSrc={imageSrc}
+          imageFocus={imageFocus}
+          alt={alt}
+          aspectRatio={aspectRatio}
+          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]} />
+            ))
+          }
+        </StoryImage>
+      </div>
+    </Container>
+  );
+};

components/AnnotatedImage/ImageHotspot.styles.ts

@@ -0,0 +1,37 @@
+import { cnb } from 'cnbuilder';
+import { type SbImageHotspotModalContentType } from '@/components/Storyblok/Storyblok.types';
+
+// To center hotspot on the coordinates, it needs to be offset by half of the hotspot width and height
+export const hotspotWrapper = 'absolute -mt-20 -ml-20 @2xl:-mt-25 @2xl:-ml-25';
+export const button = 'group flex relative z-[100] items-center justify-center size-40 @2xl:size-50 bg-black-true/50 rounded-full border-2 border-white hocus-visible:bg-black-true/70 hocus-visible:border-dashed 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 = 'z-[100] will-change w-24 @2xl:w-30 text-white group-hocus-visible:scale-125 group-aria-expanded:rotate-45 transition-transform';
+export const hotspotRing = 'absolute top-6 left-6 content-[""] size-28 @2xl:size-38 bg-transparent ring-[10px] ring-offset-0 ring-white border-white z-[80] animate-[hotspot_2s_cubic-bezier(0,0,0.2,1)_infinite] rounded-full';
+
+// Modal styles
+export const dialog = 'relative z-[150]';
+export const srOnly = 'sr-only';
+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  = (modalContentType: SbImageHotspotModalContentType) => cnb(
+  'relative sm:cc flex w-screen min-h-screen inset-0 break-words justify-center',
+  (modalContentType === 'text-image' || modalContentType === 'text') ? 'items-start sm:items-center' : 'items-center text-white',
+);
+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 grid = 'h-full';
+export const contentWrapper = (modalContentType: SbImageHotspotModalContentType, isVerticalCard: boolean) => cnb('relative flex items-center justify-center', {
+  'min-h-screen sm:min-h-[auto] bg-black-true/70 text-white': modalContentType !== 'text-image' && modalContentType !== 'text',
+  'bg-white text-black': modalContentType === 'text-image' || modalContentType === 'text',
+  'w-full 2xl:aspect-[16/9] 3xl:aspect-2': modalContentType !== 'text' && modalContentType !== 'fullwidth-image' && modalContentType !== 'image-quote' && !isVerticalCard,
+  'max-w-1000': modalContentType === 'text-image' && isVerticalCard,
+});
+export const textWrapper = (isVerticalCard: boolean) => cnb('pt-90 rs-pb-4 bg-white', !isVerticalCard && 'xl:col-span-6 2xl:col-span-5');
+export const header = 'border-l-[1.2rem] md:border-l-[1.8rem] border-digital-red-light';
+export const heading = 'mb-02em leading-tight ml-22 md:ml-40 2xl:ml-43';
+export const subhead = 'ml-22 md:ml-40 2xl:ml-43';
+export const figure = (isVerticalCard: boolean) => cnb('relative ', !isVerticalCard && 'xl:col-span-6 2xl:col-span-7');
+export const image = 'xl:object-cover w-full xl:h-full';
+export const figcaption = 'md:absolute mt-0 px-18 pt-14 pb-16 bg-black-true/90 md:bg-black-true/70 sm:bottom-20 md:bottom-30 md:left-30 max-w-full md:max-w-[40rem] 2xl:max-w-400s z-[110]';
+
+export const nestedComponentWrapper = (modalContentType: SbImageHotspotModalContentType) => modalContentType === 'component' && 'py-100 sm:rs-px-1';

components/AnnotatedImage/ImageHotspot.tsx

@@ -0,0 +1,181 @@
+import { useRef, useState } from 'react';
+import {
+  Description, Dialog, DialogPanel, DialogTitle, Transition, TransitionChild,
+} from '@headlessui/react';
+import { useOnClickOutside } from 'usehooks-ts';
+import { CreateBloks } from '../CreateBloks';
+import { Grid } from '@/components/Grid';
+import { Heading, Text } from '@/components/Typography';
+import { HeroIcon } from '@/components/HeroIcon';
+import { RichText } from '@/components/RichText';
+import { type SbImageHotspotType } from '@/components/Storyblok/Storyblok.types';
+import { getProcessedImage } from '@/utilities/getProcessedImage';
+import { hasRichText } from '@/utilities/hasRichText';
+import { getNumBloks } from '@/utilities/getNumBloks';
+import * as styles from './ImageHotspot.styles';
+
+export const ImageHotspot = ({
+  positionX: { value: x } = {},
+  positionY: { value: y } = {},
+  modalContentType,
+  heading,
+  ariaLabel,
+  subhead,
+  description,
+  image: { filename, focus } = {},
+  caption,
+  alt,
+  content,
+  isVerticalCard,
+  descriptionSize,
+}: SbImageHotspotType) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [isClicked, setIsClicked] = useState(false);
+  const panelRef = useRef<HTMLDivElement>(null);
+
+  const handleClick = () => {
+    setIsModalOpen(true);
+    if (!isClicked) {
+      setIsClicked(true);
+    }
+  };
+
+  useOnClickOutside(panelRef, () => {
+    setIsModalOpen(false);
+  });
+
+  const DescriptionRichText = hasRichText(description)
+  ? <RichText wysiwyg={description} baseFontSize={descriptionSize} className="rs-mt-3 *:max-w-prose *:leading-snug rs-px-4" />
+  : undefined;
+
+  const Caption = hasRichText(caption)
+  ? <RichText wysiwyg={caption} textColor="white" linkColor="digital-red-xlight" className="first:*:mt-0 *:leading-display" />
+  : undefined;
+
+  return (
+      <>
+        <div className={styles.hotspotWrapper} style={{ top: `${y * 100}%`, left: `${x * 100}%` }}>
+          <button
+            type="button"
+            ref={buttonRef}
+            onClick={handleClick}
+            aria-haspopup="dialog"
+            aria-label={`Open modal ${ariaLabel || heading}`}
+            className={styles.button}
+          >
+            <HeroIcon noBaseStyle icon="plus" strokeWidth={2} className={styles.icon} />
+          </button>
+          {!isClicked && (
+            <span aria-hidden="true" className={styles.hotspotRing} />
+          )}
+        </div>
+        <Transition show={isModalOpen}>
+          <Dialog onClose={() => setIsModalOpen(false)} className={styles.dialog}>
+            <TransitionChild
+              enter="ease-out duration-300"
+              enterFrom="opacity-0"
+              enterTo="opacity-100"
+              leave="ease-in duration-300"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <div className={styles.dialogOverlay} />
+            </TransitionChild>
+            <TransitionChild
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <div className={styles.dialogWrapper}>
+                <DialogPanel className={styles.dialogPanel(modalContentType)}>
+                  <DialogTitle className={styles.srOnly}>{heading || ariaLabel}</DialogTitle>
+                  {subhead && (
+                    <Description className={styles.srOnly}>{subhead}</Description>
+                  )}
+                  <div ref={panelRef} className={styles.contentWrapper(modalContentType, isVerticalCard)}>
+                    <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>
+                    {/* Content for modals with text+image, fullwidth image or text only */}
+                    {(modalContentType !== 'component' && modalContentType !== 'image-quote') && (
+                      <Grid xl={modalContentType === 'text-image' && !isVerticalCard ? 12 : 1} className={styles.grid}>
+                        {(modalContentType === 'text-image' || modalContentType === 'text') && (
+                          <div className={styles.textWrapper(isVerticalCard)}>
+                            {(heading || subhead) && (
+                              <div className={styles.header}>
+                                {heading &&
+                                  <Heading size={3} className={styles.heading}>{heading}</Heading>
+                                }
+                                {subhead &&
+                                  <Text weight="semibold" className={styles.subhead}>{subhead}</Text>
+                                }
+                              </div>
+                            )}
+                            {DescriptionRichText}
+                          </div>
+                        )}
+                        {(modalContentType === 'fullwidth-image' || modalContentType === 'text-image') && filename && (
+                          <figure className={styles.figure(isVerticalCard)}>
+                            <picture>
+                              <source
+                                src={getProcessedImage(filename, '1500x750', focus)}
+                                media="(min-width: 1200px)"
+                              />
+                              <source
+                                src={getProcessedImage(filename, '1200x600', focus)}
+                                media="(min-width: 992px)"
+                              />
+                              <source
+                                media="(min-width: 576x)"
+                                src={getProcessedImage(filename, '1000x500', focus)}
+                              />
+                              <source
+                                media="(max-width: 575px)"
+                                src={getProcessedImage(filename, '600x300', focus)}
+                              />
+                              <img
+                                alt={alt || ''}
+                                src={getProcessedImage(filename, '1500x750', focus)}
+                                className={styles.image}
+                                width="1500"
+                                height="750"
+                              />
+                            </picture>
+                            {hasRichText(caption) && (
+                              <figcaption className={styles.figcaption}>
+                                {Caption}
+                              </figcaption>
+                            )}
+                          </figure>
+                        )}
+                      </Grid>
+                    )}
+                    {(modalContentType === 'component' || modalContentType === 'image-quote') && !!getNumBloks(content) && (
+                      <div className={styles.nestedComponentWrapper(modalContentType)}>
+                        <CreateBloks blokSection={content} />
+                      </div>
+                    )}
+                  </div>
+                </DialogPanel>
+              </div>
+            </TransitionChild>
+          </Dialog>
+        </Transition>
+      </>
+  );
+};

components/AnnotatedImage/index.ts

@@ -0,0 +1 @@
+export * from './AnnotatedImage';

components/Quote/Quote.styles.ts

@@ -1,24 +1,30 @@
 import { cnb } from 'cnbuilder';
 
+export const verticalAlignments = {
+  top: 'justify-start',
+  center: 'justify-center',
+  bottom: 'justify-end',
+};
+export type QuoteVerticalAlignType = keyof typeof verticalAlignments;
+
 export const root = (
-  isMinimal?: boolean,
-  addDarkOverlay?: boolean,
-  quoteOnRight?: boolean,
-  hasBar?: boolean,
-) => cnb('relative break-words flex flex-col lg:max-w-prose lg:ml-0', {
-  'max-w-[90%] sm:max-w-4/5 mx-auto md:max-w-full': isMinimal && !addDarkOverlay,
-  'bg-gc-black/50 backdrop-blur-sm h-full *:mt-auto *:mb-0 text-white': addDarkOverlay && !isMinimal,
+  isMinimal: boolean,
+  addDarkOverlay: boolean,
+  quoteOnRight: boolean,
+  hasBar: boolean,
+) => cnb('relative break-words flex flex-col lg:max-w-prose-wide lg:ml-0', {
+  'max-w-[90%] sm:max-w-4/5 mx-auto md:max-w-full h-full': isMinimal && !addDarkOverlay,
+  'bg-gc-black/50 backdrop-blur-sm h-full *:mb-0 text-white': addDarkOverlay && !isMinimal,
   'rs-pl-4': !quoteOnRight && (!isMinimal || addDarkOverlay),
   'rs-pr-4': quoteOnRight && (!isMinimal || addDarkOverlay),
   'rs-px-4': addDarkOverlay && !hasBar,
 });
-export const content = (hasBar?: boolean, quoteOnRight?: boolean) => cnb('', {
-  '' : !hasBar,
+export const content = (hasBar: boolean, quoteOnRight: boolean) => cnb({
   'border-r-[1.4rem] 2xl:border-r-[2rem] rs-pr-2' : hasBar && !quoteOnRight,
   'border-l-[1.4rem] 2xl:border-l-[2rem] rs-pl-2' : hasBar && quoteOnRight,
 });
 export const teaserWrapper = 'w-fit gap-9';
-export const quoteMark = (isLargeTeaser?: boolean) => cnb('shrink-0 leading-[0]', {
+export const quoteMark = (isLargeTeaser: boolean) => cnb('shrink-0 leading-[0]', {
   'text-[clamp(16rem,7.46vw+13.31rem,26rem)] mt-[clamp(5.7rem,2.61vw+4.76rem,9.2rem)]': !isLargeTeaser,
   'text-[clamp(17rem,11.19vw+12.97rem,32rem)] mt-[clamp(6rem,4.03vw+4.55rem,11.4rem)]': isLargeTeaser,
 });

components/Quote/Quote.tsx

@@ -24,6 +24,7 @@ export type QuoteProps = React.HTMLAttributes<HTMLDivElement> & {
   barColor?: AccentBorderColorType;
   quoteColor?: AccentTextColorType;
   quoteOnRight?: boolean;
+  verticalAlign?: styles.QuoteVerticalAlignType;
   animation?: AnimationType;
   delay?: number;
 };
@@ -39,6 +40,7 @@ export const Quote = ({
   quoteColor,
   barColor,
   quoteOnRight,
+  verticalAlign = 'bottom',
   animation = 'slideUp',
   delay,
   children,
@@ -49,9 +51,12 @@ export const Quote = ({
   return (<AnimateInView animation={animation} delay={delay}>
     <Container
       width="full"
-      pt={addDarkOverlay && !isMinimal ? 6 : undefined}
-      pb={addDarkOverlay && !isMinimal ? 4 : undefined}
-      className={cnb(styles.root(isMinimal, addDarkOverlay, quoteOnRight, !!barColor), className)}
+      py={addDarkOverlay && !isMinimal ? 5 : undefined}
+      className={cnb(
+        styles.root(isMinimal, addDarkOverlay, quoteOnRight, !!barColor),
+        styles.verticalAlignments[verticalAlign],
+        className,
+      )}
       {...props}
     >
       <blockquote className={cnb(styles.content(!!barColor, quoteOnRight), accentBorderColors[barColor])}>

components/Quote/index.ts

@@ -1 +1,2 @@
 export * from './Quote';
+export * from './Quote.styles';

components/RichText.tsx

@@ -17,11 +17,14 @@ import {
  * -top-04em (used in BlurryPoster)
  */
 
-export type RichTextBaseFontSizeType = 'default' | 'card' | 'changemaker' | 'changemakerHorizontal';
+export type RichTextBaseFontSizeType = 'default' | 'card' | 'changemaker' | 'changemakerHorizontal' | 'big';
 
 export type RichTextProps = {
   wysiwyg: StoryblokRichtext;
-  // "default" is for main content, e.g., Story body content
+  /**
+   * "default" is for main content, e.g., Story body content
+   * "card" is for card typed content where heading sizes are all type-1
+   */
   type?: 'default' | 'card';
   baseFontSize?: RichTextBaseFontSizeType;
   textColor?: 'black' | 'white' | 'black-70';

components/StoryImage/StoryImage.styles.ts

@@ -76,7 +76,7 @@ export type CaptionBgColorType = keyof typeof captionBgColors;
 export const root = (isFullHeight?: boolean) => cnb(isFullHeight ? 'h-full' : '');
 export const animateWrapper = (isFullHeight?: boolean) => cnb(isFullHeight ? 'h-full' : '');
 export const figure = (isFullHeight: boolean) => cnb(isFullHeight ? 'h-full' : '');
-export const imageWrapper = (isFullHeight: boolean, isParallax: boolean) => cnb(
+export const imageWrapper = (isFullHeight: boolean, isParallax: boolean) => cnb('relative',
   isFullHeight ? 'h-full' : '',
   isParallax ? 'overflow-hidden' : '',
 );