@qhealth-design-system/core 1.16.4 → 1.17.0

package/src/components/code/html/component.hbs

@@ -1,7 +1,7 @@
 
 {{#with component.data.metadata}}
     {{#if code.value}}
-    <section class="qld__body">
+    <section class="qld__body" data-path="{{@root.site.metadata.coreSiteIcons.value}}">
         <div class="container-fluid">
         {{#ifCond code_snippet_type.value '==' 'singleline'}}
             {{#ifCond show_code.value '==' 'true'}}
@@ -16,10 +16,12 @@
                             <code class="qld__code-body">{{code.value}}</code>
                             <button class="qld__btn qld__code-copy--button" type="button">
                                 <div class="clean">
-                                    <i class="fa-light fa-copy"></i><span class="qld__code-copy--button-text">Copy</span>
+                                    <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#copy"></use></svg>
+                                    <span class="qld__code-copy--button-text">Copy</span>
                                 </div>
                                 <div class="dirty">
-                                    <i class="fa-solid fa-circle-check"></i><span class="qld__code-copy--button-text">Copied</span>
+                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#status-success"></use></svg>
+                                    <span class="qld__code-copy--button-text">Copied</span>
                                 </div>
                                 <div class="qld__code-tooltip">
                                     <span class="clean">Copy</span>
@@ -77,7 +79,10 @@
             {{#ifCond show_code.value '==' 'true'}}
             {{#ifCond show_more_button.value '==' 'true'}}
             <div class="qld__code-toggle">
-                <button class="qld__code-toggle-button" type="button">Show more<i class="fa-regular fa-chevron-up"></i></button>
+                <button class="qld__code-toggle-button" type="button">
+                    Show more
+                    <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#chevron-up"></use></svg>
+                </button>
             </div>
             {{/ifCond}}
             {{/ifCond}}
@@ -86,13 +91,22 @@
             <div class="qld__code-header">
                 <div class="qld__code-header-left">
                     {{#if github_link.value}}
-                        <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Github, opens in new tab">Github<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
+                        <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Github, opens in new tab">
+                            <span>Github</span>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#external-link"></use></svg>
+                        </a>
                     {{/if}}
                     {{#if figma_link.value}}
-                        <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Figma, opens in new tab">Figma<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
+                        <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Figma, opens in new tab">
+                            <span>Figma</span>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#external-link"></use></svg>
+                        </a>
                     {{/if}}
                     {{#if action_link_title.value}}
-                        <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit {{action_link_title.value}}, opens in new tab">{{action_link_title.value}}<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
+                        <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit {{action_link_title.value}}, opens in new tab">
+                            <span>{{action_link_title.value}}</span>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#external-link"></use></svg>
+                        </a>
                     {{/if}}
                 </div>
             </div>
@@ -100,27 +114,45 @@
             <div class="qld__code-header">
                 <div class="qld__code-header-left">
                     {{#if github_link.value}}
-                        <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Github, opens in new tab">Github<i class="fa-regular fa-arrow-up-right-from-square" ></i></a>
+                        <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Github, opens in new tab">
+                            <span>Github</span>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#external-link"></use></svg>
+                        </a>
                     {{/if}}
                     {{#if figma_link.value}}
-                        <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Figma, opens in new tab">Figma<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
+                        <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Figma, opens in new tab">
+                            <span>Figma</span>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#external-link"></use></svg>
+                        </a>
                     {{/if}}
                     {{#if action_link_title.value}}
-                        <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit {{action_link_title.value}}, opens in new tab">{{action_link_title.value}}<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
+                        <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit {{action_link_title.value}}, opens in new tab">
+                            <span>{{action_link_title.value}}</span>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#external-link"></use></svg>
+                        </a>
                     {{/if}}
                 </div>
             </div>
-            {{else if figma_link.value}}
+            {{else if action_link_title.value}}
             <div class="qld__code-header">
                 <div class="qld__code-header-left">
                     {{#if github_link.value}}
-                        <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Github, opens in new tab">Github<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
+                        <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Github, opens in new tab">
+                            <span>Github</span>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#external-link"></use></svg>
+                        </a>
                     {{/if}}
                     {{#if figma_link.value}}
-                        <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Figma, opens in new tab">Figma<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
+                        <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Figma, opens in new tab">
+                            <span>Figma</span>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#external-link"></use></svg>
+                        </a>
                     {{/if}}
                     {{#if action_link_title.value}}
-                        <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit {{action_link_title.value}}, opens in new tab">{{action_link_title.value}}<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
+                        <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit {{action_link_title.value}}, opens in new tab">
+                            <span>{{action_link_title.value}}</span>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#external-link"></use></svg>
+                        </a>
                     {{/if}}
                 </div>
             </div>
@@ -129,23 +161,34 @@
             <div class="qld__code-header">
                 <div class="qld__code-header-left">
                     {{#if github_link.value}}
-                        <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Github, opens in new tab">Github<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
+                        <a href="{{github_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Github, opens in new tab">
+                            <span>Github</span>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#external-link"></use></svg>
+                        </a>
                     {{/if}}
                     {{#if figma_link.value}}
-                        <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Figma, opens in new tab">Figma<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
+                        <a href="{{figma_link.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit Figma, opens in new tab">
+                            <span>Figma</span>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#external-link"></use></svg>
+                        </a>
                     {{/if}}
                     {{#if action_link_title.value}}
-                        <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit {{action_link_title.value}}, opens in new tab">{{action_link_title.value}}<i class="fa-regular fa-arrow-up-right-from-square"></i></a>
+                        <a href="{{action_link_address.value}}" class="qld__code-header-link" target="_blank" aria-label="Visit {{action_link_title.value}}, opens in new tab">
+                            <span>{{action_link_title.value}}</span>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#external-link"></use></svg>
+                        </a>
                     {{/if}}
                 </div>
                 {{#ifCond show_code.value '==' 'true'}}
                 <div class="qld__code-header-right">
                     <button class="qld__btn qld__code-copy--button" type="button">
                         <div class="clean">
-                            <i class="fa-light fa-copy"></i><span class="qld__code-copy--button-text">Copy</span>
+                            <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#copy"></use></svg>
+                            <span class="qld__code-copy--button-text">Copy</span>
                         </div>
                         <div class="dirty">
-                            <i class="fa-solid fa-circle-check"></i><span class="qld__code-copy--button-text">Copied</span>
+                            <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#status-success"></use></svg>
+                            <span class="qld__code-copy--button-text">Copied</span>
                         </div>
                         <div class="qld__code-tooltip">
                             <span class="clean">Copy</span>

package/src/components/code/js/global.js

@@ -4,23 +4,23 @@
      */
     var code = {};
 
-    code.init = function() {
-        const codes = document.querySelectorAll('code')
-        const inlinecodes = document.querySelectorAll('code:not(.qld__code-body)')
-        const copyButtons = document.querySelectorAll('.qld__code-copy--button')
-        const showToggle = document.querySelectorAll('.qld__code-toggle-button')
-        const colorButtons = document.querySelectorAll('.qld__code-preview-colours input[type=radio]')
+    code.init = function () {
+        const codes = document.querySelectorAll("code");
+        const inlinecodes = document.querySelectorAll("code:not(.qld__code-body)");
+        const copyButtons = document.querySelectorAll(".qld__code-copy--button");
+        const showToggle = document.querySelectorAll(".qld__code-toggle-button");
+        const colorButtons = document.querySelectorAll(".qld__code-preview-colours input[type=radio]");
 
         if (codes.length) {
-            codes.forEach(function(code) {
-                code.innerHTML = Prism.highlight(code.innerText, Prism.languages.html, 'html')
-            })
+            codes.forEach(function (code) {
+                code.innerHTML = Prism.highlight(code.innerText, Prism.languages.html, "html");
+            });
         }
 
         if (inlinecodes.length) {
-            inlinecodes.forEach(function(inlinecode){
+            inlinecodes.forEach(function (inlinecode) {
                 const codeWrap = document.createElement("div");
-                codeWrap.classList.add('qld__code--inline');
+                codeWrap.classList.add("qld__code--inline");
 
                 inlinecode.replaceWith(codeWrap);
                 codeWrap.appendChild(inlinecode);
@@ -28,133 +28,149 @@
                 const tooltip = document.createElement("span");
                 const tooltipText = document.createTextNode("Copy");
                 tooltip.appendChild(tooltipText);
-                tooltip.classList.add('qld__code-tooltip');
+                tooltip.classList.add("qld__code-tooltip");
                 inlinecode.after(tooltip);
-                inlinecode.setAttribute('tabindex', 0);
+                inlinecode.setAttribute("tabindex", 0);
 
-                inlinecode.addEventListener('click', function () {
+                inlinecode.addEventListener("click", function () {
                     copyButtonAction(this);
-                })
+                });
 
-                inlinecode.addEventListener("keypress", function(event) {
+                inlinecode.addEventListener("keypress", function (event) {
                     if (event.key === "Enter") {
                         event.preventDefault();
                         copyButtonAction(this);
                     }
                 });
-            })
+            });
         }
-        
+
         if (copyButtons.length) {
-            copyButtons.forEach(function(copyButton){
-                copyButton.addEventListener('click', function () {
+            copyButtons.forEach(function (copyButton) {
+                copyButton.addEventListener("click", function () {
                     copyButtonAction(this);
-                })
-            })
+                });
+            });
         }
 
         if (showToggle.length) {
-            showToggle.forEach(function(showToggleButton){
-                const parent = showToggleButton.closest('.qld__code');
-                const target = parent.querySelector('code')
-                target.style.height = '120px'
-
-                showToggleButton.addEventListener('click', function () {
-                    if (this.innerText.indexOf('more') > -1) {
-                        this.innerHTML = 'Show less<i class="fa-regular fa-chevron-up"></i>'
-                    } else {
-                        this.innerHTML = 'Show more<i class="fa-regular fa-chevron-up"></i>'
-                    }
+            showToggle.forEach(function (showToggleButton) {
+                const parent = showToggleButton.closest(".qld__code");
+                const grandParent = parent.closest("section");
+                const svgPath = grandParent.getAttribute("data-path");
+                const target = parent.querySelector("code");
+                target.style.height = "120px";
+
+                // Create <svg>
+                const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+                svg.setAttribute("class", "qld__icon qld__icon--sm");
+                svg.setAttribute("aria-hidden", "true");
+                svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+
+                // Create <use>
+                const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
+                use.setAttributeNS(null, "href", `${svgPath}#chevron-up`);
+
+                showToggleButton.addEventListener("click", function () {
+                    // Update button text
+                    showToggleButton.innerText = this.innerText.indexOf("more") > -1 ? "Show less" : "Show more";
+
+                    // Append <use> to <svg>
+                    svg.appendChild(use);
+                    showToggleButton.appendChild(svg);
 
                     QLD.animate.Toggle({
                         element: target,
-                        property: 'height',
+                        property: "height",
                         speed: 250,
                         closeSize: 120,
                         prefunction: function () {
-                            parent.classList.toggle('show_less')
-                        }
-                    })
-                })
-            })
+                            parent.classList.toggle("show_less");
+                        },
+                    });
+                });
+            });
         }
 
         if (colorButtons.length) {
-            colorButtons.forEach(function(colorButton){
-                colorButton.addEventListener('change', function () {
-                    const body = colorButton.closest('.qld__code').querySelector('.qld__code-preview-body')
-                    body.classList.remove('qld__body--light','qld__body--alt','qld__body--dark','qld__body--dark-alt')
-                    if (this.value){
-                        body.classList.add(this.value)
+            colorButtons.forEach(function (colorButton) {
+                colorButton.addEventListener("change", function () {
+                    const body = colorButton.closest(".qld__code").querySelector(".qld__code-preview-body");
+                    body.classList.remove("qld__body--light", "qld__body--alt", "qld__body--dark", "qld__body--dark-alt");
+                    if (this.value) {
+                        body.classList.add(this.value);
                     }
-                    const toggle = colorButton.closest('.qld__code').querySelector('.qld__code-toggle')
-                    if (typeof(toggle)!=='undefined'){
-                        toggle.classList.remove('qld__body--light','qld__body--alt','qld__body--dark','qld__body--dark-alt')
-                        if (this.value){
-                            toggle.classList.add(this.value)
+                    const toggle = colorButton.closest(".qld__code").querySelector(".qld__code-toggle");
+                    if (typeof toggle !== "undefined") {
+                        toggle.classList.remove("qld__body--light", "qld__body--alt", "qld__body--dark", "qld__body--dark-alt");
+                        if (this.value) {
+                            toggle.classList.add(this.value);
                         }
                     }
-                })
-            })
+                });
+            });
         }
-    }
+    };
 
     function copyButtonAction(button) {
-        if (button.classList.contains('qld__code-copy--button')){
-            const parent = button.closest('.qld__code');
-            copyTextToClipboard(parent.querySelector('code').innerText)
-            button.classList.add('copied');
+        if (button.classList.contains("qld__code-copy--button")) {
+            const parent = button.closest(".qld__code");
+            copyTextToClipboard(parent.querySelector("code").innerText);
+            button.classList.add("copied");
 
             setTimeout(() => {
-                button.classList.remove('copied')
-            }, "1500")
+                button.classList.remove("copied");
+            }, "1500");
         } else {
             copyTextToClipboard(button.innerText);
-            button.nextElementSibling.innerText = "Copied"
-            button.addEventListener('blur', function() {
-                button.nextElementSibling.innerText = "Copy"
+            button.nextElementSibling.innerText = "Copied";
+            button.addEventListener("blur", function () {
+                button.nextElementSibling.innerText = "Copy";
             });
         }
     }
 
     function fallbackCopyTextToClipboard(text) {
-        const textArea = document.createElement("textarea")
+        const textArea = document.createElement("textarea");
         textArea.value = text;
-        
+
         // Avoid scrolling to bottom
-        textArea.style.top = "0"
-        textArea.style.left = "0"
-        textArea.style.position = "fixed"
-      
-        document.body.appendChild(textArea)
-        textArea.focus()
-        textArea.select()
-      
+        textArea.style.top = "0";
+        textArea.style.left = "0";
+        textArea.style.position = "fixed";
+
+        document.body.appendChild(textArea);
+        textArea.focus();
+        textArea.select();
+
         try {
-            const successful = document.execCommand('copy')
-            const msg = successful ? 'successful' : 'unsuccessful';
-            console.log('Fallback: Copying text command was ' + msg)
+            const successful = document.execCommand("copy");
+            const msg = successful ? "successful" : "unsuccessful";
+            console.log("Fallback: Copying text command was " + msg);
         } catch (err) {
-            console.error('Fallback: Oops, unable to copy', err)
+            console.error("Fallback: Oops, unable to copy", err);
         }
-      
-        document.body.removeChild(textArea)
+
+        document.body.removeChild(textArea);
     }
 
     function copyTextToClipboard(text) {
         if (!navigator.clipboard) {
-            fallbackCopyTextToClipboard(text)
+            fallbackCopyTextToClipboard(text);
             return;
         }
-        navigator.clipboard.writeText(text).then(function() {
-            console.log('Async: Copying to clipboard was successful!')
-        }, function(err) {
-            console.error('Async: Could not copy text: ', err)
-        });
+        navigator.clipboard.writeText(text).then(
+            function () {
+                console.log("Async: Copying to clipboard was successful!");
+            },
+            function (err) {
+                console.error("Async: Could not copy text: ", err);
+            },
+        );
     }
 
     QLD.code = code;
 
     // Init In Page Nav on document load
-    document.addEventListener('DOMContentLoaded', QLD.code.init)
-}());
+    document.addEventListener("DOMContentLoaded", QLD.code.init);
+})();

package/src/components/footer/css/component.scss

@@ -407,11 +407,9 @@
             }
         }
 
-        .qld__footer__cta__icon {
+        svg.qld__icon {
             color: var(--QLD-color-dark__action--secondary);
-            text-align: middle;
-            line-height: 1;
-            height: 0.875rem;
+            font-size: 1.25rem;
         }
 
         a.qld__footer__clickable__link {

package/src/components/footer/html/component.hbs

@@ -30,9 +30,12 @@
                             {{/if}}
                            {{#if footerCTAContact.value}}
                             <p class="qld__footer__cta-content">
-                                {{#if footerCTAContactIcon.value}}
-                                <i class="qld__footer__cta__icon {{footerCTAContactIcon.value}}"></i>
-                                {{/if}}
+                                {{#ifCond footerCTAContactIcon.value '==' 'phone'}}
+                                <svg class="qld__icon qld__icon--lead" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#phone"></use></svg>
+                                {{/ifCond}}
+                                {{#ifCond footerCTAContactIcon.value '==' 'email'}}
+                                <svg class="qld__icon qld__icon--lead" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#Email"></use></svg>
+                                {{/ifCond}}
                                 {{{footerCTAContact.value}}}
                             </p>
                             {{/if}}
@@ -113,19 +116,19 @@
                             <a class="qld__footer__clickable__link" href="{{urldecode (lookup this 'asset_url^urlencode')}}">
                             {{/ifCond}}
                                 {{#ifCond (lookup this 'asset_short_name^escapequotes') 'contains' 'facebook'}}
-                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" ><use href="{{@root.site.metadata.coreSiteIcons.value}}#Facebook"></use></svg>
+                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#Facebook"></use></svg>
                                 {{/ifCond}}
                                 {{#ifCond (lookup this 'asset_short_name^escapequotes') 'contains' 'linkedin'}}
-                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" ><use href="{{@root.site.metadata.coreSiteIcons.value}}#LinkedIn"></use></svg>
+                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#LinkedIn"></use></svg>
                                 {{/ifCond}}
                                 {{#ifCond (lookup this 'asset_short_name^escapequotes') 'contains' 'youtube'}}
-                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" ><use href="{{@root.site.metadata.coreSiteIcons.value}}#YouTube"></use></svg>
+                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#YouTube"></use></svg>
                                 {{/ifCond}}
                                 {{#ifCond (lookup this 'asset_short_name^escapequotes') 'contains' 'instagram'}}
-                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" ><use href="{{@root.site.metadata.coreSiteIcons.value}}#Instagram"></use></svg>
+                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#Instagram"></use></svg>
                                 {{/ifCond}}
                                 {{#ifCond (lookup this 'asset_short_name^escapequotes') 'contains' 'twitter'}}
-                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" ><use href="{{@root.site.metadata.coreSiteIcons.value}}#X"></use></svg>
+                                    <svg class="qld__icon qld__icon--md" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#X"></use></svg>
                                 {{/ifCond}}
                                 <span class="qld__footer__social__label">{{lookup this 'asset_short_name^escapequotes'}}</span>
                             </a>

package/src/components/header/css/component.scss

@@ -134,7 +134,7 @@
             .qld__header__cta-link {
                 @include QLD-fontgrid(xs);
                 color: var(--QLD-color-light__link);
-                @include QLD-space(padding-left, 0.75unit);
+                @include QLD-space(margin-left, 0.75unit);
                 align-items: center;
 
                 &:hover {
@@ -152,8 +152,7 @@
                 color: var(--QLD-color-light__action--secondary);
                 text-align: center;
 
-                svg,
-                i {
+                svg {
                     height: 100%;
                     width: 100%;
                 }
@@ -163,8 +162,6 @@
         a {
             color: var(--QLD-color-dark__text);
             display: flex;
-
-            @include QLD-focus();
         }
 
         .qld__header__main-nav-controls {
@@ -192,7 +189,7 @@
             cursor: pointer;
             align-items: center;
             color: var(--QLD-color-light__link);
-            @include QLD-focus();
+            @include QLD-focus("light", false, -3px);
             border-left: solid $QLD-border-width-thin $QLD-color-neutral--lighter;
 
             &:hover {
@@ -238,9 +235,11 @@
         }
 
         //Dark theme
-        &.qld__header__pre-header--dark {
+        &.qld__header__pre-header--dark,
+        &.qld__header__pre-header--dark-alt {
             background-color: var(--QLD-color-dark__background);
             color: var(--QLD-color-dark__text);
+            @include QLD-focus("dark");
 
             .qld__header__pre-header-url {
                 color: var(--QLD-color-dark__link);
@@ -269,11 +268,12 @@
             }
 
             .qld__header__toggle-main-nav {
+                @include QLD-focus("dark", false, -3px);
                 color: var(--QLD-color-dark__link);
                 border-color: var(--QLD-color-dark__border);
+                @include QLD-focus("dark");
 
-                svg,
-                i {
+                svg {
                     color: var(--QLD-color-dark__action--secondary);
                 }
 
@@ -319,11 +319,11 @@
             }
 
             .qld__header__toggle-main-nav {
+                @include QLD-focus("dark", false, -3px);
                 color: var(--QLD-color-dark__link);
                 border-color: var(--QLD-color-dark__border);
 
-                svg,
-                i {
+                svg {
                     color: var(--QLD-color-dark__action--secondary);
                 }
 

package/src/components/header/html/component.hbs

@@ -10,7 +10,7 @@
     </nav>
     <div class="qld__header__pre-header {{site.metadata.sitePreHeaderTheme.value}}">
         <div class="container-fluid">
-            <a href="{{#if site.metadata.sitePreHeaderURL.value}}{{site.metadata.sitePreHeaderURL.value}}{{else}}./?a={{site.data.assetid}}{{/if}}" >
+            <a href="{{#if site.metadata.sitePreHeaderURL.value}}{{site.metadata.sitePreHeaderURL.value}}{{else}}./?a={{site.data.assetid}}{{/if}}">
                 <span class="qld__header__pre-header-url">{{site.metadata.sitePreHeaderText.value}}</span>
                 {{#if site.metadata.sitePreHeaderLogo.value}}
                 <img
@@ -29,7 +29,7 @@
                 <a class="qld__header__cta-link" href="./?a={{site.metadata.mainNavCtaOne.value}}">
 		            {{#if site.metadata.mainNavCtaOneIcon.value}}
                     <span class="qld__header__cta-link-icon">
-                      <i class="{{site.metadata.mainNavCtaOneIcon.value}}"></i>
+                        <svg class="qld__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{site.metadata.mainNavCtaOneIcon.value}}"></use></svg>
                     </span>
                     {{/if}}
                     <span class="qld__header__cta-link-text">{{site.metadata.mainNavCtaOneText.value}}</span>
@@ -39,7 +39,7 @@
                 <a class="qld__header__cta-link" href="./?a={{site.metadata.mainNavCtaTwo.value}}">
                     {{#if site.metadata.mainNavCtaTwoIcon.value}}
                     <span class="qld__header__cta-link-icon">
-                        <i class="{{site.metadata.mainNavCtaTwoIcon.value}}"></i>
+                        <svg class="qld__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"><use href="{{@root.site.metadata.coreSiteIcons.value}}#{{site.metadata.mainNavCtaTwoIcon.value}}"></use></svg>
                     </span>
                     {{/if}}
                     <span class="qld__header__cta-link-text">{{site.metadata.mainNavCtaTwoText.value}}</span>