@codeforamerica/marcomms-design-system 1.0.0 → 1.0.1

package/src/components/blob.js

@@ -0,0 +1,119 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+
+class Blob extends LitElement {
+  static properties = {
+    color: {},
+    shape: {},
+    styles: {},
+  };
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --color: var(--blue-20);
+
+        display: block;
+      }
+
+      .blob,
+      svg {
+        height: 100%;
+        width: 100%;
+      }
+
+      svg path {
+        fill: var(--color, #fff);
+      }
+    `,
+  ];
+  constructor() {
+    super();
+    this.shape = "1";
+  }
+  blobTemplate() {
+    let svg;
+    switch (this.shape) {
+      case "1":
+        svg = html`<svg
+          width="628"
+          height="577"
+          viewBox="0 0 628 577"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M304.482 3.44206C399.413 -5.50752 504.225 1.17063 567.446 72.5295C633.526 147.115 639.549 256.491 613.992 352.793C589.57 444.814 526.084 523.087 438.164 559.679C355.477 594.092 265.039 570.416 184.315 531.621C103.504 492.784 22.0294 438.546 3.59029 350.826C-14.5863 264.355 39.2746 183.666 97.1329 116.868C151.394 54.223 221.956 11.2221 304.482 3.44206Z"
+          />
+        </svg>`;
+        break;
+      case "2":
+        svg = html`<svg
+          width="580"
+          height="592"
+          viewBox="0 0 580 592"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M238.814 591.215C210.461 592.077 182.849 587.767 155.66 580.979C60.4457 557.059 4.05766 489.933 0.460672 390.376C-2.50155 306.442 8.71258 223.693 37.2769 144.499C73.2468 44.6185 170.894 -12.5948 276.159 2.81295C358.996 14.9883 437.177 39.3389 499.172 100.108C588.039 187.167 604.437 293.512 544.346 402.767C514.618 456.855 477.59 505.988 426.386 541.544C369.892 580.656 304.723 587.767 238.814 591.215Z"
+          />
+        </svg>`;
+        break;
+      case "3":
+        svg = html`<svg
+          width="620"
+          height="613"
+          viewBox="0 0 620 613"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M619.142 301.769C615.581 212.393 536.92 153.752 466.654 98.7402C397.998 44.9883 323.934 -10.5844 236.421 2.12929C141.656 15.8965 53.9975 76.8338 15.687 164.256C-20.6955 247.277 16.2818 336.243 54.5575 417.127C92.4807 497.265 137.965 580.831 224.139 604.752C314.166 629.742 409.183 593.817 484.092 536.359C559.738 478.336 622.883 395.641 619.142 301.769Z"
+          />
+        </svg>`;
+        break;
+      case "4":
+        svg = html`<svg
+          width="656"
+          height="566"
+          viewBox="0 0 656 566"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M332.011 564.695C235.808 569.34 135.091 552.4 71.2946 488.381C4.66596 421.518 -10.0767 327.738 8.2158 239.764C27.3773 147.61 73.5054 52.3693 169.88 14.2546C263.181 -22.6447 364.8 21.5179 455.491 62.8734C540.631 101.698 627.337 150.367 649.771 233.088C672.265 316.032 626.78 399.503 564.43 464.569C505.684 525.875 422.382 560.331 332.011 564.695Z"
+          />
+        </svg>`;
+        break;
+      default:
+        svg = html`<svg
+          width="628"
+          height="577"
+          viewBox="0 0 628 577"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M304.482 3.44206C399.413 -5.50752 504.225 1.17063 567.446 72.5295C633.526 147.115 639.549 256.491 613.992 352.793C589.57 444.814 526.084 523.087 438.164 559.679C355.477 594.092 265.039 570.416 184.315 531.621C103.504 492.784 22.0294 438.546 3.59029 350.826C-14.5863 264.355 39.2746 183.666 97.1329 116.868C151.394 54.223 221.956 11.2221 304.482 3.44206Z"
+          />
+        </svg>`;
+    }
+    return svg;
+  }
+  render() {
+    return html` <div class="blob">${this.blobTemplate()}</div> `;
+  }
+}
+
+if (!customElements.get("cfa-blob")) {
+  customElements.define("cfa-blob", Blob);
+}

package/src/components/blob.stories.js

@@ -0,0 +1,64 @@
+import { html } from "lit-html";
+import "./blob";
+
+export default {
+  title: "Atoms/Blob",
+  argTypes: {
+    shape: {
+      options: ["1", "2", "3", "4"],
+      control: { type: "inline-radio" },
+    },
+    color: {
+      options: [
+        "white",
+        "gray-20",
+        "gray-40",
+        "gray-60",
+        "gray-80",
+        "sand-20",
+        "sand-40",
+        "sand-60",
+        "sand-80",
+        "purple-20",
+        "purple-40",
+        "purple-60",
+        "purple-80",
+        "red-20",
+        "red-40",
+        "red-60",
+        "red-80",
+        "green-20",
+        "green-40",
+        "green-60",
+        "green-80",
+        "blue-20",
+        "blue-40",
+        "blue-60",
+        "blue-80",
+        "yellow-20",
+        "yellow-40",
+        "yellow-60",
+        "yellow-80",
+      ],
+      control: { type: "select" },
+    },
+  },
+};
+
+const Template = ({ color, shape }) => html`
+  <cfa-blob
+    color="${color}"
+    shape="${shape}"
+    style="
+      height: var(--spacing-layout-6, 10rem); 
+      width: var(--spacing-layout-6, 10rem);
+    "
+  >
+  </cfa-blob>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  color: "purple-40",
+  shape: "1",
+};

package/src/components/box.js

@@ -0,0 +1,55 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+
+class Box extends LitElement {
+  static properties = {
+    theme: {},
+  };
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --bg-color: var(--white);
+        --padding: var(--spacing-component-4);
+        --shadow: var(--shadow-small);
+        --text-color: var(--black);
+
+        display: flex;
+        flex: 1;
+      }
+
+      .box {
+        background-color: var(--bg-color);
+        box-shadow: var(--shadow);
+        color: var(--text-color, #000);
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-layout-half);
+        padding: var(--padding);
+        width: 100%;
+      }
+
+      .box--rounded {
+        border-radius: var(--spacing-layout-half, 0.5rem);
+      }
+
+      ::slotted(*) {
+        --spacing: var(--spacing-layout-half);
+
+        max-width: 100%;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="box ${this.theme ? "box--" + this.theme : ""}">
+        <slot />
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-box")) {
+  customElements.define("cfa-box", Box);
+}

package/src/components/box.stories.js

@@ -0,0 +1,24 @@
+import { html } from "lit-html";
+import "./box";
+
+export default {
+  title: "Molecules/Box",
+  argTypes: {
+    theme: {
+      defaultValue: "default",
+      options: ["default", "rounded"],
+      control: { type: "radio" },
+    },
+    content: { type: "string" },
+  },
+};
+
+const Template = ({ theme, content }) => html`
+  <cfa-box theme="${theme}" .innerHTML="${content}"> </cfa-box>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  content:
+    "<p>We deploy <em>human-centered technology</em>, the kind that respects you from the start, meets you where you are, and provides an <strong>easy, positive experience</strong>.<p><a>Learn more</a></p>",
+};

package/src/components/breadcrumbs.js

@@ -0,0 +1,80 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+
+class Breadcrumbs extends LitElement {
+  static properties = {};
+  static styles = [
+    commonStyles,
+    css`
+      slot {
+        display: none;
+      }
+
+      :host {
+        display: block;
+      }
+
+      .breadcrumbs {
+        margin: 0;
+        margin-inline: calc(-1 * var(--outer-margin));
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding: 0;
+        scrollbar-width: none;
+        white-space: nowrap;
+      }
+
+      .breadcrumbs::before,
+      .breadcrumbs::after {
+        content: "";
+        display: inline-block;
+        width: var(--outer-margin);
+      }
+
+      .breadcrumbs > * {
+        display: inline-block;
+        font-size: var(--font-size-small);
+        font-weight: 600;
+        line-height: var(--line-height-small);
+        margin: 0;
+        padding: 0;
+      }
+
+      .breadcrumbs > *:not(:last-child)::after {
+        content: "/";
+        opacity: 0.5;
+        padding-inline: 0.75em;
+      }
+
+      .breadcrumbs a {
+        color: var(--link-color);
+        text-decoration: none;
+      }
+    `,
+  ];
+  handleSlotchange(event) {
+    const slot = event.target;
+    const assignedNodes = slot.assignedNodes({ flatten: true });
+    console.log(assignedNodes);
+    const breadcrumbContainer = this.shadowRoot.querySelector(".breadcrumbs");
+    breadcrumbContainer.innerHTML = ""; // Clear the existing content
+    assignedNodes.forEach((node) => {
+      if (node.tagName === "UL") {
+        const liElements = node.querySelectorAll("li");
+        liElements.forEach((li) => {
+          breadcrumbContainer.appendChild(li.cloneNode(true));
+        });
+      }
+    });
+  }
+  render() {
+    return html`
+      <slot @slotchange=${this.handleSlotchange}></slot>
+      <ul class="breadcrumbs"></ul>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-breadcrumbs")) {
+  customElements.define("cfa-breadcrumbs", Breadcrumbs);
+}

package/src/components/breadcrumbs.stories.js

@@ -0,0 +1,27 @@
+import { html } from "lit-html";
+import "./breadcrumbs";
+
+export default {
+  title: "Molecules/Breadcrumbs",
+  argTypes: {},
+};
+
+const Template = () => html`
+  <cfa-breadcrumbs>
+    <ul>
+      <li>
+        <a href="#">Home</a>
+      </li>
+      <li>
+        <a href="#">Programs</a>
+      </li>
+      <li>
+        <a href="#">Safety Net</a>
+      </li>
+      <li>Food benefits</li>
+    </ul>
+  </cfa-breadcrumbs>
+`;
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/button.js

@@ -0,0 +1,167 @@
+// These are some shared button styles we can use when we need a button in a component
+// NB: make sure the styles in here match those in button.scss
+
+import { css } from "lit";
+
+export const buttonStyles = css`
+  .cfa-button,
+  a.cfa-button, 
+  .cfa-button > a,
+  .wp-block-button > * {
+    --bg-color: var(--white);
+    --border-color: transparent;
+    --font-family: var(--font-family-sans-serif);
+    --font-size: var(--font-size-base);
+    --hover-bg-color: var(--blue-20);
+    --hover-border-color: var(--border-color);
+    --line-height: var(--line-height-base);
+    --text-color: var(--purple-80);
+
+    background-color: var(--bg-color);
+    border: var(--hairline) solid var(--border-color);
+    border-radius: var(--rounded-corners);
+    box-shadow: var(--shadow-small);
+    color: var(--text-color);
+    cursor: pointer;
+    display: block;
+    font-family: var(--font-family);
+    font-size: var(--font-size);
+    font-weight: bold;
+    padding: var(--spacing-component-2) var(--spacing-component-3);
+    text-align: center;
+    text-decoration: none;
+    transition: background-color 0.5s, box-shadow 0.5s;
+
+    &:hover {
+      background-color: var(--hover-bg-color);
+      border-color: var(--hover-border-color);
+      box-shadow: var(--shadow-medium);
+      color: var(--text-color);
+    }
+
+    & cfa-icon {
+      line-height: 1em;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .cfa-button, 
+    a.cfa-button, 
+    .cfa-button > a,
+    .wp-block-button > * {
+      width: 100%;
+      
+      & + & {
+        margin-block-start: var(--spacing-layout-half);
+      }
+    }
+
+    .wp-block-button {
+      width: 100%;
+    }
+  }
+
+  @media (min-width: 768px) {
+    .cfa-button, 
+    a.cfa-button, 
+    .cfa-button > a,
+    .wp-block-button > * {
+      display: inline-block;
+
+      & {
+        margin-block: var(--spacing-component-2);
+        margin-inline-end: var(--spacing-component-2);
+      }
+    }
+  }
+
+  // Themes / variants
+
+  .cfa-button--primary,
+  a.cfa-button--primary,
+  .cfa-button--primary > a,
+  .wp-block-button.is-style-primary > * {
+    --bg-color: var(--red-60);
+    --hover-bg-color: var(--red-80);
+    --text-color: var(--white,);
+  }
+
+  .cfa-button--outline,
+  a.cfa-button--outline,
+  .cfa-button--outline > a,
+  .wp-block-button.is-style-outline > * {
+    --border-color: var(--black-20);
+    --bg-color: transparent;
+  }
+
+  .cfa-button--outline-white,
+  a.cfa-button--outline-white,
+  .cfa-button--outline-white > a,
+  .wp-block-button.is-style-outline-white > * {
+    --border-color: var(--white);
+    --bg-color: transparent;
+    --hover-bg-color: var(--black-20);
+    --shadow-color: var(--white-20);
+    --text-color: var(--white);
+  }
+
+  .cfa-button--prominent-link,
+  a.cfa-button--prominent-link,
+  .cfa-button--prominent-link > a,
+  .wp-block-button.is-style-prominent-link > * {
+    --accent-color: var(--purple-60);
+
+    background: unset;
+    box-shadow: unset;
+    color: inherit;
+    font-weight: bold;
+    padding: 0;
+    text-decoration: underline;
+    text-decoration-color: var(--accent-color);
+    text-decoration-thickness: var(--medium);
+    text-underline-offset: 0.4em;
+    transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;  
+
+    &:hover {
+      --accent-color: var(--red-60);
+      
+      background: unset;
+      box-shadow: unset;
+    }
+
+    &::after {
+      @include icon.icon;
+      
+      content: "arrow_right_alt";
+      display: inline-block;
+      padding-inline-start: 0.1em;
+      text-decoration: none;
+      transition: transform 0.2s ease-in-out;
+      width: 1em;
+    }
+
+    &:hover::after {
+      transform: translateX(0.3em);
+    }
+
+    cfa-icon {
+      text-decoration: none;
+    }
+  }
+
+  // Sizes
+
+  .cfa-button--sm,
+  a.cfa-button--sm,
+  .cfa-button--sm > a {
+    --font-size: var(--font-size-small);
+    --line-height: var(--line-height-small);
+  }
+
+  .cfa-button--md,
+  a.cfa-button--md,
+  .cfa-button--md > a {
+    --font-size: var(--font-size-base);
+    --line-height: var(--line-height-base);
+  }
+`;

package/src/components/button.scss

@@ -0,0 +1,162 @@
+@use '../components/icon';
+
+.cfa-button,
+a.cfa-button, 
+.cfa-button > a,
+.wp-block-button > * {
+  --bg-color: var(--white);
+  --border-color: transparent;
+  --font-family: var(--font-family-sans-serif);
+  --font-size: var(--font-size-base);
+  --hover-bg-color: var(--blue-20);
+  --hover-border-color: var(--border-color);
+  --line-height: var(--line-height-base);
+  --text-color: var(--purple-80);
+
+  background-color: var(--bg-color);
+  border: var(--hairline) solid var(--border-color);
+  border-radius: var(--rounded-corners);
+  box-shadow: var(--shadow-small);
+  color: var(--text-color);
+  cursor: pointer;
+  display: block;
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+  font-weight: bold;
+  padding: var(--spacing-component-2) var(--spacing-component-3);
+  text-align: center;
+  text-decoration: none;
+  transition: background-color 0.5s, box-shadow 0.5s;
+
+  &:hover {
+    background-color: var(--hover-bg-color);
+    border-color: var(--hover-border-color);
+    box-shadow: var(--shadow-medium);
+    color: var(--text-color);
+  }
+
+  & cfa-icon {
+    line-height: 1em;
+  }
+}
+
+@media (max-width: 768px) {
+  .cfa-button, 
+  a.cfa-button, 
+  .cfa-button > a,
+  .wp-block-button > * {
+    width: 100%;
+    
+    & + & {
+      margin-block-start: var(--spacing-layout-half);
+    }
+  }
+
+  .wp-block-button {
+    width: 100%;
+  }
+}
+
+@media (min-width: 768px) {
+  .cfa-button, 
+  a.cfa-button, 
+  .cfa-button > a,
+  .wp-block-button > * {
+    display: inline-block;
+
+    & {
+      margin-block: var(--spacing-component-2);
+      margin-inline-end: var(--spacing-component-2);
+    }
+  }
+}
+
+// Themes / variants
+
+.cfa-button--primary,
+a.cfa-button--primary,
+.cfa-button--primary > a,
+.wp-block-button.is-style-primary > * {
+  --bg-color: var(--red-60);
+  --hover-bg-color: var(--red-80);
+  --text-color: var(--white,);
+}
+
+.cfa-button--outline,
+a.cfa-button--outline,
+.cfa-button--outline > a,
+.wp-block-button.is-style-outline > * {
+  --border-color: var(--black-20);
+  --bg-color: transparent;
+}
+
+.cfa-button--outline-white,
+a.cfa-button--outline-white,
+.cfa-button--outline-white > a,
+.wp-block-button.is-style-outline-white > * {
+  --border-color: var(--white);
+  --bg-color: transparent;
+  --hover-bg-color: var(--black-20);
+  --shadow-color: var(--white-20);
+  --text-color: var(--white);
+}
+
+.cfa-button--prominent-link,
+a.cfa-button--prominent-link,
+.cfa-button--prominent-link > a,
+.wp-block-button.is-style-prominent-link > * {
+  --accent-color: var(--purple-60);
+
+  background: unset;
+  box-shadow: unset;
+  color: inherit;
+  font-weight: bold;
+  padding: 0;
+  text-decoration: underline;
+  text-decoration-color: var(--accent-color);
+  text-decoration-thickness: var(--medium);
+  text-underline-offset: 0.4em;
+  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;  
+
+  &:hover {
+    --accent-color: var(--red-60);
+    
+    background: unset;
+    box-shadow: unset;
+  }
+
+  &::after {
+    @include icon.icon;
+    
+    content: "arrow_right_alt";
+    display: inline-block;
+    padding-inline-start: 0.1em;
+    text-decoration: none;
+    transition: transform 0.2s ease-in-out;
+    width: 1em;
+  }
+
+  &:hover::after {
+    transform: translateX(0.3em);
+  }
+
+  cfa-icon {
+    text-decoration: none;
+  }
+}
+
+// Sizes
+
+.cfa-button--sm,
+a.cfa-button--sm,
+.cfa-button--sm > a {
+  --font-size: var(--font-size-small);
+  --line-height: var(--line-height-small);
+}
+
+.cfa-button--md,
+a.cfa-button--md,
+.cfa-button--md > a {
+  --font-size: var(--font-size-base);
+  --line-height: var(--line-height-base);
+}