///|
pub fn BrandBook::render_html_component_catalog(self : BrandBook) -> String {
  let cards : Array[String] = []
  for component in self.components {
    cards.push(component.to_html_card())
  }
  if cards.length() == 0 {
    "
Components
No components defined.
"
  } else {
    "
Components
" +
    cards.join("") +
    "
"
  }
}

///|
pub fn ComponentSpec::to_html_card(self : ComponentSpec) -> String {
  "
" +
  escape_html(self.name) +
  "
" +
  escape_html(self.purpose) +
  "
" +
  "
Anatomy
" +
  html_list(self.anatomy) +
  "
" +
  "
States
" +
  html_list(self.states) +
  "
"
}

///|
pub fn ComponentSpec::to_html_state_list(self : ComponentSpec) -> String {
  "
" + html_list(self.states) + "
"
}

///|
pub fn BrandBook::render_html_voice_panel(self : BrandBook) -> String {
  "
Voice
" +
  escape_html(self.voice.tone) +
  "
" +
  html_list(self.voice.writing_principles) +
  "
"
}