@codeforamerica/marcomms-design-system 1.18.2 → 1.19.0

package/src/components/carousel.stories.js

@@ -1,165 +0,0 @@
-import { html } from "lit-html";
-import "./carousel";
-import "./card";
-import "./slide";
-
-export default {
-  title: "Organisms/Carousel",
-};
-
-const Template = () => html`
-  <cfa-carousel>
-    <cfa-card
-      visualType="image"
-      visualUrl="https://codeforamerica.org/wp-content/uploads/2022/03/parents-with-child-768x427.png"
-      visualAltText="Illustration of three adults embracing and smiling"
-      title="Automatic record clearance"
-      text="Working with communities and government to fundamentally transform the process of clearing records."
-      actionLabel="Learn more"
-    >
-    </cfa-card>
-    <cfa-card
-      visualType="image"
-      visualUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png"
-      visualAltText="Illustration of groceries in a shopping basket and paper bag"
-      title="Food benefits"
-      text="Improving access to food assistance and delivery of benefits."
-      actionLabel="Learn more"
-    >
-    </cfa-card>
-    <cfa-card
-      visualType="image"
-      visualUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_family-dinner-768x505.png"
-      visualAltText="Illustration of two children and a child seated at a table, with a notebook and a pencil on the table, the adult pouring into a glass from a pitcher"
-      title="Integrated benefits applications"
-      text="Making it easier for people and families to access all their benefits in one place."
-      actionLabel="Learn more"
-    >
-    </cfa-card>
-    <cfa-card
-      visualType="image"
-      visualUrl="https://files.codeforamerica.org/2021/05/28124704/illustration_friends-talking-768x518.png"
-      visualAltText="Illustration of three adults having a conversation"
-      title="Training and capacity building"
-      text="Helping government serve people in a more human-centered way."
-      actionLabel="Learn more"
-    >
-    </cfa-card>
-    <cfa-card
-      visualType="image"
-      visualUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_on-the-phone-2-768x576.png"
-      visualAltText="Illustration of an adult and child reading together"
-      title="Free, trustworthy tax services"
-      text="Helping people achieve the financial stability they deserve."
-      actionLabel="Learn more"
-    >
-    </cfa-card>
-  </cfa-carousel>
-`;
-
-export const Default = Template.bind({});
-Default.args = {};
-
-const SlidesTemplate = () => html`
-  <cfa-carousel itemsPerView="1">
-    <cfa-slide
-      imageUrl="https://codeforamerica.org/wp-content/uploads/2022/03/parents-with-child-768x427.png"
-      imageAltText="Illustration of three adults embracing and smiling"
-      linkUrl="#"
-    >
-      <h2>Automatic record clearance</h2>
-      <p>Working with communities and government to fundamentally transform the process of clearing records.</p>
-    </cfa-slide>
-    <cfa-slide
-      imageUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png"
-      imageAltText="Illustration of groceries in a shopping basket and paper bag"
-      linkUrl="#"
-    >
-      <h2>Food benefits</h2>
-      <p>Improving access to food assistance and delivery of benefits.</p>
-    </cfa-slide>
-    <cfa-slide
-      imageUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_family-dinner-768x505.png"
-      imageAltText="Illustration of two children and an adult seated at a table"
-      linkUrl="#"
-    >
-      <h2>Integrated benefits applications</h2>
-      <p>Making it easier for people and families to access all their benefits in one place.</p>
-    </cfa-slide>
-    <cfa-slide
-      imageUrl="https://files.codeforamerica.org/2021/05/28124704/illustration_friends-talking-768x518.png"
-      imageAltText="Illustration of three adults having a conversation"
-      linkUrl="#"
-    >
-      <h2>Training and capacity building</h2>
-      <p>Helping government serve people in a more human-centered way.</p>
-    </cfa-slide>
-    <cfa-slide
-      imageUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_on-the-phone-2-768x576.png"
-      imageAltText="Illustration of an adult and child reading together"
-      linkUrl="#"
-    >
-      <h2>Free, trustworthy tax services</h2>
-      <p>Helping people achieve the financial stability they deserve.</p>
-    </cfa-slide>
-    <cfa-slide
-      imageUrl="https://codeforamerica.org/wp-content/uploads/2022/03/parents-with-child-768x427.png"
-      imageAltText="Illustration showing community support"
-      linkUrl="#"
-    >
-      <h2>Slide 6 - Community Support</h2>
-      <p>Building stronger communities through technology and human-centered design.</p>
-    </cfa-slide>
-    <cfa-slide
-      imageUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png"
-      imageAltText="Illustration representing accessibility"
-      linkUrl="#"
-    >
-      <h2>Slide 7 - Accessibility</h2>
-      <p>Ensuring digital services are accessible to everyone.</p>
-    </cfa-slide>
-    <cfa-slide
-      imageUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_family-dinner-768x505.png"
-      imageAltText="Illustration of family engagement"
-      linkUrl="#"
-    >
-      <h2>Slide 8 - Family Engagement</h2>
-      <p>Strengthening family connections through innovative services.</p>
-    </cfa-slide>
-    <cfa-slide
-      imageUrl="https://files.codeforamerica.org/2021/05/28124704/illustration_friends-talking-768x518.png"
-      imageAltText="Illustration of partnership and collaboration"
-      linkUrl="#"
-    >
-      <h2>Slide 9 - Partnership</h2>
-      <p>Working collaboratively with partners to create lasting impact.</p>
-    </cfa-slide>
-    <cfa-slide
-      imageUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_on-the-phone-2-768x576.png"
-      imageAltText="Illustration representing digital transformation"
-      linkUrl="#"
-    >
-      <h2>Slide 10 - Digital Transformation</h2>
-      <p>Modernizing government services for the digital age.</p>
-    </cfa-slide>
-    <cfa-slide
-      imageUrl="https://codeforamerica.org/wp-content/uploads/2022/03/parents-with-child-768x427.png"
-      imageAltText="Illustration of inclusive design"
-      linkUrl="#"
-    >
-      <h2>Slide 11 - Inclusive Design</h2>
-      <p>Creating services that work for everyone, including the most vulnerable.</p>
-    </cfa-slide>
-    <cfa-slide
-      imageUrl="https://files.codeforamerica.org/2021/05/28124702/illustration_grocery-768x576.png"
-      imageAltText="Illustration of sustainable solutions"
-      linkUrl="#"
-    >
-      <h2>Slide 12 - Sustainable Solutions</h2>
-      <p>Building scalable systems that create lasting positive change.</p>
-    </cfa-slide>
-  </cfa-carousel>
-`;
-
-export const Slides = SlidesTemplate.bind({});
-Slides.args = {};

package/src/components/details.scss

@@ -1,71 +0,0 @@
-@use './icon';
-
-details {
-  --color: var(--purple-60);
-  --hover-bg-color: var(--blue-20);
-
-  display: block;
-  max-width: var(--column-span-8);
-  margin-inline: auto;
-  border-block: var(--hairline) solid var(--gray-40);
-  padding-inline: var(--spacing-component-3);
-}
-
-details[open] {
-  padding-block-end: var(--spacing-layout-half);
-}
-
-details[open] > summary {
-  margin-block-end: var(--spacing-layout-half);
-}
-
-details + details {
-  margin-block-start: -1px !important;
-}
-
-details > summary {
-  align-items: center;
-  color: var(--color);
-  cursor: pointer;
-  display: block;
-  flex-direction: row;
-  font-weight: bold;
-  padding-block: var(--spacing-component-3);
-  padding-right: var(--spacing-component-4);
-  position: relative;
-}
-
-details > summary:hover {
-  background-color: var(--hover-bg-color);
-  box-shadow:
-    var(--spacing-component-3) 0 var(--blue-20),
-    calc(-1 * var(--spacing-component-3)) 0 var(--blue-20);
-}
-
-summary::after {
-  @include icon.icon;
-
-  content: 'expand_more';
-  display: block;
-  height: 1rem;
-  line-height: 1rem;
-  margin-top: -0.5rem;
-  position: absolute;
-  right: 0;
-  text-align: right;
-  top: 50%;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  summary::after {
-    transition: transform 0.2s;
-  }
-}
-
-details[open] > summary::after {
-  transform: rotate(180deg);
-}
-
-details > summary + * {
-  margin-block-start: 0 !important;
-}

package/src/components/details.stories.js

@@ -1,27 +0,0 @@
-import { html } from "lit-html";
-import "./details.scss";
-
-export default {
-  title: "Molecules/Details",
-  argTypes: {
-    summary: { type: "string" },
-    text: { type: "string" },
-  },
-};
-
-const Template = ({ summary, text }) => html`
-  <details>
-    <summary>${summary}</summary>
-    <p>${text}</p>
-  </details>
-  <details>
-    <summary>${summary}</summary>
-    <p>${text}</p>
-  </details>
-`;
-
-export const Default = Template.bind({});
-Default.args = {
-  summary: "Details",
-  text: "Something small enough to escape casual notice.",
-};

package/src/components/form-elements.scss

@@ -1,304 +0,0 @@
-@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";
-    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-start: 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

@@ -1,134 +0,0 @@
-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 = {};