@codeforamerica/marcomms-design-system 1.0.0 → 1.1.0

package/src/components/banner.js

@@ -0,0 +1,152 @@
+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

@@ -0,0 +1,115 @@
+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/bar.js

@@ -0,0 +1,102 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+
+class Bar extends LitElement {
+  static properties = {
+    theme: {},
+  };
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --bg-color: var(--purple-80);
+        --text-color: var(--white);
+        --link-color: var(--white);
+        --link-hover-color: var(--white);
+        --scrollbar-color: var(--white);
+        --spacing: var(--spacing-layout-half);
+
+        display: block;
+      }
+
+      .bar {
+        background-color: var(--bg-color);
+        color: var(--text-color);
+
+        a {
+          color: var(--link-color);
+        }
+
+        a:hover {
+          color: var(--link-hover-color);
+        }
+      }
+
+      .content {
+        display: flex;
+        column-gap: var(--spacing);
+        justify-content: center;  
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding-bottom: var(--spacing-layout-half);
+        padding-top: var(--spacing-layout-half);
+        scrollbar-color: var(--scrollbar-color) var(--bg-color);
+        scrollbar-width: thin;
+
+        &::before,
+        &::after {
+          content: "";
+          flex-basis: calc(var(--outer-margin) - var(--spacing));
+          flex-shrink: 0;
+        }
+      }
+      
+      .content.is-overflowing {
+        justify-content: start;  
+      }
+
+      ::slotted(*) {
+        max-width: none !important;
+        white-space: nowrap !important;
+      }
+    `,
+  ];
+
+  // Check if the content is overflowing and add a class 
+
+  firstUpdated() {
+    const content = this.shadowRoot.querySelector('.content');
+    const toggleOverflowClass = elem => {
+      elem.classList.toggle('is-overflowing', elem.scrollWidth > elem.clientWidth);
+    };
+
+    if ('ResizeObserver' in window) {
+      new ResizeObserver(entries => {
+        toggleOverflowClass(entries[0].target);
+      }).observe(content);
+    }
+
+    if ('MutationObserver' in window) {
+      new MutationObserver(() => {
+        toggleOverflowClass(content);
+      }).observe(content, { childList: true });
+    }
+
+    // Initial check
+    toggleOverflowClass(content);
+  }
+
+  render() {
+    return html`
+      <div class="bar">
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-bar")) {
+  customElements.define("cfa-bar", Bar);
+}

package/src/components/bar.stories.js

@@ -0,0 +1,22 @@
+import { html } from "lit-html";
+import "./bar";
+
+export default {
+  title: "Molecules/Bar",
+  argTypes: {
+    content: { type: "string" },
+  },
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+const Template = ({ content }) => html`
+  <cfa-bar .innerHTML="${content}"> </cfa-bar>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  content:
+    '<ul class="ul ul--inline small"><li class="strong">Find out about: </li><li><a href="#">Easy and Free State Filing for IRS Direct Filers</a></li><li><a href="#">Bloomberg: Texts can improve access to food assistance</a></li><li><a href="#">Benefits Enrollment Field Guide</a></li></ul>',
+};

package/src/components/blob.js

@@ -0,0 +1,119 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+
+class Blob extends LitElement {
+  static properties = {
+    color: {},
+    shape: {},
+    styles: {},
+  };
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --color: var(--blue-20);
+
+        display: block;
+      }
+
+      .blob,
+      svg {
+        height: 100%;
+        width: 100%;
+      }
+
+      svg path {
+        fill: var(--color, #fff);
+      }
+    `,
+  ];
+  constructor() {
+    super();
+    this.shape = "1";
+  }
+  blobTemplate() {
+    let svg;
+    switch (this.shape) {
+      case "1":
+        svg = html`<svg
+          width="628"
+          height="577"
+          viewBox="0 0 628 577"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M304.482 3.44206C399.413 -5.50752 504.225 1.17063 567.446 72.5295C633.526 147.115 639.549 256.491 613.992 352.793C589.57 444.814 526.084 523.087 438.164 559.679C355.477 594.092 265.039 570.416 184.315 531.621C103.504 492.784 22.0294 438.546 3.59029 350.826C-14.5863 264.355 39.2746 183.666 97.1329 116.868C151.394 54.223 221.956 11.2221 304.482 3.44206Z"
+          />
+        </svg>`;
+        break;
+      case "2":
+        svg = html`<svg
+          width="580"
+          height="592"
+          viewBox="0 0 580 592"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M238.814 591.215C210.461 592.077 182.849 587.767 155.66 580.979C60.4457 557.059 4.05766 489.933 0.460672 390.376C-2.50155 306.442 8.71258 223.693 37.2769 144.499C73.2468 44.6185 170.894 -12.5948 276.159 2.81295C358.996 14.9883 437.177 39.3389 499.172 100.108C588.039 187.167 604.437 293.512 544.346 402.767C514.618 456.855 477.59 505.988 426.386 541.544C369.892 580.656 304.723 587.767 238.814 591.215Z"
+          />
+        </svg>`;
+        break;
+      case "3":
+        svg = html`<svg
+          width="620"
+          height="613"
+          viewBox="0 0 620 613"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M619.142 301.769C615.581 212.393 536.92 153.752 466.654 98.7402C397.998 44.9883 323.934 -10.5844 236.421 2.12929C141.656 15.8965 53.9975 76.8338 15.687 164.256C-20.6955 247.277 16.2818 336.243 54.5575 417.127C92.4807 497.265 137.965 580.831 224.139 604.752C314.166 629.742 409.183 593.817 484.092 536.359C559.738 478.336 622.883 395.641 619.142 301.769Z"
+          />
+        </svg>`;
+        break;
+      case "4":
+        svg = html`<svg
+          width="656"
+          height="566"
+          viewBox="0 0 656 566"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M332.011 564.695C235.808 569.34 135.091 552.4 71.2946 488.381C4.66596 421.518 -10.0767 327.738 8.2158 239.764C27.3773 147.61 73.5054 52.3693 169.88 14.2546C263.181 -22.6447 364.8 21.5179 455.491 62.8734C540.631 101.698 627.337 150.367 649.771 233.088C672.265 316.032 626.78 399.503 564.43 464.569C505.684 525.875 422.382 560.331 332.011 564.695Z"
+          />
+        </svg>`;
+        break;
+      default:
+        svg = html`<svg
+          width="628"
+          height="577"
+          viewBox="0 0 628 577"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M304.482 3.44206C399.413 -5.50752 504.225 1.17063 567.446 72.5295C633.526 147.115 639.549 256.491 613.992 352.793C589.57 444.814 526.084 523.087 438.164 559.679C355.477 594.092 265.039 570.416 184.315 531.621C103.504 492.784 22.0294 438.546 3.59029 350.826C-14.5863 264.355 39.2746 183.666 97.1329 116.868C151.394 54.223 221.956 11.2221 304.482 3.44206Z"
+          />
+        </svg>`;
+    }
+    return svg;
+  }
+  render() {
+    return html` <div class="blob">${this.blobTemplate()}</div> `;
+  }
+}
+
+if (!customElements.get("cfa-blob")) {
+  customElements.define("cfa-blob", Blob);
+}

package/src/components/blob.stories.js

@@ -0,0 +1,64 @@
+import { html } from "lit-html";
+import "./blob";
+
+export default {
+  title: "Atoms/Blob",
+  argTypes: {
+    shape: {
+      options: ["1", "2", "3", "4"],
+      control: { type: "inline-radio" },
+    },
+    color: {
+      options: [
+        "white",
+        "gray-20",
+        "gray-40",
+        "gray-60",
+        "gray-80",
+        "sand-20",
+        "sand-40",
+        "sand-60",
+        "sand-80",
+        "purple-20",
+        "purple-40",
+        "purple-60",
+        "purple-80",
+        "red-20",
+        "red-40",
+        "red-60",
+        "red-80",
+        "green-20",
+        "green-40",
+        "green-60",
+        "green-80",
+        "blue-20",
+        "blue-40",
+        "blue-60",
+        "blue-80",
+        "yellow-20",
+        "yellow-40",
+        "yellow-60",
+        "yellow-80",
+      ],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = ({ color, shape }) => html`
+  <cfa-blob
+    color="${color}"
+    shape="${shape}"
+    style="
+      height: var(--spacing-layout-6, 10rem); 
+      width: var(--spacing-layout-6, 10rem);
+    "
+  >
+  </cfa-blob>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  color: "purple-40",
+  shape: "1",
+};

package/src/components/box.js

@@ -0,0 +1,55 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+
+class Box extends LitElement {
+  static properties = {
+    theme: {},
+  };
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --bg-color: var(--white);
+        --padding: var(--spacing-component-4);
+        --shadow: var(--shadow-small);
+        --text-color: var(--black);
+
+        display: flex;
+        flex: 1;
+      }
+
+      .box {
+        background-color: var(--bg-color);
+        box-shadow: var(--shadow);
+        color: var(--text-color, #000);
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-layout-half);
+        padding: var(--padding);
+        width: 100%;
+      }
+
+      .box--rounded {
+        border-radius: var(--spacing-layout-half, 0.5rem);
+      }
+
+      ::slotted(*) {
+        --spacing: var(--spacing-layout-half);
+
+        max-width: 100%;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="box ${this.theme ? "box--" + this.theme : ""}">
+        <slot />
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-box")) {
+  customElements.define("cfa-box", Box);
+}

package/src/components/box.stories.js

@@ -0,0 +1,24 @@
+import { html } from "lit-html";
+import "./box";
+
+export default {
+  title: "Molecules/Box",
+  argTypes: {
+    theme: {
+      defaultValue: "default",
+      options: ["default", "rounded"],
+      control: { type: "radio" },
+    },
+    content: { type: "string" },
+  },
+};
+
+const Template = ({ theme, content }) => html`
+  <cfa-box theme="${theme}" .innerHTML="${content}"> </cfa-box>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  content:
+    "<p>We deploy <em>human-centered technology</em>, the kind that respects you from the start, meets you where you are, and provides an <strong>easy, positive experience</strong>.<p><a>Learn more</a></p>",
+};