@codeforamerica/marcomms-design-system 1.0.0 → 1.1.0

package/src/components/card.js

@@ -0,0 +1,403 @@
+import { LitElement, html, css, nothing, svg } from "lit";
+import { commonStyles } from "../shared/common";
+import { typographyStyles } from "../shared/typography";
+import "./label";
+
+class Card extends LitElement {
+  static properties = {
+    theme: {},
+    linkUrl: {},
+    linkTarget: {},
+    visualType: {},
+    visualUrl: {},
+    visualThumbnailUrl: {},
+    visualAltText: {},
+    eyebrow: {},
+    label: {},
+    title: {},
+    text: {},
+    metaText: {},
+    actionLabel: {},
+  };
+  static styles = [
+    commonStyles,
+    typographyStyles,
+    css`
+      :host {
+        --action-border-color: var(--purple-20);
+        --action-border-hover-color: var(--red-60);
+        --action-text-color: var(--purple-60);
+        --action-text-hover-color: var(--red-60);
+        --bg-color: var(--white);
+        --padding: var(--spacing-component-4);
+        --text-color: var(--black);
+
+        display: flex;
+        flex-direction: column;
+        margin-inline: auto;
+        max-width: 100%;
+        width: 100%;
+      }
+
+      .card,
+      a.card {
+        box-shadow: var(--shadow-small);
+        border: var(--hairline) solid var(--gray-20);
+        color: var(--text-color);
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        height: 100%;
+        text-decoration: none;
+        transition: 500ms;
+      }
+
+      a.card:hover {
+        --action-color: var(--action-hover-color);
+
+        box-shadow: var(--shadow-medium);
+      }
+
+      .content {
+        background-color: var(--bg-color);
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        padding: var(--padding);
+      }
+
+      .header {
+        align-items: start;
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-layout-half);
+        margin-block-end: var(--spacing-layout-half);
+      }
+
+      .body {
+        display: flex;
+        flex-flow: column nowrap;
+        gap: var(--spacing-layout-half);
+        height: 100%;
+        text-align: var(--text-alignment, start);
+      }
+
+      .eyebrow {
+        color: var(--purple-60);
+      }
+
+      .eyebrow + * {
+        margin-block-start: var(--spacing-component-2);
+      }
+
+      .meta-text {
+        color: var(--gray-60);
+      }
+
+      .action-label {
+        align-self: flex-start;
+        color: var(--action-text-color);
+        display: inline-block;
+        font-size: var(--font-size-small);
+        font-weight: bold;
+        margin-block-start: auto;
+        padding-block-start: var(--spacing-component-3);
+      }
+
+      a:hover .action-label {
+        color: var(--action-text-hover-color);
+      }
+
+      .action-label::after {
+        background: linear-gradient(
+          to top,
+          var(--action-border-hover-color) 0% 50%,
+          var(--action-border-color) 50% 100%
+        );
+        background-position: 0% 0%;
+        background-size: 100% 200%;
+        content: "";
+        display: block;
+        height: var(--spacing-component-2);
+        transition: background-position 0.3s;
+      }
+
+      a:hover .action-label::after {
+        background-position: 0% 100%;
+      }
+
+      .visual {
+        box-sizing: border-box;
+        display: flex;
+        height: auto;
+        height: var(--spacing-layout-7);
+        position: relative;
+        width: 100%;
+      }
+
+      img {
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+      }
+
+      .fallback-image {
+        background-color: var(--purple-80);
+        position: absolute;
+        inline-start: 0;
+        block-start: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 0;
+      }
+
+      .fallback-image svg {
+        height: 100%;
+        width: 100%;
+      }
+
+      .visual picture {
+        position: relative;
+        z-index: 1;
+        width: 100%;
+      }
+
+      .image::after {
+        block-end: 0;
+        block-start: 0;
+        bottom: 0;
+        box-shadow: inset 0 -50px 50px -50px var(--black-60);
+        content: "";
+        inline-end: 0;
+        inline-start: 0;
+        position: absolute;
+        z-index: 2;
+      }
+
+      .logo {
+        background-color: var(--white, #fff);
+        box-sizing: border-box;
+        border-block-end: 1px solid var(--gray-20);
+        padding: var(--spacing-component-5);
+      }
+
+      .logo img {
+        object-fit: contain;
+      }
+
+      /* --- */
+
+      /* Theme: Compact Card */
+
+      .card--compact {
+        --padding: var(--spacing-component-3);
+      }
+
+      .card--compact .title {
+        font-size: var(--font-size-h4);
+        line-height: var(--line-height-h4);
+      }
+
+      .card--compact .action-label {
+        padding-block-start: 0;
+      }
+
+      /* --- */
+
+      /* Theme: Horizontal Card */
+
+      @media (min-width: 768px) {
+        .card--horizontal,
+        a.card--horizontal {
+          align-items: stretch;
+          flex-direction: row;
+        }
+
+        .card--horizontal .visual {
+          aspect-ratio: initial;
+          height: auto;
+          flex: 0 0 50%;
+        }
+
+        .card--horizontal .logo {
+          border-block-end: 0;
+          border-inline-end: 1px solid var(--gray-20);
+        }
+      }
+
+      /* --- */
+
+      /* Theme: Horizontal Compact Card */
+
+      @media (min-width: 768px) {
+        .card--horizontal-compact,
+        a.card--horizontal-compact {
+          align-items: stretch;
+          flex-direction: row;
+        }
+
+        .card--horizontal-compact .visual {
+          aspect-ratio: initial;
+          flex: 0 0 34%;
+          height: auto;
+          position: relative;
+        }
+
+        .card--horizontal-compact .image picture {
+          position: absolute;
+          height: 100%;
+          width: 100%;
+        }
+
+        .card--horizontal-compact .logo {
+          border-block-end: 0;
+          border-right: 1px solid var(--gray-20);
+          padding: var(--spacing-component-4);
+        }
+      }
+
+      .card--horizontal-compact,
+      a.card--horizontal-compact {
+        --padding: var(--spacing-component-3);
+      }
+
+      .card--horizontal-compact .body {
+        gap: var(--spacing-component-2);
+      }
+
+      .card--horizontal-compact .header {
+        margin-block-end: var(--spacing-component-2);
+      }
+
+      .card--horizontal-compact .title {
+        font-size: var(--font-size-h4);
+        line-height: var(--line-height-h4);
+      }
+
+      .card--horizontal-compact .action-label {
+        padding-block-start: var(--spacing-component-2);
+      }
+    `,
+  ];
+  visualTemplate() {
+    let template;
+
+    if (this.visualType === "image") {
+      template = html`
+        <div class="visual image">
+          <div class="fallback-image">
+            ${svg`
+              <svg 
+                width="1600" 
+                height="900" 
+                viewBox="0 0 1600 900" 
+                fill="none" 
+                preserveAspectRatio="xMinYMin slice"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <g clip-path="url(#clip0)">
+                <rect width="1600" height="900" fill="#2B1A78"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M1218.12 -444.87C1375.54 -448.403 1528.96 -379.695 1624.93 -254.874C1718.97 -132.569 1729.75 28.0324 1697.74 178.942C1664.98 333.396 1596.67 491.622 1452.8 556.721C1311.8 620.52 1155.18 556.724 1017.04 486.944C883.26 419.362 752.204 329.485 715.393 184.213C677.697 35.4535 737.759 -117.225 833.568 -237.116C929.253 -356.852 1064.86 -441.431 1218.12 -444.87Z" fill="#5650BE"/>
+                <path fill-rule="evenodd" clip-rule="evenodd" d="M372.893 247.378C457.708 243.989 548.299 262.758 600.503 329.652C652.21 395.908 640.741 485.984 623.238 568.169C605.287 652.459 579.269 741.096 503.945 783.041C424.143 827.479 324.366 822.072 243.48 779.638C165.755 738.862 118.175 659.045 102.906 572.65C88.5877 491.632 114.457 410.294 167.015 346.974C218.23 285.272 292.743 250.581 372.893 247.378Z" fill="#5650BE"/>
+                </g>
+                <defs>
+                <clipPath id="clip0">
+                <rect width="1600" height="900" fill="white"/>
+                </clipPath>
+                </defs>
+              </svg>
+            `}
+          </div>
+          ${this.visualUrl
+            ? html`
+                <picture>
+                  <source srcset="${this.visualUrl}" />
+                  <img
+                    src="${this.visualThumbnailUrl}"
+                    alt="${this.visualAltText}"
+                    loading="lazy"
+                    onerror="this.style.display='none'"
+                  />
+                </picture>
+              `
+            : nothing}
+        </div>
+      `;
+    } else if (this.visualType === "logo") {
+      template = html`
+        <div class="visual logo">
+          <picture>
+            <source srcset="${this.visualUrl}" />
+            <img
+              src="${this.visualThumbnailUrl}"
+              alt="${this.visualAltText}"
+              loading="lazy"
+            />
+          </picture>
+        </div>
+      `;
+    }
+    return template;
+  }
+  cardContentTemplate() {
+    return html`
+      ${this.visualTemplate()}
+      <div class="content">
+        <div class="header">
+          <div>
+            ${this.eyebrow
+              ? html` <div class="eyebrow">${this.eyebrow}</div> `
+              : nothing}
+            ${this.title
+              ? html` <div class="h3 title">${this.title}</div> `
+              : nothing}
+          </div>
+          ${this.label
+            ? html`
+                <div>
+                  <cfa-label color="green">${this.label}</cfa-label>
+                </div>
+              `
+            : nothing}
+        </div>
+        <div class="body">
+          ${this.text
+            ? html` <div class="small" .innerHTML="${this.text}"></div> `
+            : nothing}
+          ${this.metaText
+            ? html`
+                <div
+                  class="meta-text small"
+                  .innerHTML="${this.metaText}"
+                ></div>
+              `
+            : nothing}
+          ${this.actionLabel
+            ? html` <div class="action-label">${this.actionLabel}</div> `
+            : nothing}
+        </div>
+      </div>
+    `;
+  }
+  render() {
+    return html`
+      ${this.linkUrl
+        ? html`
+            <a
+              href="${this.linkUrl}"
+              target="${this.linkTarget}"
+              rel="${this.linkTarget == "_blank" ? "noopener" : nothing}"
+              class="card ${this.theme ? "card--" + this.theme : ""}"
+            >
+              ${this.cardContentTemplate()}
+            </a>
+          `
+        : html`
+            <div class="card ${this.theme ? "card--" + this.theme : ""}">
+              ${this.cardContentTemplate()}
+            </div>
+          `}
+    `;
+  }
+}
+customElements.define("cfa-card", Card);

package/src/components/card.stories.js

@@ -0,0 +1,170 @@
+import { html } from "lit-html";
+import "./card";
+
+export default {
+  title: "Molecules/Card",
+  argTypes: {
+    theme: {
+      defaultValue: "default",
+      options: ["default", "horizontal", "horizontal-compact"],
+      control: { type: "radio" },
+    },
+    eyebrow: { type: "string" },
+    title: { type: "string" },
+    label: { type: "string" },
+    text: { type: "string" },
+    metaText: { type: "string" },
+    linkUrl: { type: "string" },
+    linkTarget: {
+      defaultValue: "_self",
+      options: ["_self", "_blank"],
+      control: { type: "radio" },
+    },
+    actionLabel: { type: "string" },
+    visualType: {
+      defaultValue: "none",
+      options: ["none", "image", "logo"],
+      control: { type: "radio" },
+    },
+    visualUrl: { type: "string" },
+    visualAltText: { type: "string" },
+  },
+};
+
+const Template = ({
+  theme,
+  eyebrow,
+  title,
+  label,
+  text,
+  metaText,
+  linkUrl,
+  linkTarget,
+  actionLabel,
+  visualType,
+  visualUrl,
+  visualThumbnailUrl,
+  visualAltText,
+}) => html`
+  <cfa-card
+    theme="${theme}"
+    linkUrl="${linkUrl}"
+    linkTarget="${linkTarget}"
+    visualType="${visualType}"
+    visualUrl="${visualUrl}"
+    visualThumbnailUrl="${visualThumbnailUrl}"
+    visualAltText="${visualAltText}"
+    eyebrow="${eyebrow}"
+    title="${title}"
+    label="${label}"
+    text="${text}"
+    metaText="${metaText}"
+    actionLabel="${actionLabel}"
+  >
+  </cfa-card>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  theme: "default",
+  eyebrow: "Program",
+  title: "Automatic Record Clearance",
+  label: "Now hiring",
+  text: "Working with state governments and communities to fundamentally transform the process of record clearance.",
+  metaText: "Updated September 29, 2022",
+  actionLabel: "Learn more",
+  linkUrl:
+    "https://codeforamerica.org/programs/criminal-justice/automatic-record-clearance/",
+};
+
+export const CardWithImage = Template.bind({});
+CardWithImage.args = {
+  theme: "default",
+  eyebrow: "Program",
+  title: "Food benefits",
+  label: "",
+  text: "Improving access to food assistance and delivery of benefits.",
+  metaText: "",
+  linkUrl:
+    "https://codeforamerica.org/programs/social-safety-net/food-benefits/",
+  actionLabel: "Learn more",
+  visualType: "image",
+  visualUrl:
+    "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png",
+  visualThumbnailUrl:
+    "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-150x150.png",
+  visualAltText: "Illustration of groceries in a shopping basket and paper bag",
+};
+
+export const CardWithLogo = Template.bind({});
+CardWithLogo.args = {
+  theme: "default",
+  eyebrow: "Partner",
+  title: "Code for America",
+  label: "Accepting applications",
+  text: "",
+  metaText: "",
+  linkUrl: "https://codeforamerica.org",
+  actionLabel: "Learn more",
+  visualType: "logo",
+  visualUrl:
+    "https://files.codeforamerica.org/2021/05/28124702/code-for-america-logo-black.svg",
+  visualAltText: "Code for America logo",
+};
+
+export const CompactCard = Template.bind({});
+CompactCard.args = {
+  theme: "compact",
+  eyebrow: "Program",
+  title: "Food benefits",
+  label: "",
+  text: "Improving access to food assistance and delivery of benefits.",
+  metaText: "",
+  linkUrl:
+    "https://codeforamerica.org/programs/social-safety-net/food-benefits/",
+  actionLabel: "Learn more",
+  visualType: "image",
+  visualUrl:
+    "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png",
+  visualThumbnailUrl:
+    "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-150x150.png",
+  visualAltText: "Illustration of groceries in a shopping basket and paper bag",
+};
+
+export const HorizontalCard = Template.bind({});
+HorizontalCard.args = {
+  theme: "horizontal",
+  eyebrow: "Program",
+  title: "Food benefits",
+  label: "",
+  text: "Improving access to food assistance and delivery of benefits.",
+  metaText: "",
+  linkUrl:
+    "https://codeforamerica.org/programs/social-safety-net/food-benefits/",
+  actionLabel: "Learn more",
+  visualType: "image",
+  visualUrl:
+    "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png",
+  visualThumbnailUrl:
+    "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-150x150.png",
+  visualAltText: "Illustration of groceries in a shopping basket and paper bag",
+};
+
+export const HorizontalCompactCard = Template.bind({});
+HorizontalCompactCard.args = {
+  theme: "horizontal-compact",
+  eyebrow: "Program",
+  title: "Food benefits",
+  label: "",
+  text: "Improving access to food assistance and delivery of benefits.",
+  metaText: "",
+  linkUrl:
+    "https://codeforamerica.org/programs/social-safety-net/food-benefits/",
+  actionLabel: "Learn more",
+  visualType: "image",
+  visualUrl:
+    "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png",
+  visualThumbnailUrl:
+    "https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-150x150.png",
+  visualAltText: "Illustration of groceries in a shopping basket and paper bag",
+};