Neos Atomic.Fusion example atom and molecule

Root.fusion

prototype(Onedrop.Demo:Atom.Button) < prototype(PackageFactory.AtomicFusion:Component) {
    text = ''
    type = 'default'
    size = ''

    renderer = Neos.Fusion:Tag {
        tagName = 'button'
        attributes.class = PackageFactory.AtomicFusion:ClassNames {
            btn = true
            btn-default = ${props.type == 'default'}
            btn-primary = ${props.type == 'primary'}
            btn-secondary = ${props.type == 'secondary'}
            btn-lg = ${props.size == 'large'}
            btn-sm = ${props.size == 'small'}
        }
        content = ${props.text}
    }
}

prototype(Onedrop.Demo:Atom.Headline) < prototype(PackageFactory.AtomicFusion:Component) {
    text = ''
    level = 1
    level.@process.lowerBoundary = ${(value < 1 ? 1 : value)}
    level.@process.upperBoundary = ${(value > 6 ? 6 : value)}
    fancy = false

    renderer = Neos.Fusion:Tag {
        attributes.class = PackageFactory.AtomicFusion:ClassNames {
            headline = true
            headline--default = ${props.fancy == false}
            headline--fancy = ${props.fancy == true}
        }
        content = Neos.Fusion:Tag {
            tagName = ${'h' + props.level}
            content = ${props.text}
        }
    }
}

prototype(Onedrop.Demo:Molecule.HeadlineButton) < prototype(PackageFactory.AtomicFusion:Component) {
    headline = Neos.Fusion:RawArray {
        text = ''
        level = 1
        fancy = false
    }
    button = Neos.Fusion:RawArray {
        text = ''
        type = 'default'
        size = ''
    }
    renderer = Neos.Fusion:Array {
        headline = Onedrop.Demo:Atom.Headline {
            text = ${props.headline.text}
            level = ${props.headline.level}
            fancy = ${props.headline.fancy}
        }
        button = Onedrop.Demo:Atom.Button {
            text = ${props.button.text}
            type = ${props.button.type}
            size = ${props.button.size}
        }
    }
}

prototype(Onedrop.Demo:Editable) < prototype(Neos.Fusion:Tag) {
    tagName = 'span'
    property = 'text'
    @context.property = ${this.property}
    content = ${q(node).property(property)}
    @process.contentElementEditable = Neos.Neos:ContentElementEditable
}


prototype(Onedrop.Demo:HeadlineButton) < prototype(Neos.Fusion:Renderer) {
    node = ${node}
    renderer = Onedrop.Demo:Molecule.HeadlineButton {
        headline.text = Onedrop.Demo:Editable {
            property  = 'headlineText'
        }
        headline.level = ${q(node).property('headlineLevel')}
        headline.fancy = ${q(node).property('headlineFancy')}
        button.text = Onedrop.Demo:Editable {
            property  = 'buttonText'
        }
        button.type = ${q(node).property('buttonType')}
        button.size = ${q(node).property('buttonSize')}
    }
    @process.contentElementWrapping {
        expression = Neos.Neos:ContentElementWrapping
        @position = 'end 999999999'
    }
}