import { type ForwardRefRenderFunction, type HTMLAttributes, type ReactNode, forwardRef, } from 'react'; import { Button, Icon } from '../../../atoms'; import styles from './modal.module.scss'; export type ModalProps = HTMLAttributes & { /** * The modal body. */ children: ReactNode; /** * The close button label. */ closeBtnLabel?: string; /** * The modal title. */ heading?: ReactNode; /** * Define an icon to illustrate the modal. */ icon?: ReactNode; /** * The modal kind. * * @default 'primary' */ kind?: 'primary' | 'secondary'; /** * A callback function to handle close button action. */ onClose?: () => void; }; const ModalWithRef: ForwardRefRenderFunction = ( { children, className = '', closeBtnLabel, heading, icon, kind = 'primary', onClose, ...props }, ref ) => { const hasHeader = !!heading || !!icon || !!closeBtnLabel; const modalClass = [ styles.modal, styles[hasHeader ? 'modal--has-header' : ''], styles[closeBtnLabel ? 'modal--has-btn' : ''], styles[`modal--${kind}`], className, ].join(' '); return (
{hasHeader ? (
{icon ? (
{icon}
) : null} {heading ?
{heading}
: null} {closeBtnLabel ? ( ) : null}
) : null} {children}
); }; /** * Modal component * * Render a modal component. */ export const Modal = forwardRef(ModalWithRef); oggle.test.tsx'>
path: root/src/components/molecules/forms/prism-theme-toggle.test.tsx
blob: 0dceb92bbe56974986161e126039c938847a6dc2 (plain) 
1
2
3
4
5
6
7
8
9
10
11
12
13

import { render, screen } from '@test-utils';
import PrismThemeToggle from './prism-theme-toggle';

describe('PrismThemeToggle', () => {
  it('renders a checked toggle (dark theme choice)', () => {
    render(<PrismThemeToggle value={true} />);
    expect(
      screen.getByRole('checkbox', {
        name: `Code blocks: Light theme Dark theme`,
      })
    ).toBeChecked();
  });
});