@hackoregon/component-library/es/CivicStoryCard/CivicStoryCard.js

Official repo for Hack Oregon React component library

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  width: 10vw;\n  min-width: 67px;\n  max-width: 134px;\n  height: 10vw;\n  min-height: 67px;\n  max-height: 134px;\n"]);

  _templateObject7 = function _templateObject7() {
    return data;
  };

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  padding: 50px;\n  text-align: center;\n  color: #ee495c;\n"]);

  _templateObject6 = function _templateObject6() {
    return data;
  };

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  padding: 50px;\n  text-align: center;\n"]);

  _templateObject5 = function _templateObject5() {
    return data;
  };

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  margin: 0;\n  text-align: left;\n  font-size: 2.5em;\n  line-height: 1.2;\n  margin-bottom: 1em;\n\n  @media (max-width: 640px) {\n    font-size: 2em;\n  }\n"]);

  _templateObject4 = function _templateObject4() {
    return data;
  };

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 0;\n  text-align: left;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  margin: 0 auto;\n  text-align: left;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  text-align: center;\n  max-width: 1000px;\n  margin: 1.5em auto;\n  position: relative;\n  border: 1px solid #ddd;\n  border-radius: 2px;\n  box-shadow: 5px 5px 15px -3px rgba(0, 0, 0, 0.2);\n  padding: 3em;\n  background-color: white;\n\n  p {\n    margin: 40px 0;\n    line-height: 1.6;\n  }\n\n  h2 {\n    color: #001732;\n  }\n  @media (max-width: 640px) {\n    padding: 3em 2em;\n  }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

import React from "react";
import PropTypes from "prop-types";
import { css } from "emotion";
import CivicStoryFooter from "./CivicStoryFooter";
import Logo from "../Logo/Logo";
var cardClass = css(_templateObject());
var descriptionClass = css(_templateObject2());
var watermarkContainer = css(_templateObject3());
var titleClass = css(_templateObject4());
var cardLoading = css(_templateObject5());
var cardError = css(_templateObject6());
var scaleCorner = css(_templateObject7());

var CivicStoryCard = function CivicStoryCard(_ref) {
  var slug = _ref.slug,
      title = _ref.title,
      children = _ref.children,
      error = _ref.error,
      loading = _ref.loading,
      source = _ref.source,
      footer = _ref.footer,
      watermark = _ref.watermark;
  var content = children;

  if (loading) {
    content = React.createElement("div", {
      className: cardLoading
    }, React.createElement(Logo, {
      type: "squareLogoAnimated",
      alt: "Loading..."
    }));
  } else if (error) {
    content = React.createElement("div", {
      className: cardError
    }, React.createElement("h2", null, error));
  }

  return React.createElement("div", {
    className: cardClass
  }, React.createElement("div", {
    className: watermarkContainer
  }, watermark || React.createElement("svg", {
    className: scaleCorner,
    xmlns: "http://www.w3.org/2000/svg"
  }, React.createElement("g", {
    fill: "none",
    fillRule: "evenodd"
  }, React.createElement("path", {
    d: "M0 134.658V0l11.566 11.597v123.061H0z",
    fill: "#191119"
  }), React.createElement("path", {
    d: "M133.864 0v11.597H11.566v.008L0 .008V0h133.864z",
    fill: "#DC4556"
  })))), title ? React.createElement("h2", {
    className: titleClass
  }, title) : null, React.createElement("div", {
    className: descriptionClass
  }, content), footer && React.createElement(CivicStoryFooter, {
    slug: slug,
    source: source
  }));
};

CivicStoryCard.displayName = "CivicStoryCard";
CivicStoryCard.defaultProps = {
  source: "https://service.civicpdx.org/",
  footer: true
};
CivicStoryCard.propTypes = {
  loading: PropTypes.bool,
  error: PropTypes.string,
  title: PropTypes.string,
  slug: PropTypes.string,
  children: PropTypes.node,
  source: PropTypes.string,
  footer: PropTypes.bool,
  watermark: PropTypes.node
};
export default CivicStoryCard;