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

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

import { AlertFlag, Title, Colors, Text, Icons } from '../src';

const Label = styled.p``;

storiesOf('AlertFlag', module)
  .add('Default', () => (
    <AlertFlag active onClose={console.log}>
      Opção recomendada a portadores de Daltonismo Dicromático Tritaponia ou Tricomático Tritanomalia
    </AlertFlag>
  ))
  .add('Custom', () => (
    <AlertFlag
      variation='custom'
      active
      color={Colors.cerulean}
      icon={<Icons.SecondaryArrow
        color={Colors.cerulean}
        degree={270}
        height={40}
        width={30}
        viewBox='0 0 25 20'
      />}
    >
      <Title.H2 margin='0' fontColor={Colors.cerulean} fontDimension={25} variant='medium'>
        ALTO POTENCIAL
      </Title.H2>
      <Text.P margin='10px 0 16px' fontDimension={14} fontColor={Colors.support}>
        Gustavo Rei foi classificado como ALTO POTENCIAL na reunião de gente, e posteriormente validado em todos os níveis superiores.
      </Text.P>
    </AlertFlag>
  ))
  .add('Custom 2', () => (
    <AlertFlag
      variation='custom'
      active
      color={Colors.cerulean}
    >
      <Text.P margin='0' fontColor={Colors.cerulean}>
        Gustavo Rei foi classificado como ALTO POTENCIAL na reunião de gente, e posteriormente validado em todos os níveis superiores.
      </Text.P>
      <Text.P margin='0 0 10px' fontColor={Colors.cerulean}>
        Gustavo Rei foi classificado como ALTO POTENCIAL na reunião de gente, e posteriormente validado em todos os níveis superiores.
      </Text.P>
    </AlertFlag>
  ))
  .add('Info', () => (
    <AlertFlag
      variation='info'
      active
    >
      <Text.P margin='0'>
        Possuem variações de estilo, como por exemplo, cores, e margem de destaque a esquerda.
      </Text.P>
    </AlertFlag>
  ))
  .add('BigAttention', () => (
    <AlertFlag
      variation='big-attention'
      active
    >
      <Text.P fontDimension={12} fontColor={Colors.support} margin='0'>AVALIAÇAO DO COLEGIADO NO CICLO 2019</Text.P>
      <Text.P margin='0'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et lobortis nunc. Curabitur fermentum sit amet mi sit amet convallis. Nulla convallis suscipit elementum. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum nibh felis, volutpat sit amet ipsum vitae, maximus cursus arcu.
      </Text.P>
    </AlertFlag>
  ))
  .add('Attention', () => (
    <AlertFlag
      variation='attention'
      active
    >
      <Text.P margin='0'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et lobortis nunc. Curabitur fermentum 
      </Text.P>
    </AlertFlag>
  ))
  .add('Warning', () => (
    <AlertFlag
      variation='warning'
      active
    >
      <Text.P margin='0'>
      FEEDBACK NÃO REGISTRADO. Imprima o do dossiê e realize o Feedback presencial após a Reunião de Gente, após isso, registre o Feedback presencial do campo abaixo.
      </Text.P>
    </AlertFlag>
  ))
  .add('Refused', () => (
    <AlertFlag
      variation='refused'
      active
    >
      FEEDBACK DISCORDADO NO DIA 11/02/2019 ÀS 09:30
    </AlertFlag>
  ))
  .add('Accepted', () => (
    <AlertFlag
      variation='accepted'
      active
    >
      FEEDBACK CONCORDADO NO DIA 21/01/2019 ÀS 12:00
    </AlertFlag>
  ))
  ;