import React from 'react';
import styled from 'styled-components';
import { Card, Typography } from '../..';
import { Display } from '../../common/Display';
var StyledContent = styled.div.withConfig({
  displayName: "Cardstories__StyledContent",
  componentId: "sc-eexhxe-0"
})(["height:50vh;display:flex;align-items:center;justify-content:center;"]);
var Content = function Content(_ref) {
  var children = _ref.children;
  return React.createElement(StyledContent, null, children);
};
export default {
  title: 'Atoms / Card',
  parameters: {
    component: Card
  }
};
export var BasicCard = function BasicCard() {
  return React.createElement(Card, null, React.createElement(Content, null, React.createElement(Typography, null, "A Card as a div containing content")));
};
export var CardRenderedWithDifferentHtmlTags = {
  render: function render() {
    return React.createElement(Display, {
      items: [{
        title: 'Section',
        component: React.createElement(Card, {
          as: "section"
        }, React.createElement(Content, null, React.createElement(Typography, null, "A Card as a section containing content")))
      }, {
        title: 'Article',
        component: React.createElement(Card, {
          as: "article"
        }, React.createElement(Content, null, React.createElement(Typography, null, "A Card as a article containing content")))
      }]
    });
  },
  name: 'Card rendered with different html tags'
};
export var CardWithBar = {
  render: function render() {
    return React.createElement(Card, {
      barColor: function barColor(t) {
        return t.color.shareville;
      }
    }, React.createElement(Content, null, React.createElement(Typography, null, "A Card as a div containing content")));
  },
  name: 'Card with colored top bar'
};