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

Official repo for Hack Oregon React component library

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

import { jsx, css } from "@emotion/core";
import PropTypes from "prop-types";
import _ from "lodash";
import { generate } from "shortid";
import PullQuote from "../PullQuote/PullQuote";
import Placeholder from "../Placeholder/Placeholder";
import cardMetaTypes from "./cardMetaTypes";
import cardMetaDescription from "./cardMetaDescriptions";
import { Chip, Resource, MetadataQuestion, CollapsableSection } from "./LayoutComponents";
var sectionMarginSmall = css(_templateObject());
var sectionMaxWidthSmall = css(_templateObject2());
var sectionMarginMedium = css(_templateObject3());
var sectionMaxWidthMedium = css(_templateObject4());
var authorPhoto = css(_templateObject5());
var cardMetaItem = css(_templateObject6());
var platformItem = css(_templateObject7());
var description = css(_templateObject8());

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

Desc.propTypes = {
  id: PropTypes.string
};

function CivicCardLayoutFullWithDescriptions(_ref2) {
  var isLoading = _ref2.isLoading,
      data = _ref2.data,
      cardMeta = _ref2.cardMeta;
  return jsx("div", null, jsx("div", null, jsx("article", null, jsx("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, jsx("header", null, jsx("h1", {
    css: cardMetaItem,
    id: "title"
  }, cardMeta.title), jsx(Desc, {
    id: "title"
  })), jsx("hr", null), jsx("section", {
    css: cardMetaItem,
    id: "tags"
  }, cardMeta.tags.map(function (tag, index) {
    return jsx(Chip, {
      tag: tag,
      index: index,
      key: generate()
    });
  })), jsx(Desc, {
    id: "tags"
  }), jsx("hr", null)), jsx("section", null, jsx("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, jsx("div", {
    css: cardMetaItem,
    id: "introText"
  }, cardMeta.introText), jsx(Desc, {
    id: "introText"
  })), jsx("div", {
    id: "visualization",
    css: [sectionMarginMedium, sectionMaxWidthMedium, cardMetaItem]
  }, cardMeta.selector, jsx(cardMeta.visualization, {
    isLoading: isLoading,
    data: data
  })), jsx(Desc, {
    id: "visualization"
  }), jsx("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, jsx("div", {
    css: cardMetaItem,
    id: "shareText"
  }, jsx(PullQuote, {
    quoteText: cardMeta.shareText
  })), jsx(Desc, {
    id: "shareText"
  }), jsx("div", {
    css: cardMetaItem,
    id: "additionalText"
  }, cardMeta.additionalText), jsx(Desc, {
    id: "additionalText"
  }))), jsx("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, jsx("div", {
    css: cardMetaItem,
    id: "analysis"
  }, jsx("h2", null, "About this analysis"), cardMeta.analysis)), jsx(Desc, {
    id: "analysis"
  }), jsx("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, cardMetaItem],
    id: "metadata"
  }, jsx("h2", null, "About this data"), cardMeta.metadata, _.has(cardMeta, "metadataQA") && jsx(CollapsableSection, {
    items: cardMeta.metadataQA.map(function (item) {
      return jsx(MetadataQuestion, {
        item: item,
        key: generate()
      });
    }),
    collapseAfter: 5
  })), jsx(Desc, {
    id: "metadataQA"
  }), jsx("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, cardMetaItem],
    id: "resources"
  }, jsx("h2", null, "Links and resources"), 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."), jsx(CollapsableSection, {
    items: cardMeta.resources.map(function (item) {
      return jsx(Resource, {
        item: item,
        key: generate()
      });
    }),
    collapseAfter: 7
  })), jsx(Desc, {
    id: "resources"
  }), jsx("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, cardMetaItem],
    id: "authors"
  }, jsx("h2", null, "Who made this?"), cardMeta.authors.map(function (photo) {
    return jsx("img", {
      css: authorPhoto,
      src: photo,
      alt: "Pictures of people who worked on this",
      key: generate()
    });
  })), jsx(Desc, {
    id: "authors"
  }), jsx("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, platformItem],
    id: "improve"
  }, jsx("h2", null, "Help make this better"), 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."), jsx("ul", null, jsx("li", null, jsx("a", {
    href: "https://civicsoftwarefoundation.org/#volunteers"
  }, "Get Started!"))))), jsx("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall, platformItem],
    id: "explore"
  }, jsx("h2", null, "Explore related data"), jsx(Placeholder, null, jsx("h3", null, jsx("a", {
    href: "https://civicsoftwarefoundation.org/#cities"
  }, "See your data here!"))))));
}

CivicCardLayoutFullWithDescriptions.propTypes = {
  isLoading: PropTypes.bool,
  data: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.array]),
  cardMeta: cardMetaTypes
};
export default CivicCardLayoutFullWithDescriptions;