@ebay/skin 15.5.0 → 16.0.0-0

package/dist/variables/variables.less

@@ -1,14 +1,28 @@
-@screen-size-1: 320px;
-@screen-size-2: 480px;
-@screen-size-3: 600px;
-@screen-size-4: 768px;
-@screen-size-5: 960px;
-@screen-size-6: 1280px;
-
-@page-grid-cols-small: 8;
-@page-grid-cols-large: 16;
-@page-grid-gutter-width-small: @spacing-100;
-@page-grid-gutter-width-large: @spacing-200;
+// Responsive Breakpoints
+// The first breakpoint simply indicates minimum support level. It should not be used with media queries.
+// Mobile-first means the default layout applies to mobile and there should be no mimimums even though
+// most mobile devices would be higher in screen width than the smallest viewport width.
+
+// The variables with underscores are to be considered constants. They can be read, but should not be modified.
+@_screen-size-XS: 320px;
+@_screen-size-SM: 512px;
+@_screen-size-MD: 768px;
+@_screen-size-LG: 1024px;
+@_screen-size-XL: 1280px;
+@_screen-size-XL2: 1440px;
+@_screen-size-XL3: 1680px;
+@_screen-size-XL4: 1920px;
+
+@_page-grid-max-width: 1584px;
+@_page-grid-number-cols-small: 8;
+@_page-grid-number-cols-large: 16;
+@_page-grid-outside-margins-small: 16px;
+@_page-grid-outside-margins-large: 32px;
+@_page-grid-outside-margins-max: 48px;
+@_page-grid-column-gaps-small: @spacing-100;
+@_page-grid-column-gaps-large: @spacing-200;
+@_page-grid-row-gaps-small: @spacing-100;
+@_page-grid-row-gaps-large: @spacing-200;
 
 @marketsans-url: "https://ir.ebaystatic.com/cr/v/c1/market-sans/v1.0/";
 @marketsans-fontname: "Market Sans";
@@ -33,6 +47,7 @@
 @spacing-25: @spacing-100 * 0.25;
 @spacing-50: @spacing-100 * 0.5;
 @spacing-100: 8px;
+@spacing-125: @spacing-100 * 1.25;
 @spacing-150: @spacing-100 * 1.5;
 @spacing-200: @spacing-100 * 2;
 @spacing-250: @spacing-100 * 2.5;
@@ -41,13 +56,6 @@
 @spacing-600: @spacing-100 * 6;
 @spacing-800: @spacing-100 * 8;
 
-@breakpoint-1: ~"only screen and (min-width: @{screen-size-1})";
-@breakpoint-2: ~"only screen and (min-width: @{screen-size-2})";
-@breakpoint-3: ~"only screen and (min-width: @{screen-size-3})";
-@breakpoint-4: ~"only screen and (min-width: @{screen-size-4})";
-@breakpoint-5: ~"only screen and (min-width: @{screen-size-5})";
-@breakpoint-6: ~"only screen and (min-width: @{screen-size-6})";
-
 @font-size-giant-3: @font-size-46;
 @font-size-giant-2: @font-size-36;
 @font-size-giant-1: @font-size-30;

package/gh.browser.json

@@ -2,7 +2,6 @@
     "dependencies": [
         "less-import: ./src/less/mixins/public/utility-mixins.less",
         "less-import: ./src/less/mixins/private/icon-mixins.less",
-        "less-import: ./src/less/mixins/private/program-badge-mixins.less",
         "less-import: ./src/less/mixins/public/typography-mixins.less",
         "less-import: ./src/less/gh/gh-mixins.less"
     ]

package/index.browser.json

@@ -4,11 +4,13 @@
     "require: ./badge.js",
     "require: ./breadcrumbs.js",
     "require: ./button.js",
+    "require: ./calendar.js",
     "require: ./carousel.js",
     "require: ./checkbox.js",
     "require: ./combobox.js",
     "require: ./confirm-dialog.js",
     "require: ./cta-button.js",
+    "require: ./date-textbox.js",
     "require: ./details.js",
     "require: ./drawer-dialog.js",
     "require: ./eek.js",
@@ -34,7 +36,6 @@
     "require: ./page-notice.js",
     "require: ./pagination.js",
     "require: ./panel-dialog.js",
-    "require: ./program-badge.js",
     "require: ./progress-bar.js",
     "require: ./progress-spinner.js",
     "require: ./progress-stepper.js",

package/index.css

@@ -2,11 +2,13 @@
 @import "./badge.css";
 @import "./breadcrumbs.css";
 @import "./button.css";
+@import "./calendar.css";
 @import "./carousel.css";
 @import "./checkbox.css";
 @import "./combobox.css";
 @import "./confirm-dialog.css";
 @import "./cta-button.css";
+@import "./date-textbox.css";
 @import "./details.css";
 @import "./drawer-dialog.css";
 @import "./eek.css";
@@ -32,7 +34,6 @@
 @import "./page-notice.css";
 @import "./pagination.css";
 @import "./panel-dialog.css";
-@import "./program-badge.css";
 @import "./progress-bar.css";
 @import "./progress-spinner.css";
 @import "./progress-stepper.css";

package/index.js

@@ -2,11 +2,13 @@ require('./alert-dialog.js');
 require('./badge.js');
 require('./breadcrumbs.js');
 require('./button.js');
+require('./calendar.js');
 require('./carousel.js');
 require('./checkbox.js');
 require('./combobox.js');
 require('./confirm-dialog.js');
 require('./cta-button.js');
+require('./date-textbox.js');
 require('./details.js');
 require('./drawer-dialog.js');
 require('./eek.js');
@@ -32,7 +34,6 @@ require('./page-grid.js');
 require('./page-notice.js');
 require('./pagination.js');
 require('./panel-dialog.js');
-require('./program-badge.js');
 require('./progress-bar.js');
 require('./progress-spinner.js');
 require('./progress-stepper.js');

package/index.mjs

@@ -2,11 +2,13 @@ import './alert-dialog.css';
 import './badge.css';
 import './breadcrumbs.css';
 import './button.css';
+import './calendar.css';
 import './carousel.css';
 import './checkbox.css';
 import './combobox.css';
 import './confirm-dialog.css';
 import './cta-button.css';
+import './date-textbox.css';
 import './details.css';
 import './drawer-dialog.css';
 import './eek.css';
@@ -32,7 +34,6 @@ import './page-grid.css';
 import './page-notice.css';
 import './pagination.css';
 import './panel-dialog.css';
-import './program-badge.css';
 import './progress-bar.css';
 import './progress-spinner.css';
 import './progress-stepper.css';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "15.5.0",
+    "version": "16.0.0-0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [

package/scripts/generate-images.js

@@ -13,6 +13,7 @@ const file = fs.readFileSync(configFilePath, 'utf8');
 const YAML = require('yaml');
 const config = YAML.parse(file);
 const { html2xhtml } = require('./util');
+const { query } = require('winston');
 const genText = 'This is a generated file, DO NOT EDIT';
 
 async function getFiles(dir) {
@@ -56,12 +57,16 @@ async function normalizeFiles(svgs) {
     svgFiles.map(async (filePath) => {
         const fileDir = path.parse(filePath).dir;
         const fileBase = path.parse(filePath).base;
+        const data = await fs.promises.readFile(filePath, 'utf8');
+        const svgJsDom = new JSDOM(data, { contentType: 'text/xml' });
+        const querySelector = svgJsDom.window.document.querySelector('svg');
+        if (querySelector.hasAttribute('height') || querySelector.hasAttribute('width')) {
+            querySelector.removeAttribute('height');
+            querySelector.removeAttribute('width');
+            await fs.promises.writeFile(filePath, html2xhtml(svgJsDom, true));
+        }
 
-        if (
-            !fileBase.startsWith('icon-') &&
-            !fileBase.startsWith('star-rating-') &&
-            !fileBase.startsWith('program-badge-')
-        ) {
+        if (!fileBase.startsWith('icon-') && !fileBase.startsWith('star-rating-')) {
             await prefixIcon(fileDir, fileBase);
         }
     });
@@ -95,6 +100,9 @@ class GenerateImages {
         const svgFragment = svgJsDom.window.document.querySelector('symbol');
         svgFragment.setAttribute('id', name);
         svgFragment.removeAttribute('xmlns');
+        svgFragment.removeAttribute('width');
+        svgFragment.removeAttribute('heightt');
+
         return svgFragment;
     }
 

package/scripts/generate-imports/config.json

@@ -21,12 +21,14 @@
     },
     "overrideFile": {},
     "addModules": {
+        "calendar": ["icon-button"],
         "drawer-dialog": ["icon-button"],
+        "date-textbox": ["calendar", "textbox"],
         "fullscreen-dialog": ["icon-button"],
         "infotip": ["icon-button"],
         "lightbox-dialog": ["icon-button"],
-        "listbox-button": ["expand-button"],
-        "menu-button": ["expand-button"],
+        "listbox-button": ["button"],
+        "menu-button": ["button"],
         "page-notice": ["button"],
         "pagination": ["icon-button"],
         "panel-dialog": ["icon-button"],

package/scripts/util.js

@@ -8,10 +8,10 @@ const fs = require('fs');
  *
  * @param {string} htmlString : html string to convert to xhtml
  */
-function html2xhtml(html) {
+function html2xhtml(html, skipHeader) {
     const bodyHtml = html.window.document.documentElement.outerHTML;
     const dom = parse(bodyHtml);
-    const xmlHeader = `<?xml version="1.0" encoding="utf-8"?>\n`;
+    const xmlHeader = skipHeader ? '' : `<?xml version="1.0" encoding="utf-8"?>\n`;
     const parsedString = `${xmlHeader}${serializeToString(
         dom.childNodes[0].childNodes[1].childNodes[0]
     )}\n`;

package/src/less/alert-dialog/alert-dialog.less

@@ -83,13 +83,13 @@
 }
 
 // In order to prevent the margins to meet the ege of the page at medium screen sizes
-@media (min-width: calc(@screen-size-3 + 1px)) and (max-width: @screen-size-4) {
+@media (min-width: calc(@_screen-size-MD + 1px)) and (max-width: @_screen-size-LG) {
     .alert-dialog__window {
         max-width: calc(88% - @spacing-400;);
     }
 }
 
-@media (min-width: calc(@screen-size-4 + 1px)) {
+@media (min-width: calc(@_screen-size-LG + 1px)) {
     .alert-dialog__window {
         max-width: @dialog-lightbox-max-width;
     }

package/src/less/breadcrumbs/breadcrumbs.less

@@ -34,8 +34,8 @@ nav.breadcrumbs > ul > li[hidden] {
 }
 
 nav.breadcrumbs > ul > li svg {
-    margin-left: 7px;
-    margin-right: 7px;
+    margin-left: 3px;
+    margin-right: 3px;
 }
 
 nav.breadcrumbs > ul > li > a {
@@ -106,8 +106,8 @@ nav.breadcrumbs .menu-button__menu {
     font-size: @font-size-14;
 }
 
-nav.breadcrumbs svg.icon--overflow-small {
-    transform: rotate(90deg);
+[dir="rtl"] nav.breadcrumbs svg.icon--chevron-right-12 {
+    transform: rotate(180deg);
 }
 
 @media (min-width: 601px) {

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

@@ -6,20 +6,20 @@ export const color = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Cell Phones, Smart Watches &amp; Accessories</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Smart Watch Accessories</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
@@ -35,20 +35,20 @@ export const fontSize = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Cell Phones, Smart Watches &amp; Accessories</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Smart Watch Accessories</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
@@ -65,20 +65,20 @@ export const RTL = () => `
         <ul>
             <li>
                 <button>ebay</button>
-                <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-breadcrumb"></use>
+                <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>
             <li>
                 <button>Cell Phones, Smart Watches &amp; Accessories</button>
-                <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-breadcrumb"></use>
+                <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>
             <li>
                 <button>Smart Watch Accessories</button>
-                <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-breadcrumb"></use>
+                <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>
             <li>

package/src/less/breadcrumbs/stories/button-overflow.stories.js

@@ -6,15 +6,15 @@ export const minimum = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <span class="fake-menu-button">
                 <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
-                    <svg aria-hidden="true" class="icon icon--overflow-small" focusable="false">
-                        <use href="#icon-overflow-small"></use>
+                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16" focusable="false">
+                        <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
 
@@ -31,8 +31,8 @@ export const minimum = () => `
                 </ul>
             </span>
 
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
@@ -48,15 +48,15 @@ export const collapsed = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <span class="fake-menu-button">
                 <button class="fake-menu-button__button icon-btn" aria-expanded="false" aria-haspopup="true" aria-label="eBay Menu"  type="button">
-                    <svg aria-hidden="true" class="icon icon--overflow-small" focusable="false">
-                        <use href="#icon-overflow-small"></use>
+                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16" focusable="false">
+                        <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
 
@@ -73,14 +73,14 @@ export const collapsed = () => `
                 </ul>
             </span>
 
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Smart Watch Band Long Band Text Type 2</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
@@ -96,15 +96,15 @@ export const expanded = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <span class="fake-menu-button">
                 <button class="fake-menu-button__button icon-btn" aria-expanded="true" aria-haspopup="true" aria-label="eBay Menu"  type="button">
-                    <svg aria-hidden="true" class="icon icon--overflow-small" focusable="false">
-                        <use href="#icon-overflow-small"></use>
+                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16" focusable="false">
+                        <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
                 <ul class="fake-menu-button__menu">
@@ -120,14 +120,14 @@ export const expanded = () => `
                 </ul>
             </span>
 
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Smart Watch Band Long Band Text Type 2</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>

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

@@ -6,20 +6,20 @@ export const currentLocation = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Cell Phones, Smart Watches &amp; Accessories</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Smart Watch Accessories</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
@@ -35,14 +35,14 @@ export const noCurrentLocation = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <button>Cell Phones, Smart Watches &amp; Accessories</button>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>

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

@@ -6,20 +6,20 @@ export const color = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
@@ -35,20 +35,20 @@ export const fontSize = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
             <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
-            <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                <use href="#icon-breadcrumb"></use>
+            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
         <li>
@@ -65,20 +65,20 @@ export const RTL = () => `
         <ul>
             <li>
                 <a href="https://www.ebay.com/">ebay</a>
-                <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-breadcrumb"></use>
+                <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>
             <li>
                 <a href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
-                <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-breadcrumb"></use>
+                <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>
             <li>
                 <a href="https://www.ebay.com/b/Smart-Watch-Accessories/182064/bn_16565905">Smart Watch Accessories</a>
-                <svg class="icon icon--breadcrumb" focusable="false" height="8" width="8" aria-hidden="true">
-                    <use href="#icon-breadcrumb"></use>
+                <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                    <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>
             <li>