@codeforamerica/marcomms-design-system 1.1.3 → 1.2.0

package/src/core/layout.scss

@@ -77,3 +77,14 @@
     height: 100%;
   }
 }
+
+// ======
+
+.grid-lines {
+  background-image: linear-gradient(to bottom, var(--black-20) 1px, transparent 1px);
+  background-size: 100% var(--spacing-layout-half);
+
+  p, h1, h2, h3, h4, h5, h6, li, blockquote {
+    background-color: rgba(255,0,0,0.1);
+  }
+}

package/src/core/layout.stories.js

@@ -0,0 +1,80 @@
+import { html } from "lit-html";
+import "../components/card";
+
+export default {
+  title: "Core/Layout",
+};
+
+export const Default = () => html`
+<div class="grid-lines">
+  <div class="container-fluid container-fluid--grid-test wrapper">
+    <div class="row">
+      <div class="col-xs-12 col-md-8">
+        <div>
+          <h1 class="eyebrow">Tax Benefits</h1>
+          <p class="display-1">Making tax filing simple, free, and accessible for all</p>
+          <p class="display-2">As much as $15 billion in federal tax benefits goes unclaimed every year.</p>
+          <p>
+            Ultimately, this is the result of a status quo that requires millions of Americans to spend time and money they don’t have to fulfill the prerequisite for receiving benefits: filing a tax return. Tax benefits are some of the largest, most effective anti-poverty tools in the United States, but under our current system, too many people miss out on the support they need.
+          </p>
+          <p class="h1">For too long, the status quo has been a tax filing system that stands in the way of getting flexible cash from tax benefits into people’s hands.</p>
+          <p>
+             Aside from the lucky few able to access nonprofit tax prep like the Volunteer Income Tax Assistance (VITA) Program, the system gives most people two options:
+          </p>
+          <ul>
+            <li>
+              Collectively pay billions of dollars each year to file their tax returns via commercial preparers
+            </li>
+            <li>
+              Not file altogether, thus missing out on billions of dollars in tax benefits for which they’re eligible. 
+            </li>
+          </ul>
+          <p>
+            By streamlining and simplifying the tax filing process, we can help more people file their tax returns for free. Ultimately, simplified tax filing will deliver life-changing cash through tax benefits.
+          </p>
+          <hr>
+          <p>
+            Tax benefits are some of the largest, most effective anti-poverty tools in the United States, but under our current system, too many people miss out on the support they need.
+          </p>
+          <h2>What is flexible cash? Flexible cash—meaning money that individuals and families decide how to spend for themselves—is one of the best ways to empower people toward financial stability.</h2>
+          <p>
+            Flexible cash—meaning money that individuals and families decide how to spend for themselves—is one of the best ways to empower people toward financial stability.
+          </p>
+          <p class="small">
+            Cash support helps people provide for their basic needs, find and keep living wage jobs, and handle emergencies as they arise. Flexible cash has been distributed through the tax system via tax credits and stimulus payments.
+          </p>
+          <h3>We believe in government providing free and easy tax filing services.</h3>
+          <p>
+            Through the mindful use of technology, Code for America works to ensure all who are eligible for benefits distributed through the tax system actually can claim and receive them.
+          </p>
+          <p class="eyebrow-with-line">Our Approach</p>
+          <p class="large">
+            We believe in government providing free and easy tax filing services. To advance that goal, we build products that show what’s possible and enable government to deliver these simplified tax filing services.
+          </p>
+          <p>
+            In 2021, we launched GetCTC. 
+          </p>
+          <p class="extra-large">
+            It's a free, easy tax filing tool that allowed 200,000 families to claim key tax benefits like the stimulus and expanded Child Tax Credit during the COVID-19 pandemic. 
+          </p>
+          <p>
+            This helped spark a national movement to use government technology to advance access to tax benefits for families with low income—a movement that ultimately set the foundation for a historic new simplified filing tool: IRS Direct File.
+          </p>
+        </div>
+      </div>
+      <div class="col-xs-12 col-md-4 stack">
+        <div>
+          <p>
+            It's a free, easy tax filing tool that allowed 200,000 families to claim key tax benefits like the stimulus and expanded Child Tax Credit during the COVID-19 pandemic. 
+          </p>
+          <p>
+            We believe in government providing free and easy tax filing services. To advance that goal, we build products that show what’s possible and enable government to deliver these simplified tax filing services. Code for America works to ensure all who are eligible for benefits distributed through the tax system actually can claim and receive them.
+          </p>
+        </div>
+        <cfa-card>
+        </cfa-card>
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/core/tokens.scss

@@ -85,18 +85,18 @@
   --spacing-layout-8: 12rem;
   --spacing-layout-9: 13.5rem;
 
-  /* Component spacing (based on PX) */
+  /* Component spacing (based on fractions of layout spacing) */
 
   --spacing-component-0: 0;
-  --spacing-component-1: 4px;
-  --spacing-component-2: 8px;
-  --spacing-component-3: 16px;
-  --spacing-component-4: 32px;
-  --spacing-component-5: 64px;
-  --spacing-component-6: 128px;
-  --spacing-component-7: 256px;
-  --spacing-component-8: 512px;
-  --spacing-component-9: 1024px;
+  --spacing-component-1: calc(0.125 * var(--spacing-layout-1));
+  --spacing-component-2: calc(0.25 * var(--spacing-layout-1));
+  --spacing-component-3: calc(0.5 * var(--spacing-layout-1));
+  --spacing-component-4: calc(1 * var(--spacing-layout-1));
+  --spacing-component-5: calc(2 * var(--spacing-layout-1));
+  --spacing-component-6: calc(4 * var(--spacing-layout-1));
+  --spacing-component-7: calc(8 * var(--spacing-layout-1));
+  --spacing-component-8: calc(16 * var(--spacing-layout-1));
+  --spacing-component-9: calc(32 * var(--spacing-layout-1));
 
   // =====
 
@@ -151,14 +151,6 @@
   --font-size-large: var(--font-size-h3);
   --font-size-small: 0.8rem;
 
-  // Font size aliases
-  --font-size-sm: var(--font-size-small);
-  --font-size-md: var(--font-size-base);
-  --font-size-lg: var(--font-size-large);
-  --font-size-xl: var(--font-size-extra-large);
-  --font-size-xxl: var(--font-size-display-2);
-  --font-size-xxxl: var(--font-size-display-1);
-
   --font-weight-regular: 400;
   --font-weight-bold: 700;
   --font-weight-display-1: var(--font-weight-bold);
@@ -169,25 +161,25 @@
   --font-weight-h4: var(--font-weight-bold);
   --font-weight-eyebrow: var(--font-weight-bold);
   
-  --line-height-base: calc(1.5 * var(--font-size-base, 20px));
-  --line-height-display-1: 1.2em;
-  --line-height-display-2: 1.2em;
-  --line-height-h1: 1.2em;
-  --line-height-h2: 1.2em;
-  --line-height-h3: 1.3em;
-  --line-height-h4: 1.3em;
-  --line-height-eyebrow: 1em;
-  --line-height-extra-large: var(--line-height-h2);
-  --line-height-large: var(--line-height-h3);
-  --line-height-small: 1.6em;
-
-    // Line height aliases
-    --line-height-sm: var(--line-height-small);
-    --line-height-md: var(--line-height-base);
-    --line-height-lg: var(--line-height-large);
-    --line-height-xl: var(--line-height-extra-large);
-    --line-height-xxl: var(--line-height-display-2);
-    --line-height-xxxl: var(--line-height-display-1);
+  --line-height-base: var(--spacing-layout-1);
+  --line-height-display-1: calc(2.5 * var(--line-height-base));
+  --line-height-display-2: calc(2 * var(--line-height-base));
+  --line-height-h1: calc(1.5 * var(--line-height-base));
+  --line-height-h2: calc(1.5 * var(--line-height-base));
+  --line-height-h3: calc(1 * var(--line-height-base));
+  --line-height-h4: calc(1 * var(--line-height-base));
+  --line-height-eyebrow: calc(1 * var(--line-height-base));
+  --line-height-extra-large: calc(1.5 * var(--line-height-base));
+  --line-height-large: calc(1 * var(--line-height-base));
+  --line-height-small: calc(1 * var(--line-height-base));
+
+  // Line height aliases
+  --line-height-sm: var(--line-height-small);
+  --line-height-md: var(--line-height-base);
+  --line-height-lg: var(--line-height-large);
+  --line-height-xl: var(--line-height-extra-large);
+  --line-height-xxl: var(--line-height-display-2);
+  --line-height-xxxl: var(--line-height-display-1);
 
   --letter-spacing-base: normal;
   --letter-spacing-display-1: normal;
@@ -199,13 +191,13 @@
   --letter-spacing-eyebrow: 0.1em;
   --letter-spacing-small: normal;
 
-    // Letter spacing aliases
-    --letter-spacing-sm: var(--letter-spacing-small);
-    --letter-spacing-md: var(--letter-spacing-base);
-    --letter-spacing-lg: var(--letter-spacing-large);
-    --letter-spacing-xl: var(--letter-spacing-extra-large);
-    --letter-spacing-xxl: var(--letter-spacing-display-2);
-    --letter-spacing-xxxl: var(--letter-spacing-display-1);
+  // Letter spacing aliases
+  --letter-spacing-sm: var(--letter-spacing-small);
+  --letter-spacing-md: var(--letter-spacing-base);
+  --letter-spacing-lg: var(--letter-spacing-large);
+  --letter-spacing-xl: var(--letter-spacing-extra-large);
+  --letter-spacing-xxl: var(--letter-spacing-display-2);
+  --letter-spacing-xxxl: var(--letter-spacing-display-1);
 
   --text-underline-offset: 0.3em;
 

package/src/core/typography.mdx

@@ -1,6 +1,6 @@
 import { Meta, Typeset } from '@storybook/addon-docs/blocks';
  
-<Meta title="Typography" />
+<Meta title="Core/Typography" />
 
 export const typography = {
   type: {

package/src/core/typography.scss

@@ -20,9 +20,9 @@ h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-1, .display-2 {
     margin-block-start: var(--spacing, var(--spacing-layout-1, 1.5rem));
   }
 
-  // Add three line spaces before headings
+  // Add two line spaces before headings
   * + & {
-    --spacing: var(--spacing-layout-3);
+    --spacing: var(--spacing-layout-2);
 
     margin-block-start: --spacing;
   }
@@ -123,8 +123,7 @@ h4,
   letter-spacing: var(--letter-spacing-small);
 }
 
-.eyebrow,
-.is-style-eyebrow /* WordPress support */ {
+.eyebrow {
   font-family: var(--font-family-sans-serif);
   font-size: var(--font-size-eyebrow);
   font-weight: var(--font-weight-eyebrow);
@@ -133,8 +132,7 @@ h4,
   text-transform: uppercase;
 }
 
-.eyebrow-with-line,
-.is-style-eyebrow-with-line /* WordPress support */ {
+.eyebrow-with-line {
   align-items: center;
   color: var(--text-color);
   display: flex;
@@ -401,7 +399,7 @@ hr {
   display: block;
   font-size: 0;
   height: var(--hairline);
-  margin-block: var(--spacing-layout-2);
+  margin-block: var(--spacing-layout-1);
   opacity: 0.4;
 }
 

package/src/index.js

@@ -40,7 +40,4 @@ import "./components/transcript.js";
 
 // Organisms
 
-import "./components/banner.js";
 import "./components/carousel.js";
-import "./components/cta.js";
-import "./components/flexible-layout.js";

package/src/components/banner.js

@@ -1,152 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { commonStyles } from "../shared/common";
-
-class Banner extends LitElement {
-  static properties = {
-    accentColor: "",
-    backgroundColor: "",
-    linkUrl: "",
-    linkTarget: "",
-    visualType: "",
-    visualUrl: "",
-    visualThumbnailUrl: "",
-    visualAltText: "",
-  };
-  static styles = [
-    commonStyles,
-    css`
-      :host {
-        --accent-color: var(--white);
-        --background-color: var(--black);
-        --text-color: var(--white);
-
-        display: block;
-      }
-
-      a {
-        align-items: center;
-        background-color: var(--background-color);
-        box-shadow: var(--shadow-medium);
-        color: var(--text-color);
-        display: grid;
-        grid-template-areas:
-          "visual"
-          "content";
-        grid-template-columns: auto;
-        grid-template-rows: var(--spacing-layout-8) auto;
-        text-decoration: none;
-      }
-
-      .blob {
-        fill: var(--accent-color);
-        grid-area: visual;
-        height: 100%;
-        width: 100%;
-      }
-
-      picture {
-        grid-area: visual;
-        height: 100%;
-        width: 100%;
-        z-index: 1;
-      }
-
-      picture img {
-        object-fit: cover;
-        object-position: center center;
-        height: 100%;
-        width: 100%;
-      }
-
-      picture.illustration img {
-        object-fit: contain;
-      }
-
-      .content {
-        padding: var(--spacing-layout-1, 1rem) var(--outer-margin, 1rem);
-      }
-
-      @media (min-width: 768px) {
-        a {
-          grid-template-columns: 33% minmax(50%, var(--column-span-6)) auto;
-          grid-template-rows: auto;
-          grid-template-areas: "visual" "content";
-        }
-
-        .content {
-          text-align: start;
-        }
-
-        picture {
-          max-height: calc(var(--spacing-layout-1) * 12);
-        }
-      }
-
-      @media (prefers-reduced-motion: no-preference) {
-        .blob path {
-          animation: float 10s ease-in-out infinite;
-          z-index: 0;
-        }
-      }
-
-      @keyframes float {
-        0% {
-          transform: translatex(0) translatey(0) rotate(0);
-        }
-        50% {
-          transform: translatex(2px) translatey(-4px) rotate(4deg);
-        }
-        100% {
-          transform: translatex(0) translatey(0) rotate(0);
-        }
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <a
-        href="${this.linkUrl ? this.linkUrl : "javascript:void(0)"}"
-        target="${this.linkTarget}"
-        style="
-          --accent-color: var(--${this.accentColor});
-          --background-color: var(--${this.backgroundColor});
-        "
-      >
-        ${this.visualType == "illustration"
-          ? html`
-              <svg
-                class="blob"
-                width="100%"
-                height="100%"
-                viewBox="0 400 991 404"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  fill-rule="evenodd"
-                  clip-rule="evenodd"
-                  d="M497.987 2.71228C593.074 -5.64211 690.176 4.03525 773.161 49.603C862.779 98.8136 944.454 170.47 976.005 265.197C1007.51 359.787 986.265 464.701 941.165 554.018C899.88 635.781 820.242 689.107 738.82 734.926C664.711 776.63 583.712 800.173 497.987 803.413C409.179 806.769 320.068 796.454 243.046 753.664C159.74 707.382 90.0067 640.005 51.1477 555.166C9.37056 463.956 -21.746 356.515 19.2012 264.956C59.2648 175.372 169.027 143.121 256.962 94.9565C334.013 52.7538 409.754 10.4645 497.987 2.71228Z"
-                />
-              </svg>
-            `
-          : ""}
-        <picture class="${this.visualType}">
-          <source srcset="${this.visualUrl}" />
-          <img
-            src="${this.visualThumbnailUrl}"
-            alt="${this.visualAltText}"
-            loading="lazy"
-          />
-        </picture>
-        <div class="content">
-          <slot></slot>
-        </div>
-      </a>
-    `;
-  }
-}
-
-if (!customElements.get("cfa-banner")) {
-  customElements.define("cfa-banner", Banner);
-}

package/src/components/banner.stories.js

@@ -1,115 +0,0 @@
-import { html } from "lit-html";
-import "./banner";
-
-export default {
-  title: "Organisms/Banner",
-  argTypes: {
-    content: { type: "string" },
-    backgroundColor: {
-      defaultValue: "purple-80",
-      options: ["purple-80", "red-80", "green-80", "blue-80", "black"],
-      control: { type: "select" },
-    },
-    accentColor: {
-      defaultValue: "white",
-      options: [
-        "white",
-        "purple-40",
-        "red-40",
-        "blue-40",
-        "yelow-40",
-        "green-40",
-      ],
-      control: { type: "select" },
-    },
-    linkUrl: { type: "string" },
-    linkTarget: {
-      defaultValue: "_self",
-      options: ["_self", "_blank"],
-      control: { type: "radio" },
-    },
-    visualType: {
-      defaultValue: "image",
-      options: ["image", "illustration"],
-      control: { type: "radio" },
-    },
-    visualUrl: { type: "string" },
-    visualAltText: { type: "string" },
-  },
-};
-
-const Template = ({
-  content,
-  backgroundColor,
-  accentColor,
-  linkUrl,
-  visualType,
-  visualUrl,
-  visualThumbnailUrl,
-  visualAltText,
-}) => html`
-  <cfa-banner
-    .innerHTML="${content}"
-    backgroundColor="${backgroundColor}"
-    accentColor="${accentColor}"
-    linkUrl="${linkUrl}"
-    visualType="${visualType}"
-    visualUrl="${visualUrl}"
-    visualThumbnailUrl="${visualThumbnailUrl}"
-    visualAltText="${visualAltText}"
-  >
-    <a href="${linkUrl}"> ${content} </a>
-  </cfa-banner>
-`;
-
-export const BannerWithImage = Template.bind({});
-BannerWithImage.args = {
-  content: `
-    <div class="stack" style="--spacing: var(--spacing-layout-half);">
-      <p class="h2">We’re showing what’s possible this holiday season</p>
-      <p>
-        But we can’t do it without you.<br>
-        Make your gift today for double the impact.
-      </p>
-      <span class="cfa-button cfa-button--primary">
-        Donate now
-      </span>
-    </div>
-  `,
-  backgroundColor: "purple-80",
-  accentColor: "white",
-  linkUrl:
-    "https://codeforamerica.org/programs/criminal-justice/automatic-record-clearance/",
-  visualType: "image",
-  visualUrl:
-    "https://files.codeforamerica.org/2022/06/28153627/Amanda_TED_3.png",
-  visualThumbnailUrl:
-    "https://files.codeforamerica.org/2022/06/28153627/Amanda_TED_3.png",
-  visualAltText: "Code for America CEO Amanda Renteria speaking at TED",
-};
-
-export const BannerWithIllustration = Template.bind({});
-BannerWithIllustration.args = {
-  content: `
-    <div class="stack" style="--spacing: var(--spacing-layout-half);">
-      <p class="h2">We’re showing what’s possible this holiday season</p>
-      <p>
-        But we can’t do it without you.<br>
-        Make your gift today for double the impact.
-      </p>
-      <span class="cfa-button cfa-button--primary">
-        Donate now
-      </span>
-    </div>
-  `,
-  backgroundColor: "purple-80",
-  accentColor: "white",
-  linkUrl:
-    "https://codeforamerica.org/programs/criminal-justice/automatic-record-clearance/",
-  visualType: "illustration",
-  visualUrl:
-    "https://files.codeforamerica.org/2022/11/09191601/paperwork-with-laptop-1.png",
-  visualThumbnailUrl:
-    "https://files.codeforamerica.org/2022/11/09191601/paperwork-with-laptop-1.png",
-  visualAltText: "Illustration of hands, a laptop computer and paperwork",
-};

package/src/components/cta.js

@@ -1,99 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { commonStyles } from "../shared/common";
-import "./blob";
-
-class CTA extends LitElement {
-  static properties = {};
-  static styles = [
-    commonStyles,
-    css`
-      :host {
-        --bg-color: var(--purple-60);
-        --link-color: var(--white);
-        --link-hover-color: var(--white);
-        --spacing: var(--spacing-layout-1);
-        --text-color: var(--white);
-
-        background-color: var(--bg-color);
-        display: block;
-      }
-
-      a {
-        color: var(--link-color);
-      }
-
-      a:hover {
-        color: var(--link-hover-color);
-      }
-
-      .cta {
-        display: grid;
-      }
-
-      .cta > * {
-        grid-area: 1 / 1;
-      }
-
-      .content {
-        color: var(--text-color);
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing);
-        margin-inline: auto;
-        max-width: var(--column-span-8);
-        padding: var(--spacing-layout-4) var(--outer-margin);
-        position: relative;
-        spacing: var(--spacing-layout-2);
-        text-align: center;
-      }
-
-      .blob {
-        position: relative;
-        overflow: hidden;
-        height: 100%;
-        width: 100%;
-      }
-
-      cfa-blob {
-        --color: var(--purple-80);
-
-        overflow: hidden;
-        position: absolute;
-        height: 120%;
-        width: 140%;
-        top: -10%;
-        left: -20%;
-      }
-
-      @media (min-width: 768px) {
-        cfa-blob {
-          left: auto;
-          width: 100%;
-          height: 200%;
-          top: -50%;
-        }
-      }
-
-      ::slotted(*) {
-        margin-block: 0 !important;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <div class="cta">
-        <div class="blob">
-          <cfa-blob></cfa-blob>
-        </div>
-        <div class="content">
-          <slot />
-        </div>
-      </div>
-    `;
-  }
-}
-
-if (!customElements.get("cfa-cta")) {
-  customElements.define("cfa-cta", CTA);
-}

package/src/components/cta.stories.js

@@ -1,22 +0,0 @@
-import { html } from "lit-html";
-import "./cta";
-
-export default {
-  title: "Organisms/CTA",
-  argTypes: {
-    content: { type: "string" },
-  },
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-const Template = ({ content }) => html`
-  <cfa-cta .innerHTML="${content}"> </cfa-cta>
-`;
-
-export const Default = Template.bind({});
-Default.args = {
-  content:
-    '<div class="h3">Is your state ready to transform food assistance delivery?</div><p>Let’s work together to improve government in meaningful ways.</p><div><a href="#" class="cfa-button cfa-button--white">Partner with us</a></div>',
-};