@ebay/skin 15.5.1 → 16.0.0-0

package/src/less/page-notice/stories/page-notice.stories.js

@@ -33,8 +33,8 @@ export const generalWithLink = () => `
 export const confirmationWithButton = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg class="icon icon--confirmation-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -49,8 +49,8 @@ export const confirmationWithButton = () => `
 export const confirmationWithLink = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg class="icon icon--confirmation-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Confirmation">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -65,8 +65,8 @@ export const confirmationWithLink = () => `
 export const attentionWithButton = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Attention">
-            <use href="#icon-attention-filled-small"></use>
+        <svg class="icon icon--attention-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Attention">
+            <use href="#icon-attention-filled-16"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -81,8 +81,8 @@ export const attentionWithButton = () => `
 export const attentionWithLink = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Attention">
-            <use href="#icon-attention-filled-small"></use>
+        <svg class="icon icon--attention-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Attention">
+            <use href="#icon-attention-filled-16"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -97,8 +97,8 @@ export const attentionWithLink = () => `
 export const informationWithButton = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-            <use href="#icon-information-filled-small"></use>
+        <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -113,8 +113,8 @@ export const informationWithButton = () => `
 export const informationWithLink = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-            <use href="#icon-information-filled-small"></use>
+        <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -129,8 +129,8 @@ export const informationWithLink = () => `
 export const InformationWithParagraph = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-            <use href="#icon-information-filled-small"></use>
+        <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -145,8 +145,8 @@ export const InformationWithParagraph = () => `
 export const dismissableWithTitle = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-            <use href="#icon-information-filled-small"></use>
+        <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -156,8 +156,8 @@ export const dismissableWithTitle = () => `
     <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
     <div class="page-notice__footer">
         <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
-                <use href="#icon-close-small"></use>
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="14" width="14">
+                <use href="#icon-close-16"></use>
             </svg>
         </a>
     </div>
@@ -167,8 +167,8 @@ export const dismissableWithTitle = () => `
 export const dismissableWithoutTitle = () => `
 <section class="page-notice page-notice--information" role="region" aria-label="Information">
     <div class="page-notice__header">
-        <svg class="icon icon--information-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Information">
-            <use href="#icon-information-filled-small"></use>
+        <svg class="icon icon--information-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Information">
+            <use href="#icon-information-filled-16"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -177,8 +177,8 @@ export const dismissableWithoutTitle = () => `
     <p class="page-notice__cta"><a href="https://www.ebay.com">Opt in</a></p>
     <div class="page-notice__footer">
         <button aria-label="Dismiss notification" class="fake-link page-notice__dismiss">
-            <svg aria-hidden="true" class="icon icon--close-small" focusable="false" height="14" width="14">
-                <use href="#icon-close-small"></use>
+            <svg aria-hidden="true" class="icon icon--close-16" focusable="false" height="14" width="14">
+                <use href="#icon-close-16"></use>
             </svg>
         </a>
     </div>
@@ -188,8 +188,8 @@ export const dismissableWithoutTitle = () => `
 export const formErrors = () => `
 <section class="page-notice page-notice--attention" role="region" aria-label="Attention">
     <div class="page-notice__header">
-        <svg class="icon icon--attention-filled-small" focusable="false" height="16" width="16" role="img" aria-label="Attention">
-            <use href="#icon-attention-filled-small"></use>
+        <svg class="icon icon--attention-filled-16" focusable="false" height="16" width="16" role="img" aria-label="Attention">
+            <use href="#icon-attention-filled-16"></use>
         </svg>
     </div>
     <div class="page-notice__main">

package/src/less/page-notice/stories/test.stories.js

@@ -4,8 +4,8 @@ export const RTL = () => `
 <div dir="rtl">
     <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-small" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-                <use href="#icon-confirmation-filled-small"></use>
+            <svg class="icon icon--confirmation-filled-16" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+                <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -22,8 +22,8 @@ export const RTL = () => `
 export const longText = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled-small" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg class="icon icon--confirmation-filled-16" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -38,8 +38,8 @@ export const longText = () => `
 export const legacy = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
     <div class="page-notice__header">
-        <svg class="icon icon--confirmation-filled-small" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-            <use href="#icon-confirmation-filled-small"></use>
+        <svg class="icon icon--confirmation-filled-16" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+            <use href="#icon-confirmation-filled-16"></use>
         </svg>
     </div>
     <div class="page-notice__main">
@@ -52,8 +52,8 @@ export const legacy = () => `
 export const legacyLongText = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-small" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-                <use href="#icon-confirmation-filled-small"></use>
+            <svg class="icon icon--confirmation-filled-16" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+                <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -66,8 +66,8 @@ export const legacyLongText = () => `
 export const legacyLongTextAndCTA = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-small" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-                <use href="#icon-confirmation-filled-small"></use>
+            <svg class="icon icon--confirmation-filled-16" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+                <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -83,8 +83,8 @@ export const legacyLongTextAndCTA = () => `
 export const legacyMultiParagraph = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-small" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-                <use href="#icon-confirmation-filled-small"></use>
+            <svg class="icon icon--confirmation-filled-16" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+                <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
         <div class="page-notice__main">
@@ -98,8 +98,8 @@ export const legacyMultiParagraph = () => `
 export const legacyMultiParagraphWithCTA = () => `
 <section class="page-notice page-notice--confirmation" role="region" aria-label="Confirmation">
         <div class="page-notice__header">
-            <svg class="icon icon--confirmation-filled-small" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
-                <use href="#icon-confirmation-filled-small"></use>
+            <svg class="icon icon--confirmation-filled-16" focusable="false" height="24" width="24" role="img" aria-label="Confirmation">
+                <use href="#icon-confirmation-filled-16"></use>
             </svg>
         </div>
         <div class="page-notice__main">

package/src/less/pagination/pagination.less

@@ -114,10 +114,6 @@ button.pagination__item {
     }
 }
 
-span.pagination__item svg.icon--overflow {
-    transform: rotate(90deg);
-}
-
 span.pagination__item button.icon-btn--transparent {
     &:focus,
     &:hover {
@@ -143,12 +139,16 @@ nav.pagination--fluid ol.pagination__items li {
 }
 
 [dir="rtl"] {
+    nav.pagination svg.icon--arrow-right-16,
+    nav.pagination svg.icon--arrow-left-16 {
+        transform: rotate(180deg);
+    }
+
     a.pagination__next,
     button.pagination__next {
         margin-left: 0;
         margin-right: @spacing-100;
     }
-
     a.pagination__previous,
     button.pagination__previous {
         margin-left: @spacing-100;
@@ -156,7 +156,7 @@ nav.pagination--fluid ol.pagination__items li {
     }
 }
 
-@media (min-width: @screen-size-3) {
+@media (min-width: @_screen-size-MD) {
     nav.pagination {
         margin: @spacing-200 0;
     }

package/src/less/pagination/stories/button-cascade.stories.js

@@ -6,8 +6,8 @@ export const fontSize = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
-        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-prev"></use>
+        <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
         </svg>
     </button>
     <ol class="pagination__items">
@@ -34,8 +34,8 @@ export const fontSize = () => `
         </li>
     </ol>
     <button aria-label="Next Page" class="icon-btn pagination__next">
-        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-next"></use>
+        <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
         </svg>
     </button>
 </nav>
@@ -47,8 +47,8 @@ export const color = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
-        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-prev"></use>
+        <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
         </svg>
     </button>
     <ol class="pagination__items">
@@ -75,8 +75,8 @@ export const color = () => `
         </li>
     </ol>
     <button aria-label="Next Page" class="icon-btn pagination__next">
-        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-next"></use>
+        <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
         </svg>
     </button>
 </nav>
@@ -89,8 +89,8 @@ export const RTL = () => `
             <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
         </span>
         <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
-            <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-                <use href="#icon-pagination-prev"></use>
+            <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+                <use href="#icon-arrow-left-16"></use>
             </svg>
         </button>
         <ol class="pagination__items">
@@ -117,8 +117,8 @@ export const RTL = () => `
             </li>
         </ol>
         <button aria-label="Next Page" class="icon-btn pagination__next">
-            <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-                <use href="#icon-pagination-next"></use>
+            <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+                <use href="#icon-arrow-right-16"></use>
             </svg>
         </button>
     </nav>

package/src/less/pagination/stories/buttons.stories.js

@@ -6,8 +6,8 @@ export const base = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
-        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-prev"></use>
+        <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
         </svg>
     </button>
     <ol class="pagination__items">
@@ -34,8 +34,8 @@ export const base = () => `
         </li>
     </ol>
     <button aria-label="Next Page" class="icon-btn pagination__next">
-        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-next"></use>
+        <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
         </svg>
     </button>
 </nav>
@@ -47,8 +47,8 @@ export const fluid = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <button aria-disabled="true" aria-label="Previous Page" class="icon-btn pagination__previous">
-        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-prev"></use>
+        <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
         </svg>
     </button>
     <ol class="pagination__items">
@@ -75,8 +75,8 @@ export const fluid = () => `
         </li>
     </ol>
     <button aria-label="Next Page" class="icon-btn pagination__next">
-        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-next"></use>
+        <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
         </svg>
     </button>
 </nav>

package/src/less/pagination/stories/link-cascade.stories.js

@@ -6,8 +6,8 @@ export const fontSize = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-prev"></use>
+        <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
     <ol class="pagination__items">
@@ -34,8 +34,8 @@ export const fontSize = () => `
         </li>
     </ol>
     <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-next"></use>
+        <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
 </nav>
@@ -47,8 +47,8 @@ export const color = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-prev"></use>
+        <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
     <ol class="pagination__items">
@@ -75,8 +75,8 @@ export const color = () => `
         </li>
     </ol>
     <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-next"></use>
+        <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
 </nav>
@@ -89,8 +89,8 @@ export const RTL = () => `
             <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
         </span>
         <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-            <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-                <use href="#icon-pagination-prev"></use>
+            <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+                <use href="#icon-arrow-left-16"></use>
             </svg>
         </a>
         <ol class="pagination__items">
@@ -117,8 +117,8 @@ export const RTL = () => `
             </li>
         </ol>
         <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-            <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-                <use href="#icon-pagination-next"></use>
+            <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+                <use href="#icon-arrow-right-16"></use>
             </svg>
         </a>
     </nav>

package/src/less/pagination/stories/links.stories.js

@@ -6,8 +6,8 @@ export const base = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-prev"></use>
+        <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
     <ol class="pagination__items">
@@ -34,8 +34,8 @@ export const base = () => `
         </li>
     </ol>
     <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-next"></use>
+        <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
 </nav>
@@ -47,8 +47,8 @@ export const fluid = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-prev"></use>
+        <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
     <ol class="pagination__items">
@@ -75,8 +75,8 @@ export const fluid = () => `
         </li>
     </ol>
     <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-next"></use>
+        <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
 </nav>

package/src/less/pagination/stories/overflow.stories.js

@@ -6,8 +6,8 @@ export const start = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-prev"></use>
+        <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
     <ol class="pagination__items">
@@ -38,8 +38,8 @@ export const start = () => `
         </li>
     </ol>
     <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-next"></use>
+        <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
 </nav>
@@ -51,8 +51,8 @@ export const middle = () => `
         <h2 class="clipped" id="pagination-heading-3">Results Pagination - Page 10</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page - Results Pagination" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-prev"></use>
+        <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
     <ol class="pagination__items">
@@ -87,8 +87,8 @@ export const middle = () => `
         </li>
     </ol>
     <a aria-label="Next Page - Results Pagination" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-next"></use>
+        <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
 </nav>
@@ -100,8 +100,8 @@ export const end = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-prev"></use>
+        <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
     <ol class="pagination__items">
@@ -132,8 +132,8 @@ export const end = () => `
         </li>
     </ol>
     <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-next"></use>
+        <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
 </nav>
@@ -145,8 +145,8 @@ export const endMenuCollapsed = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-prev"></use>
+        <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
     <ol class="pagination__items">
@@ -203,8 +203,8 @@ export const endMenuCollapsed = () => `
         </li>
     </ol>
     <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-next"></use>
+        <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
 </nav>
@@ -216,8 +216,8 @@ export const endMenuExpanded = () => `
         <h2 class="clipped" id="pagination-heading">Results Pagination - Page 1</h2>
     </span>
     <a aria-disabled="true" aria-label="Previous Page" class="icon-link pagination__previous" href="http://www.ebay.com/sch/i.html?_nkw=guitars">
-        <svg class="icon icon--pagination-prev" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-prev"></use>
+        <svg class="icon icon--arrow-left-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-left-16"></use>
         </svg>
     </a>
     <ol class="pagination__items">
@@ -274,8 +274,8 @@ export const endMenuExpanded = () => `
         </li>
     </ol>
     <a aria-label="Next Page" class="icon-link pagination__next" href="http://www.ebay.com/sch/i.html?_nkw=guitars&_pgn=2">
-        <svg class="icon icon--pagination-next" focusable="false" height="24" width="24" aria-hidden="true">
-            <use href="#icon-pagination-next"></use>
+        <svg class="icon icon--arrow-right-16" focusable="false" height="24" width="24" aria-hidden="true">
+            <use href="#icon-arrow-right-16"></use>
         </svg>
     </a>
 </nav>