@hbsis.uikit/react
Version:
Biblioteca ReactJS
240 lines (213 loc) • 10.2 kB
JavaScript
import React, { Component } from 'react'
import { storiesOf } from '@storybook/react'
import { Tabs, TabPane, Layout, Header, Content, Sider, SiderToggle } from 'src'
const stories = storiesOf('Layout', module)
const titleStyle = {
marginLeft: '20px',
display: 'flex',
height: '100%',
alignItems: 'center'
}
const titleSpanStyled = {
fontSize: '18px',
textAlign: 'left',
color: '#2870b2',
marginLeft: '20px',
marginTop: '5px'
}
const BigContent = () => (
` O que é Lorem Ipsum?
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos,
e vem sendo utilizado desde o século XVI, quando um impressor
desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.
Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica,
permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou
decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a
softwares de editoração eletrônica como Aldus PageMaker.
Porque nós o usamos?
É um fato conhecido de todos que um leitor se distrairá com o
conteúdo de texto legível de uma página quando estiver examinando
sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição
normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo
com que ele tenha uma aparência similar a de um texto legível. Muitos softwares de publicação e
editores de páginas na internet agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por
'lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias versões novas surgiram
ao longo dos anos, eventualmente por acidente, e às vezes de propósito (injetando humor, e coisas do gênero).
O que é Lorem Ipsum?
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos,
e vem sendo utilizado desde o século XVI, quando um impressor
desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.
Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica,
permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou
decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a
softwares de editoração eletrônica como Aldus PageMaker.
Porque nós o usamos?
É um fato conhecido de todos que um leitor se distrairá com o
conteúdo de texto legível de uma página quando estiver examinando
sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição
normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo
com que ele tenha uma aparência similar a de um texto legível. Muitos softwares de publicação e
editores de páginas na internet agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por
'lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias versões novas surgiram
ao longo dos anos, eventualmente por acidente, e às vezes de propósito (injetando humor, e coisas do gênero).
O que é Lorem Ipsum?
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos,
e vem sendo utilizado desde o século XVI, quando um impressor
desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.
Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica,
permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou
decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a
softwares de editoração eletrônica como Aldus PageMaker.
Porque nós o usamos?
É um fato conhecido de todos que um leitor se distrairá com o
conteúdo de texto legível de uma página quando estiver examinando
sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição
normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo
com que ele tenha uma aparência similar a de um texto legível. Muitos softwares de publicação e
editores de páginas na internet agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por
'lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias versões novas surgiram
ao longo dos anos, eventualmente por acidente, e às vezes de propósito (injetando humor, e coisas do gênero).
O que é Lorem Ipsum?
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos,
e vem sendo utilizado desde o século XVI, quando um impressor
desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.
Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica,
permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou
decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a
softwares de editoração eletrônica como Aldus PageMaker.
Porque nós o usamos?
É um fato conhecido de todos que um leitor se distrairá com o
conteúdo de texto legível de uma página quando estiver examinando
sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição
normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo
com que ele tenha uma aparência similar a de um texto legível. Muitos softwares de publicação e
editores de páginas na internet agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por
'lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias versões novas surgiram
ao longo dos anos, eventualmente por acidente, e às vezes de propósito (injetando humor, e coisas do gênero).
O que é Lorem Ipsum?
Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos,
e vem sendo utilizado desde o século XVI, quando um impressor
desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.
Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica,
permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou
decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a
softwares de editoração eletrônica como Aldus PageMaker.
Porque nós o usamos?
É um fato conhecido de todos que um leitor se distrairá com o
conteúdo de texto legível de uma página quando estiver examinando
sua diagramação. A vantagem de usar Lorem Ipsum é que ele tem uma distribuição
normal de letras, ao contrário de "Conteúdo aqui, conteúdo aqui", fazendo
com que ele tenha uma aparência similar a de um texto legível. Muitos softwares de publicação e
editores de páginas na internet agora usam Lorem Ipsum como texto-modelo padrão, e uma rápida busca por
'lorem ipsum' mostra vários websites ainda em sua fase de construção. Várias versões novas surgiram
ao longo dos anos, eventualmente por acidente, e às vezes de propósito (injetando humor, e coisas do gênero).`
)
stories.add('basic structure', () => (
<Layout>
<Header>
<div>
<span style={titleSpanStyled}>
Titulo da página
</span>
</div>
</Header>
<Content>
<BigContent />
</Content>
</Layout>
))
stories.add('with sider', () => {
class WithSider extends Component {
state = {
siderOpen: false
}
toggleSider = () => {
this.setState(state => ({
siderOpen: !state.siderOpen
}))
}
hideSider = () => {
this.setState({
siderOpen: false
})
}
render () {
const { siderOpen } = this.state
return (
<Layout>
<Sider visible={siderOpen}>
Sider bar
</Sider>
<Layout>
<Header>
<div style={titleStyle}>
<SiderToggle
active={siderOpen}
onToggle={this.toggleSider}
onClickOutside={this.hideSider} />
<span style={titleSpanStyled}>
Titulo da página
</span>
</div>
</Header>
<Content>
<BigContent />
</Content>
</Layout>
</Layout>
)
}
}
return <WithSider />
})
stories.add('with tabs navigation', () => {
class WithTabs extends Component {
state = {
siderOpen: false
}
toggleSider = () => {
this.setState(state => ({
siderOpen: !state.siderOpen
}))
}
hideSider = () => {
this.setState({
siderOpen: false
})
}
render () {
const { siderOpen } = this.state
return (
<Layout>
<Sider visible={siderOpen}>
Sider
</Sider>
<Layout>
<Header>
<div style={titleStyle}>
<SiderToggle
active={siderOpen}
onToggle={this.toggleSider}
onClickOutside={this.hideSider} />
<span style={titleSpanStyled}>
Titulo da página
</span>
</div>
</Header>
<Content stretch>
<Tabs>
<TabPane active label='Conteudo pequeno'>
<span>Conteudo pequeno</span>
</TabPane>
<TabPane label='Conteudo grande'>
<BigContent />
</TabPane>
</Tabs>
</Content>
</Layout>
</Layout>
)
}
}
return <WithTabs />
})