@codeforamerica/marcomms-design-system 1.18.2 → 1.19.0

package/src/components/stat.js

@@ -1,92 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,114 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,149 +0,0 @@
-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

@@ -1,41 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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);
-}