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

Official repo for Hack Oregon React component library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _emotion = require("emotion");

var _CivicStoryFooter = _interopRequireDefault(require("./CivicStoryFooter"));

var _Logo = _interopRequireDefault(require("../Logo/Logo"));

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

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) } })); }

var cardClass = (0, _emotion.css)(_templateObject());
var descriptionClass = (0, _emotion.css)(_templateObject2());
var watermarkContainer = (0, _emotion.css)(_templateObject3());
var titleClass = (0, _emotion.css)(_templateObject4());
var cardLoading = (0, _emotion.css)(_templateObject5());
var cardError = (0, _emotion.css)(_templateObject6());
var scaleCorner = (0, _emotion.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["default"].createElement("div", {
      className: cardLoading
    }, _react["default"].createElement(_Logo["default"], {
      type: "squareLogoAnimated",
      alt: "Loading..."
    }));
  } else if (error) {
    content = _react["default"].createElement("div", {
      className: cardError
    }, _react["default"].createElement("h2", null, error));
  }

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

CivicStoryCard.displayName = "CivicStoryCard";
CivicStoryCard.defaultProps = {
  source: "https://service.civicpdx.org/",
  footer: true
};
CivicStoryCard.propTypes = {
  loading: _propTypes["default"].bool,
  error: _propTypes["default"].string,
  title: _propTypes["default"].string,
  slug: _propTypes["default"].string,
  children: _propTypes["default"].node,
  source: _propTypes["default"].string,
  footer: _propTypes["default"].bool,
  watermark: _propTypes["default"].node
};
var _default = CivicStoryCard;
exports["default"] = _default;