react-life-design/stories/Modal.stories.tsx

import * as React from 'react';
import { storiesOf } from '@storybook/react';
import styled from 'styled-components';

import { GlobalStyle, Title, Text, Modal, Button } from '../src';

const Wrapper = styled.div`
  position: relative;
`;

class ModalToggle extends React.Component {
  state = {
    active: false,
  }

  render = () => (
    <React.Fragment>
      <Button
        onClick={() => this.setState({ active: true })}
        type='button'
        isType='confirm'
      >Toggle modal
      </Button>
      <div id='modal'> <Title.H2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut luctus turpis. Nullam efficitur justo nunc, eget pellentesque lacus aliquam et. Suspendisse eleifend et felis et finibus. Quisque tristique at sapien ac mollis. Fusce nunc libero, euismod dictum libero ac, suscipit ullamcorper nunc. Suspendisse potenti. Phasellus eget lacus felis. Proin blandit nisi at tellus lobortis, sit amet rhoncus mi tincidunt. Vestibulum velit nulla, gravida nec interdum et, porttitor at elit. Sed in pellentesque nulla, nec malesuada orci. Mauris eleifend eget neque id sollicitudin.</Title.H2></div>
      <Modal
        selector='#modal'
        active={this.state.active}
        onClose={(active) => this.setState({ active })}
        {...this.props}
      />
    </React.Fragment>
  )
}

storiesOf('Modal', module)
  .add('Default', () => (
    <React.Fragment>
      <GlobalStyle />
      
      <Title.H2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut luctus turpis. Nullam efficitur justo nunc, eget pellentesque lacus aliquam et. Suspendisse eleifend et felis et finibus. Quisque tristique at sapien ac mollis. Fusce nunc libero, euismod dictum libero ac, suscipit ullamcorper nunc. Suspendisse potenti. Phasellus eget lacus felis. Proin blandit nisi at tellus lobortis, sit amet rhoncus mi tincidunt. Vestibulum velit nulla, gravida nec interdum et, porttitor at elit. Sed in pellentesque nulla, nec malesuada orci. Mauris eleifend eget neque id sollicitudin.

Cras laoreet nulla et leo commodo blandit. Proin ac egestas odio. Aenean convallis, tortor at fringilla semper, quam arcu facilisis lorem, id laoreet turpis lorem eu nisi. Ut nisi urna, pretium vel turpis porttitor, elementum molestie lectus. Aenean ut feugiat nibh. Praesent vel enim odio. Ut eleifend est sed dolor dignissim, non dictum nunc condimentum. Aliquam maximus congue ultricies. Sed elementum pellentesque elit, vel vestibulum odio faucibus at. Phasellus consequat orci quis dictum mattis. Sed iaculis tellus nibh, eu eleifend erat vulputate in. Mauris urna augue, aliquet vel dolor a, maximus eleifend ante. Sed at nisi pulvinar, rutrum nulla a, feugiat ipsum. Donec id sem non nulla aliquet facilisis.</Title.H2>
<Title.H2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut luctus turpis. Nullam efficitur justo nunc, eget pellentesque lacus aliquam et. Suspendisse eleifend et felis et finibus. Quisque tristique at sapien ac mollis. Fusce nunc libero, euismod dictum libero ac, suscipit ullamcorper nunc. Suspendisse potenti. Phasellus eget lacus felis. Proin blandit nisi at tellus lobortis, sit amet rhoncus mi tincidunt. Vestibulum velit nulla, gravida nec interdum et, porttitor at elit. Sed in pellentesque nulla, nec malesuada orci. Mauris eleifend eget neque id sollicitudin.

Cras laoreet nulla et leo commodo blandit. Proin ac egestas odio. Aenean convallis, tortor at fringilla semper, quam arcu facilisis lorem, id laoreet turpis lorem eu nisi. Ut nisi urna, pretium vel turpis porttitor, elementum molestie lectus. Aenean ut feugiat nibh. Praesent vel enim odio. Ut eleifend est sed dolor dignissim, non dictum nunc condimentum. Aliquam maximus congue ultricies. Sed elementum pellentesque elit, vel vestibulum odio faucibus at. Phasellus consequat orci quis dictum mattis. Sed iaculis tellus nibh, eu eleifend erat vulputate in. Mauris urna augue, aliquet vel dolor a, maximus eleifend ante. Sed at nisi pulvinar, rutrum nulla a, feugiat ipsum. Donec id sem non nulla aliquet facilisis.</Title.H2>
      <Wrapper>
        <ModalToggle onConfirm={() => console.log('nois')}>
        <Title.H2 fontDimension={41} margin={`0 0 41px;`}>Sustentabilidade</Title.H2>
          <Text.P>
            Acreditamos que a forma de conduzir os negócios é o que torna uma empresa parceira e corresponsável pelo desenvolvimento sustentável e baseamos nossa atuação nos Princípios para Sustentabilidade em Seguros.
          </Text.P>
          <Text.P>
          Configure o Ciclo de Gente de maneira muito fácil em apenas três etapas.
Inicie selecionando o período do ciclo através de uma data inicial e uma data final.

Ao iniciar a etapa da Reunião de Gente, o líder deve realizar um feedback com seus liderados.
Os colaboradores devem preencher/atualizar seu perfil até a data limite estabelecida abaixo.
Configure o Ciclo de Gente de maneira muito fácil em apenas três etapas.
Inicie selecionando o período do ciclo através de uma data inicial e uma data final.

Ao iniciar a etapa da Reunião de Gente, o líder deve realizar um feedback com seus liderados.
Os colaboradores devem preencher/atualizar seu perfil até a data limite estabelecida abaixo.
Configure o Ciclo de Gente de maneira muito fácil em apenas três etapas.
Inicie selecionando o período do ciclo através de uma data inicial e uma data final.

          </Text.P>
        </ModalToggle>
      </Wrapper>
    </React.Fragment>
  ))
  .add('full', () => (
    <React.Fragment>
      <GlobalStyle />
      <Wrapper>
        <ModalToggle type='full' onConfirm={() => console.log('nois')} onConfirmText='console'>
          <Title.H2 fontDimension={41} margin={`0 0 41px;`}>Sustentabilidade</Title.H2>
          <Text.P>
            Acreditamos que a forma de conduzir os negócios é o que torna uma empresa parceira e corresponsável pelo desenvolvimento sustentável e baseamos nossa atuação nos Princípios para Sustentabilidade em Seguros.
          </Text.P>
          <Text.P>
          Configure o Ciclo de Gente de maneira muito fácil em apenas três etapas.
Inicie selecionando o período do ciclo através de uma data inicial e uma data final.

Ao iniciar a etapa da Reunião de Gente, o líder deve realizar um feedback com seus liderados.
Os colaboradores devem preencher/atualizar seu perfil até a data limite estabelecida abaixo.
Configure o Ciclo de Gente de maneira muito fácil em apenas três etapas.
Inicie selecionando o período do ciclo através de uma data inicial e uma data final.

Ao iniciar a etapa da Reunião de Gente, o líder deve realizar um feedback com seus liderados.
Os colaboradores devem preencher/atualizar seu perfil até a data limite estabelecida abaixo.
Configure o Ciclo de Gente de maneira muito fácil em apenas três etapas.
Inicie selecionando o período do ciclo através de uma data inicial e uma data final.

          </Text.P>
        </ModalToggle>
      </Wrapper>
    </React.Fragment>
  ))
  .add('small', () => (
    <React.Fragment>
      <GlobalStyle />
      <Wrapper>
        <ModalToggle type='small' onConfirm={() => console.log('nois')} onConfirmText='console'>
          <Title.H2 fontDimension={25} margin={`0 0 41px;`}>TESTAR API</Title.H2>
          <Text.P>
            Você precisa de autorização para testar esta API.<br />
            Por favor faça a autorização antes de executar o teste.
          </Text.P>
        </ModalToggle>
      </Wrapper>
    </React.Fragment>
  ));