@pnx-mixtape/mxds 0.0.23 → 0.0.26

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

@@ -1,38 +1,31 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Atom/Icon Alignment smoke-test 1`] = `
-<div class="mx-page default">
-  <span class="mx-icon mx-icon--arrow-left mx-icon--end mx-icon--size-sm">
-    Message with icon
-  </span>
-</div>
+exports[`Alignment 1`] = `
+"
+<span class="mx-icon mx-icon--arrow-left mx-icon--end mx-icon--size-sm">Message with icon</span>
+"
 `;
 
-exports[`Atom/Icon Icon smoke-test 1`] = `
-<div class="mx-page default">
-  <span class="mx-icon mx-icon--arrow-right mx-icon--size-sm">
-  </span>
-</div>
+exports[`Icon 1`] = `
+"
+<span class="mx-icon mx-icon--arrow-right mx-icon--size-sm"></span>
+"
 `;
 
-exports[`Atom/Icon Large smoke-test 1`] = `
-<div class="mx-page default">
-  <span class="mx-icon mx-icon--arrow-right mx-icon--size-xl">
-  </span>
-</div>
+exports[`Large 1`] = `
+"
+<span class="mx-icon mx-icon--arrow-right mx-icon--size-xl"></span>
+"
 `;
 
-exports[`Atom/Icon Primary smoke-test 1`] = `
-<div class="mx-page default">
-  <span class="mx-icon mx-icon--arrow-right mx-icon--color-brand mx-icon--size-sm">
-  </span>
-</div>
+exports[`Primary 1`] = `
+"
+<span class="mx-icon mx-icon--arrow-right mx-icon--color-brand mx-icon--size-sm"></span>
+"
 `;
 
-exports[`Atom/Icon WithText smoke-test 1`] = `
-<div class="mx-page default">
-  <span class="mx-icon mx-icon--arrow-right mx-icon--size-sm">
-    Message with icon
-  </span>
-</div>
+exports[`With Text 1`] = `
+"
+<span class="mx-icon mx-icon--arrow-right mx-icon--size-sm">Message with icon</span>
+"
 `;

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

@@ -1,18 +1,7 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Atom/Icon Alignment smoke-test 1`] = `
-<span class="mx-icon mx-icon--arrow-left mx-icon--end">
-  Message with icon
-</span>
-`;
+exports[`Alignment 1`] = `"<span class="mx-icon mx-icon--arrow-left mx-icon--end">Message with icon</span>"`;
 
-exports[`Atom/Icon Icon smoke-test 1`] = `
-<span class="mx-icon mx-icon--arrow-right">
-</span>
-`;
+exports[`Icon 1`] = `"<span class="mx-icon mx-icon--arrow-right"></span>"`;
 
-exports[`Atom/Icon WithText smoke-test 1`] = `
-<span class="mx-icon mx-icon--arrow-right">
-  Message with icon
-</span>
-`;
+exports[`With Text 1`] = `"<span class="mx-icon mx-icon--arrow-right">Message with icon</span>"`;

package/src/Atom/Icon/_extended-set.css

@@ -9,14 +9,11 @@
   @mixin icon building;
   @mixin icon calendar;
   @mixin icon clock;
-  @mixin icon email;
-  @mixin icon file;
   @mixin icon globe;
   @mixin icon heart-selected;
   @mixin icon heart-unselected;
   @mixin icon image;
   @mixin icon home;
-  @mixin icon link;
   @mixin icon lock;
   @mixin icon login;
   @mixin icon media-play;
@@ -29,13 +26,8 @@
   @mixin icon more;
   @mixin icon notification;
   @mixin icon pencil;
-  @mixin icon phone;
-  @mixin icon pin;
-  @mixin icon print;
-  @mixin icon question;
   @mixin icon restart;
   @mixin icon settings;
-  @mixin icon share;
   @mixin icon star-selected;
   @mixin icon star-unselected;
   @mixin icon tick;

package/src/Atom/Icon/_icon.css

@@ -20,6 +20,7 @@
       mask-size: contain;
       mask-repeat: no-repeat;
       background-color: currentcolor;
+      color: var(--icon-colour, inherit);
     }
   }
 
@@ -64,6 +65,14 @@
   @mixin icon twitter;
   @mixin icon warning;
   @mixin icon youtube;
+  @mixin icon email;
+  @mixin icon file;
+  @mixin icon link;
+  @mixin icon phone;
+  @mixin icon pin;
+  @mixin icon print;
+  @mixin icon question;
+  @mixin icon share;
 
   .mx-icon--status::before {
     mask-image: svg-load("./images/info.svg");
@@ -76,27 +85,27 @@
 
 @layer design-system.atoms {
   .mx-icon--color-info::before {
-    color: var(--colour-info);
+    --icon-colour: var(--colour-info);
   }
 
   .mx-icon--color-error::before {
-    color: var(--colour-error);
+    --icon-colour: var(--colour-error);
   }
 
   .mx-icon--color-warning::before {
-    color: var(--colour-warning);
+    --icon-colour: var(--colour-warning);
   }
 
   .mx-icon--color-success::before {
-    color: var(--colour-success);
+    --icon-colour: var(--colour-success);
   }
 
   .mx-icon--color-brand::before {
-    color: var(--colour-primary);
+    --icon-colour: var(--colour-primary);
   }
 
   .mx-icon--color-accent::before {
-    color: var(--colour-accent);
+    --icon-colour: var(--colour-accent);
   }
 }
 

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

@@ -1,11 +1,8 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Atom/Image Image smoke-test 1`] = `
-<div class="mx-page default">
-  <picture>
-    <img src="https://picsum.photos/id/56/558/418?grayscale"
-         alt="A picsum image"
-    >
-  </picture>
-</div>
+exports[`Image 1`] = `
+"<picture>
+    <img src="https://picsum.photos/id/56/558/418?grayscale" alt="A picsum image">
+</picture>
+"
 `;

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

@@ -1,8 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Link"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
-  title: "Atom/Link",
+  decorators: [Page],
   tags: ["autodocs"],
   component: Component,
   args: {

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

@@ -1,66 +1,57 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Atom/Link Download smoke-test 1`] = `
-<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[`Download 1`] = `
+"  
+<a class="mx-link--download" href="#">
+  
+<span class="mx-icon mx-icon--download"></span>
+
+  <span>Download (PDF 12kb)</span>
+    
+</a>
+"
 `;
 
-exports[`Atom/Link External smoke-test 1`] = `
-<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[`External 1`] = `
+"  
+<a class="mx-link--external" href="#">
+  
+  <span>Hyperlink</span>
+  <span class="sr-only">(opens in a new window)</span>  
+</a>
+"
 `;
 
-exports[`Atom/Link IconLink smoke-test 1`] = `
-<div class="mx-page default">
-  <a href="#">
-    <span class="mx-icon mx-icon--link">
-    </span>
-    <span>
-      Hyperlink
-    </span>
-  </a>
-</div>
+exports[`Icon Link 1`] = `
+"
+<a href="#">
+  
+<span class="mx-icon mx-icon--link"></span>
+
+  <span>Hyperlink</span>
+    
+</a>
+"
 `;
 
-exports[`Atom/Link Link smoke-test 1`] = `
-<div class="mx-page default">
-  <a href="#">
-    <span>
-      Hyperlink
-    </span>
-  </a>
-</div>
+exports[`Link 1`] = `
+"
+<a href="#">
+  
+  <span>Hyperlink</span>
+    
+</a>
+"
 `;
 
-exports[`Atom/Link More smoke-test 1`] = `
-<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>
+exports[`More 1`] = `
+"  
+<a class="mx-link--more" href="#">
+  
+  <span>Hyperlink</span>
+    
+<span class="mx-icon mx-icon--arrow-right"></span>
+
+</a>
+"
 `;

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

@@ -1,25 +1,7 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Atom/Link External smoke-test 1`] = `
-<a href="http://example.com"
-   class="mx-link mx-link--external"
->
-  Link
-</a>
-`;
+exports[`External 1`] = `"<a href="http://example.com" class="mx-link mx-link--external">Link</a>"`;
 
-exports[`Atom/Link Link smoke-test 1`] = `
-<a href="http://example.com"
-   class="mx-link"
->
-  Link
-</a>
-`;
+exports[`Link 1`] = `"<a href="http://example.com" class="mx-link">Link</a>"`;
 
-exports[`Atom/Link More smoke-test 1`] = `
-<a href="http://example.com"
-   class="mx-link mx-link--more"
->
-  Link
-</a>
-`;
+exports[`More 1`] = `"<a href="http://example.com" class="mx-link mx-link--more">Link</a>"`;

package/src/Atom/Link/_links.css

@@ -22,6 +22,7 @@
       content: "";
       display: inline-block;
       mask-image: svg-load("../images/external-link.svg");
+      mask-repeat: no-repeat;
       mask-size: contain;
       block-size: var(--spacing-s);
       inline-size: var(--spacing-s);

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

@@ -60,7 +60,7 @@ type Story = StoryObj<MediaType>
 export const Media: Story = {}
 
 export const RemoteVideo: Story = {
-  tags: ["autodocs", "ids-mvp", "no-snapshot"],
+  tags: ["autodocs"],
   args: {
     type: "video",
     caption: "A remote video",

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

@@ -1,9 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./Media"
 import { Alignment } from "../../enums"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
-  title: "Atom/Image",
+  decorators: [Page],
   tags: ["autodocs"],
   component: Component,
   args: {

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

@@ -1,16 +1,31 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Media 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[`Remote Video 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>
+</figure>
 
-exports[`Atom/Media Media smoke-test 1`] = `
-<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>
+    A remote video
+        
+  </figcaption>
   </figure>
-</div>
+"
 `;

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

@@ -1,18 +1,5 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Atom/Image Caption smoke-test 1`] = `
-<figure class="mx-media--left">
-  <img alt="Example image"
-       src="https://picsum.photos/id/56/558/418?grayscale"
-  >
-  <figcaption>
-    I am an image caption
-  </figcaption>
-</figure>
-`;
+exports[`Caption 1`] = `"<figure class="mx-media--left"><img alt="Example image" src="https://picsum.photos/id/56/558/418?grayscale"><figcaption>I am an image caption</figcaption></figure>"`;
 
-exports[`Atom/Image Image smoke-test 1`] = `
-<img alt="Example image"
-     src="https://picsum.photos/id/56/558/418?grayscale"
->
-`;
+exports[`Image 1`] = `"<img alt="Example image" src="https://picsum.photos/id/56/558/418?grayscale">"`;

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

@@ -1,11 +1,8 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Atom/Spacing Spacing smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-spacing--xs">
-    <div>
-      mx-spacing--xs
-    </div>
-  </div>
+exports[`Spacing 1`] = `
+"<div class="mx-spacing--xs">
+  <div>mx-spacing--xs</div>
 </div>
+"
 `;

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

@@ -8,7 +8,6 @@ type TableType = {
 }
 
 const meta: Meta<TableType> = {
-  title: "Atom/Table",
   tags: ["autodocs"],
   component: Component,
 }

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

@@ -3,7 +3,6 @@ import Component from "./table-responsive.twig"
 import "../_base.css"
 
 const meta: Meta<typeof Component> = {
-  title: "Atom/Table/Responsive",
   tags: ["autodocs"],
   component: Component,
 }