@codeforamerica/marcomms-design-system 1.19.0 → 1.20.0

package/src/components/button.scss

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

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