BIO Component Standard

1. The Document Level Component

Required Props

meta

<DocumentStyled meta={props.meta} ... >

dna

<DocumentStyled ... dna={props.dna} ... >

own

<DocumentStyled ... own={{global: props.global}} ... >

Child Components

<Layer />

import Layer from './Layer'

<DocumentStyled meta={props.meta} dna={props.dna} own={{global: props.global}}>
    <Layer id="layout">{this.props.children}</Layer>
    <Layer id="modal" modals={{}} />
    <Layer id="notification" notifications={{}} />
    <Layer id="dom" />
</DocumentStyled>

2. The Composition Level Component

Coming soon...

3. The Layout Level Component

Required Props

meta

<MyLayoutStyled meta={props.meta} ... >

Child Components

<Region />

import Region from '../Region'
import MainLayout from './MainLayout'

<CustomLayoutStyled meta={props.meta} dna={props.dna}>
    <Region meta={props.meta} region="header">
        Header
    </Region>
    <Region meta={props.meta} region="sidebar-left">
        Sidebar Left
    </Region>
    <Region meta={props.meta} region="main">
        <MainLayout />
    </Region>
    <Region meta={props.meta} region="sidebar-right">
        Sidebar Right
    </Region>
    <Region meta={props.meta} region="footer">
        Footer
    </Region>
</MyLayoutStyled>

4. The Block Level Component

Coming soon...

5. The Cell Level Component

Coming soon...

6. The Element Level Component

Coming soon...