npm - @ebay/skin - Versions diffs - 17.1.1 → 17.2.0-next.0 - Mend

@ebay/skin 17.1.1 → 17.2.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

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

@@ -6,14 +6,14 @@ export const minimum = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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-horizontal-16" focusable="false">
+                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
@@ -31,7 +31,7 @@ export const minimum = () => `
                 </ul>
             </span>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -48,14 +48,14 @@ export const collapsed = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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-horizontal-16" focusable="false">
+                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
@@ -73,13 +73,13 @@ export const collapsed = () => `
                 </ul>
             </span>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -96,14 +96,14 @@ export const expanded = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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-horizontal-16" focusable="false">
+                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
@@ -120,13 +120,13 @@ export const expanded = () => `
                 </ul>
             </span>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>

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

@@ -6,19 +6,19 @@ export const currentLocation = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -35,13 +35,13 @@ export const noCurrentLocation = () => `
     <ul>
         <li>
             <button>ebay</button>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>

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

@@ -6,19 +6,19 @@ export const color = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -35,19 +35,19 @@ export const fontSize = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -65,19 +65,19 @@ export const RTL = () => `
         <ul>
             <li>
                 <a href="https://www.ebay.com/">ebay</a>
-                <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--chevron-right-12" 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--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--chevron-right-12" 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--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+                <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                     <use href="#icon-chevron-right-12"></use>
                 </svg>
             </li>

package/src/less/breadcrumbs/stories/link-overflow.stories.js CHANGED Viewed

@@ -6,14 +6,14 @@ export const minimum = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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-horizontal-16" focusable="false">
+                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
@@ -34,7 +34,7 @@ export const minimum = () => `
                 </ul>
             </span>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -51,14 +51,14 @@ export const collapsed = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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-horizontal-16" focusable="false">
+                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
@@ -79,13 +79,13 @@ export const collapsed = () => `
                 </ul>
             </span>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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-Bands/182068/bn_16565906/Some-Random-Watch-Pand2">Smart Watch Band Long Band Text Type 2</a>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -102,14 +102,14 @@ export const expanded = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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-horizontal-16" focusable="false">
+                    <svg aria-hidden="true" class="icon icon--overflow-horizontal-16">
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
@@ -127,13 +127,13 @@ export const expanded = () => `
                 </ul>
             </span>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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-Bands/182068/bn_16565906/Some-Random-Watch-Pand1">Smart Watch Band Long Band Text Type 2</a>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>

package/src/less/breadcrumbs/stories/links.stories.js CHANGED Viewed

@@ -6,19 +6,19 @@ export const currentLocation = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>
@@ -35,13 +35,13 @@ export const noCurrentLocation = () => `
     <ul>
         <li>
             <a href="https://www.ebay.com/">ebay</a>
-            <svg class="icon icon--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" 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--chevron-right-12" focusable="false" height="8" width="8" aria-hidden="true">
+            <svg class="icon icon--chevron-right-12" height="8" width="8" aria-hidden="true">
                 <use href="#icon-chevron-right-12"></use>
             </svg>
         </li>

package/src/less/button/button.less CHANGED Viewed

@@ -286,7 +286,6 @@ a.fake-btn--secondary[aria-disabled="true"] {
 button.btn--tertiary,
 a.fake-btn--tertiary {
-    border-width: 2px;
     .border-color-token(btn-tertiary-border-color, color-stroke-default);
 }

package/src/less/button/stories/button/base.stories.js CHANGED Viewed

@@ -29,7 +29,7 @@ export const busy = () => `
 <button class="btn" aria-label="Busy">
     <span class="btn__cell">
         <span class="progress-spinner">
-            <svg class="icon icon--spinner-24" focusable="false" aria-hidden="true">
+            <svg class="icon icon--spinner-24" aria-hidden="true">
                 <use href="#icon-spinner-24"></use>
             </svg>
         </span>
@@ -41,7 +41,7 @@ export const formBusy = () => `
 <button class="btn btn--form" aria-label="Busy">
     <span class="btn__cell">
         <span class="progress-spinner">
-            <svg class="icon icon--spinner-24" focusable="false" aria-hidden="true">
+            <svg class="icon icon--spinner-24" aria-hidden="true">
                 <use href="#icon-spinner-24"></use>
             </svg>
         </span>

package/src/less/button/stories/button/borderless.stories.js CHANGED Viewed

@@ -3,7 +3,7 @@ export default { title: "Skin/Button/Borderless" };
 export const base = () => `<button class="btn btn--borderless">
     <span class="btn__cell">
         <span class="btn__text">Button</span>
-        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -13,7 +13,7 @@ export const disabled =
     () => `<button class="btn btn--borderless" disabled="true">
     <span class="btn__cell">
         <span class="btn__text">Button</span>
-        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -23,7 +23,7 @@ export const ariaDisabled =
     () => `<button class="btn btn--borderless" aria-disabled="true">
     <span class="btn__cell">
         <span class="btn__text">Button</span>
-        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>
@@ -31,7 +31,7 @@ export const ariaDisabled =
 export const empty = () => `<button class="btn btn--borderless" disabled="true">
     <span class="btn__cell">
-        <svg class="icon icon--chevron-down-12" focusable="false" height="8" width="8" aria-hidden="true">
+        <svg class="icon icon--chevron-down-12" height="8" width="8" aria-hidden="true">
             <use href="#icon-chevron-down-12"></use>
         </svg>
     </span>

package/src/less/button/stories/button/primary.stories.js CHANGED Viewed

@@ -34,7 +34,7 @@ export const busy = () => `
 <button class="btn btn--primary" aria-label="Busy">
     <span class="btn__cell">
         <span class="progress-spinner">
-            <svg class="icon icon--spinner-24" focusable="false" aria-hidden="true">
+            <svg class="icon icon--spinner-24" aria-hidden="true">
                 <use href="#icon-spinner-24"></use>
             </svg>
         </span>

package/src/less/button/stories/button/secondary.stories.js CHANGED Viewed

@@ -34,7 +34,7 @@ export const busy = () => `
 <button class="btn btn--secondary" aria-label="Busy">
     <span class="btn__cell">
         <span class="progress-spinner">
-            <svg class="icon icon--spinner-24" focusable="false" aria-hidden="true">
+            <svg class="icon icon--spinner-24" aria-hidden="true">
                 <use href="#icon-spinner-24"></use>
             </svg>
         </span>

package/src/less/button/stories/button/tertiary.stories.js CHANGED Viewed

@@ -35,7 +35,7 @@ export const busy = () => `
 <button class="btn btn--tertiary" aria-label="Busy">
     <span class="btn__cell">
         <span class="progress-spinner">
-            <svg class="icon icon--spinner-24" focusable="false" aria-hidden="true">
+            <svg class="icon icon--spinner-24" aria-hidden="true">
                 <use href="#icon-spinner-24"></use>
             </svg>
         </span>

package/src/less/button/stories/destructive-button/primary.stories.js CHANGED Viewed

@@ -28,7 +28,7 @@ export const disabledWithIcon = () => `
 export const busy = () => `
 <button class="btn btn--primary btn--destructive" aria-label="Busy">
     <span class="progress-spinner">
-        <svg aria-hidden="true" class="icon icon--spinner-24" focusable="false">
+        <svg aria-hidden="true" class="icon icon--spinner-24">
             <use href="#icon-spinner-24"></use>
         </svg>
     </span>

package/src/less/button/stories/destructive-button/secondary.stories.js CHANGED Viewed

@@ -28,7 +28,7 @@ export const disabledWithIcon = () => `
 export const busy = () => `
 <button class="btn btn--secondary btn--destructive" aria-label="Busy">
     <span class="progress-spinner">
-        <svg aria-hidden="true" class="icon icon--spinner-24" focusable="false">
+        <svg aria-hidden="true" class="icon icon--spinner-24">
             <use href="#icon-spinner-24"></use>
         </svg>
     </span>

package/src/less/button/stories/destructive-button/tertiary.stories.js CHANGED Viewed

@@ -28,7 +28,7 @@ export const disabledWithIcon = () => `
 export const busy = () => `
 <button class="btn btn--tertiary btn--destructive" aria-label="Busy">
     <span class="progress-spinner">
-        <svg aria-hidden="true" class="icon icon--spinner-24" focusable="false">
+        <svg aria-hidden="true" class="icon icon--spinner-24">
             <use href="#icon-spinner-24"></use>
         </svg>
     </span>