@codeforamerica/marcomms-design-system 1.19.0 → 1.19.1

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 = {};

package/src/components/pager.js

@@ -0,0 +1,98 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common.js";
+import { typographyStyles } from "../shared/typography.js";
+import { buttonStyles } from "./button";
+import "./icon";
+
+class Pager extends LitElement {
+  static properties = {
+    previousTitle: {},
+    previousUrl: {},
+    nextTitle: {},
+    nextUrl: {},
+  };
+
+  static styles = [
+    commonStyles,
+    typographyStyles,
+    buttonStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      * {
+        box-sizing: border-box;
+        text-wrap: comfortable;
+      }
+
+      nav {
+        display: flex;
+        flex-direction: column;
+        column-gap: var(--gutter-width);
+        row-gap: var(--spacing-layout-half);
+      }
+
+      nav > * > * {
+        width: 100%;
+      }
+
+      @media (min-width: 768px) {
+        nav {
+          flex-direction: row-reverse;
+          justify-content: space-between;
+        }
+
+        a {
+          min-width: var(--column-span-4);
+        }
+
+        .next a {
+          text-align: end;
+        }
+
+        .previous a {
+          text-align: start;
+        }
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <nav>
+        <div class="next">
+          ${this.nextUrl
+            ? html`
+                <a href="${this.nextUrl}" class="cfa-button">
+                  <span class="small label"
+                    >Next <cfa-icon>arrow_forward</cfa-icon></span
+                  ><br />
+                  <span class="title normal">${this.nextTitle}</span>
+                </a>
+              `
+            : ""}
+        </div>
+        <div class="previous">
+          ${this.previousUrl
+            ? html`
+                <a
+                  href="${this.previousUrl}"
+                  class="cfa-button cfa-button--outline"
+                >
+                  <span class="small label"
+                    ><cfa-icon>arrow_back</cfa-icon> Previous</span
+                  ><br />
+                  <span class="title normal">${this.previousTitle}</span>
+                </a>
+              `
+            : ""}
+        </div>
+      </nav>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-pager")) {
+  customElements.define("cfa-pager", Pager);
+}

package/src/components/pager.stories.js

@@ -0,0 +1,30 @@
+import { html } from "lit-html";
+import "./pager";
+
+export default {
+  title: "Molecules/Pager",
+  argTypes: {
+    previousTitle: { type: "string" },
+    previousUrl: { type: "string" },
+    nextTitle: { type: "string" },
+    nextUrl: { type: "string" },
+  },
+};
+
+const Template = ({ previousTitle, previousUrl, nextTitle, nextUrl }) => html`
+  <cfa-pager
+    previousTitle="${previousTitle}"
+    previousUrl="${previousUrl}"
+    nextTitle="${nextTitle}"
+    nextUrl="${nextUrl}"
+  >
+  </cfa-pager>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  previousTitle: "How should we measure Safety Net delivery?",
+  previousUrl: "#",
+  nextTitle: "The National Safety Net Scorecard",
+  nextUrl: "#",
+};

package/src/components/pagination.js

@@ -0,0 +1,116 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+import { buttonStyles } from "./button";
+import "./icon";
+
+class Pagination extends LitElement {
+  static properties = {
+    page: { type: Number },
+    totalPages: { type: Number },
+    previousLabel: {},
+    nextLabel: {},
+  };
+  static styles = [
+    commonStyles,
+    buttonStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .pagination {
+        align-items: center;
+        display: flex;
+        flex-direction: row;
+        gap: var(--gutter-width);
+        justify-content: space-between;
+      }
+
+      .pagination > * {
+        flex: 1;
+      }
+
+      .status {
+        font-size: var(--font-size-small);
+        line-height: var(-line-height-small);
+        color: var(--gray-60);
+        text-align: center;
+      }
+
+      @media (max-width: 768px) {
+        .status {
+          display: none;
+        }
+      }
+
+      .previous {
+        text-align: left;
+      }
+
+      .next {
+        text-align: right;
+      }
+    `,
+  ];
+  constructor() {
+    super();
+    this.previousLabel = "Previous";
+    this.nextLabel = "Next";
+    this.page = 1;
+    this.totalPages = 1;
+  }
+
+  render() {
+    return html`
+      <div class="pagination">
+        <div class="previous">
+          ${this.page > 1
+            ? html`
+                <button class="cfa-button" @click="${this.handlePreviousPage}">
+                  <cfa-icon>arrow_back</cfa-icon>&nbsp;${this.previousLabel}
+                </button>
+              `
+            : ""}
+        </div>
+        <div class="status">Page ${this.page} of ${this.totalPages}</div>
+        <div class="next">
+          ${this.page < this.totalPages
+            ? html`
+                <button class="cfa-button" @click="${this.handleNextPage}">
+                  ${this.nextLabel}&nbsp;<cfa-icon>arrow_forward</cfa-icon>
+                </button>
+              `
+            : ""}
+        </div>
+      </div>
+    `;
+  }
+
+  handleNextPage() {
+    if (this.page < this.totalPages) {
+      this.page++;
+      const pageChangeEvent = new CustomEvent("page-change", {
+        bubbles: true,
+        cancelable: true,
+        detail: this.page,
+      });
+      this.dispatchEvent(pageChangeEvent);
+    }
+  }
+
+  handlePreviousPage() {
+    if (this.page > 1) {
+      this.page--;
+      const pageChangeEvent = new CustomEvent("page-change", {
+        bubbles: true,
+        cancelable: true,
+        detail: this.page,
+      });
+      this.dispatchEvent(pageChangeEvent);
+    }
+  }
+}
+
+if (!customElements.get("cfa-pagination")) {
+  customElements.define("cfa-pagination", Pagination);
+}

package/src/components/pagination.stories.js

@@ -0,0 +1,30 @@
+import { html } from "lit-html";
+import "./pagination.js";
+
+export default {
+  title: "Molecules/Pagination",
+  argTypes: {
+    page: { type: "number", min: 1, max: 100 },
+    totalPages: { type: "number", min: 1, max: 100 },
+    previousLabel: { type: "string" },
+    nextLabel: { type: "string" },
+  },
+};
+
+const Template = ({ page, totalPages, previousLabel, nextLabel }) => html`
+  <cfa-pagination
+    page="${page}"
+    totalPages="${totalPages}"
+    previousLabel="${previousLabel}"
+    nextLabel="${nextLabel}"
+  >
+  </cfa-pagination>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  page: 1,
+  totalPages: 3,
+  previousLabel: "Previous",
+  nextLabel: "Next",
+};