@pnx-mixtape/mxds 0.0.7 → 0.0.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.7",
+  "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\"",
@@ -32,7 +32,7 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.5",
     "@oddbird/popover-polyfill": "^0.4.3",
-    "@pnx-mixtape/ids-shape": "^0.0.15",
+    "@pnx-mixtape/ids-shape": "^0.0.16",
     "classnames": "^2.5.1",
     "js-cookie": "^3.0.5",
     "react": "^18.3.1",

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/Card.tsx

@@ -8,8 +8,8 @@ type CardProps = PropsWithChildren & {
   title: string
   image?: ReactNode
   intro?: ReactNode
-  right?: boolean
-  clickable?: boolean
+  reversed?: boolean
+  block?: boolean
   headingLevel?: HeadingTypes
   headingModifier?: HeadingStyles
   as?: AsTags
@@ -18,8 +18,8 @@ type CardProps = PropsWithChildren & {
 const Card = ({
   title,
   children,
-  right = null,
-  clickable = false,
+  reversed = null,
+  block = false,
   image = null,
   intro = null,
   headingLevel = HeadingTypes.THREE,
@@ -31,12 +31,12 @@ const Card = ({
     <Tag className="mx-container">
       <article
         className={classNames("mx-card", {
-          "mx-card--right": right,
-          "mx-card--clickable": clickable,
+          "mx-card--reversed": reversed,
+          "mx-card--block": block,
         })}
       >
         {image && (
-          <figure className={classNames("mx-card__media", "mx-stack")}>
+          <figure className={classNames("mx-card__media", "stack")}>
             <div className="mx-skeleton mx-skeleton--bg"></div>
             {image}
           </figure>

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

@@ -122,7 +122,7 @@ exports[`Component/Card NoImage smoke-test 1`] = `
 
 exports[`Component/Card Reverse smoke-test 1`] = `
 <div class="mx-container">
-  <article class="mx-card mx-card--reverse">
+  <article class="mx-card mx-card--reversed">
     <figure class="mx-card__media">
       <picture>
         <img src="https://picsum.photos/id/56/558/418?grayscale"
@@ -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/__snapshots__/Card.stories.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Component/Card Card smoke-test 1`] = `
 <div class="mx-container">
   <article class="mx-card">
-    <figure class="mx-card__media mx-stack">
+    <figure class="mx-card__media stack">
       <div class="mx-skeleton mx-skeleton--bg">
       </div>
       <img alt
@@ -31,8 +31,8 @@ exports[`Component/Card Card smoke-test 1`] = `
 
 exports[`Component/Card Linked smoke-test 1`] = `
 <div class="mx-container">
-  <article class="mx-card mx-card--clickable">
-    <figure class="mx-card__media mx-stack">
+  <article class="mx-card">
+    <figure class="mx-card__media stack">
       <div class="mx-skeleton mx-skeleton--bg">
       </div>
       <img alt
@@ -60,8 +60,8 @@ exports[`Component/Card Linked smoke-test 1`] = `
 
 exports[`Component/Card Right smoke-test 1`] = `
 <div class="mx-container">
-  <article class="mx-card mx-card--right">
-    <figure class="mx-card__media mx-stack">
+  <article class="mx-card">
+    <figure class="mx-card__media stack">
       <div class="mx-skeleton mx-skeleton--bg">
       </div>
       <img alt

package/src/Component/Card/card.css

@@ -29,7 +29,7 @@
         grid-template: "media content" 1fr / 1fr 1fr;
         align-items: center;
 
-        &.mx-card--reverse {
+        &.mx-card--reversed {
           grid-template-areas: "content media";
         }
 
@@ -48,11 +48,11 @@
             padding-block-start: var(--content-min-spacing, var(--spacing-s));
           }
 
-          &:where(:not(.mx-card--reverse)) .mx-card__content {
+          &:where(:not(.mx-card--reversed)) .mx-card__content {
             padding-inline-start: 0;
           }
 
-          &.mx-card--reverse .mx-card__content {
+          &.mx-card--reversed .mx-card__content {
             padding-inline-end: 0;
           }
         }

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/ContentBlock.tsx

@@ -25,7 +25,7 @@ const ContentBlock = ({
   return (
     <Tag className={classNames("mx-content-block")} {...props}>
       {image && (
-        <figure className={classNames("mx-content-block__media", "mx-stack")}>
+        <figure className={classNames("mx-content-block__media", "stack")}>
           <div className="mx-skeleton mx-skeleton--bg"></div>
           {image}
         </figure>

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/__snapshots__/ContentBlock.stories.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Component/ContentBlock ContentBlock smoke-test 1`] = `
 <div class="mx-content-block">
-  <figure class="mx-content-block__media mx-stack">
+  <figure class="mx-content-block__media stack">
     <div class="mx-skeleton mx-skeleton--bg">
     </div>
     <img alt

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>