vcc-ui/lib/components/click/stories.js

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

"use strict";

var _react = _interopRequireDefault(require("react"));

var _react2 = require("@storybook/react");

var _addonKnobs = require("@storybook/addon-knobs");

var _ = require("./");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

(0, _react2.storiesOf)('Core/Click', module).addWithJSX('Default', function () {
  return _react.default.createElement(_.Click, {
    disabled: (0, _addonKnobs.boolean)('disabled', false),
    onClick: function onClick() {
      alert('Hello!');
    }
  }, "This is a clickable unstyled button");
}).addWithJSX('With Extend', function () {
  return _react.default.createElement(_.Click, {
    disabled: (0, _addonKnobs.boolean)('disabled', false),
    extend: {
      display: 'inline-block',
      padding: '16px 24px',
      color: 'hotpink',
      background: '#f1f1f1',
      fontSize: 16,
      transition: 'all 0.2s ease-in-out 0s',
      ':hover': {
        transform: 'rotate(2deg) scale(1.1)',
        background: 'lightblue',
        color: '#fff'
      }
    },
    href: "https://www.volvocars.com/"
  }, "Custom Style Button");
});