@codeforamerica/marcomms-design-system 1.0.0 → 1.0.1

package/src/components/carousel.js

@@ -0,0 +1,182 @@
+// TODO: Add mouse click and drag support to scroll carousel
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+
+class Carousel extends LitElement {
+  static properties = {
+    atScrollStart: { type: Boolean },
+    atScrollEnd: { type: Boolean },
+  };
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --slide-width-mobile: 75vw;
+        --slide-width-desktop: var(--column-span-3);
+
+        display: block;
+        scrollbar-color: transparent transparent;
+        scrollbar-width: 0px;
+        scroll-behavior: smooth;
+        overflow: hidden;
+        -webkit-overflow-scrolling: touch;
+      }
+
+      :host(:focus) {
+        outline: none !important;
+      }
+
+      ::-webkit-scrollbar {
+        background: transparent;
+        width: 0px;
+      }
+
+      .carousel {
+        display: flex;
+        gap: var(--spacing-layout-1);
+        overflow-x: scroll;
+        scroll-snap-type: x mandatory;
+        padding-block-start: var(--spacing-layout-half);
+        padding-block-end: var(--spacing-layout-1);
+      }
+
+      .controls {
+        margin-block-start: calc(-1 * var(--spacing-layout-half));
+        margin-block-end: var(--spacing-layout-1);
+        text-align: center;
+      }
+
+      .controls > * + * {
+        margin-inline-start: var(--spacing-layout-half);
+      }
+
+      .controls button {
+        background: transparent;
+        border: none;
+        border-radius: 50%;
+        color: var(--purple-80);
+        cursor: pointer;
+        font-size: var(--font-size-large, 1.25rem);
+        height: var(--spacing-layout-2);
+        transition: background-color 0.2s ease-in-out;
+        width: var(--spacing-layout-2);
+      }
+
+      .controls button:hover,
+      .controls button:focus {
+        background-color: var(--white, #fff);
+      }
+
+      .controls button:focus {
+        outline: var(--focus-outline);
+      }
+
+      .controls button.disabled {
+        color: var(--black-20);
+        cursor: default;
+      }
+
+      .controls button.disabled:hover,
+      .controls button.disabled:focus {
+        background: transparent;
+        outline: none;
+      }
+
+      ::slotted(*) {
+        flex: 0 0 var(--slide-width-mobile);
+        margin-block: var(--spacing-layout-1);
+        scroll-snap-align: center;
+      }
+
+      @media (min-width: 1024px) {
+        ::slotted(*) {
+          flex: 0 0 var(--slide-width-desktop);
+        }
+
+        .spacer {
+          flex: 0 0
+            calc((100vw - var(--column-span-12)) / 2 - var(--outer-margin));
+        }
+      }
+    `,
+  ];
+  constructor() {
+    super();
+    this.atScrollStart = true;
+    this.atScrollEnd = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+
+    // Scroll slot element with focus into view
+    this.addEventListener("focusin", (event) => {
+      if (event.target.slot === "") {
+        event.target.scrollIntoView({
+          behavior: "smooth",
+          block: "nearest",
+          inline: "center",
+        });
+      }
+    });
+  }
+  scrollPrevious() {
+    const carousel = this.shadowRoot.querySelector(".carousel");
+    const slotItem = this.shadowRoot
+      .querySelector("slot")
+      .assignedElements()[0];
+    const slotItemWidth = slotItem.clientWidth;
+    carousel.scrollBy({ left: -slotItemWidth, behavior: "smooth" });
+  }
+  scrollNext() {
+    const carousel = this.shadowRoot.querySelector(".carousel");
+    const slotItem = this.shadowRoot
+      .querySelector("slot")
+      .assignedElements()[0];
+    const slotItemWidth = slotItem.clientWidth;
+    carousel.scrollBy({ left: slotItemWidth, behavior: "smooth" });
+  }
+  handleScroll(event) {
+    // Check if at start of scroll
+    if (event.target.scrollLeft === 0) {
+      this.atScrollStart = true;
+    } else {
+      this.atScrollStart = false;
+    }
+    // Check if at end of scroll
+    if (
+      Math.round(event.target.scrollLeft + event.target.clientWidth) >=
+      Math.round(event.target.scrollWidth)
+    ) {
+      this.atScrollEnd = true;
+    } else {
+      this.atScrollEnd = false;
+    }
+  }
+  render() {
+    return html`
+      <div class="carousel" @scroll=${this.handleScroll}>
+        <div class="spacer"></div>
+        <slot></slot>
+        <div class="spacer"></div>
+      </div>
+      <div class="controls">
+        <button
+          class="previous ${this.atScrollStart ? "disabled" : ""}"
+          @click="${this.scrollPrevious}"
+        >
+          <cfa-icon>arrow_back</cfa-icon>
+        </button>
+        <button
+          class="next ${this.atScrollEnd ? "disabled" : ""}"
+          @click="${this.scrollNext}"
+        >
+          <cfa-icon>arrow_forward</cfa-icon>
+        </button>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-carousel")) {
+  customElements.define("cfa-carousel", Carousel);
+}

package/src/components/carousel.stories.js

@@ -0,0 +1,61 @@
+import { html } from "lit-html";
+import "./carousel";
+import "./card";
+import "./icon";
+
+export default {
+  title: "Organisms/Carousel",
+};
+
+const Template = () => html`
+  <cfa-carousel>
+    <cfa-card
+      visualType="image"
+      visualUrl="https://codeforamerica.org/wp-content/uploads/2022/03/parents-with-child-768x427.png"
+      visualAltText="Illustration of three adults embracing and smiling"
+      title="Automatic record clearance"
+      text="Working with communities and government to fundamentally transform the process of clearing records."
+      actionLabel="Learn more"
+    >
+    </cfa-card>
+    <cfa-card
+      visualType="image"
+      visualUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png"
+      visualAltText="Illustration of groceries in a shopping basket and paper bag"
+      title="Food benefits"
+      text="Improving access to food assistance and delivery of benefits."
+      actionLabel="Learn more"
+    >
+    </cfa-card>
+    <cfa-card
+      visualType="image"
+      visualUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_family-dinner-768x505.png"
+      visualAltText="Illustration of two children and a child seated at a table, with a notebook and a pencil on the table, the adult pouring into a glass from a pitcher"
+      title="Integrated benefits applications"
+      text="Making it easier for people and families to access all their benefits in one place."
+      actionLabel="Learn more"
+    >
+    </cfa-card>
+    <cfa-card
+      visualType="image"
+      visualUrl="https://files.codeforamerica.org/2021/05/28124704/illustration_friends-talking-768x518.png"
+      visualAltText="Illustration of three adults having a conversation"
+      title="Training and capacity building"
+      text="Helping government serve people in a more human-centered way."
+      actionLabel="Learn more"
+    >
+    </cfa-card>
+    <cfa-card
+      visualType="image"
+      visualUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_on-the-phone-2-768x576.png"
+      visualAltText="Illustration of an adult and child reading together"
+      title="Free, trustworthy tax services"
+      text="Helping people achieve the financial stability they deserve."
+      actionLabel="Learn more"
+    >
+    </cfa-card>
+  </cfa-carousel>
+`;
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/cta.js

@@ -0,0 +1,99 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+import "./blob";
+
+class CTA extends LitElement {
+  static properties = {};
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --bg-color: var(--purple-60);
+        --link-color: var(--white);
+        --link-hover-color: var(--white);
+        --spacing: var(--spacing-layout-1);
+        --text-color: var(--white);
+
+        background-color: var(--bg-color);
+        display: block;
+      }
+
+      a {
+        color: var(--link-color);
+      }
+
+      a:hover {
+        color: var(--link-hover-color);
+      }
+
+      .cta {
+        display: grid;
+      }
+
+      .cta > * {
+        grid-area: 1 / 1;
+      }
+
+      .content {
+        color: var(--text-color);
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing);
+        margin-inline: auto;
+        max-width: var(--column-span-8);
+        padding: var(--spacing-layout-4) var(--outer-margin);
+        position: relative;
+        spacing: var(--spacing-layout-2);
+        text-align: center;
+      }
+
+      .blob {
+        position: relative;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+      }
+
+      cfa-blob {
+        --color: var(--purple-80);
+
+        overflow: hidden;
+        position: absolute;
+        height: 120%;
+        width: 140%;
+        top: -10%;
+        left: -20%;
+      }
+
+      @media (min-width: 768px) {
+        cfa-blob {
+          left: auto;
+          width: 100%;
+          height: 200%;
+          top: -50%;
+        }
+      }
+
+      ::slotted(*) {
+        margin-block: 0 !important;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="cta">
+        <div class="blob">
+          <cfa-blob></cfa-blob>
+        </div>
+        <div class="content">
+          <slot />
+        </div>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-cta")) {
+  customElements.define("cfa-cta", CTA);
+}

package/src/components/cta.stories.js

@@ -0,0 +1,22 @@
+import { html } from "lit-html";
+import "./cta";
+
+export default {
+  title: "Organisms/CTA",
+  argTypes: {
+    content: { type: "string" },
+  },
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+const Template = ({ content }) => html`
+  <cfa-cta .innerHTML="${content}"> </cfa-cta>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  content:
+    '<div class="h3">Is your state ready to transform food assistance delivery?</div><p>Let’s work together to improve government in meaningful ways.</p><div><a href="#" class="cfa-button cfa-button--white">Partner with us</a></div>',
+};

package/src/components/details.scss

@@ -0,0 +1,71 @@
+@use './icon';
+
+details {
+  --color: var(--purple-60);
+  --hover-bg-color: var(--blue-20);
+
+  display: block;
+  max-width: var(--column-span-8);
+  margin-inline: auto;
+  border-block: var(--hairline) solid var(--gray-40);
+  padding-inline: var(--spacing-component-3);
+}
+
+details[open] {
+  padding-block-end: var(--spacing-layout-half);
+}
+
+details[open] > summary {
+  margin-block-end: var(--spacing-layout-half);
+}
+
+details + details {
+  margin-block-start: -1px !important;
+}
+
+details > summary {
+  align-items: center;
+  color: var(--color);
+  cursor: pointer;
+  display: block;
+  flex-direction: row;
+  font-weight: bold;
+  padding-block: var(--spacing-component-3);
+  padding-right: var(--spacing-component-4);
+  position: relative;
+}
+
+details > summary:hover {
+  background-color: var(--hover-bg-color);
+  box-shadow:
+    var(--spacing-component-3) 0 var(--blue-20),
+    calc(-1 * var(--spacing-component-3)) 0 var(--blue-20);
+}
+
+summary::after {
+  @include icon.icon;
+
+  content: 'expand_more';
+  display: block;
+  height: 1rem;
+  line-height: 1rem;
+  margin-top: -0.5rem;
+  position: absolute;
+  right: 0;
+  text-align: right;
+  top: 50%;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  summary::after {
+    transition: transform 0.2s;
+  }
+}
+
+details[open] > summary::after {
+  transform: rotate(180deg);
+}
+
+details > summary + * {
+  margin-block-start: 0 !important;
+}

package/src/components/details.stories.js

@@ -0,0 +1,27 @@
+import { html } from "lit-html";
+import "./details.scss";
+
+export default {
+  title: "Molecules/Details",
+  argTypes: {
+    summary: { type: "string" },
+    text: { type: "string" },
+  },
+};
+
+const Template = ({ summary, text }) => html`
+  <details>
+    <summary>${summary}</summary>
+    <p>${text}</p>
+  </details>
+  <details>
+    <summary>${summary}</summary>
+    <p>${text}</p>
+  </details>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  summary: "Details",
+  text: "Something small enough to escape casual notice.",
+};

package/src/components/flexible-layout.js

@@ -0,0 +1,126 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+import { layoutStyles } from "../shared/layout";
+
+class FlexibleLayout extends LitElement {
+  static properties = {
+    theme: {},
+  };
+  static styles = [
+    commonStyles,
+    layoutStyles,
+    css`
+      :host {
+        --column-gap: var(--gutter-width);
+        --row-gap: var(--spacing-layout-1);
+
+        display: block;
+      }
+
+      .layout {
+        display: flex;
+        flex-direction: column;
+        row-gap: var(--row-gap);
+      }
+
+      /* Theme: one (full-width) */
+      @media (min-width: 768px) {
+        .layout {
+          column-gap: var(--column-gap);
+          display: grid;
+          grid-template-areas: "content-area-1" "content-area-2" "content-area-3" "content-area-4";
+          row-gap: var(--row-gap);
+        }
+
+        .content-area-1 {
+          grid-area: content-area-1;
+        }
+        .content-area-2 {
+          grid-area: content-area-2;
+        }
+        .content-area-3 {
+          grid-area: content-area-3;
+        }
+      }
+
+      @media (min-width: 768px) {
+        .layout--one {
+          grid-template-columns: 1fr;
+          grid-template-areas: "content-area-1";
+        }
+      }
+
+      /* Theme: one-one */
+      @media (min-width: 768px) {
+        .layout--one-one {
+          grid-template-columns: 1fr 1fr;
+          grid-template-areas: "content-area-1 content-area-2";
+        }
+      }
+
+      /* Theme: one-two */
+      @media (min-width: 768px) {
+        .layout--one-two {
+          grid-template-columns: 1fr 2fr;
+          grid-template-areas: "content-area-1 content-area-2";
+        }
+      }
+
+      /* Theme: two-one */
+      @media (min-width: 768px) {
+        .layout--two-one {
+          grid-template-columns: 2fr 1fr;
+          grid-template-areas: "content-area-1 content-area-2";
+        }
+      }
+
+      /* Theme: one-one-one */
+      @media (min-width: 768px) {
+        .layout--one-one-one {
+          grid-template-columns: 1fr 1fr 1fr;
+          grid-template-areas: "content-area-1 content-area-2 content-area-3";
+        }
+      }
+
+      /* Theme: one-one-two */
+      @media (min-width: 768px) {
+        .layout--one-one-two {
+          grid-template-columns: 1fr 1fr 2fr;
+          grid-template-areas: "content-area-1 content-area-2 content-area-3";
+        }
+      }
+
+      /* Theme: one-two-one */
+      @media (min-width: 768px) {
+        .layout--one-two-one {
+          grid-template-columns: 1fr 2fr 1fr;
+          grid-template-areas: "content-area-1 content-area-2 content-area-3";
+        }
+      }
+
+      /* Theme: two-one-one */
+      @media (min-width: 768px) {
+        .layout--two-one-one {
+          grid-template-columns: 2fr 1fr 1fr;
+          grid-template-areas: "content-area-1 content-area-2 content-area-3";
+        }
+      }
+    `,
+  ];
+  render() {
+    return html`
+      <div class="container-fluid wrapper">
+        <div class="layout layout--${this.theme}">
+          <slot name="content-area-1"></slot>
+          <slot name="content-area-2"></slot>
+          <slot name="content-area-3"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+customElements.define("cfa-flexible-layout", FlexibleLayout);
+
+if (!customElements.get("cfa-flexible-layout")) {
+  customElements.define("cfa-flexible-layout", FlexibleLayout);
+}

package/src/components/flexible-layout.stories.js

@@ -0,0 +1,48 @@
+import { html } from "lit-html";
+import "./flexible-layout";
+
+export default {
+  title: "Organisms/FlexibleLayout",
+  argTypes: {
+    theme: {
+      defaultValue: "one-one",
+      options: [
+        "one",
+        "one-one",
+        "one-two",
+        "two-one",
+        "one-one-one",
+        "one-two-one",
+        "one-one-two",
+        "two-one-one",
+      ],
+      control: { type: "radio" },
+    },
+  },
+};
+
+const Template = ({ theme }) => html`
+  <cfa-flexible-layout theme=${theme}>
+    <div slot="content-area-1" class="stack">
+      <div class="cfa-text">
+        <h1>Government can, and should, work well for everyone.</h1>
+        <p>We’ve been working for more than a decade with governments and communities across the country to break down barriers and find real solutions.</p>
+      </div>
+    </div>
+    <div slot="content-area-2" class="stack">
+      <cfa-box>
+        <p>The past several years have shown us the stakes when it doesn’t—and what’s possible when it does. Economic volatility and the ongoing effects of the pandemic have made government services more important than ever, and digital delivery of those services has delivered stability to millions of families in an unstable time.</p>
+      </cfa-box>
+      <cfa-box>
+        <p>The public interest tech community has shown that it’s possible for government to reach people equitably, and to serve them with dignity and respect. </p>
+      </cfa-box>
+    </div>
+    <div slot="content-area-3" class="stack">
+      <div class="cfa-text">
+        <p class="small">We’ve never been as poised as we are right now to drive meaningful, lasting change in government.</p>
+    </div>
+  </cfa-flexible-layout>
+`;
+
+export const Default = Template.bind({});
+Default.args = {};