@codeforamerica/marcomms-design-system 1.19.0 → 1.19.1

package/src/components/quote.stories.js

@@ -0,0 +1,23 @@
+import { html } from "lit-html";
+import "./quote";
+
+export default {
+  title: "Atoms/Quote",
+  argTypes: {
+    text: { type: "string" },
+    attribution: { type: "string" },
+  },
+};
+
+const Template = ({ text, attribution }) => html`
+  <cfa-quote>
+    <blockquote slot="text" .innerHTML="${text}"></blockquote>
+    <figcaption slot="attribution" .innerHTML="${attribution}"></figcaption>
+  </cfa-quote>
+`;
+
+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.",
+  attribution: "Amanda Renteria, CEO of Code for America",
+};

package/src/components/reveal.js

@@ -0,0 +1,83 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+import "./icon";
+
+class Reveal extends LitElement {
+  static properties = {
+    showLabel: { type: String },
+    hideLabel: { type: String },
+    showIcon: { type: String },
+    hideIcon: { type: String },
+    expanded: { type: Boolean, reflect: true },
+  };
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --color: var(--purple-60);
+        --hover-color: var(--red-60);
+        --margin-top: var(--spacing-layout-half) !important;
+
+        display: flex;
+        flex-direction: column;
+        row-gap: var(--spacing-between, 1rem);
+      }
+
+      :host([expanded]) {
+        --margin-top: var(--spacing) !important;
+      }
+
+      button {
+        background: transparent;
+        border: none;
+        color: var(--color);
+        cursor: pointer;
+        font: inherit;
+        font-size: var(--font-size-small, 0.8rem);
+        font-weight: bold;
+        color: var(--)
+        line-height: normal;
+        margin: 0;
+        overflow: visible;
+        padding: 0;
+        width: auto;
+      }
+
+      button:hover {
+        color: var(--hover-color);
+      }
+    `,
+  ];
+  constructor() {
+    super();
+    this.showLabel = "Show more";
+    this.hideLabel = "Show less";
+    this.showIcon = "expand_more";
+    this.hideIcon = "expand_less";
+    this.expanded = false;
+  }
+  render() {
+    return html`
+      <slot
+        id="content"
+        class="content ${this.expanded ? "is-expanded" : "is-collapsed"}"
+        aria-labelledby="button"
+        ?hidden="${!this.expanded}"
+      ></slot>
+      <div class="controls">
+        <button
+          @click="${() => (this.expanded = !this.expanded)}"
+          aria-expanded="${this.expanded}"
+          aria-controls="content"
+        >
+          ${this.expanded ? this.hideLabel : this.showLabel}
+          <cfa-icon>${this.expanded ? this.hideIcon : this.showIcon}</cfa-icon>
+        </button>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-reveal")) {
+  customElements.define("cfa-reveal", Reveal);
+}

package/src/components/reveal.stories.js

@@ -0,0 +1,40 @@
+import { html } from "lit-html";
+import "./reveal";
+
+export default {
+  title: "Molecules/Reveal",
+  argTypes: {
+    content: { type: "string" },
+    showLabel: { type: "string" },
+    hideLabel: { type: "string" },
+    showIcon: { type: "string" },
+    hideIcon: { type: "string" },
+  },
+};
+
+const Template = ({
+  content,
+  showLabel,
+  hideLabel,
+  showIcon,
+  hideIcon,
+}) => html`
+  <cfa-reveal
+    showLabel="${showLabel}"
+    hideLabel="${hideLabel}"
+    showIcon="${showIcon}"
+    hideIcon="${hideIcon}"
+    .innerHTML="${content}"
+  >
+  </cfa-reveal>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  content:
+    "<div>Government can work for the people, by the people, in the digital age. We believe government at all levels can and should work well for all people.</div><div>We use insights and ideas from real people to guide us to real solutions that break down barriers to meet community needs and improve government in meaningful ways.</div><div>Let’s make it work for everyone.</div>",
+  showLabel: "Show more",
+  hideLabel: "Show less",
+  showIcon: "expand_more",
+  hideIcon: "expand_less",
+};

package/src/components/slide.js

@@ -0,0 +1,122 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+
+class Slide extends LitElement {
+  static properties = {
+    imageUrl: {},
+    imageAltText: {},
+    linkUrl: {},
+    linkTarget: {},
+  };
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --background: var(--white, #fff);
+        --width: var(--column-span-12);
+      }
+
+      .slide {
+        background: var(--background);
+        filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
+        color: inherit;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: stretch;
+        margin-inline: auto;
+        max-width: var(--width);
+        text-decoration: none;
+        transition: filter 0.2s ease-in-out;
+        width: 100%;
+      }
+
+      .slide:hover,
+      .slide:focus {
+        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
+      }
+
+      .image {
+        background-image: url("https://codeforamerica.org/wp-content/themes/cfa-core/static/images/bg-placeholder-03.svg");
+        background-position: center center;
+        background-size: cover;
+        height: var(--spacing-layout-9);
+        position: relative;
+      }
+
+      .image::after {
+        bottom: 0;
+        box-shadow: inset 0 -50px 50px -50px var(--black-40);
+        content: "";
+        left: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        z-index: 2;
+      }
+
+      .image img {
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+      }
+
+      .content {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: var(--spacing-component-4);
+      }
+
+      @media (min-width: 1024px) {
+        .slide {
+          flex-direction: row;
+          min-height: calc(12 * var(--spacing-layout-1));
+        }
+
+        .slide > * {
+          flex-basis: 50%;
+        }
+
+        .image {
+          height: auto;
+        }
+
+        .image::after {
+          box-shadow: inset -50px -50px 50px -50px var(--black-20);
+        }
+      }
+    `,
+  ];
+  constructor() {
+    super();
+    this.linkUrl = "javascript:void(0);";
+    this.linkTarget = "_self";
+  }
+  render() {
+    return html`
+      <a href="${this.linkUrl}" target="${this.linkTarget}" class="slide">
+        <div class="image">
+          ${this.imageUrl
+            ? html`
+                <img
+                  src="${this.imageUrl}"
+                  alt="${this.imageAltText}"
+                  loading="lazy"
+                  onerror="this.style.display='none'"
+                />
+              `
+            : ""}
+        </div>
+        <div class="content">
+          <slot></slot>
+        </div>
+      </a>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-slide")) {
+  customElements.define("cfa-slide", Slide);
+}

package/src/components/slide.stories.js

@@ -0,0 +1,49 @@
+import { html } from "lit-html";
+import "./slide";
+
+export default {
+  title: "Molecules/Slide",
+  argTypes: {
+    imageUrl: { type: "string" },
+    imageAltText: { type: "string" },
+    linkUrl: { type: "string" },
+  },
+};
+
+const Template = ({ imageUrl, imageAltText, linkUrl }) => html`
+  <cfa-slide
+    imageUrl="${imageUrl}"
+    imageAltText="${imageAltText}"
+    linkUrl="${linkUrl}"
+  >
+    <div class="eyebrow" style="color: var(--purple-60)">
+      Featured story
+    </div>
+    <div class="h2">
+      Making Automatic Record Clearance a People Centered, End-to-End
+      Service
+    </div>
+    <p class="small">
+      The state of automatic record clearance in the US shows hope for a
+      future where more people get the help they need to achieve a fresh start
+    </p>
+    <ul class="ul ul--inline-with-separators small strong">
+      <li>Alia Toran-Burrell</li>
+      <li>David Crawford</li>
+    </ul>
+    <div class="small subtle">March 9, 2023</div>
+  </cfa-slide>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  imageUrl:
+    "https://files.codeforamerica.org/2023/03/08131615/record-clearance-blog-1024x571.png",
+  imageAltText: "Illustration of man and child at table",
+  linkUrl: "#",
+};
+
+export const SlideWithoutImage = Template.bind({});
+SlideWithoutImage.args = {
+  linkUrl: "#",
+};

package/src/components/social-icon.js

@@ -0,0 +1,236 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+
+class SocialIcon extends LitElement {
+  static properties = {
+    icon: "",
+  };
+
+  static styles = [
+    commonStyles,
+    css`
+      .social-icon {
+        -moz-osx-font-smoothing: grayscale;
+        -webkit-font-smoothing: antialiased;
+      }
+
+      svg {
+        fill: currentColor;
+        height: 1em;
+        vertical-align: -0.125em;
+        width: 1em;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+  }
+
+  iconTemplate(icon) {
+    switch (icon) {
+      case "bluesky":
+        return html`
+          <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 568 501">
+            <path class="st0" d="M123.1,33.7c65.1,48.9,135.2,148,160.9,201.2,25.7-53.2,95.8-152.3,160.9-201.2,47-35.3,123.1-62.6,123.1,24.3s-9.9,145.7-15.8,166.6c-20.3,72.5-94.2,90.9-159.9,79.7,114.9,19.6,144.1,84.3,81,149.1-119.9,123-172.3-30.9-185.7-70.3-2.5-7.2-3.6-10.6-3.6-7.7,0-2.9-1.2.5-3.6,7.7-13.4,39.4-65.8,193.3-185.7,70.3-63.1-64.8-33.9-129.5,81-149.1-65.7,11.2-139.6-7.3-159.9-79.7C9.9,203.7,0,75.3,0,57.9,0-28.9,76.1-1.6,123.1,33.7Z"/>
+          </svg>
+        `;
+      case "dropbox":
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="16.5"
+            viewBox="0 0 528 512"
+          >
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path
+              d="M264.4 116.3l-132 84.3 132 84.3-132 84.3L0 284.1l132.3-84.3L0 116.3 132.3 32l132.1 84.3zM131.6 395.7l132-84.3 132 84.3-132 84.3-132-84.3zm132.8-111.6l132-84.3-132-83.6L395.7 32 528 116.3l-132.3 84.3L528 284.8l-132.3 84.3-131.3-85z"
+            />
+          </svg>
+        `;
+      case "facebook":
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="16"
+            viewBox="0 0 512 512"
+          >
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path
+              d="M512 256C512 114.6 397.4 0 256 0S0 114.6 0 256C0 376 82.7 476.8 194.2 504.5V334.2H141.4V256h52.8V222.3c0-87.1 39.4-127.5 125-127.5c16.2 0 44.2 3.2 55.7 6.4V172c-6-.6-16.5-1-29.6-1c-42 0-58.2 15.9-58.2 57.2V256h83.6l-14.4 78.2H287V510.1C413.8 494.8 512 386.9 512 256h0z"
+            />
+          </svg>
+        `;
+      case "github":
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="15.5"
+            viewBox="0 0 496 512"
+          >
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path
+              d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"
+            />
+          </svg>
+        `;
+      case "google-drive":
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="16"
+            viewBox="0 0 512 512"
+          >
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path
+              d="M339 314.9L175.4 32h161.2l163.6 282.9H339zm-137.5 23.6L120.9 480h310.5L512 338.5H201.5zM154.1 67.4L0 338.5 80.6 480 237 208.8 154.1 67.4z"
+            />
+          </svg>
+        `;
+      case "google":
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="15.25"
+            viewBox="0 0 488 512"
+          >
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path
+              d="M488 261.8C488 403.3 391.1 504 248 504 110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6 98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4z"
+            />
+          </svg>
+        `;
+      case "instagram":
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="14"
+            viewBox="0 0 448 512"
+          >
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path
+              d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"
+            />
+          </svg>
+        `;
+      case "linkedin":
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="14"
+            viewBox="0 0 448 512"
+          >
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path
+              d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"
+            />
+          </svg>
+        `;
+      case "reddit":
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="16"
+            viewBox="0 0 512 512"
+          >
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path
+              d="M0 256C0 114.6 114.6 0 256 0S512 114.6 512 256s-114.6 256-256 256L37.1 512c-13.7 0-20.5-16.5-10.9-26.2L75 437C28.7 390.7 0 326.7 0 256zM349.6 153.6c23.6 0 42.7-19.1 42.7-42.7s-19.1-42.7-42.7-42.7c-20.6 0-37.8 14.6-41.8 34c-34.5 3.7-61.4 33-61.4 68.4l0 .2c-37.5 1.6-71.8 12.3-99 29.1c-10.1-7.8-22.8-12.5-36.5-12.5c-33 0-59.8 26.8-59.8 59.8c0 24 14.1 44.6 34.4 54.1c2 69.4 77.6 125.2 170.6 125.2s168.7-55.9 170.6-125.3c20.2-9.6 34.1-30.2 34.1-54c0-33-26.8-59.8-59.8-59.8c-13.7 0-26.3 4.6-36.4 12.4c-27.4-17-62.1-27.7-100-29.1l0-.2c0-25.4 18.9-46.5 43.4-49.9l0 0c4.4 18.8 21.3 32.8 41.5 32.8zM177.1 246.9c16.7 0 29.5 17.6 28.5 39.3s-13.5 29.6-30.3 29.6s-31.4-8.8-30.4-30.5s15.4-38.3 32.1-38.3zm190.1 38.3c1 21.7-13.7 30.5-30.4 30.5s-29.3-7.9-30.3-29.6c-1-21.7 11.8-39.3 28.5-39.3s31.2 16.6 32.1 38.3zm-48.1 56.7c-10.3 24.6-34.6 41.9-63 41.9s-52.7-17.3-63-41.9c-1.2-2.9 .8-6.2 3.9-6.5c18.4-1.9 38.3-2.9 59.1-2.9s40.7 1 59.1 2.9c3.1 .3 5.1 3.6 3.9 6.5z"
+            />
+          </svg>
+        `;
+      case "soundcloud":
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="20"
+            viewBox="0 0 640 512"
+          >
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path
+              d="M111.4 256.3l5.8 65-5.8 68.3c-.3 2.5-2.2 4.4-4.4 4.4s-4.2-1.9-4.2-4.4l-5.6-68.3 5.6-65c0-2.2 1.9-4.2 4.2-4.2 2.2 0 4.1 2 4.4 4.2zm21.4-45.6c-2.8 0-4.7 2.2-5 5l-5 105.6 5 68.3c.3 2.8 2.2 5 5 5 2.5 0 4.7-2.2 4.7-5l5.8-68.3-5.8-105.6c0-2.8-2.2-5-4.7-5zm25.5-24.1c-3.1 0-5.3 2.2-5.6 5.3l-4.4 130 4.4 67.8c.3 3.1 2.5 5.3 5.6 5.3 2.8 0 5.3-2.2 5.3-5.3l5.3-67.8-5.3-130c0-3.1-2.5-5.3-5.3-5.3zM7.2 283.2c-1.4 0-2.2 1.1-2.5 2.5L0 321.3l4.7 35c.3 1.4 1.1 2.5 2.5 2.5s2.2-1.1 2.5-2.5l5.6-35-5.6-35.6c-.3-1.4-1.1-2.5-2.5-2.5zm23.6-21.9c-1.4 0-2.5 1.1-2.5 2.5l-6.4 57.5 6.4 56.1c0 1.7 1.1 2.8 2.5 2.8s2.5-1.1 2.8-2.5l7.2-56.4-7.2-57.5c-.3-1.4-1.4-2.5-2.8-2.5zm25.3-11.4c-1.7 0-3.1 1.4-3.3 3.3L47 321.3l5.8 65.8c.3 1.7 1.7 3.1 3.3 3.1 1.7 0 3.1-1.4 3.1-3.1l6.9-65.8-6.9-68.1c0-1.9-1.4-3.3-3.1-3.3zm25.3-2.2c-1.9 0-3.6 1.4-3.6 3.6l-5.8 70 5.8 67.8c0 2.2 1.7 3.6 3.6 3.6s3.6-1.4 3.9-3.6l6.4-67.8-6.4-70c-.3-2.2-2-3.6-3.9-3.6zm241.4-110.9c-1.1-.8-2.8-1.4-4.2-1.4-2.2 0-4.2 .8-5.6 1.9-1.9 1.7-3.1 4.2-3.3 6.7v.8l-3.3 176.7 1.7 32.5 1.7 31.7c.3 4.7 4.2 8.6 8.9 8.6s8.6-3.9 8.6-8.6l3.9-64.2-3.9-177.5c-.4-3-2-5.8-4.5-7.2zm-26.7 15.3c-1.4-.8-2.8-1.4-4.4-1.4s-3.1 .6-4.4 1.4c-2.2 1.4-3.6 3.9-3.6 6.7l-.3 1.7-2.8 160.8s0 .3 3.1 65.6v.3c0 1.7 .6 3.3 1.7 4.7 1.7 1.9 3.9 3.1 6.4 3.1 2.2 0 4.2-1.1 5.6-2.5 1.7-1.4 2.5-3.3 2.5-5.6l.3-6.7 3.1-58.6-3.3-162.8c-.3-2.8-1.7-5.3-3.9-6.7zm-111.4 22.5c-3.1 0-5.8 2.8-5.8 6.1l-4.4 140.6 4.4 67.2c.3 3.3 2.8 5.8 5.8 5.8 3.3 0 5.8-2.5 6.1-5.8l5-67.2-5-140.6c-.2-3.3-2.7-6.1-6.1-6.1zm376.7 62.8c-10.8 0-21.1 2.2-30.6 6.1-6.4-70.8-65.8-126.4-138.3-126.4-17.8 0-35 3.3-50.3 9.4-6.1 2.2-7.8 4.4-7.8 9.2v249.7c0 5 3.9 8.6 8.6 9.2h218.3c43.3 0 78.6-35 78.6-78.3 .1-43.6-35.2-78.9-78.5-78.9zm-296.7-60.3c-4.2 0-7.5 3.3-7.8 7.8l-3.3 136.7 3.3 65.6c.3 4.2 3.6 7.5 7.8 7.5 4.2 0 7.5-3.3 7.5-7.5l3.9-65.6-3.9-136.7c-.3-4.5-3.3-7.8-7.5-7.8zm-53.6-7.8c-3.3 0-6.4 3.1-6.4 6.7l-3.9 145.3 3.9 66.9c.3 3.6 3.1 6.4 6.4 6.4 3.6 0 6.4-2.8 6.7-6.4l4.4-66.9-4.4-145.3c-.3-3.6-3.1-6.7-6.7-6.7zm26.7 3.4c-3.9 0-6.9 3.1-6.9 6.9L227 321.3l3.9 66.4c.3 3.9 3.1 6.9 6.9 6.9s6.9-3.1 6.9-6.9l4.2-66.4-4.2-141.7c0-3.9-3-6.9-6.9-6.9z"
+            />
+          </svg>
+        `;
+      case "threads":
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="14"
+            viewBox="0 0 448 512"
+          >
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path
+              d="M331.5 235.7c2.2 .9 4.2 1.9 6.3 2.8c29.2 14.1 50.6 35.2 61.8 61.4c15.7 36.5 17.2 95.8-30.3 143.2c-36.2 36.2-80.3 52.5-142.6 53h-.3c-70.2-.5-124.1-24.1-160.4-70.2c-32.3-41-48.9-98.1-49.5-169.6V256v-.2C17 184.3 33.6 127.2 65.9 86.2C102.2 40.1 156.2 16.5 226.4 16h.3c70.3 .5 124.9 24 162.3 69.9c18.4 22.7 32 50 40.6 81.7l-40.4 10.8c-7.1-25.8-17.8-47.8-32.2-65.4c-29.2-35.8-73-54.2-130.5-54.6c-57 .5-100.1 18.8-128.2 54.4C72.1 146.1 58.5 194.3 58 256c.5 61.7 14.1 109.9 40.3 143.3c28 35.6 71.2 53.9 128.2 54.4c51.4-.4 85.4-12.6 113.7-40.9c32.3-32.2 31.7-71.8 21.4-95.9c-6.1-14.2-17.1-26-31.9-34.9c-3.7 26.9-11.8 48.3-24.7 64.8c-17.1 21.8-41.4 33.6-72.7 35.3c-23.6 1.3-46.3-4.4-63.9-16c-20.8-13.8-33-34.8-34.3-59.3c-2.5-48.3 35.7-83 95.2-86.4c21.1-1.2 40.9-.3 59.2 2.8c-2.4-14.8-7.3-26.6-14.6-35.2c-10-11.7-25.6-17.7-46.2-17.8H227c-16.6 0-39 4.6-53.3 26.3l-34.4-23.6c19.2-29.1 50.3-45.1 87.8-45.1h.8c62.6 .4 99.9 39.5 103.7 107.7l-.2 .2zm-156 68.8c1.3 25.1 28.4 36.8 54.6 35.3c25.6-1.4 54.6-11.4 59.5-73.2c-13.2-2.9-27.8-4.4-43.4-4.4c-4.8 0-9.6 .1-14.4 .4c-42.9 2.4-57.2 23.2-56.2 41.8l-.1 .1z"
+            />
+          </svg>
+        `;
+      case "twitter":
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="16"
+            viewBox="0 0 512 512"
+          >
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path
+              d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
+            />
+          </svg>
+        `;
+      case "wikipedia":
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="20"
+            viewBox="0 0 640 512"
+          >
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path
+              d="M640 51.2l-.3 12.2c-28.1 .8-45 15.8-55.8 40.3-25 57.8-103.3 240-155.3 358.6H415l-81.9-193.1c-32.5 63.6-68.3 130-99.2 193.1-.3 .3-15 0-15-.3C172 352.3 122.8 243.4 75.8 133.4 64.4 106.7 26.4 63.4 .2 63.7c0-3.1-.3-10-.3-14.2h161.9v13.9c-19.2 1.1-52.8 13.3-43.3 34.2 21.9 49.7 103.6 240.3 125.6 288.6 15-29.7 57.8-109.2 75.3-142.8-13.9-28.3-58.6-133.9-72.8-160-9.7-17.8-36.1-19.4-55.8-19.7V49.8l142.5 .3v13.1c-19.4 .6-38.1 7.8-29.4 26.1 18.9 40 30.6 68.1 48.1 104.7 5.6-10.8 34.7-69.4 48.1-100.8 8.9-20.6-3.9-28.6-38.6-29.4 .3-3.6 0-10.3 .3-13.6 44.4-.3 111.1-.3 123.1-.6v13.6c-22.5 .8-45.8 12.8-58.1 31.7l-59.2 122.8c6.4 16.1 63.3 142.8 69.2 156.7L559.2 91.8c-8.6-23.1-36.4-28.1-47.2-28.3V49.6l127.8 1.1 .2 .5z"
+            />
+          </svg>
+        `;
+      case "youtube":
+        return html`
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            height="16"
+            width="18"
+            viewBox="0 0 576 512"
+          >
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path
+              d="M549.7 124.1c-6.3-23.7-24.8-42.3-48.3-48.6C458.8 64 288 64 288 64S117.2 64 74.6 75.5c-23.5 6.3-42 24.9-48.3 48.6-11.4 42.9-11.4 132.3-11.4 132.3s0 89.4 11.4 132.3c6.3 23.7 24.8 41.5 48.3 47.8C117.2 448 288 448 288 448s170.8 0 213.4-11.5c23.5-6.3 42-24.2 48.3-47.8 11.4-42.9 11.4-132.3 11.4-132.3s0-89.4-11.4-132.3zm-317.5 213.5V175.2l142.7 81.2-142.7 81.2z"
+            />
+          </svg>
+        `;
+      default:
+        return "";
+    }
+  }
+
+  render() {
+    return html`
+      <span class="social-icon ${this.icon}" aria-hidden="true">
+        ${this.iconTemplate(this.icon)}
+      </span>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-social-icon")) {
+  customElements.define("cfa-social-icon", SocialIcon);
+}

package/src/components/social-icon.stories.js

@@ -0,0 +1,36 @@
+import { html } from "lit-html";
+import "./social-icon";
+
+export default {
+  title: "Atoms/SocialIcon",
+  argTypes: {
+    icon: {
+      options: [
+        "bluesky",
+        "dropbox",
+        "facebook",
+        "github",
+        "google-drive",
+        "google",
+        "instagram",
+        "linkedin",
+        "reddit",
+        "soundcloud",
+        "threads",
+        "twitter",
+        "wikipedia",
+        "youtube",
+      ],
+      control: {
+        type: "select",
+      },
+    },
+  },
+};
+
+const Template = ({ icon }) => html` <cfa-social-icon icon="${icon}" /> `;
+
+export const Default = Template.bind({});
+Default.args = {
+  icon: "linkedin",
+};