Teacup Component Demo

teacup_component_demo.coffee

{render, component, div, button, label, span, text} = require 'teacup'
{prettyPrint} = require 'html'

html = render ->





  # You can do this. Whether you should do this is up to you.







  # Instantiating components with additional classnames

  caption = component (selector, attrs, renderContents) ->
    div "#{selector}.caption", renderContents

  caption '.photo-caption', -> text "A bird"







  ###
  # Passing arguments to a component:

  alert = component (selector, attrs, renderContents) ->
    levelSelector = if attrs?.level then ".alert-#{attrs.level}" else ""
    div "#{levelSelector}", renderContents

  alert level: 'warning', 'Excuse me, I believe you have my stapler.'






  # Component arguments and HTML attributes together

  iconButton = component (selector, attributes, renderContents) ->
    {iconName} = attributes
    delete attributes.iconName

    div ".icon-button#{selector}", attributes, ->
      div ".icon.icon-#{iconName}"
      label renderContents

  iconButton '.basket-button',
    'iconName': 'basket'
    'rv-basket-button-click': 'goToBasket'
  , ->
      span '.basket-button__extra-words', 'Your '
      text 'Basket'


  # Question: do we want an HTML attribute whitelist, so this
  # happens automatically?
  #
  # The component function signature would then be:
  #   (selector, options, htmlAttributes, renderContents) ->
  # ?







  # Yielding a child component to the contents function

  modal = component (selector, attrs, renderContents) ->
    id = "#modal-#{Math.random().toString().split('.')[1]}"

    closeButton = ->
      button 'Close', onclick: "$('#{id}').hide()"

    div "#{id}.modal", ->
      renderContents({closeButton})

  modal ({closeButton}) ->
    text 'close me: '
    closeButton()


  # Question: Do we like this pattern? Should everything be
  # moved out to the root scope and be wired up separately?

  modal = component ->
  modalCloseButton = component ->
  modal ->
    modalCloseButton()

  # ... but that means the modal and the close button have to
  # be wired up independently. Allowing the modal to own its
  # children provides a centralized place










  # Question: Do we want to use teacup components for all of our styleguide
  # components instead of just giving example HTML? i.e.:
  #
  #     narrowSidebarPage ({body, sidebar}) ->
  #       body ->
  #         div '.display-1-example', 'Hello World'
  #         div '.body-1-example', 'This is a narrow page indeed. It could contain anything. A bird. A book. A bathtub. A breakfast sandwich. A brusque Bolshevik.'            
  #       sidebar ->
  #         div '.label-2-example', 'Over here is more'
  #         div '.body-1-example', '... than you could ever have imagined.'
  #
  #  vs
  #
  #     div '.narrow-sidebar-page', ->
  #       div '.narrow-sidebar-page__body', ->
  #         div '.display-1-example', 'Hello World'
  #         div '.body-1-example', 'This is a narrow page indeed. It could contain anything. A bird. A book. A bathtub. A breakfast sandwich. A brusque Bolshevik.'            
  #       div '.narrow-sidebar-page__sidebar', ->
  #         div '.label-2-example', 'Over here is more'
  #         div '.body-1-example', '... than you could ever have imagined.'
  #
  ###

console.log "\n#{prettyPrint html}\n"