index.jade

import SimpleCards from './simple-cards.jade'

label overwrite
input(onChange=this.onChange.bind(null, 'overwrite') defaultValue=state.overwrite)
label frozen
input(onChange=this.onChange.bind(null, 'frozen') defaultValue=state.frozen)
json= state

SimpleCards
SimpleCards&props(state)
SimpleCards&props(state)
SimpleCards#FOUR
SimpleCards#FIVE

export.
  function onChange(key, ev) {
    var val = ev.target.value;
    this.setState({[key]: val !== 'false'});
  }

export var displayName = 'Test'

simple-card.jade

var age = props.age
var name = props.name
var classFn = this.castCreate()

div(class=classFn())
  div(class=classFn('&-age', {old: props.age > 50}) disabled=true)= props.age
  div(class=classFn('&-name'))= name

export var displayName = 'SimpleCard'

simple-cards.jade

import SimpleCard from './simple-card.jade'

var classFn = this.castCreate()

var opts = {}
- if (props.overwrite) opts.overwrite = true;
- if (props.frozen) opts.frozen = true;

div(class=classFn())
  SimpleCard(age=27 name='mike')
  SimpleCard(id='Bob' age=27 name='bob' classes={'&-age-is-not-old': '&-age-OVERRIDEN'} castOptions=opts)
  SimpleCard(id='Jimbo' age=55 name='jimbo' castOptions=opts)
  SimpleCard(id='Bill' age=100 name='bill' classes={'BILL-age': '&-SSS', '&-SSS-not-old': '&-FFF'} castOptions=opts)
  SimpleCard#AAAA(age=28 name='paul' classes={'&-age': '&-YOUUUUNG'} castOptions=opts)

export var displayName = 'SimpleCards'