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

Official repo for Hack Oregon React component library

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 { Fragment } from "react";
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 { 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());

function CivicCardLayoutFull(_ref) {
  var isLoading = _ref.isLoading,
      data = _ref.data,
      cardMeta = _ref.cardMeta;
  return jsx(Fragment, null, jsx("article", null, jsx("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, jsx("header", null, jsx("h1", {
    id: "title"
  }, cardMeta.title)), jsx("hr", null), jsx("section", {
    id: "tags"
  }, cardMeta.tags.map(function (tag, index) {
    return jsx(Chip, {
      tag: tag,
      index: index,
      key: generate()
    });
  })), jsx("hr", null)), jsx("section", null, jsx("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, jsx("div", {
    id: "introText"
  }, cardMeta.introText)), jsx("div", {
    id: "visualization",
    css: [sectionMarginMedium, sectionMaxWidthMedium]
  }, cardMeta.selector, jsx(cardMeta.visualization, {
    isLoading: isLoading,
    data: data
  })), jsx("div", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, jsx("div", {
    id: "shareText"
  }, jsx(PullQuote, {
    quoteText: cardMeta.shareText
  })), jsx("div", {
    id: "additionalText"
  }, cardMeta.additionalText))), jsx("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }, jsx("div", {
    id: "analysis"
  }, jsx("h2", null, "About this analysis"), cardMeta.analysis)), jsx("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall],
    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("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall],
    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("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall],
    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("hr", {
    css: [sectionMarginSmall, sectionMaxWidthSmall]
  }), jsx("section", {
    css: [sectionMarginSmall, sectionMaxWidthSmall],
    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],
    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!")))));
}

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