vcc-ui/lib/components/card/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 _ = require("../../");

var _2 = require("./");

var _cardContent = require("../card-content");

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

(0, _react2.storiesOf)('Layout/Card', module).addWithJSX('Default', function () {
  return _react.default.createElement(_2.Card, null, _react.default.createElement(_cardContent.CardContent, null, _react.default.createElement(_.Text, {
    variant: "ootah"
  }, "Card Component"), _react.default.createElement(_.Spacer, null), _react.default.createElement(_.Text, null, "This is a card")));
}).addWithJSX('Selected', function () {
  return _react.default.createElement(_2.Card, {
    selected: true
  }, _react.default.createElement(_cardContent.CardContent, null, _react.default.createElement(_.Text, {
    variant: "ootah"
  }, "Card Component"), _react.default.createElement(_.Spacer, null), _react.default.createElement(_.Text, null, "This is a card is in a selected state")));
}).addWithJSX('With href', function () {
  return _react.default.createElement(_2.Card, {
    href: "#test"
  }, _react.default.createElement(_cardContent.CardContent, null, _react.default.createElement(_.Text, {
    variant: "ootah"
  }, "Card Component"), _react.default.createElement(_.Spacer, null), _react.default.createElement(_.Text, null, "This is a card has a href prop and is a link")));
}).addWithJSX('With onCLick and nested buttons', function () {
  return _react.default.createElement(_2.Card, {
    onClick: function onClick() {
      alert('button clicked');
    }
  }, _react.default.createElement(_cardContent.CardContent, null, _react.default.createElement(_.Text, {
    variant: "ootah"
  }, "Card Component"), _react.default.createElement(_.Spacer, null), _react.default.createElement(_.Text, null, "This is a card has an onClick handler and contains buttons with links"), _react.default.createElement(_.Spacer, {
    size: 2
  }), _react.default.createElement(_.Flex, {
    extend: {
      flexDirection: 'row'
    }
  }, _react.default.createElement(_.Button, {
    onClick: function onClick(e) {
      e.stopPropagation();
    },
    href: "#buy"
  }, "Buy Now"), _react.default.createElement(_.Button, {
    onClick: function onClick(e) {
      e.stopPropagation();
    },
    href: "#learn-more",
    variant: "text"
  }, "Learn More"))));
}).addWithJSX('With Image', function () {
  return _react.default.createElement(_2.Card, null, _react.default.createElement(_.Flex, {
    extend: {
      justifyContent: 'center',
      padding: 32,
      background: 'linear-gradient(pink, blue)'
    }
  }, _react.default.createElement(_.Text, {
    variant: "bates",
    extend: {
      color: '#fff'
    }
  }, "Fake Image")), _react.default.createElement(_cardContent.CardContent, null, _react.default.createElement(_.Text, {
    variant: "ootah"
  }, "Card Component"), _react.default.createElement(_.Spacer, null), _react.default.createElement(_.Text, null, "This is a card component")));
}).addWithJSX('Selected With Image and Href', function () {
  return _react.default.createElement(_2.Card, {
    selected: true,
    href: "#test"
  }, _react.default.createElement(_.Flex, {
    extend: {
      justifyContent: 'center',
      padding: 32,
      background: 'linear-gradient(pink, blue)'
    }
  }, _react.default.createElement(_.Text, {
    variant: "bates",
    extend: {
      color: '#fff'
    }
  }, "Fake Image")), _react.default.createElement(_cardContent.CardContent, null, _react.default.createElement(_.Text, {
    variant: "ootah"
  }, "Card Component"), _react.default.createElement(_.Spacer, null), _react.default.createElement(_.Text, null, "This is a card component")));
});