@pnx-mixtape/mxds 0.0.1

package/src/Layout/Section/twig/section-background.twig

@@ -0,0 +1,12 @@
+<section class="section {{ background }}">
+  <figure class="background--image section__full" aria-hidden="true">
+    <img src="https://picsum.photos/id/56/1642/560?grayscale" alt="">
+  </figure>
+  <div class="section--xl">
+    <div class="section__header">
+      <h2>Section with background image</h2>
+      <a class="button button--dark" href="#">Learn more</a>
+    </div>
+    <p>A short description to help explain enough about the subject matter to encourage visitors to learn more.</p>
+  </div>
+</section>

package/src/Layout/Section/twig/section-story.twig

@@ -0,0 +1,14 @@
+{% extends "../section.twig" %}
+{% set title %}
+  {% include '@mixtape/Atom/Heading/heading.twig' with { title: title.title, as: title.as } only %}
+{% endset %}
+{% if link %}
+  {% set link %}
+    {% include '@mixtape/Atom/Link/link.twig' with { href: link.href, title: link.title, more: link.more, icon: link.icon } only %}
+  {% endset %}
+{% endif %}
+{% if content %}
+  {% set content %}
+    <p class="text--lede">{{ content }}</p>
+  {% endset %}
+{% endif %}

package/src/Layout/Section/twig/sections-breakout.twig

@@ -0,0 +1,38 @@
+<section class="section section--flow">
+  <p>Default is container width, with an inline gutter for smaller screens.</p>
+</section>
+<section class="section section__full section--flow">
+  <p>Section can have children with different content widths;</p>
+  <p class="section__narrow">like the optimum content width with .section__narrow</p>
+  <p class="section__feature">or slightly larger feature widths with .section__feature</p>
+  <p class="section__full">or full width with .section__full</p>
+</section>
+<section class="section section--flow">
+  <p>Sections can be nested</p>
+  <section class="section">
+    <p>and have the same content width options are un-nested ones;</p>
+    <p class="section__narrow">like the optimum content widths with .section__narrow</p>
+    <p class="section__feature">or slightly larger feature widths with .section__feature</p>
+    <p class="section__full">or full width with .section__full</p>
+  </section>
+</section>
+<section class="section section__narrow section--flow">
+  <p>Sections can say for all children to have a certain width</p>
+  <p>by using .section__narrow or .section__feature or .section__full</p>
+  <p>on the parent.</p>
+</section>
+<section class="section section--flow background--reverse">
+  <p>Any section can have a background color, or utilise any of the section vertical spacing classes</p>
+  <section class="section--bottom-l">
+    <p>even children</p>
+  </section>
+  <section class="section--l background--reset">
+    <p>and ones with their own backgrounds.</p>
+  </section>
+</section>
+<section class="section section--group">
+  <p>Sections can be grouped together</p>
+</section>
+<section class="section section__feature section--group">
+  <p>even if they have different content widths.</p>
+</section>

package/src/Layout/Section/twig/sections-flow.twig

@@ -0,0 +1,51 @@
+<section class="section section--flow">
+  <p>first section has top and bottom spacing</p>
+</section>
+<section class="section section--flow">
+  <p>section with normal flow</p>
+</section>
+<section class="section section--flow">
+  <p>section with normal flow</p>
+</section>
+<section class="section section--group background--alt">
+  <p>certain sections can be</p>
+</section>
+<section class="section section--group background--alt">
+  <p>grouped togther as siblings</p>
+</section>
+<section class="section section--group background--alt">
+  <p>with their own spacing rules</p>
+</section>
+<section class="section section--flow">
+  <p>section on it's own has top and bottom spacing</p>
+</section>
+<section class="section section--group background--alt">
+  <p>groups can be combined with flow</p>
+</section>
+<section class="section section--flow section--group background--alt">
+  <p>for standard spacing</p>
+</section>
+<section class="section section--flow">
+  <p>section after group own has top and bottom spacing</p>
+</section>
+<section class="section section--flow">
+  <p>section with normal flow</p>
+</section>
+<section class="section section--flow background--alt">
+  <p>section with background that breaks the flow, also has top and bottom spacing</p>
+</section>
+<section class="section section--flow">
+  <p>section after background own has top and bottom spacing</p>
+</section>
+<section class="section section--flow">
+  <p>section with normal flow</p>
+</section>
+<section class="section section--group">
+  <p>groups can be used normally for larger spacing</p>
+</section>
+<section class="section section--group background--alt">
+  <p>adding a background breaks the grouping</p>
+</section>
+<section class="section section--group background--alt">
+  <p>into a new group</p>
+</section>

package/src/Layout/Section/twig/sections-stacked.twig

@@ -0,0 +1,28 @@
+<section class="section section--xl background--alt">
+  <div class="section__content vertical-flow {{ layout_class }}">
+    <h2>Section Extra Large</h2>
+    <p>Extra Large spacing at the section level. Use the <code>section--xl</code> class to apply this spacing to the outter section.</p>
+    <a class="link--more" href="#">Learn more</a>
+  </div>
+</section>
+<section class="section section--l">
+  <div class="section__content vertical-flow {{ layout_class }}">
+    <h2>Section Large</h2>
+    <p>Large spacing at the section level. Use the <code>section--l</code> class to apply this spacing to the outter section.</p>
+    <a class="link--more" href="#">Learn more</a>
+  </div>
+</section>
+<section class="section section--m background--alt">
+  <div class="section__content vertical-flow {{ layout_class }}">
+    <h2>Section Medium</h2>
+    <p>Medium spacing at the section level. Use the <code>section--m</code> class to apply this spacing to the outter section.</p>
+    <a class="link--more" href="#">Learn more</a>
+  </div>
+</section>
+<section class="section section--s">
+  <div class="section__content vertical-flow {{ layout_class }}">
+    <h2>Section Small</h2>
+    <p>Small spacing at the section level. Use the <code>section--s</code> class to apply this spacing to the outter section.</p>
+    <a class="link--more" href="#">Learn more</a>
+  </div>
+</section>

package/src/Layout/Sidebar/Sidebar.stories.ts

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/html"
+import { SidebarOrder } from "../../enums"
+import Component from "./sidebar.twig"
+import "./sidebar.css"
+
+type SidebarArgs = {
+  order?: SidebarOrder
+}
+
+const meta: Meta<SidebarArgs> = {
+  tags: ["autodocs"],
+  component: Component,
+  argTypes: {
+    order: { options: Object.values(SidebarOrder), control: "select" },
+  },
+}
+
+export default meta
+type Story = StoryObj<SidebarArgs>
+
+export const Sidebar: Story = {
+  args: {},
+}
+
+export const Revserse: Story = {
+  args: {
+    order: SidebarOrder.REVERSE,
+  },
+}
+
+export const ReverseLarge: Story = {
+  args: {
+    order: SidebarOrder.REVERSE_L,
+  },
+}

package/src/Layout/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Sidebar"
+import { Page } from "../../../.storybook-react/decorators"
+import { SidebarOrder } from "../../enums"
+import "./sidebar.css"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    sidebar: <p>Sidebar content</p>,
+    children: <p>Main content</p>,
+  },
+  argTypes: {
+    modifier: { options: Object.values(SidebarOrder), control: "select" },
+  },
+  decorators: [Page],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Sidebar: Story = {}
+export const Reverse: Story = {
+  args: {
+    before: true,
+  },
+}
+export const NoSidebar: Story = {
+  args: {
+    sidebar: null,
+  },
+}

package/src/Layout/Sidebar/Sidebar.tsx

@@ -0,0 +1,34 @@
+import { JSX, PropsWithChildren, ReactNode } from "react"
+import classNames from "classnames"
+import { SidebarOrder } from "../../enums"
+
+type PageSidebarProps = PropsWithChildren & {
+  sidebar?: ReactNode
+  before?: boolean
+  modifier?: SidebarOrder
+  sidebarClassName?: string
+  contentClassName?: string
+}
+
+const Sidebar = ({
+  children,
+  sidebar,
+  before = false,
+  modifier,
+  sidebarClassName,
+  contentClassName,
+}: PageSidebarProps): JSX.Element => (
+  <div
+    className={classNames("grid--sidebar", {
+      [`grid--${modifier}`]: modifier,
+    })}
+  >
+    {before && sidebar && <aside className={sidebarClassName}>{sidebar}</aside>}
+    <section className={contentClassName}>{children}</section>
+    {!before && sidebar && (
+      <aside className={sidebarClassName}>{sidebar}</aside>
+    )}
+  </div>
+)
+
+export default Sidebar

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

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Sidebar ReverseLarge smoke-test 1`] = `
+<div class="page">
+  <div class="grid--sidebar grid--sidebar-rev-lg">
+    <section class>
+      1
+    </section>
+    <aside>
+      2
+    </aside>
+  </div>
+</div>
+`;
+
+exports[`Layout/Sidebar Revserse smoke-test 1`] = `
+<div class="page">
+  <div class="grid--sidebar grid--sidebar-rev">
+    <section class>
+      1
+    </section>
+    <aside>
+      2
+    </aside>
+  </div>
+</div>
+`;
+
+exports[`Layout/Sidebar Sidebar smoke-test 1`] = `
+<div class="page">
+  <div class="grid--sidebar">
+    <section class>
+      1
+    </section>
+    <aside>
+      2
+    </aside>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,47 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Sidebar NoSidebar smoke-test 1`] = `
+<div class="page">
+  <div class="grid--sidebar">
+    <section>
+      <p>
+        Main content
+      </p>
+    </section>
+  </div>
+</div>
+`;
+
+exports[`Layout/Sidebar Reverse smoke-test 1`] = `
+<div class="page">
+  <div class="grid--sidebar">
+    <aside>
+      <p>
+        Sidebar content
+      </p>
+    </aside>
+    <section>
+      <p>
+        Main content
+      </p>
+    </section>
+  </div>
+</div>
+`;
+
+exports[`Layout/Sidebar Sidebar smoke-test 1`] = `
+<div class="page">
+  <div class="grid--sidebar">
+    <section>
+      <p>
+        Main content
+      </p>
+    </section>
+    <aside>
+      <p>
+        Sidebar content
+      </p>
+    </aside>
+  </div>
+</div>
+`;

package/src/Layout/Sidebar/sidebar.css

@@ -0,0 +1,69 @@
+/**
+ * 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/Sidebar/sidebar.twig

@@ -0,0 +1,17 @@
+<div class="page">
+  <div class="grid--sidebar{% if order %} grid--{{ order }}{% endif %}">
+    {% if reverse_markup %}
+      <aside>
+        {% block sidebar %}2{% endblock %}
+      </aside>
+    {% endif %}
+    <section class="{{ content_class }}">
+      {% block content %}1{% endblock %}
+    </section>
+    {% if not reverse_markup %}
+      <aside>
+        {% block sidebar %}2{% endblock %}
+      </aside>
+    {% endif %}
+  </div>
+</div>

package/src/Utility/Context/ImageComponent.tsx

@@ -0,0 +1,49 @@
+/* eslint-disable no-unused-vars */
+/**
+ * A Framework Context for passing in Image and Image components.
+ *
+ * @example
+ * import { GatsbyImage } from "gatsby-plugin-image"
+ * import { ImageComponentProvider, Page } from '@pnx-mixtape';
+ *
+ * render(
+ *  <ImageComponentProvider component={GatsbyImage}>
+ *    <Page />
+ *  </ImageComponentProvider>
+ * );
+ */
+import {
+  JSX,
+  Context,
+  PropsWithChildren,
+  ComponentPropsWithoutRef,
+  createContext,
+  useContext,
+} from "react"
+
+type ImageComponentProps = ComponentPropsWithoutRef<"img">
+type ImageComponentContextValue = (ImageComponentProps) => JSX.Element
+
+const DefaultImageComponent = ({
+  alt,
+  ...props
+}: ImageComponentProps): JSX.Element => <img alt={alt} {...props} />
+
+const ImageComponentContext: Context<ImageComponentContextValue> =
+  createContext<ImageComponentContextValue>(DefaultImageComponent)
+export const useImageComponent = () => useContext(ImageComponentContext)
+
+type ImageComponentProviderProps = PropsWithChildren & {
+  component?: (ImageComponentProps) => JSX.Element
+}
+
+const ImageComponentProvider = ({
+  children,
+  component = null,
+}: ImageComponentProviderProps) => (
+  <ImageComponentContext.Provider value={component}>
+    {children}
+  </ImageComponentContext.Provider>
+)
+
+export default ImageComponentProvider

package/src/Utility/Context/LinkComponent.tsx

@@ -0,0 +1,57 @@
+/* eslint-disable no-unused-vars */
+/**
+ * A Framework Context for passing in Link and Image components.
+ *
+ * @example
+ * import { Link } from "gatsby"
+ * import { LinkComponentProvider, Page } from '@pnx-mixtape';
+ *
+ * render(
+ *  <LinkComponentProvider component={Link}>
+ *    <Page />
+ *  </LinkComponentProvider>
+ * );
+ */
+import {
+  JSX,
+  Context,
+  PropsWithChildren,
+  ComponentPropsWithoutRef,
+  createContext,
+  useContext,
+} from "react"
+
+type LinkComponentProps = ComponentPropsWithoutRef<"a"> &
+  PropsWithChildren & {
+    to: string
+  }
+type LinkComponentValue = (LinkComponentProps) => JSX.Element
+
+const DefaultLinkComponent = ({
+  to,
+  children,
+  ...props
+}: LinkComponentProps): JSX.Element => (
+  <a href={to} {...props}>
+    {children}
+  </a>
+)
+
+const LinkComponentContext: Context<LinkComponentValue> =
+  createContext<LinkComponentValue>(DefaultLinkComponent)
+export const useLinkComponent = () => useContext(LinkComponentContext)
+
+type LinkComponentProviderProps = PropsWithChildren & {
+  component: (LinkComponentProps) => JSX.Element
+}
+
+const LinkComponentProvider = ({
+  children,
+  component = null,
+}: LinkComponentProviderProps): JSX.Element => (
+  <LinkComponentContext.Provider value={component}>
+    {children}
+  </LinkComponentContext.Provider>
+)
+
+export default LinkComponentProvider

package/src/Utility/Drupal/README.md

@@ -0,0 +1,9 @@
+# Drupal
+
+Helper components for Drupal specific elements.
+
+### How to use
+
+**CSS**
+
+`@import '@pnx-mixtape/mxds/drupal.css';`

package/src/Utility/Drupal/drupal.css

@@ -0,0 +1,66 @@
+/**
+ * Drupal Login Form
+ *
+ * Markup: login-form.twig
+ */
+
+main :is(.user-login-form, .user-register-form, .user-pass) {
+  max-inline-size: var(--container-max-width-narrow);
+  margin-block: var(--spacing-xxl);
+  margin-inline: auto;
+}
+
+/**
+ * Drupal Local Tasks
+ *
+ * Markup: local-tasks.twig
+ */
+
+.block-local-tasks-block {
+  & .tab-list {
+    position: fixed;
+    inset-block-start: 300px;
+    inset-inline-start: 0;
+    inline-size: 120px;
+    margin-block-end: 0;
+    padding-inline-start: 0;
+    border: var(--line-width, 2px) solid
+      var(--line-colour, var(--colour-primary));
+    border-start-end-radius: var(--spacing-xxs);
+    border-end-end-radius: var(--spacing-xxs);
+    list-style-type: none;
+    overflow: hidden;
+    z-index: 501;
+    transform: translateX(-75%);
+    transition: transform 0.2s ease-in-out;
+
+    &:hover {
+      transform: translateX(0);
+    }
+
+    & li {
+      border-block-end: var(--line-width, 2px) solid
+        var(--line-colour, var(--colour-primary));
+
+      &:last-of-type {
+        border-block-end: 0 none;
+      }
+    }
+
+    & a {
+      display: block;
+      text-decoration: none;
+      padding-block: var(--spacing-xxs);
+      padding-inline: var(--spacing-m);
+      color: var(--foreground, var(--colour-primary));
+      background-color: var(--background, var(--colour-background));
+      transition:
+        0.2s background-color,
+        0.2s color;
+    }
+  }
+
+  @media print {
+    display: none;
+  }
+}

package/src/Utility/Drupal/twig/local-tasks.twig

@@ -0,0 +1,17 @@
+<div id="block-local-tasks" class="contextual-region block block-core block-local-tasks-block">
+  <div class="contextual" role="form">
+    <button class="trigger visually-hidden focusable" type="button" aria-pressed="false">Open Primary tabs configuration options</button>
+    <ul class="contextual-links" hidden="">
+      <li class="block-configure"><a href="#">Configure block</a></li>
+    </ul>
+  </div>
+  <h2 class="visually-hidden">Primary tabs</h2>
+  <ul class="tab-list tab-list--primary">
+    <li><a href="#" class="is-active">View <span class="visually-hidden">(active tab)</span></a></li>
+    <li><a href="#">Edit</a></li>
+    <li><a href="#">Delete</a></li>
+    <li><a href="#">Layout</a></li>
+    <li><a href="#">Revisions</a></li>
+    <li><a href="#">Preview Link</a></li>
+  </ul>
+</div>

package/src/Utility/Drupal/twig/login-form.twig

@@ -0,0 +1,22 @@
+<form class="user-login-form" data-drupal-selector="user-login-form" action="/user/login" method="post" id="user-login-form" accept-charset="UTF-8">
+  <div class="js-form-item form__item js-form-type-textfield form__item--textfield js-form-item-name form__item--name">
+    <label for="edit-name" class="js-form-required form__label--required">Username <span class="form__required-marker">(required)</span></label>
+    <input autocorrect="none" autocapitalize="none" spellcheck="false" autofocus="autofocus" data-drupal-selector="edit-name" aria-describedby="edit-name--description" type="text" id="edit-name" name="name" value="" size="60" maxlength="60" class="form-text required" required="required" aria-required="true">
+    <div id="edit-name--description" class="form__description">Enter your Username.</div>
+  </div>
+  <div class="js-form-item form__item js-form-type-password form__item--password js-form-item-pass form__item--pass">
+    <label for="edit-pass" class="js-form-required form__label--required">Password <span class="form__required-marker">(required)</span></label>
+    <input data-drupal-selector="edit-pass" aria-describedby="edit-pass--description" type="password" id="edit-pass" name="pass" size="60" maxlength="128" class="form-text required" required="required" aria-required="true">
+    <div id="edit-pass--description" class="form__description">Enter the password that accompanies your username.</div>
+  </div>
+  <input autocomplete="off" data-drupal-selector="form-fqnyq1a0k-ohpzqbnekgeyumhjwmbn2tk51xczbhrhy" type="hidden" name="form_build_id" value="form-FQNYQ1a0K_OHPZQBNekGeyUMHjWmbN2tK51XczBhrHY">
+  <input data-drupal-selector="edit-user-login-form" type="hidden" name="form_id" value="user_login_form">
+  <div class="js-form-item form__item js-form-type-textfield form__item--textfield js-form-item-one-time-password form__item--one-time-password">
+    <label for="edit-one-time-password">One Time Password</label>
+    <input data-drupal-selector="edit-one-time-password" aria-describedby="edit-one-time-password--description" type="text" id="edit-one-time-password" name="one_time_password" value="" size="6" maxlength="6" class="form-text">
+    <div id="edit-one-time-password--description" class="form__description">If you have two factor authentication enabled, enter your one time password.</div>
+  </div>
+  <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form__wrapper" id="edit-actions">
+    <input data-drupal-selector="edit-submit" type="submit" id="edit-submit" name="op" value="Log in" class="button button--primary js-form-submit form-submit">
+  </div>
+</form>