Modal

The Modal component is designed to display content overlaying the main application interface. It supports dynamically loading content and can include both media assets and block content.

Example

Preview

Code

import { useContext } from 'react';
import { ModalCtaContext } from './modal-cta';
import {
  Modal,
  ModalBody,
  ModalContent,
  ModalHeader,
  ModalLoading,
  ModalSubcopy,
  ModalTextBlock,
  ModalMediaBlock,
} from '@hv/ui/modal';
import { GridContent } from '@hv/ui/grid';
import { Scroll } from '@hv/ui/scroll';
import { mockUseRenderedContent, renderContent } from './modal-cta';

export default function ModalExample(modal, closeTitle = 'close') {
  const { isOpen, onOpenChange } = useContext(ModalCtaContext);
  const { content, isLoading } = mockUseRenderedContent(
    renderContent,
    modal.contentIds
  );
  
  return (
    <Modal open={isOpen} onOpenChange={onOpenChange}>
      <ModalContent
        title={modal.ariaLabel}
        closeTitle={closeTitle}
        textColor={modal?.textColor}
        backgroundColor={modal?.backgroundColor}
      >
        <Scroll shadow={false} className='max-h-[60vh]'>
          {isLoading ? (
            <ModalLoading />
          ) : (
            <>
              <ModalBody>
                <ModalTextBlock>
                  <ModalHeader
                    position={modal?.headerPosition}
                    {...modal.header}
                  />
                  {modal?.subcopy && (
                    <ModalSubcopy
                      position={modal?.subcopyPosition}
                      {...modal.subcopy}
                    />
                  )}
                </ModalTextBlock>
              </ModalBody>
            </>
          )}
          {modal?.mediaAssets && modal.mediaAssets.length > 0 && (
            <GridContent
              className='my-5 w-full'
              gap='medium'
              sm='1'
              md='2'
              lg={modal.mediaAssets.length > 1 ? '2' : '1'}
            >
              {modal.mediaAssets.map((media, i) => (
                <ModalMediaBlock key={`${i}-${media.id}`}>
                  <img
                    src={`/img/${media.src}`}
                    alt='Mock Media Card'
                    className='absolute inset-0 h-full w-full object-cover'
                  />
                </ModalMediaBlock>
              ))}
            </GridContent>
          )}
          {content}
        </Scroll>
      </ModalContent>
    </Modal>
  );
}

Variants

Use theicon above to preview

Field	Description	Values
header	The main header text displayed at the top of the modal.	String
subcopy	Optional subheading or description text below the header.	String
headerPosition	Defines the alignment of the header.	left right center
subcopyPosition	Defines the alignment of the subcopy.	left right center
backgroundColor	The color of the background.	String
textColor	The color of the text.	String
mediaAssets	Array of media assets (images, videos) displayed in a responsive grid layout within the modal.	Array of media objects
contentIds	Array of content IDs for lazy loading additional dynamic content within the modal.	Array of strings

Use theicon above to preview different text alignments and layouts.

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides. Class overrides can be applied to all sub-components.