Skip to content

Commit

Permalink
Merge pull request #292 from qld-gov-au/QOLOE-309-UAT
Browse files Browse the repository at this point in the history
QOLOE-309: UAT
  • Loading branch information
MitchAnderson93 authored Jun 24, 2024
2 parents 7458a67 + 8431219 commit c2b02e1
Show file tree
Hide file tree
Showing 10 changed files with 124 additions and 82 deletions.
7 changes: 2 additions & 5 deletions src/components/bs5/header/header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -507,10 +507,6 @@
&__main--masterbrand--true {
@include media-breakpoint-down(lg) {
height: 0;

.qld__header__site-search--open {
margin-top: 3rem;
}
}
}

Expand All @@ -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 {
Expand Down
8 changes: 1 addition & 7 deletions src/components/bs5/header/header.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`;
Expand Down Expand Up @@ -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>
`;
Expand Down
10 changes: 10 additions & 0 deletions src/components/bs5/navbar/_colours.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion src/components/bs5/navbar/_icons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 3 additions & 3 deletions src/components/bs5/navbar/navbar.data.json
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@
"CTA": [
{
"id": "CTAone",
"target_url": "index.html",
"target_url": "#",
"label": "Business and Industry",
"dropdown_enabled": true,
"dropdown_options": {
Expand Down Expand Up @@ -196,7 +196,7 @@
},
{
"id": "CTAtwo",
"target_url": "index.html",
"target_url": "#",
"label": "For government",
"dropdown_enabled": true,
"dropdown_options": {
Expand Down Expand Up @@ -247,7 +247,7 @@
},
{
"id": "CTAthree",
"target_url": "login.html",
"target_url": "#",
"label": "Login",
"dropdown_enabled": true,
"dropdown_options": {
Expand Down
2 changes: 1 addition & 1 deletion src/components/bs5/navbar/navbar.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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">

Expand Down
41 changes: 39 additions & 2 deletions src/components/bs5/navbar/navbar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -99,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;
Expand Down Expand Up @@ -287,11 +287,48 @@

@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 {
Expand Down Expand Up @@ -504,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%;
Expand Down
120 changes: 60 additions & 60 deletions src/components/bs5/searchInput/searchInput.data.json
Original file line number Diff line number Diff line change
@@ -1,63 +1,63 @@
{
"customClass": "",
"variantClass": "",
"placeholder": "Search website",
"inputID": "search",
"inputName": "query",
"buttonID": "search-button",
"buttonType": "submit",
"buttonLabel": "Search",
"ariaLabel": "Search website",
"suggestions": true,
"tags": {
"collection": "qgov~sp-search",
"profile": "qld",
"numranks": "10",
"tiers": "off",
"suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
"results-url": "https://discover.search.qld.gov.au/s/search.json"
},
"default_suggestions": {
"popular_services": [
{
"title": "Apply for leave",
"link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application"
},
{
"title": "Apply for higher duties or relieving at level",
"link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level"
},
{
"title": "Extend a temporary or casual employee",
"link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee"
},
{
"title": "Hire a staff member (recruitment)",
"link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment"
}
],
"categories": [
{
"title": "Search for directives, policies, circulars, and guidelines",
"link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines"
},
{
"title": "Employee pay and benefits",
"link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits"
},
{
"title": "Queensland Shared Services",
"link": "https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services"
},
{
"title": "Career development",
"link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development"
}
],
"options": {
"label": "Browse all categories",
"view_more": false,
"href": "/queenslanders"
}
"customClass": "",
"variantClass": "",
"placeholder": "Search website",
"inputID": "search",
"inputName": "query",
"buttonID": "search-button",
"buttonType": "submit",
"buttonLabel": "Search",
"ariaLabel": "Search website",
"suggestions": true,
"tags": {
"collection": "qgov~sp-search",
"profile": "qld",
"numranks": "10",
"tiers": "off",
"suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
"results-url": "https://discover.search.qld.gov.au/s/search.json"
},
"default_suggestions": {
"popular_services": [
{
"title": "Apply for leave",
"link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application"
},
{
"title": "Apply for higher duties or relieving at level",
"link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level"
},
{
"title": "Extend a temporary or casual employee",
"link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee"
},
{
"title": "Hire a staff member (recruitment)",
"link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment"
}
],
"categories": [
{
"title": "Search for directives, policies, circulars, and guidelines",
"link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines"
},
{
"title": "Employee pay and benefits",
"link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits"
},
{
"title": "Queensland Shared Services",
"link": "https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services"
},
{
"title": "Career development",
"link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development"
}
],
"options": {
"label": "Browse all categories",
"view_more": false,
"href": "/queenslanders"
}
}
}
2 changes: 1 addition & 1 deletion src/components/bs5/searchInput/searchInput.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -44,4 +44,4 @@
</ul>
{{/if}}
</div>
</div>
</div>
8 changes: 6 additions & 2 deletions src/components/bs5/searchInput/searchInput.scss
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// ----------------------------------------------------------------------------------------------------------------------
// Header - palettes and second hand variables:
// Search input - palettes and second hand variables:
@import './colours';
// ----------------------------------------------------------------------------------------------------------------------

Expand All @@ -15,7 +15,11 @@
--icon: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.5 6.5C11.5 4.71875 10.5312 3.09375 9 2.1875C7.4375 1.28125 5.53125 1.28125 4 2.1875C2.4375 3.09375 1.5 4.71875 1.5 6.5C1.5 8.3125 2.4375 9.9375 4 10.8438C5.53125 11.75 7.4375 11.75 9 10.8438C10.5312 9.9375 11.5 8.3125 11.5 6.5ZM10.5312 11.625C9.40625 12.5 8 13 6.5 13C2.90625 13 0 10.0938 0 6.5C0 2.9375 2.90625 0 6.5 0C10.0625 0 13 2.9375 13 6.5C13 8.03125 12.4688 9.4375 11.5938 10.5625L15.7812 14.7188C16.0625 15.0312 16.0625 15.5 15.7812 15.7812C15.4688 16.0938 15 16.0938 14.7188 15.7812L10.5312 11.625Z' fill='%23414141'/%3E%3C/svg%3E%0A");

position: relative;
min-width: 22.5rem;
width: 100%;

@include media-breakpoint-up(lg) {
min-width: 22.5rem;
}

//Search dropdown
.suggestions {
Expand Down

0 comments on commit c2b02e1

Please sign in to comment.