QOLDEV-546 Updating twitter icon in the footer and other storybook do…

…cs (#1315) * QOLDEV-546 Updating twitter icon in the footer and other storybook docs * QOLDEV-546 Adjusting top margin
qld-gov-au · Nov 15, 2023 · c0e1e20 · c0e1e20
1 parent 32579f5
commit c0e1e20
Show file tree

Hide file tree

Showing 13 changed files with 84 additions and 23 deletions.
diff --git a/src/assets/_project/_blocks/layout/content/options.html b/src/assets/_project/_blocks/layout/content/options.html
@@ -9,7 +9,12 @@
             </li>
             <li class="qg-share-list-item">
                 <a class="qg-share-link qg-share-twitter" href="#" title="Twitter" data-analytics-link-group="qg-sharing-twitter" aria-label="Share on Twitter">
-                    <span class="fa fa-twitter-square fa-2x qg-share-icon" aria-hidden="true"></span>
+                    <span class="x-twitter-square qg-share-icon" aria-hidden="true">
+                        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <rect width="20.8" height="20.2138" rx="4" fill="#4a4a4a"/>
+                            <path d="M14.0404 4.3999H15.9964L11.7243 9.28158L16.75 15.9253H12.8158L9.73224 11.897L6.20812 15.9253H4.24935L8.81796 10.7029L4 4.3999H8.0339L10.8183 8.08194L14.0404 4.3999ZM13.3533 14.7562H14.4366L7.44377 5.50812H6.28015L13.3533 14.7562Z" fill="white"/>
+                        </svg>
+                    </span>
                     <span class="title qg-visually-hidden">Twitter</span>
                 </a>
             </li>

diff --git a/src/assets/_project/_blocks/layout/footer/_site-footer.scss b/src/assets/_project/_blocks/layout/footer/_site-footer.scss
@@ -119,8 +119,14 @@
             &.facebook:before {
                 content: "\f082";
             }
-            &.twitter:before {
-                content: "\f081";
+            &.twitter {
+                a {
+                    padding-left: 7px;
+                }
+                svg {
+                    transform: scale(1.1);
+                    margin-top: -6px;
+                }
             }
         }
     }

diff --git a/src/assets/_project/_blocks/layout/footer/footer-contact-us.html b/src/assets/_project/_blocks/layout/footer/footer-contact-us.html
@@ -5,7 +5,12 @@ <h3>Contact us</h3>
   <ul>
     <li>For general enquiries, feedback, complaints and compliments: <p class="phone"><span>13 QGOV (<a href="tel:137468" class="d-inline" data-analytics-link-group="qg-contact-phone">13 74 68</a>)</span></p></li>
     <li class="facebook"><a href="https://www.facebook.com/QueenslandGovernment/" aria-label="Facebook /QueenslandGovernment" data-analytics-link-group="qg-contact-facebook">/QueenslandGovernment</a></li>
-    <li class="twitter"><a href="https://twitter.com/qldgov" aria-label="Twitter @QldGov" data-analytics-link-group="qg-contact-twitter">@QldGov</a></li>
+    <li class="twitter">
+      <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <rect width="17" height="17" rx="4" fill="white"/>
+        <path d="M11.3021 4H12.9194L9.38693 8.0365L13.5426 13.53H10.2895L7.7398 10.1991L4.82582 13.53H3.20618L6.98382 9.21172L3 4H6.3355L8.63782 7.04456L11.3021 4ZM10.734 12.5633H11.6297L5.84755 4.91635H4.88538L10.734 12.5633Z" fill="#005E85"/>
+      </svg>
+      <a href="https://twitter.com/qldgov" aria-label="Twitter @QldGov" data-analytics-link-group="qg-contact-twitter">@QldGov</a></li>
   </ul>
 
   <a class="btn btn-global-secondary" href="https://www.qld.gov.au/contact-us">Other contact options</a>

diff --git a/src/docs/examples/breadcrumb.html b/src/docs/examples/breadcrumb.html
@@ -570,9 +570,14 @@ <h2>
               </li>
 
 
-              <li class="qg-share-list-item">
+              <li class="qg-share-list-item twitter-list-item">
                 <a class="qg-share-link" href="https://twitter.com/share?url=https://www.qld.gov.au/health/conditions/health-alerts/coronavirus-lorem ipsum/protect-yourself-others/lorem ipsum" title="Twitter" data-analytics-link-group="qg-sharing-twitter" aria-label="Share on Twitter">
-                  <span class="fa fa-twitter-square fa-2x qg-share-icon" aria-hidden="true"></span>
+                  <span class="x-twitter-square qg-share-icon" aria-hidden="true">
+                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <rect width="20.8" height="20.2138" rx="4" fill="#4a4a4a"/>
+                      <path d="M14.0404 4.3999H15.9964L11.7243 9.28158L16.75 15.9253H12.8158L9.73224 11.897L6.20812 15.9253H4.24935L8.81796 10.7029L4 4.3999H8.0339L10.8183 8.08194L14.0404 4.3999ZM13.3533 14.7562H14.4366L7.44377 5.50812H6.28015L13.3533 14.7562Z" fill="white"/>
+                    </svg>
+                  </span>
                   <span class="title qg-visually-hidden">Twitter</span>
                 </a>
               </li>

diff --git a/src/docs/examples/cut-in.html b/src/docs/examples/cut-in.html
@@ -557,9 +557,14 @@ <h1>Releasing balloons</h1>
               </li>
 
 
-              <li class="qg-share-list-item">
+              <li class="qg-share-list-item twitter-list-item">
                 <a class="qg-share-link" href="https://twitter.com/share?url=https://www.qld.gov.au/environment/pollution/management/waste/litter-illegal-dumping/balloons" title="Twitter" data-analytics-link-group="qg-sharing-twitter" aria-label="Share on Twitter">
-                  <span class="fa fa-twitter-square fa-2x qg-share-icon" aria-hidden="true"></span>
+                  <span class="x-twitter-square qg-share-icon" aria-hidden="true">
+                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <rect width="20.8" height="20.2138" rx="4" fill="#4a4a4a"/>
+                      <path d="M14.0404 4.3999H15.9964L11.7243 9.28158L16.75 15.9253H12.8158L9.73224 11.897L6.20812 15.9253H4.24935L8.81796 10.7029L4 4.3999H8.0339L10.8183 8.08194L14.0404 4.3999ZM13.3533 14.7562H14.4366L7.44377 5.50812H6.28015L13.3533 14.7562Z" fill="white"/>
+                    </svg>
+                  </span>
                   <span class="title qg-visually-hidden">Twitter</span>
                 </a>
               </li>

diff --git a/src/docs/examples/form-new-styles.html b/src/docs/examples/form-new-styles.html
@@ -857,9 +857,14 @@ <h4 class="modal-title" id="modalTitle">What is 'after hours'?</h4>
               </li>
 
 
-              <li class="qg-share-list-item">
+              <li class="qg-share-list-item twitter-list-item">
                 <a class="qg-share-link" href="https://twitter.com/share?url=https://oss-uat.clients.squiz.net/dev/asif/form-with-new-styles" title="Twitter" data-analytics-link-group="qg-sharing-twitter" aria-label="Share on Twitter">
-                  <span class="fa fa-twitter-square fa-2x qg-share-icon" aria-hidden="true"></span>
+                  <span class="x-twitter-square qg-share-icon" aria-hidden="true">
+                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <rect width="20.8" height="20.2138" rx="4" fill="#4a4a4a"/>
+                      <path d="M14.0404 4.3999H15.9964L11.7243 9.28158L16.75 15.9253H12.8158L9.73224 11.897L6.20812 15.9253H4.24935L8.81796 10.7029L4 4.3999H8.0339L10.8183 8.08194L14.0404 4.3999ZM13.3533 14.7562H14.4366L7.44377 5.50812H6.28015L13.3533 14.7562Z" fill="white"/>
+                    </svg>
+                  </span>
                   <span class="title qg-visually-hidden">Twitter</span>
                 </a>
               </li>

diff --git a/src/docs/examples/formio.html b/src/docs/examples/formio.html
@@ -498,9 +498,14 @@ <h1>Example</h1>
               </li>
 
 
-              <li class="qg-share-list-item">
+              <li class="qg-share-list-item twitter-list-item">
                 <a class="qg-share-link" href="https://twitter.com/share?url=https://oss-uat.clients.squiz.net/dev/formio-widget/test" title="Twitter" data-analytics-link-group="qg-sharing-twitter" aria-label="Share on Twitter">
-                  <span class="fa fa-twitter-square fa-2x qg-share-icon" aria-hidden="true"></span>
+                  <span class="x-twitter-square qg-share-icon" aria-hidden="true">
+                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <rect width="20.8" height="20.2138" rx="4" fill="#4a4a4a"/>
+                      <path d="M14.0404 4.3999H15.9964L11.7243 9.28158L16.75 15.9253H12.8158L9.73224 11.897L6.20812 15.9253H4.24935L8.81796 10.7029L4 4.3999H8.0339L10.8183 8.08194L14.0404 4.3999ZM13.3533 14.7562H14.4366L7.44377 5.50812H6.28015L13.3533 14.7562Z" fill="white"/>
+                    </svg>
+                  </span>
                   <span class="title qg-visually-hidden">Twitter</span>
                 </a>
               </li>

diff --git a/src/docs/examples/guide-page.html b/src/docs/examples/guide-page.html
@@ -457,9 +457,14 @@ <h2>What's this?</h2><p><a href="./?a=180298">For government</a> (<i>For gov</i>
               </li>
 
 
-              <li class="qg-share-list-item">
+              <li class="qg-share-list-item twitter-list-item">
                 <a class="qg-share-link" href="https://twitter.com/share?url=https://www.qld.gov.au/transport/licensing/getting/learner/driving-tips-for-supervisors/planning-a-driving-lesson" title="Twitter" data-analytics-link-group="qg-sharing-twitter" aria-label="Share on Twitter">
-                  <span class="fa fa-twitter-square fa-2x qg-share-icon" aria-hidden="true"></span>
+                  <span class="x-twitter-square qg-share-icon" aria-hidden="true">
+                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <rect width="20.8" height="20.2138" rx="4" fill="#4a4a4a"/>
+                      <path d="M14.0404 4.3999H15.9964L11.7243 9.28158L16.75 15.9253H12.8158L9.73224 11.897L6.20812 15.9253H4.24935L8.81796 10.7029L4 4.3999H8.0339L10.8183 8.08194L14.0404 4.3999ZM13.3533 14.7562H14.4366L7.44377 5.50812H6.28015L13.3533 14.7562Z" fill="white"/>
+                    </svg>
+                  </span>
                   <span class="title qg-visually-hidden">Twitter</span>
                 </a>
               </li>

diff --git a/src/docs/examples/recaptcha2.html b/src/docs/examples/recaptcha2.html
@@ -888,9 +888,14 @@ <h4 class="modal-title" id="modalTitle">What is 'after hours'?</h4>
               </li>
 
 
-              <li class="qg-share-list-item">
+              <li class="qg-share-list-item twitter-list-item">
                 <a class="qg-share-link" href="https://twitter.com/share?url=https://www.qld.gov.au/contact-us/responsive-maintenance-request" title="Twitter" data-analytics-link-group="qg-sharing-twitter" aria-label="Share on Twitter">
-                  <span class="fa fa-twitter-square fa-2x qg-share-icon" aria-hidden="true"></span>
+                  <span class="x-twitter-square qg-share-icon" aria-hidden="true">
+                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <rect width="20.8" height="20.2138" rx="4" fill="#4a4a4a"/>
+                      <path d="M14.0404 4.3999H15.9964L11.7243 9.28158L16.75 15.9253H12.8158L9.73224 11.897L6.20812 15.9253H4.24935L8.81796 10.7029L4 4.3999H8.0339L10.8183 8.08194L14.0404 4.3999ZM13.3533 14.7562H14.4366L7.44377 5.50812H6.28015L13.3533 14.7562Z" fill="white"/>
+                    </svg>
+                  </span>
                   <span class="title qg-visually-hidden">Twitter</span>
                 </a>
               </li>

diff --git a/src/docs/examples/search-page.html b/src/docs/examples/search-page.html
@@ -672,9 +672,14 @@ <h2 class="qg-search-results__summary">Search results for  &lsquo;covid&rsquo;</
               </li>
 
 
-              <li class="qg-share-list-item">
+              <li class="qg-share-list-item twitter-list-item">
                 <a class="qg-share-link" href="https://twitter.com/share?url=https://www.qld.gov.au/dev/asif/search-page" title="Twitter" data-analytics-link-group="qg-sharing-twitter" aria-label="Share on Twitter">
-                  <span class="fa fa-twitter-square fa-2x qg-share-icon" aria-hidden="true"></span>
+                  <span class="x-twitter-square qg-share-icon" aria-hidden="true">
+                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <rect width="20.8" height="20.2138" rx="4" fill="#4a4a4a"/>
+                      <path d="M14.0404 4.3999H15.9964L11.7243 9.28158L16.75 15.9253H12.8158L9.73224 11.897L6.20812 15.9253H4.24935L8.81796 10.7029L4 4.3999H8.0339L10.8183 8.08194L14.0404 4.3999ZM13.3533 14.7562H14.4366L7.44377 5.50812H6.28015L13.3533 14.7562Z" fill="white"/>
+                    </svg>
+                  </span>
                   <span class="title qg-visually-hidden">Twitter</span>
                 </a>
               </li>

diff --git a/src/docs/examples/section-nav-example.html b/src/docs/examples/section-nav-example.html
@@ -532,9 +532,14 @@ <h3>Saving water at home</h3>
               </li>
 
 
-              <li class="qg-share-list-item">
+              <li class="qg-share-list-item twitter-list-item">
                 <a class="qg-share-link" href="https://twitter.com/share?url=https://www.qld.gov.au/environment/water/residence/use/home" title="Twitter" data-analytics-link-group="qg-sharing-twitter" aria-label="Share on Twitter">
-                  <span class="fa fa-twitter-square fa-2x qg-share-icon" aria-hidden="true"></span>
+                  <span class="x-twitter-square qg-share-icon" aria-hidden="true">
+                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <rect width="20.8" height="20.2138" rx="4" fill="#4a4a4a"/>
+                      <path d="M14.0404 4.3999H15.9964L11.7243 9.28158L16.75 15.9253H12.8158L9.73224 11.897L6.20812 15.9253H4.24935L8.81796 10.7029L4 4.3999H8.0339L10.8183 8.08194L14.0404 4.3999ZM13.3533 14.7562H14.4366L7.44377 5.50812H6.28015L13.3533 14.7562Z" fill="white"/>
+                    </svg>
+                  </span>
                   <span class="title qg-visually-hidden">Twitter</span>
                 </a>
               </li>

diff --git a/src/docs/examples/service-finder.html b/src/docs/examples/service-finder.html
@@ -827,9 +827,14 @@ <h2>Mobile apps</h2>
               </li>
 
 
-              <li class="qg-share-list-item">
+              <li class="qg-share-list-item twitter-list-item">
                 <a class="qg-share-link" href="https://twitter.com/share?url=https://oss-uat.clients.squiz.net/dev/asif/service-finder" title="Twitter" data-analytics-link-group="qg-sharing-twitter" aria-label="Share on Twitter">
-                  <span class="fa fa-twitter-square fa-2x qg-share-icon" aria-hidden="true"></span>
+                  <span class="x-twitter-square qg-share-icon" aria-hidden="true">
+                    <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <rect width="20.8" height="20.2138" rx="4" fill="#4a4a4a"/>
+                      <path d="M14.0404 4.3999H15.9964L11.7243 9.28158L16.75 15.9253H12.8158L9.73224 11.897L6.20812 15.9253H4.24935L8.81796 10.7029L4 4.3999H8.0339L10.8183 8.08194L14.0404 4.3999ZM13.3533 14.7562H14.4366L7.44377 5.50812H6.28015L13.3533 14.7562Z" fill="white"/>
+                    </svg>
+                  </span>
                   <span class="title qg-visually-hidden">Twitter</span>
                 </a>
               </li>

diff --git a/src/stories/components/SocialMedia/templates/Default.html b/src/stories/components/SocialMedia/templates/Default.html
@@ -20,7 +20,7 @@
           title="Twitter"
           data-analytics-link-group="qg-sharing-twitter"
           aria-label="Share on Twitter"
-          ><span class="qg-share-icon x-twitter-square" aria-hidden="true">
+          ><span class="x-twitter-square qg-share-icon" aria-hidden="true">
             <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
               <rect width="20.8" height="20.2138" rx="4" fill="#4a4a4a"/>
               <path d="M14.0404 4.3999H15.9964L11.7243 9.28158L16.75 15.9253H12.8158L9.73224 11.897L6.20812 15.9253H4.24935L8.81796 10.7029L4 4.3999H8.0339L10.8183 8.08194L14.0404 4.3999ZM13.3533 14.7562H14.4366L7.44377 5.50812H6.28015L13.3533 14.7562Z" fill="white"/>