From 0389b31e82ab83df2bc6c01dd8ba90fa78084bc0 Mon Sep 17 00:00:00 2001
From: Alan <alan@salsadigital.com.au>
Date: Thu, 25 Jul 2019 10:34:51 +1000
Subject: [PATCH] [SDPA-2945] Prevent underline from showing after the icon on
 a text link. (#450)

* [SDPA-2945] Text Icon fixes.
* Use 'else' statement to avoid vue printing a <!-- --> comment (and inserting an underlined space).
* Move rpl-icon property definitions into a computed value to increase code readability.

* [SDPA-2945] Update snapshot.
---
 packages/components/Atoms/Icon/TextIcon.vue   |  16 ++-
 .../__snapshots__/storyshots.test.js.snap     | 100 ------------------
 2 files changed, 12 insertions(+), 104 deletions(-)

diff --git a/packages/components/Atoms/Icon/TextIcon.vue b/packages/components/Atoms/Icon/TextIcon.vue
index 9053ae916..a60d1acfc 100644
--- a/packages/components/Atoms/Icon/TextIcon.vue
+++ b/packages/components/Atoms/Icon/TextIcon.vue
@@ -1,13 +1,13 @@
 <template>
   <span v-if="text && symbol && placement === 'before'">
-    <span v-if="textWordCount > 1" class="rpl-text-icon__group"><rpl-icon :symbol="symbol" :color="color" :size="size" class="rpl-text-icon--before"/>{{ textFirstWord }}</span>
+    <span v-if="textWordCount > 1" class="rpl-text-icon__group"><rpl-icon v-bind="iconProps" />{{ textFirstWord }}</span>
     <span v-if="textWordCount > 1">{{ textWithoutFirstWord }}</span>
-    <span v-if="textWordCount <= 1" class="rpl-text-icon__group"><rpl-icon :symbol="symbol" :color="color" :size="size" class="rpl-text-icon--before"/>{{ text }}</span>
+    <span v-else class="rpl-text-icon__group"><rpl-icon v-bind="iconProps" />{{ text }}</span>
   </span>
   <span v-else-if="text && symbol && placement === 'after'">
     <span v-if="textWordCount > 1">{{ textWithoutLastWord }}</span>
-    <span v-if="textWordCount > 1" class="rpl-text-icon__group">{{ textLastWord }}<rpl-icon :symbol="symbol" :color="color" :size="size" class="rpl-text-icon--after" /></span>
-    <span v-if="textWordCount <= 1" class="rpl-text-icon__group">{{ text }}<rpl-icon :symbol="symbol" :color="color" :size="size" class="rpl-text-icon--after" /></span>
+    <span v-if="textWordCount > 1" class="rpl-text-icon__group">{{ textLastWord }}<rpl-icon v-bind="iconProps" /></span>
+    <span v-else class="rpl-text-icon__group">{{ text }}<rpl-icon v-bind="iconProps" /></span>
   </span>
   <span v-else-if="text">{{ text }}</span>
 </template>
@@ -42,6 +42,14 @@ export default {
     },
     textFirstWord: function () {
       return this.text.substr(0, this.text.indexOf(' '))
+    },
+    iconProps: function () {
+      return {
+        symbol: this.symbol,
+        color: this.color,
+        size: this.size,
+        class: `rpl-text-icon--${this.placement}`
+      }
     }
   }
 }
diff --git a/src/test/__snapshots__/storyshots.test.js.snap b/src/test/__snapshots__/storyshots.test.js.snap
index 3f93af8c4..ff49f2910 100644
--- a/src/test/__snapshots__/storyshots.test.js.snap
+++ b/src/test/__snapshots__/storyshots.test.js.snap
@@ -1302,8 +1302,6 @@ exports[`RippleStoryshots Atoms/Icon Text Icon 1`] = `
      Link
     <!---->
   </span>
-   
-  <!---->
 </span>
 `;
 
@@ -1440,8 +1438,6 @@ exports[`RippleStoryshots Atoms/Link Text Link 1`] = `
            Link
           <!---->
         </span>
-         
-        <!---->
       </span>
     </span>
   </span>
@@ -1508,8 +1504,6 @@ exports[`RippleStoryshots Molecules/Alert Alert 1`] = `
                more
               <!---->
             </span>
-             
-            <!---->
           </span>
         </span>
       </span>
@@ -2088,8 +2082,6 @@ exports[`RippleStoryshots Molecules/Card/Card Carousel Default 1`] = `
                        details
                       <!---->
                     </span>
-                     
-                    <!---->
                   </span>
                 </div>
               </a>
@@ -2188,8 +2180,6 @@ exports[`RippleStoryshots Molecules/Card/Card Carousel Default 1`] = `
                        calendar
                       <!---->
                     </span>
-                     
-                    <!---->
                   </span>
                 </div>
               </a>
@@ -2272,8 +2262,6 @@ exports[`RippleStoryshots Molecules/Card/Card Carousel Default 1`] = `
                        more
                       <!---->
                     </span>
-                     
-                    <!---->
                   </span>
                 </div>
               </a>
@@ -2357,8 +2345,6 @@ exports[`RippleStoryshots Molecules/Card/Card Carousel Default 1`] = `
                        details
                       <!---->
                     </span>
-                     
-                    <!---->
                   </span>
                 </div>
               </a>
@@ -2442,8 +2428,6 @@ exports[`RippleStoryshots Molecules/Card/Card Carousel Default 1`] = `
                        details
                       <!---->
                     </span>
-                     
-                    <!---->
                   </span>
                 </div>
               </a>
@@ -2542,8 +2526,6 @@ exports[`RippleStoryshots Molecules/Card/Card Carousel Default 1`] = `
                        calendar
                       <!---->
                     </span>
-                     
-                    <!---->
                   </span>
                 </div>
               </a>
@@ -2626,8 +2608,6 @@ exports[`RippleStoryshots Molecules/Card/Card Carousel Default 1`] = `
                        more
                       <!---->
                     </span>
-                     
-                    <!---->
                   </span>
                 </div>
               </a>
@@ -2726,8 +2706,6 @@ exports[`RippleStoryshots Molecules/Card/Card Carousel Default 1`] = `
                        calendar
                       <!---->
                     </span>
-                     
-                    <!---->
                   </span>
                 </div>
               </a>
@@ -2826,8 +2804,6 @@ exports[`RippleStoryshots Molecules/Card/Card Carousel Default 1`] = `
                        calendar
                       <!---->
                     </span>
-                     
-                    <!---->
                   </span>
                 </div>
               </a>
@@ -2905,8 +2881,6 @@ exports[`RippleStoryshots Molecules/Card/Card Content (base) Default 1`] = `
          more
         <!---->
       </span>
-       
-      <!---->
     </span>
   </div>
 </a>
@@ -3078,8 +3052,6 @@ exports[`RippleStoryshots Molecules/Card/Card Event Default 1`] = `
          details
         <!---->
       </span>
-       
-      <!---->
     </span>
   </div>
 </a>
@@ -3159,8 +3131,6 @@ exports[`RippleStoryshots Molecules/Card/Card Honour Roll Default 1`] = `
          profile
         <!---->
       </span>
-       
-      <!---->
     </span>
   </div>
 </a>
@@ -3231,8 +3201,6 @@ exports[`RippleStoryshots Molecules/Card/Card Image Navigation Default 1`] = `
            action
           <!---->
         </span>
-         
-        <!---->
       </span>
     </div>
   </div>
@@ -3326,8 +3294,6 @@ exports[`RippleStoryshots Molecules/Card/Card Keydates Default 1`] = `
          more
         <!---->
       </span>
-       
-      <!---->
     </span>
   </div>
 </a>
@@ -3373,8 +3339,6 @@ exports[`RippleStoryshots Molecules/Card/Card Navigation Default 1`] = `
          more
         <!---->
       </span>
-       
-      <!---->
     </span>
   </div>
 </a>
@@ -3503,8 +3467,6 @@ exports[`RippleStoryshots Molecules/Card/Card Promotion Default 1`] = `
          more
         <!---->
       </span>
-       
-      <!---->
     </span>
   </div>
 </a>
@@ -4528,8 +4490,6 @@ exports[`RippleStoryshots Molecules/Form Default 1`] = `
                         <span>
                           <!---->
                            
-                          <!---->
-                           
                           <span
                             class="rpl-text-icon__group"
                           >
@@ -5182,8 +5142,6 @@ exports[`RippleStoryshots Molecules/Form Default 1`] = `
                 <span>
                    search filters
                 </span>
-                 
-                <!---->
               </span>
             </button>
              
@@ -6497,8 +6455,6 @@ exports[`RippleStoryshots Molecules/RelatedLinks Default 1`] = `
                    content
                   <!---->
                 </span>
-                 
-                <!---->
               </span>
             </span>
           </span>
@@ -8515,8 +8471,6 @@ exports[`RippleStoryshots Molecules/WhatsNext Default 1`] = `
                    content
                   <!---->
                 </span>
-                 
-                <!---->
               </span>
             </span>
           </span>
@@ -9102,8 +9056,6 @@ exports[`RippleStoryshots Organisms/Event Latest Events 1`] = `
                details
               <!---->
             </span>
-             
-            <!---->
           </span>
         </div>
       </a>
@@ -9180,8 +9132,6 @@ exports[`RippleStoryshots Organisms/Event Latest Events 1`] = `
                details
               <!---->
             </span>
-             
-            <!---->
           </span>
         </div>
       </a>
@@ -9258,8 +9208,6 @@ exports[`RippleStoryshots Organisms/Event Latest Events 1`] = `
                details
               <!---->
             </span>
-             
-            <!---->
           </span>
         </div>
       </a>
@@ -9336,8 +9284,6 @@ exports[`RippleStoryshots Organisms/Event Latest Events 1`] = `
                details
               <!---->
             </span>
-             
-            <!---->
           </span>
         </div>
       </a>
@@ -9414,8 +9360,6 @@ exports[`RippleStoryshots Organisms/Event Latest Events 1`] = `
                details
               <!---->
             </span>
-             
-            <!---->
           </span>
         </div>
       </a>
@@ -9709,8 +9653,6 @@ exports[`RippleStoryshots Organisms/HeroBanner Default 1`] = `
                      link
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -9741,8 +9683,6 @@ exports[`RippleStoryshots Organisms/HeroBanner Default 1`] = `
                      link
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -9773,8 +9713,6 @@ exports[`RippleStoryshots Organisms/HeroBanner Default 1`] = `
                      here
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -9805,8 +9743,6 @@ exports[`RippleStoryshots Organisms/HeroBanner Default 1`] = `
                      link
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -9838,8 +9774,6 @@ exports[`RippleStoryshots Organisms/HeroBanner Default 1`] = `
                      more
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -9909,8 +9843,6 @@ exports[`RippleStoryshots Organisms/HeroBanner Intro Banner 1`] = `
                      visit
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -9933,8 +9865,6 @@ exports[`RippleStoryshots Organisms/HeroBanner Intro Banner 1`] = `
                 <span>
                   <!---->
                    
-                  <!---->
-                   
                   <span
                     class="rpl-text-icon__group"
                   >
@@ -9971,8 +9901,6 @@ exports[`RippleStoryshots Organisms/HeroBanner Intro Banner 1`] = `
                      Programs
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -10003,8 +9931,6 @@ exports[`RippleStoryshots Organisms/HeroBanner Intro Banner 1`] = `
                      Bookings
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -10090,8 +10016,6 @@ exports[`RippleStoryshots Organisms/HeroBanner with CTA 1`] = `
                      prepare
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -10751,8 +10675,6 @@ exports[`RippleStoryshots Organisms/Markup Markup/Link 1`] = `
                  link
                 <!---->
               </span>
-               
-              <!---->
             </span>
           </span>
         </span>
@@ -11085,8 +11007,6 @@ exports[`RippleStoryshots Organisms/News Featured News 1`] = `
                action
               <!---->
             </span>
-             
-            <!---->
           </span>
         </div>
       </div>
@@ -11161,8 +11081,6 @@ exports[`RippleStoryshots Organisms/News Featured News 1`] = `
                action
               <!---->
             </span>
-             
-            <!---->
           </span>
         </div>
       </div>
@@ -11227,8 +11145,6 @@ exports[`RippleStoryshots Organisms/News News Listing 1`] = `
                      Conference
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -11277,8 +11193,6 @@ exports[`RippleStoryshots Organisms/News News Listing 1`] = `
                      Out
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -11327,8 +11241,6 @@ exports[`RippleStoryshots Organisms/News News Listing 1`] = `
                      Triennial
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -11377,8 +11289,6 @@ exports[`RippleStoryshots Organisms/News News Listing 1`] = `
                      Fund
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -11427,8 +11337,6 @@ exports[`RippleStoryshots Organisms/News News Listing 1`] = `
                      Review
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -11477,8 +11385,6 @@ exports[`RippleStoryshots Organisms/News News Listing 1`] = `
                      Violence
                     <!---->
                   </span>
-                   
-                  <!---->
                 </span>
               </span>
             </span>
@@ -11775,8 +11681,6 @@ exports[`RippleStoryshots Organisms/Publication Publication Image 1`] = `
         <span>
            Figure 1.2 in full screen
         </span>
-         
-        <!---->
       </span>
     </button>
      
@@ -11794,8 +11698,6 @@ exports[`RippleStoryshots Organisms/Publication Publication Image 1`] = `
         <span>
            Figure 1.2 in table format
         </span>
-         
-        <!---->
       </span>
     </button>
      
@@ -11817,8 +11719,6 @@ exports[`RippleStoryshots Organisms/Publication Publication Image 1`] = `
         <span>
            Figure 1.2
         </span>
-         
-        <!---->
       </span>
     </a>
   </div>