@codeforamerica/marcomms-design-system 1.19.0 → 1.19.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeforamerica/marcomms-design-system",
-  "version": "1.19.0",
+  "version": "1.19.1",
   "main": "dist/index.js",
   "dependencies": {
     "lit": "^3.2.1",
@@ -81,6 +81,7 @@
     "./components/*": "./dist/components/*.js"
   },
   "files": [
+    "src/",
     "dist/",
     "README.md"
   ]

package/src/components/accordion.js

@@ -0,0 +1,141 @@
+import { html, css, LitElement } from "lit";
+import { commonStyles } from "../shared/common";
+
+class AccordionItem extends LitElement {
+  static properties = {
+    open: { type: Boolean },
+  };
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --color: var(--purple-60);
+        --hover-bg-color: var(--blue-20);
+
+        display: block;
+      }
+
+      .item {
+        border-bottom: var(--thin) solid var(--black-20);
+        max-width: var(--column-span-8);
+        margin-inline: auto;
+        background-color: var(--bg-color);
+      }
+
+      .header {
+        align-items: center;
+        color: var(--color);
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        padding-block: var(--spacing-component-3);
+      }
+
+      .header:hover {
+        background-color: var(--hover-bg-color);
+        box-shadow:
+          var(--spacing-component-3) 0 var(--blue-20),
+          calc(-1 * var(--spacing-component-3)) 0 var(--blue-20);
+      }
+
+      .header:focus {
+        outline: none;
+      }
+
+      .title {
+        flex: 1;
+      }
+
+      .title ::slotted(*) {
+        font-family: var(--font-family-sans-serif) !important;
+        font-size: var(--base-font-size) !important;
+      }
+
+      .icon {
+        flex: 0;
+      }
+
+      .body {
+        opacity: 0;
+        max-height: 0;
+        overflow: hidden;
+      }
+
+      .body.open {
+        max-height: unset;
+        opacity: 1;
+        padding-block: var(--spacing-layout-half) var(--spacing-layout-1);
+      }
+
+      .body ::slotted(*) {
+        margin-block-start: 0 !important;
+      }
+    `,
+  ];
+  constructor() {
+    super();
+    this.open = false;
+  }
+  toggle() {
+    this.open = !this.open;
+  }
+  handleKeyPress(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      this.toggle();
+    }
+  }
+  render() {
+    return html`
+      <div class="item">
+        <div
+          class="header"
+          role="button"
+          aria-expanded=${this.open ? "true" : "false"}
+          tabindex="0"
+          @click=${this.toggle}
+          @keypress=${this.handleKeyPress}
+        >
+          <div class="title">
+            <slot name="title"></slot>
+          </div>
+          <span class="icon" aria-hidden="true">
+            ${this.open
+              ? html`<cfa-icon>expand_less</cfa-icon>`
+              : html`<cfa-icon>expand_more</cfa-icon>`}
+          </span>
+        </div>
+        <div
+          class="body ${this.open ? "open" : ""}"
+          role="region"
+          aria-hidden=${this.open ? "false" : "true"}
+        >
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+class Accordion extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+    }
+  `;
+
+  render() {
+    return html`
+      <div role="tablist">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-accordion-item")) {
+  customElements.define("cfa-accordion-item", AccordionItem);
+}
+
+if (!customElements.get("cfa-accordion")) {
+  customElements.define("cfa-accordion", Accordion);
+}

package/src/components/accordion.stories.js

@@ -0,0 +1,56 @@
+import { html } from "lit-html";
+import "./accordion";
+import "./icon";
+
+export default {
+  title: "Molecules/Accordion",
+};
+
+const Template = () => html`
+  <cfa-accordion>
+    <cfa-accordion-item>
+      <h3 slot="title">What is the desired skillset for these roles?</h3>
+      <div>
+        <p>
+          Even though the services being offered are tax-related, no previous
+          tax knowledge or tax preparation experience is required to volunteer.
+        </p>
+        <p>
+          Our training will give you all the info you need to succeed in
+          whichever role you choose. Much of the work is focused primarily on
+          customer service. We will provide training for any relevant tax law
+          needed to perform in your role.
+        </p>
+      </div>
+    </cfa-accordion-item>
+    <cfa-accordion-item>
+      <h3 slot="title">
+        What is the minimum number of hours a volunteer must serve?
+      </h3>
+      <div>
+        <p>
+          With customer service at the heart of our work, our volunteers are
+          asked to serve at least four to six hours per week to ensure they are
+          able to respond in a timely manner to the client they’re serving.
+        </p>
+      </div>
+    </cfa-accordion-item>
+    <cfa-accordion-item>
+      <h3 slot="title">
+        What is the Volunteer Income Tax Assistance program (VITA)?
+      </h3>
+      <div>
+        <a href="#">Volunteer Income Tax Assistance (VITA)</a> is a program that
+        came out of the IRS over 50 years ago and was designed to help taxpayers
+        with low income file their tax returns for free. The program has been
+        wildly successful and nonprofits all over the country offer VITA
+        services as a means to fight poverty and promote financial stability.
+        Since 2021, many VITA organizations across the country have begun to use
+        GetYourRefund to serve clients virtually.
+      </div>
+    </cfa-accordion-item>
+  </cfa-accordion>
+`;
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/avatar.js

@@ -0,0 +1,62 @@
+import { LitElement, html, css, nothing } from "lit";
+import { commonStyles } from "../shared/common";
+
+class Avatar extends LitElement {
+  static properties = {
+    imageUrl: {},
+    altText: {},
+    size: {},
+  };
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --bg-color: var(--blue-20);
+
+        display: inline-block;
+        max-width: 100%;
+      }
+
+      picture {
+        aspect-ratio: 1 / 1;
+        background-color: var(--bg-color);
+        border-radius: 50%;
+        display: block;
+        max-width: 100%;
+        overflow: hidden;
+        width: var(--size);
+      }
+
+      img {
+        display: block;
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+      }
+    `,
+  ];
+  render() {
+    return html`
+      <style>
+        :host {
+          --size: var(--spacing-layout-${this.size || "4"}, 8rem);
+        }
+      </style>
+      <picture>
+        ${this.imageUrl
+          ? html`
+              <img
+                src="${this.imageUrl}"
+                loading="lazy"
+                alt="${this.altText}"
+              />
+            `
+          : nothing}
+      </picture>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-avatar")) {
+  customElements.define("cfa-avatar", Avatar);
+}

package/src/components/avatar.stories.js

@@ -0,0 +1,27 @@
+import { html } from "lit-html";
+import "./avatar";
+
+export default {
+  title: "Atoms/Avatar",
+  argTypes: {
+    imageUrl: { type: "string" },
+    altText: { type: "string" },
+    size: { type: "number", control: { type: "range", min: 1, max: 8 } },
+  },
+};
+
+const Template = ({ imageUrl, altText, size }) => html`
+  <cfa-avatar
+    imageUrl="${imageUrl}"
+    altText="${altText}"
+    size="${size}"
+  ></cfa-avatar>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  imageUrl:
+    "https://files.codeforamerica.org/2021/02/13130320/Renteria.Turq_.Standing-scaled-e1678737908242-198x300.jpg",
+  altText: "Headshot photo of Amanda Renteria, Code for America CEO",
+  size: 4,
+};

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,128 @@
+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() {
+    const colorVar = this.color ? `var(--${this.color})` : 'var(--blue-20)';
+    
+    return html` 
+      <div 
+        class="blob" 
+        style="--color: ${colorVar}"
+      >
+        ${this.blobTemplate()}
+      </div> 
+    `;
+  }
+}
+
+if (!customElements.get("cfa-blob")) {
+  customElements.define("cfa-blob", Blob);
+}

package/src/components/blob.stories.js

@@ -0,0 +1,73 @@
+import { html } from "lit-html";
+import "./blob";
+
+export default {
+  title: "Atoms/Blob",
+  parameters: {
+    docs: {
+      description: {
+        component: "Organic, abstract shapes that can be used as decorative elements, backgrounds, or visual accents. Available in 4 unique shapes and full color palette. Also available as CSS custom properties for background usage.",
+      },
+    },
+  },
+  argTypes: {
+    shape: {
+      options: ["1", "2", "3", "4"],
+      control: { type: "inline-radio" },
+      description: "Choose from 4 different organic blob shapes",
+    },
+    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" },
+      description: "Select a color from the design system palette",
+    },
+  },
+};
+
+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);
+}