@codeforamerica/marcomms-design-system 1.19.0 → 1.19.1

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

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

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

package/src/components/promo.js

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

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

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

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

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