@pnx-mixtape/mxds 0.0.1

package/src/Layout/Grid/__snapshots__/Grid.stories.ts.snap

@@ -0,0 +1,103 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Grid GridDynamic smoke-test 1`] = `
+<div class="grid grid--dynamic">
+  <div>
+    1
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    3
+  </div>
+</div>
+<div class="grid grid--xs-2-cols">
+  <div>
+    1
+  </div>
+  <div>
+    2
+  </div>
+</div>
+<div class="grid grid--sm-2-cols">
+  <div>
+    1
+  </div>
+  <div>
+    2
+  </div>
+</div>
+<div class="grid grid--md-2-cols">
+  <div>
+    1
+  </div>
+  <div>
+    2
+  </div>
+</div>
+<div class="grid grid--md-3-cols">
+  <div>
+    1
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    3
+  </div>
+</div>
+<div class="grid grid--lg-3-cols">
+  <div>
+    1
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    3
+  </div>
+</div>
+<div class="grid grid--sm-2-cols grid--md-4-cols">
+  <div>
+    1
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    3
+  </div>
+  <div>
+    4
+  </div>
+</div>
+<div class="grid grid--md-2-cols grid--lg-4-cols">
+  <div>
+    1
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    3
+  </div>
+  <div>
+    4
+  </div>
+</div>
+<div class="grid grid--xs-2-cols grid--xl-4-cols">
+  <div>
+    1
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    3
+  </div>
+  <div>
+    4
+  </div>
+</div>
+`;

package/src/Layout/Grid/__snapshots__/Grid.stories.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Grid Breakpoints smoke-test 1`] = `
+<div class="grid grid--md-2-cols grid--lg-4-cols">
+  <div class>
+    1
+  </div>
+  <div class>
+    2
+  </div>
+  <div class>
+    3
+  </div>
+  <div class>
+    4
+  </div>
+</div>
+`;
+
+exports[`Layout/Grid Container smoke-test 1`] = `
+<div class="container">
+  <div class="grid grid--dynamic">
+    <div class>
+      1
+    </div>
+    <div class>
+      2
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Layout/Grid Dynamic smoke-test 1`] = `
+<div class="grid grid--dynamic">
+  <div class>
+    1
+  </div>
+  <div class>
+    2
+  </div>
+  <div class>
+    3
+  </div>
+</div>
+`;
+
+exports[`Layout/Grid Fixed smoke-test 1`] = `
+<div class="grid">
+  <div class="grid--8-col">
+    1
+  </div>
+  <div class="grid--4-col">
+    2
+  </div>
+</div>
+`;
+
+exports[`Layout/Grid List smoke-test 1`] = `
+<ul class="grid">
+  <li class="grid--8-col">
+    1
+  </li>
+  <li class="grid--4-col">
+    2
+  </li>
+</ul>
+`;

package/src/Layout/Grid/container-grid.css

@@ -0,0 +1,190 @@
+/**
+ * Container Grid
+ */
+@layer layout {
+  .grid.container {
+    --container-name: grid-item;
+
+    @container grid-item (min-width: token("breakpoint.l")) {
+      --grid-gap: var(--gap-l);
+    }
+
+    &
+      :is(
+        .grid--11-col,
+        .grid--10-col,
+        .grid--9-col,
+        .grid--8-col,
+        .grid--7-col,
+        .grid--6-col,
+        .grid--5-col,
+        .grid--4-col,
+        .grid--3-col,
+        .grid--2-col,
+        .grid--1-col
+      ) {
+      --grid-repeat: 12;
+      --grid-span: 12;
+    }
+
+    & .grid--11-col {
+      @container grid-item (min-width: token("breakpoint.m")) {
+        --grid-span: 11;
+      }
+    }
+
+    & .grid--10-col {
+      @container grid-item (min-width: token("breakpoint.m")) {
+        --grid-span: 10;
+      }
+    }
+
+    & .grid--9-col {
+      @container grid-item (min-width: token("breakpoint.m")) {
+        --grid-span: 9;
+      }
+    }
+
+    & .grid--8-col {
+      @container grid-item (min-width: token("breakpoint.m")) {
+        --grid-span: 8;
+      }
+    }
+
+    & .grid--7-col {
+      @container grid-item (min-width: token("breakpoint.m")) {
+        --grid-span: 7;
+      }
+    }
+
+    & .grid--6-col {
+      @container grid-item (min-width: token("breakpoint.m")) {
+        --grid-span: 6;
+      }
+    }
+
+    & .grid--5-col {
+      @container grid-item (min-width: token("breakpoint.s")) {
+        --grid-span: 6;
+      }
+
+      @container grid-item (min-width: token("breakpoint.m")) {
+        --grid-span: 5;
+      }
+    }
+
+    & .grid--4-col {
+      @container grid-item (min-width: token("breakpoint.s")) {
+        --grid-span: 6;
+      }
+
+      @container grid-item (min-width: token("breakpoint.m")) {
+        --grid-span: 4;
+      }
+    }
+
+    & .grid--3-col {
+      @container grid-item (min-width: token("breakpoint.s")) {
+        --grid-span: 6;
+      }
+
+      @container grid-item (min-width: token("breakpoint.m")) {
+        --grid-span: 3;
+      }
+    }
+
+    & .grid--2-col {
+      @container grid-item (min-width: token("breakpoint.s")) {
+        --grid-span: 3;
+      }
+
+      @container grid-item (min-width: token("breakpoint.m")) {
+        --grid-span: 2;
+      }
+    }
+
+    & .grid--1-col {
+      @container grid-item (min-width: token("breakpoint.s")) {
+        --grid-span: 3;
+      }
+
+      @container grid-item (min-width: token("breakpoint.m")) {
+        --grid-span: 1;
+      }
+    }
+  }
+}
+
+/**
+ * Dynamic Container Grid
+ */
+
+@layer layout {
+  .grid.container {
+    &:is(.grid--dynamic) {
+      /* This doesn't play nice in Safari and isn't required, so we unset the container. */
+      container-type: unset;
+    }
+
+    &:is(
+        .grid--xs-2-cols,
+        .grid--sm-2-cols,
+        .grid--md-2-cols,
+        .grid--md-3-cols,
+        .grid--lg-3-cols,
+        .grid--md-4-cols,
+        .grid--lg-4-cols,
+        .grid--xl-4-cols
+      ) {
+      --grid-repeat: 1;
+    }
+
+    &.grid--xs-2-cols {
+      @container grid-item (min-width: token("breakpoint.xs")) {
+        --grid-repeat: 2;
+      }
+    }
+
+    &.grid--sm-2-cols {
+      @container grid-item (min-width: token("breakpoint.s")) {
+        --grid-repeat: 2;
+      }
+    }
+
+    &.grid--md-2-cols {
+      @container grid-item (min-width: token("breakpoint.m")) {
+        --grid-repeat: 2;
+      }
+    }
+
+    &.grid--md-3-cols {
+      @container grid-item (min-width: token("breakpoint.m")) {
+        --grid-repeat: 3;
+      }
+    }
+
+    &.grid--lg-3-cols {
+      @container grid-item (min-width: token("breakpoint.l")) {
+        --grid-repeat: 3;
+      }
+    }
+
+    &.grid--md-4-cols {
+      @container grid-item (min-width: token("breakpoint.m")) {
+        --grid-repeat: 4;
+      }
+    }
+
+    &.grid--lg-4-cols {
+      @container grid-item (min-width: token("breakpoint.l")) {
+        --grid-repeat: 4;
+      }
+    }
+
+    &.grid--xl-4-cols {
+      @container grid-item (min-width: token("breakpoint.xl")) {
+        --grid-repeat: 4;
+      }
+    }
+  }
+}

package/src/Layout/Grid/grid-item.twig

@@ -0,0 +1,16 @@
+{% set classes = [] %}
+{% for modifier in modifiers %}
+  {% set classes = classes|merge(["grid-item__span-"~modifier]) %}
+{% endfor %}
+{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+{% set as = as|default("div") %}
+
+{% if container %}
+  <{{ as }}{{ attributes.addClass("container") }}>
+  {{ item }}
+  </{{ as }}>
+{% else %}
+  <{{ as }}{{ attributes }}>
+  {{ item }}
+  </{{ as }}>
+{% endif %}

package/src/Layout/Grid/grid.css

@@ -0,0 +1,190 @@
+/**
+ * Dynamic Grid
+ */
+
+@layer layout {
+  .grid {
+    --grid-repeat: auto-fit;
+    --grid-min: 20ch;
+
+    display: grid;
+    grid-template-columns: repeat(
+      var(--grid-repeat),
+      minmax(min(100%, var(--grid-min)), 1fr)
+    );
+    grid-template-rows: 1fr;
+    gap: var(--grid-gap, var(--gap));
+
+    @media (--large-up) {
+      --grid-gap: var(--gap-l);
+    }
+
+    &:is(ul, ol) {
+      list-style: none;
+      padding-inline-start: unset;
+    }
+  }
+
+  [class*="grid--cols-"] {
+    --grid-repeat: 1;
+  }
+
+  .grid--cols-xs-2 {
+    @media (--x-small-up) {
+      --grid-repeat: 2;
+    }
+  }
+
+  .grid--cols-sm-2 {
+    @media (--small-up) {
+      --grid-repeat: 2;
+    }
+  }
+
+  .grid--cols-md-2 {
+    @media (--medium-up) {
+      --grid-repeat: 2;
+    }
+  }
+
+  .grid--cols-lg-2 {
+    @media (--large-up) {
+      --grid-repeat: 2;
+    }
+  }
+
+  .grid--cols-xl-2 {
+    @media (--x-large-up) {
+      --grid-repeat: 2;
+    }
+  }
+
+  .grid--cols-md-3 {
+    @media (--medium-up) {
+      --grid-repeat: 3;
+    }
+  }
+
+  .grid--cols-lg-3 {
+    @media (--large-up) {
+      --grid-repeat: 3;
+    }
+  }
+
+  .grid--cols-xl-3 {
+    @media (--x-large-up) {
+      --grid-repeat: 3;
+    }
+  }
+
+  .grid--cols-md-4 {
+    @media (--medium-up) {
+      --grid-repeat: 4;
+    }
+  }
+
+  .grid--cols-lg-4 {
+    @media (--large-up) {
+      --grid-repeat: 4;
+    }
+  }
+
+  .grid--cols-xl-4 {
+    @media (--x-large-up) {
+      --grid-repeat: 4;
+    }
+  }
+
+  .grid--collapse {
+    --grid-gap: 0;
+  }
+
+  .grid--collapse-cols {
+    grid-column-gap: 0;
+  }
+
+  .grid--collapse-rows {
+    grid-row-gap: 0;
+  }
+}
+
+/**
+ * Grid items.
+ */
+@layer layout {
+  [class*="grid-item__span-"] {
+    grid-column: auto / var(--grid-span, auto);
+  }
+
+  .grid-item__span-xs-2 {
+    @media (--x-small-up) {
+      --grid-span: span 2;
+    }
+  }
+
+  .grid-item__span-sm-2 {
+    @media (--small-up) {
+      --grid-span: span 2;
+    }
+  }
+
+  .grid-item__span-md-2 {
+    @media (--medium-up) {
+      --grid-span: span 2;
+    }
+  }
+
+  .grid-item__span-lg-2 {
+    @media (--large-up) {
+      --grid-span: span 2;
+    }
+  }
+
+  .grid-item__span-xl-2 {
+    @media (--x-large-up) {
+      --grid-span: span 2;
+    }
+  }
+
+  .grid-item__span-md-3 {
+    @media (--medium-up) {
+      --grid-span: span 3;
+    }
+  }
+
+  .grid-item__span-lg-3 {
+    @media (--large-up) {
+      --grid-span: span 3;
+    }
+  }
+
+  .grid-item__span-xl-3 {
+    @media (--x-large-up) {
+      --grid-span: span 3;
+    }
+  }
+
+  .grid-item__span-md-4 {
+    @media (--medium-up) {
+      --grid-span: span 4;
+    }
+  }
+
+  .grid-item__span-lg-4 {
+    @media (--large-up) {
+      --grid-span: span 4;
+    }
+  }
+
+  .grid-item__span-xl-4 {
+    @media (--x-large-up) {
+      --grid-span: span 4;
+    }
+  }
+}
+
+@media print {
+  .grid {
+    display: block;
+  }
+}

package/src/Layout/Grid/grid.twig

@@ -0,0 +1,10 @@
+{% set baseClass = 'grid' %}
+{% set classes = [baseClass] %}
+{% for modifier in modifiers %}
+  {% set classes = classes|merge([baseClass~"--cols-"~modifier]) %}
+{% endfor %}
+{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+
+<{{ as|default("div") }}{{ attributes }}>
+  {{ items }}
+</{{ as|default("div") }}>

package/src/Layout/Grid/twig/container-grid-dynamic.twig

@@ -0,0 +1,47 @@
+<div class="grid container grid--xs-2-cols">
+  <div>1</div>
+  <div>2</div>
+</div>
+
+<div class="grid container grid--sm-2-cols">
+  <div>1</div>
+  <div>2</div>
+</div>
+
+<div class="grid container grid--md-2-cols">
+  <div>1</div>
+  <div>2</div>
+</div>
+
+<div class="grid container grid--md-3-cols">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</div>
+
+<div class="grid container grid--lg-3-cols">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+</div>
+
+<div class="grid container grid--sm-2-cols grid--md-4-cols">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+</div>
+
+<div class="grid container grid--md-2-cols grid--lg-4-cols">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+</div>
+
+<div class="grid container grid--xs-2-cols grid--xl-4-cols">
+  <div>1</div>
+  <div>2</div>
+  <div>3</div>
+  <div>4</div>
+</div>

package/src/Layout/Grid/twig/container-grid.twig

@@ -0,0 +1,46 @@
+<div class="grid container">
+  <div class="grid--12-col">12</div>
+</div>
+
+<div class="grid container">
+  <div class="grid--11-col">11</div>
+  <div class="grid--1-col">1</div>
+</div>
+
+<div class="grid container">
+  <div class="grid--10-col">10</div>
+  <div class="grid--2-col">2</div>
+</div>
+
+<div class="grid container">
+  <div class="grid--9-col">9</div>
+  <div class="grid--3-col">3</div>
+</div>
+
+<div class="grid container">
+  <div class="grid--8-col">8</div>
+  <div class="grid--4-col">4</div>
+</div>
+
+<div class="grid container">
+  <div class="grid--7-col">7</div>
+  <div class="grid--5-col">5</div>
+</div>
+
+<div class="grid container">
+  <div class="grid--6-col">6</div>
+  <div class="grid--6-col">6</div>
+</div>
+
+<div class="grid container">
+  <div class="grid--4-col">4</div>
+  <div class="grid--4-col">4</div>
+  <div class="grid--4-col">4</div>
+</div>
+
+<div class="grid container">
+  <div class="grid--3-col">3</div>
+  <div class="grid--3-col">3</div>
+  <div class="grid--3-col">3</div>
+  <div class="grid--3-col">3</div>
+</div>

package/src/Layout/Grid/twig/grid-story.twig

@@ -0,0 +1,6 @@
+{% extends "../grid.twig" %}
+{% set items %}
+  {% for item in items %}
+    {% include "../grid-item" with { item: item.item, container: item.container, as: item.as, modifiers: item.modifiers } only %}
+  {% endfor %}
+{% endset %}