@pnx-mixtape/mxds 0.0.23 → 0.0.26

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

@@ -1,217 +1,97 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/InPageNavigation GeneratedItems smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-in-page-navigation data-content=".js-content"
-                         data-headings
-  >
-    <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
-      <h2 class="mx-heading--m">
-        On this page
-      </h2>
-      <ul>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-1">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 1
-            </span>
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-2">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 2
-            </span>
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-3">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 3
-            </span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </mx-in-page-navigation>
-  <div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
-    <h2 id="section-1">
-      Section 1
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h2 id="section-2">
-      Section 2
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h3 id="test-level-3">
-      Test level 3
-    </h3>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h2 id="section-3">
-      Section 3
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-  </div>
+exports[`Generated Items 1`] = `
+"<mx-in-page-navigation data-content=".js-content" data-headings="">
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
+                      
+<h2 class="is-excluded mx-heading--m">On this page</h2>
+
+    <ul>
+          <li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul>
+  </nav>
+</mx-in-page-navigation>
+<div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
+<h2 id="section-1">Section 1</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-2">Section 2</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h3 id="test-level-3">Test level 3</h3>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-3">Section 3</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
 </div>
+"
 `;
 
-exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-in-page-navigation data-content=".js-content"
-                         data-headings
-  >
-    <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
-      <h2 class="mx-heading--m">
-        On this page
-      </h2>
-      <ul>
-        <li>
-          <a href="#section-1">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 1
-            </span>
-          </a>
-        </li>
-        <li>
-          <a href="#section-2">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 2
-            </span>
-          </a>
-        </li>
-        <li>
-          <a href="#section-3">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 3
-            </span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </mx-in-page-navigation>
-  <div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
-    <h2 id="section-1">
-      Section 1
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h2 id="section-2">
-      Section 2
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h3 id="test-level-3">
-      Test level 3
-    </h3>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h2 id="section-3">
-      Section 3
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-  </div>
+exports[`In Page Navigation 1`] = `
+"<mx-in-page-navigation data-content=".js-content" data-headings="">
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
+                      
+<h2 class="is-excluded mx-heading--m">On this page</h2>
+
+    <ul>
+              <li>
+<a href="#section-1">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+  <span>Section 1</span>
+    
+</a>
+</li>
+              <li>
+<a href="#section-2">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+  <span>Section 2</span>
+    
+</a>
+</li>
+              <li>
+<a href="#section-3">
+  
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+  <span>Section 3</span>
+    
+</a>
+</li>
+          </ul>
+  </nav>
+</mx-in-page-navigation>
+<div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
+<h2 id="section-1">Section 1</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-2">Section 2</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h3 id="test-level-3">Test level 3</h3>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-3">Section 3</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
 </div>
+"
 `;
 
-exports[`Component/InPageNavigation Nested smoke-test 1`] = `
-<div class="mx-page default">
-  <mx-in-page-navigation data-content=".js-content"
-                         data-headings="h2,h3"
-  >
-    <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
-      <h2 class="mx-heading--m">
-        On this page
-      </h2>
-      <ul>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-1">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 1
-            </span>
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-2">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 2
-            </span>
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h3">
-          <a href="#test-level-3">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Test level 3
-            </span>
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-3">
-            <span class="mx-icon mx-icon--chevron-right">
-            </span>
-            <span>
-              Section 3
-            </span>
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </mx-in-page-navigation>
-  <div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
-    <h2 id="section-1">
-      Section 1
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h2 id="section-2">
-      Section 2
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h3 id="test-level-3">
-      Test level 3
-    </h3>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-    <h2 id="section-3">
-      Section 3
-    </h2>
-    <p>
-      In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-    </p>
-  </div>
+exports[`Nested 1`] = `
+"<mx-in-page-navigation data-content=".js-content" data-headings="h2,h3">
+  <nav class="mx-nav mx-nav--list mx-in-page-navigation mx-vertical-flow">
+                      
+<h2 class="is-excluded mx-heading--m">On this page</h2>
+
+    <ul>
+          <li class="mx-in-page-navigation__level--h2"><a href="#section-1"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 1</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-2"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 2</span></a></li><li class="mx-in-page-navigation__level--h3"><a href="#test-level-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Test level 3</span></a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3"><span class="mx-icon mx-icon--chevron-right"></span><span>Section 3</span></a></li></ul>
+  </nav>
+</mx-in-page-navigation>
+<div class="js-content mx-rich-text mx-vertical-flow mx-section--l">
+<h2 id="section-1">Section 1</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-2">Section 2</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h3 id="test-level-3">Test level 3</h3>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
+<h2 id="section-3">Section 3</h2>
+<p>In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
 </div>
+"
 `;

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

@@ -1,149 +1,3 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
-<div class="mx-grid--sidebar">
-  <aside>
-    <nav class="mx-in-page-navigation mx-nav mx-nav--list">
-      <h2 class="mx-text--embellished-headline"
-          id="on-this-page"
-      >
-        On this page
-      </h2>
-      <ul>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-1"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Section 1
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#anchor-test"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Section 2
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#test-level-3"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Test level 3
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-3"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Section 3
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-4"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Section 4
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-5"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Section 5
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#test-level-6"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Test level 6
-          </a>
-        </li>
-        <li class="mx-in-page-navigation__level--h2">
-          <a href="#section-7"
-             class="mx-icon mx-icon--chevron-right"
-          >
-            Section 7
-          </a>
-        </li>
-      </ul>
-    </nav>
-  </aside>
-  <section>
-    <div class="mx-vertical-flow">
-      <h2 class
-          level="h2"
-          id="section-1"
-      >
-        Section 1
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-      <h2 class
-          id="anchor-test"
-          level="h2"
-      >
-        Section 2
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-      <h2 class
-          level="h3"
-          id="test-level-3"
-      >
-        Test level 3
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-      <h2 class
-          level="h2"
-          id="section-3"
-      >
-        Section 3
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-      <h2 class
-          level="h2"
-          id="section-4"
-      >
-        Section 4
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-      <h2 class
-          level="h2"
-          id="section-5"
-      >
-        Section 5
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-      <h2 class
-          level="h3"
-          id="test-level-6"
-      >
-        Test level 6
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-      <h2 class
-          level="h2"
-          id="section-7"
-      >
-        Section 7
-      </h2>
-      <p class>
-        In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.
-      </p>
-    </div>
-  </section>
-</div>
-`;
+exports[`In Page Navigation 1`] = `"<div class="mx-grid--sidebar"><aside><nav class="mx-in-page-navigation mx-nav mx-nav--list"><h2 class="mx-text--embellished-headline" id="on-this-page">On this page</h2><ul><li class="mx-in-page-navigation__level--h2"><a href="#section-1" class="mx-icon mx-icon--chevron-right">Section 1</a></li><li class="mx-in-page-navigation__level--h2"><a href="#anchor-test" class="mx-icon mx-icon--chevron-right">Section 2</a></li><li class="mx-in-page-navigation__level--h2"><a href="#test-level-3" class="mx-icon mx-icon--chevron-right">Test level 3</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-3" class="mx-icon mx-icon--chevron-right">Section 3</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-4" class="mx-icon mx-icon--chevron-right">Section 4</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-5" class="mx-icon mx-icon--chevron-right">Section 5</a></li><li class="mx-in-page-navigation__level--h2"><a href="#test-level-6" class="mx-icon mx-icon--chevron-right">Test level 6</a></li><li class="mx-in-page-navigation__level--h2"><a href="#section-7" class="mx-icon mx-icon--chevron-right">Section 7</a></li></ul></nav></aside><section><div class="mx-vertical-flow"><h2 class="" level="h2" id="section-1">Section 1</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" id="anchor-test" level="h2">Section 2</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" level="h3" id="test-level-3">Test level 3</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" level="h2" id="section-3">Section 3</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" level="h2" id="section-4">Section 4</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" level="h2" id="section-5">Section 5</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" level="h3" id="test-level-6">Test level 6</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p><h2 class="" level="h2" id="section-7">Section 7</h2><p class="">In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document without relying on meaningful content. Replacing the actual content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p></div></section></div>"`;

package/src/Component/InPageNavigation/in-page-navigation.css

@@ -10,6 +10,11 @@
 
 @layer design-system.components {
   .mx-in-page-navigation {
+    --link-colour: var(--colour-link);
+    --nav-underline: underline;
+
+    margin-block-end: var(--flow-gap, var(--gap));
+
     & .mx-in-page-navigation__level--h3 {
       padding-inline-start: var(--indent, var(--spacing-s));
     }

package/src/Component/LinkList/LinkList.stories.tsx

@@ -1,9 +1,10 @@
 import { Meta, StoryObj } from "@storybook/react-vite"
 import Component, { LinkListItem } from "./LinkList"
 import "./link-list.css"
+import { Page } from "../../../.storybook-react/decorators"
 
 const meta: Meta<typeof Component> = {
-  title: "Navigation/Link List",
+  decorators: [Page],
   tags: ["autodocs"],
   component: Component,
   args: {

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

@@ -1,72 +1,73 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Component/LinkList LinkList smoke-test 1`] = `
-<div class="mx-page default">
-  <ul class="mx-link-list">
-    <li>
-      <a href="#">
-        <span>
-          Music
-        </span>
-        <span class="mx-icon mx-icon--chevron-right">
-        </span>
-      </a>
-    </li>
-    <li>
-      <a href="#">
-        <span>
-          Performances
-        </span>
-        <span class="mx-icon mx-icon--chevron-right">
-        </span>
-      </a>
-    </li>
-    <li>
-      <a href="#">
-        <span>
-          Get involved
-        </span>
-        <span class="mx-icon mx-icon--chevron-right">
-        </span>
-      </a>
-    </li>
+exports[`Link List 1`] = `
+"
+
+<ul class="mx-link-list">
+      <li>
+<a href="#">
+  
+  <span>Music</span>
+    
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+</a>
+</li>
+      <li>
+<a href="#">
+  
+  <span>Performances</span>
+    
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+</a>
+</li>
+      <li>
+<a href="#">
+  
+  <span>Get involved</span>
+    
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+</a>
+</li>
   </ul>
-</div>
+"
 `;
 
-exports[`Component/LinkList WithTitle smoke-test 1`] = `
-<div class="mx-page default">
-  <h2 class="mx-heading--m">
-    Popular links
-  </h2>
-  <ul class="mx-link-list">
-    <li>
-      <a href="#">
-        <span>
-          Music
-        </span>
-        <span class="mx-icon mx-icon--chevron-right">
-        </span>
-      </a>
-    </li>
-    <li>
-      <a href="#">
-        <span>
-          Performances
-        </span>
-        <span class="mx-icon mx-icon--chevron-right">
-        </span>
-      </a>
-    </li>
-    <li>
-      <a href="#">
-        <span>
-          Get involved
-        </span>
-        <span class="mx-icon mx-icon--chevron-right">
-        </span>
-      </a>
-    </li>
+exports[`With Title 1`] = `
+"
+                  
+<h2 class="mx-heading--m">Popular links</h2>
+
+<ul class="mx-link-list">
+      <li>
+<a href="#">
+  
+  <span>Music</span>
+    
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+</a>
+</li>
+      <li>
+<a href="#">
+  
+  <span>Performances</span>
+    
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+</a>
+</li>
+      <li>
+<a href="#">
+  
+  <span>Get involved</span>
+    
+<span class="mx-icon mx-icon--chevron-right"></span>
+
+</a>
+</li>
   </ul>
-</div>
+"
 `;