@qhealth-design-system/core 1.18.4 → 1.19.0

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

@@ -2,150 +2,7 @@
 // Feature card
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
 
-// .qld__card.qld__card__multi-action{
-//     @include QLD-box-shadow(2);
-
-//     @include QLD-media(lg) {
-//         box-shadow: none;
-//     }
-//     .qld__card__inner{
-//         .qld__card__title{
-//             @include QLD-fontgrid(lg, heading);
-//         }
-//     }
-
-//     //Card Icon
-//     &.qld__card--icon {
-//         .qld__card__icon{
-//             i,
-//             svg{
-//                 color: var(--QLD-color-light__action--secondary);
-//             }
-//         }  
-//         &:hover{
-//             .qld__card__icon{
-//                 i,
-//                 svg{
-//                     color: var(--QLD-color-light__action--secondary-hover);
-//                 }
-//             }    
-//         }
-//     }
-
-//     .qld__card--clickable__link{
-//         color: var(--QLD-color-light__link);
-//         text-decoration: none;
-//         &:hover{
-//             text-decoration: underline;
-//             color: var(--QLD-color-light__link);
-//         }
-//     }
-//     .qld__card__image-link {
-//         display: flex;
-//         position: relative;
-//         @include QLD-space(border-radius, 0 0 3.75unit 0);
-//         max-width: 100%;
-    
-//         &::before {
-//             content: "";
-//             background-color: var(--QLD-color-dark__background);
-//             display: block;
-//             width: 100%;
-//             height: 100%;
-//             position: absolute;
-//             opacity: 0;
-//             transition: opacity 0.2s ease;
-//             border-radius: 0px 0px 6.0882800608828%/10.81081081081081% 0px;
-//             z-index: 1;
-//         }
-    
-//         &:hover,
-//         &:focus {
-//             &::before {
-//                 opacity: 0.1;
-//             }
-//         }
-//     }
-   
-//     .qld__card__footer-inner{
-//         display: flex;
-//         flex-direction: column;
-
-//         .qld__link-list{
-//             @include QLD-space(padding, 0unit);
-
-//             li{
-//                 @include QLD-space(margin, .75unit 0 0 0);
-//                 @include QLD-space(padding,  0);
-
-//                 &:first-of-type{
-//                     @include QLD-space(margin-top, 0);
-//                 }
-//             }
-//         }
-//         .qld__tag-list{
-//             @include QLD-space(margin, -.50unit 0unit 0unit 0unit);
-
-//         }
-//     }
-
-//     .qld__card__footer-link-icon{
-//         @include QLD-space(font-size, 1.25unit);
-//         @include QLD-space(margin-right, .5unit);
-//         color: var(--QLD-color-light__action--secondary);
-//         vertical-align: middle;
-//     }
-
-//     .qld__card__footer-link{
-//         @include QLD-space(font-size, 1unit);
-//         font-weight: bold;
-
-//         &:hover{
-//             .qld__card__footer-link-icon{
-//                 color: var(--QLD-color-light__action--secondary-hover);
-//             }
-//         }
-//     }
-
-//     &.qld__card--dark,
-//     &.qld__card--dark-alt{
-//         .qld__card--clickable__link{
-//             color: var(--QLD-color-dark__link);
-//         }
-
-//         //Card Icon
-//         &.qld__card--icon {
-//         .qld__card__icon{
-//             i,
-//             svg{
-//                 color: var(--QLD-color-dark__action--secondary);
-//             }
-//         }  
-//         &:hover{
-//             .qld__card__icon{
-//                 i,
-//                 svg{
-//                     color: var(--QLD-color-dark__action--secondary-hover);
-//                 }
-//             }    
-//         }
-//     }
-
-//         .qld__card__footer-link-icon{
-//             color: var(--QLD-color-dark__action--secondary);
-//         }
-
-//         .qld__card__footer-link{    
-//             &:hover{
-//                 .qld__card__footer-link-icon{
-//                     color: var(--QLD-color-dark__action--secondary-hover);
-//                 }
-//             }
-//         }
-//     }
-// }
-
-.qld__card.qld__card__multi-action.qld__card__multi-action--feature{
+.qld__card.qld__card__multi-action.qld__card__multi-action--feature {
     @include QLD-media(md) {
         flex-direction: row;
         @include QLD-space(min-height, 18.75unit);
@@ -155,7 +12,7 @@
     }
 
     .qld__card__image-wrapper,
-    .qld__card__image-link{   
+    .qld__card__image-link {
         @include QLD-media(md) {
             flex: 1;
             @include QLD-space(padding-bottom, 0unit);
@@ -173,7 +30,7 @@
         }
     }
 
-    .qld__card__inner{
+    .qld__card__inner {
         @include QLD-space(padding, 1.5unit);
         @include QLD-media(md) {
             @include QLD-space(padding, 1.25unit);
@@ -190,30 +47,25 @@
         }
     }
 
-    .qld__card__footer{
+    .qld__card__footer {
         justify-content: initial;
     }
 
-    &.qld__card__multi-action--image-right{
-            
-            
+    &.qld__card__multi-action--image-right {
         @include QLD-media(md) {
             flex-direction: row-reverse;
         }
         @include QLD-media(lg) {
-            
         }
-        
-        .qld__responsive-media-img--bg{
+
+        .qld__responsive-media-img--bg {
             border-radius: 0;
 
             &::before {
                 border-radius: 0;
             }
-
         }
-        .qld__card__inner{
-
+        .qld__card__inner {
             .qld__card__title {
                 @include QLD-space(font-size, 1.25unit);
                 line-height: 1.4;
@@ -222,32 +74,41 @@
     }
 }
 
-
-/* Tag hover colour for default (light cards) */ 
-.qld__card .qld__card__footer a.qld__tag:hover, .qld__card .qld__card__footer .qld__tag.qld__tag--link:hover {
+/* Tag hover colour for default (light cards) */
+.qld__card .qld__card__footer a.qld__tag:hover,
+.qld__card .qld__card__footer .qld__tag.qld__tag--link:hover {
     background-color: var(--QLD-color-light__action--primary-hover);
     color: var(--QLD-color-light__link--on-action);
     border-color: var(--QLD-color-light__action--primary-hover);
-    text-decoration-color: var(--QLD-color-light__link--on-action); 
+    text-decoration-color: var(--QLD-color-light__link--on-action);
 }
 
-/* New CSS this Default */ 
-.qld__card .qld__card__footer a.qld__tag, .qld__card .qld__card__footer .qld__tag.qld__tag--link:visited {
+/* New CSS this Default */
+.qld__card .qld__card__footer a.qld__tag,
+.qld__card .qld__card__footer .qld__tag.qld__tag--link:visited {
     color: var(--QLD-color-light__link);
 }
 
-/* Visited link hover */ 
-.qld__card .qld__card__footer a.qld__tag:hover, .qld__card .qld__card__footer .qld__tag.qld__tag--link:visited:hover {
+/* Visited link hover */
+.qld__card .qld__card__footer a.qld__tag:hover,
+.qld__card .qld__card__footer .qld__tag.qld__tag--link:visited:hover {
     background-color: var(--QLD-color-light__action--primary-hover);
     color: var(--QLD-color-light__link--on-action);
     border-color: var(--QLD-color-light__action--primary-hover);
     text-decoration-color: var(--QLD-color-light__link--on-action);
 }
 
-/* Visited link hover colour for dark cards */ 
-.qld__body--dark a.qld__tag:hover:visited, .qld__card--dark .qld__card__footer a.qld__tag:hover:visited, .qld__body--dark-alt a.qld__tag:hover:visited, .qld__card--dark-alt .qld__card__footer a.qld__tag:hover:visited, .qld__body--dark .qld__tag.qld__tag--link:hover:visited, .qld__card--dark .qld__card__footer .qld__tag.qld__tag--link:hover:visited, .qld__body--dark-alt .qld__tag.qld__tag--link:hover:visited, .qld__card--dark-alt .qld__card__footer .qld__tag.qld__tag--link:hover:visited {
+/* Visited link hover colour for dark cards */
+.qld__body--dark a.qld__tag:hover:visited,
+.qld__card--dark .qld__card__footer a.qld__tag:hover:visited,
+.qld__body--dark-alt a.qld__tag:hover:visited,
+.qld__card--dark-alt .qld__card__footer a.qld__tag:hover:visited,
+.qld__body--dark .qld__tag.qld__tag--link:hover:visited,
+.qld__card--dark .qld__card__footer .qld__tag.qld__tag--link:hover:visited,
+.qld__body--dark-alt .qld__tag.qld__tag--link:hover:visited,
+.qld__card--dark-alt .qld__card__footer .qld__tag.qld__tag--link:hover:visited {
     color: var(--QLD-color-dark__link--on-action);
     -webkit-text-decoration-color: var(--QLD-color-dark__link--on-action);
     text-decoration-color: var(--QLD-color-dark__link--on-action);
     background-color: var(--QLD-color-dark__action--primary-hover);
-}
+}

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

@@ -2,7 +2,7 @@
 // Multi action card
 //--------------------------------------------------------------------------------------------------------------------------------------------------------------
 
-.qld__card.qld__card__multi-action{
+.qld__card.qld__card__multi-action {
     @include QLD-box-shadow(2);
 
     @include QLD-media(lg) {
@@ -11,19 +11,19 @@
 
     //Card Icon
     &.qld__card--icon {
-        .qld__card__icon{
+        .qld__card__icon {
             i,
-            svg{
+            svg {
                 color: var(--QLD-color-light__action--secondary);
             }
-        }  
-        &:hover{
-            .qld__card__icon{
+        }
+        &:hover {
+            .qld__card__icon {
                 i,
-                svg{
+                svg {
                     color: var(--QLD-color-light__action--secondary-hover);
                 }
-            }    
+            }
         }
     }
 
@@ -80,73 +80,71 @@
         }
     }
 
-    .qld__card__footer-inner{
+    .qld__card__footer-inner {
         display: flex;
         flex-direction: column;
 
-        .qld__link-list{
+        .qld__link-list {
             @include QLD-space(padding, 0unit);
 
-            li{
+            li {
                 @include QLD-space(margin, 1unit 0 0 0);
-                @include QLD-space(padding,  0);
+                @include QLD-space(padding, 0);
 
-                &:first-of-type{
+                &:first-of-type {
                     @include QLD-space(margin-top, 0);
                 }
             }
         }
-        .qld__tag-list{
-            @include QLD-space(margin, -.50unit 0unit 0unit 0unit);
-
+        .qld__tag-list {
+            @include QLD-space(margin, -0.5unit 0unit 0unit 0unit);
         }
     }
 
-    .qld__card__footer-link-icon{
+    .qld__card__footer-link-icon {
         @include QLD-space(font-size, 1.25unit);
-        @include QLD-space(margin-right, .5unit);
+        @include QLD-space(margin-right, 0.5unit);
         color: var(--QLD-color-light__action--secondary);
         vertical-align: middle;
         width: 24px;
         text-decoration: none;
     }
 
-    .qld__card__footer-link{
+    .qld__card__footer-link {
         color: var(--QLD-color-light__link);
         @include QLD-space(font-size, 1unit);
-        font-weight: bold;
+        font-weight: $QLD-font-weight-semibold;
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
         align-items: center;
         text-decoration: none;
-        
-        span {
-            @include QLD-underline('light');
 
+        span {
+            @include QLD-underline("light");
         }
 
-        &:visited{
+        &:visited {
             span {
                 color: var(--QLD-color-light__underline--hover-visited);
                 text-decoration-color: var(--QLD-color-light__underline--visited);
             }
         }
         &:hover:visited {
-            span{
+            span {
                 color: var(--QLD-color-light__underline--hover-visited);
                 text-decoration-color: var(--QLD-color-light__underline--hover-visited);
                 text-decoration-thickness: var(--QLD-underline__thickness-thick);
             }
         }
-        &:hover{
+        &:hover {
             color: var(--QLD-color-light__link);
             text-decoration: none;
-            span{
+            span {
                 text-decoration-thickness: var(--QLD-underline__thickness-thick);
             }
-            
-            .qld__card__footer-link-icon{
+
+            .qld__card__footer-link-icon {
                 color: var(--QLD-color-light__action--secondary-hover);
             }
         }
@@ -154,22 +152,21 @@
 
     &.qld__card--dark,
     &.qld__card--dark-alt {
-
         //Card Icon
         &.qld__card--icon {
-            .qld__card__icon{
+            .qld__card__icon {
                 i,
-                svg{
+                svg {
                     color: var(--QLD-color-dark__action--secondary);
                 }
-            }  
-            &:hover{
-                .qld__card__icon{
+            }
+            &:hover {
+                .qld__card__icon {
                     i,
-                    svg{
+                    svg {
                         color: var(--QLD-color-dark__action--secondary-hover);
                     }
-                }    
+                }
             }
         }
 
@@ -178,7 +175,7 @@
             outline: 3px solid var(--QLD-color-dark__focus);
         }
 
-        .qld__card__footer-link-icon{
+        .qld__card__footer-link-icon {
             color: var(--QLD-color-dark__action--secondary);
         }
 
@@ -186,10 +183,10 @@
             color: var(--QLD-color-dark__link);
 
             span {
-                @include QLD-underline('dark');
+                @include QLD-underline("dark");
             }
 
-            &:visited{
+            &:visited {
                 span {
                     color: var(--QLD-color-dark__underline--hover-visited);
                     text-decoration-color: var(--QLD-color-dark__underline--visited);
@@ -197,7 +194,7 @@
             }
 
             &:hover:visited {
-                span{
+                span {
                     color: var(--QLD-color-dark__underline--hover-visited);
                     text-decoration-color: var(--QLD-color-dark__underline--hover-visited);
                     text-decoration-thickness: var(--QLD-underline__thickness-thick);
@@ -213,7 +210,7 @@
     }
 }
 
-.qld__card.qld__card__multi-action.qld__card__multi-action--feature{
+.qld__card.qld__card__multi-action.qld__card__multi-action--feature {
     @include QLD-media(md) {
         flex-direction: row;
         @include QLD-space(min-height, 18.75unit);
@@ -222,8 +219,7 @@
         @include QLD-space(min-height, 27.5unit);
     }
 
-    .qld__card__image-link{
-        
+    .qld__card__image-link {
         @include QLD-media(md) {
             flex: 1;
             @include QLD-space(padding-bottom, 0unit);
@@ -234,7 +230,7 @@
         }
     }
 
-    .qld__card__inner{
+    .qld__card__inner {
         @include QLD-space(padding, 1.5unit);
         @include QLD-media(md) {
             @include QLD-space(padding, 1.25unit);
@@ -251,26 +247,21 @@
         }
     }
 
-    .qld__card__footer{
+    .qld__card__footer {
         justify-content: initial;
     }
 
-    &.qld__card__multi-action--image-right{
-            
-            
+    &.qld__card__multi-action--image-right {
         @include QLD-media(md) {
             flex-direction: row-reverse;
         }
         @include QLD-media(lg) {
-            
         }
-        
-        .qld__responsive-media-img--bg{
-            border-radius: 0;
 
+        .qld__responsive-media-img--bg {
+            border-radius: 0;
         }
-        .qld__card__inner{
-
+        .qld__card__inner {
             .qld__card__title {
                 @include QLD-space(font-size, 1.25unit);
                 line-height: 1.4;
@@ -278,6 +269,3 @@
         }
     }
 }
-
-
-

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

@@ -203,7 +203,7 @@
             }
 
             &-label {
-                font-weight: 600;
+                font-weight: $QLD-font-weight-semibold;
                 @include QLD-space("padding-right", 0.75unit);
             }
 
@@ -225,7 +225,7 @@
 
                     label {
                         color: var(--QLD-color-light__text);
-                        font-weight: 400;
+                        font-weight: $QLD-font-weight-regular;
                         @include QLD-space("margin", 0);
                         @include QLD-space("padding-left", 2.5unit);
                     }
@@ -238,7 +238,7 @@
             border-radius: $QLD-border-radius-xs $QLD-border-radius-xs 0 0;
             bottom: 100%;
             color: var(--QLD-color-dark__text);
-            font-weight: 600;
+            font-weight: $QLD-font-weight-semibold;
             display: inline-block;
             position: absolute;
             @include QLD-space("font-size", 0.875unit);

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

@@ -91,19 +91,19 @@
             <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">
+                        <a href="{{github_link.value}}" class="qld__code-header-link" rel="noopener noreferrer" 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">
+                        <a href="{{figma_link.value}}" class="qld__code-header-link" rel="noopener noreferrer" 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">
+                        <a href="{{action_link_address.value}}" class="qld__code-header-link" rel="noopener noreferrer" 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>
@@ -114,19 +114,19 @@
             <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">
+                        <a href="{{github_link.value}}" class="qld__code-header-link" rel="noopener noreferrer" 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">
+                        <a href="{{figma_link.value}}" class="qld__code-header-link" rel="noopener noreferrer" 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">
+                        <a href="{{action_link_address.value}}" class="qld__code-header-link" rel="noopener noreferrer" 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>
@@ -137,19 +137,19 @@
             <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">
+                        <a href="{{github_link.value}}" class="qld__code-header-link" rel="noopener noreferrer" 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">
+                        <a href="{{figma_link.value}}" class="qld__code-header-link" rel="noopener noreferrer" 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">
+                        <a href="{{action_link_address.value}}" class="qld__code-header-link" rel="noopener noreferrer" 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>
@@ -161,19 +161,19 @@
             <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">
+                        <a href="{{github_link.value}}" class="qld__code-header-link" rel="noopener noreferrer" 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">
+                        <a href="{{figma_link.value}}" class="qld__code-header-link" rel="noopener noreferrer" 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">
+                        <a href="{{action_link_address.value}}" class="qld__code-header-link" rel="noopener noreferrer" 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>

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

@@ -1,3 +1,5 @@
+import { validateInternalSvgPath, buildIconPath } from "../../../helpers/global-helpers.js";
+
 (function () {
     /**
      * @module code
@@ -69,7 +71,10 @@
 
                 // Create <use>
                 const use = document.createElementNS("http://www.w3.org/2000/svg", "use");
-                use.setAttributeNS(null, "href", `${svgPath}#chevron-up`);
+                // Attempt to validate SVG path before using it
+                if (validateInternalSvgPath(svgPath)) {
+                    use.setAttributeNS(null, "href", buildIconPath(svgPath, "chevron-up").toString());
+                }
 
                 showToggleButton.addEventListener("click", function () {
                     // Update button text