@codeforamerica/marcomms-design-system 1.1.4 → 1.2.1

package/src/components/flexible-layout.js

@@ -1,125 +0,0 @@
-import { LitElement, html, css } from "lit";
-import { commonStyles } from "../shared/common";
-import { layoutStyles } from "../shared/layout";
-
-class FlexibleLayout extends LitElement {
-  static properties = {
-    theme: {},
-  };
-  static styles = [
-    commonStyles,
-    layoutStyles,
-    css`
-      :host {
-        --column-gap: var(--gutter-width);
-        --row-gap: var(--spacing-layout-1);
-
-        display: block;
-      }
-
-      .layout {
-        display: flex;
-        flex-direction: column;
-        row-gap: var(--row-gap);
-      }
-
-      /* Theme: one (full-width) */
-      @media (min-width: 768px) {
-        .layout {
-          column-gap: var(--column-gap);
-          display: grid;
-          grid-template-areas: "content-area-1" "content-area-2" "content-area-3" "content-area-4";
-          row-gap: var(--row-gap);
-        }
-
-        .content-area-1 {
-          grid-area: content-area-1;
-        }
-        .content-area-2 {
-          grid-area: content-area-2;
-        }
-        .content-area-3 {
-          grid-area: content-area-3;
-        }
-      }
-
-      @media (min-width: 768px) {
-        .layout--one {
-          grid-template-columns: 1fr;
-          grid-template-areas: "content-area-1";
-        }
-      }
-
-      /* Theme: one-one */
-      @media (min-width: 768px) {
-        .layout--one-one {
-          grid-template-columns: 1fr 1fr;
-          grid-template-areas: "content-area-1 content-area-2";
-        }
-      }
-
-      /* Theme: one-two */
-      @media (min-width: 768px) {
-        .layout--one-two {
-          grid-template-columns: 1fr 2fr;
-          grid-template-areas: "content-area-1 content-area-2";
-        }
-      }
-
-      /* Theme: two-one */
-      @media (min-width: 768px) {
-        .layout--two-one {
-          grid-template-columns: 2fr 1fr;
-          grid-template-areas: "content-area-1 content-area-2";
-        }
-      }
-
-      /* Theme: one-one-one */
-      @media (min-width: 768px) {
-        .layout--one-one-one {
-          grid-template-columns: 1fr 1fr 1fr;
-          grid-template-areas: "content-area-1 content-area-2 content-area-3";
-        }
-      }
-
-      /* Theme: one-one-two */
-      @media (min-width: 768px) {
-        .layout--one-one-two {
-          grid-template-columns: 1fr 1fr 2fr;
-          grid-template-areas: "content-area-1 content-area-2 content-area-3";
-        }
-      }
-
-      /* Theme: one-two-one */
-      @media (min-width: 768px) {
-        .layout--one-two-one {
-          grid-template-columns: 1fr 2fr 1fr;
-          grid-template-areas: "content-area-1 content-area-2 content-area-3";
-        }
-      }
-
-      /* Theme: two-one-one */
-      @media (min-width: 768px) {
-        .layout--two-one-one {
-          grid-template-columns: 2fr 1fr 1fr;
-          grid-template-areas: "content-area-1 content-area-2 content-area-3";
-        }
-      }
-    `,
-  ];
-  render() {
-    return html`
-      <div class="container-fluid wrapper">
-        <div class="layout layout--${this.theme}">
-          <slot name="content-area-1"></slot>
-          <slot name="content-area-2"></slot>
-          <slot name="content-area-3"></slot>
-        </div>
-      </div>
-    `;
-  }
-}
-
-if (!customElements.get("cfa-flexible-layout")) {
-  customElements.define("cfa-flexible-layout", FlexibleLayout);
-}

package/src/components/flexible-layout.stories.js

@@ -1,48 +0,0 @@
-import { html } from "lit-html";
-import "./flexible-layout";
-
-export default {
-  title: "Organisms/FlexibleLayout",
-  argTypes: {
-    theme: {
-      defaultValue: "one-one",
-      options: [
-        "one",
-        "one-one",
-        "one-two",
-        "two-one",
-        "one-one-one",
-        "one-two-one",
-        "one-one-two",
-        "two-one-one",
-      ],
-      control: { type: "radio" },
-    },
-  },
-};
-
-const Template = ({ theme }) => html`
-  <cfa-flexible-layout theme=${theme}>
-    <div slot="content-area-1" class="stack">
-      <div class="cfa-text">
-        <h1>Government can, and should, work well for everyone.</h1>
-        <p>We’ve been working for more than a decade with governments and communities across the country to break down barriers and find real solutions.</p>
-      </div>
-    </div>
-    <div slot="content-area-2" class="stack">
-      <cfa-box>
-        <p>The past several years have shown us the stakes when it doesn’t—and what’s possible when it does. Economic volatility and the ongoing effects of the pandemic have made government services more important than ever, and digital delivery of those services has delivered stability to millions of families in an unstable time.</p>
-      </cfa-box>
-      <cfa-box>
-        <p>The public interest tech community has shown that it’s possible for government to reach people equitably, and to serve them with dignity and respect. </p>
-      </cfa-box>
-    </div>
-    <div slot="content-area-3" class="stack">
-      <div class="cfa-text">
-        <p class="small">We’ve never been as poised as we are right now to drive meaningful, lasting change in government.</p>
-    </div>
-  </cfa-flexible-layout>
-`;
-
-export const Default = Template.bind({});
-Default.args = {};