@gssfed/vital-ui-kit-react/dist/Card/Card.js

Vital UI Kit for React!

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _templateObject = _taggedTemplateLiteral(['\n  position: relative;\n  display: flex;\n  margin: auto;\n  box-sizing: border-box;\n  flex-direction: column;\n  word-break: break-word;\n  border-radius: 0.25rem;\n  overflow: hidden;\n  background-color: ', ';\n  box-shadow: ', ';\n  width: ', ';\n  height ', ';\n  border: ', ';\n'], ['\n  position: relative;\n  display: flex;\n  margin: auto;\n  box-sizing: border-box;\n  flex-direction: column;\n  word-break: break-word;\n  border-radius: 0.25rem;\n  overflow: hidden;\n  background-color: ', ';\n  box-shadow: ', ';\n  width: ', ';\n  height ', ';\n  border: ', ';\n']);

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

/**
 * 
 * Copyright © 2018 Galaxy Software Services https://github.com/GSS-FED/vital-ui-kit-react
 * MIT license
 */

import * as React from 'react';
import styled from 'styled-components';

import Header from './Header';
import Container from './Container';
import Footer from './Footer';
import FooterButton from './FooterButton';

var Root = styled.div(_templateObject, function (_ref) {
  var theme = _ref.theme;
  return theme.card.bg;
}, function (_ref2) {
  var shadow = _ref2.shadow;
  return shadow ? '2px 2px 4px 0px #cfd8dc' : 'none';
}, function (_ref3) {
  var width = _ref3.width;
  return width;
}, function (_ref4) {
  var height = _ref4.height;
  return height;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.border;
});

/**
 * @render react
 * @name Card
 * @description Card Component with header, footer, buttons
 * @example
 * <Card width="300px" height="420px">
 *   <Card.Header image={"http://react.vitaluikit.com/static/media/card-header-pic.0080a766.png"} title="Title" />
 *   <Card.Container>Lorem ipsum dolor sit amet, sea oblique aliquam oportere ea, id dico interesset eam. Eu eum quem velit verterem, amet dicat quaeque ad est.</Card.Container>
 *    <Card.Footer>
 *      <Card.FooterButton>Cancel</Card.FooterButton>
 *      <Card.FooterButton primary>Confirm</Card.FooterButton>
 *    </Card.Footer>
 * </Card>
 */

var Card = function Card(_ref6) {
  var children = _ref6.children,
      width = _ref6.width,
      height = _ref6.height,
      shadow = _ref6.shadow,
      props = _objectWithoutProperties(_ref6, ['children', 'width', 'height', 'shadow']);

  return React.createElement(
    Root,
    _extends({ width: width, height: height, shadow: shadow }, props),
    children
  );
};

Card.defaultProps = {
  width: 'auto',
  height: 'auto',
  shadow: false
};

Card.Header = Header;
Card.Container = Container;
Card.Footer = Footer;
Card.FooterButton = FooterButton;

export default Card;