function _templateObject7() {
  var data = _taggedTemplateLiteral(["\n          padding: 0 15px 0 27px;\n        "]);

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

  return data;
}

function _templateObject6() {
  var data = _taggedTemplateLiteral(["\n  list-style: unset;\n  padding: unset;\n  & li {\n    display: unset;\n  }\n"]);

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

  return data;
}

function _templateObject5() {
  var data = _taggedTemplateLiteral(["\n  font-family: Rubik, Helvetica Neue, Helvetica, sans-serif;\n  font-size: 0.8125rem;\n  font-weight: 500;\n  line-height: 1.75;\n  padding: 0.307692308em 0.615384615em;\n  text-transform: uppercase;\n  transition: background-color 63ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n    box-shadow 63ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,\n    border 63ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  z-index: 2;\n  &:hover {\n    background-color: rgba(32, 16, 36, 0.08);\n    cursor: pointer;\n  }\n"]);

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

  return data;
}

function _templateObject4() {
  var data = _taggedTemplateLiteral(["\n  width: 5vw;\n  min-width: 67px;\n  max-width: 134px;\n  height: 5vw;\n  min-height: 67px;\n  max-height: 134px;\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  display: inline-block;\n  color: unset;\n  &::before {\n    bottom: 0;\n    content: \"\";\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n  }\n  &:focus-visible {\n    outline: 2px solid hsl(300, 5%, 55%);\n  }\n  &:-moz-focusring {\n    outline: 2px solid hsl(300, 5%, 55%);\n  }\n  &:hover {\n    color: currentColor;\n  }\n"]);

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

  return data;
}

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  position: relative;\n  &:focus-within {\n    box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.2),\n      0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 4px 2px -1px rgba(0, 0, 0, 0.12);\n    outline: 1px solid transparent; /* needed for Windows high-contrast mode */\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 Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import { makeStyles } from "@material-ui/core/styles";
import { generate } from "shortid";
import cardMetaTypes from "./cardMetaTypes";
import CivicCardLink from "./CivicCardLink";
import { Chip, BrandColors } from "../..";
var secondary = BrandColors.secondary;
var contentContainer = css(_templateObject());
var cardHeadlineLink = css(_templateObject2());
var watermarkContainer = css(_templateObject3());
var scaleCorner = css(_templateObject4());
var nonInteractiveCta = css(_templateObject5());
var tagList = css(_templateObject6());
var useStyles = makeStyles({
  card: {
    "&:hover": {
      boxShadow: "0px 2px 6px 0px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 4px 2px -1px rgba(0,0,0,0.12)"
    }
  }
});

var Watermark = function Watermark() {
  return jsx("div", {
    css: watermarkContainer
  }, jsx("svg", {
    css: scaleCorner
  }, jsx("g", {
    fill: "none",
    fillRule: "evenodd"
  }, jsx("path", {
    d: "M0 134.658V0l11.566 11.597v123.061H0z",
    fill: "#191119"
  }), jsx("path", {
    d: "M133.864 0v11.597H11.566v.008L0 .008V0h133.864z",
    fill: "#DC4556"
  }))));
};

function CivicCardLayoutPreview(_ref) {
  var cardMeta = _ref.cardMeta;
  var classes = useStyles();
  return jsx(Card, {
    css: contentContainer,
    className: classes.card
  }, jsx(Watermark, null), jsx("div", {
    css: css(_templateObject7())
  }, jsx(CardContent, null, jsx("h2", null, jsx(CivicCardLink, {
    css: cardHeadlineLink,
    slug: cardMeta.slug
  }, cardMeta.title)), jsx("section", null, cardMeta.introText), jsx("ul", {
    css: tagList,
    id: "".concat(cardMeta.slug, "-tags")
  }, cardMeta.tags.map(function (tag, index) {
    return jsx("li", {
      key: generate()
    }, jsx(Chip, {
      tag: tag,
      index: index,
      key: generate(),
      color: secondary.hex
    }));
  }))), jsx(CardActions, null, jsx("span", {
    css: nonInteractiveCta
  }, "Learn more"))));
}

CivicCardLayoutPreview.propTypes = {
  cardMeta: cardMetaTypes
};
CivicCardLayoutPreview.displayName = "CivicCardLayoutPreview";
export default CivicCardLayoutPreview;