@eureca/eureca-ui/src/components/ProfileStrength/stories/profile-strength.stories.mdx

UI component library of Eureca's user and admin apps

import {
  Meta,
  Story,
  Preview,
  Title,
  Subtitle,
  Description,
  Props,
} from '@storybook/addon-docs/blocks';
import { withKnobs } from '@storybook/addon-knobs';

import { Box } from '@material-ui/core';

import { ProfileStrength } from '../';
import { ProfileStrengthStory } from './profile-strength.stories.js';

<Meta title='Originals/Profile Strength' component={ProfileStrength} decorators={[withKnobs]}/>

<Title>Profile Strength</Title>

<Description>
  Componente que exibe a força do perfil de um usuário
</Description>

<Preview>
  <Story name="ProfileStrength">
    <ProfileStrengthStory />
  </Story>
</Preview>

<Subtitle>Props</Subtitle>

|   Nome  |            Descrição            |   Default   |
|:-------:|:-------------------------------:|:-----------:|
| value | Valor a ser exibido. De ser um número entre 1 e 7  <br /> 'number' | 1 |
| messages | Mensagens customizadas, caso necessário. Deve ser um array de 7 itens, uma mensagem para cada nota possível <br /> 'array' | null |

<Subtitle>Exemplo de mensagens customizadas</Subtitle>

> O array deve conter 7 mensagens, uma para cada possível nota do componente.

```jsx
[
  'Por enquanto, você só consegue visualizar vagas e oportunidades.',
  'Por enquanto, você só consegue visualizar vagas e oportunidades. Complete seu perfil para conseguir se inscrever.',
  'Por enquanto, você só consegue visualizar vagas e oportunidades. Complete seu perfil para conseguir se inscrever e para te conhecermos melhor!',
  'Seu perfil está parcialmente preenchido, já é possível explorar oportunidades!',
  'Já é possível explorar oportunidades, mas seu perfil permanece parcialmente preenchido',
  'Seu perfil está praticamente completo, estamos próximos em conhecer verdadeiramente você o/',
  'Perfil completo 🎉   Lembre-se: Sempre que fizer algum curso novo ou viver alguma experiência marcante, conte pra gente aqui no perfil!',
];
```

<Subtitle>Exemplo de Aplicação</Subtitle>

```jsx
<ProfileStrength value={5} messages={customMessages}/>
```