@pnx-mixtape/mxds 0.0.3 → 0.0.4

package/package.json

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

package/src/Atom/Background/__snapshots__/Backgrounds.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Backgrounds Alt smoke-test 1`] = `
+exports[`Atom/Backgrounds Alt smoke-test 1`] = `
 <div class="spacing--m rich-text vertical-flow  background--alt">
   <blockquote>
     <p>
@@ -33,7 +33,7 @@ exports[`Base/Backgrounds Alt smoke-test 1`] = `
 </div>
 `;
 
-exports[`Base/Backgrounds Backgrounds smoke-test 1`] = `
+exports[`Atom/Backgrounds Backgrounds smoke-test 1`] = `
 <div class="spacing--m rich-text vertical-flow ">
   <blockquote>
     <p>
@@ -66,7 +66,7 @@ exports[`Base/Backgrounds Backgrounds smoke-test 1`] = `
 </div>
 `;
 
-exports[`Base/Backgrounds Reverse smoke-test 1`] = `
+exports[`Atom/Backgrounds Reverse smoke-test 1`] = `
 <div class="spacing--m rich-text vertical-flow  background--reverse">
   <blockquote>
     <p>

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

@@ -1,8 +1,7 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./button.twig"
+import Component from "./twig/story-button.twig"
 import "./button.css"
 import {
-  AlignmentTypes,
   Button as ButtonType,
   ButtonModifiers,
   ButtonTypes,
@@ -30,8 +29,8 @@ const meta: Meta<ButtonType> = {
     href: { control: "text" },
     disabled: { control: "boolean" },
     // @ts-expect-error The controls follow the shape
-    "icon.icon": { options: Object.values(Icons), control: "select" },
-    "icon.align": { options: Object.values(AlignmentTypes), control: "select" },
+    "iconStart.icon": { options: Object.values(Icons), control: "select" },
+    "iconEnd.icon": { options: Object.values(Icons), control: "select" },
     iconOnly: { control: "boolean" },
   },
 }
@@ -63,9 +62,8 @@ export const Link: Story = {
 
 export const IconButton: Story = {
   args: {
-    icon: {
+    iconEnd: {
       icon: Icons.ARROW_RIGHT,
-      align: AlignmentTypes.END,
     },
   },
 }

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

@@ -1,41 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Button Button smoke-test 1`] = `
+exports[`Atom/Button Button smoke-test 1`] = `
 <button class="button "
         type="button"
 >
-  Button
+  <span>
+    Button
+  </span>
 </button>
 `;
 
-exports[`Base/Button IconButton smoke-test 1`] = `
-<button class="button icon icon--arrow-right  icon--end"
+exports[`Atom/Button IconButton smoke-test 1`] = `
+<button class="button "
         type="button"
 >
-  Button
+  <span>
+    Button
+  </span>
+  <span class="icon icon--arrow-right ">
+  </span>
 </button>
 `;
 
-exports[`Base/Button Link smoke-test 1`] = `
+exports[`Atom/Button Link smoke-test 1`] = `
 <a class="button "
    href="#"
 >
-  Button
+  <span>
+    Button
+  </span>
 </a>
 `;
 
-exports[`Base/Button Primary smoke-test 1`] = `
+exports[`Atom/Button Primary smoke-test 1`] = `
 <button class="button  button--dark"
         type="button"
 >
-  Button
+  <span>
+    Button
+  </span>
 </button>
 `;
 
-exports[`Base/Button Text smoke-test 1`] = `
+exports[`Atom/Button Text smoke-test 1`] = `
 <button class="button  button--light"
         type="button"
 >
-  Button
+  <span>
+    Button
+  </span>
 </button>
 `;

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

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

package/src/Atom/Button/_buttons.css

@@ -67,5 +67,9 @@
       block-size: 100%;
       mask-size: var(--spacing-s);
     }
+
+    &:has(.icon) {
+      place-content: center;
+    }
   }
 }

package/src/Atom/Button/button.twig

@@ -1,9 +1,7 @@
 {% set baseClass = 'button' %}
 {% set classes = [
   baseClass,
-  icon ? "icon icon--"~icon.icon : null,
   iconOnly ? baseClass~"--icon-only" : null,
-  icon.align ? "icon--"~icon.align : null
 ] %}
 {% for modifier in modifiers %}
   {% set classes = classes|merge([baseClass~"--"~modifier]) %}
@@ -12,12 +10,16 @@
 
 {% if href %}
   <a{{ attributes}} href="{{ href }}">
-   {{ title }}
+    {{ iconStart }}
+    <span{% if iconOnly %} class="sr-only"{% endif %}>{{ title }}</span>
+    {{ iconEnd }}
   </a>
 {% elseif as == 'input' %}
   <input{{ attributes}} type="button" value="{{ title }}"{% if disabled %} disabled{% endif %}>
 {% else %}
   <button{{ attributes}} type="{{ as|default("button") }}"{% if disabled %} disabled{% endif %}>
-    {{ title }}
+    {{ iconStart }}
+    <span{% if iconOnly %} class="sr-only"{% endif %}>{{ title }}</span>
+    {{ iconEnd }}
   </button>
 {% endif %}

package/src/Atom/Button/twig/story-button.twig

@@ -0,0 +1,11 @@
+{% extends "../button.twig" %}
+{% if iconStart %}
+  {% set iconStart %}
+    {% include '@mixtape/Atom/Icon/icon.twig' with { icon: iconStart.icon } only %}
+  {% endset %}
+{% endif %}
+{% if iconEnd %}
+  {% set iconEnd %}
+    {% include '@mixtape/Atom/Icon/icon.twig' with { icon: iconEnd.icon } only %}
+  {% endset %}
+{% endif %}

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Definition List DefinitionList smoke-test 1`] = `
+exports[`Atom/Definition List DefinitionList smoke-test 1`] = `
 <dl>
   <div>
     <dt>

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

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

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Typography/Heading Heading smoke-test 1`] = `
+exports[`Atom/Typography/Heading Heading smoke-test 1`] = `
 <h2 class
     id="heading"
 >

package/src/Atom/Heading/heading.twig

@@ -1,7 +1,25 @@
+{% set style = null %}
+{% for modifier in modifiers %}
+  {% if modifier == "h1" %}
+    {% set style = 'xxl' %}
+  {% endif %}
+  {% if modifier == "h2" %}
+    {% set style = 'xl' %}
+  {% endif %}
+  {% if modifier == "h3" %}
+    {% set style = 'l' %}
+  {% endif %}
+  {% if modifier == "h4" %}
+    {% set style = 'm' %}
+  {% endif %}
+  {% if modifier == "h5" %}
+    {% set style = 's' %}
+  {% endif %}
+{% endfor %}
 {% set classes = [
-  modifier ? modifier : null,
   excluded ? 'is-excluded' : null,
   srOnly ? 'sr-only' : null,
+  style ? 'heading--'~style : null,
 ] %}
 {% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
 

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

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

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

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

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Image Image smoke-test 1`] = `
+exports[`Atom/Image Image smoke-test 1`] = `
 <picture>
   <img src="https://picsum.photos/id/56/558/418?grayscale"
        alt="A picsum image"

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

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./link.twig"
+import Component from "./twig/story-link.twig"
 import "../_base.css"
-import { AlignmentTypes, Link as LinkType } from "@pnx-mixtape/ids-shape"
+import { Link as LinkType } from "@pnx-mixtape/ids-shape"
 import { Icons } from "../../enums"
 
 const meta: Meta<LinkType> = {
@@ -17,8 +17,8 @@ const meta: Meta<LinkType> = {
     download: { control: "boolean" },
     current: { control: "boolean" },
     // @ts-expect-error The controls follow the shape
-    "icon.icon": { options: Object.values(Icons), control: "select" },
-    "icon.align": { options: Object.values(AlignmentTypes), control: "select" },
+    "iconStart.icon": { options: Object.values(Icons), control: "select" },
+    "iconEnd.icon": { options: Object.values(Icons), control: "select" },
   },
 }
 
@@ -27,11 +27,35 @@ type Story = StoryObj<LinkType>
 
 export const Link: Story = {}
 
-export const IconLink: Story = {
+export const More: Story = {
   args: {
-    icon: {
+    more: true,
+    iconEnd: {
       icon: Icons.ARROW_RIGHT,
-      align: AlignmentTypes.END,
+    },
+  },
+}
+
+export const External: Story = {
+  args: {
+    external: true,
+  },
+}
+
+export const Download: Story = {
+  args: {
+    download: true,
+    title: "Download (PDF 12kb)",
+    iconStart: {
+      icon: Icons.DOWNLOAD,
+    },
+  },
+}
+
+export const IconLink: Story = {
+  args: {
+    iconStart: {
+      icon: Icons.LINK,
     },
   },
 }

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

@@ -1,17 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Link IconLink smoke-test 1`] = `
-<a class=" icon icon--arrow-right"
+exports[`Atom/Link Download smoke-test 1`] = `
+<a class="link  link--download"
    href="#"
 >
-  Hyperlink
+  <span class="icon icon--download ">
+  </span>
+  <span>
+    Download (PDF 12kb)
+  </span>
 </a>
 `;
 
-exports[`Base/Link Link smoke-test 1`] = `
-<a class
+exports[`Atom/Link External smoke-test 1`] = `
+<a class="link  link--external"
    href="#"
 >
-  Hyperlink
+  <span>
+    Hyperlink
+  </span>
+</a>
+`;
+
+exports[`Atom/Link IconLink smoke-test 1`] = `
+<a class="link "
+   href="#"
+>
+  <span class="icon icon--link ">
+  </span>
+  <span>
+    Hyperlink
+  </span>
+</a>
+`;
+
+exports[`Atom/Link Link smoke-test 1`] = `
+<a class="link "
+   href="#"
+>
+  <span>
+    Hyperlink
+  </span>
+</a>
+`;
+
+exports[`Atom/Link More smoke-test 1`] = `
+<a class="link link--more "
+   href="#"
+>
+  <span>
+    Hyperlink
+  </span>
+  <span class="icon icon--arrow-right ">
+  </span>
 </a>
 `;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Link External smoke-test 1`] = `
+exports[`Atom/Link External smoke-test 1`] = `
 <a href="http://example.com"
    class="link link--external"
 >
@@ -8,7 +8,7 @@ exports[`Base/Link External smoke-test 1`] = `
 </a>
 `;
 
-exports[`Base/Link Link smoke-test 1`] = `
+exports[`Atom/Link Link smoke-test 1`] = `
 <a href="http://example.com"
    class="link"
 >
@@ -16,7 +16,7 @@ exports[`Base/Link Link smoke-test 1`] = `
 </a>
 `;
 
-exports[`Base/Link More smoke-test 1`] = `
+exports[`Atom/Link More smoke-test 1`] = `
 <a href="http://example.com"
    class="link link--more"
 >

package/src/Atom/Link/_links.css

@@ -33,7 +33,29 @@
 
   a:where([href]).link--more {
     font-weight: var(--font-weight-bold);
+
+    & .icon {
+      transition: transform 0.5s var(--ease);
+    }
+
+    &:hover .icon {
+      transform: translateX(3px);
+    }
+  }
+
+  a:where([href]).link--download {
+    & .icon {
+      transition: transform 0.5s var(--ease);
+    }
+
+    &:hover .icon {
+      transform: translateY(3px);
+    }
+  }
+
+  a:where([href]):has(.icon) {
     display: inline-flex;
-    gap: var(--spacing-s);
+    align-items: center;
+    gap: var(--spacing-xxs);
   }
 }

package/src/Atom/Link/link.twig

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

package/src/Atom/Link/twig/story-link.twig

@@ -0,0 +1,11 @@
+{% extends "../link.twig" %}
+{% if iconStart %}
+  {% set iconStart %}
+    {% include '@mixtape/Atom/Icon/icon.twig' with { icon: iconStart.icon } only %}
+  {% endset %}
+{% endif %}
+{% if iconEnd %}
+  {% set iconEnd %}
+    {% include '@mixtape/Atom/Icon/icon.twig' with { icon: iconEnd.icon } only %}
+  {% endset %}
+{% endif %}

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

@@ -1,5 +1,5 @@
 import { Meta, StoryObj } from "@storybook/html"
-import Component from "./media.twig"
+import Component from "./twig/story-media.twig"
 import "../_base.css"
 import { Media as MediaType, MediaAlignmentTypes } from "@pnx-mixtape/ids-shape"
 
@@ -12,9 +12,14 @@ const meta: Meta<MediaType> = {
       alt: "Some blurry bubble image",
     },
     caption: "A picsum image",
+    type: "image",
   },
   argTypes: {
     align: { options: Object.values(MediaAlignmentTypes), control: "select" },
+    // @ts-expect-error The controls follow the shape
+    "item.src": { control: "text" },
+    "item.alt": { control: "text" },
+    "item.title": { control: "text" },
   },
 }
 
@@ -24,3 +29,14 @@ type Story = StoryObj<MediaType>
 export const Media: Story = {
   args: {},
 }
+
+export const Video: Story = {
+  args: {
+    type: "video",
+    caption: "A remote video",
+    item: {
+      src: "https://www.youtube.com/embed/NpEaa2P7qZI",
+      title: "Something from youtube",
+    },
+  },
+}

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Media Media smoke-test 1`] = `
-<figure class="media ">
+exports[`Atom/Media Media smoke-test 1`] = `
+<figure class="media media--image ">
   <picture>
     <img src="https://picsum.photos/id/56/558/418?grayscale"
          alt="Some blurry bubble image"
@@ -12,3 +12,18 @@ exports[`Base/Media Media smoke-test 1`] = `
   </figcaption>
 </figure>
 `;
+
+exports[`Atom/Media Video smoke-test 1`] = `
+<figure class="media media--video ">
+  <figure class="video">
+    <iframe src="https://www.youtube.com/embed/NpEaa2P7qZI"
+            title="Something from youtube"
+            allowfullscreen
+    >
+    </iframe>
+  </figure>
+  <figcaption>
+    A remote video
+  </figcaption>
+</figure>
+`;

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

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

package/src/Atom/Media/twig/story-media.twig

@@ -0,0 +1,11 @@
+{% extends "../media.twig" %}
+{% if type == "image" %}
+  {% set item %}
+    {% include "@mixtape/Atom/Image/image.twig" with { src: item.src, alt: item.alt } only %}
+  {% endset %}
+{% endif %}
+{% if type == "video" %}
+  {% set item %}
+    {% include "@mixtape/Atom/Video/video.twig" with { src: item.src, title: item.title } only %}
+  {% endset %}
+{% endif %}

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Atom/NavList/NavList List smoke-test 1`] = `
+exports[`Atom/NavList List smoke-test 1`] = `
 <nav class="nav nav--list ">
   <h4 class="text--embellished-headline">
     Jump To Section

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Base/Spacing Spacing smoke-test 1`] = `
+exports[`Atom/Spacing Spacing smoke-test 1`] = `
 <div class="spacing ">
   <p>
   </p>