componentes
progresscircle
É o componente utilizado para demonstrar progresso.
demo interativa
Uma versão de interativa do componente desenvolvido.
propriedades*
| property | description | required | default value | type |
|---|---|---|---|---|
currentStep | The current step of the progress circle. | true | undefined | number |
totalSteps | The total number of steps in the progress cicle. | true | undefined | number |
variation | The variation of the progress circle. | false | primary | neutralprimaryinfosuccessnoticedanger |
label | The label to display above the progress circle. | false | undefined | string |
counterClockwise | Change the direction of the progress circle. | false | false | boolean |
size | The size of the progress circle. | false | medium | smallmediumlarge |
*valores gerados automaticamente.
propriedades para estilização (styled props)
Recomendamos que o componente siga as propriedades padrões, mencionadas na sessão acima. Porém, ele também possui as seguintes propriedades do @olist/styled-system para atender cenários não mapeados:
guia de design
- Tem guia de uso.
- Tem guia de conteúdo.
- Usa os design tokens.
- Tem símbolo no Figma.
- Possui motion.
- Possui versão web.
- Possui versão responsiva.
- Possui versão mobile.
- É acessível via leitor de tela.
- Texto possui contraste acessível (WCAG 2.0 - Nível AA).
Migração do United para Olist Design System
Propriedades
| United | Olist Design System |
|---|---|
| counterClockwise | counterClockwise |
| current | currentStep |
| label | label |
| size | size |
| total | totalSteps |
| variation | variation |
Variações Existentes
| United | Olist Design System |
|---|---|
| primary | primary |
| danger | danger |
| alternate | success |
| accent | info |
| warning | notice |
| ❌ | neutral |