@pnx-mixtape/mxds 0.0.23 → 0.0.26

package/src/Component/GlobalAlert/GlobalAlert.stories.tsx

@@ -2,10 +2,12 @@ import { Meta, StoryObj } from "@storybook/react-vite"
 import Component from "./GlobalAlert"
 import "./global-alert.css"
 import { GlobalAlertTypes } from "@pnx-mixtape/ids-shape"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
   component: Component,
+  decorators: [Page],
   args: {
     children: (
       <p>

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

@@ -1,47 +1,35 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/GlobalAlert Critical smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-global-alert mx-page mx-global-alert--critical"
-       id="critical-alertcritical"
-  >
+exports[`Critical 1`] = `
+"
+  <div class="mx-global-alert mx-page mx-global-alert--critical" id="critical-alertcritical">
     <div class="mx-global-alert__inner">
       <div class="mx-global-alert__content">
-        <h2 class="mx-heading--m">
-          Global alert
-        </h2>
-        <p>
-          Something happened that requires your attention
-        </p>
+                          
+<h2 class="mx-heading--m">Global alert</h2>
+
+        <p>Something happened that requires your attention</p>
+        
       </div>
     </div>
   </div>
-</div>
+
+"
 `;
 
-exports[`Component/GlobalAlert GlobalAlert smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-closable-alert class="mx-global-alert mx-page mx-global-alert--light"
-                     id="unique-0"
-  >
-    <div class="mx-global-alert__inner"
-         data-container
-    >
-      <div class="mx-global-alert__content">
-        <h2 class="mx-heading--m">
-          Global alert
-        </h2>
-        <p>
-          Something happened that requires your attention
-        </p>
-      </div>
-      <button class="mx-icon mx-icon--close"
-              aria-controls="unique-0"
-              aria-label="Close GlobalAlert"
-              type="button"
-      >
-      </button>
+exports[`Global Alert 1`] = `
+"
+<mx-closable-alert class="mx-global-alert mx-page mx-global-alert--light" id="light-alertlight">
+  <div class="mx-global-alert__inner" data-container="">
+    <div class="mx-global-alert__content">
+                        
+<h2 class="mx-heading--m">Global alert</h2>
+
+      <p>Something happened that requires your attention</p>
+      
     </div>
-  </mx-closable-alert>
-</div>
+  <button class="mx-icon mx-icon--close" aria-controls="light-alertlight" aria-label="Close GlobalAlert" type="button"></button></div>
+</mx-closable-alert>
+
+"
 `;

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

@@ -1,48 +1,5 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/GlobalAlert Critical smoke-test 1`] = `
-<div id="_r_1_"
-     class="mx-global-alert mx-global-alert--critical"
->
-  <div class="mx-global-alert__inner">
-    <div class="mx-global-alert__content">
-      <p>
-        <b>
-          Something happened.
-        </b>
-        And if you'd like to know what,
-        <a href="#">
-          Click here
-        </a>
-        .
-      </p>
-    </div>
-  </div>
-</div>
-`;
+exports[`Critical 1`] = `"<div id="_r_1_" class="mx-global-alert mx-global-alert--critical"><div class="mx-global-alert__inner"><div class="mx-global-alert__content"><p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p></div></div></div>"`;
 
-exports[`Component/GlobalAlert GlobalAlert smoke-test 1`] = `
-<div id="_r_0_"
-     class="mx-global-alert mx-global-alert--light"
->
-  <div class="mx-global-alert__inner">
-    <div class="mx-global-alert__content">
-      <p>
-        <b>
-          Something happened.
-        </b>
-        And if you'd like to know what,
-        <a href="#">
-          Click here
-        </a>
-        .
-      </p>
-    </div>
-    <button class="mx-icon mx-icon--close"
-            aria-label="Close light message"
-            type="button"
-    >
-    </button>
-  </div>
-</div>
-`;
+exports[`Global Alert 1`] = `"<div id="_r_0_" class="mx-global-alert mx-global-alert--light"><div class="mx-global-alert__inner"><div class="mx-global-alert__content"><p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p></div><button class="mx-icon mx-icon--close" aria-label="Close light message" type="button"></button></div></div>"`;

package/src/Component/HeroBanner/HeroBanner.stories.tsx

@@ -6,10 +6,12 @@ import "./hero-banner.css"
 import { ButtonModifiers, HeadingTypes } from "@pnx-mixtape/ids-shape"
 import { HeadingStyles, TextStyles } from "../../enums"
 import Text from "../../Atom/Text/Text"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
   component: Component,
+  decorators: [Page],
   args: {
     children: (
       <>

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

@@ -1,124 +1,123 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`Component/HeroBanner HeroBanner smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-hero-banner">
-    <div class="mx-hero-banner__inner">
-      <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
-        <h1>
-          Hero banner title
-        </h1>
-        <p class="mx-text--lede">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-      <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Hero Banner 1`] = `
+"      
+<div class="mx-hero-banner">
+  <div class="mx-hero-banner__inner">
+    <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
+      
+<h1>Hero banner title</h1>
+
+              <p class="mx-text--lede">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            
+      
+    </div>
+          <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
         <picture>
-          <img src="https://picsum.photos/id/56/558/418?grayscale"
-               alt="Blurry bubbles"
-          >
-        </picture>
+    <img src="https://picsum.photos/id/56/558/418?grayscale" alt="Blurry bubbles">
+</picture>
+
+      </div>
       </div>
-    </div>
-  </div>
 </div>
+"
 `;
 
-exports[`Component/HeroBanner Highlight smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-hero-banner mx-hero-banner--hero mx-background--primary">
-    <div class="mx-hero-banner__inner">
-      <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
-        <h1>
-          Hero banner title
-        </h1>
-        <p class="mx-text--lede">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-        <a class="mx-link--more"
-           href="#"
-        >
-          <span>
-            Find out more
-          </span>
-        </a>
-      </div>
-      <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
+exports[`Highlight 1`] = `
+"            
+<div class="mx-hero-banner mx-hero-banner--hero mx-background--primary">
+  <div class="mx-hero-banner__inner">
+    <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
+      
+<h1>Hero banner title</h1>
+
+              <p class="mx-text--lede">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            
+        
+<a class="mx-link--more" href="#">
+  
+  <span>Find out more</span>
+    
+</a>
+
+    </div>
+          <div class="mx-hero-banner__aside mx-hero-banner__aside-image">
         <picture>
-          <img src="https://picsum.photos/id/56/558/418?grayscale"
-               alt="Blurry bubbles"
-          >
-        </picture>
+    <img src="https://picsum.photos/id/56/558/418?grayscale" alt="Blurry bubbles">
+</picture>
+
+      </div>
       </div>
-    </div>
-  </div>
 </div>
+"
 `;
 
-exports[`Component/HeroBanner WithLinkList smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-hero-banner">
-    <div class="mx-hero-banner__inner">
-      <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
-        <h1>
-          Hero banner title
-        </h1>
-        <p class="mx-text--lede">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
+exports[`With Link List 1`] = `
+"      
+<div class="mx-hero-banner">
+  <div class="mx-hero-banner__inner">
+    <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
+      
+<h1>Hero banner title</h1>
+
+              <p class="mx-text--lede">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            
+      
+    </div>
+          <div class="mx-hero-banner__aside mx-section--xl">
+        
+                  
+<h2 class="mx-heading--m">Popular links</h2>
+
+<ul class="mx-link-list">
+      <li>
+<a href="#">
+  
+  <span>Link one</span>
+    
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+</a>
+</li>
+      <li>
+<a href="#">
+  
+  <span>Link two</span>
+    
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+</a>
+</li>
+      <li>
+<a href="#">
+  
+  <span>Link three</span>
+    
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+</a>
+</li>
+  </ul>
+
       </div>
-      <div class="mx-hero-banner__aside mx-section--xl">
-        <h2 class="mx-heading--m">
-          Popular links
-        </h2>
-        <ul class="mx-link-list">
-          <li>
-            <a href="#">
-              <span>
-                Link one
-              </span>
-              <span class="mx-icon mx-icon--chevron-right">
-              </span>
-            </a>
-          </li>
-          <li>
-            <a href="#">
-              <span>
-                Link two
-              </span>
-              <span class="mx-icon mx-icon--chevron-right">
-              </span>
-            </a>
-          </li>
-          <li>
-            <a href="#">
-              <span>
-                Link three
-              </span>
-              <span class="mx-icon mx-icon--chevron-right">
-              </span>
-            </a>
-          </li>
-        </ul>
       </div>
-    </div>
-  </div>
 </div>
+"
 `;
 
-exports[`Component/HeroBanner WithoutImage smoke-test 1`] = `
-<div class="mx-page default">
-  <div class="mx-hero-banner">
-    <div class="mx-hero-banner__inner">
-      <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
-        <h1>
-          Hero banner title
-        </h1>
-        <p class="mx-text--lede">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
+exports[`Without Image 1`] = `
+"      
+<div class="mx-hero-banner">
+  <div class="mx-hero-banner__inner">
+    <div class="mx-hero-banner__content mx-vertical-flow-flex mx-section--xl">
+      
+<h1>Hero banner title</h1>
+
+              <p class="mx-text--lede">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+            
+      
     </div>
-  </div>
+      </div>
 </div>
+"
 `;

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

@@ -1,36 +1,5 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/HeroBanner Hero smoke-test 1`] = `
-<div class="mx-page mx-section--xl">
-  <div class="mx-hero-banner mx-vertical-flow mx-hero-banner--hero">
-    <h1 class="mx-headline"
-        id="always-put-your-best-"
-    >
-      Always put your best foot forward.
-    </h1>
-    <p class="mx-text--xl">
-      Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.
-    </p>
-    <button class="mx-button mx-button--dark"
-            type="button"
-    >
-      Button
-    </button>
-  </div>
-</div>
-`;
+exports[`Hero 1`] = `"<div class="mx-page mx-section--xl"><div class="mx-hero-banner mx-vertical-flow mx-hero-banner--hero"><h1 class="mx-headline" id="always-put-your-best-">Always put your best foot forward.</h1><p class="mx-text--xl">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p><button class="mx-button mx-button--dark" type="button">Button</button></div></div>"`;
 
-exports[`Component/HeroBanner HeroBanner smoke-test 1`] = `
-<div class="mx-page mx-section--xl">
-  <div class="mx-hero-banner mx-vertical-flow">
-    <h1 class="mx-headline"
-        id="always-put-your-best-"
-    >
-      Always put your best foot forward.
-    </h1>
-    <p class="mx-text--xl">
-      Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.
-    </p>
-  </div>
-</div>
-`;
+exports[`Hero Banner 1`] = `"<div class="mx-page mx-section--xl"><div class="mx-hero-banner mx-vertical-flow"><h1 class="mx-headline" id="always-put-your-best-">Always put your best foot forward.</h1><p class="mx-text--xl">Make the most of the opportunity by encouraging an action and keeping your copy clear and concise.</p></div></div>"`;

package/src/Component/HeroSearch/HeroSearch.stories.ts

@@ -1,5 +1,4 @@
 import { Meta, StoryObj } from "@storybook/html-vite"
-import { Page } from "../../../.storybook/decorators"
 import Component from "./hero-search.twig"
 import "../HeroBanner/hero-banner.css"
 import {
@@ -52,7 +51,6 @@ const meta: Meta<HeroSearchType> = {
       },
     },
   },
-  decorators: [Page],
 }
 
 export default meta

package/src/Component/HeroSearch/HeroSearch.stories.tsx

@@ -5,10 +5,12 @@ import { ButtonModifiers, HeadingTypes } from "@pnx-mixtape/ids-shape"
 import Heading from "../../Atom/Heading/Heading"
 import { HeadingStyles, TextStyles } from "../../enums"
 import Text from "../../Atom/Text/Text"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
   tags: ["autodocs"],
   component: Component,
+  decorators: [Page],
   args: {
     children: (
       <>