@pnx-mixtape/mxds 0.0.8 → 0.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "scripts": {
     "dev": "concurrently -k -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"npm run dev-vite\" \"npm run dev-storybook\"",
     "build": "concurrently -n \"VITE,STORYBOOK\" -c \"#636cff,#ff4785\" \"npm run build-vite\" \"npm run build-storybook\"",

package/src/Atom/Button/button.twig

@@ -8,7 +8,7 @@
 {% endfor %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
-{% if href %}
+{% if href is not empty %}
   <a{{ attributes}} href="{{ href }}">
     {{ iconStart }}
     <span{% if iconOnly %} class="sr-only"{% endif %}>{{ title }}</span>

package/src/Atom/Image/image.twig

@@ -6,8 +6,8 @@
   <img
       src="{{ src }}"
       alt="{{ alt }}"
-      {% if loading %} loading="{{ loading }}"{% endif %}
-      {% if height %} height="{{ height }}"{% endif %}
-      {% if width %} width="{{ width }}"{% endif %}
+      {% if loading is not empty %} loading="{{ loading }}"{% endif %}
+      {% if height is not empty %} height="{{ height }}"{% endif %}
+      {% if width is not empty %} width="{{ width }}"{% endif %}
   />
 </picture>

package/src/Atom/Link/link.twig

@@ -5,7 +5,7 @@
   download ? baseClass~'--download' : null,
 ]|join(" ")|trim() %}
 {% set attributes = (attributes ?? create_attribute()) %}
-{% if classes %}
+{% if classes is not empty %}
   {% set attributes = attributes.addClass(classes) %}
 {% endif %}
 

package/src/Atom/Media/media.twig

@@ -8,10 +8,10 @@
 
 <figure{{ attributes }}>
   {{ item }}
-  {% if caption or attribution%}
+  {% if caption is not empty or attribution is not empty %}
   <figcaption>
     {{ caption }}
-    {% if caption and attribution %} - {% endif %}
+    {% if caption is not empty and attribution is not empty %} - {% endif %}
     {{ attribution }}
   </figcaption>
   {% endif %}

package/src/Atom/Video/video.twig

@@ -2,7 +2,7 @@
 <figure{{ attributes }}>
   <iframe
       src="{{ src }}"
-      {% if title %} title="{{ title }}"{% endif %}
+      {% if title is not empty %} title="{{ title }}"{% endif %}
       allowfullscreen
   ></iframe>
 </figure>

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

@@ -6,7 +6,7 @@
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 <mx-accordion>
-  <details{{ attributes }}{% if id %} id="{{ id }}"{% endif %}>
+  <details{{ attributes }}{% if id is not empty %} id="{{ id }}"{% endif %}>
     <summary class="mx-accordion__toggle">
       {{ title }}
       <span class="mx-button mx-icon mx-button--small mx-button--icon-only mx-icon--chevron-down" aria-hidden="true"></span>

package/src/Component/Accordion/accordion.twig

@@ -2,7 +2,7 @@
   {% if toggleAll %}
   <mx-accordion-group>
   {% endif %}
-    {% if title or toggleAll %}
+    {% if title is not empty or toggleAll %}
       <div class="mx-accordion__title">
         {{ title }}
         {% if toggleAll %}

package/src/Component/Card/Card.stories.ts

@@ -1,14 +1,6 @@
 import { Meta, StoryObj } from "@storybook/html"
 import Component from "./card.twig"
 import "./card.css"
-import "../Tag/tag.css"
-import "../LinkList/link-list.css"
-import Heading from "../../Atom/Heading/heading.twig"
-import Link from "../../Atom/Link/link.twig"
-import Image from "../../Atom/Image/image.twig"
-import Tags from "../Tag/tags.twig"
-import LinkList from "../LinkList/link-list.twig"
-import Icon from "../../Atom/Icon/icon.twig"
 import {
   Card as CardType,
   CardModifier,
@@ -18,6 +10,17 @@ import {
 } 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 Tags from "../Tag/tags.twig"
+import LinkList from "../LinkList/link-list.twig"
+import Icon from "../../Atom/Icon/icon.twig"
+// css
+import "../Tag/tag.css"
+import "../LinkList/link-list.css"
+
 export type MxCardType = Omit<CardType, "modifiers"> & {
   modifiers?: CardModifier[] | ListItemModifiers[]
 }
@@ -100,18 +103,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/Card/__snapshots__/Card.stories.ts.snap

@@ -200,24 +200,30 @@ exports[`Component/Card WithLinkList smoke-test 1`] = `
       </div>
       <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/Card/card.twig

@@ -12,30 +12,30 @@
     {% set classes = classes|merge([baseClass~"--"~modifier]) %}
   {% endif %}
 {% endfor %}
-{% if background %}
+{% if background is not empty %}
   {% set classes = classes|merge([background]) %}
 {% endif %}
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 <div class="mx-container">
 <article{{ attributes }}>
-  {% if image %}
+  {% if image is not empty %}
   <figure class="mx-card__media">
     {{ image }}
   </figure>
   {% endif %}
-  {% if icon %}
+  {% if icon is not empty %}
     <div class="mx-card__icon">
       {{ icon }}
     </div>
   {% endif %}
   <div class="mx-card__content mx-vertical-flow-flex">
-    {% if date %}
+    {% if date is not empty %}
       <div class="mx-text--s">{{ date }}</div>
     {% endif %}
     {{ title }}
     {{ tags }}
-    {% if content %}
+    {% if content is not empty %}
       <div class="mx-text--lede">{{ content }}</div>
     {% endif %}
     {{ linkList }}

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

@@ -11,25 +11,13 @@ exports[`Component/ContentBlock ContentBlock smoke-test 1`] = `
     </p>
     <ul class="mx-link-list">
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link one
-        </a>
+        [object Object]
       </li>
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link two
-        </a>
+        [object Object]
       </li>
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link three
-        </a>
+        [object Object]
       </li>
     </ul>
     <a class="mx-link--more"
@@ -58,25 +46,13 @@ exports[`Component/ContentBlock WithIcon smoke-test 1`] = `
     </p>
     <ul class="mx-link-list">
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link one
-        </a>
+        [object Object]
       </li>
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link two
-        </a>
+        [object Object]
       </li>
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link three
-        </a>
+        [object Object]
       </li>
     </ul>
     <a class="mx-link--more"
@@ -108,25 +84,13 @@ exports[`Component/ContentBlock WithImage smoke-test 1`] = `
     </p>
     <ul class="mx-link-list">
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link one
-        </a>
+        [object Object]
       </li>
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link two
-        </a>
+        [object Object]
       </li>
       <li>
-        <a href="#"
-           class="mx-icon mx-icon--chevron-right"
-        >
-          Link three
-        </a>
+        [object Object]
       </li>
     </ul>
     <a class="mx-link--more"

package/src/Component/ContentBlock/content-block.twig

@@ -2,12 +2,12 @@
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 <article{{ attributes }}>
-  {% if image %}
+  {% if image is not empty %}
     <figure class="mx-content-block__media">
       {{ image }}
     </figure>
   {% endif %}
-  {% if icon %}
+  {% if icon is not empty %}
     <div class="mx-content-block__icon">
       {{ icon }}
     </div>

package/src/Component/DropMenu/drop-menu.twig

@@ -17,7 +17,7 @@
     popover
 >
   {% for item in items %}
-    {% if item.href %}
+    {% if item.href is not empty %}
       <a href="{{ item.href }}">{{ item.label }}</a>
     {% else %}
       <button type="button" data-id="{{ item.id }}" aria-checked="false">{{ item.label }}</button>

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

@@ -2,9 +2,7 @@
 
 exports[`Component/GlobalAlert Critical smoke-test 1`] = `
 <div class="mx-global-alert mx-page mx-global-alert--critical">
-  <div class="mx-global-alert__inner"
-       data-container
-  >
+  <div class="mx-global-alert__inner">
     <div class="mx-global-alert__content">
       <h2 class=" mx-heading--m">
         In page alert

package/src/Component/GlobalAlert/global-alert.twig

@@ -7,7 +7,7 @@
 {% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 {% if dismissible %}
-<mx-closable-alert {{ attributes}}{% if id %} id="{{ id ~ type }}"{% endif %}>
+<mx-closable-alert {{ attributes}}{% if id is not empty %} id="{{ id ~ type }}"{% endif %}>
   <div class="mx-global-alert__inner" data-container>
     <div class="mx-global-alert__content">
       {{ title }}
@@ -17,8 +17,8 @@
   </div>
 </mx-closable-alert>
 {% else %}
-  <div {{ attributes}}{% if id %} id="{{ id ~ type }}"{% endif %}>
-    <div class="mx-global-alert__inner" data-container>
+  <div {{ attributes}}{% if id is not empty %} id="{{ id ~ type }}"{% endif %}>
+    <div class="mx-global-alert__inner">
       <div class="mx-global-alert__content">
         {{ title }}
         {{ content }}

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);
   }