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

Biblioteca ReactJS

import React from 'react'
import { storiesOf } from '@storybook/react'
import { Card, CardHeader, CardContent, CardFooter, Button } from 'src'

import CardDefault from './story/cardDefault.js'
import CardTypes from './story/cardTypes.js'

const stories = storiesOf('Card', module)

const styles = {
  background: '#f4f5f8',
  padding: 20,
  overflow: 'auto'
}

stories.add('Card - Default', () => (
  <div style={styles}>
    <CardDefault />
  </div>
))

stories.add('Card - Types', () => (
  <div style={styles}>
    <CardTypes />
  </div>
))

stories.add('Card - With Footer', () => (
  <div style={styles}>
    <Card>
      <CardHeader title='Card Title' />
      <CardContent>
        Card with Footer
      </CardContent>
      <CardFooter align='space'>
        <Button type='secondary' width='120px'>Secondary</Button>
        <Button type='primary' width='120px'>Action</Button>
      </CardFooter>
    </Card>
  </div>
))

stories.add('Mini card - without header', () => (
  <div style={{ display: 'flex', width: '800px', justifyContent: 'space-around', marginTop: '10px' }}>
    <Card width='146px' withBorder={false}>
      <CardContent>
        Mini card without border
      </CardContent>
    </Card>

    <Card width='146px'>
      <CardContent>
        Mini card default
      </CardContent>
    </Card>

    <Card width='146px' type='success'>
      <CardContent>
        Mini card success
      </CardContent>
    </Card>

    <Card width='146px' type='warning'>
      <CardContent>
        Mini card warning
      </CardContent>
    </Card>

    <Card width='146px' type='danger'>
      <CardContent>
        Mini card danger
      </CardContent>
    </Card>
  </div>
))