@codeforamerica/marcomms-design-system 1.0.0 → 1.0.1

package/src/components/promo.js

@@ -0,0 +1,83 @@
+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;
+        width: 100%;
+      }
+
+      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,84 @@
+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);
+      }
+
+      figure {
+        margin-inline: auto;
+        max-width: var(--column-span-8);
+        position: relative;
+      }
+
+      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;
+      }
+
+      blockquote::before {
+        color: var(--attribution-color);
+        content: "“";
+        display: block;
+        font-size: var(--font-size-display-1);
+        left: -0.5em;
+        line-height: 1;
+        position: absolute;
+        top: 0;
+        width: 0.25em;
+      }
+
+      ::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;
+      }
+
+      figcaption::before {
+        background-color: currentColor;
+        content: "";
+        display: inline-block;
+        vertical-align: middle;
+        height: var(--hairline);
+        width: var(--spacing-component-4);
+        margin-inline-end: var(--spacing-component-2);
+      }
+    `,
+  ];
+  render() {
+    return html`
+      <figure>
+        <blockquote>
+          <slot name="text"></slot>
+        </blockquote>
+        <figcaption>
+          <slot name="attribution"></slot>
+        </figcaption>
+      </figure>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-quote")) {
+  customElements.define("cfa-quote", Quote);
+}

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,121 @@
+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);
+        box-shadow: var(--shadow-small);
+        color: inherit;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: stretch;
+        margin-inline: auto;
+        max-width: var(--width);
+        text-decoration: none;
+        transition: box-shadow 0.2s ease-in-out;
+        width: 100%;
+      }
+
+      .slide:hover,
+      .slide:focus {
+        box-shadow: var(--shadow-medium);
+      }
+
+      .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 {
+        align-items: center;
+        box-sizing: border-box;
+        display: flex;
+        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,53 @@
+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="stack">
+      <div>
+        <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>
+      </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>
+    </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: "#",
+};