@pnx-mixtape/mxds 0.0.1

package/src/Atom/NavList/__snapshots__/NavList.stories.ts.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Atom/NavList/NavList List smoke-test 1`] = `
+<nav class="nav nav--list ">
+  <h4 class="text--embellished-headline">
+    Jump To Section
+  </h4>
+  <ul>
+    <li>
+      <a href="#"
+         aria-current="page"
+      >
+        Section Title
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        Longer Section Title
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        Section Title
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        Longer Section Title
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        Section Title
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        Longer Section Title
+      </a>
+    </li>
+  </ul>
+</nav>
+`;

package/src/Atom/NavList/nav-list.css

@@ -0,0 +1,29 @@
+/**
+ * List Navigation
+ */
+
+@layer components {
+  .nav--list {
+    margin-block-end: var(--spacing-m);
+
+    & ul {
+      display: grid;
+      gap: var(--nav-gap, var(--spacing-xxxs));
+    }
+
+    & [aria-current="page"] {
+      text-decoration-line: underline;
+    }
+  }
+
+  .nav--list-2-col {
+    & ul {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  h2 + .nav--list,
+  h3 + .nav--list {
+    margin-block-start: var(--spacing-m);
+  }
+}

package/src/Atom/NavList/nav-list.twig

@@ -0,0 +1,25 @@
+<nav class="nav nav--list {{ modifier_class }}">
+  <h4 class="text--embellished-headline">{{ title|default('Jump To Section') }}</h4>
+  {% block list %}
+  <ul>
+    <li>
+      <a href="#" aria-current="page">Section Title</a>
+    </li>
+    <li>
+      <a href="#">Longer Section Title</a>
+    </li>
+    <li>
+      <a href="#">Section Title</a>
+    </li>
+    <li>
+      <a href="#">Longer Section Title</a>
+    </li>
+    <li>
+      <a href="#">Section Title</a>
+    </li>
+    <li>
+      <a href="#">Longer Section Title</a>
+    </li>
+  </ul>
+  {% endblock %}
+</nav>

package/src/Atom/README.md

@@ -0,0 +1,5 @@
+# Atoms & base css.
+
+### How to use
+
+`@import '@pnx-mixtape/mxds/base.css';`

package/src/Atom/Spacing/Spacing.stories.ts

@@ -0,0 +1,48 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./spacing.twig"
+import "../_base.css"
+
+const modifierOptions: string[] = [
+  "spacing--xs",
+  "spacing--s",
+  "spacing--m",
+  "spacing--l",
+  "spacing--xl",
+  "spacing--top-xs",
+  "spacing--top-s",
+  "spacing--top-m",
+  "spacing--top-l",
+  "spacing--top-xl",
+  "spacing--bottom-xs",
+  "spacing--bottom-s",
+  "spacing--bottom-m",
+  "spacing--bottom-l",
+  "spacing--bottom-xl",
+  "spacing--left-xs",
+  "spacing--left-s",
+  "spacing--left-m",
+  "spacing--left-l",
+  "spacing--left-xl",
+  "spacing--right-xs",
+  "spacing--right-s",
+  "spacing--right-m",
+  "spacing--right-l",
+  "spacing--right-xl",
+]
+
+type SpacingType = {
+  modifier_class?: (typeof modifierOptions)[number]
+}
+
+const meta: Meta<SpacingType> = {
+  title: "Atom/Spacing",
+  tags: ["autodocs"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<SpacingType>
+
+export const Spacing: Story = {
+  args: {},
+}

package/src/Atom/Spacing/__snapshots__/Spacing.stories.ts.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Base/Spacing Spacing smoke-test 1`] = `
+<div class="spacing ">
+  <p>
+  </p>
+</div>
+`;

package/src/Atom/Spacing/_spacing.css

@@ -0,0 +1,36 @@
+@import "../_mixins.css";
+
+@layer utlities {
+  .spacing--reset {
+    padding: 0 !important;
+  }
+
+  .spacing--top-reset {
+    padding-block-start: 0 !important;
+  }
+
+  .spacing--bottom-reset {
+    padding-block-end: 0 !important;
+  }
+
+  .spacing--left-reset {
+    padding-inline-start: 0 !important;
+  }
+
+  .spacing--right-reset {
+    padding-inline-end: 0 !important;
+  }
+
+  @mixin spacing xxs;
+  @mixin spacing xs;
+  @mixin spacing s;
+  @mixin spacing m;
+  @mixin spacing l;
+  @mixin spacing xl;
+  @mixin spacing xxl;
+  @mixin spacing xxxl;
+  @mixin spacing xxxxl;
+  @mixin spacing ul;
+  @mixin spacing uul;
+  @mixin spacing uuul;
+}

package/src/Atom/Spacing/spacing.twig

@@ -0,0 +1,3 @@
+<div class="spacing {{ modifier_class }}">
+  <p>{{ modifier_class }}</p>
+</div>

package/src/Atom/Table/Table.stories.ts

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./table.twig"
+import "../_base.css"
+import { TableStyles } from "../../enums"
+
+type TableType = {
+  modifier?: TableStyles
+}
+
+const meta: Meta<TableType> = {
+  title: "Atom/Table",
+  tags: ["autodocs"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<TableType>
+
+export const Table: Story = {
+  args: {},
+}
+
+export const Flush: Story = {
+  args: {
+    modifier: TableStyles.FLUSH,
+  },
+}
+
+export const Zebra: Story = {
+  args: {
+    modifier: TableStyles.STRIPED,
+  },
+}
+
+export const Small: Story = {
+  args: {
+    modifier: TableStyles.SMALL,
+  },
+}

package/src/Atom/Table/TableResponsive.stories.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./table-responsive.twig"
+import "../_base.css"
+
+const meta: Meta<typeof Component> = {
+  title: "Atom/Table/Responsive",
+  tags: ["autodocs"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const TableResponsive: Story = {
+  args: {},
+}

package/src/Atom/Table/__snapshots__/Table.stories.ts.snap

@@ -0,0 +1,261 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Base/Table Flush smoke-test 1`] = `
+<table class=" table--flush">
+  <thead>
+    <tr>
+      <th>
+        Type
+      </th>
+      <th>
+        Desktop
+      </th>
+      <th>
+        Tablet
+      </th>
+      <th>
+        Mobile
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>
+        Columns
+      </th>
+      <td>
+        12
+      </td>
+      <td>
+        12
+      </td>
+      <td>
+        4
+      </td>
+    </tr>
+    <tr>
+      <th>
+        Gutter
+      </th>
+      <td>
+        32px
+      </td>
+      <td>
+        16px
+      </td>
+      <td>
+        16px
+      </td>
+    </tr>
+    <tr>
+      <th>
+        Max-width
+      </th>
+      <td>
+        1180px
+      </td>
+      <td>
+        1024px
+      </td>
+      <td>
+        ~500px
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Base/Table Small smoke-test 1`] = `
+<table class=" table--small">
+  <thead>
+    <tr>
+      <th>
+        Type
+      </th>
+      <th>
+        Desktop
+      </th>
+      <th>
+        Tablet
+      </th>
+      <th>
+        Mobile
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>
+        Columns
+      </th>
+      <td>
+        12
+      </td>
+      <td>
+        12
+      </td>
+      <td>
+        4
+      </td>
+    </tr>
+    <tr>
+      <th>
+        Gutter
+      </th>
+      <td>
+        32px
+      </td>
+      <td>
+        16px
+      </td>
+      <td>
+        16px
+      </td>
+    </tr>
+    <tr>
+      <th>
+        Max-width
+      </th>
+      <td>
+        1180px
+      </td>
+      <td>
+        1024px
+      </td>
+      <td>
+        ~500px
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Base/Table Table smoke-test 1`] = `
+<table class>
+  <thead>
+    <tr>
+      <th>
+        Type
+      </th>
+      <th>
+        Desktop
+      </th>
+      <th>
+        Tablet
+      </th>
+      <th>
+        Mobile
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>
+        Columns
+      </th>
+      <td>
+        12
+      </td>
+      <td>
+        12
+      </td>
+      <td>
+        4
+      </td>
+    </tr>
+    <tr>
+      <th>
+        Gutter
+      </th>
+      <td>
+        32px
+      </td>
+      <td>
+        16px
+      </td>
+      <td>
+        16px
+      </td>
+    </tr>
+    <tr>
+      <th>
+        Max-width
+      </th>
+      <td>
+        1180px
+      </td>
+      <td>
+        1024px
+      </td>
+      <td>
+        ~500px
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;
+
+exports[`Base/Table Zebra smoke-test 1`] = `
+<table class=" table--striped">
+  <thead>
+    <tr>
+      <th>
+        Type
+      </th>
+      <th>
+        Desktop
+      </th>
+      <th>
+        Tablet
+      </th>
+      <th>
+        Mobile
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>
+        Columns
+      </th>
+      <td>
+        12
+      </td>
+      <td>
+        12
+      </td>
+      <td>
+        4
+      </td>
+    </tr>
+    <tr>
+      <th>
+        Gutter
+      </th>
+      <td>
+        32px
+      </td>
+      <td>
+        16px
+      </td>
+      <td>
+        16px
+      </td>
+    </tr>
+    <tr>
+      <th>
+        Max-width
+      </th>
+      <td>
+        1180px
+      </td>
+      <td>
+        1024px
+      </td>
+      <td>
+        ~500px
+      </td>
+    </tr>
+  </tbody>
+</table>
+`;

package/src/Atom/Table/__snapshots__/TableResponsive.stories.ts.snap

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Base/Table/Responsive TableResponsive smoke-test 1`] = `
+<div class="table--responsive">
+  <table class="table">
+    <thead>
+      <tr>
+        <th>
+          Type
+        </th>
+        <th>
+          Column 1
+        </th>
+        <th>
+          Column 2
+        </th>
+        <th>
+          Column 3
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th>
+          Row 1
+        </th>
+        <td>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </td>
+        <td>
+          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </td>
+        <td>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </td>
+      </tr>
+      <tr>
+        <th>
+          Row 2
+        </th>
+        <td>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </td>
+        <td>
+          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </td>
+        <td>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </td>
+      </tr>
+      <tr>
+        <th>
+          Row 3
+        </th>
+        <td>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </td>
+        <td>
+          Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </td>
+        <td>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+`;

package/src/Atom/Table/_table.css

@@ -0,0 +1,72 @@
+@layer defaults {
+  table {
+    inline-size: 100%;
+    border-collapse: collapse;
+    margin: 0;
+
+    & th {
+      font-weight: var(--font-weight-bold);
+      text-align: start;
+    }
+
+    & :is(td, th) {
+      padding: var(--spacing-xxs);
+      border-block-end: var(--line-width, 1px) solid
+        var(--line-colour, var(--colour-border));
+      vertical-align: top;
+    }
+
+    & thead :is(td, th) {
+      border-color: currentcolor;
+    }
+  }
+
+  .table--flush {
+    & :is(td, th) {
+      &:first-child {
+        padding-inline-start: 0;
+      }
+
+      &:last-child {
+        padding-inline-end: 0;
+      }
+    }
+  }
+
+  .table--small {
+    & :is(td, th) {
+      font-size: var(--font-size-s);
+      line-height: var(--line-height-h);
+    }
+  }
+
+  .table--striped {
+    & tbody tr {
+      &:nth-child(even) {
+        & :is(td, th) {
+          background-color: var(--colour-background-alt);
+        }
+      }
+    }
+  }
+
+  .table--responsive {
+    max-inline-size: 100%;
+
+    @media (--medium-down) {
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+      box-shadow: var(--box-shadow) inset;
+
+      & table {
+        inline-size: 100%;
+        margin-block: 0;
+        margin-inline: var(--spacing-s);
+
+        & td {
+          min-inline-size: 20ch;
+        }
+      }
+    }
+  }
+}

package/src/Atom/Table/table-responsive.twig

@@ -0,0 +1,32 @@
+<div class="table--responsive">
+  <table class="table">
+    <thead>
+      <tr>
+        <th>Type</th>
+        <th>Column 1</th>
+        <th>Column 2</th>
+        <th>Column 3</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <th>Row 1</th>
+        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+        <td>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
+        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+      </tr>
+      <tr>
+        <th>Row 2</th>
+        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+        <td>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
+        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+      </tr>
+      <tr>
+        <th>Row 3</th>
+        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+        <td>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
+        <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
+      </tr>
+    </tbody>
+  </table>
+</div>