@codeforamerica/marcomms-design-system 1.0.0 → 1.1.0

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

package/src/components/person-card.js

@@ -0,0 +1,240 @@
+import { LitElement, html, css, nothing } from "lit";
+import { commonStyles } from "../shared/common";
+import { typographyStyles } from "../shared/typography";
+import "./avatar";
+import "./social-icon";
+
+class PersonCard extends LitElement {
+  static properties = {
+    name: { type: "string" },
+    title: { type: "string" },
+    company: { type: "string" },
+    pronouns: { type: "string" },
+    imageUrl: { type: "string" },
+    imageAltText: { type: "string" },
+    linkUrl: { type: "string" },
+    linkedInUrl: { type: "string" },
+    twitterHandle: { type: "string" },
+  };
+  static styles = [
+    commonStyles,
+    typographyStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .card {
+        border-radius: var(--rounded-corners);
+        position: relative;
+        display: flex;
+        flex-direction: row;
+        margin-inline: auto;
+        max-width: 100%;
+        text-align: start;
+        width: var(--column-span-4);
+        transform: translate(0, 0); // hack to ensure pseudo element is stacked above parent background
+      }
+
+      .card.has-link::before {
+        border-radius: var(--rounded-corners);
+        bottom: calc(-1 * var(--thick));
+        content: "";
+        height: calc(100% + 2 * var(--thick)));
+        left: calc(-1 * var(--thick));
+        position: absolute;
+        right: calc(-1 * var(--thick));
+        top: calc(-1 * var(--thick));
+        width: calc(100% + 2 * var(--thick)));
+        z-index: -1;
+        transition: 
+          background-color 0.5s ease-in-out,
+          box-shadow 0.5s ease-in-out;
+      }
+
+      .card.has-link:hover::before,
+      .card.has-link:focus-visible::before {
+        background-color: var(--white);
+        box-shadow: var(--shadow-medium);
+      }
+
+      .card.has-link .name a {
+        box-shadow: 0;
+        color: var(--purple-80);
+        transition: box-shadow 0.5s ease-in-out;
+      }
+
+      .card.has-link:hover .name a {
+        box-shadow: inset 0 calc(-1 * var(--thick)) 0 0 var(--purple-20);
+      }
+
+      a {
+        position: relative;
+        text-decoration: none;
+        z-index: 1;
+      }
+
+      a.link-overlay {
+        position: static;
+      }
+
+      a.link-overlay::before {
+        content: "";
+        position: absolute;
+        z-index: 0;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+      
+      .avatar {
+        flex-grow: 0;
+      }
+
+      .name {
+        display: inline-block;
+      }
+
+      .pronouns {
+        color: var(--purple-60);
+      }
+      
+      .details {
+        color: var(--black);
+        flex-grow: 1;
+        padding-block-start: var(--spacing-component-2);
+        padding-inline-start: var(--spacing-component-2);
+      }
+
+      .social {
+        font-size: 0.9rem;
+        margin-block-start: var(--spacing-component-1);
+      }
+      
+      .social a {
+        align-items: center;
+        border-radius: 10000px;
+        color: var(--purple-80);
+        display: inline-flex;
+        height: var(--spacing-component-4);
+        justify-content: center;
+        margin: calc(-1 * var(--spacing-component-2));
+        width: var(--spacing-component-4);
+      }
+
+      .social a:hover {
+        background-color: var(--purple-20);
+      }
+
+      .social > a + a {
+        margin-inline-start: var(--spacing-component-2);
+      }
+    `,
+  ];
+  render() {
+    return html`
+      <div class="card ${this.linkUrl ? "has-link" : ""}">
+        <!-- Link overlay pseudo-element so we can do nested links within the card -->
+        ${this.linkUrl
+          ? html`
+              <a
+                href="${this.linkUrl}"
+                target="${this.linkTarget || "_self"}"
+                rel="${this.linkTarget == "_blank" ? "noopener" : nothing}"
+                class="link-overlay"
+                tabindex="-1"
+              >
+              </a>
+            `
+          : ""}
+        <div class="avatar">
+          ${this.linkUrl
+            ? html`
+                <a
+                  href="${this.linkUrl}"
+                  target="${this.linkTarget || "_self"}"
+                  rel="${this.linkTarget == "_blank" ? "noopener" : nothing}"
+                >
+                  <cfa-avatar
+                    imageUrl="${this.imageUrl}"
+                    altText="Avatar photo of ${this.name}"
+                    size="3"
+                  >
+                  </cfa-avatar>
+                </a>
+              `
+            : html`
+                <cfa-avatar
+                  imageUrl="${this.imageUrl}"
+                  altText="Avatar photo of ${this.name}"
+                  size="3"
+                >
+                </cfa-avatar>
+              `}
+        </div>
+        <div class="details">
+          <div>
+            <div class="name h4">
+              ${this.linkUrl
+                ? html`
+                    <a
+                      href="${this.linkUrl}"
+                      target="${this.linkTarget || "_self"}"
+                      rel="${this.linkTarget == "_blank"
+                        ? "noopener"
+                        : nothing}"
+                    >
+                      ${this.name.trim()}
+                    </a>
+                  `
+                : html` ${this.name.trim()} `}
+            </div>
+            ${this.pronouns
+              ? html` <span class="pronouns small">(${this.pronouns})</span> `
+              : ""}
+          </div>
+          <div class="title small">
+            ${[this.title?.trim(), this.company?.trim()]
+              .filter(Boolean)
+              .join(", ")}
+          </div>
+          ${this.linkedInUrl || this.twitterHandle
+            ? html`
+                <div class="social">
+                  ${this.linkedInUrl
+                    ? html`
+                        <a
+                          href="${this.linkedInUrl}"
+                          target="_blank"
+                          rel="noopener"
+                          title="View ${this.name}'s profile on LinkedIn"
+                        >
+                          <cfa-social-icon icon="linkedin" />
+                        </a>
+                      `
+                    : nothing}
+                  ${this.twitterHandle
+                    ? html`
+                        <a
+                          href="https://twitter.com/${this.twitterHandle}"
+                          target="_blank"
+                          rel="noopener"
+                          title="View ${this.name}'s profile on X (Twitter)"
+                        >
+                          <cfa-social-icon icon="twitter" />
+                        </a>
+                      `
+                    : nothing}
+                </div>
+              `
+            : nothing}
+        </div>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-person-card")) {
+  customElements.define("cfa-person-card", PersonCard);
+}

package/src/components/person-card.stories.js

@@ -0,0 +1,58 @@
+import { html } from "lit-html";
+import "./person-card";
+
+export default {
+  title: "Molecules/PersonCard",
+  argTypes: {
+    name: { type: "string" },
+    title: { type: "string" },
+    company: { type: "string" },
+    pronouns: { type: "string" },
+    imageUrl: { type: "string" },
+    imageAltText: { type: "string" },
+    linkUrl: { type: "string" },
+    linkTarget: { type: "string" },
+    linkedInUrl: { type: "string" },
+    twitterHandle: { type: "string" },
+  },
+};
+
+const Template = ({
+  name,
+  title,
+  company,
+  pronouns,
+  imageUrl,
+  imageAltText,
+  linkUrl,
+  linkedInUrl,
+  twitterHandle,
+}) => html`
+  <cfa-person-card
+    name="${name}"
+    title="${title}"
+    company="${company}"
+    pronouns="${pronouns}"
+    imageUrl="${imageUrl}"
+    imageAltText="${imageAltText}"
+    linkUrl="${linkUrl}"
+    linkedInUrl="${linkedInUrl}"
+    twitterHandle="${twitterHandle}"
+  >
+  </cfa-person-card>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  name: "Amanda Renteria",
+  title: "Chief Executive Officer",
+  company: "Code for America",
+  pronouns: "she/her",
+  imageUrl:
+    "https://files.codeforamerica.org/2021/02/13130320/Renteria.Turq_.Standing-scaled-e1678737908242-198x300.jpg",
+  imageAltText: "Headshot photo of Amanda Renteria, Code for America CEO",
+  linkUrl: "https://www.codeforamerica.org/about/people/amanda-renteria",
+  linkTarget: "_blank",
+  linkedInUrl: "https://www.linkedin.com/in/amanda-renteria",
+  twitterHandle: "amandarenteria",
+};

package/src/components/pill.js

@@ -0,0 +1,33 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+
+class Pill extends LitElement {
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --bg-color: var(--gray-20);
+        --text-color: var(--gray-80);
+
+        background-color: var(--bg-color);
+        border-radius: var(--spacing-component-3);
+        color: var(--text-color);
+        display: inline-block;
+        font-size: var(--font-size-small);
+        font-weight: bold;
+        line-height: 1;
+        margin-right: var(--spacing-component-1);
+        padding: var(--spacing-component-1) var(--spacing-component-2);
+        vertical-align: middle;
+      }
+    `,
+  ];
+
+  render() {
+    return html` <slot /> `;
+  }
+}
+
+if (!customElements.get("cfa-pill")) {
+  customElements.define("cfa-pill", Pill);
+}

package/src/components/pill.stories.js

@@ -0,0 +1,23 @@
+import { html } from "lit-html";
+import "./pill";
+
+export default {
+  title: "Atoms/Pill",
+  argTypes: {
+    text: { type: "string" },
+  },
+  parameters: {
+    backgrounds: { default: "white" },
+  },
+};
+
+const Template = ({ text }) => html`
+  <cfa-pill> ${text} </cfa-pill>
+  <cfa-pill> ${text} </cfa-pill>
+  <cfa-pill> ${text} </cfa-pill>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  text: "Qualitative Research",
+};