feat: The phrases nNetwork, nTicket, nTrain and nBus now show the 'n'…

… as an SVG icon (#782)

* Added a new page for the n-icon

* Added scss and js for n-icon

* Updated mixin to now support correct scaling of n-icon

* Reworked js for n-icon logic.

* nIcons is now working and commented

* Removed n-icons test page

* fix typo in variable name

Co-authored-by: Catia Costa <34938764+catiarodriguescosta@users.noreply.github.com>
Co-authored-by: Gilad Grant <ggrant966@gmail.com>

src/wmnds/assets/sass/_mixins.scss

@@ -1,3 +1,14 @@
+// This is a helper which will spit out the correct height/width for any svgs within a heading tag
+// This is used to overwrite .wmnds-n-icon__svg class defaults in _n-icon.scss
+@mixin n-icon-styling($height-and-font-size: 1rem) {
+  $width-multiplier: 0.9995467185761957; // If we times the height by this value we got the correct width for the n-icon svg
+
+  .wmnds-n-icon__svg {
+    width: calc(#{$height-and-font-size * $width-multiplier});
+    height: $height-and-font-size;
+  }
+}
+
 // TYPE
 // This is to get the size of the font to be used,
 // and to scale the line heights based on the font size
@@ -6,43 +17,61 @@
 
   // Default (16px)
   @if $level == 0 {
-    font-size: 1rem;
+    $height-and-font-size: 1rem;
+    font-size: $height-and-font-size;
     line-height: 1.5rem;
+
+    @include n-icon-styling($height-and-font-size);
   }
   // Heading 1 (46px)
   @if $level == 1 {
+    $height-and-font-size: 2.875rem * $multiplier;
     margin-top: 3rem * $multiplier;
     margin-bottom: 2rem * $multiplier;
-    font-size: 2.875rem * $multiplier;
+    font-size: $height-and-font-size;
     line-height: 3rem * $multiplier;
+
+    @include n-icon-styling($height-and-font-size);
   }
   // Heading 2 (32px)
   @if $level == 2 {
+    $height-and-font-size: 2rem * $multiplier;
     margin-top: 3rem * $multiplier;
     margin-bottom: 1rem * $multiplier;
-    font-size: 2rem * $multiplier;
+    font-size: $height-and-font-size;
     line-height: 2.225rem * $multiplier;
+
+    @include n-icon-styling($height-and-font-size);
   }
   // Heading 3 (23px)
   @if $level == 3 {
+    $height-and-font-size: 1.4375rem * $multiplier;
     margin-top: 2rem * $multiplier;
     margin-bottom: 0.75rem * $multiplier;
-    font-size: 1.4375rem * $multiplier;
+    font-size: $height-and-font-size;
     line-height: 1.5rem * $multiplier;
+
+    @include n-icon-styling($height-and-font-size);
   }
   // Heading 4 (18px)
   @if $level == 4 {
+    $height-and-font-size: 1.125rem * $multiplier;
     margin-top: 1.5rem * $multiplier;
     margin-bottom: 0.5rem * $multiplier;
-    font-size: 1.125rem * $multiplier;
+    font-size: $height-and-font-size;
     line-height: 1.5rem * $multiplier;
+
+    @include n-icon-styling($height-and-font-size);
   }
   // Heading 5 (16px)
   @if $level == 5 {
+    $height-and-font-size: 1rem * $multiplier;
     margin-top: 1.5rem * $multiplier;
     margin-bottom: 0.5rem * $multiplier;
-    font-size: 1rem * $multiplier;
+    font-size: $height-and-font-size;
     line-height: 1.5rem * $multiplier;
+
+    @include n-icon-styling($height-and-font-size);
   }
 }
 

src/wmnds/components/_components.scss

@@ -13,6 +13,7 @@
 @import "in-text-step/in-text-step"; // In-text step
 @import "link/link"; // Link elements
 @import "loader/loader"; // Loader
+@import "icon/n-icon/n-icon"; // Styles for n-icon text replacement
 @import "message/message"; // Messages
 @import "phase-indicator/phase-indicator"; // Phase indicator
 @import "table/table"; // Table

src/wmnds/components/icon/n-icon/_example.js

@@ -0,0 +1,50 @@
+const nIcons = () => {
+  // Function to replace text with our icon
+  const replaceTextWithIcon = (textNode, phraseToReplace) => {
+    if (!textNode.includes(phraseToReplace)) return textNode; // If textNode doesn't include our matched text, then return
+
+    // Otherwise...
+    const textWithoutN = phraseToReplace.substring(1); // Chop the first character from our string (the 'n') as it will be replaced with an icon
+    // HTML/SVG of icon we will use
+    const svgIcon = `
+    <svg class="wmnds-n-icon__svg">
+      <title>N-Network icon</title>
+      <desc>A hexagon with the letter 'n' inside of it.</desc>
+      <use xlink:href="#wmnds-general-n-ticket" href="#wmnds-general-n-ticket"></use>
+    </svg>`;
+    // Then replace our found text with 'n' icon and text without 'n'
+    const modifiedTextNode = textNode.replace(
+      new RegExp(phraseToReplace, 'ig'),
+      `<span class="wmnds-n-icon">${svgIcon}${textWithoutN}</span>`
+    );
+
+    return modifiedTextNode; // Return modified textNode back
+  };
+
+  function replacePhraseInHTML(htmlEle, phrase) {
+    const phraseToReplace = phrase;
+    const insideHTMLTags = new RegExp('(<.+?>|&\\w+;)'); // Get items within HTML </> tags
+    const textNodes = htmlEle.split(insideHTMLTags).filter(Boolean); // Split on the HTML tags to avoid manipulating attributes etc.
+
+    // Loop through textNodes and any that match 'insideHTMLTags', return straight away
+    // Otherwise, that textNode is ready to be searched for our textToChange
+    const updatedDOM = textNodes
+      .map(DOMText =>
+        insideHTMLTags.test(DOMText) ? DOMText : replaceTextWithIcon(DOMText, phraseToReplace)
+      )
+      .join('');
+
+    return updatedDOM;
+  }
+
+  // START HERE
+  const bodyElement = document.querySelector('body');
+  const phrasesToReplace = ['nNetwork', 'nTicket', 'nTrain', 'nBus']; // These are the phrases we want to replace the first char with the 'n' icon SVG (they are not case sensitive - we match on upper and lowercase with regex 'i' on line 17)
+
+  // Loop through each phrase and update the DOM body innerHTML with the replaced phrase
+  phrasesToReplace.forEach(phraseToReplace => {
+    bodyElement.innerHTML = replacePhraseInHTML(bodyElement.innerHTML, phraseToReplace);
+  });
+};
+
+export default nIcons;

src/wmnds/components/icon/n-icon/_n-icon.scss

@@ -0,0 +1,15 @@
+$base-height: 1rem;
+$width-multiplier: 0.9995467185761957; // If we times the height by this value we got the correct width for the n-icon svg
+
+.wmnds-n-icon {
+  font-size: inherit;
+  line-height: inherit;
+
+  &__svg {
+    display: inline-block;
+    width: calc($base-height * #{$width-multiplier});
+    height: $base-height;
+    fill: currentColor;
+    vertical-align: revert;
+  }
+}

src/www/wmnds-website.js

@@ -9,6 +9,7 @@ import accordionsJS from '../wmnds/components/accordion/_example';
 import travelUpdatesWidgetJs from '../wmnds/patterns/travel-updates/_example';
 import searchFilterJs from '../wmnds/patterns/search/search-filter/_example';
 import feedbackLoopsJS from '../wmnds/patterns/feedback-loop/_example';
+import nIcons from '../wmnds/components/icon/n-icon/_example';
 
 import { componentExample, componentExampleIframe } from './_partials/component-example';
 
@@ -35,6 +36,7 @@ const icons = () => {
 window.addEventListener(
   'DOMContentLoaded',
   (polyfills,
+  nIcons(), // Make sure this runs first as it breaks event listeners via innerHTML method, TODO: Update this function so it focuses on classes rather than the whole DOM body
   icons(),
   aToZContentStyleGuide(),
   colorPalettes(),