Updated wins.js so Wins page uses icon-github.svg (#8379)

* Replaced the current github icon used within wins card template to the github icon with file type of svg.

* Removed the line of code which set the srouce of the github icon div to the github icon saved within assets: /asstes/images/wins-page/icon-github-small.svg. Also Removed the literal definition of GITHUB_ICON where the path to this icon svg which is being replaced. Modified line where the alt property was defined for the img which used to store the svg. To comply with WCAG, we instead add the description to the aria-label using the setAttribute method.

* Added styling for github-icon class and the nested svg to match the appearance of linkedin-icon class elements. Because the github-icon svg is rendered inline, the viewBox inherits a larger sizing from the source file than the Linkedin icon. Inspecting the linked-in image revealed a base size of 32px x 32px. To replicate this sizing, we set github-icon div width and height to 32px by 32px and made a rule for the svg to fill the container width and height by 100%.

Author: santi-jose

_includes/wins-page/wins-card-template.html

@@ -7,7 +7,11 @@
           <span class="wins-card-name"> </span>
           <span class="wins-card-icons">
             <a target="_blank" class="wins-card-linkedin-icon"><img class="linkedin-icon" alt="" /></a>
-            <a target="_blank" class="wins-card-github-icon"><img class="github-icon" alt="" /></a>
+            <a target="_blank" class="wins-card-github-icon" style="color:black">
+              <div role="img" class="github-icon">
+                {% include svg/icon-github.svg %}
+              </div>
+            </a>
           </span>
         </div>
         <div class="project-inner wins-card-team"></div>

_sass/components/_wins-page.scss

@@ -280,6 +280,17 @@
     display: flex;
 }
 
+.github-icon{
+    width: 32px;
+    height: 32px;
+    max-width: 100%;
+}
+
+.github-icon svg{
+    width: 100%;
+    height: 100%;
+}
+
 @media #{$bp-below-desktop} {
     .wins-card {
         position: relative;

assets/js/wins.js

@@ -290,7 +290,6 @@
 	const cardTemplate = document.getElementById("wins-card-template");
 	const QUOTE_ICON_PATH = '/assets/images/wins-page/quote-icon.svg'
 	const AVATAR_DEFAULT_PATH = "/assets/images/wins-page/avatar-default.svg"
-	const GITHUB_ICON = '/assets/images/wins-page/icon-github-small.svg';
 	const LINKEDIN_ICON = '/assets/images/wins-page/icon-linkedin-small.svg'
 	const winsCardContainer  = document.querySelector('#responses');
 
@@ -330,8 +329,7 @@
 
 		if (card[github_url].length > 0){
 			cloneCardTemplate.querySelector('.wins-card-github-icon').href = card[github_url];
-			cloneCardTemplate.querySelector('.github-icon').src = GITHUB_ICON ;
-			cloneCardTemplate.querySelector('.github-icon').alt = `GitHub profile for ${card[name]}`;
+			cloneCardTemplate.querySelector('.github-icon').setAttribute('aria-label' ,`GitHub profile for ${card[name]}`);
 		} else {
 			cloneCardTemplate.querySelector('.wins-card-github-icon').setAttribute('hidden', 'true')
 		}