@pnx-mixtape/mxds 0.1.0-rc.2 → 0.1.0-rc.4

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

@@ -27,8 +27,7 @@ exports[`Carousel 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -47,8 +46,7 @@ exports[`Carousel 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -67,8 +65,7 @@ exports[`Carousel 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -87,8 +84,7 @@ exports[`Carousel 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -107,8 +103,7 @@ exports[`Carousel 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -127,8 +122,7 @@ exports[`Carousel 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -147,8 +141,7 @@ exports[`Carousel 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -167,8 +160,7 @@ exports[`Carousel 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -187,8 +179,7 @@ exports[`Carousel 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -207,8 +198,7 @@ exports[`Carousel 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -227,8 +217,7 @@ exports[`Carousel 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -267,8 +256,7 @@ exports[`Counters 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -287,8 +275,7 @@ exports[`Counters 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -307,8 +294,7 @@ exports[`Counters 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -327,8 +313,7 @@ exports[`Counters 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -347,8 +332,7 @@ exports[`Counters 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -367,8 +351,7 @@ exports[`Counters 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -387,8 +370,7 @@ exports[`Counters 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -407,8 +389,7 @@ exports[`Counters 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -427,8 +408,7 @@ exports[`Counters 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -447,8 +427,7 @@ exports[`Counters 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -467,8 +446,7 @@ exports[`Counters 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -508,8 +486,7 @@ exports[`Loop 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -528,8 +505,7 @@ exports[`Loop 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -548,8 +524,7 @@ exports[`Loop 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -568,8 +543,7 @@ exports[`Loop 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -588,8 +562,7 @@ exports[`Loop 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -608,8 +581,7 @@ exports[`Loop 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -628,8 +600,7 @@ exports[`Loop 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -648,8 +619,7 @@ exports[`Loop 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -668,8 +638,7 @@ exports[`Loop 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -688,8 +657,7 @@ exports[`Loop 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -708,8 +676,7 @@ exports[`Loop 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -748,8 +715,7 @@ exports[`Paginated 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -768,8 +734,7 @@ exports[`Paginated 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -788,8 +753,7 @@ exports[`Paginated 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -808,8 +772,7 @@ exports[`Paginated 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -828,8 +791,7 @@ exports[`Paginated 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -848,8 +810,7 @@ exports[`Paginated 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -868,8 +829,7 @@ exports[`Paginated 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -888,8 +848,7 @@ exports[`Paginated 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -908,8 +867,7 @@ exports[`Paginated 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -928,8 +886,7 @@ exports[`Paginated 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -948,8 +905,7 @@ exports[`Paginated 1`] = `
       
 <a href="#" class="mx-link--more">
   
-  <span>Find out more</span>
-    
+  Find out more  
 </a>
 
   </div>
@@ -961,3 +917,232 @@ exports[`Paginated 1`] = `
   </mx-carousel>
 "
 `;
+
+exports[`Screen Reader Announcements 1`] = `
+"
+<mx-carousel class="mx-carousel" role="region" aria-roledescription="carousel">
+  <div class="mx-carousel__buttons" data-buttons="" role="group" aria-label="Quick page controls">
+    <button class="mx-carousel__prev mx-button mx-button--icon-only" type="button" disabled="">
+      <span class="sr-only">previous page</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 page</span>
+      <span class="mx-icon mx-icon--chevron-right"></span>
+    </button>
+  </div>
+  <div class="mx-carousel__scrollable overflowing" data-track="" aria-live="off" tabindex="0">
+              
+<div class="mx-container" data-index="0" aria-hidden="false">
+<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></div>
+        
+      
+<a href="#" class="mx-link--more">
+  
+  Find out more  
+</a>
+
+  </div>
+  </article>
+</div>
+          
+<div class="mx-container" data-index="1" aria-hidden="false">
+<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 href="#" class="mx-link--more">
+  
+  Find out more  
+</a>
+
+  </div>
+  </article>
+</div>
+          
+<div class="mx-container" data-index="2" aria-hidden="false">
+<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 href="#" class="mx-link--more">
+  
+  Find out more  
+</a>
+
+  </div>
+  </article>
+</div>
+          
+<div class="mx-container" data-index="3" aria-hidden="false">
+<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 href="#" class="mx-link--more">
+  
+  Find out more  
+</a>
+
+  </div>
+  </article>
+</div>
+          
+<div class="mx-container" data-index="4" inert="" aria-hidden="true">
+<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 href="#" class="mx-link--more">
+  
+  Find out more  
+</a>
+
+  </div>
+  </article>
+</div>
+          
+<div class="mx-container" data-index="5" inert="" aria-hidden="true">
+<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 href="#" class="mx-link--more">
+  
+  Find out more  
+</a>
+
+  </div>
+  </article>
+</div>
+          
+<div class="mx-container" data-index="6" inert="" aria-hidden="true">
+<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 href="#" class="mx-link--more">
+  
+  Find out more  
+</a>
+
+  </div>
+  </article>
+</div>
+          
+<div class="mx-container" data-index="7" inert="" aria-hidden="true">
+<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 href="#" class="mx-link--more">
+  
+  Find out more  
+</a>
+
+  </div>
+  </article>
+</div>
+          
+<div class="mx-container" data-index="8" inert="" aria-hidden="true">
+<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 href="#" class="mx-link--more">
+  
+  Find out more  
+</a>
+
+  </div>
+  </article>
+</div>
+          
+<div class="mx-container" data-index="9" inert="" aria-hidden="true">
+<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 href="#" class="mx-link--more">
+  
+  Find out more  
+</a>
+
+  </div>
+  </article>
+</div>
+          
+<div class="mx-container" data-index="10" inert="" aria-hidden="true">
+<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 href="#" class="mx-link--more">
+  
+  Find out more  
+</a>
+
+  </div>
+  </article>
+</div>
+
+  </div>
+  </mx-carousel>
+"
+`;