@codeforamerica/marcomms-design-system 1.15.2 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeforamerica/marcomms-design-system",
-  "version": "1.15.2",
+  "version": "1.17.0",
   "main": "src/index.js",
   "dependencies": {
     "lit": "^3.2.1",

package/src/components/card.js

@@ -184,99 +184,6 @@ class Card extends LitElement {
       .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() {
@@ -362,13 +269,13 @@ class Card extends LitElement {
         </div>
         <div class="body">
           ${this.text
-            ? html` <div class="small" .innerHTML="${this.text}"></div> `
+            ? html` <div class="small" .innerHTML=${this.text}></div> `
             : nothing}
           ${this.metaText
             ? html`
                 <div
                   class="meta-text small"
-                  .innerHTML="${this.metaText}"
+                  .innerHTML=${this.metaText}
                 ></div>
               `
             : nothing}
@@ -401,6 +308,131 @@ class Card extends LitElement {
   }
 }
 
+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

@@ -6,7 +6,7 @@ export default {
   argTypes: {
     theme: {
       defaultValue: "default",
-      options: ["default", "horizontal", "horizontal-compact"],
+      options: ["default"],
       control: { type: "radio" },
     },
     eyebrow: { type: "string" },
@@ -57,8 +57,8 @@ const Template = ({
     eyebrow="${eyebrow}"
     title="${title}"
     label="${label}"
-    text="${text}"
-    metaText="${metaText}"
+    .text=${text}
+    .metaText=${metaText}
     actionLabel="${actionLabel}"
   >
   </cfa-card>
@@ -71,7 +71,12 @@ Default.args = {
   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",
+  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/",
@@ -84,7 +89,7 @@ CardWithImage.args = {
   title: "Food benefits",
   label: "",
   text: "Improving access to food assistance and delivery of benefits.",
-  metaText: "",
+  metaText: "Updated April 14, 2026",
   linkUrl:
     "https://codeforamerica.org/programs/social-safety-net/food-benefits/",
   actionLabel: "Learn more",
@@ -112,59 +117,6 @@ CardWithLogo.args = {
   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",
-};
+export const SkeletonCard = () => html`
+  <cfa-card-skeleton></cfa-card-skeleton>
+`;