vcc-ui/es/components/button/stories.js

VCC UI is a collection of React UI Components that can be used for developing front-end applications at Volvo Car Corporation.

import React from 'react';
import { storiesOf } from '@storybook/react';
import { select, boolean } from '@storybook/addon-knobs';
import { Button } from './';
import { Block } from '../block';
var variant = {
  label: 'Variant',
  options: {
    default: 'default',
    outline: 'outline',
    text: 'text'
  },
  default: 'default'
};
var size = {
  label: 'Size',
  options: {
    small: 'small',
    medium: 'medium',
    large: 'large'
  },
  default: 'medium'
};
storiesOf('Actions/Button', module).addWithJSX('Primary', function () {
  return React.createElement(React.Fragment, null, React.createElement(Button, {
    disabled: boolean('disabled', false),
    variant: select(variant.label, variant.options, variant.default),
    size: select(size.label, size.options, size.default),
    loading: boolean('Loading', false),
    intent: "primary"
  }, "default button"));
});
storiesOf('Actions/Button', module).addWithJSX('Secondary', function () {
  return React.createElement(Button, {
    disabled: boolean('disabled', false),
    variant: select(variant.label, variant.options, variant.default),
    size: select(size.label, size.options, size.default),
    intent: "secondary"
  }, "Hello World");
});
storiesOf('Actions/Button', module).addWithJSX('Destructive', function () {
  return React.createElement(Button, {
    disabled: boolean('disabled', false),
    variant: select(variant.label, variant.options, variant.default),
    size: select(size.label, size.options, size.default),
    intent: "destructive"
  }, "Destroy Planet");
});
storiesOf('Actions/Button', module).addWithJSX('Link Button', function () {
  return React.createElement(React.Fragment, null, React.createElement(Block, {
    as: "p"
  }, "If ", React.createElement("code", null, "href"), " property is passed the button will be renders as an", ' ', React.createElement("code", null, "<a/>"), " element"), React.createElement(Block, {
    extend: {
      marginBottom: '10px'
    }
  }, React.createElement(Button, {
    disabled: boolean('disabled', false),
    size: select(size.label, size.options, size.default),
    variant: "outline",
    href: "#"
  }, "This is a link"), ' ', "vs", ' ', React.createElement(Button, {
    disabled: boolean('disabled', false),
    size: select(size.label, size.options, size.default),
    variant: "outline"
  }, "This is button")), React.createElement(Block, null, React.createElement(Button, {
    disabled: boolean('disabled', false),
    size: select(size.label, size.options, size.default),
    intent: "primary"
  }, "This is a button"), ' ', "vs", ' ', React.createElement(Button, {
    size: select(size.label, size.options, size.default),
    disabled: boolean('disabled', false),
    href: "123"
  }, "This is a link")));
});