@codeforamerica/marcomms-design-system 1.0.0 → 1.1.0

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);
+}

package/src/components/button.stories.js

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

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

@@ -0,0 +1,20 @@
+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>',
+};