@codeforamerica/marcomms-design-system 1.19.0 → 1.20.0

package/src/components/card.js

@@ -0,0 +1,456 @@
+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;
+        gap: var(--spacing-layout-half);
+        padding: var(--padding);
+      }
+
+      .header {
+        align-items: start;
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-layout-half);
+      }
+
+      .body {
+        display: flex;
+        flex-flow: column nowrap;
+        flex-grow: 1;
+        gap: var(--spacing-layout-half);
+        height: 100%;
+        text-align: var(--text-alignment, start);
+      }
+
+      .footer {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-layout-half);
+      }
+
+      .eyebrow {
+        color: var(--purple-60);
+      }
+
+      .eyebrow + * {
+        margin-block-start: var(--spacing-component-2);
+      }
+
+      .meta-text {
+        color: var(--gray-60);
+        border-block-start: var(--hairline) solid var(--gray-40);
+        padding-block-start: var(--spacing-component-2);
+      }
+
+      .card:has(.action-label) .meta-text {
+        border-block-end: var(--hairline) solid var(--gray-40);
+        padding-block-end: var(--spacing-component-2);
+      }
+
+      .action-label {
+        align-self: flex-start;
+        color: var(--action-text-color);
+        display: inline-block;
+        font-size: var(--font-size-small);
+        font-weight: bold;
+      }
+
+      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;
+      }
+    `,
+  ];
+  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}
+        </div>
+        ${(this.metaText || this.actionLabel)
+          ? html`
+              <div class="footer">
+                ${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>
+            `
+          : nothing}
+      </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>
+          `}
+    `;
+  }
+}
+
+class CardSkeleton extends LitElement {
+  static styles = [
+    commonStyles,
+    typographyStyles,
+    css`
+      :host {
+        display: flex;
+        flex-direction: column;
+        margin-inline: auto;
+        max-width: 100%;
+        width: 100%;
+      }
+
+      .card-skeleton {
+        background-color: var(--white);
+        border: var(--hairline) solid var(--gray-20);
+        box-shadow: var(--shadow-small);
+        color: var(--black);
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      .visual-skeleton {
+        background-color: var(--gray-20);
+        height: var(--spacing-layout-7);
+        overflow: hidden;
+        position: relative;
+        width: 100%;
+      }
+
+      .content {
+        background-color: var(--white);
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: var(--spacing-layout-half);
+        padding: var(--spacing-component-4);
+      }
+
+      .body {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: var(--spacing-layout-half);
+      }
+
+      .line {
+        background-color: var(--gray-20);
+        border-radius: var(--spacing-component-1);
+        display: block;
+        overflow: hidden;
+        position: relative;
+        width: 100%;
+      }
+
+      .line::after {
+        animation: shimmer 1.5s linear infinite;
+        background: linear-gradient(
+          90deg,
+          transparent 0%,
+          var(--white-50, rgba(255, 255, 255, 0.45)) 50%,
+          transparent 100%
+        );
+        content: "";
+        inset: 0;
+        position: absolute;
+        transform: translateX(-100%);
+      }
+
+      .line--eyebrow {
+        height: var(--line-height-small);
+        max-width: 28%;
+      }
+
+      .line--title {
+        height: var(--line-height-h3);
+        max-width: 76%;
+      }
+
+      .line--body {
+        height: var(--line-height-base);
+      }
+
+      .line--body-short {
+        max-width: 86%;
+      }
+
+      .line--action {
+        height: var(--line-height-small);
+        margin-block-start: auto;
+        max-width: 36%;
+      }
+
+      @keyframes shimmer {
+        100% {
+          transform: translateX(100%);
+        }
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="card-skeleton" role="status" aria-busy="true" aria-label="Loading card">
+        <div class="visual-skeleton line" aria-hidden="true"></div>
+        <div class="content">
+          <div class="line line--eyebrow" aria-hidden="true"></div>
+          <div class="line line--title" aria-hidden="true"></div>
+          <div class="body" aria-hidden="true">
+            <div class="line line--body"></div>
+            <div class="line line--body line--body-short"></div>
+            <div class="line line--action"></div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-card")) {
+  customElements.define("cfa-card", Card);
+}
+
+if (!customElements.get("cfa-card-skeleton")) {
+  customElements.define("cfa-card-skeleton", CardSkeleton);
+}

package/src/components/card.stories.js

@@ -0,0 +1,227 @@
+import { html } from "lit-html";
+import "./card";
+
+export default {
+  title: "Molecules/Card",
+  argTypes: {
+    theme: {
+      defaultValue: "default",
+      options: ["default"],
+      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: `
+    <ul class="ul ul--inline-with-separators">
+      <li>Updated May 7, 2026</li>
+      <li>In partnership with the community</li>
+    </ul>
+  `,
+  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: "Updated April 14, 2026",
+  linkUrl:
+    "https://codeforamerica.org/programs/social-safety-net/food-benefits/",
+  actionLabel: "",
+  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 SkeletonCard = () => html`
+  <cfa-card-skeleton></cfa-card-skeleton>
+`;
+
+export const CardLayoutExample = () => html`
+  <div class="container-fluid wrapper">
+    <div class="row stretch-md">
+      <div class="col-xs-12 col-md-4">
+        ${Template({
+          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: `
+            <ul class="ul ul--inline-with-separators">
+              <li>Updated May 7, 2026</li>
+              <li>In partnership with the community</li>
+            </ul>
+          `,
+          actionLabel: "Learn more",
+          linkUrl: "https://codeforamerica.org/programs/criminal-justice/automatic-record-clearance/",
+        })}
+      </div>
+      <div class="col-xs-12 col-md-4">
+        ${Template({
+          theme: "default",
+          eyebrow: "Program",
+          title: "Food benefits",
+          label: "",
+          text: "Improving access to food assistance and delivery of benefits.",
+          metaText: "Updated April 14, 2026",
+          linkUrl: "https://codeforamerica.org/programs/social-safety-net/food-benefits/",
+          actionLabel: "",
+          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",
+        })}
+      </div>
+      <div class="col-xs-12 col-md-4">
+        ${Template({
+          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",
+        })}
+      </div>
+    </div>
+    <div class="row stretch-md">
+      <div class="col-xs-12 col-md-4">
+        ${Template({
+          theme: "default",
+          eyebrow: "Initiative",
+          title: "Voter Registration",
+          label: "",
+          text: "Helping eligible citizens register to vote.",
+          metaText: "Updated March 15, 2026",
+          linkUrl: "https://codeforamerica.org",
+          actionLabel: "",
+          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 representing voting",
+        })}
+      </div>
+      <div class="col-xs-12 col-md-4">
+        ${Template({
+          theme: "default",
+          eyebrow: "Service",
+          title: "Benefits Enrollment",
+          label: "",
+          text: "Streamlining the process for residents to access vital benefits they qualify for. We work directly with state and local agencies to simplify enrollment workflows.",
+          metaText: "Updated February 28, 2026",
+          linkUrl: "https://codeforamerica.org",
+          actionLabel: "",
+          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 representing enrollment",
+        })}
+      </div>
+      <div class="col-xs-12 col-md-4">
+        ${Template({
+          theme: "default",
+          eyebrow: "Program",
+          title: "Health Access Initiative",
+          label: "",
+          text: "Connecting communities with healthcare resources.",
+          metaText: "Coming in June 2026",
+          linkUrl: "https://codeforamerica.org",
+          actionLabel: "",
+          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 representing health",
+        })}
+      </div>
+    </div>
+  </div>
+`;