@pnx-mixtape/mxds 0.0.8 → 0.0.10

package/src/Component/HeroBanner/HeroBanner.stories.ts

@@ -1,17 +1,22 @@
 import { Meta, StoryObj } from "@storybook/html"
 import { Page } from "../../../.storybook/decorators"
 import Component from "./hero-banner.twig"
-import Heading from "../../Atom/Heading/heading.twig"
-import Link from "../../Atom/Link/link.twig"
-import Image from "../../Atom/Image/image.twig"
-import LinkList from "../LinkList/link-list.twig"
 import "./hero-banner.css"
-import "../LinkList/link-list.css"
 import {
   HeroBannerModifier,
   HeadingTypes,
   HeroBanner as HeroBannerType,
 } from "@pnx-mixtape/ids-shape"
+import { Icons } from "../../enums"
+
+// Deps.
+import Heading from "../../Atom/Heading/heading.twig"
+import Link from "../../Atom/Link/link.twig"
+import Image from "../../Atom/Image/image.twig"
+import LinkList from "../LinkList/link-list.twig"
+import Icon from "../../Atom/Icon/icon.twig"
+// css
+import "../LinkList/link-list.css"
 
 const meta: Meta<HeroBannerType> = {
   tags: ["autodocs", "ids-mvp"],
@@ -62,18 +67,27 @@ export const WithLinkList: Story = {
     link: null,
     linkList: LinkList({
       items: [
-        {
+        Link({
           title: "Link one",
           href: "#",
-        },
-        {
+          iconEnd: Icon({
+            icon: Icons.CHEVRON_RIGHT,
+          }),
+        }),
+        Link({
           title: "Link two",
           href: "#",
-        },
-        {
+          iconEnd: Icon({
+            icon: Icons.CHEVRON_RIGHT,
+          }),
+        }),
+        Link({
           title: "Link three",
           href: "#",
-        },
+          iconEnd: Icon({
+            icon: Icons.CHEVRON_RIGHT,
+          }),
+        }),
       ],
     }),
   },

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

@@ -46,24 +46,30 @@ exports[`Component/HeroBanner WithLinkList smoke-test 1`] = `
       <div class="mx-hero-banner__aside">
         <ul class="mx-link-list">
           <li>
-            <a href="#"
-               class="mx-icon mx-icon--chevron-right"
-            >
-              Link one
+            <a href="#">
+              <span>
+                Link one
+              </span>
+              <span class="mx-icon mx-icon--chevron-right ">
+              </span>
             </a>
           </li>
           <li>
-            <a href="#"
-               class="mx-icon mx-icon--chevron-right"
-            >
-              Link two
+            <a href="#">
+              <span>
+                Link two
+              </span>
+              <span class="mx-icon mx-icon--chevron-right ">
+              </span>
             </a>
           </li>
           <li>
-            <a href="#"
-               class="mx-icon mx-icon--chevron-right"
-            >
-              Link three
+            <a href="#">
+              <span>
+                Link three
+              </span>
+              <span class="mx-icon mx-icon--chevron-right ">
+              </span>
             </a>
           </li>
         </ul>

package/src/Component/HeroBanner/hero-banner.twig

@@ -23,17 +23,17 @@
   <div class="mx-hero-banner__inner">
     <div class="mx-hero-banner__content mx-vertical-flow mx-section--xl">
       {{ title }}
-      {% if subtitle %}
+      {% if subtitle is not empty %}
         <p class="mx-text--lede">{{ subtitle }}</p>
       {% endif %}
       {{ content }}
       {{ link }}
     </div>
-    {% if linkList %}
+    {% if linkList is not empty %}
       <div class="mx-hero-banner__aside">
         {{ linkList }}
       </div>
-    {% elseif image %}
+    {% elseif image is not empty %}
       <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
         {{ image }}
       </div>

package/src/Component/LinkList/LinkList.stories.ts

@@ -2,23 +2,37 @@ import { Meta, StoryObj } from "@storybook/html"
 import Component from "./link-list.twig"
 import "./link-list.css"
 
+// Deps.
+import Link from "../../Atom/Link/link.twig"
+import Icon from "../../Atom/Icon/icon.twig"
+import { Icons } from "../../enums"
+
 const meta: Meta<typeof Component> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
   args: {
     items: [
-      {
+      Link({
         title: "Music",
         href: "#",
-      },
-      {
+        iconEnd: Icon({
+          icon: Icons.CHEVRON_RIGHT,
+        }),
+      }),
+      Link({
         title: "Performances",
         href: "#",
-      },
-      {
+        iconEnd: Icon({
+          icon: Icons.CHEVRON_RIGHT,
+        }),
+      }),
+      Link({
         title: "Get involved",
         href: "#",
-      },
+        iconEnd: Icon({
+          icon: Icons.CHEVRON_RIGHT,
+        }),
+      }),
     ],
   },
 }

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

@@ -3,24 +3,30 @@
 exports[`Component/LinkList LinkList smoke-test 1`] = `
 <ul class="mx-link-list">
   <li>
-    <a href="#"
-       class="mx-icon mx-icon--chevron-right"
-    >
-      Music
+    <a href="#">
+      <span>
+        Music
+      </span>
+      <span class="mx-icon mx-icon--chevron-right ">
+      </span>
     </a>
   </li>
   <li>
-    <a href="#"
-       class="mx-icon mx-icon--chevron-right"
-    >
-      Performances
+    <a href="#">
+      <span>
+        Performances
+      </span>
+      <span class="mx-icon mx-icon--chevron-right ">
+      </span>
     </a>
   </li>
   <li>
-    <a href="#"
-       class="mx-icon mx-icon--chevron-right"
-    >
-      Get involved
+    <a href="#">
+      <span>
+        Get involved
+      </span>
+      <span class="mx-icon mx-icon--chevron-right ">
+      </span>
     </a>
   </li>
 </ul>

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

@@ -7,16 +7,6 @@
     list-style-type: none;
     padding-inline-start: 0;
 
-    & a {
-      display: block;
-      text-decoration-line: none;
-      color: inherit;
-
-      &:hover {
-        text-decoration-line: underline;
-      }
-    }
-
     & li {
       min-block-size: var(--min-height, var(--spacing-xl));
       border-block-end: var(--line-width, 1px) solid
@@ -27,41 +17,23 @@
       }
     }
 
-    & .mx-icon {
+    & a {
       position: relative;
       display: flex;
       align-items: center;
-      padding-block: var(--spacing-xxxs);
+      padding-block: var(--vertical-padding, var(--spacing-xxxs));
       inline-size: 100%;
+      justify-content: var(--justify, space-between);
       gap: var(--spacing-s);
+      text-decoration-line: none;
+      color: inherit;
 
-      &::before {
-        flex: 0 0 auto;
-        mask-position: left center;
-      }
-    }
-
-    &:where(:not(.mx-link-list--reverse)) .mx-icon {
-      justify-content: space-between;
-
-      &::before {
-        mask-position: right center;
-        order: 2;
+      &:hover {
+        text-decoration-line: underline;
       }
     }
   }
 
-  [dir="rtl"] .mx-link-list,
-  .translated-rtl .mx-link-list {
-    & .mx-icon::before {
-      mask-position: left center;
-    }
-
-    &.mx-link-list--reverse .mx-icon::before {
-      mask-position: right center;
-    }
-  }
-
   * + .mx-link-list {
     margin-block-start: var(--spacing-m);
   }

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,5 +1,5 @@
-{% extends "./menu.twig" %}
-{% set componentAttributes = (componentAttributes|default(create_attribute())) %}
+{% extends "@mixtape/Component/Navigation/menu.twig" %}
+{% set componentAttributes = (componentAttributes ?? create_attribute()) %}
 {% if type == "collapsible" %}
   {# Vertical click to expand menu. Is the default mobile experience for dropdown and mega menus. #}
   {% set needsJs = true %}

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",