@codeforamerica/marcomms-design-system 1.0.0 → 1.0.1

package/src/components/form-elements.scss

@@ -0,0 +1,305 @@
+@use './icon';
+
+// Form
+
+.cfa-form {
+  --bg-color: var(--white);
+
+  background-color: var(--bg-color);
+  box-shadow: var(--shadow-medium);
+}
+
+// Fieldset
+
+.cfa-fieldset {
+  border: 0;
+  margin: 0;
+  padding: 0;
+
+  & > * + * {
+    margin-block-start: var(--spacing-layout-half);
+  }
+  
+  legend {
+    font-weight: bold;
+  }
+}
+
+// Form group
+
+.cfa-form-group {
+  & > * {
+    display: block;
+  }
+  & + & {
+    margin-block-start: var(--spacing-layout-1);
+  }
+}
+
+// Input container
+
+.cfa-input-container {
+  max-width: 100%;
+  width: min(var(--column-span-6), 100%);
+
+  &:focus-within {
+    outline: var(--focus-outline);
+  }
+
+  & > * {
+    display: block;
+    width: 100%;
+  }
+}
+
+// Label
+
+.cfa-label {
+  flex: 1;
+  flex-grow: 1;
+  font-weight: bold;
+  padding-inline-end: var(--spacing-component-2);
+  padding-block: var(--spacing-component-2)
+}
+
+// Select
+
+.cfa-select { 
+  appearance: none;
+  background-color: var(--white, #fff);
+  background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
+  background-position-x: calc(100% - 5px);
+  background-position-y: 50%;
+  background-repeat: no-repeat;
+  border-radius: 0;
+  border: var(--thin) solid var(--black, #000);
+  color: var(--black, #fff);
+  display: block;
+  font-family: var(--font-family-sans-serif);
+  font-size: 1rem;
+  font-weight: normal;
+  padding-block: var(--spacing-component-2);
+  padding-inline: var(--spacing-component-3);
+  max-width: 100%;
+  position: relative;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+// Multiselect
+
+.cfa-multiselect {
+  background-color: var(--white);
+  border-radius: 0;
+  border: var(--thin) solid var(--black);
+  box-shadow: inset 0 var(--thin) 0 rgb(0 0 0 / 15%);
+  font-family: var(--font-family-sans-serif);
+  font-size: 1rem;
+  font-weight: bold;
+  min-width: var(--column-span-3);
+  max-width: 100%;
+
+  &:focus {
+    outline: none;
+  }
+
+  option {
+    padding-block: var(--spacing-component-2);
+    padding-inline: var(--spacing-component-3);
+  }
+
+  option:focus,
+  option:checked {
+    background-color: var(--green-20);
+  }
+
+}
+
+// Text field
+
+%text-field {
+  background-color: var(--white);
+  border-radius: 0;
+  border: var(--thin) solid var(--black);
+  box-shadow: inset 0px var(--thin) 0px rgb(0 0 0 / 15%);
+  font-family: var(--font-family-sans-serif);
+  font-size: 1rem;
+  font-weight: normal;
+  padding-block: var(--spacing-component-2);
+  padding-inline: var(--spacing-component-3);
+  max-width: 100%;
+}
+
+// Text input
+
+.cfa-text-input {
+  @extend %text-field;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+// Text area
+
+.cfa-text-area {
+  @extend %text-field;
+
+  height: var(--spacing-layout-4);
+  padding: var(--spacing-component-3);
+
+  &:focus {
+    outline: none;
+  }
+}
+
+// Checkbox
+
+.cfa-checkbox {
+  align-items: start;
+  background-color: var(--white);
+  border: var(--thin) solid var(--black);
+  display: flex;
+  flex-direction: row;
+  font-size: var(--font-size-base);
+  gap: var(--spacing-component-2);
+  line-height: var(--line-height-base);
+
+  &:has(input:checked){
+    background-color: var(--green-20);
+  }
+
+  & + & {
+    margin-block-start: var(--spacing-layout-half);
+  }
+
+  input {
+    appearance: none;
+    flex-basis: 1.5rem;
+    flex-grow: 0;
+  }
+  
+  input:focus {
+    outline: none;  
+  }
+
+  input::before {
+    @include icon.icon;
+
+    background-color: var(--white);
+    border-radius: 10%;
+    content: "check_box_outline_blank";
+    flex-basis: 1.5rem;
+    flex-grow: 0;
+    font-size: 1.2rem;
+    line-height: 1em;
+    margin-block-start: calc(var(--line-height-base)/2 - 0.25rem);
+    margin-inline-start: var(--spacing-component-2);
+    text-align: center;
+    width: 1.2rem;
+  }
+
+  input:checked::before {
+    content: "check_box";
+  }
+
+  label {
+    font-weight: normal;
+  }
+}
+
+// Radio button
+
+.cfa-radio-button {
+  align-items: start;
+  background-color: var(--white);
+  border: var(--thin) solid var(--black);
+  display: flex;
+  flex-direction: row;
+  font-size: var(--font-size-base);
+  gap: var(--spacing-component-2);
+  line-height: var(--line-height-base);
+
+  &:has(input:checked){
+    background-color: var(--green-20);
+  }
+
+  & + & {
+    margin-block-start: var(--spacing-layout-half);
+  }
+
+  input {
+    appearance: none;
+    flex-basis: 1.5rem;
+    flex-grow: 0;
+  }
+
+  input:focus {
+    outline: none;  
+  }
+
+  input::before {
+    @include icon.icon;
+
+    background-color: var(--white);
+    border-radius: 50%;
+    content: "radio_button_unchecked";
+    margin-inline: var(--spacing-component-2);
+    overflow: hidden;
+    flex-basis: 1.5rem;
+    font-size: 1.2rem;
+    line-height: 1.2rem;
+    margin-block-start: calc(var(--line-height-base)/2 - 0.25rem);
+    margin-inline: var(--spacing-component-2);
+    text-align: center;
+    width: 1.2rem;
+  }
+
+  input:checked::before {
+    content: "radio_button_checked";
+  }
+
+  label {
+    font-weight: normal;
+  }
+}
+
+// =====
+
+// Date picker
+
+.ui-datepicker {
+  background-color: var(--white);
+  border: solid 1px var(--gray-20);
+  box-shadow: var(--shadow-slight);
+  font-size: var(--font-size-small);
+  letter-spacing: var(--letter-spacing-small);
+  padding: var(--spacing-component-3);
+  text-align: center;
+
+  a:link {
+    text-decoration: none;
+  }
+}
+
+.ui-datepicker-header {
+  display: flex;
+  flex-direction: row;
+  margin-block-end: var(--spacing-component-3);
+
+  & > * {
+    flex-grow: 1;
+  }
+
+  .ui-datepicker-title {
+    flex-grow: 0;
+  }
+}
+
+.ui-datepicker-calendar {
+  td {
+    padding: var(--spacing-component-2);
+  }
+}

package/src/components/form-elements.stories.js

@@ -0,0 +1,134 @@
+import { html } from "lit-html";
+import "./form-elements.scss";
+
+export default {
+  title: "Atoms/FormElements",
+  argTypes: {},
+};
+
+const Template = () => html`
+  <div class="row">
+    <div class="col-xs-12 col-md-6">
+      <div class="cfa-form-group">
+        <label for="text-input-example" class="cfa-label"
+          >What would you like to tell us about apples?</label
+        >
+        <div class="cfa-input-container">
+          <input id="text-input-example" class="cfa-text-input" type="text" />
+        </div>
+      </div>
+      <div class="cfa-form-group">
+        <div class="cfa-input-container">
+          <select class="cfa-select">
+            <option value="" disabled selected>Select your option</option>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+          </select>
+        </div>
+      </div>
+      <div class="cfa-form-group">
+        <div class="cfa-input-container">
+          <select class="cfa-multiselect" multiple>
+            <option value="" disabled selected>Select your option</option>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+          </select>
+        </div>
+      </div>
+      <div class="cfa-form-group">
+        <div class="cfa-input-container">
+          <textarea class="cfa-text-area" placeholder="Text Area"></textarea>
+        </div>
+      </div>
+      <div class="cfa-form-group">
+        <fieldset class="cfa-fieldset">
+          <legend>Which newsletters would you like to receive?</legend>
+          <div class="cfa-input-container cfa-checkbox">
+            <input
+              type="checkbox"
+              id="checkbox-example-1"
+              name="checkbox1"
+              value="marketing"
+            />
+            <label for="checkbox-example-1" class="cfa-label"
+              >Marketing updates</label
+            >
+          </div>
+          <div class="cfa-input-container cfa-checkbox">
+            <input
+              type="checkbox"
+              id="checkbox-example-2"
+              name="checkbox2"
+              value="safety-net"
+            />
+            <label for="checkbox-example-2" class="cfa-label"
+              >Safety net updates</label
+            >
+          </div>
+          <div class="cfa-input-container cfa-checkbox">
+            <input
+              type="checkbox"
+              id="checkbox-example-3"
+              name="checkbox3"
+              value="tax-benefits"
+            />
+            <label for="checkbox-example-3" class="cfa-label"
+              >Tax benefits updates</label
+            >
+          </div>
+        </fieldset>
+      </div>
+      <div class="cfa-form-group">
+        <fieldset class="cfa-fieldset">
+          <div class="cfa-input-container cfa-checkbox">
+            <input
+              type="checkbox"
+              id="checkbox-example-4"
+              name="checkbox1"
+              value="consent"
+            />
+            <label for="checkbox-example-4" class="cfa-label"
+              >I agree to receive direct communications from Code for America,
+              and to the privacy policy.</label
+            >
+          </div>
+        </fieldset>
+      </div>
+      <div class="cfa-form-group">
+        <fieldset class="cfa-fieldset">
+          <legend>What's the best way to reach you?</legend>
+          <div class="cfa-input-container cfa-radio-button">
+            <input
+              type="radio"
+              id="radio-example-1"
+              name="radio1"
+              value="email"
+            />
+            <label for="radio-example-1" class="cfa-label">Email</label>
+          </div>
+          <div class="cfa-input-container cfa-radio-button">
+            <input
+              type="radio"
+              id="radio-example-2"
+              name="radio1"
+              value="text-message"
+            />
+            <label for="radio-example-2" class="cfa-label">Text message</label>
+          </div>
+          <div class="cfa-input-container cfa-radio-button">
+            <input
+              type="radio"
+              id="radio-example-3"
+              name="radio1"
+              value="phone-call"
+            />
+            <label for="radio-example-3" class="cfa-label">Phone call</label>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+`;
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/icon.js

@@ -0,0 +1,41 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common";
+
+class Icon extends LitElement {
+  static styles = [
+    commonStyles,
+    css`
+      :host {
+        --size: 1.2em;
+
+        vertical-align: middle;
+      }
+
+      .icon {
+        -webkit-font-feature-settings: "liga";
+        direction: ltr;
+        display: inline-block;
+        font-family: "Material Symbols Rounded";
+        font-size: var(--size);
+        font-style: normal;
+        font-weight: normal;
+        letter-spacing: normal;
+        text-transform: none;
+        white-space: nowrap;
+        word-wrap: normal;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <span class="icon">
+        <slot></slot>
+      </span>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-icon")) {
+  customElements.define("cfa-icon", Icon);
+}

package/src/components/icon.scss

@@ -0,0 +1,31 @@
+.cfa-icon {
+  height: var(--spacing-layout-5);
+  margin-left: auto;
+  margin-right: auto;
+  width: var(--spacing-layout-5);
+
+  img {
+    display: block;
+    height: 100%;
+    object-fit: contain;
+    object-position: center center;
+    width: 100%;
+  }
+}
+
+// Mixin
+
+@mixin icon {
+  -webkit-font-feature-settings: 'liga';
+  direction: ltr;
+  display: inline-block;
+  font-family: 'Material Symbols Rounded';
+  font-size: 1.4em; 
+  font-style: normal;
+  font-weight: normal;
+  letter-spacing: normal;
+  text-transform: none;
+  vertical-align: middle;
+  white-space: nowrap;
+  word-wrap: normal;
+}

package/src/components/icon.stories.js

@@ -0,0 +1,16 @@
+import { html } from "lit-html";
+import "./icon";
+
+export default {
+  title: "Atoms/Icon",
+  argTypes: {
+    icon: { type: "string" },
+  },
+};
+
+const Template = ({ icon }) => html` <cfa-icon>${icon}</cfa-icon> `;
+
+export const Default = Template.bind({});
+Default.args = {
+  icon: "info",
+};

package/src/components/label.js

@@ -0,0 +1,63 @@
+import { LitElement, html, css } from "lit";
+import { commonStyles } from "../shared/common.js";
+import { typographyStyles } from "../shared/typography.js";
+
+class Label extends LitElement {
+  static properties = {
+    color: "",
+  };
+
+  static styles = [
+    commonStyles,
+    typographyStyles,
+    css`
+      .label {
+        --background-color: var(--gray-20);
+        --text-color: var(--black, #000);
+
+        background-color: var(--background-color);
+        color: var(--text-color);
+        display: inline-block;
+        line-height: 1em;
+        padding: var(--spacing-component-2) var(--spacing-component-3);
+      }
+
+      .label[color="white"] {
+        --background-color: var(--white, #fff);
+        box-shadow: var(--shadow-small);
+      }
+
+      .label[color="purple"] {
+        --background-color: var(--purple-20);
+      }
+
+      .label[color="red"] {
+        --background-color: var(--red-20);
+      }
+
+      .label[color="blue"] {
+        --background-color: var(--blue-20);
+      }
+
+      .label[color="green"] {
+        --background-color: var(--green-20);
+      }
+
+      .label[color="yellow"] {
+        --background-color: var(--yellow-20);
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="label small strong" color="${this.color}">
+        <slot />
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get("cfa-label")) {
+  customElements.define("cfa-label", Label);
+}

package/src/components/label.stories.js

@@ -0,0 +1,29 @@
+import { html } from "lit-html";
+import "./label";
+
+export default {
+  title: "Atoms/Label",
+  argTypes: {
+    text: { type: "string" },
+    color: {
+      defaultValue: "default",
+      control: {
+        type: "radio",
+        options: ["default", "white", "purple", "red", "blue", "green"],
+      },
+    },
+  },
+};
+
+const Template = ({ text, color }) => html`
+  <cfa-label color="${color}"> ${text} </cfa-label>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  text: "Recording available",
+  color: "default",
+};
+Default.parameters = {
+  backgrounds: { default: "white" },
+};

package/src/components/link-list.scss

@@ -0,0 +1,80 @@
+.link-list,
+ul.is-style-link-list, /* WordPress list style class */
+.content ul.is-style-link-list /* WordPress list style class */
+{
+  --bg-color: var(--white);
+  --bg-hover-color: var(--purple-10);
+  --border-color: var(--gray-40);
+  --border-hover-color: var(--purple-60);
+  --text-color: var(--black);
+  --text-hover-color: var(--purple-80);
+  --icon-color: var(--gray-40);
+  --icon-hover-color: var(--purple-60);
+  
+  list-style: none;
+  padding: 0;
+
+  & > li {
+    margin: 0;
+    padding: 0;
+  }
+
+  & > li > a {
+    background-color: var(--bg-color);
+    border: var(--hairline) solid var(--border-color);
+    color: var(--text-color);
+    display: block;
+    padding: var(--spacing-component-3);
+    text-decoration: none;
+  }
+
+  & > li > a:hover,
+  & > li > a:focus {
+    background-color: var(--bg-hover-color);
+    border-color: var(--border-hover-color);
+    color: var(--text-hover-color);
+    position: relative;
+    z-index: 2;
+  }
+
+  & > li:first-child > a {
+    border-top-left-radius: var(--rounded-corners);
+    border-top-right-radius: var(--rounded-corners);
+  }
+
+  & > li:last-child > a {
+    border-bottom-left-radius: var(--rounded-corners);
+    border-bottom-right-radius: var(--rounded-corners);
+  }
+
+  & > li:not(:has(a)) {
+    background-color: var(--gray-20);
+    border: var(--hairline) solid var(--border-color);
+    color: var(--text-color);
+    display: block;
+    padding: var(--spacing-component-3);
+  }
+
+  & > li + li {
+    margin-block-start: calc(-1 * var(--hairline));
+  }
+
+  &:has(cfa-icon) > li > a {
+    padding-left: var(--spacing-component-5);
+    position: relative;
+  }
+
+  & > li > a cfa-icon {
+    color: var(--icon-color);
+    display: block;
+    left: var(--spacing-component-3);
+    position: absolute;
+    text-align: center;
+    width: var(--spacing-component-4);
+  }
+
+  & > li > a:hover cfa-icon,
+  & > li > a:focus cfa-icon {
+    color: var(--icon-hover-color);
+  }
+}