fix(storefont): BCTHEME-34 refactor svg attributes (#2322)

bigcommerce · Feb 1, 2023 · 87b6d81 · cooladm1n · Feb 15, 2023 · 87b6d81
1 parent e400137
commit 87b6d81
Show file tree

Hide file tree

Showing 23 changed files with 47 additions and 46 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Draft
+- Remove xlink attributes on svg [#2322](https://github.com/bigcommerce/cornerstone/pull/2322)
 
 ## 6.8.0 (01-26-2023)
 - Add remote_api_scripts into cart/preview template to let GA3 snippet to fire the Product Added event, when clicking Add to cart button on Product detail page and rendering the response in popup. [#2281](https://github.com/bigcommerce/cornerstone/pull/2281)

diff --git a/templates/components/account/order-contents.html b/templates/components/account/order-contents.html
@@ -43,7 +43,7 @@ <h5 class="account-listShipping-title">{{lang 'account.orders.details.ship_to_mu
                             <span class="is-srOnly">{{lang 'account.orders.details.download_items'}}</span>
                             <span class="icon">
                                 <svg>
-                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-down"></use>
+                                    <use href="#icon-arrow-down"></use>
                                 </svg>
                             </span>
                         </a>

diff --git a/templates/components/account/payment-methods-list.html b/templates/components/account/payment-methods-list.html
@@ -54,7 +54,7 @@ <h4 class="paymentMethodsTitle">
                                     {{/if}}
                                     {{#if is_default}}
                                         <svg class="methodHeader-default">
-                                            <use xlink:href="#icon-star" />
+                                            <use href="#icon-star" />
                                         </svg>
                                     {{/if}}
                                 </div>

diff --git a/templates/components/cart/content.html b/templates/components/cart/content.html
@@ -106,7 +106,7 @@ <h2 class="cart-item-name">
                                     data-action="dec"
                             >
                                 <span class="is-srOnly">{{lang 'products.quantity_decrease' name=name}}</span>
-                                <i class="icon" aria-hidden="true"><svg><use xlink:href="#icon-keyboard-arrow-down" /></svg></i>
+                                <i class="icon" aria-hidden="true"><svg><use href="#icon-keyboard-arrow-down" /></svg></i>
                             </button>
                         {{/if}}
                         <input class="form-input form-input--incrementTotal cart-item-qty-input"
@@ -131,7 +131,7 @@ <h2 class="cart-item-name">
                                     data-action="inc"
                             >
                                 <span class="is-srOnly">{{lang 'products.quantity_increase' name=name}}</span>
-                                <i class="icon" aria-hidden="true"><svg><use xlink:href="#icon-keyboard-arrow-up" /></svg></i>
+                                <i class="icon" aria-hidden="true"><svg><use href="#icon-keyboard-arrow-up" /></svg></i>
                             </button>
                         {{/if}}
                     </div>
@@ -154,7 +154,7 @@ <h2 class="cart-item-name">
                                 data-confirm-delete="{{lang 'cart.confirm_delete'}}"
                                 aria-label="{{lang 'cart.remove_item' name=name}}"
                         >
-                            <svg><use xlink:href="#icon-close"></use></svg>
+                            <svg><use href="#icon-close"></use></svg>
                         </button>
                     {{/or}}
                 </td>

diff --git a/templates/components/common/currency-selector.html b/templates/components/common/currency-selector.html
@@ -10,7 +10,7 @@
             {{lang 'common.currency' code=currency_selector.active_currency_code}}
             <i class="icon" aria-hidden="true">
                 <svg>
-                    <use xlink:href="#icon-chevron-down" />
+                    <use href="#icon-chevron-down" />
                 </svg>
             </i>
         </a>

diff --git a/templates/components/common/navigation-dropdown.html b/templates/components/common/navigation-dropdown.html
@@ -7,7 +7,7 @@
             <li class="navPage-subMenu-item-child">
                 {{#if children}}
                     <a class="navPage-subMenu-action navPages-action navPages-action-depth-max has-subMenu{{#if is_active}} activePage{{/if}}" href="{{url}}" data-collapsible="navPages-{{id}}">
-                        {{name}}<i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
+                        {{name}}<i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use href="#icon-chevron-down" /></svg></i>
                     </a>
                     {{> components/common/navigation-dropdown}}
                 {{else}}

diff --git a/templates/components/common/navigation-list-alternate.html b/templates/components/common/navigation-list-alternate.html
@@ -6,7 +6,7 @@
     >
         {{name}}
         <i class="icon navPages-action-moreIcon" aria-hidden="true">
-            <svg><use xlink:href="#icon-chevron-down" /></svg>
+            <svg><use href="#icon-chevron-down" /></svg>
         </i>
     </a>
     {{> components/common/navigation-dropdown}}

diff --git a/templates/components/common/navigation-list.html b/templates/components/common/navigation-list.html
@@ -5,7 +5,7 @@
 >
     {{name}}
     <i class="icon navPages-action-moreIcon" aria-hidden="true">
-        <svg><use xlink:href="#icon-chevron-down" /></svg>
+        <svg><use href="#icon-chevron-down" /></svg>
     </i>
 </a>
 <div class="navPage-subMenu" id="navPages-{{id}}" aria-hidden="true" tabindex="-1">
@@ -33,7 +33,7 @@
                             data-collapsible-enabled-state="closed"
                         >
                             <i class="icon navPages-action-moreIcon" aria-hidden="true">
-                                <svg><use xlink:href="#icon-chevron-down" /></svg>
+                                <svg><use href="#icon-chevron-down" /></svg>
                             </i>
                         </span>
                     </a>

diff --git a/templates/components/common/navigation-menu.html b/templates/components/common/navigation-menu.html
@@ -39,7 +39,7 @@
                     {{lang 'common.currency' code=currency_selector.active_currency_code}}
                     <i class="icon navPages-action-moreIcon" aria-hidden="true">
                         <svg>
-                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use>
+                            <use href="#icon-chevron-down"></use>
                         </svg>
                     </i>
                 </a>
@@ -106,7 +106,7 @@
                 >
                     {{lang 'common.account'}}
                     <i class="icon navPages-action-moreIcon" aria-hidden="true">
-                        <svg><use xlink:href="#icon-chevron-down" /></svg>
+                        <svg><use href="#icon-chevron-down" /></svg>
                     </i>
                 </a>
                 <div class="navPage-subMenu" id="navPages-account" aria-hidden="true" tabindex="-1">

diff --git a/templates/components/common/paginator.html b/templates/components/common/paginator.html
@@ -9,7 +9,7 @@
                 >
                     <i class="icon" aria-hidden="true">
                         <svg>
-                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
+                            <use href="#icon-chevron-left"></use>
                         </svg>
                     </i>
                     {{lang 'common.previous'}}
@@ -42,7 +42,7 @@
                     {{lang 'common.next'}}
                     <i class="icon" aria-hidden="true">
                         <svg>
-                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
+                            <use href="#icon-chevron-right"></use>
                         </svg>
                     </i>
                 </a>

diff --git a/templates/components/common/payment-icons.html b/templates/components/common/payment-icons.html
@@ -2,28 +2,28 @@
     {{#or show_accept_amex show_accept_discover show_accept_mastercard show_accept_paypal show_accept_visa show_accept_amazonpay show_accept_googlepay show_accept_klarna}}
     <div class="footer-payment-icons">
         {{#if show_accept_amex}}
-        <svg class="footer-payment-icon"><use xlink:href="#icon-logo-american-express"></use></svg>
+        <svg class="footer-payment-icon"><use href="#icon-logo-american-express"></use></svg>
         {{/if}}
         {{#if show_accept_discover}}
-        <svg class="footer-payment-icon"><use xlink:href="#icon-logo-discover"></use></svg>
+        <svg class="footer-payment-icon"><use href="#icon-logo-discover"></use></svg>
         {{/if}}
         {{#if show_accept_mastercard}}
-        <svg class="footer-payment-icon"><use xlink:href="#icon-logo-mastercard"></use></svg>
+        <svg class="footer-payment-icon"><use href="#icon-logo-mastercard"></use></svg>
         {{/if}}
         {{#if show_accept_paypal}}
-        <svg class="footer-payment-icon"><use xlink:href="#icon-logo-paypal"></use></svg>
+        <svg class="footer-payment-icon"><use href="#icon-logo-paypal"></use></svg>
         {{/if}}
         {{#if show_accept_visa}}
-        <svg class="footer-payment-icon"><use xlink:href="#icon-logo-visa"></use></svg>
+        <svg class="footer-payment-icon"><use href="#icon-logo-visa"></use></svg>
         {{/if}}
         {{#if show_accept_amazonpay}}
-        <svg class="footer-payment-icon"><use xlink:href="#icon-logo-amazonpay"></use></svg>
+        <svg class="footer-payment-icon"><use href="#icon-logo-amazonpay"></use></svg>
         {{/if}}
         {{#if show_accept_googlepay}}
-        <svg class="footer-payment-icon"><use xlink:href="#icon-logo-googlepay"></use></svg>
+        <svg class="footer-payment-icon"><use href="#icon-logo-googlepay"></use></svg>
         {{/if}}
         {{#if show_accept_klarna}}
-        <svg class="footer-payment-icon"><use xlink:href="#icon-logo-klarna"></use></svg>
+        <svg class="footer-payment-icon"><use href="#icon-logo-klarna"></use></svg>
         {{/if}}
     </div>
     {{/or}}

diff --git a/templates/components/common/share.html b/templates/components/common/share.html
@@ -15,7 +15,7 @@
                     >
                         <span class="aria-description--hidden">{{{capitalize service}}}</span>
                         <svg>
-                            <use xlink:href="#icon-facebook"/>
+                            <use href="#icon-facebook"/>
                         </svg>
                     </a>
                     {{else if service '===' 'email'}}
@@ -28,7 +28,7 @@
                     >
                         <span class="aria-description--hidden">{{{capitalize service}}}</span>
                         <svg>
-                            <use xlink:href="#icon-envelope"/>
+                            <use href="#icon-envelope"/>
                         </svg>
                     </a>
                     {{else if service '===' 'print'}}
@@ -39,7 +39,7 @@
                     >
                         <span class="aria-description--hidden">{{{capitalize service}}}</span>
                         <svg>
-                            <use xlink:href="#icon-print"/>
+                            <use href="#icon-print"/>
                         </svg>
                     </a>
                     {{else if service '===' 'twitter'}}
@@ -52,7 +52,7 @@
                     >
                         <span class="aria-description--hidden">{{{capitalize service}}}</span>
                         <svg>
-                            <use xlink:href="#icon-twitter"/>
+                            <use href="#icon-twitter"/>
                         </svg>
                     </a>
                     {{else if service '===' 'linkedin'}}
@@ -65,7 +65,7 @@
                     >
                         <span class="aria-description--hidden">{{{capitalize service}}}</span>
                         <svg>
-                            <use xlink:href="#icon-linkedin"/>
+                            <use href="#icon-linkedin"/>
                         </svg>
                     </a>
                     {{else if service '===' 'pinterest'}}
@@ -78,7 +78,7 @@
                     >
                         <span class="aria-description--hidden">{{{capitalize service}}}</span>
                         <svg>
-                            <use xlink:href="#icon-pinterest"/>
+                            <use href="#icon-pinterest"/>
                         </svg>
                     </a>
                     {{/if}}

diff --git a/templates/components/common/small-paginator.html b/templates/components/common/small-paginator.html
@@ -5,7 +5,7 @@
                 <a class="pagination-link" href="{{previous}}" data-faceted-search-facet>
                     <i class="icon" aria-hidden="true">
                         <svg>
-                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-left"></use>
+                            <use href="#icon-chevron-left"></use>
                         </svg>
                     </i>
                     {{lang 'common.previous'}}
@@ -27,7 +27,7 @@
                     {{lang 'common.next'}}
                     <i class="icon" aria-hidden="true">
                         <svg>
-                            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-right"></use>
+                            <use href="#icon-chevron-right"></use>
                         </svg>
                     </i>
                 </a>

diff --git a/templates/components/common/social-links.html b/templates/components/common/social-links.html
@@ -10,7 +10,7 @@
                 >
                     <span class="aria-description--hidden">{{{capitalize display_name}}}</span>
                     <svg>
-                        <use xlink:href="#icon-{{display_name}}"/>
+                        <use href="#icon-{{display_name}}"/>
                     </svg>
                 </a>
             </li>

diff --git a/templates/components/common/wishlist-dropdown.html b/templates/components/common/wishlist-dropdown.html
@@ -8,7 +8,7 @@
         <span>{{lang 'account.wishlists.add_item'}}</span>
         <i aria-hidden="true" class="icon">
             <svg>
-                <use xlink:href="#icon-chevron-down" />
+                <use href="#icon-chevron-down" />
             </svg>
         </i>
     </a>

diff --git a/templates/components/faceted-search/faceted-search-navigation.html b/templates/components/faceted-search/faceted-search-navigation.html
@@ -10,10 +10,10 @@
 
         <span>
             <svg class="icon accordion-indicator toggleLink-text toggleLink-text--off">
-                <use xlink:href="#icon-add" />
+                <use href="#icon-add" />
             </svg>
             <svg class="icon accordion-indicator toggleLink-text toggleLink-text--on">
-                <use xlink:href="#icon-remove" />
+                <use href="#icon-remove" />
             </svg>
         </span>
     </button>

diff --git a/templates/components/faceted-search/facets/multi.html b/templates/components/faceted-search/facets/multi.html
@@ -18,7 +18,7 @@
 
                         <span class="navList-action-close" aria-hidden="true">
                             <svg class="icon">
-                                <use xlink:href="#icon-close"/>
+                                <use href="#icon-close"/>
                             </svg>
                         </span>
                     </a>

diff --git a/templates/components/faceted-search/index.html b/templates/components/faceted-search/index.html
@@ -15,15 +15,15 @@
                 {{lang 'search.faceted.hide-filters'}}
 
                 <i class="icon" aria-hidden="true">
-                    <svg><use xlink:href="#icon-keyboard-arrow-up"/></svg>
+                    <svg><use href="#icon-keyboard-arrow-up"/></svg>
                 </i>
             </span>
 
             <span class="toggleLink-text toggleLink-text--off">
                 {{lang 'search.faceted.show-filters'}}
 
                 <i class="icon" aria-hidden="true">
-                    <svg><use xlink:href="#icon-keyboard-arrow-down"/></svg>
+                    <svg><use href="#icon-keyboard-arrow-down"/></svg>
                 </i>
             </span>
         </span>

diff --git a/templates/components/faceted-search/selected-facets.html b/templates/components/faceted-search/selected-facets.html
@@ -19,7 +19,7 @@ <h2 class="sidebarBlock-heading">
                         {{/if}}
 
                         <svg class="icon">
-                            <use xlink:href="#icon-close" />
+                            <use href="#icon-close" />
                         </svg>
                     </a>
                 </li>

diff --git a/templates/components/products/add-to-cart.html b/templates/components/products/add-to-cart.html
@@ -1,5 +1,5 @@
 <div id="add-to-cart-wrapper" class="add-to-cart-wrapper" {{#unless product.can_purchase}}style="display: none"{{/unless}}>
-    {{#if product.show_quantity_input}}
+    {{#if theme_settings.show_product_quantity_box}}
         {{inject 'productQuantityErrorMessage'  (lang 'products.quantity_error_message')}}
         <div class="form-field form-field--increments">
             <label class="form-label form-label--alternate"
@@ -9,7 +9,7 @@
                         <span class="is-srOnly">{{lang 'products.quantity_decrease' name=product.title}}</span>
                         <i class="icon" aria-hidden="true">
                             <svg>
-                                <use xlink:href="#icon-keyboard-arrow-down"/>
+                                <use href="#icon-keyboard-arrow-down"/>
                             </svg>
                         </i>
                     </button>
@@ -27,7 +27,7 @@
                         <span class="is-srOnly">{{lang 'products.quantity_increase' name=product.title}}</span>
                         <i class="icon" aria-hidden="true">
                             <svg>
-                                <use xlink:href="#icon-keyboard-arrow-up"/>
+                                <use href="#icon-keyboard-arrow-up"/>
                             </svg>
                         </i>
                     </button>

diff --git a/templates/components/products/ratings.html b/templates/components/products/ratings.html
@@ -9,13 +9,13 @@
         {{#if ../this.rating '>=' $index}}
             <span class="icon icon--ratingFull">
                 <svg>
-                    <use xlink:href="#icon-star" />
+                    <use href="#icon-star" />
                 </svg>
             </span>
         {{else}}
             <span class="icon icon--ratingEmpty">
                 <svg>
-                    <use xlink:href="#icon-star" />
+                    <use href="#icon-star" />
                 </svg>
             </span>
         {{/if}}

diff --git a/templates/pages/account/add-payment-method.html b/templates/pages/account/add-payment-method.html
@@ -65,7 +65,7 @@ <h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.payment_me
                             <div class="paymentMethodForm-inputs">
                                 {{> components/common/forms/text id="credit_card_number" name="credit_card_number" label=(lang 'account.payment_methods.credit_card_number')}}
                                 <svg class="paymentMethodForm-inputs-icon icon">
-                                    <use xlink:href="#icon-lock" />
+                                    <use href="#icon-lock" />
                                 </svg>
                             </div>
                             <div class="paymentMethodForm-inputs">
@@ -79,7 +79,7 @@ <h3 class="paymentMethodForm-heading">{{lang 'account.payment_methods.payment_me
                             <div class="paymentMethodForm-inputs">
                                 {{> components/common/forms/text id="cvv" name="cvv" label=(lang 'account.payment_methods.cvv')}}
                                 <svg class="paymentMethodForm-inputs-icon icon">
-                                    <use xlink:href="#icon-lock" />
+                                    <use href="#icon-lock" />
                                 </svg>
                             </div>
                         </div>

diff --git a/templates/pages/compare.html b/templates/pages/compare.html
@@ -26,7 +26,7 @@ <h1 class="page-heading">{{lang 'compare.header' products=comparisons.length}}</
                             </a>
                             <a class="compareTable-removeProduct" data-comparison-remove href="{{#if remove_url}}{{remove_url}}{{else}}#{{/if}}">
                                 <svg class="icon">
-                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-close"></use>
+                                    <use href="#icon-close"></use>
                                 </svg>
                             </a>
                         </figure>
-Original file line number
+Diff line change
@@ Expand Up / @@ -10,7 +10,7 @@ @@
                     >
                         <span class="aria-description--hidden">{{{capitalize display_name}}}</span>
                         <svg>
-                            <use xlink:href="#icon-{{display_name}}"/>
+                            <use href="#icon-{{display_name}}"/>
                         </svg>
                     </a>
                 </li>
@@ Expand Down @@