Merge pull request #989 from bc-annavu/icon_font

Fix invalid icon HTML in AMP templates
bigcommerce · Apr 5, 2017 · f024a6c · f024a6c
2 parents a1b5f38 + d058085
commit f024a6c
Show file tree

Hide file tree

Showing 7 changed files with 70 additions and 8 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## Draft
 - Update bigcommerce.com footer link [#990](https://github.com/bigcommerce/cornerstone/pull/990)
+- Fix invalid icon HTML in AMP templates [#989](https://github.com/bigcommerce/cornerstone/pull/989)
 
 ## 1.6.3 (2017-03-28)
 - `stencil.conf.js` was refactored to support webpack2 builds [961](https://github.com/bigcommerce/cornerstone/pull/961)

diff --git a/templates/components/amp/common/alert-error.html b/templates/components/amp/common/alert-error.html
@@ -0,0 +1,8 @@
+<div class="alertBox alertBox--error">
+    <div class="alertBox-column alertBox-icon">
+        <span class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></span>
+    </div>
+    <p class="alertBox-column alertBox-message">
+        <span>{{{this}}}</span>
+    </p>
+</div>
diff --git a/templates/components/amp/common/alert-success.html b/templates/components/amp/common/alert-success.html
@@ -0,0 +1,8 @@
+<div class="alertBox alertBox--success">
+    <div class="alertBox-column alertBox-icon">
+        <span class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg></span>
+    </div>
+    <p class="alertBox-column alertBox-message">
+        <span>{{{this}}}</span>
+    </p>
+</div>
diff --git a/templates/components/amp/common/navigation-menu.html b/templates/components/amp/common/navigation-menu.html
@@ -20,7 +20,7 @@
         {{#if currency_selector.currencies.length '>' 1}}
             <li class="navPages-item">
                 <a class="navPages-action has-subMenu" href="#" data-collapsible="navPages-currency" aria-controls="navPages-currency" aria-expanded="false">
-                    {{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></svg></i>
+                    {{lang 'common.currency' code=currency_selector.active_currency_code}} <span class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-chevron-down"></use></svg></span>
                 </a>
                 <div class="navPage-subMenu" id="navPages-currency" aria-hidden="true" tabindex="-1">
                     <ul class="navPage-subMenu-list">
@@ -57,7 +57,7 @@
         {{#if customer}}
             <li class="navPages-item">
                 <a class="navPages-action has-subMenu" href="{{urls.account.index}}" data-collapsible="navPages-account">
-                    {{lang 'common.account'}} <i class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></i>
+                    {{lang 'common.account'}} <span class="icon navPages-action-moreIcon" aria-hidden="true"><svg><use xlink:href="#icon-chevron-down" /></svg></span>
                 </a>
                 <div class="navPage-subMenu" id="navPages-account" aria-hidden="true" tabindex="-1">
                     <ul class="navPage-subMenu-list">

diff --git a/templates/components/amp/common/paginator.html b/templates/components/amp/common/paginator.html
@@ -3,7 +3,7 @@
         {{#if previous}}
             <li class="pagination-item pagination-item--previous">
                 <a class="pagination-link" href="{{previous}}" {{#unless reload}}data-faceted-search-facet{{/unless}}>
-                    <i class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></i>
+                    <span class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg></span>
                     {{lang 'common.previous'}}
                 </a>
             </li>
@@ -24,7 +24,7 @@
             <li class="pagination-item pagination-item--next">
                 <a class="pagination-link" href="{{next}}" {{#unless reload}}data-faceted-search-facet{{/unless}}>
                     {{lang 'common.next'}}
-                    <i class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></i>
+                    <span class="icon" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg></span>
                 </a>
             </li>
         {{/if}}

diff --git a/templates/components/amp/css/product.html b/templates/components/amp/css/product.html
@@ -167,3 +167,48 @@
     content: "\A";
     white-space: pre;
 }
+
+.alertBox {
+    margin-bottom: .78571rem;
+    padding: .78571rem 1.14286rem;
+    background-color: #e8e8e8;
+    border-radius: 4px
+}
+
+.alertBox .icon {
+    height:1.42857rem;
+    width:1.42857rem
+}
+
+.alertBox--success {
+    background-color:#d5ffd8;
+    border-color:#d5ffd8;
+}
+
+.alertBox--success svg {
+    fill:#69d66f
+}
+
+.alertBox--error{
+    background-color:#fdd;
+    border-color:#fdd
+}
+
+.alertBox--error svg {
+    fill:#ff7d7d
+}
+
+.alertBox-column{
+    display:table-cell;
+    vertical-align:middle
+}
+
+.alertBox-icon{
+    text-align: center;
+    padding-right: 1.14286rem
+}
+
+.alertBox-message {
+    margin: 0;
+    width: 100%
+}
diff --git a/templates/components/amp/products/product-view.html b/templates/components/amp/products/product-view.html
@@ -1,10 +1,10 @@
 <div class="productView">
     {{#each product.reviews.messages}}
         {{#if error}}
-            {{>components/common/alert-error error}}
+            {{>components/amp/common/alert-error error}}
         {{/if}}
         {{#if success}}
-            {{>components/common/alert-success success}}
+            {{>components/amp/common/alert-success success}}
         {{/if}}
     {{/each}}
 
@@ -43,9 +43,9 @@
         {{/or}}
         {{#if product.out_of_stock}}
             {{#if product.out_of_stock_message}}
-                {{>components/common/alert-error product.out_of_stock_message}}
+                {{>components/amp/common/alert-error product.out_of_stock_message}}
             {{else}}
-                {{>components/common/alert-error (lang 'products.sold_out')}}
+                {{>components/amp/common/alert-error (lang 'products.sold_out')}}
             {{/if}}
         {{/if}}
     </div>