Def

import { SPACE_DEFAULTS } from '@hanzo/ui/blocks'

Types

export interface Block {
  blockType: string
}

export interface ElementBlock extends Block {
  blockType: 'element'
  element: ReactNode
}

export interface HeadingBlock extends Block {
  blockType: 'heading'
  heading: string
  byline?: string
  level?: number
  bylineLevel?: number
  spaceBetween?: number
  spaceAfter?: number
}

export interface EnhHeadingBlock extends Block {
  blockType: 'enh-heading'
  specifiers?: string
  /** A node, or a url string to an asset. */
  icon?: ReactNode
  /** Sizes the icon when it is given as a url. */
  iconSize?: number
  preheading?: { text: string; level?: number; mb?: number }
  heading: { text: string; level?: number; mb?: number }
  byline?: { text: string; level?: number }
}

export interface ImageBlock extends Block, ImageDef {
  blockType: 'image'
  /**
   * `left` (default) / `right` / `center` (needs a column parent).
   * `mobile-no-scale` — by default an image scales to 3/4 height below `md`.
   * `mobile-full-width` — overrides dim and fills the width, keeping the ratio.
   */
  specifiers?: string
  /** @deprecated Use `mobile-full-width` in specifiers. */
  fullWidthOnMobile?: boolean
  props?: {
    sizes?: string
    /** When true, alignment specifiers are ignored. */
    fill?: boolean
    style?: React.CSSProperties
  }
}

export interface VideoBlock extends VideoDef {
  blockType: 'video'
}

export type SpaceUnit = number

export type HeadingLevel = 0 | 1 | 2 | 3 | 4 | 5 | 6

export interface SpaceBlock extends Block {
  blockType: 'space'
  /**
   * Vertical space in spacing units, per rung and merged over SPACE_DEFAULTS —
   * or one number to use at every rung.
   */
  sizes?: { [k in Breakpoint]?: SpaceUnit } | SpaceUnit
  /**
   * The space the matching heading tag WOULD occupy, as `<ApplyTypography>`
   * renders it, plus any gap. 0 is 1rem. Default 3.
   */
  level?: HeadingLevel
  test?: boolean
}

export interface GroupBlock extends Block {
  blockType: 'group'
  specifiers?: string
  elements: Block[]
}

export interface GridBlock extends Block {
  blockType: 'grid'
  specifiers?: string
  grid: GridDef
  /** Ignored when children are passed to the component instead. */
  cells?: Block[]
}

export interface AccordianBlock extends Block {
  blockType: 'accordian'
  items: { trigger: string; content: ReactNode }[]
}

export interface BulletCardsBlock extends Block {
  blockType: 'bullet-cards'
  /** `no-card-border` · `mobile-small-text` · `borders-muted-1|3` (default 2). */
  specifiers?: string
  grid: GridDef
  cards: BulletItem[]
  /** In px. */
  iconSize?: number
}

export interface CTABlock extends Block {
  blockType: 'cta'
  specifiers?: string
  elements: (LinkDef | ButtonDef)[]
}

export interface CardBlock extends Block {
  blockType: 'card'
  /** e.g. `media-left`, `appear-disabled`, `no-borders` — combinable. */
  specifiers?: string
  title?: string
  byline?: string
  /** For the title area. */
  icon?: ReactNode
  iconAfter?: boolean
  media?: ImageBlock | VideoBlock
  content?: ReactNode
  cta?: CTABlock
}

export interface CarteBlancheBlock extends Block {
  blockType: 'carte-blanche'
  specifiers?: string
  topContent?: Block[]
  heading?: EnhHeadingBlock
  content?: Block[]
  cta?: CTABlock
}

export interface ScreenfulBlock extends Block {
  blockType: 'screenful'
  /** An image url, or a video. */
  banner?: string | VideoBlock
  /** Layout hints for the block as a whole. */
  specifiers?: string
  /** Layout hints for the matching column. */
  columnSpecifiers?: string[]
  /**
   * The order columns appear in once stacked on a phone, overriding their
   * written order — e.g. `[1, 0, 2]` puts the second of three on top.
   */
  mobileOrder?: number[]
  /** Content per column. More than three is allowed but rarely readable. */
  contentColumns: Block[][]
  footer?: ReactNode
  /** For linking to this screenful. */
  anchorId?: string
}

Exports