@pnx-mixtape/mxds 0.0.21 → 0.0.23

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Component/Carousel Carousel smoke-test 1`] = `
 <div class="mx-page default">
@@ -35,7 +35,7 @@ exports[`Component/Carousel Carousel smoke-test 1`] = `
               <h3>
                 Tile 1
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -58,7 +58,7 @@ exports[`Component/Carousel Carousel smoke-test 1`] = `
               <h3>
                 Tile 2
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -81,7 +81,7 @@ exports[`Component/Carousel Carousel smoke-test 1`] = `
               <h3>
                 Tile 3
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -104,7 +104,7 @@ exports[`Component/Carousel Carousel smoke-test 1`] = `
               <h3>
                 Tile 4
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -127,7 +127,7 @@ exports[`Component/Carousel Carousel smoke-test 1`] = `
               <h3>
                 Tile 5
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image but may have longer text and trigger height changes..
                 </p>
@@ -150,7 +150,7 @@ exports[`Component/Carousel Carousel smoke-test 1`] = `
               <h3>
                 Tile 6
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -173,7 +173,7 @@ exports[`Component/Carousel Carousel smoke-test 1`] = `
               <h3>
                 Tile 7
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -196,7 +196,7 @@ exports[`Component/Carousel Carousel smoke-test 1`] = `
               <h3>
                 Tile 8
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -219,7 +219,7 @@ exports[`Component/Carousel Carousel smoke-test 1`] = `
               <h3>
                 Tile 9
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -242,7 +242,7 @@ exports[`Component/Carousel Carousel smoke-test 1`] = `
               <h3>
                 Tile 10
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -265,7 +265,7 @@ exports[`Component/Carousel Carousel smoke-test 1`] = `
               <h3>
                 Tile 11
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -321,7 +321,7 @@ exports[`Component/Carousel Counters smoke-test 1`] = `
               <h3>
                 Tile 1
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -344,7 +344,7 @@ exports[`Component/Carousel Counters smoke-test 1`] = `
               <h3>
                 Tile 2
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -367,7 +367,7 @@ exports[`Component/Carousel Counters smoke-test 1`] = `
               <h3>
                 Tile 3
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -390,7 +390,7 @@ exports[`Component/Carousel Counters smoke-test 1`] = `
               <h3>
                 Tile 4
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -413,7 +413,7 @@ exports[`Component/Carousel Counters smoke-test 1`] = `
               <h3>
                 Tile 5
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image but may have longer text and trigger height changes..
                 </p>
@@ -436,7 +436,7 @@ exports[`Component/Carousel Counters smoke-test 1`] = `
               <h3>
                 Tile 6
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -459,7 +459,7 @@ exports[`Component/Carousel Counters smoke-test 1`] = `
               <h3>
                 Tile 7
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -482,7 +482,7 @@ exports[`Component/Carousel Counters smoke-test 1`] = `
               <h3>
                 Tile 8
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -505,7 +505,7 @@ exports[`Component/Carousel Counters smoke-test 1`] = `
               <h3>
                 Tile 9
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -528,7 +528,7 @@ exports[`Component/Carousel Counters smoke-test 1`] = `
               <h3>
                 Tile 10
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -551,7 +551,7 @@ exports[`Component/Carousel Counters smoke-test 1`] = `
               <h3>
                 Tile 11
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -598,7 +598,7 @@ exports[`Component/Carousel Counters smoke-test 1`] = `
 </div>
 `;
 
-exports[`Component/Carousel Paginated smoke-test 1`] = `
+exports[`Component/Carousel Loop smoke-test 1`] = `
 <div class="mx-page default">
   <mx-carousel class="mx-carousel mx-vertical-flow"
                role="group"
@@ -634,7 +634,293 @@ exports[`Component/Carousel Paginated smoke-test 1`] = `
               <h3>
                 Tile 1
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
+                <p>
+                  Tiles are just block cards without an image.
+                </p>
+              </div>
+              <a class="mx-link--more"
+                 href="#"
+              >
+                <span>
+                  Find out more
+                </span>
+              </a>
+            </div>
+          </article>
+        </div>
+      </li>
+      <li>
+        <div class="mx-container">
+          <article class="mx-card mx-card--block mx-background--box">
+            <div class="mx-card__content mx-vertical-flow-flex">
+              <h3>
+                Tile 2
+              </h3>
+              <div class="mx-text--lede mx-vertical-flow-flex">
+                <p>
+                  Tiles are just block cards without an image.
+                </p>
+              </div>
+              <a class="mx-link--more"
+                 href="#"
+              >
+                <span>
+                  Find out more
+                </span>
+              </a>
+            </div>
+          </article>
+        </div>
+      </li>
+      <li>
+        <div class="mx-container">
+          <article class="mx-card mx-card--block mx-background--box">
+            <div class="mx-card__content mx-vertical-flow-flex">
+              <h3>
+                Tile 3
+              </h3>
+              <div class="mx-text--lede mx-vertical-flow-flex">
+                <p>
+                  Tiles are just block cards without an image.
+                </p>
+              </div>
+              <a class="mx-link--more"
+                 href="#"
+              >
+                <span>
+                  Find out more
+                </span>
+              </a>
+            </div>
+          </article>
+        </div>
+      </li>
+      <li>
+        <div class="mx-container">
+          <article class="mx-card mx-card--block mx-background--box">
+            <div class="mx-card__content mx-vertical-flow-flex">
+              <h3>
+                Tile 4
+              </h3>
+              <div class="mx-text--lede mx-vertical-flow-flex">
+                <p>
+                  Tiles are just block cards without an image.
+                </p>
+              </div>
+              <a class="mx-link--more"
+                 href="#"
+              >
+                <span>
+                  Find out more
+                </span>
+              </a>
+            </div>
+          </article>
+        </div>
+      </li>
+      <li inert>
+        <div class="mx-container">
+          <article class="mx-card mx-card--block mx-background--box">
+            <div class="mx-card__content mx-vertical-flow-flex">
+              <h3>
+                Tile 5
+              </h3>
+              <div class="mx-text--lede mx-vertical-flow-flex">
+                <p>
+                  Tiles are just block cards without an image but may have longer text and trigger height changes..
+                </p>
+              </div>
+              <a class="mx-link--more"
+                 href="#"
+              >
+                <span>
+                  Find out more
+                </span>
+              </a>
+            </div>
+          </article>
+        </div>
+      </li>
+      <li inert>
+        <div class="mx-container">
+          <article class="mx-card mx-card--block mx-background--box">
+            <div class="mx-card__content mx-vertical-flow-flex">
+              <h3>
+                Tile 6
+              </h3>
+              <div class="mx-text--lede mx-vertical-flow-flex">
+                <p>
+                  Tiles are just block cards without an image.
+                </p>
+              </div>
+              <a class="mx-link--more"
+                 href="#"
+              >
+                <span>
+                  Find out more
+                </span>
+              </a>
+            </div>
+          </article>
+        </div>
+      </li>
+      <li inert>
+        <div class="mx-container">
+          <article class="mx-card mx-card--block mx-background--box">
+            <div class="mx-card__content mx-vertical-flow-flex">
+              <h3>
+                Tile 7
+              </h3>
+              <div class="mx-text--lede mx-vertical-flow-flex">
+                <p>
+                  Tiles are just block cards without an image.
+                </p>
+              </div>
+              <a class="mx-link--more"
+                 href="#"
+              >
+                <span>
+                  Find out more
+                </span>
+              </a>
+            </div>
+          </article>
+        </div>
+      </li>
+      <li inert>
+        <div class="mx-container">
+          <article class="mx-card mx-card--block mx-background--box">
+            <div class="mx-card__content mx-vertical-flow-flex">
+              <h3>
+                Tile 8
+              </h3>
+              <div class="mx-text--lede mx-vertical-flow-flex">
+                <p>
+                  Tiles are just block cards without an image.
+                </p>
+              </div>
+              <a class="mx-link--more"
+                 href="#"
+              >
+                <span>
+                  Find out more
+                </span>
+              </a>
+            </div>
+          </article>
+        </div>
+      </li>
+      <li inert>
+        <div class="mx-container">
+          <article class="mx-card mx-card--block mx-background--box">
+            <div class="mx-card__content mx-vertical-flow-flex">
+              <h3>
+                Tile 9
+              </h3>
+              <div class="mx-text--lede mx-vertical-flow-flex">
+                <p>
+                  Tiles are just block cards without an image.
+                </p>
+              </div>
+              <a class="mx-link--more"
+                 href="#"
+              >
+                <span>
+                  Find out more
+                </span>
+              </a>
+            </div>
+          </article>
+        </div>
+      </li>
+      <li inert>
+        <div class="mx-container">
+          <article class="mx-card mx-card--block mx-background--box">
+            <div class="mx-card__content mx-vertical-flow-flex">
+              <h3>
+                Tile 10
+              </h3>
+              <div class="mx-text--lede mx-vertical-flow-flex">
+                <p>
+                  Tiles are just block cards without an image.
+                </p>
+              </div>
+              <a class="mx-link--more"
+                 href="#"
+              >
+                <span>
+                  Find out more
+                </span>
+              </a>
+            </div>
+          </article>
+        </div>
+      </li>
+      <li inert>
+        <div class="mx-container">
+          <article class="mx-card mx-card--block mx-background--box">
+            <div class="mx-card__content mx-vertical-flow-flex">
+              <h3>
+                Tile 11
+              </h3>
+              <div class="mx-text--lede mx-vertical-flow-flex">
+                <p>
+                  Tiles are just block cards without an image.
+                </p>
+              </div>
+              <a class="mx-link--more"
+                 href="#"
+              >
+                <span>
+                  Find out more
+                </span>
+              </a>
+            </div>
+          </article>
+        </div>
+      </li>
+    </ul>
+  </mx-carousel>
+</div>
+`;
+
+exports[`Component/Carousel Paginated smoke-test 1`] = `
+<div class="mx-page default">
+  <mx-carousel class="mx-carousel mx-vertical-flow"
+               role="group"
+  >
+    <div class="mx-carousel__buttons"
+         data-buttons
+    >
+      <button class="mx-carousel__prev mx-button mx-button--icon-only"
+              type="button"
+      >
+        <span class="sr-only">
+          previous
+        </span>
+        <span class="mx-icon mx-icon--chevron-left">
+        </span>
+      </button>
+      <button class="mx-carousel__next mx-button mx-button--icon-only"
+              type="button"
+      >
+        <span class="sr-only">
+          next
+        </span>
+        <span class="mx-icon mx-icon--chevron-right">
+        </span>
+      </button>
+    </div>
+    <ul class="mx-carousel__scrollable overflowing">
+      <li>
+        <div class="mx-container">
+          <article class="mx-card mx-card--block mx-background--box">
+            <div class="mx-card__content mx-vertical-flow-flex">
+              <h3>
+                Tile 1
+              </h3>
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -657,7 +943,7 @@ exports[`Component/Carousel Paginated smoke-test 1`] = `
               <h3>
                 Tile 2
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -680,7 +966,7 @@ exports[`Component/Carousel Paginated smoke-test 1`] = `
               <h3>
                 Tile 3
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -703,7 +989,7 @@ exports[`Component/Carousel Paginated smoke-test 1`] = `
               <h3>
                 Tile 4
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -726,7 +1012,7 @@ exports[`Component/Carousel Paginated smoke-test 1`] = `
               <h3>
                 Tile 5
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image but may have longer text and trigger height changes..
                 </p>
@@ -749,7 +1035,7 @@ exports[`Component/Carousel Paginated smoke-test 1`] = `
               <h3>
                 Tile 6
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -772,7 +1058,7 @@ exports[`Component/Carousel Paginated smoke-test 1`] = `
               <h3>
                 Tile 7
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -795,7 +1081,7 @@ exports[`Component/Carousel Paginated smoke-test 1`] = `
               <h3>
                 Tile 8
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -818,7 +1104,7 @@ exports[`Component/Carousel Paginated smoke-test 1`] = `
               <h3>
                 Tile 9
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -841,7 +1127,7 @@ exports[`Component/Carousel Paginated smoke-test 1`] = `
               <h3>
                 Tile 10
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>
@@ -864,7 +1150,7 @@ exports[`Component/Carousel Paginated smoke-test 1`] = `
               <h3>
                 Tile 11
               </h3>
-              <div class="mx-text--lede">
+              <div class="mx-text--lede mx-vertical-flow-flex">
                 <p>
                   Tiles are just block cards without an image.
                 </p>

package/src/Component/Carousel/carousel.css

@@ -97,8 +97,7 @@
 
     & button {
       border-radius: var(--border-radius);
-      border: var(--line-width, 2px) solid
-        var(--line-colour, var(--colour-border));
+      border: var(--line-width, 2px) solid var(--line-colour, var(--colour-border));
       background-color: var(--background, var(--colour-background));
       color: var(--foreground, var(--colour-foreground));
       min-block-size: 2em;

package/src/Component/ContentBlock/Components/ContentBlockContent.tsx

@@ -3,11 +3,7 @@ import classNames from "classnames"
 
 const ContentBlockContent = ({ children }: PropsWithChildren): JSX.Element => {
   return (
-    <div
-      className={classNames("mx-content-block__content", "mx-vertical-flow")}
-    >
-      {children}
-    </div>
+    <div className={classNames("mx-content-block__content", "mx-vertical-flow")}>{children}</div>
   )
 }
 

package/src/Component/ContentBlock/Components/ContentBlockMedia.tsx

@@ -5,10 +5,7 @@ type CardProps = PropsWithChildren & {
   skeleton?: boolean
 }
 
-const ContentBlockMedia = ({
-  children,
-  skeleton = false,
-}: CardProps): JSX.Element => {
+const ContentBlockMedia = ({ children, skeleton = false }: CardProps): JSX.Element => {
   return (
     <figure className={classNames("mx-content-block__media", "stack")}>
       {skeleton && <div className="mx-skeleton mx-skeleton--bg"></div>}