@codeforamerica/marcomms-design-system 1.18.2 → 1.19.0

package/src/components/icon.js

@@ -1,44 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { commonStyles } from "../shared/common";
-
-class Icon extends LitElement {
-  static styles = [
-    commonStyles,
-    css`
-      :host {
-        --size: 1.2em;
-
-        display: inline;
-        line-height: inherit;
-      }
-
-      .icon {
-        -webkit-font-feature-settings: "liga";
-        direction: ltr;
-        display: inline-block;
-        font-family: "Material Symbols Rounded";
-        font-size: var(--size);
-        font-style: normal;
-        font-weight: normal;
-        letter-spacing: normal;
-        margin-top: -0.1em;
-        text-transform: none;
-        vertical-align: middle;
-        white-space: nowrap;
-        word-wrap: normal;
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <span class="icon">
-        <slot></slot>
-      </span>
-    `;
-  }
-}
-
-if (!customElements.get("cfa-icon")) {
-  customElements.define("cfa-icon", Icon);
-}

package/src/components/icon.scss

@@ -1,32 +0,0 @@
-.cfa-icon {
-  height: var(--spacing-layout-5);
-  margin-left: auto;
-  margin-right: auto;
-  width: var(--spacing-layout-5);
-
-  img {
-    display: block;
-    height: 100%;
-    object-fit: contain;
-    object-position: center center;
-    width: 100%;
-  }
-}
-
-// Mixin
-
-@mixin icon {
-  -webkit-font-feature-settings: 'liga';
-  direction: ltr;
-  display: inline-block;
-  font-family: 'Material Symbols Rounded';
-  font-size: 1.4em; 
-  font-style: normal;
-  font-weight: normal;
-  letter-spacing: normal;
-  text-transform: none;
-  vertical-align: middle;
-  margin-top: -0.1em;
-  white-space: nowrap;
-  word-wrap: normal;
-}

package/src/components/icon.stories.js

@@ -1,38 +0,0 @@
-import { html } from "lit-html";
-import "./icon";
-import { buttonStyles } from "./button";
-
-export default {
-  title: "Atoms/Icon",
-  argTypes: {
-    icon: { type: "string" },
-  },
-};
-
-const Template = ({ icon }) => html` <cfa-icon>${icon}</cfa-icon> `;
-
-export const Default = Template.bind({});
-Default.args = {
-  icon: "info",
-};
-
-export const WithText = () => html`
-  <div>
-    <cfa-icon>info</cfa-icon>
-    <span>Important information</span>
-  </div>
-`;
-
-export const InButton = () => html`
-  <style>
-    ${buttonStyles}
-  </style>
-  <button class="cfa-button cfa-button--primary">
-    Download File
-    <cfa-icon>download</cfa-icon>
-  </button>
-  <button class="cfa-button cfa-button--primary">
-    <cfa-icon>check_circle</cfa-icon>
-    Complete
-  </button>
-`;

package/src/components/label.js

@@ -1,63 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { commonStyles } from "../shared/common.js";
-import { typographyStyles } from "../shared/typography.js";
-
-class Label extends LitElement {
-  static properties = {
-    color: "",
-  };
-
-  static styles = [
-    commonStyles,
-    typographyStyles,
-    css`
-      .label {
-        --background-color: var(--gray-20);
-        --text-color: var(--black, #000);
-
-        background-color: var(--background-color);
-        color: var(--text-color);
-        display: inline-block;
-        line-height: 1em;
-        padding: var(--spacing-component-2) var(--spacing-component-3);
-      }
-
-      .label[color="white"] {
-        --background-color: var(--white, #fff);
-        box-shadow: var(--shadow-small);
-      }
-
-      .label[color="purple"] {
-        --background-color: var(--purple-20);
-      }
-
-      .label[color="red"] {
-        --background-color: var(--red-20);
-      }
-
-      .label[color="blue"] {
-        --background-color: var(--blue-20);
-      }
-
-      .label[color="green"] {
-        --background-color: var(--green-20);
-      }
-
-      .label[color="yellow"] {
-        --background-color: var(--yellow-20);
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <div class="label small strong" color="${this.color}">
-        <slot />
-      </div>
-    `;
-  }
-}
-
-if (!customElements.get("cfa-label")) {
-  customElements.define("cfa-label", Label);
-}

package/src/components/label.stories.js

@@ -1,29 +0,0 @@
-import { html } from "lit-html";
-import "./label";
-
-export default {
-  title: "Atoms/Label",
-  argTypes: {
-    text: { type: "string" },
-    color: {
-      defaultValue: "default",
-      control: {
-        type: "radio",
-        options: ["default", "white", "purple", "red", "blue", "green"],
-      },
-    },
-  },
-};
-
-const Template = ({ text, color }) => html`
-  <cfa-label color="${color}"> ${text} </cfa-label>
-`;
-
-export const Default = Template.bind({});
-Default.args = {
-  text: "Recording available",
-  color: "default",
-};
-Default.parameters = {
-  backgrounds: { default: "white" },
-};

package/src/components/link-list.scss

@@ -1,80 +0,0 @@
-.link-list,
-ul.is-style-link-list, /* WordPress list style class */
-.content ul.is-style-link-list /* WordPress list style class */
-{
-  --bg-color: var(--white);
-  --bg-hover-color: var(--purple-10);
-  --border-color: var(--gray-40);
-  --border-hover-color: var(--purple-60);
-  --text-color: var(--black);
-  --text-hover-color: var(--purple-80);
-  --icon-color: var(--gray-40);
-  --icon-hover-color: var(--purple-60);
-  
-  list-style: none;
-  padding: 0;
-
-  & > li {
-    margin: 0;
-    padding: 0;
-  }
-
-  & > li > a {
-    background-color: var(--bg-color);
-    border: var(--hairline) solid var(--border-color);
-    color: var(--text-color);
-    display: block;
-    padding: var(--spacing-component-3);
-    text-decoration: none;
-  }
-
-  & > li > a:hover,
-  & > li > a:focus {
-    background-color: var(--bg-hover-color);
-    border-color: var(--border-hover-color);
-    color: var(--text-hover-color);
-    position: relative;
-    z-index: 2;
-  }
-
-  & > li:first-child > a {
-    border-top-left-radius: var(--rounded-corners);
-    border-top-right-radius: var(--rounded-corners);
-  }
-
-  & > li:last-child > a {
-    border-bottom-left-radius: var(--rounded-corners);
-    border-bottom-right-radius: var(--rounded-corners);
-  }
-
-  & > li:not(:has(a)) {
-    background-color: var(--gray-20);
-    border: var(--hairline) solid var(--border-color);
-    color: var(--text-color);
-    display: block;
-    padding: var(--spacing-component-3);
-  }
-
-  & > li + li {
-    margin-block-start: calc(-1 * var(--hairline));
-  }
-
-  &:has(cfa-icon) > li > a {
-    padding-left: var(--spacing-component-5);
-    position: relative;
-  }
-
-  & > li > a cfa-icon {
-    color: var(--icon-color);
-    display: block;
-    left: var(--spacing-component-3);
-    position: absolute;
-    text-align: center;
-    width: var(--spacing-component-4);
-  }
-
-  & > li > a:hover cfa-icon,
-  & > li > a:focus cfa-icon {
-    color: var(--icon-hover-color);
-  }
-}

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

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

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

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

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

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

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

@@ -1,40 +0,0 @@
-// 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",
-};