HoverCard

import type { ComponentProps } from 'react';
import { Button } from '@mildang/design-system/Button';
import { HoverCard } from '@mildang/design-system/HoverCard';

export type HoverCardExampleProps = Pick<ComponentProps<typeof HoverCard>, 'type' | 'hideArrow'>;

export default function HoverCardExample({ type = 'standard', hideArrow = false }: HoverCardExampleProps) {
  return (
    <HoverCard
      type={type}
      hideArrow={hideArrow}
      content={<div>호버 시 노출되는 부가 정보 카드입니다.</div>}
      ContentProps={{ 'aria-label': 'Default HoverCard' }}
    >
      <Button variant="tertiary">Hover me</Button>
    </HoverCard>
  );
}

import { Button } from '@mildang/design-system/Button';
import { HoverCard } from '@mildang/design-system/HoverCard';
import { css } from '@mildang/styled-system/css';

const LONG_TEXT =
  '이 텍스트는 maxWidth 한계에서 줄바꿈이 일어나는지 확인하기 위한 두세 줄 길이의 본문입니다.';

export default function HoverCardTypeExample() {
  return (
    <div className={css({ display: 'flex', flexDirection: 'column', gap: '16px', alignItems: 'flex-start' })}>
      <HoverCard
        type="standard"
        content={<div>짧은 콘텐츠 (standard 312px)</div>}
        ContentProps={{ side: 'right', 'aria-label': 'Standard 짧은 콘텐츠' }}
      >
        <Button variant="tertiary">standard (312px)</Button>
      </HoverCard>
      <HoverCard
        type="standard"
        content={<div>{LONG_TEXT}</div>}
        ContentProps={{ side: 'right', 'aria-label': 'Standard 긴 콘텐츠' }}
      >
        <Button variant="tertiary">standard — 긴 콘텐츠</Button>
      </HoverCard>
      <HoverCard
        type="custom"
        maxWidth="500px"
        content={<div>짧은 콘텐츠 (custom maxWidth 500px)</div>}
        ContentProps={{ side: 'right', 'aria-label': 'Custom 짧은 콘텐츠' }}
      >
        <Button variant="tertiary">custom (maxWidth 500)</Button>
      </HoverCard>
      <HoverCard
        type="custom"
        maxWidth="500px"
        content={<div>{LONG_TEXT}</div>}
        ContentProps={{ side: 'right', 'aria-label': 'Custom 긴 콘텐츠' }}
      >
        <Button variant="tertiary">custom (maxWidth 500) — 긴 콘텐츠</Button>
      </HoverCard>
    </div>
  );
}

import { Button } from '@mildang/design-system/Button';
import { HoverCard } from '@mildang/design-system/HoverCard';
import { css } from '@mildang/styled-system/css';

const POSITIONS = [
  { key: 'top-start', label: 'TOP-START', side: 'top', align: 'start', gridColumn: 1, gridRow: 1 },
  { key: 'top', label: 'TOP', side: 'top', align: 'center', gridColumn: 2, gridRow: 1 },
  { key: 'top-end', label: 'TOP-END', side: 'top', align: 'end', gridColumn: 3, gridRow: 1 },
  { key: 'left-start', label: 'LEFT-START', side: 'left', align: 'start', gridColumn: 1, gridRow: 3 },
  { key: 'left', label: 'LEFT', side: 'left', align: 'center', gridColumn: 1, gridRow: 5 },
  { key: 'left-end', label: 'LEFT-END', side: 'left', align: 'end', gridColumn: 1, gridRow: 7 },
  { key: 'right-start', label: 'RIGHT-START', side: 'right', align: 'start', gridColumn: 3, gridRow: 3 },
  { key: 'right', label: 'RIGHT', side: 'right', align: 'center', gridColumn: 3, gridRow: 5 },
  { key: 'right-end', label: 'RIGHT-END', side: 'right', align: 'end', gridColumn: 3, gridRow: 7 },
  { key: 'bottom-start', label: 'BOTTOM-START', side: 'bottom', align: 'start', gridColumn: 1, gridRow: 9 },
  { key: 'bottom', label: 'BOTTOM', side: 'bottom', align: 'center', gridColumn: 2, gridRow: 9 },
  { key: 'bottom-end', label: 'BOTTOM-END', side: 'bottom', align: 'end', gridColumn: 3, gridRow: 9 },
] as const;

export default function HoverCardPositionExample() {
  return (
    <div
      className={css({
        position: 'relative',
        width: '1200px',
        padding: '100px',
        display: 'grid',
        gridTemplateColumns: '1fr 1fr 1fr',
        gridTemplateRows: 'auto 16px auto 120px auto 120px auto 16px auto',
        columnGap: '16px',
      })}
    >
      {POSITIONS.map(({ key, label, side, align, gridColumn, gridRow }) => (
        <div key={key} style={{ gridColumn, gridRow }}>
          <HoverCard
            content={<div className={css({ width: '250px' })}>{label} 위치 HoverCard</div>}
            ContentProps={{
              side,
              align,
              'aria-label': `${label} HoverCard`,
            }}
          >
            <Button variant="tertiary">{label}</Button>
          </HoverCard>
        </div>
      ))}
    </div>
  );
}