@pnx-mixtape/mxds 0.0.1

package/src/Layout/Section/Section.tsx

@@ -0,0 +1,83 @@
+import {
+  JSX,
+  ComponentPropsWithoutRef,
+  PropsWithChildren,
+  useMemo,
+} from "react"
+import classNames from "classnames"
+import {
+  PageWidths,
+  SectionFlow,
+  SectionStyles,
+  SectionTags,
+} from "../../enums"
+
+type InnerTagProps = ComponentPropsWithoutRef<"div"> &
+  PropsWithChildren & {
+    condition: boolean
+  }
+
+const InnerTag = ({
+  condition,
+  children,
+  ...props
+}: InnerTagProps): JSX.Element =>
+  condition ? <div {...props}>{children}</div> : <>{children}</>
+
+type SectionProps = PropsWithChildren & {
+  sizes?: SectionStyles | SectionStyles[]
+  width?: PageWidths
+  flow?: SectionFlow
+  as?: SectionTags
+  className?: string
+  innerClassName?: string
+  containing?: boolean
+  container?: boolean
+}
+
+const Section = ({
+  children,
+  sizes,
+  width,
+  flow,
+  as = SectionTags.DIV,
+  className,
+  innerClassName,
+  containing = false,
+  container = false,
+  ...props
+}: SectionProps): JSX.Element => {
+  const Tag: JSX.ElementType = `${as}` as unknown as JSX.ElementType
+  const sizeClasses = useMemo<string[]>(() => {
+    if (!sizes) return []
+    if (Array.isArray(sizes))
+      return sizes.map((size: SectionStyles) => `section--${size}`)
+    return [`section--${sizes}`]
+  }, [sizes])
+
+  return (
+    <Tag
+      className={classNames({
+        page: containing,
+        [className]: className,
+        [sizeClasses.join(" ")]: sizes,
+        [`page--${width}`]: width && containing,
+        [`section__${width}`]: width && !containing,
+        [`section--${flow}`]: flow,
+      })}
+      {...props}
+    >
+      <InnerTag
+        className={classNames({
+          [innerClassName]: innerClassName,
+          container: container,
+        })}
+        condition={!!container || !!innerClassName}
+      >
+        {children}
+      </InnerTag>
+    </Tag>
+  )
+}
+
+export default Section

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

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./SectionGrid"
+import {
+  GridColumns,
+  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: (
+      <>
+        <div>Item 1</div>
+        <div>Item 2</div>
+        <div>Item 3</div>
+      </>
+    ),
+    cols: GridColumns.DYNAMIC,
+    sizes: SectionStyles.XL,
+  },
+  argTypes: {
+    sizes: { options: Object.values(SectionStyles) },
+    cols: { options: Object.values(GridColumns) },
+    as: { options: Object.values(SectionTags) },
+    width: { options: Object.values(PageWidths) },
+    flow: { options: Object.values(SectionFlow) },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SectionGrid: Story = {}
+
+export const List: Story = {
+  args: {
+    as: SectionTags.LIST,
+    container: true,
+    children: (
+      <>
+        <li>Item 1</li>
+        <li>Item 2</li>
+        <li>Item 3</li>
+      </>
+    ),
+  },
+}

package/src/Layout/Section/SectionGrid.tsx

@@ -0,0 +1,71 @@
+import { JSX, PropsWithChildren, useMemo } from "react"
+import classNames from "classnames"
+import Grid from "../Grid/Grid"
+import {
+  GridColumns,
+  PageWidths,
+  SectionFlow,
+  SectionStyles,
+  SectionTags,
+} from "../../enums"
+
+type SectionGridProps = PropsWithChildren & {
+  sizes?: SectionStyles | SectionStyles[]
+  width?: PageWidths
+  flow?: SectionFlow
+  as?: SectionTags
+  cols?: GridColumns | GridColumns[]
+  className?: string
+  innerClassName?: string
+  containing?: boolean
+  container?: boolean
+}
+
+const SectionGrid = ({
+  sizes,
+  width,
+  cols,
+  children,
+  className,
+  innerClassName,
+  as = SectionTags.DIV,
+  containing = false,
+  container = false,
+  ...props
+}: SectionGridProps): JSX.Element => {
+  const wrapperAs = as === SectionTags.LIST ? SectionTags.DIV : as
+  const Tag: JSX.ElementType = `${wrapperAs}` as unknown as JSX.ElementType
+  const gridAs = as === SectionTags.LIST ? SectionTags.LIST : SectionTags.DIV
+
+  const sizeClasses = useMemo<string[]>(() => {
+    if (!sizes) return []
+    if (Array.isArray(sizes))
+      return sizes.map((size: SectionStyles) => `section--${size}`)
+    return [`section--${sizes}`]
+  }, [sizes])
+
+  return (
+    <Tag
+      className={classNames({
+        page: containing,
+        [className]: className,
+        [sizeClasses.join(" ")]: sizes,
+        [`page--${width}`]: width && containing,
+        [`section__${width}`]: width && !containing,
+      })}
+      {...props}
+    >
+      <Grid
+        wrapper
+        container={container}
+        as={gridAs}
+        cols={cols}
+        className={innerClassName}
+      >
+        {children}
+      </Grid>
+    </Tag>
+  )
+}
+
+export default SectionGrid

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

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Section Section smoke-test 1`] = `
+<section class="section xl">
+  <div class="vertical-flow">
+    <h2>
+      Key feature or Section Name
+    </h2>
+    <p>
+      A short description to help explain enough about the subject matter to encourage visitors to learn more.
+    </p>
+    <a class="link--more"
+       href="#"
+    >
+      Learn more
+    </a>
+  </div>
+</section>
+`;

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

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Section Default smoke-test 1`] = `
+<div class="page">
+  <div class="page section--xl page--feature">
+    <p>
+      Some content
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Layout/Section List smoke-test 1`] = `
+<div class="page">
+  <ul class="page section--s">
+    <li>
+      Item 1
+    </li>
+    <li>
+      Item 2
+    </li>
+    <li>
+      Item 3
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Layout/Section Varied smoke-test 1`] = `
+<div class="page">
+  <aside class="page section--top-m section--bottom-xl">
+    <p>
+      Some content
+    </p>
+  </aside>
+</div>
+`;

package/src/Layout/Section/__snapshots__/SectionBackground.stories.ts.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Section/Background Image BackgroundImage smoke-test 1`] = `
+<section class="section ">
+  <figure class="background--image section__full"
+          role="presentation"
+  >
+    <img src="https://picsum.photos/id/56/1642/560?grayscale"
+         alt
+    >
+  </figure>
+  <div class="section--l">
+    <div class="vertical-flow">
+      <h2>
+        Key feature or Section Name
+      </h2>
+      <p>
+        A short description to help explain enough about the subject matter to encourage visitors to learn more.
+      </p>
+      <a class="button button--primary"
+         href="#"
+      >
+        Learn more
+      </a>
+    </div>
+  </div>
+</section>
+`;
+
+exports[`Layout/Section/Background Image Dark smoke-test 1`] = `
+<section class="section background--reverse">
+  <figure class="background--image section__full"
+          role="presentation"
+  >
+    <img src="https://picsum.photos/id/56/1642/560?grayscale"
+         alt
+    >
+  </figure>
+  <div class="section--l">
+    <div class="vertical-flow">
+      <h2>
+        Key feature or Section Name
+      </h2>
+      <p>
+        A short description to help explain enough about the subject matter to encourage visitors to learn more.
+      </p>
+      <a class="button button--primary"
+         href="#"
+      >
+        Learn more
+      </a>
+    </div>
+  </div>
+</section>
+`;

package/src/Layout/Section/__snapshots__/SectionGrid.stories.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Section/SectionGrid List smoke-test 1`] = `
+<div class="page">
+  <div class="section--xl">
+    <ul class="grid container grid--dynamic">
+      <li>
+        Item 1
+      </li>
+      <li>
+        Item 2
+      </li>
+      <li>
+        Item 3
+      </li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`Layout/Section/SectionGrid SectionGrid smoke-test 1`] = `
+<div class="page">
+  <div class="section--xl">
+    <div class="grid grid--dynamic">
+      <div>
+        Item 1
+      </div>
+      <div>
+        Item 2
+      </div>
+      <div>
+        Item 3
+      </div>
+    </div>
+  </div>
+</div>
+`;

package/src/Layout/Section/__snapshots__/SectionsBreakouts.stories.ts.snap

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Section/Breakoout Breakoout smoke-test 1`] = `
+<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--primary 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--primary-light 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/__snapshots__/SectionsFlowsGroups.stories.ts.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Layout/Section/Flow Flow smoke-test 1`] = `
+<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/section.css

@@ -0,0 +1,156 @@
+/**
+ * Section
+ */
+
+@layer layout {
+  .container {
+    --container-name: container;
+
+    container-name: var(--container-name);
+    container-type: inline-size;
+  }
+
+  .section--divider {
+    border-block-start: 1px solid var(--colour-border);
+  }
+
+  .section--s {
+    padding-block: var(--section-s, var(--spacing-s));
+  }
+
+  .section--m {
+    padding-block: var(--section-m, var(--spacing-m));
+  }
+
+  .section--l {
+    padding-block: var(--section-l, var(--spacing-xl));
+  }
+
+  .section--xl {
+    padding-block: var(--section-xl, var(--spacing-uul));
+  }
+
+  .section--top-s {
+    padding-block-start: var(--section-s, var(--spacing-s));
+  }
+
+  .section--top-m {
+    padding-block-start: var(--section-m, var(--spacing-m));
+  }
+
+  .section--top-l {
+    padding-block-start: var(--section-l, var(--spacing-xl));
+  }
+
+  .section--top-xl {
+    padding-block-start: var(--section-xl, var(--spacing-uul));
+  }
+
+  .section--bottom-s {
+    padding-block-end: var(--section-s, var(--spacing-s));
+  }
+
+  .section--bottom-m {
+    padding-block-end: var(--section-m, var(--spacing-m));
+  }
+
+  .section--bottom-l {
+    padding-block-end: var(--section-l, var(--spacing-xl));
+  }
+
+  .section--bottom-xl {
+    padding-block-end: var(--section-xl, var(--spacing-uul));
+  }
+}
+
+/**
+ * Sections breakouts
+ *
+ * Uses `subgrid` so no supported in older browsers.
+ */
+
+/**
+ * Sections flows & groups
+ *
+ * Uses `:has` so is not supported in older browsers.
+ * see https://www.bram.us/2022/12/13/quantity-queries-for-islands-of-elements-with-the-same-class-thanks-to-css-has/
+ */
+
+@layer layout {
+  .section--flow {
+    --flow-spacing: var(--section-l, var(--spacing-xl));
+
+    padding-block-end: var(--flow-spacing);
+
+    &:is(
+        [class*="background"],
+        [class*="background"] + .section--flow,
+        :not(.section--flow:not(.section--group) + .section--flow)
+      ) {
+      padding-block-start: var(--flow-spacing);
+    }
+  }
+
+  .section--group {
+    --group-spacing: var(--section-xl, var(--spacing-uul));
+
+    padding-block: 0;
+
+    /* :first-in-island-of-class */
+
+    &:is(
+        :not([class*="background"]) + .section--group[class*="background"],
+        :not(.section--group + .section--group)
+      ) {
+      padding-block-start: var(--group-spacing);
+    }
+
+    /* :last-in-island-of-class */
+
+    &:is(
+        :not([class*="background"]):has(+ .section--group[class*="background"]),
+        :not(:has(+ .section--group))
+      ) {
+      padding-block-end: var(--group-spacing);
+    }
+
+    /* :single-in-island-of-class */
+
+    &:not(.section--group + .section--group, :has(+ .section--group)) {
+      padding-block: var(--group-spacing);
+    }
+  }
+}
+
+/**
+ * Section header
+ */
+
+@layer layout {
+  .section__header {
+    margin-block-end: var(--spacing-m);
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--spacing-s);
+    align-items: center;
+
+    & :is(a, button) {
+      margin-inline-start: auto;
+    }
+  }
+}
+
+/**
+ * Section Background image
+ */
+
+@layer layout {
+  :is(.section--has-background, .section:has(.background--image)) {
+    overflow: hidden;
+    position: relative;
+
+    & > div {
+      position: relative;
+    }
+  }
+}

package/src/Layout/Section/section.twig

@@ -0,0 +1,25 @@
+{% set baseClass = 'section' %}
+{% set classes = [
+    baseClass,
+    background ? 'background--'~background : null
+] %}
+{% for modifier in modifiers %}
+    {% set classes = classes|merge([baseClass~"--"~modifier]) %}
+{% endfor %}
+{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+
+<{{ as}}{{ attributes }}>
+  {% if container %}
+    <div class="container">
+  {% endif %}
+    {% if title or link %}
+      <div class="section__header">
+      {{ title }}
+      {{ link }}
+      </div>
+    {% endif %}
+    {{ content }}
+  {% if container %}
+    </div>
+  {% endif %}
+</{{ as}}>