@hackoregon/component-library/dist/CivicCard/CivicCardLayoutFullWithDescriptions.js

Official repo for Hack Oregon React component library

"use strict";

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

var _core = require("@emotion/core");

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

var _lodash = _interopRequireDefault(require("lodash"));

var _shortid = require("shortid");

var _PullQuote = _interopRequireDefault(require("../PullQuote/PullQuote"));

var _Placeholder = _interopRequireDefault(require("../Placeholder/Placeholder"));

var _cardMetaTypes = _interopRequireDefault(require("./cardMetaTypes"));

var _cardMetaDescriptions = _interopRequireDefault(require("./cardMetaDescriptions"));

var _LayoutComponents = require("./LayoutComponents");

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

function _templateObject8() {
  var data = _taggedTemplateLiteral(["\n  max-width: 700px;\n  margin: auto;\n"]);

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

  return data;
}

function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n  border: 1px solid blue;\n"]);

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

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  border: 1px solid red;\n"]);

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

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  width: 50%;\n  filter: grayscale(100%);\n  cursor: pointer;\n"]);

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

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  max-width: 900px;\n"]);

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

  return data;
}

function _templateObject3() {
  var data = _taggedTemplateLiteral(["\n  display: block;\n  margin: 64px auto;\n"]);

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

  return data;
}

function _templateObject2() {
  var data = _taggedTemplateLiteral(["\n  max-width: 700px;\n"]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: block;\n  margin: 12px auto;\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 sectionMarginSmall = (0, _core.css)(_templateObject());
var sectionMaxWidthSmall = (0, _core.css)(_templateObject2());
var sectionMarginMedium = (0, _core.css)(_templateObject3());
var sectionMaxWidthMedium = (0, _core.css)(_templateObject4());
var authorPhoto = (0, _core.css)(_templateObject5());
var cardMetaItem = (0, _core.css)(_templateObject6());
var platformItem = (0, _core.css)(_templateObject7());
var description = (0, _core.css)(_templateObject8());

function Desc(_ref) {
  var id = _ref.id;
  return (0, _core.jsx)("div", {
    css: description
  }, (0, _core.jsx)("b", null, _lodash["default"].get(_cardMetaDescriptions["default"], [id, "title"])), (0, _core.jsx)("code", null, " (".concat(id, ") ")), (0, _core.jsx)("p", null, _lodash["default"].get(_cardMetaDescriptions["default"], [id, "description"])));
}

Desc.propTypes = {
  id: _propTypes["default"].string
};

function CivicCardLayoutFullWithDescriptions(_ref2) {
  var isLoading = _ref2.isLoading,
      data = _ref2.data,
      cardMeta = _ref2.cardMeta;
  return (0, _core.jsx)("div", null, (0, _core.jsx)("div", null, (0, _core.jsx)("article", null, (0, _core.jsx)("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, (0, _core.jsx)("header", null, (0, _core.jsx)("h1", {
    css: cardMetaItem,
    id: "title"
  }, cardMeta.title), (0, _core.jsx)(Desc, {
    id: "title"
  })), (0, _core.jsx)("hr", null), (0, _core.jsx)("section", {
    css: cardMetaItem,
    id: "tags"
  }, cardMeta.tags.map(function (tag, index) {
    return (0, _core.jsx)(_LayoutComponents.Chip, {
      tag: tag,
      index: index,
      key: (0, _shortid.generate)()
    });
  })), (0, _core.jsx)(Desc, {
    id: "tags"
  }), (0, _core.jsx)("hr", null)), (0, _core.jsx)("section", null, (0, _core.jsx)("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, (0, _core.jsx)("div", {
    css: cardMetaItem,
    id: "introText"
  }, cardMeta.introText), (0, _core.jsx)(Desc, {
    id: "introText"
  })), (0, _core.jsx)("div", {
    id: "visualization",
    css: [sectionMarginMedium, sectionMaxWidthMedium, cardMetaItem]
  }, cardMeta.selector, (0, _core.jsx)(cardMeta.visualization, {
    isLoading: isLoading,
    data: data
  })), (0, _core.jsx)(Desc, {
    id: "visualization"
  }), (0, _core.jsx)("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, (0, _core.jsx)("div", {
    css: cardMetaItem,
    id: "shareText"
  }, (0, _core.jsx)(_PullQuote["default"], {
    quoteText: cardMeta.shareText
  })), (0, _core.jsx)(Desc, {
    id: "shareText"
  }), (0, _core.jsx)("div", {
    css: cardMetaItem,
    id: "additionalText"
  }, cardMeta.additionalText), (0, _core.jsx)(Desc, {
    id: "additionalText"
  }))), (0, _core.jsx)("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), (0, _core.jsx)("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, (0, _core.jsx)("div", {
    css: cardMetaItem,
    id: "analysis"
  }, (0, _core.jsx)("h2", null, "About this analysis"), cardMeta.analysis)), (0, _core.jsx)(Desc, {
    id: "analysis"
  }), (0, _core.jsx)("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), (0, _core.jsx)("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, cardMetaItem],
    id: "metadata"
  }, (0, _core.jsx)("h2", null, "About this data"), cardMeta.metadata, _lodash["default"].has(cardMeta, "metadataQA") && (0, _core.jsx)(_LayoutComponents.CollapsableSection, {
    items: cardMeta.metadataQA.map(function (item) {
      return (0, _core.jsx)(_LayoutComponents.MetadataQuestion, {
        item: item,
        key: (0, _shortid.generate)()
      });
    }),
    collapseAfter: 5
  })), (0, _core.jsx)(Desc, {
    id: "metadataQA"
  }), (0, _core.jsx)("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), (0, _core.jsx)("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, cardMetaItem],
    id: "resources"
  }, (0, _core.jsx)("h2", null, "Links and resources"), (0, _core.jsx)("p", null, "Interested in learning more? The following links and resources are useful in gaining a greater understanding of the context of this data visualization."), (0, _core.jsx)(_LayoutComponents.CollapsableSection, {
    items: cardMeta.resources.map(function (item) {
      return (0, _core.jsx)(_LayoutComponents.Resource, {
        item: item,
        key: (0, _shortid.generate)()
      });
    }),
    collapseAfter: 7
  })), (0, _core.jsx)(Desc, {
    id: "resources"
  }), (0, _core.jsx)("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), (0, _core.jsx)("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, cardMetaItem],
    id: "authors"
  }, (0, _core.jsx)("h2", null, "Who made this?"), cardMeta.authors.map(function (photo) {
    return (0, _core.jsx)("img", {
      css: authorPhoto,
      src: photo,
      alt: "Pictures of people who worked on this",
      key: (0, _shortid.generate)()
    });
  })), (0, _core.jsx)(Desc, {
    id: "authors"
  }), (0, _core.jsx)("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), (0, _core.jsx)("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, platformItem],
    id: "improve"
  }, (0, _core.jsx)("h2", null, "Help make this better"), (0, _core.jsx)("p", null, "CIVIC is an open platform, so you can help make this better! Whether you noticed a typo, want to suggest an improvement for our data visualization, or have context to add about the dataset, we want you to contribute."), (0, _core.jsx)("ul", null, (0, _core.jsx)("li", null, (0, _core.jsx)("a", {
    href: "https://civicsoftwarefoundation.org/#volunteers"
  }, "Get Started!"))))), (0, _core.jsx)("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), (0, _core.jsx)("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, platformItem],
    id: "explore"
  }, (0, _core.jsx)("h2", null, "Explore related data"), (0, _core.jsx)(_Placeholder["default"], null, (0, _core.jsx)("h3", null, (0, _core.jsx)("a", {
    href: "https://civicsoftwarefoundation.org/#cities"
  }, "See your data here!"))))));
}

CivicCardLayoutFullWithDescriptions.propTypes = {
  isLoading: _propTypes["default"].bool,
  data: _propTypes["default"].oneOfType([_propTypes["default"].shape({}), _propTypes["default"].array]),
  cardMeta: _cardMetaTypes["default"]
};
var _default = CivicCardLayoutFullWithDescriptions;
exports["default"] = _default;