@hbsis.uikit/react/src/components/badge/badge.story.js

Biblioteca ReactJS

import { storiesOf } from '@storybook/react'
import { action } from '@storybook/addon-actions'
import React from 'react'
import { Badge } from './index'

import { Arrow } from 'icons'

const stories = storiesOf('Badge - Rótulo', module)
const styles = { margin: '20px' }
stories.add('Badge Types Small', () => (
  <div style={styles}>
    <Badge width='full' size="s" type="primary" label="Primary" />
    <Badge width='content' size="s" type="success" label="Success" />
    <Badge width='content' size="s" type="warning" label="Warning" />
    <Badge width='full' size="s" type="secondary" label="Secondary" />
    <Badge width='100px' size="s" type="danger" label="Danger" />
    <Badge width='100px' size="s" type="default" label="Default" />
    <Badge width='full' size="s" type="dark" label="Dark" />
  </div>
))

stories.add('Badge Types', () => (
  <div style={styles}>
    <Badge type='primary' label='Primary' />
    <Badge type='success' label='Success' />
    <Badge type='warning' label='Warning' />
    <Badge type='secondary' label='Secondary' />
    <Badge type='danger' label='Danger' />
    <Badge type='default' label='Default' />
    <Badge type='dark' label='Dark' />
  </div>
))

stories.add('Badge Types Large', () => (
  <div style={styles}>
    <Badge size="l" type="primary" label="Primary" />
    <Badge size="l" type="success" label="Success" />
    <Badge size="l" type="warning" label="Warning" />
    <Badge size="l" width='content' type="secondary" label="Secondary width='content'" />
    <Badge size="l" width='content' type="danger" label="Danger width='content'" />
    <Badge size="l" type="default" label="Default" />
    <Badge size="l" type="dark" width='200px' label="Dark width='200px'" />
  </div>
))

stories.add('Badge With Suffix', () => (
  <div style={styles}>
    <Badge suffix={<Arrow />} type="primary" label="Primary" />
    <Badge suffix={<Arrow />} type="success" label="Success" />
    <Badge suffix={<Arrow />} type="warning" label="Warning" />
    <Badge suffix={<Arrow />} type="secondary" label="Secondary" />
    <Badge prefix={<Arrow />} type="danger" label="Danger" />
    <Badge prefix={<Arrow />} type="default" label="Default" />
    <Badge prefix={<Arrow />} type="dark" label="Dark" />
  </div>
))