@pnx-mixtape/mxds 0.0.8 → 0.0.9

package/src/Component/LinkList/link-list.twig

@@ -3,10 +3,6 @@
 
 <ul{{ attributes }}>
   {% for item in items %}
-    {% if item.href %}
-      <li><a href="{{ item.href }}" class="mx-icon mx-icon--chevron-right">{{ item.title }}</a></li>
-    {% else %}
-      <li class="mx-icon mx-icon--chevron-right">{{ item.title }}</li>
-    {% endif %}
+    <li>{{ item }}</li>
   {% endfor %}
 </ul>

package/src/Component/ListItem/list-item.twig

@@ -7,22 +7,22 @@
 
 <div class="mx-container">
 <article{{ attributes }}>
-  {% if image %}
+  {% if image is not empty %}
     <figure class="mx-list-item__media">
       {{ image }}
     </figure>
   {% endif %}
   <div class="mx-list-item__content mx-vertical-flow">
-    {% if label %}
+    {% if label is not empty %}
       <strong class="mx-text--s">{{ label }}</strong>
     {% endif %}
-    {% if info and infoBefore %}
+    {% if info is not empty and infoBefore %}
       <div class="mx-text--s">{{ info }}</div>
     {% endif %}
     <div class="mx-heading--m">
       {{ link }}
     </div>
-    {% if info and not infoBefore %}
+    {% if info is not empty and not infoBefore %}
       <div class="mx-text--s">{{ info }}</div>
     {% endif %}
     {{ content }}

package/src/Component/Navigation/menu.twig

@@ -10,19 +10,19 @@
 {% set componentAttributes = (componentAttributes ?? create_attribute()) %}
 {% set setInert = setInert|default(true) %}
 
-{% macro menutree(items, level, setInert) %}
+{% macro menutree(items, level, setInert, baseClass) %}
   {% set levelClass = baseClass~'__level-'~(level + 1) %}
   <ul class="{{ levelClass }}"{% if level > 0 and setInert %} inert{% endif %}>
     {% for item in items %}
-      <li{% if item.items %} class="mx-nav__has-subnav"{% endif %}>
-        {% if item.link.href %}
+      <li{% if item.items is not empty %} class="mx-nav__has-subnav"{% endif %}>
+        {% if item.link.href is not empty %}
           <a href="{{ item.link.href }}" {% if item.link.current %} aria-current="page" {% endif %}>
             {{ item.link.title }}
           </a>
         {% else %}
           {{ item.link.title }}
         {% endif %}
-        {% if item.items %}
+        {% if item.items is not empty %}
           <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
           {{ nav.menutree(item.items, level + 1, setInert, baseClass) }}
         {% endif %}

package/src/Component/Navigation/navigation.twig

@@ -1,4 +1,4 @@
-{% extends "./menu.twig" %}
+{% extends "@mixtape/Component/Navigation/menu.twig" %}
 {% set componentAttributes = (componentAttributes|default(create_attribute())) %}
 {% if type == "collapsible" %}
   {# Vertical click to expand menu. Is the default mobile experience for dropdown and mega menus. #}

package/src/Component/Pagination/pagination-item.twig

@@ -1,4 +1,4 @@
-{% if link %}
+{% if link is not empty %}
 <li class="mx-pagination__item">
   {{ link }}
 </li>

package/src/Component/Pagination/pagination.twig

@@ -2,7 +2,7 @@
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 <nav{{ attributes}} aria-label="Pagination">
   <ul class="mx-pagination__items">
-    {% if previous %}
+    {% if previous is not empty %}
       <li class="mx-pagination__previous">
         {{ previous }}
       </li>
@@ -10,7 +10,7 @@
     {% for page in pages %}
       {{ page }}
     {% endfor %}
-    {% if next %}
+    {% if next is not empty %}
       <li class="mx-pagination__next">
         {{ next }}
       </li>

package/src/Component/SideNavigation/side-navigation.twig

@@ -6,19 +6,19 @@
 ] %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
-{% macro menutree(items, level, setInert) %}
+{% macro menutree(items, level, setInert, baseClass) %}
   {% set levelClass = baseClass~'__level-'~(level + 1) %}
   <ul class="{{ levelClass }}"{% if level > 0 and setInert %} inert{% endif %}>
     {% for item in items %}
-      <li{% if item.items %} class="mx-nav__has-subnav"{% endif %}>
-        {% if item.link.href %}
+      <li{% if item.items is not empty %} class="mx-nav__has-subnav"{% endif %}>
+        {% if item.link.href is not empty %}
           <a href="{{ item.link.href }}" {% if item.link.current %} aria-current="page" {% endif %}>
             {{ item.link.title }}
           </a>
         {% else %}
           {{ item.link.title }}
         {% endif %}
-        {% if item.items %}
+        {% if item.items is not empty %}
           <button class="mx-nav__toggle mx-icon mx-icon--chevron-down mx-icon--only">Sub-navigation</button>
           {{ nav.menutree(item.items, level + 1, setInert, baseClass) }}
         {% endif %}

package/src/Component/Tabs/tabs.twig

@@ -6,7 +6,7 @@
 
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 {{ title }}
-<mx-tabs{{ attributes }}{% if id %} id="{{ id }}"{% endif %}>
+<mx-tabs{{ attributes }}{% if id is not empty %} id="{{ id }}"{% endif %}>
   {% for item in items %}
     {{ item }}
   {% endfor %}

package/src/Component/Tag/tag.css

@@ -44,6 +44,10 @@
     &:is(a:hover, :has(input:checked)) {
       --tag-foreground: var(--link-colour, var(--colour-primary));
     }
+
+    &:empty {
+      display: none;
+    }
   }
 
   .mx-tags {

package/src/Form/Checkbox/input-checkbox.twig

@@ -19,7 +19,7 @@
       name="{{ name }}"
       value="{{ value }}"
       {% if checked %} checked="checked"{% endif %}
-      {% if helpers %} aria-describedby="{{ helpers }}"{% endif %}
+      {% if helpers is not empty %} aria-describedby="{{ helpers }}"{% endif %}
       {% if status == "invalid" %} aria-invalid="true"{% endif %}
       {% if required %} required{% endif %}
   >

package/src/Form/Form/form.twig

@@ -4,10 +4,10 @@
   {% for item in items %}
     {{ item }}
   {% endfor %}
-  {% if actions %}
+  {% if actions is not empty %}
   <div class="mx-form-actions">
     {% for action in actions %}
-      {{ actions }}
+      {{ action }}
     {% endfor %}
   </div>
   {% endif %}

package/src/Form/FormItem/form-item.twig

@@ -10,7 +10,7 @@
 <{{ as }}{{ attributes }}>
   {{ label }}
   {{ descriptionStart }}
-  {% if fields[0] %}
+  {% if fields[0] is not empty %}
     {% for field in fields %}
       {{ field }}
     {% endfor %}

package/src/Form/Select/input-select.twig

@@ -15,7 +15,7 @@
     id="{{ id }}"
     name="{{ name }}"
     {% if label %} aria-label="{{ label }}"{% endif %}
-    {% if helpers %} aria-describedby="{{ helpers }}"{% endif %}
+    {% if helpers is not empty %} aria-describedby="{{ helpers }}"{% endif %}
     {% if status == "invalid" %} aria-invalid="true"{% endif %}
     {% if required %} required{% endif %}
 >

package/src/Form/TextInput/input-text.twig

@@ -22,7 +22,7 @@
     value="{{ value }}"
     {% if label %} aria-label="{{ label }}"{% endif %}
     {% if placeholder %} placeholder="{{ placeholder }}"{% endif %}
-    {% if helpers %} aria-describedby="{{ helpers }}"{% endif %}
+    {% if helpers is not empty %} aria-describedby="{{ helpers }}"{% endif %}
     {% if status == "invalid" %} aria-invalid="true"{% endif %}
     {% if required %} required{% endif %}
 />

package/src/Form/Textarea/input-textarea.twig

@@ -15,7 +15,7 @@
     id="{{ id }}"
     name="{{ name }}"
     {% if label %} aria-label="{{ label }}"{% endif %}
-    {% if helpers %} aria-describedby="{{ helpers }}"{% endif %}
+    {% if helpers is not empty %} aria-describedby="{{ helpers }}"{% endif %}
     {% if status == "invalid" %} aria-invalid="true"{% endif %}
     {% if required %} required{% endif %}
 ></textarea>

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

@@ -20,7 +20,6 @@ const meta: Meta<FooterType> = {
   component: Component,
   args: {
     logo: Logo({
-      href: "#",
       src: "./mixtape-logo.png",
       alt: "Mixtape",
       width: "120",

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

@@ -4,15 +4,11 @@ exports[`Layout/Footer Everything smoke-test 1`] = `
 <div class="mx-page">
   <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
     <div class="mx-footer__inner">
-      <a class="mx-logo"
-         href="#"
+      <img alt="Mixtape"
+           src="./mixtape-logo.png"
+           width="120"
+           height
       >
-        <img alt="Mixtape"
-             src="./mixtape-logo.png"
-             width="120"
-             height
-        >
-      </a>
       <nav class="mx-social-links"
            aria-label="Social media links"
       >
@@ -136,15 +132,11 @@ exports[`Layout/Footer Footer smoke-test 1`] = `
 <div class="mx-page">
   <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
     <div class="mx-footer__inner">
-      <a class="mx-logo"
-         href="#"
+      <img alt="Mixtape"
+           src="./mixtape-logo.png"
+           width="120"
+           height
       >
-        <img alt="Mixtape"
-             src="./mixtape-logo.png"
-             width="120"
-             height
-        >
-      </a>
       <nav class="mx-nav mx-nav--footer"
            aria-label="Footer navigation"
            id="footer-story"
@@ -198,15 +190,11 @@ exports[`Layout/Footer Light smoke-test 1`] = `
 <div class="mx-page">
   <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--alt">
     <div class="mx-footer__inner">
-      <a class="mx-logo"
-         href="#"
+      <img alt="Mixtape"
+           src="./mixtape-logo.png"
+           width="120"
+           height
       >
-        <img alt="Mixtape"
-             src="./mixtape-logo.png"
-             width="120"
-             height
-        >
-      </a>
       <nav class="mx-nav mx-nav--footer"
            aria-label="Footer navigation"
            id="footer-story"
@@ -260,15 +248,11 @@ exports[`Layout/Footer NoMenu smoke-test 1`] = `
 <div class="mx-page">
   <footer class="mx-footer mx-section mx-section--top-l mx-section--bottom-m mx-background--reverse">
     <div class="mx-footer__inner">
-      <a class="mx-logo"
-         href="#"
+      <img alt="Mixtape"
+           src="./mixtape-logo.png"
+           width="120"
+           height
       >
-        <img alt="Mixtape"
-             src="./mixtape-logo.png"
-             width="120"
-             height
-        >
-      </a>
       <span class="mx-footer__copyright mx-text--s">
         © 2025 Company Name
       </span>
@@ -298,15 +282,11 @@ exports[`Layout/Footer WithAcknowledgment smoke-test 1`] = `
       <div class="mx-footer__aoc mx-text--s">
         We acknowledge the traditional owners and custodians of country throughout Australia and acknowledges their continuing connection to land, waters and community. We pay our respects to the people, the cultures and the elders past, present and emerging.
       </div>
-      <a class="mx-logo"
-         href="#"
+      <img alt="Mixtape"
+           src="./mixtape-logo.png"
+           width="120"
+           height
       >
-        <img alt="Mixtape"
-             src="./mixtape-logo.png"
-             width="120"
-             height
-        >
-      </a>
       <nav class="mx-nav mx-nav--footer"
            aria-label="Footer navigation"
            id="footer-story"

package/src/Layout/Footer/footer.twig

@@ -9,7 +9,7 @@
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 <footer{{ attributes }}>
   <div class="mx-footer__inner">
-  {% if aoc %}
+  {% if aoc is not empty %}
     <div class="mx-footer__aoc mx-text--s">{{ aoc }}</div>
   {% endif %}
 
@@ -17,10 +17,10 @@
   {{ socials }}
   {{ navigation }}
 
-  {% if copyright %}
+  {% if copyright is not empty %}
     <span class="mx-footer__copyright mx-text--s">{{ copyright }}</span>
   {% endif %}
-  {% if links %}
+  {% if links is not empty %}
     <nav class="mx-footer__links mx-nav mx-nav--inline mx-text--s" aria-label="Footer subsidiary links">
       {% for link in links %}
         {{ link }}

package/src/Layout/Header/Header.stories.ts

@@ -24,7 +24,6 @@ const meta: Meta<HeaderType> = {
   component: Component,
   args: {
     logo: Logo({
-      href: "#",
       src: "./mixtape-logo.png",
       alt: "Mixtape",
       width: "120",

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

@@ -6,7 +6,7 @@ exports[`Layout/Header Controls smoke-test 1`] = `
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
-           href="#"
+           href="/"
         >
           <img alt="Mixtape"
                src="./mixtape-logo.png"
@@ -81,7 +81,7 @@ exports[`Layout/Header Header smoke-test 1`] = `
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
-           href="#"
+           href="/"
         >
           <img alt="Mixtape"
                src="./mixtape-logo.png"
@@ -147,7 +147,7 @@ exports[`Layout/Header Search smoke-test 1`] = `
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
-           href="#"
+           href="/"
         >
           <img alt="Mixtape"
                src="./mixtape-logo.png"
@@ -248,7 +248,7 @@ exports[`Layout/Header Stacked smoke-test 1`] = `
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
-           href="#"
+           href="/"
         >
           <img alt="Mixtape"
                src="./mixtape-logo.png"
@@ -454,7 +454,7 @@ exports[`Layout/Header WithTitle smoke-test 1`] = `
     <div class="mx-header__inner">
       <div class="mx-header__brand">
         <a class="mx-logo"
-           href="#"
+           href="/"
         >
           <img alt="Mixtape"
                src="./mixtape-logo.png"

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

@@ -7,41 +7,43 @@
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 <header{{ attributes }}>
   <div class="mx-header__inner">
-    {% if logo or title or description %}
+    {% if logo is not empty or title is not empty or description is not empty %}
       <div class="mx-header__brand">
-        {{ logo }}
-        {% if title or description %}
+        <a class="mx-logo" href="/">{{ logo }}</a>
+        {% if title is not empty or description is not empty %}
           <div class="mx-header__name">
-            {% if title %}<strong>{{ title }}</strong>{% endif %}
+            {% if title is not empty %}<strong>{{ title }}</strong>{% endif %}
             {{ description }}
           </div>
         {% endif %}
       </div>
     {% endif %}
-    {% if navigation or search %}
+    {% if navigation is not empty or search is not empty %}
       <div class="mx-header__toggles">
-        {% if search %}
+        {% if search is not empty %}
           <mx-global-toggle hideMenu><button aria-controls="primary-search" class="mx-button mx-button--icon-only mx-icon mx-icon--search" disabled>Open Search</button></mx-global-toggle>
         {% endif %}
-        {% if navigation %}
+        {% if navigation is not empty %}
           <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--menu" disabled>Open Menu</button></mx-global-toggle>
         {% endif %}
       </div>
     {% endif %}
-    {% if search %}
+    {% if search is not empty %}
     <div id="primary-search" class="mx-header__search global-nav-up-only" aria-label="Search">
       {{ search }}
     </div>
     {% endif %}
   </div>
 </header>
-{% if navigation or controls %}
+{% if navigation is not empty or controls is not empty %}
 <div id="primary-nav" class="mx-header__nav mx-section global-nav-up-only" aria-label="Primary navigation">
   <div class="mx-header__nav-inner">
     {{ navigation }}
-    {% if controls %}
+    {% if controls is not empty %}
     <div class="mx-header__nav-right">
-      {{ controls }}
+      {% for control in controls %}
+        {{ controls }}
+      {% endfor %}
     </div>
     {% endif %}
   </div>

package/src/Layout/Header/header.twig

@@ -7,39 +7,41 @@
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 <header{{ attributes }}>
   <div class="mx-header__inner">
-    {% if logo or title or description %}
+    {% if logo is not empty or title is not empty or description is not empty %}
       <div class="mx-header__brand">
-        {{ logo }}
-        {% if title or description %}
+        <a class="mx-logo" href="/">{{ logo }}</a>
+        {% if title is not empty or description is not empty %}
           <div class="mx-header__name">
-            {% if title %}<strong>{{ title }}</strong>{% endif %}
+            {% if title is not empty %}<strong>{{ title }}</strong>{% endif %}
             {{ description }}
           </div>
         {% endif %}
       </div>
     {% endif %}
-    {% if navigation or search %}
+    {% if navigation is not empty or search is not empty %}
     <div class="mx-header__toggles">
-      {% if search %}
+      {% if search is not empty %}
         <mx-global-toggle hideMenu><button aria-controls="primary-search" class="mx-button mx-button--icon-only mx-icon mx-icon--search" disabled>Open Search</button></mx-global-toggle>
       {% endif %}
-      {% if navigation %}
+      {% if navigation is not empty %}
         <mx-global-toggle><button aria-controls="primary-nav" class="mx-button mx-button--dark mx-button--icon-only mx-icon mx-icon--menu" disabled>Open Menu</button></mx-global-toggle>
       {% endif %}
     </div>
     {% endif %}
     <div class="mx-header__main">
-      {% if navigation %}
+      {% if navigation is not empty %}
         <div id="primary-nav" class="mx-header__nav global-nav-up-only" aria-label="Primary navigation">
           {{ navigation }}
         </div>
       {% endif %}
-      {% if search %}
+      {% if search is not empty %}
         <div id="primary-search" class="mx-header__search global-nav-up-only" aria-label="Search">
           {{ search }}
         </div>
       {% endif %}
-      {{ controls }}
+      {% for control in controls %}
+        {{ controls }}
+      {% endfor %}
     </div>
   </div>
 </header>

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

@@ -1,3 +1 @@
-<a class="mx-logo" href="{{ href }}">
-  <img alt="{{ alt }}" src="{{ src }}" width="{{ width }}" height="{{ height }}" />
-</a>
+<img alt="{{ alt }}" src="{{ src }}" width="{{ width }}" height="{{ height }}" />

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

@@ -15,6 +15,16 @@ const meta: Meta<MastheadType> = {
   component: Component,
   args: {
     content: "A PreviousNext product",
+    skipLinks: [
+      Link({
+        href: "#content",
+        title: "Skip to content",
+      }),
+      Link({
+        href: "#nav",
+        title: "Skip to navigation",
+      }),
+    ],
   },
   decorators: [Page],
 }

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

@@ -2,9 +2,25 @@
 
 exports[`Layout/Masthead Light smoke-test 1`] = `
 <div class="mx-page">
+  <nav class="mx-skip-links"
+       aria-label="Skip to links"
+  >
+    <a href="#content">
+      <span>
+        Skip to content
+      </span>
+    </a>
+    <a href="#nav">
+      <span>
+        Skip to navigation
+      </span>
+    </a>
+  </nav>
   <div class="mx-masthead mx-section__full mx-page mx-spacing--top-xxs mx-spacing--bottom-xxs mx-background--alt">
     <div class="flex">
-      A PreviousNext product
+      <div>
+        A PreviousNext product
+      </div>
     </div>
   </div>
 </div>
@@ -12,9 +28,25 @@ exports[`Layout/Masthead Light smoke-test 1`] = `
 
 exports[`Layout/Masthead Masthead smoke-test 1`] = `
 <div class="mx-page">
+  <nav class="mx-skip-links"
+       aria-label="Skip to links"
+  >
+    <a href="#content">
+      <span>
+        Skip to content
+      </span>
+    </a>
+    <a href="#nav">
+      <span>
+        Skip to navigation
+      </span>
+    </a>
+  </nav>
   <div class="mx-masthead mx-section__full mx-page mx-spacing--top-xxs mx-spacing--bottom-xxs mx-background--reverse">
     <div class="flex">
-      A PreviousNext product
+      <div>
+        A PreviousNext product
+      </div>
     </div>
   </div>
 </div>
@@ -22,9 +54,25 @@ exports[`Layout/Masthead Masthead smoke-test 1`] = `
 
 exports[`Layout/Masthead WithLinks smoke-test 1`] = `
 <div class="mx-page">
+  <nav class="mx-skip-links"
+       aria-label="Skip to links"
+  >
+    <a href="#content">
+      <span>
+        Skip to content
+      </span>
+    </a>
+    <a href="#nav">
+      <span>
+        Skip to navigation
+      </span>
+    </a>
+  </nav>
   <div class="mx-masthead mx-section__full mx-page mx-spacing--top-xxs mx-spacing--bottom-xxs mx-background--reverse">
     <div class="flex">
-      A PreviousNext product
+      <div>
+        A PreviousNext product
+      </div>
       <nav class="mx-masthead__nav"
            aria-label="Additional links"
       >

package/src/Layout/Masthead/masthead.css

@@ -18,6 +18,29 @@
       gap: var(--gap);
     }
   }
+
+  .mx-skip-links {
+    background-color: var(--colour-background-alt);
+    position: fixed;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    display: flex;
+    z-index: 200;
+    transform: translateY(-100%);
+    visibility: hidden;
+
+    &:has(a:focus) {
+      transform: translateY(0);
+      visibility: visible;
+    }
+
+    & a {
+      display: inline-block;
+      padding-block: 2px;
+      padding-inline: 4px;
+    }
+  }
 }
 
 @media print {