@qld-gov-au/qgds-bootstrap5 2.0.3 → 2.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/components/bs5/head/head.hbs +1 -1
- package/dist/assets/components/bs5/searchInput/searchInput.hbs +34 -35
- package/dist/assets/css/qld.bootstrap.css +1 -1
- package/dist/assets/css/qld.bootstrap.css.map +3 -3
- package/dist/assets/js/handlebars.init.min.js +36 -38
- package/dist/assets/js/handlebars.init.min.js.map +2 -2
- package/dist/assets/node/handlebars.init.min.js +2 -2
- package/dist/assets/node/handlebars.init.min.js.map +1 -1
- package/dist/components/bs5/head/head.hbs +1 -1
- package/dist/components/bs5/searchInput/searchInput.hbs +34 -35
- package/dist/package.json +1 -1
- package/dist/sample-data/searchInput/searchInput.data.json +0 -1
- package/package.json +1 -1
- package/src/components/bs5/header/header.scss +15 -27
- package/src/components/bs5/logo/Logo.mdx +1 -1
- package/src/components/bs5/navbar/navbar.scss +7 -5
- package/src/components/bs5/navbar/navbar.stories.js +1 -1
- package/src/components/bs5/searchInput/SearchInput.mdx +1 -1
- package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap +32 -34
- package/src/components/bs5/searchInput/searchInput.data.json +0 -1
- package/src/components/bs5/searchInput/searchInput.hbs +34 -35
- package/src/components/bs5/searchInput/searchInput.scss +216 -195
- package/src/components/bs5/searchInput/searchInput.stories.js +42 -26
- package/src/components/bs5/tabs/tabs.scss +47 -40
- package/src/css/mixins/focusable.scss +11 -3
- package/src/css/mixins/make-icon.scss +7 -1
- package/src/components/bs5/searchInput/_colours.scss +0 -63
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.
|
|
2
|
+
<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"2.0.4","branch":"HEAD","tag":"v2.0.4","commit":"0b896ac48e7daadbef3fdbd2caccc437be120856","majorVersion":"v2"} -->
|
|
3
3
|
|
|
4
4
|
{{! Select environment, used verbatium if not using predefind key
|
|
5
5
|
cdn := PROD|STAGING|BETA|TEST|DEV|???
|
|
@@ -1,44 +1,43 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
QGDS Component: Search input
|
|
3
3
|
-->
|
|
4
|
-
<div class="
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
autocomplete="off" aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
|
|
4
|
+
<div class="qld-search-input {{customClass}}">
|
|
5
|
+
<input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
|
|
6
|
+
aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
8
|
+
{{#if suggestions}}
|
|
9
|
+
<div class="suggestions suggestions__group d-none">
|
|
10
|
+
<div class="default-suggestions">
|
|
11
|
+
<div class="suggestions-category mt-16">
|
|
12
|
+
<strong class="suggestions-category-label d-block">Popular services</strong>
|
|
13
|
+
<ul class="mt-2">
|
|
14
|
+
{{#each default_suggestions.popular_services}}
|
|
15
|
+
<li><a href="{{link}}">{{title}}</a></li>
|
|
16
|
+
{{/each}}
|
|
17
|
+
</ul>
|
|
18
|
+
</div>
|
|
20
19
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
<div class="suggestions-category mt-16">
|
|
21
|
+
<strong class="suggestions-category-label d-block">Browse by category</strong>
|
|
22
|
+
<ul class="mt-12 mb-0">
|
|
23
|
+
{{#each default_suggestions.categories}}
|
|
24
|
+
<li><a href="{{link}}">{{title}}</a></li>
|
|
25
|
+
{{/each}}
|
|
26
|
+
</ul>
|
|
27
|
+
</div>
|
|
29
28
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
</
|
|
34
|
-
{{/if}}
|
|
29
|
+
{{#if default_suggestions.options.view_more}}
|
|
30
|
+
<div class="suggestions-category">
|
|
31
|
+
<a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more"
|
|
32
|
+
href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
|
|
35
33
|
</div>
|
|
36
|
-
|
|
34
|
+
{{/if}}
|
|
37
35
|
</div>
|
|
38
|
-
|
|
39
|
-
<button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
|
|
40
|
-
<span class="btn-icon mx-0"></span>
|
|
41
|
-
<span class="btn-label">{{ buttonLabel }}</span>
|
|
42
|
-
</button>
|
|
36
|
+
<div class="dynamic-suggestions"></div>
|
|
43
37
|
</div>
|
|
44
|
-
|
|
38
|
+
{{/if}}
|
|
39
|
+
<button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
|
|
40
|
+
<span class="btn-icon"></span>
|
|
41
|
+
<span class="btn-label">{{ buttonLabel }}</span>
|
|
42
|
+
</button>
|
|
43
|
+
</div>
|
package/dist/package.json
CHANGED
package/package.json
CHANGED
|
@@ -400,37 +400,25 @@
|
|
|
400
400
|
}
|
|
401
401
|
|
|
402
402
|
&-site-search {
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
403
|
+
display: none;
|
|
404
|
+
z-index: 1;
|
|
405
|
+
position: absolute;
|
|
406
|
+
left: 0;
|
|
407
|
+
right: 0;
|
|
408
|
+
top: 0.4rem;
|
|
409
|
+
padding: 1rem var(--qld-container-padding-x);
|
|
410
|
+
background-color: var(--#{$prefix}header-color-bg);
|
|
407
411
|
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
&.is-open {
|
|
411
|
-
z-index: 1;
|
|
412
|
-
display: block;
|
|
413
|
-
position: absolute;
|
|
414
|
-
left: 0;
|
|
415
|
-
right: 0;
|
|
416
|
-
top: 0.4rem;
|
|
417
|
-
padding: 1rem 0;
|
|
418
|
-
background-color: var(--#{$prefix}header-color-bg);
|
|
419
|
-
}
|
|
420
|
-
&.is-closed {
|
|
421
|
-
display: none;
|
|
422
|
-
}
|
|
412
|
+
&.is-open {
|
|
413
|
+
display: block;
|
|
423
414
|
}
|
|
424
415
|
|
|
425
|
-
// Some default styling overrides.
|
|
426
416
|
@include media-breakpoint-up(lg) {
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
.qld-search-input {
|
|
433
|
-
min-width: auto;
|
|
417
|
+
z-index: unset;
|
|
418
|
+
display: block;
|
|
419
|
+
position: static;
|
|
420
|
+
padding: 0;
|
|
421
|
+
background-color: transparent;
|
|
434
422
|
}
|
|
435
423
|
}
|
|
436
424
|
}
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
button.nav-link {
|
|
60
60
|
background-color: var(--dropdown-show-btn-bg);
|
|
61
61
|
&::after {
|
|
62
|
-
transform: rotate(180deg);
|
|
62
|
+
transform: rotate(-180deg);
|
|
63
63
|
transition: transform var(--animation-time) ease-in;
|
|
64
64
|
}
|
|
65
65
|
}
|
|
@@ -267,7 +267,7 @@
|
|
|
267
267
|
--text-color: var(--#{$prefix}light-text-text);
|
|
268
268
|
--border-color: var(--#{$prefix}default-border);
|
|
269
269
|
--header-color: var(--#{$prefix}default-background);
|
|
270
|
-
--action-icon-color: var(--#{$prefix}
|
|
270
|
+
--action-icon-color: var(--#{$prefix}light-action-secondary);
|
|
271
271
|
--action-icon-color_active: var(--text-color);
|
|
272
272
|
--mobile-only-display: none;
|
|
273
273
|
--visibility-display: hidden;
|
|
@@ -475,10 +475,11 @@
|
|
|
475
475
|
.navbar-nav a.nav-link,
|
|
476
476
|
a.dropdown-item {
|
|
477
477
|
color: var(--link-color);
|
|
478
|
-
padding: 0.
|
|
478
|
+
padding-block: 0.625rem;
|
|
479
|
+
padding-inline: 0.75rem;
|
|
479
480
|
display: flex;
|
|
480
481
|
line-height: 2rem;
|
|
481
|
-
gap:
|
|
482
|
+
gap: 0.5rem;
|
|
482
483
|
align-items: center;
|
|
483
484
|
&:hover {
|
|
484
485
|
text-decoration: underline;
|
|
@@ -505,7 +506,7 @@
|
|
|
505
506
|
}
|
|
506
507
|
&.show {
|
|
507
508
|
&:after {
|
|
508
|
-
transform: rotate(180deg);
|
|
509
|
+
transform: rotate(-180deg);
|
|
509
510
|
transition: transform var(--animation-time) ease-in;
|
|
510
511
|
}
|
|
511
512
|
}
|
|
@@ -578,6 +579,7 @@
|
|
|
578
579
|
background-color: var(--action-icon-color);
|
|
579
580
|
height: 1.25rem;
|
|
580
581
|
width: 1.25rem;
|
|
582
|
+
min-width: 1.25rem;
|
|
581
583
|
margin-inline-start: auto;
|
|
582
584
|
border: 0;
|
|
583
585
|
transform: scaleX(var(--icon-dir));
|
|
@@ -530,7 +530,7 @@ export const Default = {
|
|
|
530
530
|
}
|
|
531
531
|
.navbar #burgerCloseBtn::before {
|
|
532
532
|
--nav-header-icon-color: var(--#{$prefix}brand-accent);
|
|
533
|
-
background-color: var(--nav-header-icon-color, #
|
|
533
|
+
background-color: var(--nav-header-icon-color, #ffe500);
|
|
534
534
|
}
|
|
535
535
|
}
|
|
536
536
|
@media (width >= 992px) {
|
|
@@ -9,4 +9,4 @@ import * as SearchInputStories from "./searchInput.stories";
|
|
|
9
9
|
|
|
10
10
|
## Design resources
|
|
11
11
|
|
|
12
|
-
- [Component library
|
|
12
|
+
- [Component library(Figma)](https://www.figma.com/design/qKsxl3ogIlBp7dafgxXuCA/QLD-GOV-DDS?node-id=11017-307599&t=NGmPmPhkUQMN7qQw-0)
|
|
@@ -4,44 +4,42 @@ exports[`SearchInput > Renders as expected 1`] = `
|
|
|
4
4
|
"<!--
|
|
5
5
|
QGDS Component: Search input
|
|
6
6
|
-->
|
|
7
|
-
<div class="
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
autocomplete="off" aria-label="Search website" data-collection="qgov~sp-search" data-profile="qld" data-numranks="10" data-tiers="off" data-suggestions="https://discover.search.qld.gov.au/s/suggest.json" data-results-url="https://discover.search.qld.gov.au/s/search.json" />
|
|
7
|
+
<div class="qld-search-input ">
|
|
8
|
+
<input id="search" name="query" class="form-control" type="text" autocomplete="off"
|
|
9
|
+
aria-label="Search website" data-collection="qgov~sp-search" data-profile="qld" data-numranks="10" data-tiers="off" data-suggestions="https://discover.search.qld.gov.au/s/suggest.json" data-results-url="https://discover.search.qld.gov.au/s/search.json" />
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
11
|
+
<div class="suggestions suggestions__group d-none">
|
|
12
|
+
<div class="default-suggestions">
|
|
13
|
+
<div class="suggestions-category mt-16">
|
|
14
|
+
<strong class="suggestions-category-label d-block">Popular services</strong>
|
|
15
|
+
<ul class="mt-2">
|
|
16
|
+
<li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application">Apply for leave</a></li>
|
|
17
|
+
<li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level">Apply for higher duties or relieving at level</a></li>
|
|
18
|
+
<li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee">Extend a temporary or casual employee</a></li>
|
|
19
|
+
<li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment">Hire a staff member (recruitment)</a></li>
|
|
20
|
+
</ul>
|
|
21
|
+
</div>
|
|
23
22
|
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
23
|
+
<div class="suggestions-category mt-16">
|
|
24
|
+
<strong class="suggestions-category-label d-block">Browse by category</strong>
|
|
25
|
+
<ul class="mt-12 mb-0">
|
|
26
|
+
<li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines">Search for directives, policies, circulars, and guidelines</a></li>
|
|
27
|
+
<li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits">Employee pay and benefits</a></li>
|
|
28
|
+
<li><a href="https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services">Queensland Shared Services</a></li>
|
|
29
|
+
<li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development">Career development</a></li>
|
|
30
|
+
</ul>
|
|
31
|
+
</div>
|
|
33
32
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
</
|
|
33
|
+
<div class="suggestions-category">
|
|
34
|
+
<a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more"
|
|
35
|
+
href="/queenslanders">Browse all categories</a>
|
|
37
36
|
</div>
|
|
38
|
-
<div class="dynamic-suggestions"></div>
|
|
39
37
|
</div>
|
|
40
|
-
<
|
|
41
|
-
<span class="btn-icon mx-0"></span>
|
|
42
|
-
<span class="btn-label">Search</span>
|
|
43
|
-
</button>
|
|
38
|
+
<div class="dynamic-suggestions"></div>
|
|
44
39
|
</div>
|
|
45
|
-
|
|
46
|
-
"
|
|
40
|
+
<button class="btn btn-primary" type="submit" id="search-button">
|
|
41
|
+
<span class="btn-icon"></span>
|
|
42
|
+
<span class="btn-label">Search</span>
|
|
43
|
+
</button>
|
|
44
|
+
</div>"
|
|
47
45
|
`;
|
|
@@ -1,44 +1,43 @@
|
|
|
1
1
|
<!--
|
|
2
2
|
QGDS Component: Search input
|
|
3
3
|
-->
|
|
4
|
-
<div class="
|
|
5
|
-
<
|
|
6
|
-
|
|
7
|
-
autocomplete="off" aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
|
|
4
|
+
<div class="qld-search-input {{customClass}}">
|
|
5
|
+
<input id="{{ inputID }}" name="{{ inputName }}" class="form-control" type="text" autocomplete="off"
|
|
6
|
+
aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
8
|
+
{{#if suggestions}}
|
|
9
|
+
<div class="suggestions suggestions__group d-none">
|
|
10
|
+
<div class="default-suggestions">
|
|
11
|
+
<div class="suggestions-category mt-16">
|
|
12
|
+
<strong class="suggestions-category-label d-block">Popular services</strong>
|
|
13
|
+
<ul class="mt-2">
|
|
14
|
+
{{#each default_suggestions.popular_services}}
|
|
15
|
+
<li><a href="{{link}}">{{title}}</a></li>
|
|
16
|
+
{{/each}}
|
|
17
|
+
</ul>
|
|
18
|
+
</div>
|
|
20
19
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
20
|
+
<div class="suggestions-category mt-16">
|
|
21
|
+
<strong class="suggestions-category-label d-block">Browse by category</strong>
|
|
22
|
+
<ul class="mt-12 mb-0">
|
|
23
|
+
{{#each default_suggestions.categories}}
|
|
24
|
+
<li><a href="{{link}}">{{title}}</a></li>
|
|
25
|
+
{{/each}}
|
|
26
|
+
</ul>
|
|
27
|
+
</div>
|
|
29
28
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
</
|
|
34
|
-
{{/if}}
|
|
29
|
+
{{#if default_suggestions.options.view_more}}
|
|
30
|
+
<div class="suggestions-category">
|
|
31
|
+
<a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more"
|
|
32
|
+
href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
|
|
35
33
|
</div>
|
|
36
|
-
|
|
34
|
+
{{/if}}
|
|
37
35
|
</div>
|
|
38
|
-
|
|
39
|
-
<button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
|
|
40
|
-
<span class="btn-icon mx-0"></span>
|
|
41
|
-
<span class="btn-label">{{ buttonLabel }}</span>
|
|
42
|
-
</button>
|
|
36
|
+
<div class="dynamic-suggestions"></div>
|
|
43
37
|
</div>
|
|
44
|
-
|
|
38
|
+
{{/if}}
|
|
39
|
+
<button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
|
|
40
|
+
<span class="btn-icon"></span>
|
|
41
|
+
<span class="btn-label">{{ buttonLabel }}</span>
|
|
42
|
+
</button>
|
|
43
|
+
</div>
|