chore: renamed deprecated icons and added set-position to all elements

Author: agliga

src/routes/_index/component/icon-button/+page.marko

@@ -54,17 +54,17 @@
     <highlight-code type="html" >
 <button class="icon-btn icon-btn--large" type="button" aria-label="Save">
     <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
-        <use href="icons.svg#icon-save-24"></use>
+        <use href="icons.svg#icon-heart-24"></use>
     </svg>
 </button>
 <button class="icon-btn" type="button" aria-label="Save">
     <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
-        <use href="icons.svg#icon-save-24"></use>
+        <use href="icons.svg#icon-heart-24"></use>
     </svg>
 </button>
 <button class="icon-btn icon-btn--small" type="button" aria-label="Save">
     <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
-        <use href="icons.svg#icon-save-24"></use>
+        <use href="icons.svg#icon-heart-24"></use>
     </svg>
 </button>
     </highlight-code>
@@ -122,7 +122,7 @@
     <highlight-code type="html" >
 <button aria-label="Watchlist (4 notifications)" class="icon-btn icon-btn--badged" type="button">
     <svg class="icon icon--24" width="24" height="24" aria-hidden="true">
-        <use href="#icon-save-24"></use>
+        <use href="#icon-heart-24"></use>
     </svg>
     <span aria-hidden="true" class="badge">4</span>
 </button>
@@ -160,17 +160,17 @@
     <highlight-code type="html" >
 <button class="icon-btn icon-btn--large icon-btn--primary" type="button" aria-label="Save">
     <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
-        <use href="#icon-save-24"></use>
+        <use href="#icon-heart-24"></use>
     </svg>
 </button>
 <button class="icon-btn icon-btn--primary" type="button" aria-label="Save">
     <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
-        <use href="#icon-save-20"></use>
+        <use href="#icon-heart-20"></use>
     </svg>
 </button>
 <button class="icon-btn icon-btn--small icon-btn--primary" type="button" aria-label="Save">
     <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
-        <use href="#icon-save-16"></use>
+        <use href="#icon-heart-16"></use>
     </svg>
 </button>
     </highlight-code>
@@ -201,17 +201,17 @@
     <highlight-code type="html" >
 <button class="icon-btn icon-btn--large icon-btn--secondary" type="button" aria-label="Save">
     <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
-        <use href="#icon-save-24"></use>
+        <use href="#icon-heart-24"></use>
     </svg>
 </button>
 <button class="icon-btn icon-btn--secondary" type="button" aria-label="Save">
     <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
-        <use href="#icon-save-20"></use>
+        <use href="#icon-heart-20"></use>
     </svg>
 </button>
 <button class="icon-btn icon-btn--small icon-btn--secondary" type="button" aria-label="Save">
     <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
-        <use href="#icon-save-16"></use>
+        <use href="#icon-heart-16"></use>
     </svg>
 </button>
     </highlight-code>
@@ -242,17 +242,17 @@
     <highlight-code type="html" >
 <button class="icon-btn icon-btn--large icon-btn--tertiary" type="button" aria-label="Save">
     <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
-        <use href="#icon-save-24"></use>
+        <use href="#icon-heart-24"></use>
     </svg>
 </button>
 <button class="icon-btn icon-btn--tertiary" type="button" aria-label="Save">
     <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
-        <use href="#icon-save-20"></use>
+        <use href="#icon-heart-20"></use>
     </svg>
 </button>
 <button class="icon-btn icon-btn--small icon-btn--tertiary" type="button" aria-label="Save">
     <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
-        <use href="#icon-save-16"></use>
+        <use href="#icon-heart-16"></use>
     </svg>
 </button>
     </highlight-code>
@@ -337,17 +337,17 @@
     <highlight-code type="html" >
 <a aria-label="loading" class="icon-link icon-link--large icon-link--primary" href="https://www.ebay.com">
     <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
-        <use href="#icon-save-24"></use>
+        <use href="#icon-heart-24"></use>
     </svg>
 </a>
 <a aria-label="loading" class="icon-link icon-link--primary" href="https://www.ebay.com">
     <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
-        <use href="#icon-save-20"></use>
+        <use href="#icon-heart-20"></use>
     </svg>
 </a>
 <a aria-label="loading" class="icon-link icon-link--small icon-link--primary" href="https://www.ebay.com">
     <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
-        <use href="#icon-save-16"></use>
+        <use href="#icon-heart-16"></use>
     </svg>
 </a>
     </highlight-code>

src/routes/_index/component/section-title/+page.marko

@@ -140,7 +140,7 @@
         <span class="infotip">
             <button class="icon-btn" type="button" aria-expanded="false" aria-label="Help">
                 <svg aria-hidden="true" class="icon icon--16" width="16" height="14">
-                    <use href="#icon-save-16"></use>
+                    <use href="#icon-heart-16"></use>
                 </svg>
             </button>
         </span>

src/routes/_index/component/toggle-button/+page.marko

@@ -240,7 +240,7 @@ import tbPic from "/src/routes/static/img/tb-profile-pic.jpg";
 <button type="button toggle-button--list-layout" class="toggle-button" aria-pressed="false">
     <span class="toggle-button__icon">
         <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
-            <use href="static/icons.svg#icon-on-the-way-16"></use>
+            <use href="static/icons.svg#icon-truck-shipped-16"></use>
         </svg>
     </span>
     <span class="toggle-button__content">

src/sass/breadcrumbs/stories/button-overflow.stories.js

@@ -18,7 +18,7 @@ export const minimum = () => `
                     </svg>
                 </button>
 
-                <ul class="fake-menu-button__menu">
+                <ul class="fake-menu-button__menu fake-menu-button__menu--set-position">
                     <li>
                         <a class="fake-menu-button__item" href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
                     </li>
@@ -60,7 +60,7 @@ export const collapsed = () => `
                     </svg>
                 </button>
 
-                <ul class="fake-menu-button__menu">
+                <ul class="fake-menu-button__menu fake-menu-button__menu--set-position">
                     <li>
                         <a class="fake-menu-button__item" href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
                     </li>
@@ -107,7 +107,7 @@ export const expanded = () => `
                         <use href="#icon-overflow-horizontal-16"></use>
                     </svg>
                 </button>
-                <ul class="fake-menu-button__menu">
+                <ul class="fake-menu-button__menu fake-menu-button__menu--set-position">
                     <li>
                         <a class="fake-menu-button__item" href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
                     </li>
@@ -155,7 +155,7 @@ export const textSpacing = () => `
                     </svg>
                 </button>
 
-                <ul class="fake-menu-button__menu">
+                <ul class="fake-menu-button__menu fake-menu-button__menu--set-position">
                     <li>
                         <a class="fake-menu-button__item" href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
                     </li>

src/sass/breadcrumbs/stories/link-overflow.stories.js

@@ -18,7 +18,7 @@ export const minimum = () => `
                     </svg>
                 </button>
 
-                <ul class="fake-menu-button__menu">
+                <ul class="fake-menu-button__menu fake-menu-button__menu--set-position">
 
                     <div role="menu" class="fake-menu-button__items">
                         <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
@@ -63,7 +63,7 @@ export const collapsed = () => `
                     </svg>
                 </button>
 
-                <ul class="fake-menu-button__menu">
+                <ul class="fake-menu-button__menu fake-menu-button__menu--set-position">
 
                     <div role="menu" class="fake-menu-button__items">
                         <div class="fake-menu-button__item" role="menuitem" tabindex="-1">
@@ -114,7 +114,7 @@ export const expanded = () => `
                     </svg>
                 </button>
 
-                <ul class="fake-menu-button__menu">
+                <ul class="fake-menu-button__menu fake-menu-button__menu--set-position">
                     <li>
                         <a class="fake-menu-button__item" href="https://www.ebay.com/rpp/cell-phone-pda">Cell Phones, Smart Watches &amp; Accessories</a>
                     </li>
@@ -162,7 +162,7 @@ export const textSpacing = () => `
                     </svg>
                 </button>
 
-                <ul class="fake-menu-button__menu">
+                <ul class="fake-menu-button__menu fake-menu-button__menu--set-position">
 
                     <div role="menu" class="fake-menu-button__items">
                         <div class="fake-menu-button__item" role="menuitem" tabindex="-1">

src/sass/chips-combobox/stories/rtl-chips-combobox.stories.js

@@ -8,7 +8,7 @@ export const empty = () => `
             <span class="combobox__control chips-combobox_combobox__control">
                 <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
             </span>
-            <div class="combobox__listbox">
+            <div class="combobox__listbox combobox__listbox--set-position">
                 <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
                     <div class="combobox__option" role="option">
                         <span>Soccer</span>
@@ -34,7 +34,7 @@ export const fluid = () => `
             <span class="combobox__control chips-combobox_combobox__control">
                 <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
             </span>
-            <div class="combobox__listbox">
+            <div class="combobox__listbox combobox__listbox--set-position">
                 <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
                     <div class="combobox__option" role="option">
                         <span>Soccer</span>
@@ -91,7 +91,7 @@ export const prefilled = () => `
             <span class="combobox__control chips-combobox_combobox__control">
                 <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
             </span>
-            <div class="combobox__listbox">
+            <div class="combobox__listbox combobox__listbox--set-position">
                 <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
                     <div class="combobox__option" role="option">
                         <span>Soccer</span>
@@ -268,7 +268,7 @@ export const manyChips = () => `
             <span class="combobox__control chips-combobox_combobox__control">
                 <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
             </span>
-            <div class="combobox__listbox">
+            <div class="combobox__listbox combobox__listbox--set-position">
                 <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
                     <div class="combobox__option" role="option">
                         <span>Soccer</span>
@@ -325,7 +325,7 @@ export const expanded = () => `
             <span class="combobox__control chips-combobox_combobox__control">
                 <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
             </span>
-            <div class="combobox__listbox">
+            <div class="combobox__listbox combobox__listbox--set-position">
                 <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
                     <div class="combobox__option" role="option">
                         <span>Soccer</span>
@@ -382,7 +382,7 @@ export const disabledState = () => `
             <span class="combobox__control chips-combobox_combobox__control">
                 <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" disabled />
             </span>
-            <div class="combobox__listbox">
+            <div class="combobox__listbox combobox__listbox--set-position">
                 <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
                     <div class="combobox__option" role="option">
                         <span>Soccer</span>
@@ -439,7 +439,7 @@ export const errorState = () => `
             <span class="combobox__control chips-combobox_combobox__control">
                 <input id="chips-combobox-1-input" role="combobox" type="text" placeholder="Add Sport" aria-haspopup="listbox" aria-owns="listbox-chips-combobox-1" />
             </span>
-            <div class="combobox__listbox">
+            <div class="combobox__listbox combobox__listbox--set-position">
                 <div id="listbox-chips-combobox-1" class="combobox__options" role="listbox">
                     <div class="combobox__option" role="option">
                         <span>Soccer</span>

src/sass/floating-label/stories/floating-label.stories.js

@@ -211,7 +211,7 @@ export const phoneInput = () => `
         </svg>
         </span>
     </button>
-    <div class="listbox-button__listbox">
+    <div class="listbox-button__listbox listbox-button__listbox--set-position">
         <div class="listbox-button__options" role="listbox">
         <div class="listbox-button__option" role="option">
             <span class="listbox-button__value">