@pnx-mixtape/mxds 0.0.6 → 0.0.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnx-mixtape/mxds",
   "description": "The Mixtape Design System",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "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.8",
+    "@pnx-mixtape/ids-shape": "^0.0.15",
     "classnames": "^2.5.1",
     "js-cookie": "^3.0.5",
     "react": "^18.3.1",

package/src/Atom/Button/Button.stories.ts

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./twig/story-button.twig"
+import Component from "./button.twig"
+import Icon from "../Icon/icon.twig"
 import "./button.css"
 import {
   Button as ButtonType,
@@ -62,8 +63,8 @@ export const Link: Story = {
 
 export const IconButton: Story = {
   args: {
-    iconEnd: {
+    iconEnd: Icon({
       icon: Icons.ARROW_RIGHT,
-    },
+    }),
   },
 }

package/src/Atom/Button/__snapshots__/Button.stories.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Button Button smoke-test 1`] = `
-<button class="button"
+<button class="mx-button"
         type="button"
 >
   Button
@@ -9,7 +9,7 @@ exports[`Atom/Button Button smoke-test 1`] = `
 `;
 
 exports[`Atom/Button Primary smoke-test 1`] = `
-<button class="button button--dark"
+<button class="mx-button mx-button--dark"
         type="button"
 >
   Button

package/src/Atom/Button/_buttons.css

@@ -68,7 +68,7 @@
       mask-size: var(--spacing-s);
     }
 
-    &:has(.icon) {
+    &:has(.mx-icon) {
       place-content: center;
     }
   }

package/src/Atom/Button/button.twig

@@ -6,7 +6,7 @@
 {% for modifier in modifiers %}
   {% set classes = classes|merge([baseClass~"--"~modifier]) %}
 {% endfor %}
-{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 {% if href %}
   <a{{ attributes}} href="{{ href }}">

package/src/Atom/Heading/__snapshots__/Heading.stories.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Heading Headings smoke-test 1`] = `
-<h2 class>
+<h2>
   Heading
 </h2>
 `;

package/src/Atom/Heading/heading.twig

@@ -21,6 +21,9 @@
   srOnly ? 'sr-only' : null,
   style ? 'mx-heading--'~style : null,
 ] %}
-{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+{% set attributes = (attributes ?? create_attribute()) %}
+{% if classes|join(" ")|trim() %}
+  {% set attributes = attributes.addClass(classes) %}
+{% endif %}
 
 <{{ as|default('h2')  }} {{ attributes }}>{{ title }}</{{ as|default('h2') }}>

package/src/Atom/Icon/__snapshots__/Icon.stories.tsx.snap

@@ -1,18 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Icon Alignment smoke-test 1`] = `
-<span class="icon icon--arrow-left icon--end">
+<span class="mx-icon mx-icon--arrow-left mx-icon--end">
   Message with icon
 </span>
 `;
 
 exports[`Atom/Icon Icon smoke-test 1`] = `
-<span class="icon icon--arrow-right">
+<span class="mx-icon mx-icon--arrow-right">
 </span>
 `;
 
 exports[`Atom/Icon WithText smoke-test 1`] = `
-<span class="icon icon--arrow-right">
+<span class="mx-icon mx-icon--arrow-right">
   Message with icon
 </span>
 `;

package/src/Atom/Icon/icon.twig

@@ -7,6 +7,6 @@
   rotate ? baseClass~'--'~rotate : null,
   size ? baseClass~'--size-'~size : null,
 ] %}
-{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 <span{{ attributes }}>{{ text }}</span>

package/src/Atom/Link/Link.stories.ts

@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./twig/story-link.twig"
+import Component from "./link.twig"
+import Icon from "../Icon/icon.twig"
 import "../_base.css"
 import { Link as LinkType } from "@pnx-mixtape/ids-shape"
 import { Icons } from "../../enums"
@@ -30,9 +31,9 @@ export const Link: Story = {}
 export const More: Story = {
   args: {
     more: true,
-    iconEnd: {
+    iconEnd: Icon({
       icon: Icons.ARROW_RIGHT,
-    },
+    }),
   },
 }
 
@@ -46,16 +47,16 @@ export const Download: Story = {
   args: {
     download: true,
     title: "Download (PDF 12kb)",
-    iconStart: {
+    iconStart: Icon({
       icon: Icons.DOWNLOAD,
-    },
+    }),
   },
 }
 
 export const IconLink: Story = {
   args: {
-    iconStart: {
+    iconStart: Icon({
       icon: Icons.LINK,
-    },
+    }),
   },
 }

package/src/Atom/Link/__snapshots__/Link.stories.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Link Download smoke-test 1`] = `
-<a class="mx-link  mx-link--download"
+<a class="mx-link--download"
    href="#"
 >
   <span class="mx-icon mx-icon--download ">
@@ -13,7 +13,7 @@ exports[`Atom/Link Download smoke-test 1`] = `
 `;
 
 exports[`Atom/Link External smoke-test 1`] = `
-<a class="mx-link  mx-link--external"
+<a class="mx-link--external"
    href="#"
 >
   <span>
@@ -23,9 +23,7 @@ exports[`Atom/Link External smoke-test 1`] = `
 `;
 
 exports[`Atom/Link IconLink smoke-test 1`] = `
-<a class="mx-link "
-   href="#"
->
+<a href="#">
   <span class="mx-icon mx-icon--link ">
   </span>
   <span>
@@ -35,9 +33,7 @@ exports[`Atom/Link IconLink smoke-test 1`] = `
 `;
 
 exports[`Atom/Link Link smoke-test 1`] = `
-<a class="mx-link "
-   href="#"
->
+<a href="#">
   <span>
     Hyperlink
   </span>
@@ -45,7 +41,7 @@ exports[`Atom/Link Link smoke-test 1`] = `
 `;
 
 exports[`Atom/Link More smoke-test 1`] = `
-<a class="mx-link mx-link--more "
+<a class="mx-link--more"
    href="#"
 >
   <span>

package/src/Atom/Link/__snapshots__/Link.stories.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Atom/Link External smoke-test 1`] = `
 <a href="http://example.com"
-   class="link link--external"
+   class="mx-link mx-link--external"
 >
   Link
 </a>
@@ -10,7 +10,7 @@ exports[`Atom/Link External smoke-test 1`] = `
 
 exports[`Atom/Link Link smoke-test 1`] = `
 <a href="http://example.com"
-   class="link"
+   class="mx-link"
 >
   Link
 </a>
@@ -18,7 +18,7 @@ exports[`Atom/Link Link smoke-test 1`] = `
 
 exports[`Atom/Link More smoke-test 1`] = `
 <a href="http://example.com"
-   class="link link--more"
+   class="mx-link mx-link--more"
 >
   Link
 </a>

package/src/Atom/Link/_links.css

@@ -1,12 +1,21 @@
 @layer design-system.defaults {
-  :is(.mx-link, .mx-link--more, .mx-link--external),
-  .mx-rich-text a:where([href]:not([class])) {
+  a[href] {
     color: var(--link-colour, var(--colour-primary));
     transition: color 0.2s var(--ease);
+    text-decoration: underline;
+    text-decoration-thickness: max(0.08em, 1px);
+    text-decoration-skip-ink: auto;
+    text-underline-offset: 0.15em;
 
     &:focus-visible {
       outline-offset: var(--spacing-xxxs);
     }
+
+    &:hover,
+    &:active {
+      text-underline-offset: 0.2em;
+      text-decoration-thickness: max(0.09em, 2px);
+    }
   }
 
   .mx-link--external {
@@ -32,6 +41,7 @@
   }
 
   .mx-link--more {
+    display: inline-flex;
     font-weight: var(--font-weight-bold);
 
     & .mx-icon {

package/src/Atom/Link/link.twig

@@ -1,14 +1,16 @@
 {% set baseClass = 'mx-link' %}
 {% set classes = [
-  baseClass,
   more ? baseClass~'--more' : null,
   external ? baseClass~'--external' : null,
   download ? baseClass~'--download' : null,
-] %}
-{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+]|join(" ")|trim() %}
+{% set attributes = (attributes ?? create_attribute()) %}
+{% if classes %}
+  {% set attributes = attributes.addClass(classes) %}
+{% endif %}
 
 <a{{ attributes }} href="{{ href }}"{% if current %} aria-current="page"{% endif %}>
   {{ iconStart }}
-  <span>{{ title }}</span>
+  <span{% if iconOnly %} class="sr-only"{% endif %}>{{ title }}</span>
   {{ iconEnd }}
 </a>

package/src/Atom/Media/Media.stories.ts

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./twig/story-media.twig"
+import Component from "./media.twig"
+import Video from "../Video/video.twig"
+import Image from "../Image/image.twig"
 import "../_base.css"
 import { Media as MediaType, MediaAlignmentTypes } from "@pnx-mixtape/ids-shape"
 
@@ -7,10 +9,10 @@ const meta: Meta<MediaType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
   args: {
-    item: {
+    item: Image({
       src: "https://picsum.photos/id/56/558/418?grayscale",
       alt: "Some blurry bubble image",
-    },
+    }),
     caption: "A picsum image",
     type: "image",
   },
@@ -26,17 +28,15 @@ const meta: Meta<MediaType> = {
 export default meta
 type Story = StoryObj<MediaType>
 
-export const Media: Story = {
-  args: {},
-}
+export const Media: Story = {}
 
-export const Video: Story = {
+export const RemoteVideo: Story = {
   args: {
     type: "video",
     caption: "A remote video",
-    item: {
+    item: Video({
       src: "https://www.youtube.com/embed/NpEaa2P7qZI",
       title: "Something from youtube",
-    },
+    }),
   },
 }

package/src/Atom/Media/__snapshots__/Media.stories.ts.snap

@@ -13,7 +13,7 @@ exports[`Atom/Media Media smoke-test 1`] = `
 </figure>
 `;
 
-exports[`Atom/Media Video smoke-test 1`] = `
+exports[`Atom/Media RemoteVideo smoke-test 1`] = `
 <figure class="mx-media mx-media--video ">
   <figure class="mx-video">
     <iframe src="https://www.youtube.com/embed/NpEaa2P7qZI"

package/src/Atom/Media/__snapshots__/Media.stories.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Image Caption smoke-test 1`] = `
-<figure class="media--left">
+<figure class="mx-media--left">
   <img alt="Example image"
        src="https://picsum.photos/id/56/558/418?grayscale"
   >

package/src/Atom/Media/media.twig

@@ -8,7 +8,11 @@
 
 <figure{{ attributes }}>
   {{ item }}
-  {% if caption %}
-  <figcaption>{{ caption }}</figcaption>
+  {% if caption or attribution%}
+  <figcaption>
+    {{ caption }}
+    {% if caption and attribution %} - {% endif %}
+    {{ attribution }}
+  </figcaption>
   {% endif %}
 </figure>

package/src/Atom/_generic.css

@@ -54,19 +54,6 @@
     font-weight: var(--font-weight-bold);
   }
 
-  a:where([href]) {
-    text-decoration: underline;
-    text-decoration-thickness: max(0.08em, 1px);
-    text-decoration-skip-ink: auto;
-    text-underline-offset: 0.15em;
-
-    &:hover,
-    &:active {
-      text-underline-offset: 0.2em;
-      text-decoration-thickness: max(0.09em, 2px);
-    }
-  }
-
   :is(ol, ul) {
     padding-inline-start: var(--spacing-m);
 

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

@@ -1,5 +1,7 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./twig/accordion-story.twig"
+import Component from "./accordion.twig"
+import AccordionItem from "./accordion-item.twig"
+import Heading from "../../Atom/Heading/heading.twig"
 import "./Elements/AccordionGroup"
 import "./accordion.css"
 import {
@@ -11,21 +13,21 @@ const meta: Meta<AccordionType> = {
   tags: ["autodocs", "ids-mvp"],
   component: Component,
   args: {
-    title: {
+    title: Heading({
       title: "Accordion group",
       as: HeadingTypes.TWO,
-    },
+    }),
     items: [
-      {
+      AccordionItem({
         title: "Music",
         content:
           "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.",
-      },
-      {
+      }),
+      AccordionItem({
         title: "Performances",
         content:
           "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.",
-      },
+      }),
     ],
   },
   parameters: {

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

@@ -3,7 +3,7 @@
 exports[`Component/Accordion Accordion smoke-test 1`] = `
 <div class="mx-accordions">
   <div class="mx-accordion__title">
-    <h2 class>
+    <h2>
       Accordion group
     </h2>
   </div>
@@ -42,7 +42,7 @@ exports[`Component/Accordion ToggleAll smoke-test 1`] = `
 <div class="mx-accordions">
   <mx-accordion-group>
     <div class="mx-accordion__title">
-      <h2 class>
+      <h2>
         Accordion group
       </h2>
       <div class="mx-accordions__toggle-all">

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

@@ -1,23 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Accordion Accordion smoke-test 1`] = `
-<div class="accordion accordion--divided"
+<div class="mx-accordion mx-accordion--divided"
      data-open="false"
 >
   <button type="button"
-          class="accordion__toggle"
+          class="mx-accordion__toggle"
           id="unique-0"
           aria-expanded="false"
   >
     Open me!
-    <span class="button button--small icon button--icon-only icon--chevron-down"
+    <span class="mx-button mx-button--small mx-icon mx-button--icon-only mx-icon--chevron-down"
           aria-hidden="true"
     >
     </span>
   </button>
   <div role="region"
        aria-labelledby="unique-0"
-       class="accordion__content rich-text vertical-flow"
+       class="mx-accordion__content mx-rich-text mx-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.

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

@@ -3,7 +3,7 @@
   baseClass,
   baseClass~'--divided',
 ] %}
-{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+{% set attributes = (attributes ?? create_attribute()).addClass(classes) %}
 
 <mx-accordion>
   <details{{ attributes }}{% if id %} id="{{ id }}"{% endif %}>

package/src/Component/Accordion/accordion.twig

@@ -12,7 +12,9 @@
         {% endif %}
       </div>
   {% endif %}
-  {{ items }}
+  {% for item in items %}
+    {{ item }}
+  {% endfor %}
   {% if toggleAll %}
   </mx-accordion-group>
   {% endif %}

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

@@ -1,15 +1,33 @@
 import { Meta, StoryObj } from "@storybook/html"
 import Component from "./breadcrumb.twig"
+import Link from "../../Atom/Link/link.twig"
+import "../Navigation/navigation.css"
 import "./breadcrumb.css"
+import { Breadcrumbs as BreadcrumbsType } from "@pnx-mixtape/ids-shape"
 
-const meta: Meta<typeof Component> = {
+const meta: Meta<BreadcrumbsType> = {
   tags: ["autodocs"],
   component: Component,
+  args: {
+    items: [
+      Link({
+        title: "Home",
+        href: "#",
+      }),
+      Link({
+        title: "About",
+        href: "#",
+      }),
+      Link({
+        title: "Join the team",
+        href: "#",
+        current: true,
+      }),
+    ],
+  },
 }
 
 export default meta
-type Story = StoryObj<typeof meta>
+type Story = StoryObj<BreadcrumbsType>
 
-export const Breadcrumb: Story = {
-  args: {},
-}
+export const Breadcrumb: Story = {}

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

@@ -1,26 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component/Breadcrumb Breadcrumb smoke-test 1`] = `
-<nav class="nav nav--inline nav--breadcrumb ">
+<nav class="mx-nav mx-nav--inline mx-nav--breadcrumbs"
+     aria-label="You are here"
+>
   <ul>
     <li>
       <a href="#">
-        Home
+        <span>
+          Home
+        </span>
       </a>
     </li>
     <li>
       <a href="#">
-        Level 1
+        <span>
+          About
+        </span>
       </a>
     </li>
     <li>
-      <a href="#">
-        Level 2
+      <a href="#"
+         aria-current="page"
+      >
+        <span>
+          Join the team
+        </span>
       </a>
     </li>
-    <li>
-      Current Page
-    </li>
   </ul>
 </nav>
 `;

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

@@ -5,21 +5,21 @@ exports[`Component/Breadcrumb Breadcrumb smoke-test 1`] = `
   <ul>
     <li>
       <a href="#"
-         class="link"
+         class="mx-link"
       >
         Home
       </a>
     </li>
     <li>
       <a href="#"
-         class="link"
+         class="mx-link"
       >
         About
       </a>
     </li>
     <li>
       <a href="#"
-         class="link"
+         class="mx-link"
       >
         Contact
       </a>
@@ -36,21 +36,21 @@ exports[`Component/Breadcrumb NoCurrentPage smoke-test 1`] = `
   <ul>
     <li>
       <a href="#"
-         class="link"
+         class="mx-link"
       >
         Home
       </a>
     </li>
     <li>
       <a href="#"
-         class="link"
+         class="mx-link"
       >
         About
       </a>
     </li>
     <li>
       <a href="#"
-         class="link"
+         class="mx-link"
       >
         Contact
       </a>

package/src/Component/Breadcrumb/breadcrumb.css

@@ -3,7 +3,7 @@
  */
 
 @layer design-system.components {
-  .nav--breadcrumb {
+  .mx-nav--breadcrumbs {
     --nav-font-size: var(--font-size-s);
 
     position: relative;
@@ -35,10 +35,14 @@
         background-color: currentcolor;
       }
     }
+
+    & [aria-current="page"] {
+      pointer-events: none;
+    }
   }
 
-  [dir="rtl"] .nav--breadcrumb,
-  .translated-rtl .nav--breadcrumb {
+  [dir="rtl"] .mx-nav--breadcrumbs,
+  .translated-rtl .mx-nav--breadcrumbs {
     & > ul > li::after {
       transform: rotate(180deg);
     }