@codeforamerica/marcomms-design-system 1.0.0 → 1.1.0

package/src/components/tile.js

@@ -0,0 +1,150 @@
+import { LitElement, html, css, nothing } from "lit";
+import { commonStyles } from "../shared/common.js";
+import { typographyStyles } from "../shared/typography.js";
+import "./blob";
+import "./icon";
+
+class Tile extends LitElement {
+  static properties = {
+    title: { type: String },
+    description: { type: String },
+    actionLabel: { type: String },
+    linkUrl: { type: String },
+    linkTarget: { type: String },
+    imageUrl: { type: String },
+    imageThumbnailUrl: { type: String },
+    imageAltText: { type: String },
+  };
+  static styles = [
+    commonStyles,
+    typographyStyles,
+    css`
+      :host {
+        --bg-color: var(--white);
+        --title-color: var(--purple-60);
+        --text-color: var(--black);
+        --action-label-color: var(--purple-80);
+        --action-label-hover-highlight: var(--purple-20);
+        --blob-color: var(--purple-20);
+
+        align-items: stretch;
+        display: flex;
+        text-align: center;
+        width: 100%;
+      }
+
+      .tile {
+        background-color: var(--bg-color);
+        border-radius: var(--spacing-component-2);
+        border: var(--hairline) solid var(--black-20);
+        color: var(--text-color);
+        display: flex;
+        flex-direction: column;
+        max-width: var(--column-span-6);
+        padding: var(--spacing-component-4);
+        text-decoration: none;
+        transition:
+          box-shadow 0.5s ease-in-out,
+          border-color 0.5s ease-in-out;
+        width: 100%;
+      }
+
+      a.tile:hover {
+        box-shadow: var(--shadow-medium);
+        border-color: rgba(0, 0, 0, 0);
+      }
+
+      picture {
+        display: grid;
+        place-items: center;
+        padding-block-end: var(--spacing-layout-1);
+      }
+
+      picture > * {
+        height: var(--spacing-layout-4);
+        grid-area: 1 / 1;
+      }
+
+      cfa-blob {
+        transition: scale 0.5s ease-in-out;
+      }
+
+      a.tile:hover cfa-blob {
+        scale: 1.2;
+      }
+
+      img {
+        object-fit: contain;
+        z-index: 2;
+      }
+
+      .title {
+        color: var(--title-color);
+      }
+
+      .label {
+        color: var(--action-label-color);
+        display: inline-block;
+        margin-block-start: auto;
+        padding-block-start: var(--spacing-layout-half);
+      }
+    `,
+  ];
+  tileContentTemplate() {
+    return html`
+      ${this.imageUrl
+        ? html`
+            <picture>
+              <cfa-blob></cfa-blob>
+              <img
+                src="${this.imageUrl}"
+                alt="${this.imageAltText}"
+                load="lazy"
+              />
+            </picture>
+          `
+        : nothing}
+
+      <div class="title h3">${this.title}</div>
+
+      <!-- Description -->
+      ${this.description
+        ? html` <p class="small">${this.description}</p> `
+        : nothing}
+
+      <!-- Action label -->
+      ${this.actionLabel
+        ? html`
+            <div class="label small strong">
+              ${this.actionLabel}&nbsp;<cfa-icon>arrow_forward</cfa-icon>
+            </div>
+          `
+        : nothing}
+    `;
+  }
+  render() {
+    return html`
+      <style>
+        cfa-blob {
+          --color: var(--blob-color);
+        }
+      </style>
+      ${this.linkUrl
+        ? html`
+            <a
+              href="${this.linkUrl}"
+              target="${this.linkTarget}"
+              rel="${this.linkTarget == "_blank" ? "noopener" : nothing}"
+              class="tile"
+            >
+              ${this.tileContentTemplate()}
+            </a>
+          `
+        : html` <div class="tile">${this.tileContentTemplate()}</div> `}
+    `;
+  }
+}
+
+if (!customElements.get("cfa-tile")) {
+  customElements.define("cfa-tile", Tile);
+}

package/src/components/tile.stories.js

@@ -0,0 +1,41 @@
+import { html } from "lit-html";
+import "./tile.js";
+
+export default {
+  title: "Molecules/Tile",
+  argTypes: {},
+};
+
+const Template = ({
+  title,
+  description,
+  imageUrl,
+  imageAltText,
+  linkUrl,
+  linkTarget,
+  actionLabel,
+}) => html`
+  <cfa-tile
+    title="${title}"
+    description="${description}"
+    imageUrl="${imageUrl}"
+    imageAltText="${imageAltText}"
+    linkUrl="${linkUrl}"
+    linkTarget="${linkTarget}"
+    actionLabel="${actionLabel}"
+  >
+  </cfa-tile>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Build equitable systems",
+  description:
+    "Government services should lead to outcomes that are just and equitable",
+  imageUrl: "https://files.codeforamerica.org/2021/05/28124726/equity.svg",
+  imageAltText:
+    "Icon representing equity, with three people of different heights and the two shorter people standing on a box to be the same height as the tallest person",
+  linkUrl: "#",
+  linkTarget: "_blank",
+  actionLabel: "Learn more",
+};

package/src/components/transcript.js

@@ -0,0 +1,44 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common.js";
+import { typographyStyles } from "../shared/typography.js";
+
+class Transcript extends LitElement {
+  static styles = [
+    commonStyles,
+    typographyStyles,
+    css`
+      :host {
+        --label-color: var(--purple-60);
+
+        display: block;
+        max-width: var(--column-span-8);
+      }
+
+      .label {
+        --text-color: var(--label-color);
+      }
+
+      .text {
+        background-color: var(--white);
+        border: var(--hairline) solid var(--black-20);
+        color: var(--black);
+        height: calc(12 * var(--spacing-layout-1));
+        overflow: auto;
+        padding: var(--spacing-component-3);
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="label eyebrow-with-line">Transcript</div>
+      <div class="text">
+        <slot />
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-transcript")) {
+  customElements.define("cfa-transcript", Transcript);
+}

package/src/components/transcript.stories.js

@@ -0,0 +1,167 @@
+import { html } from "lit-html";
+import "./transcript";
+
+export default {
+  title: "Molecules/Transcript",
+  argTypes: {},
+};
+
+const Template = () => html`
+  <cfa-transcript>
+    <p>00:00</p>
+    <p>
+      My dad’s first lesson to me was, “Look people in the eye, mi hija, make
+      sure people see you and you see them.” He has been a proud janitor, farm
+      worker, shoe shiner, home builder and small business owner. He has seen
+      the world from so many different lenses and has lots of stories to tell.
+      But there’s one I’ve never been able to get out of my head. A story when
+      my dad was a young kid.
+    </p>
+    <p>00:27</p>
+    <p>
+      He and my tio Milo knew exactly when the trucks would come in. Under the
+      freeway, just as the sun set, they jumped the fence to get into the dump.
+      And as they waited for the trucks, they’d make bets on who would find the
+      best food. An uneaten apple they could clean, a perfect banana, sometimes
+      a candy bar or a wrapped sandwich. And then they’d grab whatever they
+      could find, and save the very best to bring home to their even younger
+      brothers and sisters.
+    </p>
+    <p>01:00</p>
+    <p>
+      I hate that story. But I share it because we can’t solve what we can’t
+      see.
+    </p>
+    <p>01:10</p>
+    <p>
+      In 1936, this image of the migrant mother captured the living conditions
+      in the West, showing lawmakers what people were going through. After it
+      published, the United States government sent 20,000 pounds of food, and
+      that image solidified support for the very first safety-net programs in
+      America. Yet still today, more than 37 million Americans are still living
+      in poverty. One in six kids.
+    </p>
+    <p>01:37</p>
+    <p>
+      As a student of economics and a career public servant, I know we’ve been
+      at this for a long time. But it’s my work today that has given me the hope
+      that we can finally end poverty as we know it. And here’s why. Right now,
+      there are 80 public benefit programs all across the country, intended to
+      provide critical anti-poverty resources. Yet an estimated 60 billion
+      dollars in benefits go unclaimed every year. Sixty billion. I believe, in
+      large part, due to complicated, outdated systems that weren’t designed to
+      see the people they serve.
+    </p>
+    <p>02:13</p>
+    <p>
+      I want you to imagine for a moment that you lost your job, and you don’t
+      know how you’re going to put food on the table. But you hear about this
+      government program that can help. And you begin the process of applying.
+      The first thing you realize is you can’t do it on the only online
+      connection you have, your phone, because the only way to apply online is
+      through a desktop computer. So you head to the community library, you go
+      through screen after screen, answering close to 200 questions, wading
+      through confusing instructions. It feels a little bit like a game of
+      gotcha, except your benefits are at risk. Now, if you’re from a place like
+      my hometown, a small rural farming town, there isn’t an easily accessible
+      public venue with desktop computers. So you have to find a ride to the
+      nearest social services office, maybe 30 miles away. When you get there,
+      you have to walk through metal detectors with two security guards, past a
+      long table of scattered paper forms into the main waiting room. It’s loud,
+      and there’s a long line leading to that service counter. When you get to
+      the front of it, you’re met with a thick, clouded sheet of bulletproof
+      glass separating you from someone who could finally help.
+    </p>
+    <p>03:31</p>
+    <p>
+      That has been the system in America for many communities like mine. So
+      it’s no wonder that 14 million Americans aren’t enrolled in child and food
+      nutrition programs, or that six million are missing health care benefits.
+      Technology has changed almost every aspect of our lives. It’s made things
+      faster, more efficient, automatic. We need to do the same for people
+      seeking benefits.
+    </p>
+    <p>03:56</p>
+    <p>
+      I work for an organization called Code for America. We deploy
+      human-centered technology, the kind that respects you from the start,
+      meets you where you are, provides an easy, positive experience. And our
+      research has shown there are four factors we need to overcome. First, we
+      know that far more people have access to the internet on their phone than
+      a desktop computer. So applications should be online and mobile-friendly.
+      Second, lots of people are falling off because the process is complicated.
+      So applications need to be simple and easy to use. Third, we know that
+      people who are eligible for one program, like food assistance, are pretty
+      likely to be eligible for another, like health care. So let’s combine
+      processes where we can. And finally, we know there are unseen heroes in
+      government — caseworkers, social workers — on the front lines, navigating
+      old systems. We can equip them with the data and tools to streamline their
+      efforts.
+    </p>
+    <p>04:56</p>
+    <p>
+      Here’s what California’s food assistance used to look like. 183 questions,
+      51 pages of screens available only by desktop computer. We took that
+      application and redesigned it. This is GetCalFresh, a mobile-first
+      application available 24 hours a day in multiple languages, with chat
+      support.
+    </p>
+    <p>05:17</p>
+    <p>(Applause)</p>
+    <p>05:23</p>
+    <p>
+      California’s food assistance application went from one of the most complex
+      in the nation to being recognized as one of the easiest application
+      experiences of any state. For 10 years we had been working with multiple
+      states on projects just like that, showing the importance and potential of
+      digital delivery of benefits. And that’s when the pandemic hit. And these
+      images in West Valley, Utah; San Antonio, Texas; Pittsburgh, Pennsylvania.
+      Parking lots filled with families waiting for food. America could finally
+      see what we had been seeing for a decade. The growing number of people in
+      poverty and communities left out as a result of failing systems. Our phone
+      started ringing. From Washington to Maryland, we helped states distribute
+      600 million dollars in benefits to kids in school lunch programs.
+      Louisiana used our best practices tools in notifying people. They
+      proactively sent out more than 40 million texts to residents on how to
+      access critical services. And in Minnesota, we developed an all-in-one
+      application for nine different safety-net benefits. That can be completed
+      in less than 14 minutes.
+    </p>
+    <p>06:41</p>
+    <p>(Applause)</p>
+    <p>06:47</p>
+    <p>
+      Nearly 200,000 people immediately applied in the first six months. And for
+      the first time ever, Minnesota’s system integrated to reach all sovereign
+      tribal nation members.
+    </p>
+    <p>06:58</p>
+    <p>(Applause)</p>
+    <p>07:02</p>
+    <p>
+      That’s what is possible, and this is the moment to keep going, redesigning
+      our safety net for a new time and a new age. And we can do it all across
+      the country, as governments reset.
+    </p>
+    <p>07:12</p>
+    <p>
+      Over the next seven years, we will partner to redesign systems to unlock
+      30 billion dollars in benefits for 13 million eligible people in at least
+      15 states. We will bring data scientists and engineers, technologists and
+      researchers together, sitting side by side with government teams. And our
+      Safety Net Innovation Lab will improve upon and share best practices so
+      that every government can benefit. Because at the heart of our audacious
+      goal is to show the world what’s possible when we use the best tools we
+      have today: human-centered technology and government. So that families
+      aren’t waiting in parking lots for resources. Or kids, growing up like my
+      dad, aren’t searching for food by whatever means possible. Then, then we
+      will see the true potential of every kid. And that’s the calling of this
+      moment to redesign our systems to see people, all people.
+    </p>
+    <p>08:23</p>
+    <p>Thank you.</p>
+  </cfa-transcript>
+`;
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/core/base.scss

@@ -0,0 +1,86 @@
+// Base
+
+html {
+  color: var(--text-color);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-regular);
+  image-rendering: -webkit-optimize-contrast;
+  letter-spacing: var(--letter-spacing-base);
+  line-height: var(--line-height-base);
+  scroll-behavior: smooth;
+  scroll-padding-top: var(--spacing-layout-3);
+  text-underline-offset: var(--text-underline-offset);
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 1vh;
+}
+
+body > main {
+  flex-grow: 1;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: underline;
+  text-decoration-thickness: var(--hairline);
+
+  &:hover {
+    color: var(--link-hover-color);
+  }
+}
+
+*:focus-visible,
+*:target {
+  outline: var(--focus-outline);
+  position: relative;
+}
+
+// Color modes
+
+[data-color-mode="dark"] {
+  --link-color: var(--white);
+  --link-hover-color: var(--white);
+
+  color: var(--white);
+}
+
+[data-color-mode="light"] {
+  --link-color: var(--link-color);
+  --link-hover-color: var(--link-hover-color);
+
+  color: var(--text-color);
+}
+
+// Fonts
+
+@font-face {
+  font-family: 'Source Sans 3';
+  font-style: normal;
+  src: url('../static/fonts/SourceSans3.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Source Sans 3';
+  font-style: italic;
+  src: url('../static/fonts/SourceSans3-Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Source Serif 4';
+  font-style: normal;
+  src: url('../static/fonts/SourceSerif4.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Source Serif 4';
+  font-style: italic;
+  src: url('../static/fonts/SourceSerif4-Italic.woff2') format('woff2');
+}
+
+// Outlines
+
+$highlight-outline: var(--medium) solid var(--yellow-40);

package/src/core/colors.mdx

@@ -0,0 +1,100 @@
+import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+ 
+<Meta title="Colors" />
+ 
+<ColorPalette>
+  <ColorItem
+    title="Grayscale"
+    subtitle=""
+    colors={{ 
+      "white": "#fff", 
+      "gray-20": "#ececec",
+      "gray-40": "#b4b4b4", 
+      "gray-60": "#555555", 
+      "gray-80": "#292929", 
+      "black": "#000", 
+    }}
+  />
+  <ColorItem
+    title="Transparent Black"
+    subtitle=""
+    colors={{ 
+      "black-10": "rgba(0,0,0,0.1)",
+      "black-20": "rgba(0,0,0,0.2)",
+      "black-40": "rgba(0,0,0,0.4)",
+      "black-60": "rgba(0,0,0,0.6)",
+      "black-80": "rgba(0,0,0,0.8)",
+    }}
+  />
+  <ColorItem
+    title="Transparent White"
+    subtitle=""
+    colors={{ 
+      "white-20": "rgba(255,255,255,0.2)",
+      "white-40": "rgba(255,255,255,0.4)",
+      "white-60": "rgba(255,255,255,0.6)",
+      "white-80": "rgba(255,255,255,0.8)",
+    }}
+  />
+  <ColorItem
+    title="Purple"
+    subtitle="Our primary brand color"
+    colors={{ 
+      "purple-10": "#f4f4fb",
+      "purple-20": "#dbdaf1",
+      "purple-40": "#ada9ff",
+      "purple-60": "#4b49b2",
+      "purple-80": "#2b1a78",
+    }}
+  />
+  <ColorItem
+    title="Red"
+    subtitle=""
+    colors={{ 
+      "red-20": "#fbdadc",
+      "red-40": "#ff999f",
+      "red-60": "#af121d",
+      "red-80": "#5c0a0f",
+    }}
+  />
+  <ColorItem
+    title="Blue"
+    subtitle=""
+    colors={{ 
+      "blue-20": "#e6ebf9",
+      "blue-40": "#b3c7ff",
+      "blue-60": "#7595f0",
+      "blue-80": "#172c68",
+    }}
+  />
+  <ColorItem
+    title="Yellow"
+    subtitle=""
+    colors={{ 
+      "yellow-20": "#ffebcc",
+      "yellow-40": "#ffd699",
+      "yellow-60": "#f2aa40",
+      "yellow-80": "#663d00",
+    }}
+  />
+  <ColorItem
+    title="Green"
+    subtitle=""
+    colors={{ 
+      "green-20": "#d6f5ed",
+      "green-40": "#adf0e0",
+      "green-60": "#39aa8e",
+      "green-80": "#004239",
+    }}
+  />
+  <ColorItem
+    title="Sand"
+    subtitle=""
+    colors={{ 
+      "sand-20": "#f5f0ed",
+      "sand-40": "#f8d5bf",
+      "sand-60": "#c19f8b",
+      "sand-80": "#3d3129",
+    }}
+  />
+</ColorPalette>

package/src/core/grid.mdx

@@ -0,0 +1,14 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Grid" />
+
+<div class="container-fluid wrapper">
+  <div class="row">
+    <div class="col-xs-12 col-md-6">
+      Hello
+    </div>
+    <div class="col-xs-12 col-md-6">
+      Hello
+    </div>
+  </div>
+</div>