@codeforamerica/marcomms-design-system 1.16.0 → 1.17.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeforamerica/marcomms-design-system",
-  "version": "1.16.0",
+  "version": "1.17.1",
   "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}

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,63 +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>
 `;

package/src/shared/common.js

@@ -1,15 +1,65 @@
 import { css } from "lit";
 
 export const commonStyles = css`
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
   *:focus-visible,
   *:target {
     outline: var(--focus-outline);
     position: relative;
   }
+
+  // RESET
+
+  // Use a more-intuitive box-sizing model.
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  // Remove default margin
+  * {
+    margin: 0;
+  }
+
+  // Set default text-wrap of 'pretty'
+  * {
+    text-wrap: pretty;
+  }
+
+  // Wrap overly long words
+  * {
+    overflow-wrap: break-word;
+    text-overflow: ellipsis;
+    word-break: break-word;
+  }
+
+  // Fix Safari antialiasing for variable fonts
+  * {
+    font-synthesis: none !important;
+  }
+
+  // Improve text rendering
+  body {
+    -webkit-font-smoothing: antialiased;
+  }
+
+  // Reasonable media defaults
+  img, picture, video, canvas, svg {
+    display: block;
+    height: auto;
+    max-width: 100%;
+  }
+
+  // Remove built-in form typography styles
+  input, button, textarea, select {
+    font: inherit;
+  }
+
+  // Avoid text overflows
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+  }
+
+  // Create a root stacking context
+  #root, #__next {
+    isolation: isolate;
+  }
 `;