@pnx-mixtape/mxds 0.0.3 → 0.0.4

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

@@ -1,69 +1,69 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/InPageAlert Error smoke-test 1`] = `
-<div id=":r2:"
-     class="message message--error icon icon--error"
->
-  <p>
-    <b>
-      Something happened.
-    </b>
-    And if you'd like to know what,
-    <a href="#">
-      Click here
-    </a>
-    .
-  </p>
+exports[`Component/InPageAlert Error smoke-test 1`] = `
+<div class="message message--error icon icon--error">
+  <div class="message__content">
+    <p>
+      <b>
+        Something happened.
+      </b>
+      And if you'd like to know what,
+      <a href="#">
+        Click here
+      </a>
+      .
+    </p>
+  </div>
 </div>
 `;
 
-exports[`Components/InPageAlert InPageAlert smoke-test 1`] = `
-<div id=":r0:"
-     class="message message--info icon icon--info"
->
-  <p>
-    <b>
-      Something happened.
-    </b>
-    And if you'd like to know what,
-    <a href="#">
-      Click here
-    </a>
-    .
-  </p>
+exports[`Component/InPageAlert InPageAlert smoke-test 1`] = `
+<div class="message message--info icon icon--info">
+  <div class="message__content">
+    <p>
+      <b>
+        Something happened.
+      </b>
+      And if you'd like to know what,
+      <a href="#">
+        Click here
+      </a>
+      .
+    </p>
+  </div>
 </div>
 `;
 
-exports[`Components/InPageAlert Success smoke-test 1`] = `
-<div id=":r3:"
-     class="message message--success icon icon--success"
->
-  <p>
-    <b>
-      Something happened.
-    </b>
-    And if you'd like to know what,
-    <a href="#">
-      Click here
-    </a>
-    .
-  </p>
+exports[`Component/InPageAlert Success smoke-test 1`] = `
+<div class="message message--success icon icon--success">
+  <div class="message__content">
+    <p>
+      <b>
+        Something happened.
+      </b>
+      And if you'd like to know what,
+      <a href="#">
+        Click here
+      </a>
+      .
+    </p>
+  </div>
 </div>
 `;
 
-exports[`Components/InPageAlert Warning smoke-test 1`] = `
-<div id=":r1:"
-     class="message message--warning icon icon--warning"
->
-  <p>
-    <b>
-      Something happened.
-    </b>
-    And if you'd like to know what,
-    <a href="#">
-      Click here
-    </a>
-    .
-  </p>
+exports[`Component/InPageAlert Warning smoke-test 1`] = `
+<div class="message message--warning icon icon--warning">
+  <div class="message__content">
+    <p>
+      <b>
+        Something happened.
+      </b>
+      And if you'd like to know what,
+      <a href="#">
+        Click here
+      </a>
+      .
+    </p>
+  </div>
 </div>
 `;

package/src/Component/InPageAlert/in-page-alert.twig

@@ -1,18 +1,15 @@
-{% if closable %}
-<mx-closable-alert class="message message--{{ type }}{% if type %} icon icon--{{ type }}{% endif %}"{% if id %} id="{{ id ~ type }}"{% endif %}>
+{% set baseClass = 'message' %}
+{% set classes = [
+  baseClass,
+  type ? baseClass~'--'~type : null,
+  type ? 'icon icon--'~type : null,
+] %}
+{% set attributes = (attributes|default(create_attribute())).addClass(classes) %}
+
+<div {{ attributes }}>
   <div class="message__content">
-    {% block content %}
-      <p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p>
-    {% endblock %}
-  </div>
-</mx-closable-alert>
-{% else %}
-  <div class="message message--{{ type }}{% if type %} icon icon--{{ type }}{% endif %}"{% if id %} id="{{ id ~ type }}"{% endif %}>
-    <div class="message__content">
-      {% block content %}
-        <p><b>Something happened.</b> And if you'd like to know what, <a href="#">Click here</a>.</p>
-      {% endblock %}
-    </div>
+    {{ title }}
+    {{ content }}
+    {{ link }}
   </div>
-{% endif %}
-
+</div>

package/src/Component/InPageAlert/twig/story-in-page-alert.twig

@@ -0,0 +1,11 @@
+{% extends "../in-page-alert.twig" %}
+{% if title %}
+  {% set title %}
+    {% include '@mixtape/Atom/Heading/heading.twig' with { title: title.title, as: title.as, modifiers: title.modifiers } only %}
+  {% endset %}
+{% endif %}
+{% if link %}
+  {% set link %}
+    {% include '@mixtape/Atom/Link/link.twig' with { href: link.href, title: link.title } only %}
+  {% endset %}
+{% endif %}

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

@@ -1,73 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation/InPageNavigation InPageNavigation smoke-test 1`] = `
-<section class="section section--l">
-  <div class="page">
-    <div class="grid--sidebar">
-      <aside>
-        <mx-in-page-navigation data-content=".js-content"
-                               data-headings="h2, h3"
-        >
-          <nav class="in-page-navigation nav nav--list">
-            <h4 class="text--embellished-headline">
-              Jump To Section
-            </h4>
-            <ul>
-            </ul>
-          </nav>
-        </mx-in-page-navigation>
-      </aside>
-      <section class="js-content rich-text vertical-flow">
-        <h2>
-          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="anchor-test">
-          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>
-          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>
-          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>
-        <h2>
-          Section 4
-        </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>
-          Section 5
-        </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>
-          Test level 6
-        </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>
-          Section 7
-        </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>
-      </section>
-    </div>
-  </div>
-</section>
+exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
+"
+&lt; class="section "&gt;
+          
+  
+"
 `;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation/InPageNavigation InPageNavigation smoke-test 1`] = `
+exports[`Component/InPageNavigation InPageNavigation smoke-test 1`] = `
 <div class="grid--sidebar">
   <aside>
     <nav class="in-page-navigation nav nav--list">

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

@@ -1,58 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation/LinkList LinkList smoke-test 1`] = `
-<section class="section ">
-  <div class="grid">
-    <div class="grid--6-col">
-      <ul class="link-list">
-        <li>
-          <a href="#"
-             class="icon icon--chevron-right"
-          >
-            Music
-          </a>
-        </li>
-        <li>
-          <a href="#"
-             class="icon icon--chevron-right"
-          >
-            Performances
-          </a>
-        </li>
-        <li>
-          <a href="#"
-             class="icon icon--chevron-right"
-          >
-            Get involved
-          </a>
-        </li>
-      </ul>
-    </div>
-    <div class="grid--6-col">
-      <ul class="link-list">
-        <li>
-          <a href="#"
-             class="icon icon--chevron-right"
-          >
-            Music
-          </a>
-        </li>
-        <li>
-          <a href="#"
-             class="icon icon--chevron-right"
-          >
-            Performances
-          </a>
-        </li>
-        <li>
-          <a href="#"
-             class="icon icon--chevron-right"
-          >
-            Get involved
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</section>
+exports[`Component/LinkList LinkList smoke-test 1`] = `
+<ul class="link-list">
+  <li>
+    <a href="#"
+       class="icon icon--chevron-right"
+    >
+      Music
+    </a>
+  </li>
+  <li>
+    <a href="#"
+       class="icon icon--chevron-right"
+    >
+      Performances
+    </a>
+  </li>
+  <li>
+    <a href="#"
+       class="icon icon--chevron-right"
+    >
+      Get involved
+    </a>
+  </li>
+</ul>
 `;

package/src/Component/Navigation/__snapshots__/Collapsible.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Navigation/Collapsible Collapsible smoke-test 1`] = `
+exports[`Component/Navigation/Collapsible Collapsible smoke-test 1`] = `
 <mx-nav>
   <nav class="nav nav--collapsible">
     <ul class="nav__level-1">

package/src/Component/Navigation/__snapshots__/Dropdown.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Navigation/Dropdown Dropdown smoke-test 1`] = `
+exports[`Component/Navigation/Dropdown Dropdown smoke-test 1`] = `
 <mx-nav flyout>
   <nav class="nav nav--dropdown "
        aria-label="Primary menu"

package/src/Component/Navigation/__snapshots__/Dropdown.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Navigation/Dropdown Dropdown smoke-test 1`] = `
+exports[`Component/Navigation/Dropdown Dropdown smoke-test 1`] = `
 <nav class="nav nav--dropdown"
      aria-label="Menu"
      id="navigation"

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Navigation Navigation smoke-test 1`] = `
+exports[`Component/Navigation Navigation smoke-test 1`] = `
 <nav class="nav "
      aria-label="Navigation"
 >

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Navigation InlineNavigation smoke-test 1`] = `
+exports[`Component/Navigation InlineNavigation smoke-test 1`] = `
 <nav class="nav nav--inline"
      aria-label="Inline Navigation"
 >
@@ -30,7 +30,7 @@ exports[`Components/Navigation InlineNavigation smoke-test 1`] = `
 </nav>
 `;
 
-exports[`Components/Navigation Navigation smoke-test 1`] = `
+exports[`Component/Navigation Navigation smoke-test 1`] = `
 <nav class="nav"
      aria-label="Navigation"
 >

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation/Pagination Pagination smoke-test 1`] = `
+exports[`Component/Pagination Pagination smoke-test 1`] = `
 <nav aria-label="Pagination"
      class="pagination"
      role="navigation"

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation/Pagination Pagination smoke-test 1`] = `
+exports[`Component/Pagination Pagination smoke-test 1`] = `
 <nav class="pagination"
      aria-label="Pagination"
 >

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

@@ -1,86 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Sticky Sticky smoke-test 1`] = `
-<div class="sticky__trigger">
-</div>
-<mx-sticky style="--sticky-offset: 0"
-           offsetpropname="--sticky-offset"
-           class="sticky section section--l background--alt"
->
-  <div class="section__content">
-    Sticky header
-  </div>
+exports[`Component/Sticky Sticky smoke-test 1`] = `
+"<div class="sticky__trigger"></div><mx-sticky style="--sticky-offset: 0" offsetpropname="--sticky-offset" class="sticky section section--l background--alt">
+  <div class="section__content">Sticky header</div>
 </mx-sticky>
-<section class="section section--l">
-  <div class="page">
-    <div class="grid--sidebar">
-      <aside>
-        <div class="sticky__trigger">
-        </div>
-        <mx-sticky class="sticky--l vertical-flow">
-          <h4>
-            Sticky sidebar
-          </h4>
-          <p>
-            In publishing and graphic design, lorem ipsum is a placeholder text commonly used to
-            <a href="#anchor-test">
-              demonstrate
-            </a>
-            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>
-        </mx-sticky>
-      </aside>
-      <section class="rich-text vertical-flow">
-        <h2>
-          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="anchor-test">
-          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>
-          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>
-          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>
-        <h2>
-          Section 4
-        </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>
-          Section 5
-        </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>
-          Test level 6
-        </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>
-          Section 7
-        </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>
-      </section>
-    </div>
-  </div>
-</section>
+
+
+&lt; class="section "&gt;
+          
+  
+"
 `;

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Sticky Sticky smoke-test 1`] = `
+exports[`Component/Sticky Sticky smoke-test 1`] = `
 <div class="sticky"
      style="--sticky-offset: 150px;"
 >

package/src/Component/Tabs/README.md

@@ -28,4 +28,3 @@ No Polyfills or frameworks are required.
 - Sticky import: `import '@pnx-mixtape/mxds/src/Component/Tabs/Elements/Tabs';` and be sure to include `<mx-tabs>` around the content.
 
 See twig files for all HTML examples.
-

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Tabs Tabs smoke-test 1`] = `
+exports[`Component/Tabs Tabs smoke-test 1`] = `
 <mx-tabs class="tabs tabs--">
   <mx-dropmenu closeonclick
                class="mobile-only"

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Tabs Default smoke-test 1`] = `
+exports[`Component/Tabs Default smoke-test 1`] = `
 <div class="tabs">
   <div class="mobile-only">
     <button id="unique-0"

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Tag Checkbox smoke-test 1`] = `
+exports[`Component/Tag Checkbox smoke-test 1`] = `
 <ul class="tags">
   <li>
     <div class="tag">
@@ -29,7 +29,7 @@ exports[`Components/Tag Checkbox smoke-test 1`] = `
 </ul>
 `;
 
-exports[`Components/Tag Link smoke-test 1`] = `
+exports[`Component/Tag Link smoke-test 1`] = `
 <ul class="tags">
   <li>
     <a class="tag"
@@ -48,7 +48,7 @@ exports[`Components/Tag Link smoke-test 1`] = `
 </ul>
 `;
 
-exports[`Components/Tag Tag smoke-test 1`] = `
+exports[`Component/Tag Tag smoke-test 1`] = `
 <ul class="tags">
   <li>
     <span class="tag">

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Tag Tag smoke-test 1`] = `
+exports[`Component/Tag Tag smoke-test 1`] = `
 <div class="tag">
   Tag name
 </div>

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Tile Tile smoke-test 1`] = `
+exports[`Component/Tile Tile smoke-test 1`] = `
 <div class="grid grid--xs-2-cols grid--md-4-cols spacing--bottom-l">
   <div class="tile stack ">
     <div class="tile__content vertical-flow-flex">

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Components/Tile Tile smoke-test 1`] = `
+exports[`Component/Tile Tile smoke-test 1`] = `
 <div class="tile tile--small stack">
   <div class="tile__content vertical-flow-flex">
     <h3 class="text--l"
@@ -17,7 +17,7 @@ exports[`Components/Tile Tile smoke-test 1`] = `
 </div>
 `;
 
-exports[`Components/Tile WithContent smoke-test 1`] = `
+exports[`Component/Tile WithContent smoke-test 1`] = `
 <div class="tile tile--small stack">
   <div class="tile__content vertical-flow-flex">
     <h3 class="text--l"

package/src/Layout/Footer/FooterMenu/__snapshots__/FooterMenu.stories.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Navigation/FooterMenu Footer smoke-test 1`] = `
+exports[`Layout/Footer/FooterMenu Footer smoke-test 1`] = `
 <nav class="nav nav--footer ">
   <ul class="nav__level-1">
     <li class="nav__has-subnav">