vcc-ui/es/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.

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