@pnx-mixtape/mxds 0.0.1

package/src/Component/Accordion/__snapshots__/Accordion.stories.ts.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Accordion Accordion smoke-test 1`] = `
+<div class="accordions">
+  <div class="accordion__title">
+    <h2 class=" ">
+      Accordion group
+    </h2>
+  </div>
+  <mx-accordion>
+    <details class="accordion accordion--divided">
+      <summary class="accordion__toggle">
+        Music
+        <span class="button icon button--small button--icon-only icon--chevron-down"
+              aria-hidden="true"
+        >
+        </span>
+      </summary>
+      <div class="accordion__content rich-text vertical-flow">
+        I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+      </div>
+    </details>
+  </mx-accordion>
+  <mx-accordion>
+    <details class="accordion accordion--divided">
+      <summary class="accordion__toggle">
+        Performances
+        <span class="button icon button--small button--icon-only icon--chevron-down"
+              aria-hidden="true"
+        >
+        </span>
+      </summary>
+      <div class="accordion__content rich-text vertical-flow">
+        I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+      </div>
+    </details>
+  </mx-accordion>
+</div>
+`;
+
+exports[`Components/Accordion ToggleAll smoke-test 1`] = `
+<div class="accordions">
+  <mx-accordion-group>
+    <div class="accordion__title">
+      <h2 class=" ">
+        Accordion group
+      </h2>
+      <div class="accordions__toggle-all">
+        <button data-expand
+                class="button button--light button--small"
+                type="button"
+        >
+          Expand all
+        </button>
+        <button data-collapse
+                class="button button--light button--small"
+                type="button"
+                disabled
+        >
+          Collapse all
+        </button>
+      </div>
+    </div>
+    <mx-accordion>
+      <details class="accordion accordion--divided">
+        <summary class="accordion__toggle">
+          Music
+          <span class="button icon button--small button--icon-only icon--chevron-down"
+                aria-hidden="true"
+          >
+          </span>
+        </summary>
+        <div class="accordion__content rich-text vertical-flow">
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+        </div>
+      </details>
+    </mx-accordion>
+    <mx-accordion>
+      <details class="accordion accordion--divided">
+        <summary class="accordion__toggle">
+          Performances
+          <span class="button icon button--small button--icon-only icon--chevron-down"
+                aria-hidden="true"
+          >
+          </span>
+        </summary>
+        <div class="accordion__content rich-text vertical-flow">
+          I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+        </div>
+      </details>
+    </mx-accordion>
+  </mx-accordion-group>
+</div>
+`;

package/src/Component/Accordion/__snapshots__/Accordion.stories.tsx.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Components/Accordion Accordion smoke-test 1`] = `
+<div class="accordion accordion--divided"
+     data-open="false"
+>
+  <button type="button"
+          class="accordion__toggle"
+          id="unique-0"
+          aria-expanded="false"
+  >
+    Open me!
+    <span class="button button--small icon button--icon-only icon--chevron-down"
+          aria-hidden="true"
+    >
+    </span>
+  </button>
+  <div role="region"
+       aria-labelledby="unique-0"
+       class="accordion__content rich-text vertical-flow"
+       inert
+  >
+    I'm baby air plant hashtag letterpress blue bottle. Cloud bread dreamcatcher everyday carry lumbersexual, iceland cardigan swag chicharrones lo-fi fanny pack affogato freegan XOXO shaman. Shoreditch cloud bread waistcoat tbh XOXO. Chillwave pour-over umami pug glossier health goth.
+  </div>
+</div>
+`;

package/src/Component/Accordion/accordion-item.twig

@@ -0,0 +1,18 @@
+{% set baseClass = 'accordion' %}
+{% set classes = [
+  baseClass,
+  baseClass~'--divided',
+] %}
+{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+
+<mx-accordion>
+  <details{{ attributes }}{% if id %} id="{{ id }}"{% endif %}>
+    <summary class="accordion__toggle">
+      {{ title }}
+      <span class="button icon button--small button--icon-only icon--chevron-down" aria-hidden="true"></span>
+    </summary>
+    <div class="accordion__content rich-text vertical-flow">
+      {{ content }}
+    </div>
+  </details>
+</mx-accordion>

package/src/Component/Accordion/accordion.css

@@ -0,0 +1,107 @@
+/**
+ * Accordion
+ */
+
+@layer defaults {
+  details {
+    & summary {
+      list-style-type: none;
+
+      &:is(::-webkit-details-marker, ::marker) {
+        display: none;
+        content: "";
+      }
+    }
+  }
+
+  :is(mx-accordion, mx-accordiondiv, mx-accordionmobile) {
+    display: block;
+  }
+
+  :where(:is(div.accordion, mx-accordiondiv)) {
+    & .accordion__toggle {
+      appearance: none;
+      color: inherit;
+      font-size: inherit;
+      background: initial;
+      border: initial;
+      padding: initial;
+    }
+
+    & .accordion__content[inert] {
+      display: none;
+    }
+  }
+}
+
+@layer components {
+  .accordion__title {
+    margin-block-end: var(--spacing-m);
+    display: flex;
+    flex-flow: row wrap;
+    gap: var(--spacing-s);
+    align-items: center;
+  }
+
+  .accordions__toggle-all {
+    margin-inline-start: auto;
+  }
+
+  .accordion {
+    contain: layout;
+
+    & .accordion__toggle {
+      cursor: pointer;
+      inline-size: 100%;
+    }
+
+    &:is(> h2, > h3, > h4, > h5, > h6) {
+      all: unset;
+    }
+  }
+
+  .accordion--divided {
+    border-block-end: var(--line-width, 1px) solid
+      var(--line-colour, var(--colour-border));
+
+    & .accordion__toggle {
+      padding-block: var(--vertical-padding, var(--spacing-xxs));
+      padding-inline: var(--horizontal-padding, 0);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      & .button--icon-only {
+        flex-shrink: 0;
+        margin-inline-start: var(--spacing-xxs);
+      }
+    }
+
+    &:is([open], [data-open="true"]) {
+      & .accordion__toggle {
+        & .button--icon-only {
+          transform: rotate(180deg);
+        }
+      }
+
+      & .accordion__content {
+        border-block-start: var(--line-width, 1px) solid
+          var(--line-colour, var(--colour-border));
+        padding-block: var(--vertical-padding, var(--spacing-xxs));
+        padding-inline: var(--horizontal-padding, 0);
+      }
+    }
+  }
+}
+
+/**
+ * Print stylesheet
+ */
+
+@media print {
+  .accordion {
+    & .accordion__content {
+      display: block !important;
+    }
+  }
+}

package/src/Component/Accordion/accordion.twig

@@ -0,0 +1,19 @@
+<div class="accordions">
+  {% if toggleAll %}
+  <mx-accordion-group>
+  {% endif %}
+    {% if title or toggleAll %}
+      <div class="accordion__title">
+        {{ title }}
+        {% if toggleAll %}
+          <div class="accordions__toggle-all">
+            <button data-expand class="button button--light button--small" type="button">Expand all</button><button data-collapse class="button button--light button--small" type="button">Collapse all</button>
+          </div>
+        {% endif %}
+      </div>
+  {% endif %}
+  {{ items }}
+  {% if toggleAll %}
+  </mx-accordion-group>
+  {% endif %}
+</div>

package/src/Component/Accordion/images/collapse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M4 7h8v2H4z" /></svg>

package/src/Component/Accordion/images/expand.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M9 4H7v3H4v2h3v3h2V9h3V7H9z" /></svg>

package/src/Component/Accordion/twig/accordion-div.twig

@@ -0,0 +1,13 @@
+<mx-accordiondiv class="accordion {{ modifier_class }}">
+  {% block summary %}
+    <button type="button" class="accordion__toggle">
+      {{ title | default('Open Me') }}
+      <span class="button icon button--small button--icon-only icon--chevron-down" aria-hidden="true"></span>
+    </button>
+  {% endblock %}
+  <div class="accordion__content rich-text vertical-flow">
+    {% block content %}
+      <p>This content is hidden inside the accordion body until it is disclosed by clicking the accordion toggle.</p>
+    {% endblock %}
+  </div>
+</mx-accordiondiv>

package/src/Component/Accordion/twig/accordion-example.twig

@@ -0,0 +1,36 @@
+{% if type == 'base' %}
+{% embed './accordion.twig' with { modifier_class: 'accordion--divided' } %}
+  {% block summary %}
+    <summary class="accordion__toggle">
+      {{ title | default('Accordion example') }}
+      <span class="button icon button--small button--icon-only icon--chevron-down" aria-hidden="true"></span>
+    </summary>
+  {% endblock %}
+{% endembed %}
+{% endif %}
+{% if type == 'div' %}
+{% embed './accordion-div.twig' with { modifier_class: 'accordion--divided' } %}
+  {% block summary %}
+    <button type="button" class="accordion__toggle">
+      {{ title | default('A div accordion example') }}
+      <span class="button icon button--small button--icon-only icon--chevron-down" aria-hidden="true"></span>
+    </button>
+  {% endblock %}
+  {% block content %}
+    <p>This other content is hidden inside the accordion body until it is disclosed by clicking the accordion toggle.</p>
+  {% endblock %}
+{% endembed %}
+{% endif %}
+{% if type == 'mobile' %}
+{% embed './accordion-mobile.twig' with { modifier_class: 'accordion--divided' } %}
+  {% block summary %}
+    <summary class="accordion__toggle">
+      {{ title | default('A mobile only example that should be open on Desktop') }}
+      <span class="button icon button--small button--icon-only icon--chevron-down" aria-hidden="true"></span>
+    </summary>
+  {% endblock %}
+  {% block content %}
+    <p>This other content is hidden inside the accordion body until it is disclosed by clicking the accordion toggle.</p>
+  {% endblock %}
+{% endembed %}
+{% endif %}

package/src/Component/Accordion/twig/accordion-mobile.twig

@@ -0,0 +1,15 @@
+<mx-accordionmobile>
+  <details class="accordion {{ modifier_class }}">
+    {% block summary %}
+      <summary class="accordion__toggle">
+        {{ title | default('Open Me') }}
+        <span class="button icon button--small button--icon-only icon--chevron-down" aria-hidden="true"></span>
+      </summary>
+    {% endblock %}
+    <div class="accordion__content rich-text vertical-flow">
+      {% block content %}
+        <p>This content is hidden inside the accordion body until it is disclosed by clicking the accordion toggle.</p>
+      {% endblock %}
+    </div>
+  </details>
+</mx-accordionmobile>

package/src/Component/Accordion/twig/accordion-story.twig

@@ -0,0 +1,13 @@
+{% extends "../accordion.twig" %}
+{% if items %}
+  {% set items %}
+    {% for item in items %}
+      {% include "../accordion-item" with { title: item.title, content: item.content, id: item.id, attributes: attributes } only %}
+    {% endfor %}
+  {% endset %}
+{% endif %}
+{% if title %}
+  {% set title %}
+    {% include "@mixtape/Atom/Heading/heading.twig" with { title: title.title, as: title.as } only %}
+  {% endset %}
+{% endif %}

package/src/Component/Author/Author.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Author"
+import Media from "../../Atom/Media/Media"
+
+const meta: Meta<typeof Component> = {
+  title: "Elements/Author",
+  component: Component,
+  args: {
+    name: "Jiminy Cricket",
+    role: "Lead Narrator",
+    image: (
+      <Media src="https://picsum.photos/70" alt="Jiminy Cricket's avatar" />
+    ),
+  },
+}
+
+export default meta
+export const Author: StoryObj<typeof meta> = {}

package/src/Component/Author/Author.tsx

@@ -0,0 +1,30 @@
+import { JSX, ReactNode } from "react"
+import Grid from "../../Layout/Grid/Grid"
+import Heading from "../../Atom/Heading/Heading"
+import Text from "../../Atom/Text/Text"
+import { GridWidths, TextStyles } from "../../enums"
+import { HeadingTypes } from "@pnx-mixtape/ids-shape"
+
+type AuthorProps = {
+  name: string
+  role?: string
+  image?: ReactNode
+}
+
+const Author = ({ image, role, name }: AuthorProps): JSX.Element => (
+  <Grid wrapper className={"author"}>
+    {image && (
+      <Grid width={GridWidths.TWO} className={"author__image"}>
+        {image}
+      </Grid>
+    )}
+    <Grid width={GridWidths.TEN} className={"author__details"}>
+      <Heading as={HeadingTypes.THREE} className={"spacing--top-s"}>
+        {name}
+      </Heading>
+      {role && <Text modifier={TextStyles.M}>{role}</Text>}
+    </Grid>
+  </Grid>
+)
+
+export default Author

package/src/Component/Author/__snapshots__/Author.stories.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Elements/Author Author smoke-test 1`] = `
+<div class="grid author">
+  <div class="grid--2-col author__image">
+    <img alt="Jiminy Cricket's avatar"
+         src="https://picsum.photos/70"
+    >
+  </div>
+  <div class="grid--10-col author__details">
+    <h3 class="spacing--top-s"
+        id="jiminy-cricket"
+    >
+      Jiminy Cricket
+    </h3>
+    <p class="text--m">
+      Lead Narrator
+    </p>
+  </div>
+</div>
+`;

package/src/Component/Breadcrumb/Breadcrumb.stories.ts

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

package/src/Component/Breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from "@storybook/react"
+import Component from "./Breadcrumb"
+import "./breadcrumb.css"
+
+const meta: Meta<typeof Component> = {
+  tags: ["autodocs"],
+  component: Component,
+  args: {
+    items: [
+      {
+        id: "1",
+        title: "Home",
+        to: "#",
+      },
+      {
+        id: "2",
+        title: "About",
+        to: "#",
+      },
+      {
+        id: "3",
+        title: "Contact",
+        to: "#",
+      },
+    ],
+    title: "Current page title",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Breadcrumb: Story = {}
+export const NoCurrentPage: Story = {
+  args: {
+    title: null,
+  },
+}

package/src/Component/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,34 @@
+import { JSX, ComponentPropsWithoutRef } from "react"
+import classNames from "classnames"
+import Link from "../../Atom/Link/Link"
+import { NavigationItem } from "../Navigation/Navigation"
+
+type BreadcrumbProps = ComponentPropsWithoutRef<"nav"> & {
+  items: NavigationItem[]
+  title?: string
+  className?: string
+}
+
+const Breadcrumb = ({
+  items,
+  title,
+  className,
+  ...props
+}: BreadcrumbProps): JSX.Element => (
+  <nav
+    className={classNames("nav", "nav--breadcrumb", "nav--inline", className)}
+    {...props}
+  >
+    <ul>
+      {items &&
+        items.map(item => (
+          <li key={item.id}>
+            <Link to={item.to}>{item.title}</Link>
+          </li>
+        ))}
+      {title && <li className="nav__item--current">{title}</li>}
+    </ul>
+  </nav>
+)
+
+export default Breadcrumb

package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.ts.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navigation/Breadcrumb Breadcrumb smoke-test 1`] = `
+<nav class="nav nav--inline nav--breadcrumb ">
+  <ul>
+    <li>
+      <a href="#">
+        Home
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        Level 1
+      </a>
+    </li>
+    <li>
+      <a href="#">
+        Level 2
+      </a>
+    </li>
+    <li>
+      Current Page
+    </li>
+  </ul>
+</nav>
+`;

package/src/Component/Breadcrumb/__snapshots__/Breadcrumb.stories.tsx.snap

@@ -0,0 +1,60 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Navigation/Breadcrumb Breadcrumb smoke-test 1`] = `
+<nav class="nav nav--breadcrumb nav--inline">
+  <ul>
+    <li>
+      <a href="#"
+         class="link"
+      >
+        Home
+      </a>
+    </li>
+    <li>
+      <a href="#"
+         class="link"
+      >
+        About
+      </a>
+    </li>
+    <li>
+      <a href="#"
+         class="link"
+      >
+        Contact
+      </a>
+    </li>
+    <li class="nav__item--current">
+      Current page title
+    </li>
+  </ul>
+</nav>
+`;
+
+exports[`Navigation/Breadcrumb NoCurrentPage smoke-test 1`] = `
+<nav class="nav nav--breadcrumb nav--inline">
+  <ul>
+    <li>
+      <a href="#"
+         class="link"
+      >
+        Home
+      </a>
+    </li>
+    <li>
+      <a href="#"
+         class="link"
+      >
+        About
+      </a>
+    </li>
+    <li>
+      <a href="#"
+         class="link"
+      >
+        Contact
+      </a>
+    </li>
+  </ul>
+</nav>
+`;

package/src/Component/Breadcrumb/breadcrumb.css

@@ -0,0 +1,46 @@
+/**
+ * Breadcrumb Navigation
+ */
+
+@layer components {
+  .nav--breadcrumb {
+    --nav-font-size: var(--font-size-s);
+
+    position: relative;
+    z-index: 1;
+    overflow: auto;
+    white-space: nowrap;
+
+    & > ul {
+      gap: var(--breadcrumb-gap, var(--spacing-xxxxs));
+    }
+
+    & > ul > li {
+      color: var(
+        --breadcrumb-foreground,
+        var(--foreground, var(--colour-foreground-alt))
+      );
+      display: flex;
+      align-items: center;
+
+      &:where(:not(:last-child))::after {
+        content: "";
+        display: block;
+        vertical-align: middle;
+        mask-image: svg-load("../../Atom/Icon/images/chevron-right.svg");
+        mask-position: center;
+        mask-repeat: no-repeat;
+        block-size: var(--spacing-m);
+        inline-size: var(--spacing-m);
+        background-color: currentcolor;
+      }
+    }
+  }
+
+  [dir="rtl"] .nav--breadcrumb,
+  .translated-rtl .nav--breadcrumb {
+    & > ul > li::after {
+      transform: rotate(180deg);
+    }
+  }
+}

package/src/Component/Breadcrumb/breadcrumb.twig

@@ -0,0 +1,12 @@
+{% spaceless %}
+  <nav class="nav nav--inline nav--breadcrumb {{ modifier_class }}">
+    {% block crumbs %}
+    <ul>
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Level 1</a></li>
+      <li><a href="#">Level 2</a></li>
+      <li>Current Page</li>
+    </ul>
+    {% endblock %}
+  </nav>
+{% endspaceless %}