@codeforamerica/marcomms-design-system 1.18.1 → 1.19.0

package/src/components/person-card.js

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

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

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

@@ -1,25 +0,0 @@
-import { html } from "lit-html";
-import "./pill";
-
-export default {
-  title: "Atoms/Pill",
-  argTypes: {
-    text: { type: "string" },
-  },
-  globals: {
-    backgrounds: {
-      value: "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",
-};

package/src/components/placeholder.js

@@ -1,25 +0,0 @@
-import { LitElement, html, css } from "lit";
-
-class Placeholder extends LitElement {
-  static styles = [
-    css`
-      :host {
-        --bg-color: var(--gray-20);
-        --height: var(--line-height-base);
-        
-        display: block;
-        width: 100%;
-        height: var(--height);
-        background-color: var(--bg-color);
-      }
-    `,
-  ];
-
-  render() {
-    return html``;
-  }
-}
-
-if (!customElements.get("cfa-placeholder")) {
-  customElements.define("cfa-placeholder", Placeholder);
-}

package/src/components/placeholder.stories.js

@@ -1,10 +0,0 @@
-import "./placeholder";
-
-export default {
-  title: "Atoms/Placeholder",
-  component: "cfa-placeholder"
-};
-
-export const Default = () => {
-  return document.createElement("cfa-placeholder");
-};

package/src/components/promo.js

@@ -1,82 +0,0 @@
-import { LitElement, html, css, nothing } from "lit";
-import { commonStyles } from "../shared/common";
-import { typographyStyles } from "../shared/typography";
-import "./icon";
-
-class Promo extends LitElement {
-  static properties = {
-    heading: {},
-    text: {},
-    actionLabel: {},
-    linkUrl: {},
-    linkTarget: {},
-  };
-  static styles = [
-    commonStyles,
-    typographyStyles,
-    css`
-      :host {
-        --bg-color: var(--blue-20);
-        --padding: var(--spacing-component-4);
-        --text-color: var(--black);
-        --action-label-color: var(--purple-60);
-        --action-label-hover-color: var(--red-60);
-
-        display: block;
-      }
-
-      .promo,
-      a.promo {
-        background-color: var(--bg-color);
-        box-shadow: var(--shadow-small);
-        color: var(--text-color, #000);
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-layout-half);
-        padding: var(--padding);
-        text-align: center;
-        text-decoration: none;
-        transition: box-shadow 0.2s ease-in-out;
-      }
-
-      a.promo:hover {
-        box-shadow: var(--shadow-medium);
-      }
-
-      .action-label {
-        color: var(--action-label-color);
-      }
-
-      a.promo:hover .action-label {
-        color: var(--action-label-hover-color);
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <a
-        href="${this.linkUrl || "javascript:void(0)"}"
-        target="${this.linkTarget || nothing}"
-        class="promo
-      "
-      >
-        ${this.heading
-          ? html` <div class="h4 sans-serif">${this.heading}</div> `
-          : nothing}
-        ${this.text ? html` <div class="small">${this.text}</div> ` : nothing}
-        ${this.actionLabel
-          ? html`
-              <div class="action-label small strong">
-                ${this.actionLabel} <cfa-icon>arrow_forward</cfa-icon>
-              </div>
-            `
-          : nothing}
-      </a>
-    `;
-  }
-}
-
-if (!customElements.get("cfa-promo")) {
-  customElements.define("cfa-promo", Promo);
-}

package/src/components/promo.stories.js

@@ -1,37 +0,0 @@
-import { html } from "lit-html";
-import "./promo";
-
-export default {
-  title: "Molecules/Promo",
-  argTypes: {
-    heading: { type: "string" },
-    text: { type: "string" },
-    linkUrl: { type: "string" },
-    linkTarget: { type: "string" },
-    actionLabel: { type: "string" },
-  },
-};
-
-const Template = ({ heading, text, linkUrl, linkTarget, actionLabel }) => html`
-  <div class="row center-xs">
-    <div class="col-xs-12 col-md-6">
-      <cfa-promo
-        heading="${heading}"
-        text="${text}"
-        linkUrl="${linkUrl}"
-        linkTarget="${linkTarget}"
-        actionLabel="${actionLabel}"
-      >
-      </cfa-promo>
-    </div>
-  </div>
-`;
-
-export const Default = Template.bind({});
-Default.args = {
-  heading: "Summit 2023",
-  text: "Join us in D.C. next month",
-  linkUrl: "https://summit.codeforamerica.org",
-  linkTarget: "_blank",
-  actionLabel: "Register now",
-};

package/src/components/pullquote.js

@@ -1,42 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { commonStyles } from "../shared/common";
-
-class PullQuote extends LitElement {
-  static properties = {};
-  static styles = [
-    commonStyles,
-    css`
-      :host {
-        --color: var(--purple-60);
-
-        display: block;
-      }
-      blockquote {
-        border-inline-start: var(--thick) solid var(--color);
-        color: var(--color);
-        font-size: var(--font-size-h3);
-        font-weight: 600;
-        line-height: var(--line-height-h3);
-        margin: 0;
-        padding: var(--spacing-layout-half) var(--spacing-layout-1);
-      }
-      p {
-        margin: 0;
-      }
-      p + p {
-        margin-block-start: var(--spacing-layout-half);
-      }
-    `,
-  ];
-  render() {
-    return html`
-      <blockquote>
-        <slot />
-      </blockquote>
-    `;
-  }
-}
-
-if (!customElements.get("cfa-pullquote")) {
-  customElements.define("cfa-pullquote", PullQuote);
-}

package/src/components/pullquote.stories.js

@@ -1,16 +0,0 @@
-import { html } from "lit-html";
-import "./pullquote";
-
-export default {
-  title: "Atoms/PullQuote",
-  argTypes: {},
-};
-
-const Template = ({ text }) => html`
-  <cfa-pullquote .innerHTML="${text}"></cfa-pullquote>
-`;
-
-export const Default = Template.bind({});
-Default.args = {
-  text: "What truly ignites my interest in civic tech is the opportunity to <strong>leverage technology</strong> to close the gap between government and the people it serves.",
-};

package/src/components/quote.js

@@ -1,111 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { commonStyles } from "../shared/common";
-
-class Quote extends LitElement {
-  static properties = {
-    text: {},
-    attribution: {},
-  };
-  static styles = [
-    commonStyles,
-    css`
-      :host {
-        --attribution-color: var(--purple-60);
-        container-type: inline-size;
-        display: block;
-        width: 100%;
-      }
-
-      figure {
-        margin: 0 auto;
-        position: relative;
-        width: 100%;
-      }
-
-      @container (min-width: 25rem) {
-        figure {
-          display: grid;
-          grid-template-columns: 3rem 1fr;
-          column-gap: var(--spacing-layout-1);
-          grid-template-areas: 
-            "icon content";
-        }
-
-        svg {
-          grid-area: icon;
-          margin-block-end: 0;
-        }
-
-        .content {
-          grid-area: content;
-        }
-      }
-
-      blockquote {
-        font-family: var(--font-family-serif);
-        font-size: var(--font-size-h3);
-        line-height: var(--line-height-h3);
-        padding: 0;
-        margin: 0;
-        position: relative;
-      }
-
-      ::slotted(*) {
-        display: inline;
-      }
-
-      figcaption {
-        color: var(--attribution-color);
-        font-size: var(--font-size-small);
-        line-height: var(--line-height-small);
-        font-weight: 600;
-        margin-block-start: var(--spacing-layout-half);
-        margin-inline: 0;
-        position: relative;
-        padding-inline-start: calc(var(--spacing-component-4) + var(--spacing-component-2));
-      }
-
-      figcaption::before {
-        background-color: currentColor;
-        content: "";
-        display: block;
-        position: absolute;
-        left: 0;
-        top: calc(var(--line-height-small) / 2 - var(--hairline) / 2);
-        height: var(--hairline);
-        width: var(--spacing-component-4);
-      }
-
-      svg {
-        display: block;
-        fill: var(--purple-60);
-        height: calc(1.5 * var(--spacing-layout-1));
-        margin-block-end: var(--spacing-layout-half);
-        opacity: 0.5;
-        width: auto;
-      }
-    `,
-  ];
-  render() {
-    return html`
-      <figure>
-        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 339.42 264.4" aria-hidden="true" shape-rendering="geometricPrecision">
-          <path d="M91.69,126.5c-9.19,0-15.39,1-18.59,3,4.01-16,12.59-32.41,25.8-49.21h0c12.8-15.99,26.61-27.79,41.4-35.39h1.2l.61-1.21c3.19-1.2,4.79-4.2,4.79-9,0-3.2-1.39-6-4.21-8.4L104.9,2.29c-1.61-1.2-3.79-1.79-6.6-1.79l-4.2,1.2c-28.8,20.8-51.4,45.6-67.8,74.4C9.09,106.1.5,137.7.5,170.9c0,28.39,8.21,51.2,24.61,68.39,14.79,16.4,33.4,24.61,55.79,24.61,19.61,0,36.6-7.01,51-21,14-14.4,21-31.4,21-51s-6-34.8-18-46.8c-11.6-12.39-26-18.6-43.21-18.6Z"/>
-          <path d="M276.52,126.5c-8.39,0-14.39,1-18,3,4.01-16,12.79-32.4,26.4-49.21,13.21-16,27-27.79,41.4-35.39l.6-1.21c4-1.2,6-4.2,6-9,0-2.8-1.39-5.61-4.21-8.4l-37.8-24c-2-1.2-4.21-1.79-6.6-1.79l-4.2,1.2h-.6c-29.21,20.8-52,45.61-68.39,74.4-17.21,30-25.8,61.6-25.8,94.8,0,28.39,8.21,51.2,24.6,68.39,15.6,16.4,34.61,24.61,57,24.61,19.61,0,36.6-7.01,51-21,14-14.4,21-31.4,21-51s-6-34.8-18-46.8c-11.6-12.39-26.4-18.6-44.4-18.6Z"/>
-        </svg>
-        <div class="content">
-          <blockquote>
-            <slot name="text" /><slot />
-          </blockquote>
-          <figcaption>
-            <slot name="attribution" />
-          </figcaption>
-        </div>
-      </figure>
-    `;
-  }
-}
-
-if (!customElements.get("cfa-quote")) {
-  customElements.define("cfa-quote", Quote);
-}