@pnx-mixtape/mxds 0.0.1

package/src/Layout/Header/_toggles.css

@@ -0,0 +1,31 @@
+/**
+ * Global Header
+ */
+
+@layer components {
+  .header__toggles {
+    display: flex;
+    gap: var(--toggle-gap, var(--spacing-xs));
+    padding-inline-end: 2px;
+    position: relative;
+    z-index: 1;
+
+    @media (--global-nav-up) {
+      display: none;
+    }
+
+    & .button--secondary {
+      border-color: transparent;
+    }
+
+    & [hidden] {
+      display: none;
+    }
+  }
+
+  .global-nav-up-only {
+    @media (--global-nav-down) {
+      display: none;
+    }
+  }
+}

package/src/Layout/Header/header.css

@@ -0,0 +1,2 @@
+@import "_toggles.css";
+@import "_header.css";

package/src/Layout/Header/header.twig

@@ -0,0 +1,24 @@
+<div class="header section section--s">
+  <div class="flex">
+    {% block logo %}
+      {% include "@mixtape/Layout/Header/twig/logo.twig" %}
+    {% endblock %}
+    <div class="header__toggles">
+      <mx-global-toggle hideMenu><button aria-controls="primary-search" class="button button--icon-only icon icon--search" disabled>Open Search</button></mx-global-toggle>
+      <mx-global-toggle><button aria-controls="primary-nav" class="button button--primary button--icon-only icon icon--menu" disabled>Open Menu</button></mx-global-toggle>
+    </div>
+    <div id="primary-nav" class="header__nav global-nav-up-only" aria-label="Menu">
+      {% block nav %}
+        {% include "@mixtape/Component/Navigation/navigation-dropdown.twig" %}
+      {% endblock %}
+    </div>
+    <div id="primary-search" class="header__search global-nav-up-only" aria-label="Search">
+      {% block search %}
+        <label for="global-search" class="visually-hidden">Search</label>
+        <span class="header__search-input input__text--icon icon icon--search">
+          <input id="global-search" type="text" placeholder="Search...">
+        </span>
+      {% endblock %}
+    </div>
+  </div>
+</div>

package/src/Layout/Header/twig/global-header.twig

@@ -0,0 +1,4 @@
+<header class="section">
+  {% include "@mixtape/global/twig/secondary-header.twig" %}
+  {% include "@mixtape/global/twig/primary-header.twig" %}
+</header>

package/src/Layout/Header/twig/logo.twig

@@ -0,0 +1,3 @@
+<a class="logo {{ modifier_class }}" href="{{ link | default('#') }}">
+  <img alt="{{ sitename | default('Mixtape') }}" src="{{ logo_src | default('./mixtape-logo.png') }}" width="120" height="49" />
+</a>

package/src/Layout/Masthead/Masthead.stories.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/html"
+import Component from "./masthead.twig"
+import "./masthead.css"
+
+const meta: Meta<typeof Component> = {
+  title: "Layout/Header/Secondary",
+  tags: ["autodocs"],
+  component: Component,
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Secondary: Story = {
+  args: {},
+}

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Header/Secondary Secondary smoke-test 1`] = `
+<div class="global__secondary section section__full section--top-xs section--bottom-xs background--reverse foreground--reverse">
+  <div class="flex">
+    <span class="text--s">
+      Global message
+    </span>
+    <nav class="nav global__secondary__nav nav--inline text--s"
+         aria-label="Navigation"
+    >
+      <ul>
+        <li>
+          <a href="#">
+            Secondary Title
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            Secondary Title
+          </a>
+        </li>
+        <li>
+          <a href="#">
+            Secondary Title
+          </a>
+        </li>
+      </ul>
+    </nav>
+  </div>
+</div>
+`;

package/src/Layout/Masthead/masthead.css

@@ -0,0 +1,36 @@
+/**
+ * Secondary Header
+ */
+
+@layer components {
+  .global__secondary {
+    & .flex {
+      justify-content: space-between;
+      align-items: center;
+      padding-block: var(--secondary-gap, var(--spacing-xxs));
+      padding-inline: 0;
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  .global__secondary__nav {
+    display: none;
+
+    @media (--global-nav-up) {
+      display: inline-block;
+    }
+
+    & ul {
+      margin: auto;
+    }
+  }
+}
+
+@media print {
+  .global__secondary {
+    display: none;
+  }
+}

package/src/Layout/Masthead/masthead.twig

@@ -0,0 +1,10 @@
+<div class="global__secondary section section__full section--top-xs section--bottom-xs background--reverse foreground--reverse">
+  <div class="flex">
+    {% block left %}
+      <span class="text--s">Global message</span>
+    {% endblock %}
+    {% block right %}
+      {% include "@mixtape/Component/Navigation/navigation.twig" with { 'modifier_class': 'global__secondary__nav nav--inline text--s' } %}
+    {% endblock %}
+  </div>
+</div>

package/src/Layout/Page/Page.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Page"
+import { mixtapeHeader, mixtapeFooter } from "../../../mockups/constants"
+import HeroBanner from "../../Component/HeroBanner/HeroBanner"
+
+const meta: Meta<typeof Component> = {
+  component: Component,
+  args: {
+    header: mixtapeHeader,
+    footer: mixtapeFooter,
+    children: (
+      <HeroBanner
+        title="Always put your best foot forward."
+        subtitle="Make the most of the opportunity by encouraging an action and keeping your copy clear and concise."
+      />
+    ),
+  },
+}
+
+export default meta
+
+export const Page: StoryObj<typeof meta> = {}

package/src/Layout/Page/Page.tsx

@@ -0,0 +1,16 @@
+import { JSX, PropsWithChildren, ReactNode } from "react"
+
+type PageProps = PropsWithChildren & {
+  header?: ReactNode
+  footer?: ReactNode
+}
+
+const Page = ({ children, header, footer }: PageProps): JSX.Element => (
+  <div className="page">
+    {header}
+    <main className="section">{children}</main>
+    {footer}
+  </div>
+)
+
+export default Page

package/src/Layout/Page/README.md

@@ -0,0 +1,19 @@
+# Page
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/page.css';`
+
+**Twig**
+
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Layout/Page/page.twig' %}`
+
+Alternatively copy/paste the file for more control.
+
+**JSX Components**
+
+- JSX import: `import { Page, PageSidebar, HeroBanner } from '@pnx-mixtape/mxds/react';`

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

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Page Page smoke-test 1`] = `
+<div class="page">
+  <header class="page global__primary section--s">
+    <div class="flex">
+      <a href="https://mixtape.pnx.io/"
+         class="logo"
+      >
+        <img alt="Mixtape"
+             src="https://mixtape.pnx.io/images/mixtape-logo.png"
+             loading="eager"
+        >
+      </a>
+      <div id=":r0:"
+           class="global__primary__nav"
+      >
+        <nav class="nav nav--dropdown"
+             aria-label="Primary Navigation"
+             id=":r0:"
+        >
+          <ul class="nav__level-1">
+            <li class="nav__has-subnav">
+              <a href="http://example.com/#1"
+                 class
+              >
+                Home
+              </a>
+              <button aria-controls="unique-0"
+                      aria-expanded="false"
+                      class="nav__toggle icon icon--only icon--chevron-down"
+                      type="button"
+              >
+                Sub-navigation
+              </button>
+            </li>
+            <li class>
+              <a href="http://example.com/#2"
+                 class
+              >
+                About
+              </a>
+            </li>
+            <li class>
+              <a href="http://example.com/#3"
+                 class
+              >
+                Contact
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </div>
+  </header>
+  <main class="section">
+    <div class="page section--xl">
+      <div class="page-title vertical-flow">
+        <h1 class="headline"
+            id="always-put-your-best-"
+        >
+          Always put your best foot forward.
+        </h1>
+        <p class="text--xl">
+          Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.
+        </p>
+      </div>
+    </div>
+  </main>
+  <footer class="page section--top-l section--bottom-m">
+    <div class="grid">
+      <div class="grid--12-col footer__meta">
+        <span>
+          © 2022 Company Name
+        </span>
+      </div>
+    </div>
+  </footer>
+</div>
+`;

package/src/Layout/Page/page.css

@@ -0,0 +1,150 @@
+/**
+ * Page
+ */
+
+@layer layout {
+  :where(.page) {
+    --plus: token("size.container.plus");
+    --minus: token("size.container.minus");
+    --diff: calc(var(--plus) - var(--minus));
+    --gutter: clamp(var(--spacing-s), 6vw, var(--spacing-l));
+    --full: minmax(var(--gutter), 1fr);
+    --narrow: min(var(--container-max-width), 100% - (var(--gutter) * 2));
+    --feature: minmax(0, var(--minus));
+    --container: minmax(0, var(--diff));
+
+    display: grid;
+    grid-template-columns:
+      [full-start] var(--full)
+      [container-start] var(--container)
+      [feature-start] var(--feature)
+      [narrow-start] var(--narrow) [narrow-end]
+      var(--feature) [feature-end]
+      var(--container) [container-end]
+      var(--full) [full-end];
+
+    &
+      > *:where(
+        :not(
+            .page,
+            .section__full,
+            .section__narrow,
+            .section__feature,
+            .section[class*="background--"]
+          )
+      ) {
+      grid-column: container;
+    }
+
+    /* Immediate nested can be subgrid. */
+    & > :where(.page) {
+      grid-column: full;
+      display: grid;
+      grid-template-columns: subgrid;
+    }
+
+    /* Deeper nested cannot be subgrid, needs it's children to be full width by default. */
+    &
+      > *
+      :where(.page:not(.page--narrow, .page--feature))
+      > *:where(:not(.section__narrow, .section__feature)) {
+      grid-column: full;
+    }
+
+    /** Adding a background triggers subgrid */
+    & > :where(.section[class*="background--"]) {
+      grid-column: full;
+      display: grid;
+      grid-template-columns: subgrid;
+
+      &
+        > *:where(
+          :not(.page, .section__full, .section__narrow, .section__feature)
+        ) {
+        grid-column: container;
+      }
+    }
+  }
+
+  :where(:is(.page--feature > *, .section__feature)) {
+    grid-column: feature;
+  }
+
+  :where(:is(.page--narrow > *, .section__narrow)) {
+    grid-column: narrow;
+  }
+
+  :where(:is(.page--full > *, .section__full)) {
+    grid-column: full;
+  }
+}
+
+/**
+ * Page with Sidebar
+ */
+
+@layer layout {
+  .grid--sidebar {
+    &:where(:not(:has(> aside))) {
+      grid-column: narrow;
+    }
+
+    &:where(:has(> aside)) {
+      @media (--medium-up) {
+        display: grid;
+        grid-template-columns: var(--container-max-width, 76ch) auto;
+        gap: var(--sidebar-gap, var(--gap));
+
+        @media (--large-up) {
+          --sidebar-gap: 18ch;
+        }
+      }
+
+      &.grid--sidebar-rev {
+        & > :is(section, aside) {
+          &:first-child {
+            order: 2;
+          }
+
+          &:last-child {
+            order: 1;
+          }
+        }
+      }
+
+      &.grid--sidebar-rev-lg {
+        @media (--medium-up) {
+          & > :is(section, aside) {
+            &:first-child {
+              order: 2;
+            }
+
+            &:last-child {
+              order: 1;
+            }
+          }
+        }
+      }
+
+      &:is(.grid--sidebar-rev, .grid--sidebar-rev-lg) {
+        @media (--large-up) {
+          grid-template-columns: auto var(--container-max-width, 76ch);
+        }
+      }
+    }
+
+    &:where(:has(> aside:first-child)) {
+      grid-template-columns: auto var(--container-max-width, 76ch);
+    }
+  }
+}
+
+/**
+ * Print stylesheet
+ */
+
+@media print {
+  .page__sidebar {
+    display: none;
+  }
+}

package/src/Layout/Page/page.twig

@@ -0,0 +1,3 @@
+<header>[header]</header>
+<main>[middle]</main>
+<footer>[footer]</footer>

package/src/Layout/README.md

@@ -0,0 +1,19 @@
+# Layout
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/grid.css';`
+
+**Twig**
+
+You can setup a twig namespace in your project if you wish to use the twig files directly.
+
+- Eg: `{% extends '@mixtape/Layout/Section/section.twig' %}`
+
+Alternatively copy/paste the file for more control.
+
+**JSX Components**
+
+- JSX import: `import { Section, Grid, SectionGrid } from '@pnx-mixtape/mxds/react';`

package/src/Layout/Section/Background.stories.ts

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from "@storybook/html"
+import { Page } from "../../../.storybook/decorators"
+import Component from "./twig/section-background.twig"
+import "./section.css"
+import { Section as SectionType } from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<SectionType> = {
+  tags: ["autodocs"],
+  component: Component,
+  decorators: [Page],
+  args: {
+    background: "background--alt",
+  },
+}
+
+export default meta
+type Story = StoryObj<SectionType>
+
+export const Background: Story = {}
+
+export const Dark: Story = {
+  args: {
+    background: "background--reverse",
+  },
+}

package/src/Layout/Section/Breakouts.stories.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/html"
+import { Page } from "../../../.storybook/decorators"
+import Component from "./twig/sections-breakout.twig"
+import "./section.css"
+import { Section as SectionType } from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<SectionType> = {
+  tags: ["autodocs"],
+  component: Component,
+  decorators: [Page],
+}
+
+export default meta
+type Story = StoryObj<SectionType>
+
+export const Breakouts: Story = {}

package/src/Layout/Section/Flow.stories.ts

@@ -0,0 +1,16 @@
+import { Meta, StoryObj } from "@storybook/html"
+import { Page } from "../../../.storybook/decorators"
+import Component from "./twig/sections-flow.twig"
+import "./section.css"
+import { Section as SectionType } from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<SectionType> = {
+  tags: ["autodocs"],
+  component: Component,
+  decorators: [Page],
+}
+
+export default meta
+type Story = StoryObj<SectionType>
+
+export const Flow: Story = {}

package/src/Layout/Section/Section.stories.ts

@@ -0,0 +1,63 @@
+import { Meta, StoryObj } from "@storybook/html"
+import { Page } from "../../../.storybook/decorators"
+import Component from "./twig/section-story.twig"
+import "./section.css"
+import { BackgroundStyles, Icons } from "../../enums"
+import {
+  AlignmentTypes,
+  HeadingTypes,
+  Section as SectionType,
+  SectionModifiers,
+  SectionTypes,
+} from "@pnx-mixtape/ids-shape"
+
+const meta: Meta<SectionType> = {
+  tags: ["autodocs", "ids-mvp"],
+  component: Component,
+  args: {
+    modifiers: [SectionModifiers.XL],
+    as: SectionTypes.DIV,
+    container: true,
+    title: {
+      title: "Section name",
+      as: HeadingTypes.TWO,
+    },
+    link: {
+      href: "#",
+      title: "See more content",
+      more: true,
+      icon: {
+        icon: Icons.ARROW_RIGHT,
+        align: AlignmentTypes.END,
+      },
+    },
+    content:
+      "A short description to help explain enough about the subject matter to encourage visitors to learn more.",
+  },
+  parameters: {
+    deepControls: { enabled: true },
+  },
+  argTypes: {
+    modifiers: {
+      options: Object.values(SectionModifiers),
+      control: "multi-select",
+    },
+    background: {
+      options: Object.values(BackgroundStyles),
+      control: "select",
+    },
+    as: { options: Object.values(SectionTypes), control: "select" },
+    container: { control: "boolean" },
+    // @ts-expect-error The controls follow the shape
+    "title.title": { control: "text" },
+    "title.as": { options: Object.values(HeadingTypes), control: "select" },
+    "link.href": { control: "text" },
+    "link.title": { control: "text" },
+  },
+  decorators: [Page],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Section: Story = {}

package/src/Layout/Section/Section.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Section"
+import {
+  PageWidths,
+  SectionFlow,
+  SectionStyles,
+  SectionTags,
+} from "../../enums"
+import { Page } from "../../../.storybook-react/decorators"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  decorators: [Page],
+  args: {
+    children: <p>Some content</p>,
+    containing: true,
+  },
+  argTypes: {
+    sizes: { options: Object.values(SectionStyles) },
+    width: { options: Object.values(PageWidths) },
+    as: { options: Object.values(SectionTags) },
+    flow: { options: Object.values(SectionFlow) },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    sizes: SectionStyles.XL,
+    width: PageWidths.FEATURE,
+  },
+}
+
+export const Varied: Story = {
+  args: {
+    sizes: [SectionStyles.TOP_M, SectionStyles.BOTTOM_XL],
+    as: SectionTags.ASIDE,
+  },
+}
+
+export const List: Story = {
+  args: {
+    sizes: SectionStyles.S,
+    as: SectionTags.LIST,
+    children: (
+      <>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+      </>
+    ),
+  },
+}