@pnx-mixtape/mxds 0.0.13 → 0.0.15

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./link.twig"
 import Icon from "../Icon/icon.twig"
 import "../_base.css"

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Link"
 import { LinkStyles } from "../../enums"
 

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

@@ -1,53 +1,66 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Link Download smoke-test 1`] = `
-<a class="mx-link--download"
-   href="#"
->
-  <span class="mx-icon mx-icon--download ">
-  </span>
-  <span>
-    Download (PDF 12kb)
-  </span>
-</a>
+<div class="mx-page default">
+  <a class="mx-link--download"
+     href="#"
+  >
+    <span class="mx-icon mx-icon--download ">
+    </span>
+    <span>
+      Download (PDF 12kb)
+    </span>
+  </a>
+</div>
 `;
 
 exports[`Atom/Link External smoke-test 1`] = `
-<a class="mx-link--external"
-   href="#"
->
-  <span>
-    Hyperlink
-  </span>
-</a>
+<div class="mx-page default">
+  <a class="mx-link--external"
+     href="#"
+  >
+    <span>
+      Hyperlink
+    </span>
+    <span class="sr-only">
+      (opens in a new window)
+    </span>
+  </a>
+</div>
 `;
 
 exports[`Atom/Link IconLink smoke-test 1`] = `
-<a href="#">
-  <span class="mx-icon mx-icon--link ">
-  </span>
-  <span>
-    Hyperlink
-  </span>
-</a>
+<div class="mx-page default">
+  <a href="#">
+    <span class="mx-icon mx-icon--link ">
+    </span>
+    <span>
+      Hyperlink
+    </span>
+  </a>
+</div>
 `;
 
 exports[`Atom/Link Link smoke-test 1`] = `
-<a href="#">
-  <span>
-    Hyperlink
-  </span>
-</a>
+<div class="mx-page default">
+  <a href="#">
+    <span>
+      Hyperlink
+    </span>
+  </a>
+</div>
 `;
 
 exports[`Atom/Link More smoke-test 1`] = `
-<a class="mx-link--more"
-   href="#"
->
-  <span>
-    Hyperlink
-  </span>
-  <span class="mx-icon mx-icon--arrow-right ">
-  </span>
-</a>
+<div class="mx-page default">
+  <a class="mx-link--more"
+     href="#"
+  >
+    <span>
+      Hyperlink
+    </span>
+    <span class="mx-icon mx-icon--arrow-right ">
+    </span>
+  </a>
+</div>
 `;

package/src/Atom/Link/_links.css

@@ -1,15 +1,9 @@
 @layer design-system.defaults {
   a[href] {
-    color: var(--link-colour, var(--colour-primary));
-    transition: color 0.2s var(--ease);
+    color: var(--link-colour, var(--colour-link));
     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 {
@@ -32,32 +26,18 @@
       block-size: var(--spacing-s);
       inline-size: var(--spacing-s);
       background-color: currentcolor;
-      transition: transform 0.5s var(--ease);
-    }
-
-    &:hover::after {
-      transform: translateY(-3px);
     }
   }
 
   .mx-link--more {
-    display: inline-flex;
     font-weight: var(--font-weight-bold);
 
-    & .mx-icon {
-      transition: transform 0.5s var(--ease);
-    }
-
-    &:hover .icon {
+    &:hover .mx-icon {
       transform: translateX(3px);
     }
   }
 
   .mx-link--download {
-    & .mx-icon {
-      transition: transform 0.5s var(--ease);
-    }
-
     &:hover .mx-icon {
       transform: translateY(3px);
     }

package/src/Atom/Link/link.twig

@@ -12,5 +12,6 @@
 <a{{ attributes }} href="{{ href }}"{% if current %} aria-current="page"{% endif %}>
   {{ iconStart }}
   <span{% if iconOnly %} class="sr-only"{% endif %}>{{ title }}</span>
+  {% if external %}<span class="sr-only">(opens in a new window)</span>{% endif %}
   {{ iconEnd }}
 </a>

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./media.twig"
 import Video from "../Video/video.twig"
 import Image from "../Image/image.twig"
@@ -31,6 +31,7 @@ type Story = StoryObj<MediaType>
 export const Media: Story = {}
 
 export const RemoteVideo: Story = {
+  tags: ["autodocs", "ids-mvp", "no-snapshot"],
   args: {
     type: "video",
     caption: "A remote video",

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react"
+import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Media"
 import { Alignment } from "../../enums"
 

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

@@ -1,29 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Media Media smoke-test 1`] = `
-<figure class="mx-media mx-media--image ">
-  <picture>
-    <img src="https://picsum.photos/id/56/558/418?grayscale"
-         alt="Some blurry bubble image"
-    >
-  </picture>
-  <figcaption>
-    A picsum image
-  </figcaption>
-</figure>
-`;
-
-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"
-            title="Something from youtube"
-            allowfullscreen
-    >
-    </iframe>
+<div class="mx-page default">
+  <figure class="mx-media mx-media--image ">
+    <picture>
+      <img src="https://picsum.photos/id/56/558/418?grayscale"
+           alt="Some blurry bubble image"
+      >
+    </picture>
+    <figcaption>
+      A picsum image
+    </figcaption>
   </figure>
-  <figcaption>
-    A remote video
-  </figcaption>
-</figure>
+</div>
 `;

package/src/Atom/Media/_media.css

@@ -25,10 +25,10 @@
   }
 
   :is(
-      .mx-media--left,
-      [dir="rtl"] .mx-media--right,
-      .translated-rtl .mx-media--right
-    ) {
+    .mx-media--left,
+    [dir="rtl"] .mx-media--right,
+    .translated-rtl .mx-media--right
+  ) {
     @media (--small-up) {
       float: left;
       margin-inline: 0 var(--spacing-m);
@@ -36,10 +36,10 @@
   }
 
   :is(
-      .mx-media--right,
-      [dir="rtl"] .mx-media--left,
-      .translated-rtl .mx-media--left
-    ) {
+    .mx-media--right,
+    [dir="rtl"] .mx-media--left,
+    .translated-rtl .mx-media--left
+  ) {
     @media (--small-up) {
       float: right;
       margin-inline: var(--spacing-m) 0;

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./spacing.twig"
 import "../_base.css"
 

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

@@ -1,8 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Atom/Spacing Spacing smoke-test 1`] = `
-<div class="mx-spacing ">
-  <p>
-  </p>
+<div class="mx-page default">
+  <div class="mx-spacing ">
+    <p>
+    </p>
+  </div>
 </div>
 `;

package/src/Atom/Table/Table.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./table.twig"
 import "../_base.css"
 import { TableStyles } from "../../enums"

package/src/Atom/Table/TableResponsive.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/html"
+import { Meta, StoryObj } from "@storybook/html-vite"
 import Component from "./table-responsive.twig"
 import "../_base.css"