Merge branch 'develop' into QOLOE-294-seatchInput-items-styling

qld-gov-au · Jun 24, 2024 · 0b96edf · 0b96edf
2 parents 131f0c1 + 253ad5f
commit 0b96edf
Show file tree

Hide file tree

Showing 18 changed files with 258 additions and 234 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qld-gov-au/qgds-bootstrap5",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "",
   "repository": {
     "type": "git",

diff --git a/src/components/bs5/accordion/accordion.scss b/src/components/bs5/accordion/accordion.scss
@@ -81,7 +81,6 @@ $accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://w
   &-button {
     font-size: 1.25rem;
     font-weight: 400;
-    line-height: 1.2;
     text-decoration-line: underline;
     text-underline-offset: var(--#{$prefix}link-underline-offset);
     text-decoration-thickness: var(--#{$prefix}link-underline-thickness);

diff --git a/src/components/bs5/card/card.scss b/src/components/bs5/card/card.scss
@@ -229,15 +229,7 @@ $view-all-icon-dark: url("data:image/svg+xml,<svg width='21' height='21' viewBox
         }
 
         a {
-            color: var(--#{$prefix}card-link-color);
             font-weight: 600;
-            text-underline-offset: 3px;
-            text-decoration-thickness: var(--qld-link-underline-thickness);
-
-            &:hover, &:focus {
-                text-decoration: underline;
-                text-decoration-thickness: var(--qld-link-underline-thickness-hover);
-            }
         }
     }
 

diff --git a/src/components/bs5/header/header.scss b/src/components/bs5/header/header.scss
@@ -507,10 +507,6 @@
 	&__main--masterbrand--true {
 		@include media-breakpoint-down(lg) {
 			height: 0;
-
-			.qld__header__site-search--open {
-				margin-top: 3rem;
-			}
 		}
 	}
 
@@ -531,7 +527,8 @@
 				position: absolute;
 				left: 0;
 				right: 0;
-				padding: 1rem;
+				top: 0.4rem;
+				padding: 1rem 0;
 				background-color: var(--#{$prefix}header_bg);
 			}
 			&--closed {

diff --git a/src/components/bs5/header/header.stories.js b/src/components/bs5/header/header.stories.js
@@ -280,10 +280,7 @@ export const EndorsedBrand = {
           ${Story()}
         </main>
         <div>
-          ${new Banner(bannerDataWithOverride).html}
-          <form action="https://uat.forgov.qld.gov.au/search" class="site-search">
-            ${new SearchInput(searchData).html}
-          </form>          
+          ${new Banner(bannerDataWithOverride).html}         
           ${new Footer(footerDataWithOverride).html}
         </div>
       `;
@@ -326,9 +323,6 @@ export const StandaloneBrand = {
         </main>
         <div>
           ${new Banner(bannerDataWithOverride).html}
-          <form action="https://uat.forgov.qld.gov.au/search" class="site-search">
-            ${new SearchInput(searchData).html}
-          </form>
           ${new Footer(footerDataWithOverride).html}
         </div>
       `;

diff --git a/src/components/bs5/navbar/_colours.scss b/src/components/bs5/navbar/_colours.scss
@@ -30,6 +30,9 @@
     --#{$prefix}navbar-mobile-text-color: var(--#{$prefix}core-default-color-neutral-white);
     --#{$prefix}navbar-mobile-border-color: var(--#{$prefix}color-default-color-dark-border-default);
     --#{$prefix}navbar-mobile-menuitem-hover: var(--#{$prefix}color-default-color-dark-background-default-shade);
+    --#{$prefix}navbar-mobile-bg-color: var(--#{$prefix}color-default-color-dark-background-default);
+    --#{$prefix}navbar-mobile-cta-bg-color: var(--#{$prefix}color-default-color-dark-background-default-shade);
+    --#{$prefix}navbar-mobile-cta-bg-color-open: var(--#{$prefix}color-default-color-dark-background-default);
 
     // Toggle icons for mobile
     --#{$prefix}navbar-mobile-menu-toggle-boxshadow: 0px 1px 2px rgba(0, 0, 0, .2), 0px 1px 3px 1px rgba(0, 0, 0, .1);
@@ -64,8 +67,15 @@
         --#{$prefix}navbar-text-color: var(--#{$prefix}core-default-color-neutral-white);
         --#{$prefix}navbar-nav-text-color: var(--#{$prefix}core-default-color-neutral-white);
         --#{$prefix}navbar-home-icon-color: var(--#{$prefix}core-default-color-neutral-white);
+        --#{$prefix}navbar-home-icon-color-active: var(--#{$prefix}color-default-color-dark-text-heading);
+        --#{$prefix}navbar-home-icon-color-hover: var(--#{$prefix}color-default-color-dark-action-primary-hover);
+
         --#{$prefix}navbar-link-color: var(--#{$prefix}core-default-color-neutral-white);
+        --#{$prefix}navbar-link-color-hover: var(--#{$prefix}core-default-color-neutral-white);
+
         --#{$prefix}navbar-border-color: var(--#{$prefix}color-default-color-dark-border-default);
+        --#{$prefix}navbar-menuitem-active: var(--#{$prefix}core-default-color-neutral-white);
+        --#{$prefix}navbar-menuitem-active: var(--#{$prefix}color-default-color-dark-background-alt);
         --#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}color-default-color-dark-action-secondary-hover);
         --#{$prefix}navbar-icon-hover: var(--#{$prefix}color-default-color-dark-action-secondary);
         --#{$prefix}navbar-text-focus-color: var(--#{$prefix}color-default-color-dark-focus-default);

diff --git a/src/components/bs5/navbar/_icons.scss b/src/components/bs5/navbar/_icons.scss
@@ -4,7 +4,7 @@
 .navbar {
     .dropdown-toggle {
         .toggle_icon {
-            color: var(--qld-navbar-svg-color);
+            color: var(--#{$prefix}navbar-svg-color);
             height: 1rem;
             width: 1rem;
             margin-left: .25rem;
@@ -46,8 +46,11 @@
             }
 
             a.dropdown-item {
+                position: relative;
                 .chevron__icon {
-                    float: right;
+                    position: absolute;
+                    top: 1.15rem;
+                    right: 0;
                 }
             }
         }

diff --git a/src/components/bs5/navbar/navbar.data.json b/src/components/bs5/navbar/navbar.data.json
@@ -145,7 +145,7 @@
         "CTA": [
             {
                 "id": "CTAone",
-                "target_url": "index.html",
+                "target_url": "#",
                 "label": "Business and Industry",
                 "dropdown_enabled": true,
                 "dropdown_options": {
@@ -196,7 +196,7 @@
             },
             {
                 "id": "CTAtwo",
-                "target_url": "index.html",
+                "target_url": "#",
                 "label": "For government",
                 "dropdown_enabled": true,
                 "dropdown_options": {
@@ -247,7 +247,7 @@
             },
             {
                 "id": "CTAthree",
-                "target_url": "login.html",
+                "target_url": "#",
                 "label": "Login",
                 "dropdown_enabled": true,
                 "dropdown_options": {

diff --git a/src/components/bs5/navbar/navbar.hbs b/src/components/bs5/navbar/navbar.hbs
@@ -64,7 +64,7 @@
                             {{#each navigation_items}}
                             <li class="col-lg-4 col-sm-12">
                                 <a href="{{target_url}}" class="dropdown-item">
-                                    {{title}}
+                                    <span class="dropdown-item__text">{{title}}</span>
                                     <svg class="chevron__icon">
                                         <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right"></use>
                                     </svg>
@@ -168,7 +168,7 @@
                 {{/if}}
                 {{/each }}
                 {{#each CTA}}
-                    <li class="nav-item dropdown">
+                    <li class="nav-item dropdown CTA_feature">
                         <!-- Mobile only -->
                         <div class="nav-item-group mobile-only">
 

diff --git a/src/components/bs5/navbar/navbar.scss b/src/components/bs5/navbar/navbar.scss
@@ -82,6 +82,7 @@
 
 
     &-collapse {
+        position: relative;
 
         @include media-breakpoint-down(md) {
             width: 20rem;
@@ -98,7 +99,7 @@
             top: 0;
             bottom: 0;
             overflow-x: hidden;
-            background-color: var(--#{$prefix}navbar-bg-color);
+            background-color: var(--#{$prefix}navbar-mobile-bg-color);
 
             /* Initially positioned off-screen to the right */
             transition: transform .25s ease-in-out;
@@ -286,14 +287,53 @@
 
         @include media-breakpoint-down(lg) {
             border-left: 4px solid var(--#{$prefix}navbar-border-accent);
+            background-color: var(--#{$prefix}navbar-bg-color);
         }
 
         .dropdown-container {
             display: flex;
         }
+
+        .nav-item.CTA_feature {
+
+            color: var(--#{$prefix}navbar-mobile-text-color);
+            background-color: var(--#{$prefix}navbar-mobile-cta-bg-color);
+            border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color);
+
+            .mobile-only {
+
+                .dropdown-menu.show {
+                    background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open);
+                    border-left: solid .25rem var(--#{$prefix}navbar-mobile-cta-bg-color-open);
+
+                    .dropdown-item {
+                        color: var(--#{$prefix}navbar-mobile-text-color);
+                        border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color);
+                    }
+                }
+
+                .first-element {
+                    color: var(--#{$prefix}navbar-mobile-text-color) !important; //TO DO: resolve, caused by qld-type overrides
+                    &.show {
+                        background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open);
+                        .dropdown-item {
+                            border-bottom: solid 1px var(--#{$prefix}navbar-mobile-border-color);
+                        }
+                    }
+                    &:hover {
+                        color: var(--#{$prefix}navbar-mobile-text-color);
+                        background-color: var(--#{$prefix}navbar-mobile-cta-bg-color-open);
+                    }
+                }
+
+
+            }
+        }
     }
 
-    .dropdown { 
+    .dropdown {
+        position: static;
+
         &-menu {
             background-color: var(--#{$prefix}navbar-dropdown-bg-color);
 
@@ -305,7 +345,7 @@
             @include media-breakpoint-up(lg) {
                 left: 0;
                 right: 0;
-                width: 1320px; //TO DO: FIX
+                width: 100%;
                 padding: 3rem 4rem;
                 margin-top: 0.5rem;
                 margin-left: -4rem;
@@ -331,8 +371,6 @@
                 }
             }
 
-
-
             @include media-breakpoint-down(lg) {
                 border-radius: 0;
                 box-shadow: none;
@@ -402,6 +440,12 @@
                         padding: 1rem 0;
                         color: var(--#{$prefix}navbar-link-color);
                         border-bottom: solid 1px var(--#{$prefix}navbar-border-color);
+                        white-space: normal;
+
+                        .dropdown-item__text {
+                            display: inline-block;
+                            margin-right: 1.5rem;
+                        }
 
                         &:active {
                             background-color: transparent;
@@ -438,7 +482,6 @@
 
                         @include media-breakpoint-down(lg) {
                             padding: 1rem;
-                            white-space: normal;
                             overflow-wrap: break-word;
                         }
                     }
@@ -498,7 +541,7 @@
 
         }
         .nav-link {
-            color: var(--#{$prefix}navbar-nav-text-color);
+            color: var(--#{$prefix}navbar-nav-text-color) !important; //To do: Due to qld-type.scss needing refractor. Remove later.
             text-decoration: none;
             line-height: 2rem;
             width: 100%;