@codeforamerica/marcomms-design-system 1.0.0 → 1.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeforamerica/marcomms-design-system",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "src/index.js",
   "devDependencies": {
     "@babel/cli": "^7.26.4",
@@ -81,6 +81,7 @@
   },
   "files": [
     "dist/",
+    "src/",
     "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/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>',
+};