@codeforamerica/marcomms-design-system 1.19.0 → 1.20.0

package/src/components/icon.js

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

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

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

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

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

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

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

@@ -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",
+};