@codeforamerica/marcomms-design-system 1.0.0 → 1.1.0

package/src/components/link-list.stories.js

@@ -0,0 +1,52 @@
+import { html } from "lit-html";
+import "./link-list.scss";
+import "./icon";
+
+export default {
+  title: "Molecules/LinkList",
+};
+
+const Template = () => html`
+  <div class="container-fluid wrapper">
+    <div class="row center-md">
+      <div class="col-xs-12 col-md-6">
+        <ul class="link-list">
+          <li>
+            <a href="#">Best Practices for Data Aggregation in Summer EBT</a>
+          </li>
+          <li>
+            <a href="#">Tips for Working with Vendors</a>
+          </li>
+          <li>
+            <a href="#">
+              Tips for Creating a Human-Centered Summer EBT Application
+            </a>
+          </li>
+        </ul>
+        <br />
+        <ul class="link-list">
+          <li>
+            <a href="#">
+              <cfa-icon>favorite</cfa-icon> Best Practices for Data Aggregation
+              in Summer EBT
+            </a>
+          </li>
+          <li>
+            <a href="#">Tips for Working with Vendors </a>
+          </li>
+          <li>
+            <a href="#">
+              <cfa-icon>download</cfa-icon> Playbook: Tips for Creating a
+              Human-Centered Summer EBT Application
+            </a>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  theme: "default",
+};

package/src/components/loader.scss

@@ -0,0 +1,24 @@
+.cfa-loader {
+  --size: var(--spacing-component-3);
+
+  animation: pulse 2s infinite;
+  border-radius: 50%;
+  display: block;
+  height: var(--size);
+  margin-left: auto;
+  margin-right: auto;
+  text-indent: -9999px;
+  width: var(--size);
+}
+
+@keyframes pulse {
+  0% {
+    background-color: rgba(0,0,0,0);
+  }
+  50% {
+    background-color: rgba(0,0,0,0.3);
+  }
+  100% {
+    background-color: rgba(0,0,0,0);
+  }
+}

package/src/components/loader.stories.js

@@ -0,0 +1,12 @@
+import { html } from "lit-html";
+import "./loader.scss";
+
+export default {
+  title: "Atoms/Loader",
+  argTypes: {},
+};
+
+const Template = () => html`<div class="cfa-loader">Loading</div>`;
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/logo-card.js

@@ -0,0 +1,93 @@
+import { LitElement, html, css, nothing } from "lit";
+import { commonStyles } from "../shared/common";
+import { typographyStyles } from "../shared/typography";
+
+class LogoCard extends LitElement {
+  static properties = {
+    name: {},
+    imageUrl: {},
+    linkUrl: {},
+    linkTarget: {},
+  };
+  static styles = [
+    commonStyles,
+    typographyStyles,
+    css`
+      :host {
+        --bg-color: var(--blue-20);
+        --text-color: var(--black);
+
+        align-items: stretch;
+        display: flex;
+        flex-direction: row;
+      }
+
+      .card {
+        align-items: center;
+        background-color: var(--white);
+        border: var(--hairline) solid var(--black-10);
+        color: var(--text-color);
+        display: flex;
+        flex-direction: column;
+        font-size: var(--font-size-h3);
+        font-weight: bold;
+        justify-content: center;
+        line-height: var(--line-height-h4);
+        margin-inline: auto;
+        max-width: 100%;
+        min-height: var(--spacing-layout-8);
+        padding: var(--spacing-component-5);
+        text-align: center;
+        text-decoration: none;
+        transition: box-shadow 1s;
+        width: var(--column-span-4);
+      }
+
+      a.card {
+        box-shadow: var(--shadow-small);
+        color: var(--text-color);
+      }
+
+      a.card:hover {
+        box-shadow: var(--shadow-medium);
+      }
+
+      img {
+        aspect-ratio: 2 / 1;
+        object-fit: contain;
+        width: 100%;
+      }
+    `,
+  ];
+  cardContentTemplate() {
+    let template;
+    if (this.imageUrl) {
+      template = html` <img src="${this.imageUrl}" alt="${this.name}" /> `;
+    } else {
+      template = html` ${this.name} `;
+    }
+    return template;
+  }
+  render() {
+    return html`
+      ${this.linkUrl
+        ? html`
+            <a
+              href="${this.linkUrl}"
+              target="${this.linkTarget || "_self"}"
+              rel="${this.linkTarget == "_blank"
+                ? "noopener noreferrer"
+                : nothing}"
+              class="card"
+            >
+              ${this.cardContentTemplate()}
+            </a>
+          `
+        : html` <div class="card">${this.cardContentTemplate()}</div> `}
+    `;
+  }
+}
+
+if (!customElements.get("cfa-logo-card")) {
+  customElements.define("cfa-logo-card", LogoCard);
+}

package/src/components/logo-card.stories.js

@@ -0,0 +1,48 @@
+import { html } from "lit-html";
+import "./logo-card";
+
+export default {
+  title: "Molecules/LogoCard",
+  argTypes: {
+    name: { type: "string" },
+    imageUrl: { type: "string" },
+    linkUrl: { type: "string" },
+    linkTarget: { type: "string" },
+  },
+};
+
+const Template = ({ name, imageUrl, linkUrl, linkTarget }) => html`
+  <cfa-logo-card
+    name="${name}"
+    imageUrl="${imageUrl}"
+    linkUrl="${linkUrl}"
+    linkTarget="${linkTarget}"
+  ></cfa-logo-card>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  name: "Code for America",
+  imageUrl:
+    "https://files.codeforamerica.org/2021/05/28124702/code-for-america-logo-black.svg",
+  linkUrl: "https://codeforamerica.org",
+  linkTarget: "_blank",
+};
+
+export const LogoCardWithoutLink = Template.bind({});
+LogoCardWithoutLink.args = {
+  name: "Code for America",
+  imageUrl:
+    "https://files.codeforamerica.org/2021/05/28124702/code-for-america-logo-black.svg",
+};
+
+export const LogoCardWithoutImage = Template.bind({});
+LogoCardWithoutImage.args = {
+  name: "Code for America",
+  linkUrl: "https://codeforamerica.org",
+};
+
+export const LogoCardWithTextOnly = Template.bind({});
+LogoCardWithTextOnly.args = {
+  name: "Code for America",
+};

package/src/components/nav.js

@@ -0,0 +1,99 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+
+class Nav extends LitElement {
+  static properties = {
+    fontSize: {},
+  };
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --link-color: var(--purple-80);
+        --link-hover-color: var(--purple-80);
+
+        display: block;
+        font-family: var(--font-family-sans-serif);
+      }
+
+      slot {
+        display: none;
+      }
+
+      nav {
+        font-size: var(--font-size-base);
+        line-height: var(--line-height-base);
+      }
+
+      nav[data-font-size="small"] {
+        font-size: var(--font-size-small);
+        line-height: var(--line-height-small);
+      }
+
+      nav[data-font-size="large"] {
+        font-size: var(--font-size-h3);
+        line-height: var(--line-height-h3);
+      }
+
+      ul {
+        display: flex;
+        flex-direction: row;
+        gap: var(--spacing-component-1);
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      li {
+        flex-shrink: 0;
+        margin: 0;
+        padding: 0;
+      }
+
+      li.is-active a {
+        box-shadow: inset 0 calc(-1 * var(--medium)) var(--link-hover-color);
+      }
+
+      a {
+        box-shadow: 0;
+        color: var(--link-color);
+        display: block;
+        font-weight: bold;
+        height: 100%;
+        padding: var(--spacing-component-2) var(--spacing-component-3);
+        text-decoration: none;
+        transition: box-shadow 0.25s ease-in-out;
+      }
+
+      a:hover {
+        box-shadow: inset 0 calc(-1 * var(--medium)) var(--link-hover-color);
+      }
+    `,
+  ];
+  handleSlotchange(event) {
+    const slot = event.target;
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+    const breadcrumbContainer = this.shadowRoot.querySelector("ul");
+    breadcrumbContainer.innerHTML = ""; // Clear the existing content
+    assignedNodes.forEach((node) => {
+      if (node.tagName === "UL") {
+        const liElements = node.querySelectorAll("li");
+        liElements.forEach((li) => {
+          breadcrumbContainer.appendChild(li.cloneNode(true));
+        });
+      }
+    });
+  }
+  render() {
+    return html`
+      <slot @slotchange=${this.handleSlotchange}></slot>
+      <nav data-font-size="${this.fontSize}">
+        <ul></ul>
+      </nav>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-nav")) {
+  customElements.define("cfa-nav", Nav);
+}

package/src/components/nav.stories.js

@@ -0,0 +1,40 @@
+// TODO: Turn into web component, consider renaming (maybe 'navbar' or 'menu-bar'?)
+
+import { html } from "lit-html";
+import "./nav.js";
+
+export default {
+  title: "Molecules/Nav",
+  argTypes: {
+    fontSize: {
+      type: String,
+      control: "inline-radio",
+      options: ["small", "base", "large"],
+    },
+  },
+};
+
+const Template = ({ fontSize }) => html`
+  <cfa-nav fontSize="${fontSize}">
+    <ul>
+      <li>
+        <a href="#"> Actions </a>
+      </li>
+      <li>
+        <a href="#"> Schedule </a>
+      </li>
+      <li>
+        <a href="#"> How to participate </a>
+      </li>
+      <li>
+        <a href="#"> FAQs </a>
+      </li>
+    </ul>
+  </cfa-nav>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  // font size
+  fontSize: "base",
+};

package/src/components/page-nav.js

@@ -0,0 +1,171 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+
+class PageNav extends LitElement {
+  static properties = {
+    fontSize: {},
+  };
+
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --bg-color: var(--white);
+        --link-color: var(--purple-80);
+        --link-hover-color: var(--purple-80);
+
+        background-color: var(--bg-color);
+        display: block;
+        padding-block: var(--spacing-layout-1);
+        display: block;
+        font-family: var(--font-family-sans-serif);
+        font-size: var(--font-size-small);
+        line-height: var(--font-size-small);
+      }
+
+      slot {
+        display: none;
+      }
+
+      nav {
+      }
+
+      ul {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-layout-half);
+        margin: 0;
+        padding: 0 var(--outer-margin);
+        min-height: var(--spacing-layout-2);
+      }
+
+      li {
+        display: block;
+      }
+
+      a {
+        background-color: var(--purple-10);
+        border-radius: var(--rounded-corners);
+        color: var(--link-color);
+        display: block;
+        position: relative;
+        padding: var(--spacing-layout-half);
+        text-decoration: none;
+      }
+
+      a:hover {
+        background-color: var(--blue-20);
+        color: var(--link-hover-color);
+      }
+
+      a:active {
+        background-color: var(--blue-40);
+        color: var(--link-color);
+      }
+
+      @media (min-width: 768px) {
+        :host {
+          box-shadow: var(--shadow-small);
+          padding-block: var(--spacing-component-2);
+          position: sticky;
+          top: 0;
+          z-index: 3;
+        }
+
+        nav {
+          align-items: center;
+          display: flex;
+          flex-direction: row;
+          margin-inline: auto;
+          max-width: var(--grid-max-width);
+          overflow-x: auto;
+          overflow-y: hidden;
+          scrollbar-width: none;
+        }
+
+        ul {
+          align-items: center;
+          display: flex;
+          flex-direction: row;
+          gap: var(--spacing-component-2);
+        }
+
+        a,
+        li {
+          max-width: none;
+          white-space: nowrap;
+        }
+
+        a.is-active {
+          background-color: var(--blue-40);
+        }
+      }
+    `,
+  ];
+
+  handleSlotchange(event) {
+    const slot = event.target;
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+    const breadcrumbContainer = this.shadowRoot.querySelector("ul");
+
+    // Create an array to hold the IDs of all the anchor links in the nav
+    const navItemIds = [];
+
+    assignedNodes.forEach((node) => {
+      if (node.tagName === "UL") {
+        const liElements = node.querySelectorAll("li");
+        liElements.forEach((li) => {
+          breadcrumbContainer.appendChild(li.cloneNode(true));
+          // If it's an anchor link (starting with '#') add the anchor ID to the navItemIds array
+          const linkUrl = li.querySelector("a")?.getAttribute("href");
+          if (linkUrl && linkUrl.startsWith("#")) {
+            navItemIds.push(linkUrl.substring(1));
+          }
+        });
+      }
+    });
+
+    // Add a scroll event listener to highlight the active nav
+    window.addEventListener("scroll", () => this.updateActiveNav(navItemIds));
+  }
+
+  updateActiveNav(navItemIds) {
+    const scrollPosition = window.scrollY;
+    let activeSectionId = null;
+
+    navItemIds.forEach((id) => {
+      const section = document.getElementById(id);
+      if (section && section.offsetTop <= scrollPosition + 256) {
+        activeSectionId = id;
+      }
+    });
+
+    this.shadowRoot.querySelectorAll("li a").forEach((item) => {
+      item.classList.remove("is-active");
+    });
+
+    if (activeSectionId) {
+      const activeNavItem = this.shadowRoot.querySelector(
+        `li a[href*="#${activeSectionId}"]`,
+      );
+      if (activeNavItem) {
+        activeNavItem.classList.add("is-active");
+      }
+    }
+  }
+
+  render() {
+    return html`
+      <slot @slotchange=${this.handleSlotchange}></slot>
+      <nav>
+        <ul>
+          <li><strong>On this page: &ensp;</strong></li>
+        </ul>
+      </nav>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-page-nav")) {
+  customElements.define("cfa-page-nav", PageNav);
+}

package/src/components/page-nav.stories.js

@@ -0,0 +1,112 @@
+import { html } from "lit-html";
+import "./page-nav.js";
+
+export default {
+  title: "Molecules/PageNav",
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+const Template = () => html`
+  <cfa-page-nav>
+    <ul>
+      <li>
+        <a href="#actions" target="_self"> Actions </a>
+      </li>
+      <li>
+        <a href="#participate" target="_self"> How to participate </a>
+      </li>
+      <li>
+        <a href="#faq" target="_self"> FAQs </a>
+      </li>
+    </ul>
+  </cfa-page-nav>
+
+  <section id="actions" class="section">
+    <div class="container-fluid wrapper">
+      <h2>Take action</h2>
+      <p>
+        We’re organizing a few types of actions and activities that volunteers
+        can participate in.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet
+        deserunt hic, perspiciatis eligendi doloremque vero ipsa, voluptatum
+        nihil aut dolorem praesentium dolor temporibus nemo? Neque et voluptate
+        asperiores dignissimos maiores. Lorem ipsum dolor, sit amet consectetur
+        adipisicing elit. Quidem, dicta adipisci aut ad delectus, iure sint
+        exercitationem tenetur illum voluptates officia at incidunt numquam
+        corporis, non pariatur quod magnam quasi. Lorem, ipsum dolor sit amet
+        consectetur adipisicing elit. Eveniet vitae, aliquam accusantium maiores
+        animi nobis tenetur, et pariatur amet provident libero exercitationem
+        commodi tempore est ex. Excepturi modi ea ipsam.
+      </p>
+      <p>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus, eum
+        at ipsa cumque, fugiat suscipit veritatis vero ab minus quaerat ipsam
+        enim mollitia dolor! Aperiam, optio ipsum. Est, explicabo quod?
+      </p>
+    </div>
+  </section>
+  <section id="participate" class="section">
+    <div class="container-fluid wrapper">
+      <h2>Participate</h2>
+      <p>
+        In the spirit of collective action (and to reduce weekend Zoom fatigue!)
+        we will be hosting this year’s National Day of Civic Hacking on Gather,
+        where participants will have the opportunity to virtually mingle and
+        make connections. Prepare yourself for the day by reading our Gather
+        Guidelines document or view the Gather Guidelines video. For more
+        information about the platform, please see our FAQs.
+      </p>
+      <p>
+        On the day of the event, we will provide step-by-step guidance for
+        participating in your chosen action(s). You will need a laptop,
+        Wi-Fi/internet access, and should be prepared to use Gather, Zoom,
+        Slack, and Google Docs/Google Sheets; we suggest downloading these
+        applications and becoming familiar with them ahead of time.
+      </p>
+      <p>
+        Interested in organizing an event with your local Brigade or a team of
+        people locally for National Day of Civic Hacking? View this year’s
+        toolkit to learn how you can start preparing for your event.
+      </p>
+    </div>
+  </section>
+  <section id="faq" class="section">
+    <div class="container-fluid wrapper">
+      <h2>Frequently Asked Questions</h2>
+      <h3>Why do we take collective action?</h3>
+      <p>
+        Over the years, common themes have emerged from our Brigade Network on
+        challenges they face locally and opportunities for addressing those
+        challenges. Brigade leaders identified various pain points in addressing
+        these challenges. One Brigade leader commented, “We’re not as powerful
+        as our numbers should make us. We have talented people; we need to give
+        them ways to channel that but we don’t know how to do it.”
+      </p>
+      <p>
+        The National Advisory Council (NAC), an elected group of 10 Brigade
+        members, the Network team, and Brigade leaders from across the country
+        came together—in person and online—to strategize around these challenges
+        and opportunities to support our diverse and growing network across the
+        county. National Day of Civic Hacking emerged as a clear opportunity to
+        come together as a network, focus our efforts, provide dedicated
+        resources to volunteers, amplify actions across the country, and
+        leverage the collective power of all of Code for America’s resources.
+      </p>
+      <h3>Who can participate in National Day of Civic Hacking?</h3>
+      <p>
+        Anyone who wants to volunteer is welcome to participate. While “hacking”
+        is in the name, you don’t need to know how to code to contribute. We
+        welcome people with all kinds of backgrounds—like marketing, community
+        organizing, logistics, engineering, and project management skills, just
+        to name a few!
+      </p>
+    </div>
+  </section>
+`;
+
+export const Default = Template.bind({});
+Default.args = {};