@codeforamerica/marcomms-design-system 1.18.2 → 1.19.0

package/src/components/box.stories.js

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

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

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

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

@@ -1,157 +0,0 @@
-@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);
-  }
-}
-
-@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";
-    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.stories.js

@@ -1,49 +0,0 @@
-import { html } from "lit-html";
-import "./button.scss";
-
-export default {
-  title: "Atoms/Button",
-  argTypes: {
-    theme: {
-      options: ["default", "primary", "outline", "outline-white", "prominent-link"],
-      control: { type: "inline-radio" },
-    },
-    size: {
-      options: ["sm", "md"],
-      control: { type: "inline-radio" },
-      defaultValue: "md",
-    },
-  },
-};
-
-const Template = ({ theme, size }) => html`
-  <div class="cfa-button cfa-button--${theme} cfa-button--${size}">Submit</div>
-`;
-
-export const Default = Template.bind({});
-Default.args = {
-  theme: "default",
-};
-
-export const Primary = Template.bind({});
-Primary.args = {
-  theme: "primary",
-};
-
-export const Outline = Template.bind({});
-Outline.args = {
-  theme: "outline",
-};
-
-export const OutlineWhite = Template.bind({});
-OutlineWhite.args = {
-  theme: "outline-white",
-};
-OutlineWhite.parameters = {
-  backgrounds: { default: "purple" },
-};
-
-export const ProminentLink = Template.bind({});
-ProminentLink.args = {
-  theme: "prominent-link",
-};

package/src/components/callout.js

@@ -1,62 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { commonStyles } from "../shared/common";
-import "./icon";
-
-class CallOut extends LitElement {
-  static styles = [
-    commonStyles,
-    css`
-      :host {
-        --background: var(--white);
-        --icon-color: var(--purple-80);
-        --link-color: var(--base-link-color);
-        --link-hover-color: var(--base-link-hover-color);
-        --text-color: var(--black);
-
-        display: block;
-      }
-
-      .callout {
-        align-items: flex-start;
-        background: var(--background);
-        box-shadow: var(--shadow-medium);
-        color: var(--text-color);
-        display: flex;
-        flex-direction: row;
-        gap: var(--spacing-component-2);
-        padding: var(--spacing-component-3);
-      }
-
-      .icon {
-        color: var(--icon-color);
-        flex-direction: column;
-        flex-grow: 0;
-        font-size: var(--font-size-h3);
-        height: 100%;
-        margin-block-start: -0.075em;
-        margin-inline-end: var(--spacing-component-2);
-      }
-
-      .callout + .callout {
-        margin-top: var(--spacing-layout-half);
-      }
-    `,
-  ];
-
-  render() {
-    return html`
-      <div class="callout">
-        <div class="icon">
-          <cfa-icon>info</cfa-icon>
-        </div>
-        <div class="text">
-          <slot></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-if (!customElements.get("cfa-callout")) {
-  customElements.define("cfa-callout", CallOut);
-}

package/src/components/callout.stories.js

@@ -1,20 +0,0 @@
-import { html } from "lit-html";
-import "./callout";
-
-export default {
-  title: "Molecules/CallOut",
-  argTypes: {
-    text: { type: "string" },
-  },
-};
-
-const Template = ({ text }) => html`
-  <cfa-callout>
-    <div .innerHTML="${text}"></div>
-  </cfa-callout>
-`;
-
-export const Default = Template.bind({});
-Default.args = {
-  text: 'It’s not time to go back to “normal,” but to reimagine the status quo. <a href="#">Learn more</a>',
-};