@codeforamerica/marcomms-design-system 1.19.0 → 1.20.0

package/src/components/stat.js

@@ -0,0 +1,92 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common.js";
+import { typographyStyles } from "../shared/typography.js";
+
+class Stat extends LitElement {
+  static properties = {
+    beforeLabel: {},
+    figure: {},
+    afterLabel: {},
+    animated: {},
+  };
+  static styles = [
+    commonStyles,
+    typographyStyles,
+    css`
+      :host {
+        --text-color: var(--text-dark);
+        --highlight-color: var(--purple-20);
+        --highlight-thickness: var(--spacing-layout-half);
+
+        align-self: center;
+        display: block;
+        margin-inline: auto;
+      }
+      .stat {
+        align-items: center;
+        color: var(--text-color);
+        display: flex;
+        flex-direction: column;
+        text-align: center;
+      }
+      .figure {
+        min-width: var(--spacing-layout-3);
+        padding-inline: var(--spacing-component-2);
+      }
+      .figure > span {
+        background-image: linear-gradient(
+          var(--highlight-color),
+          var(--highlight-color)
+        );
+        background-size: 100% var(--highlight-thickness);
+        background-position: bottom 0.15em left;
+        background-repeat: no-repeat;
+        padding-inline: 0.25em;
+      }
+      /* Animation */
+      @media (prefers-reduced-motion: no-preference) {
+        .stat.is-animated .figure > span {
+          background-size: 0% var(--highlight-thickness);
+          transition: background-size 1s ease;
+        }
+        .stat.is-animated.is-visible .figure > span {
+          background-size: 100% var(--highlight-thickness);
+        }
+      }
+    `,
+  ];
+  constructor() {
+    super();
+    this.animated = true;
+  }
+  firstUpdated() {
+    const stat = this.shadowRoot.querySelector(".stat");
+    const callback = (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("is-visible");
+        }
+      });
+    };
+    const options = {
+      rootMargin: "0px 0px -20% 0px",
+    };
+    const myObserver = new IntersectionObserver(callback, options);
+    myObserver.observe(stat);
+  }
+  render() {
+    return html`
+      <div class="stat ${this.animated ? "is-animated" : ""}">
+        <div class="above-label strong">${this.beforeLabel}</div>
+        <div class="figure display-2">
+          <span>${this.figure}</span>
+        </div>
+        <div class="below-label strong">${this.afterLabel}</div>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-stat")) {
+  customElements.define("cfa-stat", Stat);
+}

package/src/components/stat.stories.js

@@ -0,0 +1,28 @@
+import { html } from "lit-html";
+import "./stat";
+
+export default {
+  title: "Atoms/Stat",
+  argTypes: {
+    beforeLabel: { type: "string" },
+    figure: { type: "string" },
+    afterLabel: { type: "string" },
+  },
+};
+
+const Template = ({ beforeLabel, figure, afterLabel }) => html`
+  <cfa-stat
+    beforeLabel="${beforeLabel}"
+    figure="${figure}"
+    afterLabel="${afterLabel}"
+  >
+    ${beforeLabel} ${figure} ${afterLabel}
+  </cfa-stat>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  beforeLabel: "More than",
+  figure: "3.8 million",
+  afterLabel: "people helped",
+};

package/src/components/tab-list.js

@@ -0,0 +1,114 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+import { buttonStyles } from "./button";
+import "./tab";
+
+class TabList extends LitElement {
+  static properties = {};
+  static styles = [
+    commonStyles,
+    buttonStyles,
+    css`
+      :host {
+        display: block;
+        width: calc(100% + var(--outer-margin));
+      }
+
+      .tab-list {
+        display: flex;
+        flex-direction: row;
+        line-height: 1;
+        margin-inline-start: calc(-1 * var(--outer-margin));
+        overflow-x: auto;
+        overflow-y: hidden;
+        scrollbar-width: none;
+        white-space: nowrap;
+      }
+
+      .tab-list::before {
+        content: "";
+        min-width: var(--outer-margin);
+      }
+
+      .tab-list::after {
+        border-bottom: var(--hairline) solid var(--gray-40);
+        content: "";
+        flex-grow: 1;
+        margin-right: var(--outer-margin);
+      }
+
+      ::slotted(*) {
+        max-width: none !important;
+        white-space: nowrap !important;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+  }
+
+  firstUpdated() {
+    this.addEventListener("click", this._onTabClick);
+    this.setAttribute("role", "tablist");
+    this._setInitialAriaAttributes();
+  }
+
+  _setInitialAriaAttributes() {
+    const tabs = this.querySelectorAll("cfa-tab");
+    tabs.forEach((tab, index) => {
+      tab.setAttribute("role", "tab");
+      tab.setAttribute("aria-selected", "false");
+      tab.setAttribute("tabindex", "-1");
+      if (index === 0) {
+        tab.setAttribute("aria-selected", "true");
+        tab.setAttribute("tabindex", "0");
+      }
+    });
+  }
+
+  _onTabClick(event) {
+    const tab = event.target.closest("cfa-tab");
+    if (tab) {
+      this._setActiveTab(tab);
+    }
+  }
+
+  _setActiveTab(activeTab) {
+    const tabs = this.querySelectorAll("cfa-tab");
+    tabs.forEach((tab) => {
+      tab.removeAttribute("active");
+      tab.setAttribute("aria-selected", "false");
+      tab.setAttribute("tabindex", "-1");
+    });
+    activeTab.setAttribute("active", "");
+    activeTab.setAttribute("aria-selected", "true");
+    activeTab.setAttribute("tabindex", "0");
+
+    // Trigger a custom event with the ID for the new tab
+    let tabId = activeTab.id;
+    if (tabId && tabId.startsWith("tab-")) {
+      tabId = tabId.substring(4);
+    }
+    console.log("Tab changed event dispatched with ID:", tabId);
+    this.dispatchEvent(
+      new CustomEvent("tab-changed", {
+        detail: { id: tabId },
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+
+  render() {
+    return html`
+      <div class="tab-list" role="tablist">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-tab-list")) {
+  customElements.define("cfa-tab-list", TabList);
+}

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

@@ -0,0 +1,18 @@
+import { html } from "lit-html";
+import "./tab-list.js";
+
+export default {
+  title: "Molecules/Tabs/TabList",
+};
+
+const Template = () => html`
+  <cfa-tab-list>
+    <cfa-tab id="tab-show-all" active>Show all stories</cfa-tab>
+    <cfa-tab id="tab-announcements">Announcements</cfa-tab>
+    <cfa-tab id="tab-blog-posts">Blog posts</cfa-tab>
+    <cfa-tab id="tab-press-releases">Press releases</cfa-tab>
+  </cfa-tab-list>
+`;
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/tab.js

@@ -0,0 +1,95 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common.js";
+import { typographyStyles } from "../shared/typography.js";
+
+class Tab extends LitElement {
+  static properties = {
+    active: { type: Boolean },
+    panelId: { type: String },
+  };
+
+  static styles = [
+    commonStyles,
+    typographyStyles,
+    css`
+      button {
+        background: none;
+        border: 0;
+        box-shadow: inset 0 calc(-1 * var(--hairline)) 0 0 var(--gray-40);
+        color: var(--gray-80);
+        cursor: pointer;
+        font-family: var(--font-family-sans-serif);
+        font-size: var(--font-size-small);
+        font-weight: normal;
+        padding: var(--spacing-component-2) var(--spacing-component-3)
+          calc(var(--spacing-component-2) + var(--medium));
+      }
+      button:focus {
+        background-color: var(--focus-color);
+        outline: none;
+      }
+      button:not(.active):hover {
+        box-shadow: inset 0 calc(-1 * var(--medium)) 0 0 var(--purple-40);
+        color: var(--black);
+      }
+      button.active {
+        box-shadow: inset 0 calc(-1 * var(--medium)) 0 0 var(--purple-60);
+        color: var(--black);
+        font-weight: bold;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.active = false;
+    this.panelId = "";
+  }
+
+  firstUpdated() {
+    this.addEventListener("keydown", this._onKeyDown);
+  }
+
+  _onKeyDown(event) {
+    const tabs = Array.from(this.parentElement.querySelectorAll("cfa-tab"));
+    const currentIndex = tabs.indexOf(this);
+    let newIndex;
+
+    switch (event.key) {
+      case "ArrowLeft":
+        newIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+        tabs[newIndex].shadowRoot.querySelector("button").focus();
+        break;
+      case "ArrowRight":
+        newIndex = (currentIndex + 1) % tabs.length;
+        tabs[newIndex].shadowRoot.querySelector("button").focus();
+        break;
+      case "Home":
+        tabs[0].shadowRoot.querySelector("button").focus();
+        break;
+      case "End":
+        tabs[tabs.length - 1].shadowRoot.querySelector("button").focus();
+        break;
+      default:
+        break;
+    }
+  }
+
+  render() {
+    return html`
+      <button
+        role="tab"
+        aria-selected="${this.active ? "true" : "false"}"
+        aria-controls="${this.panelId}"
+        class="${this.active ? "active" : ""}"
+        tabindex="${this.active ? "0" : "-1"}"
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-tab")) {
+  customElements.define("cfa-tab", Tab);
+}

package/src/components/tab.stories.js

@@ -0,0 +1,29 @@
+import { html } from "lit-html";
+import "./tab";
+
+export default {
+  title: "Molecules/Tabs/Tab",
+  argTypes: {
+    content: { type: "string" },
+    state: {
+      control: { type: "radio" },
+      options: ["default", "active"],
+    },
+  },
+};
+
+const Template = ({ content, state }) => html`
+  <cfa-tab ?active=${state === "active"}>${content}</cfa-tab>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  content: "Click me",
+  state: "default",
+};
+
+export const Active = Template.bind({});
+Active.args = {
+  content: "Click me",
+  state: "active",
+};

package/src/components/tile.js

@@ -0,0 +1,149 @@
+import { LitElement, html, css, nothing } from "lit";
+import { commonStyles } from "../shared/common.js";
+import { typographyStyles } from "../shared/typography.js";
+import "./blob";
+import "./icon";
+
+class Tile extends LitElement {
+  static properties = {
+    title: { type: String },
+    description: { type: String },
+    actionLabel: { type: String },
+    linkUrl: { type: String },
+    linkTarget: { type: String },
+    imageUrl: { type: String },
+    imageThumbnailUrl: { type: String },
+    imageAltText: { type: String },
+  };
+  static styles = [
+    commonStyles,
+    typographyStyles,
+    css`
+      :host {
+        --bg-color: var(--white);
+        --title-color: var(--purple-60);
+        --text-color: var(--black);
+        --action-label-color: var(--purple-80);
+        --action-label-hover-highlight: var(--purple-20);
+        --blob-color: var(--purple-20);
+
+        align-items: stretch;
+        display: flex;
+        text-align: center;
+        width: 100%;
+      }
+
+      .tile {
+        background-color: var(--bg-color);
+        border-radius: var(--spacing-component-2);
+        border: var(--hairline) solid var(--black-20);
+        color: var(--text-color);
+        display: flex;
+        flex-direction: column;
+        padding: var(--spacing-component-4);
+        text-decoration: none;
+        transition:
+          box-shadow 0.5s ease-in-out,
+          border-color 0.5s ease-in-out;
+        width: 100%;
+      }
+
+      a.tile:hover {
+        box-shadow: var(--shadow-medium);
+        border-color: rgba(0, 0, 0, 0);
+      }
+
+      picture {
+        display: grid;
+        place-items: center;
+        padding-block-end: var(--spacing-layout-1);
+      }
+
+      picture > * {
+        height: var(--spacing-layout-4);
+        grid-area: 1 / 1;
+      }
+
+      cfa-blob {
+        transition: scale 0.5s ease-in-out;
+      }
+
+      a.tile:hover cfa-blob {
+        scale: 1.2;
+      }
+
+      img {
+        object-fit: contain;
+        z-index: 2;
+      }
+
+      .title {
+        color: var(--title-color);
+      }
+
+      .label {
+        color: var(--action-label-color);
+        display: inline-block;
+        margin-block-start: auto;
+        padding-block-start: var(--spacing-layout-half);
+      }
+    `,
+  ];
+  tileContentTemplate() {
+    return html`
+      ${this.imageUrl
+        ? html`
+            <picture>
+              <cfa-blob></cfa-blob>
+              <img
+                src="${this.imageUrl}"
+                alt="${this.imageAltText}"
+                load="lazy"
+              />
+            </picture>
+          `
+        : nothing}
+
+      <div class="title h3">${this.title}</div>
+
+      <!-- Description -->
+      ${this.description
+        ? html` <p class="small">${this.description}</p> `
+        : nothing}
+
+      <!-- Action label -->
+      ${this.actionLabel
+        ? html`
+            <div class="label small strong">
+              ${this.actionLabel}&nbsp;<cfa-icon>arrow_forward</cfa-icon>
+            </div>
+          `
+        : nothing}
+    `;
+  }
+  render() {
+    return html`
+      <style>
+        cfa-blob {
+          --color: var(--blob-color);
+        }
+      </style>
+      ${this.linkUrl
+        ? html`
+            <a
+              href="${this.linkUrl}"
+              target="${this.linkTarget}"
+              rel="${this.linkTarget == "_blank" ? "noopener" : nothing}"
+              class="tile"
+            >
+              ${this.tileContentTemplate()}
+            </a>
+          `
+        : html` <div class="tile">${this.tileContentTemplate()}</div> `}
+    `;
+  }
+}
+
+if (!customElements.get("cfa-tile")) {
+  customElements.define("cfa-tile", Tile);
+}

package/src/components/tile.stories.js

@@ -0,0 +1,41 @@
+import { html } from "lit-html";
+import "./tile.js";
+
+export default {
+  title: "Molecules/Tile",
+  argTypes: {},
+};
+
+const Template = ({
+  title,
+  description,
+  imageUrl,
+  imageAltText,
+  linkUrl,
+  linkTarget,
+  actionLabel,
+}) => html`
+  <cfa-tile
+    title="${title}"
+    description="${description}"
+    imageUrl="${imageUrl}"
+    imageAltText="${imageAltText}"
+    linkUrl="${linkUrl}"
+    linkTarget="${linkTarget}"
+    actionLabel="${actionLabel}"
+  >
+  </cfa-tile>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "Build equitable systems",
+  description:
+    "Government services should lead to outcomes that are just and equitable",
+  imageUrl: "https://files.codeforamerica.org/2021/05/28124726/equity.svg",
+  imageAltText:
+    "Icon representing equity, with three people of different heights and the two shorter people standing on a box to be the same height as the tallest person",
+  linkUrl: "#",
+  linkTarget: "_blank",
+  actionLabel: "Learn more",
+};

package/src/components/transcript.js

@@ -0,0 +1,44 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common.js";
+import { typographyStyles } from "../shared/typography.js";
+
+class Transcript extends LitElement {
+  static styles = [
+    commonStyles,
+    typographyStyles,
+    css`
+      :host {
+        --label-color: var(--purple-60);
+
+        display: block;
+        max-width: var(--column-span-8);
+      }
+
+      .label {
+        --text-color: var(--label-color);
+      }
+
+      .text {
+        background-color: var(--white);
+        border: var(--hairline) solid var(--black-20);
+        color: var(--black);
+        height: calc(12 * var(--spacing-layout-1));
+        overflow: auto;
+        padding: var(--spacing-component-3);
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="label eyebrow-with-line">Transcript</div>
+      <div class="text small">
+        <slot />
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-transcript")) {
+  customElements.define("cfa-transcript", Transcript);
+}