@pnx-mixtape/mxds 0.0.1

package/src/Layout/Footer/FooterMenu/__snapshots__/FooterMenu.stories.ts.snap

@@ -0,0 +1,101 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navigation/FooterMenu Footer smoke-test 1`] = `
+<nav class="nav nav--footer ">
+  <ul class="nav__level-1">
+    <li class="nav__has-subnav">
+      <a href="#"
+         aria-current="page"
+      >
+        1.1 Level 1 Title
+      </a>
+      <button class="nav__toggle icon icon--chevron-down icon--only">
+        Sub-navigation
+      </button>
+      <ul class="nav__level-2"
+          inert
+      >
+        <li class="nav__has-subnav">
+          <a href="/">
+            1.1.1 Level 2 Title
+          </a>
+        </li>
+        <li class="nav__has-subnav">
+          <a href="/">
+            1.1.2 Level 2 Title
+          </a>
+        </li>
+        <li class="nav__has-subnav">
+          <a href="/">
+            1.1.3 Level 2 Title Longer
+          </a>
+        </li>
+        <li class="nav__has-subnav">
+          <a href="/">
+            1.1.4 Level 2 Title
+          </a>
+        </li>
+        <li class="nav__has-subnav">
+          <a href="/">
+            1.1.5 Level 2 Title
+          </a>
+        </li>
+      </ul>
+    </li>
+    <li class="nav__has-subnav">
+      <a href="/">
+        1.2 Level 1 Title
+      </a>
+      <button class="nav__toggle icon icon--chevron-down icon--only">
+        Sub-navigation
+      </button>
+      <ul class="nav__level-2"
+          inert
+      >
+        <li>
+          <a href="/">
+            1.2.1 Level 2 Title
+          </a>
+        </li>
+        <li>
+          <a href="/">
+            1.2.2 Level 2 Title Longer
+          </a>
+        </li>
+        <li>
+          <a href="/">
+            1.2.1 Level 2 Title
+          </a>
+        </li>
+      </ul>
+    </li>
+    <li class="nav__has-subnav">
+      <a href="/">
+        1.3 Level 1 Title
+      </a>
+      <button class="nav__toggle icon icon--chevron-down icon--only">
+        Sub-navigation
+      </button>
+      <ul class="nav__level-2"
+          inert
+      >
+        <li class="nav__has-subnav">
+          <a href="/">
+            1.3.1 Level 2 Title
+          </a>
+        </li>
+        <li>
+          <a href="/">
+            1.3.2 Level 2 Title
+          </a>
+        </li>
+        <li>
+          <a href="/">
+            1.3.3 Level 2 Title
+          </a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</nav>
+`;

package/src/Layout/Footer/FooterMenu/footer-menu.css

@@ -0,0 +1,29 @@
+/**
+ * Footer Navigation
+ */
+@layer components {
+  .nav--footer {
+    & ul {
+      display: grid;
+    }
+
+    & .nav__level-1 {
+      gap: var(--spacing-l) var(--spacing-xxxl);
+      grid-template-columns: 1fr 1fr;
+
+      @media (--medium-up) {
+        grid-template-columns: 1fr 1fr 1fr;
+      }
+
+      & > li > a {
+        display: inline-block;
+        margin-block-end: var(--spacing-l);
+        font-weight: var(--font-weight-bold);
+      }
+    }
+
+    & .nav__level-2 {
+      gap: var(--spacing-s);
+    }
+  }
+}

package/src/Layout/Footer/FooterMenu/footer-menu.twig

@@ -0,0 +1,5 @@
+<nav class="nav nav--footer {{ modifier_class }}">
+  {% block menu %}
+    {% include '@mixtape/Component/Navigation/twig/navigation-subnav-list.twig' %}
+  {% endblock %}
+</nav>

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

@@ -0,0 +1,139 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Footer Footer smoke-test 1`] = `
+<footer class="footer section section--top-l section--bottom-m background--reverse foreground--reverse">
+  <div class="grid">
+    <div class="footer__logo grid--3-col">
+      <a class="logo "
+         href="#"
+      >
+        <img alt="Mixtape"
+             src="./mixtape-logo.png"
+             width="120"
+             height="49"
+        >
+      </a>
+    </div>
+    <div class="footer__navigation grid--9-col">
+      <nav class="nav nav--footer ">
+        <ul class="nav__level-1">
+          <li class="nav__has-subnav">
+            <a href="#"
+               aria-current="page"
+            >
+              1.1 Level 1 Title
+            </a>
+            <button class="nav__toggle icon icon--chevron-down icon--only">
+              Sub-navigation
+            </button>
+            <ul class="nav__level-2"
+                inert
+            >
+              <li class="nav__has-subnav">
+                <a href="/">
+                  1.1.1 Level 2 Title
+                </a>
+              </li>
+              <li class="nav__has-subnav">
+                <a href="/">
+                  1.1.2 Level 2 Title
+                </a>
+              </li>
+              <li class="nav__has-subnav">
+                <a href="/">
+                  1.1.3 Level 2 Title Longer
+                </a>
+              </li>
+              <li class="nav__has-subnav">
+                <a href="/">
+                  1.1.4 Level 2 Title
+                </a>
+              </li>
+              <li class="nav__has-subnav">
+                <a href="/">
+                  1.1.5 Level 2 Title
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav__has-subnav">
+            <a href="/">
+              1.2 Level 1 Title
+            </a>
+            <button class="nav__toggle icon icon--chevron-down icon--only">
+              Sub-navigation
+            </button>
+            <ul class="nav__level-2"
+                inert
+            >
+              <li>
+                <a href="/">
+                  1.2.1 Level 2 Title
+                </a>
+              </li>
+              <li>
+                <a href="/">
+                  1.2.2 Level 2 Title Longer
+                </a>
+              </li>
+              <li>
+                <a href="/">
+                  1.2.1 Level 2 Title
+                </a>
+              </li>
+            </ul>
+          </li>
+          <li class="nav__has-subnav">
+            <a href="/">
+              1.3 Level 1 Title
+            </a>
+            <button class="nav__toggle icon icon--chevron-down icon--only">
+              Sub-navigation
+            </button>
+            <ul class="nav__level-2"
+                inert
+            >
+              <li class="nav__has-subnav">
+                <a href="/">
+                  1.3.1 Level 2 Title
+                </a>
+              </li>
+              <li>
+                <a href="/">
+                  1.3.2 Level 2 Title
+                </a>
+              </li>
+              <li>
+                <a href="/">
+                  1.3.3 Level 2 Title
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <div class="footer__meta grid--12-col">
+      <span class="text--s">
+        © 2019 Company Name
+      </span>
+      <nav class="nav nav--inline text--s"
+           aria-label="Footer subsidiary links"
+      >
+        <ul>
+          <li>
+            <a href="#">
+              Sitemap
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              Privacy &amp; Terms
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</footer>
+`;

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

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Footer Default smoke-test 1`] = `
+<footer class="page section--top-l section--bottom-m">
+  <div class="grid">
+    <div class="grid--12-col footer__meta">
+      <span>
+        © 2022 Company Name
+      </span>
+      <nav class="nav nav--inline"
+           aria-label="Footer navigation"
+      >
+        <ul>
+          <li class>
+            <a href="http://example.com"
+               class
+            >
+              Sitemap
+            </a>
+          </li>
+          <li class>
+            <a href="http://example.com"
+               class
+            >
+              Privacy &amp; Terms
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</footer>
+`;
+
+exports[`Layout/Footer WithChildren smoke-test 1`] = `
+<footer class="page section--top-l section--bottom-m">
+  <div class="grid">
+    <div class="grid--12-col">
+      <p>
+        Ullamcorper lobortis aliquam nulla nisl adipiscing cras fermentum dictumst netus felis semper elit adipiscing cum montes varius condimentum scelerisque condimentum diam a.
+      </p>
+    </div>
+    <div class="grid--12-col footer__meta">
+      <span>
+        © 2022 Company Name
+      </span>
+      <nav class="nav nav--inline"
+           aria-label="Footer navigation"
+      >
+        <ul>
+          <li class>
+            <a href="http://example.com"
+               class
+            >
+              Sitemap
+            </a>
+          </li>
+          <li class>
+            <a href="http://example.com"
+               class
+            >
+              Privacy &amp; Terms
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+</footer>
+`;

package/src/Layout/Footer/footer.css

@@ -0,0 +1,54 @@
+/**
+ * Global Footer
+ */
+
+@layer components {
+  .footer {
+    position: sticky;
+    inset-block-start: 100vh;
+
+    & .nav__toggle {
+      display: none;
+    }
+
+    & .grid {
+      row-gap: var(--footer-row-gap, var(--spacing-xxxl));
+    }
+  }
+
+  .footer__logo {
+    @media (--medium-down) {
+      text-align: center;
+    }
+  }
+
+  .footer__meta {
+    padding-block-start: var(--spacing-s);
+    border-block-start: var(--line-width, 1px) solid
+      var(--line-colour, var(--colour-border));
+    text-align: center;
+    line-height: 2;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--gap);
+
+    @media (--x-small-down) {
+      flex-direction: column;
+    }
+
+    & .nav--inline > ul {
+      @media (--x-small-down) {
+        flex-direction: column;
+        gap: var(--gap-s);
+      }
+    }
+  }
+}
+
+@media print {
+  .footer {
+    display: none;
+  }
+}

package/src/Layout/Footer/footer.twig

@@ -0,0 +1,25 @@
+<footer class="footer section section--top-l section--bottom-m background--reverse foreground--reverse">
+  <div class="grid">
+    <div class="footer__logo grid--3-col">
+      {% block logos %}
+        {% include "@mixtape/Layout/Header/twig/logo.twig" %}
+      {% endblock %}
+    </div>
+    <div class="footer__navigation grid--9-col">
+      {% block nav %}
+        {% include "./FooterMenu/footer-menu.twig" %}
+      {% endblock %}
+    </div>
+    <div class="footer__meta grid--12-col">
+      {% block meta %}
+        <span class="text--s">&copy; 2019 Company Name</span>
+        <nav class="nav nav--inline text--s" aria-label="Footer subsidiary links">
+          <ul>
+            <li><a href="#">Sitemap</a></li>
+            <li><a href="#">Privacy &amp; Terms</a></li>
+          </ul>
+        </nav>
+      {% endblock %}
+    </div>
+  </div>
+</footer>

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

@@ -0,0 +1,68 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./twig/grid-story.twig"
+import "./grid.css"
+import {
+  AsTypes,
+  Grid as GridType,
+  GridModifiers,
+  SectionTypes,
+} from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<GridType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    items: [
+      { item: "item 1" },
+      { item: "item 2" },
+      { item: "item 3" },
+      { item: "item 4" },
+      { item: "item 5" },
+      { item: "item 6" },
+    ],
+    as: SectionTypes.DIV,
+    modifiers: [GridModifiers.SM_2, GridModifiers.LG_4],
+  },
+  argTypes: {
+    modifiers: {
+      options: Object.values(GridModifiers),
+      control: "multi-select",
+    },
+    as: { options: Object.values(SectionTypes), control: "select" },
+  },
+}
+
+export default meta
+type Story = StoryObj<GridType>
+
+export const Grid: Story = {}
+
+export const List: Story = {
+  args: {
+    as: SectionTypes.LIST,
+    modifiers: [GridModifiers.SM_2],
+    items: [
+      {
+        item: "list item 1",
+        as: AsTypes.LI,
+      },
+      {
+        item: "list item 2",
+        as: AsTypes.LI,
+      },
+    ],
+  },
+}
+
+export const Span: Story = {
+  args: {
+    modifiers: [GridModifiers.SM_2, GridModifiers.MD_3],
+    items: [
+      { item: "item 1" },
+      {
+        item: "item 2, span 2",
+        modifiers: [GridModifiers.MD_2],
+      },
+    ],
+  },
+}

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

@@ -0,0 +1,125 @@
+/* eslint-disable @eslint-react/no-array-index-key, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-assignment */
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Grid"
+import { AsTags, GridColumns, GridWidths, SectionTags } from "../../enums"
+
+const Grid = ({ children, ...args }) => (
+  <Component wrapper {...args}>
+    {children.map((item, key) => (
+      <Component key={key} width={item.width}>
+        {item.value}
+      </Component>
+    ))}
+  </Component>
+)
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  render: Grid,
+  argTypes: {
+    width: { options: Object.values(GridWidths) },
+    cols: { options: Object.values(GridColumns) },
+    as: { options: [...Object.values(SectionTags), ...Object.values(AsTags)] },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Dynamic: Story = {
+  args: {
+    cols: GridColumns.DYNAMIC,
+    children: [
+      {
+        value: "1",
+      },
+      {
+        value: "2",
+      },
+      {
+        value: "3",
+      },
+    ],
+  },
+}
+export const Breakpoints: Story = {
+  args: {
+    cols: [GridColumns.M_2, GridColumns.L_4],
+    children: [
+      {
+        value: "1",
+      },
+      {
+        value: "2",
+      },
+      {
+        value: "3",
+      },
+      {
+        value: "4",
+      },
+    ],
+  },
+}
+export const Fixed: Story = {
+  args: {
+    children: [
+      {
+        value: "1",
+        width: "8",
+      },
+      {
+        value: "2",
+        width: "4",
+      },
+    ],
+  },
+}
+export const Container: Story = {
+  render: ({ children, ...args }) => (
+    <div className="container">
+      <Component wrapper {...args}>
+        {children.map((item, key) => (
+          <Component key={key} width={item.width}>
+            {item.value}
+          </Component>
+        ))}
+      </Component>
+    </div>
+  ),
+  args: {
+    cols: GridColumns.DYNAMIC,
+    children: [
+      {
+        value: "1",
+      },
+      {
+        value: "2",
+      },
+    ],
+  },
+}
+export const List: Story = {
+  render: ({ children, ...args }) => (
+    <Component wrapper as={SectionTags.LIST} {...args}>
+      {children.map((item, key) => (
+        <Component as={AsTags.LI} key={key} width={item.width}>
+          {item.value}
+        </Component>
+      ))}
+    </Component>
+  ),
+  args: {
+    children: [
+      {
+        value: "1",
+        width: "8",
+      },
+      {
+        value: "2",
+        width: "4",
+      },
+    ],
+  },
+}

package/src/Layout/Grid/Grid.tsx

@@ -0,0 +1,51 @@
+import { JSX, PropsWithChildren, useMemo } from "react"
+import classNames from "classnames"
+import { AsTags, GridColumns, GridWidths, SectionTags } from "../../enums"
+
+type GridProps = PropsWithChildren & {
+  wrapper?: boolean
+  container?: boolean
+  cols?: GridColumns | GridColumns[]
+  width?: GridWidths
+  className?: string
+  as?: AsTags | SectionTags
+}
+
+const Grid = ({
+  children,
+  wrapper = false,
+  container = false,
+  cols,
+  width,
+  className,
+  as = AsTags.DIV,
+  ...props
+}: GridProps): JSX.Element => {
+  const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
+
+  const colClasses = useMemo<string[]>(() => {
+    if (!cols) return []
+    if (Array.isArray(cols))
+      return cols.map((col: GridColumns) => `grid--${col}`)
+    return [`grid--${cols}`]
+  }, [cols])
+
+  return (
+    <Tag
+      className={classNames(
+        {
+          grid: wrapper,
+          container: container,
+          [colClasses.join(" ")]: cols && wrapper,
+          [`grid--${width}-col`]: width,
+        },
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </Tag>
+  )
+}
+
+export default Grid