@qld-gov-au/qgds-bootstrap5 1.1.40 → 1.1.41
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/button/button.hbs +48 -30
- package/dist/assets/components/bs5/containerLayout/containerLayout.hbs +100 -0
- package/dist/assets/components/bs5/formcheck/formcheck.hbs +1 -1
- package/dist/assets/components/bs5/head/head.hbs +1 -1
- package/dist/assets/components/bs5/iconLink/iconLink.hbs +41 -0
- package/dist/assets/components/bs5/navbar/navbar.hbs +65 -245
- package/dist/assets/components/bs5/searchInput/searchInput.hbs +8 -10
- package/dist/assets/css/qld.bootstrap.css +1 -1
- package/dist/assets/css/qld.bootstrap.css.map +3 -3
- package/dist/assets/js/bootstrap.bundle.js +3 -6
- package/dist/assets/js/bootstrap.bundle.js.map +1 -1
- package/dist/assets/js/bootstrap.bundle.min.js +2 -2
- package/dist/assets/js/bootstrap.bundle.min.js.map +1 -1
- package/dist/assets/js/bootstrap.js +3 -6
- package/dist/assets/js/bootstrap.min.js +2 -2
- package/dist/assets/js/bootstrap.min.js.map +1 -1
- package/dist/assets/js/handlebars.init.min.js +311 -336
- package/dist/assets/js/handlebars.init.min.js.map +4 -4
- package/dist/assets/js/handlebars.partials.js +4 -0
- package/dist/assets/js/qld.bootstrap.min.js +9 -9
- package/dist/assets/js/qld.bootstrap.min.js.map +4 -4
- package/dist/assets/node/handlebars.init.min.js +187 -35
- package/dist/assets/node/handlebars.init.min.js.map +3 -3
- package/dist/components/bs5/button/button.hbs +48 -30
- package/dist/components/bs5/containerLayout/containerLayout.hbs +100 -0
- package/dist/components/bs5/formcheck/formcheck.hbs +1 -1
- package/dist/components/bs5/head/head.hbs +1 -1
- package/dist/components/bs5/iconLink/iconLink.hbs +41 -0
- package/dist/components/bs5/navbar/navbar.hbs +65 -245
- package/dist/components/bs5/searchInput/searchInput.hbs +8 -10
- package/dist/components/handlebars.partials.js +4 -0
- package/dist/package.json +2 -2
- package/dist/sample-data/button/button.data.json +10 -8
- package/dist/sample-data/formcheck/stories/checkbox/checkbox.data.json +51 -46
- package/dist/sample-data/formcheck/stories/radio/radio.data.json +51 -46
- package/dist/sample-data/iconLink/iconLink.data.json +77 -0
- package/dist/sample-data/navbar/navbar.data.json +191 -0
- package/dist/sample-data/searchInput/searchInput.data.json +2 -3
- package/dist/sample-data/tabs/tabs.data.json +45 -44
- package/package.json +2 -2
- package/src/components/bs5/breadcrumbs/breadcrumbs.functions.js +2 -0
- package/src/components/bs5/breadcrumbs/breadcrumbs.scss +1 -1
- package/src/components/bs5/button/button.data.json +10 -8
- package/src/components/bs5/button/button.hbs +48 -30
- package/src/components/bs5/button/button.scss +61 -0
- package/src/components/bs5/button/button.stories.js +21 -2
- package/src/components/bs5/containerLayout/containerLayout.hbs +100 -0
- package/src/components/bs5/containerLayout/containerLayout.stories.js +83 -0
- package/src/components/bs5/formcheck/formcheck.hbs +1 -1
- package/src/components/bs5/formcheck/formcheck.scss +161 -139
- package/src/components/bs5/formcheck/stories/checkbox/checkbox.data.json +51 -46
- package/src/components/bs5/formcheck/stories/radio/radio.data.json +51 -46
- package/src/components/bs5/iconLink/iconLink.data.json +77 -0
- package/src/components/bs5/iconLink/iconLink.hbs +41 -0
- package/src/components/bs5/iconLink/iconLink.js +20 -0
- package/src/components/bs5/iconLink/iconLink.mdx +16 -0
- package/src/components/bs5/iconLink/iconLink.scss +57 -0
- package/src/components/bs5/iconLink/iconLink.stories.js +127 -0
- package/src/components/bs5/icons/icons.scss +79 -72
- package/src/components/bs5/inpagenav/inpagenav.scss +37 -37
- package/src/components/bs5/navbar/Navbar.js +2 -9
- package/src/components/bs5/navbar/navbar.data.json +191 -0
- package/src/components/bs5/navbar/navbar.functions.js +48 -196
- package/src/components/bs5/navbar/navbar.hbs +65 -245
- package/src/components/bs5/navbar/navbar.scss +585 -518
- package/src/components/bs5/navbar/navbar.stories.js +532 -0
- package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap +9 -8
- package/src/components/bs5/searchInput/search.functions.js +94 -63
- package/src/components/bs5/searchInput/searchInput.data.json +2 -3
- package/src/components/bs5/searchInput/searchInput.hbs +8 -10
- package/src/components/bs5/searchInput/searchInput.scss +296 -255
- package/src/components/bs5/searchInput/searchInput.test.js +97 -88
- package/src/components/bs5/tabs/tabs.data.json +45 -44
- package/src/components/bs5/tabs/tabs.scss +544 -500
- package/src/components/bs5/tabs/tabs.stories.js +81 -51
- package/src/components/common/layout/container.scss +22 -0
- package/src/components/common/layout/content.scss +11 -4
- package/src/components/common/layout/grid.scss +26 -0
- package/src/css/main.scss +5 -3
- package/src/css/qld-variables.scss +102 -81
- package/src/js/handlebars.partials.js +4 -0
- package/src/components/bs5/navbar/_colours.scss +0 -85
- package/src/components/bs5/navbar/_icons.scss +0 -64
|
@@ -3,40 +3,58 @@
|
|
|
3
3
|
<span class="qld-icon qld-icon-md {{iconClass}} {{iconPosition}}" aria-hidden="true"></span>
|
|
4
4
|
{{~/inline}}
|
|
5
5
|
|
|
6
|
+
{{!-- Progress spinner partial --}}
|
|
7
|
+
{{#*inline "progressSpinner"~}}
|
|
8
|
+
<div class="spinner-border"></div>
|
|
9
|
+
{{~/inline}}
|
|
10
|
+
|
|
6
11
|
{{#unless islink}}
|
|
7
12
|
|
|
8
|
-
<button class="btn {{variantClass}} {{label}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}}>
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
{{
|
|
21
|
-
|
|
13
|
+
<button class="btn {{variantClass}} {{#if isprogress}}btn-progress{{/if}} {{label}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}} {{#if isprogress}}disabled aria-live="polite"{{/if}} {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{{dataatts}}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}}>
|
|
14
|
+
{{#if isprogress}}
|
|
15
|
+
{{~>progressSpinner~}}
|
|
16
|
+
{{else}}
|
|
17
|
+
{{#if iconClass~}}
|
|
18
|
+
{{#ifCond iconPosition '==' 'leading'}}
|
|
19
|
+
{{~>buttonIcon~}}
|
|
20
|
+
{{/ifCond}}
|
|
21
|
+
{{/if}}
|
|
22
|
+
{{/if}}
|
|
23
|
+
|
|
24
|
+
<span class="btn-label-default">{{~label~}}</span>
|
|
25
|
+
{{#if isprogress}}
|
|
26
|
+
<span class="btn-label-progress">{{~progressLabel~}}</span>
|
|
27
|
+
{{/if}}
|
|
28
|
+
{{#unless isprogress}}
|
|
29
|
+
{{#if iconClass~}}
|
|
30
|
+
{{#ifCond iconPosition '==' 'trailing'}}
|
|
31
|
+
{{~>buttonIcon~}}
|
|
32
|
+
{{/ifCond}}
|
|
33
|
+
{{/if}}
|
|
34
|
+
{{/unless}}
|
|
22
35
|
</button>
|
|
23
36
|
|
|
24
37
|
{{else}}
|
|
38
|
+
<a class="btn {{variantClass}} {{#if isdisabled}}disabled {{/if}}{{#if isprogress}}disabled btn-progress{{/if}}" {{#if isdisabled}}aria-disabled="true"{{/if}} {{#if isprogress}}aria-live="polite"{{/if}} href="{{href}}" target="{{target}}" {{#if arialabel}}aria-label="{{arialabel}}"{{/if}} {{#if progressLabel}}data-progress-label="{{progressLabel}}"{{/if}} {{{dataatts}}}>
|
|
39
|
+
{{#if isprogress}}
|
|
40
|
+
{{~>progressSpinner~}}
|
|
41
|
+
{{else}}
|
|
42
|
+
{{#if iconClass~}}
|
|
43
|
+
{{#ifCond iconPosition '==' 'leading'}}
|
|
44
|
+
{{~> buttonIcon~}}
|
|
45
|
+
{{/ifCond}}
|
|
46
|
+
{{/if}}
|
|
47
|
+
{{/if}}
|
|
48
|
+
|
|
49
|
+
<span class="btn-label-default">{{~label~}}</span>
|
|
50
|
+
<span class="btn-label-progress">{{~progressLabel~}}</span>
|
|
25
51
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
{{#if iconClass~}}
|
|
36
|
-
{{#ifCond iconPosition '==' 'trailing'}}
|
|
37
|
-
{{~> buttonIcon~}}
|
|
38
|
-
{{/ifCond}}
|
|
39
|
-
{{/if}}
|
|
40
|
-
</a>
|
|
41
|
-
|
|
52
|
+
{{#unless isprogress}}
|
|
53
|
+
{{#if iconClass~}}
|
|
54
|
+
{{#ifCond iconPosition '==' 'trailing'}}
|
|
55
|
+
{{~> buttonIcon~}}
|
|
56
|
+
{{/ifCond}}
|
|
57
|
+
{{/if}}
|
|
58
|
+
{{/unless}}
|
|
59
|
+
</a>
|
|
42
60
|
{{/unless}}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>{{title}}</title>
|
|
7
|
+
|
|
8
|
+
<link rel="stylesheet" href="/assets/css/qld.bootstrap.css">
|
|
9
|
+
<script type="text/javascript" async src="/assets/js/bootstrap.min.js"></script>
|
|
10
|
+
<script type="text/javascript" async src="/assets/js/qld.bootstrap.min.js"></script>
|
|
11
|
+
|
|
12
|
+
</head>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
|
|
16
|
+
<div class="{{wrapperClasses}} {{join debugClasses }}">
|
|
17
|
+
|
|
18
|
+
{{> globalAlert globalAlert }}
|
|
19
|
+
{{> header header}}
|
|
20
|
+
{{> navbar navbar}}
|
|
21
|
+
|
|
22
|
+
<main id="content">
|
|
23
|
+
|
|
24
|
+
<!-- breadcrumbs-->
|
|
25
|
+
{{#if breadcrumbsData }}
|
|
26
|
+
<div class="alt px-0">
|
|
27
|
+
<div class="container">
|
|
28
|
+
{{> breadcrumbs breadcrumbsData }}
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
{{/if}}
|
|
32
|
+
|
|
33
|
+
<!-- Content Wrapper -->
|
|
34
|
+
<div class="container mt-40 mt-lg-64">
|
|
35
|
+
<div class="row">
|
|
36
|
+
|
|
37
|
+
<!-- Side Navigation -->
|
|
38
|
+
{{#if sidenavData }}
|
|
39
|
+
<div class="col-12 col-lg-3 order-last order-lg-first mt-5 mt-lg-0">
|
|
40
|
+
{{> sidenav sidenavData }}
|
|
41
|
+
</div>
|
|
42
|
+
{{/if}}
|
|
43
|
+
|
|
44
|
+
|
|
45
|
+
<!-- Content body -->
|
|
46
|
+
<div class="col-12 col-lg-8">
|
|
47
|
+
|
|
48
|
+
<!-- Content has an additional 2rem padding-x -->
|
|
49
|
+
<div class="qld-content-body px-32">
|
|
50
|
+
|
|
51
|
+
{{!-- Main content area --}}
|
|
52
|
+
<h1>{{title}}</h1>
|
|
53
|
+
|
|
54
|
+
{{#if abstract}}
|
|
55
|
+
<div class="qld-abstract">
|
|
56
|
+
{{{ abstract }}}
|
|
57
|
+
</div>
|
|
58
|
+
{{/if}}
|
|
59
|
+
|
|
60
|
+
{{> inpagenav inpageNavData }}
|
|
61
|
+
|
|
62
|
+
<h2 id="section-one">Section heading</h2>
|
|
63
|
+
<p>This is the main content inside the wrapper.</p>
|
|
64
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum purus at efficitur imperdiet. Maecenas placerat accumsan nulla, vel semper enim. In turpis.</p>
|
|
65
|
+
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam impedit repudiandae nulla recusandae soluta officia possimus, nostrum nisi fuga laboriosam provident, est molestiae alias blanditiis explicabo consequuntur ullam expedita! Ab.</p>
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
<h3>Content heading</h3>
|
|
69
|
+
<p>This is the main content inside the wrapper.</p>
|
|
70
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum purus at efficitur imperdiet. Maecenas placerat accumsan nulla, vel semper enim. In turpis.</p>
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
<h2 id="section-two">Section heading</h2>
|
|
74
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum purus at efficitur imperdiet. Maecenas placerat accumsan nulla, vel semper enim. In turpis.</p>
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
<section class="emphasis light">
|
|
78
|
+
<h2>Section heading (h2)</h2>
|
|
79
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum purus at efficitur imperdiet. Maecenas placerat accumsan nulla, vel semper enim. In turpis.</p>
|
|
80
|
+
</section>
|
|
81
|
+
|
|
82
|
+
</div><!-- // content-body -->
|
|
83
|
+
</div><!-- // content-body-column -->
|
|
84
|
+
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<!-- Content Footer -->
|
|
88
|
+
{{>contentFooter contentFooterData }}
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
{{> footer footer}}
|
|
94
|
+
|
|
95
|
+
</div>
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
</body>
|
|
100
|
+
</html>
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
|
|
15
15
|
{{#each listitems}}
|
|
16
16
|
<div class="form-check">
|
|
17
|
-
<input class="form-check-input" type="{{type}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}}>
|
|
17
|
+
<input class="form-check-input" type="{{type}}" name="{{name}}" id="{{id}}" value="{{value}}" {{#if isDisabled}}disabled{{/if}} {{#if isChecked}}checked{{/if}}>
|
|
18
18
|
<label class="form-check-label" for="{{id}}">
|
|
19
19
|
{{label}}
|
|
20
20
|
</label>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.
|
|
2
|
+
<!-- VERSION_DETAILS={"project_id":"@qld-gov-au/qgds-bootstrap5","version":"1.1.41","branch":"HEAD","tag":"v1.1.41","commit":"dc074d340143a0bc97c588b7b37469635a50cb8f","majorVersion":"v1"} -->
|
|
3
3
|
|
|
4
4
|
{{! Select environment, used verbatium if not using predefind key
|
|
5
5
|
cdn := PROD|STAGING|BETA|TEST|DEV|???
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
{{!-- Link icon partial --}}
|
|
2
|
+
{{#*inline "linkIcon"~}}
|
|
3
|
+
<span class="qld-icon qld-icon-md {{iconClass}} {{iconPosition}}" aria-hidden="true"></span>
|
|
4
|
+
{{~/inline}}
|
|
5
|
+
|
|
6
|
+
{{#*inline "link"~}}
|
|
7
|
+
<a class="icon-link" {{#if id}}id="{{id}}"{{/if}}
|
|
8
|
+
href="{{url}}"
|
|
9
|
+
target="{{target}}"
|
|
10
|
+
{{#if arialabel}}aria-label="{{arialabel}}"{{/if}}
|
|
11
|
+
{{#if download}}download="{{download}}"{{/if}}
|
|
12
|
+
>
|
|
13
|
+
{{#if iconClass~}}
|
|
14
|
+
{{#ifCond iconPosition '==' 'leading'}}
|
|
15
|
+
{{~> linkIcon~}}
|
|
16
|
+
{{/ifCond}}
|
|
17
|
+
{{/if}}
|
|
18
|
+
|
|
19
|
+
{{label}}
|
|
20
|
+
|
|
21
|
+
{{#if iconClass~}}
|
|
22
|
+
{{#ifCond iconPosition '==' 'trailing'}}
|
|
23
|
+
{{~> linkIcon~}}
|
|
24
|
+
{{/ifCond}}
|
|
25
|
+
{{/if}}
|
|
26
|
+
|
|
27
|
+
</a>
|
|
28
|
+
{{~/inline}}
|
|
29
|
+
|
|
30
|
+
{{#if linkList~}}
|
|
31
|
+
<ul class="icon-link-list">
|
|
32
|
+
{{#each linkList}}
|
|
33
|
+
<li class="icon-link-item">
|
|
34
|
+
{{~> link~}}
|
|
35
|
+
</li>
|
|
36
|
+
{{/each}}
|
|
37
|
+
</ul>
|
|
38
|
+
|
|
39
|
+
{{else}}
|
|
40
|
+
{{~> link~}}
|
|
41
|
+
{{/if}}
|
|
@@ -1,255 +1,75 @@
|
|
|
1
1
|
<!-- QGDS Partial: Primary navigation -->
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
<h3 class="navbar__heading">Menu</h3>
|
|
11
|
-
<button aria-controls="main-nav" class="navbar__toggle navbar__toggle--close" data-bs-toggle="collapse"
|
|
12
|
-
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
|
|
13
|
-
aria-expanded="false" aria-label="Close menu">
|
|
14
|
-
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon">
|
|
15
|
-
<use href="{{metadata.options.icon-root}}#qld__icon__close"></use>
|
|
16
|
-
</svg>
|
|
17
|
-
<span class="navbar__toggle-text">Close</span>
|
|
18
|
-
</button>
|
|
3
|
+
<nav id="main-nav" class="navbar navbar-expand-lg{{#if metadata.alternativeColor}} dark{{/if}}{{#if metadata.verticalOrientation}} vertical{{/if}}" aria-label="Website navigation" role="navigation">
|
|
4
|
+
<div id="navbarNav" class="container">
|
|
5
|
+
<div class="nav-header">
|
|
6
|
+
<span class="navbar-brand" href="#">{{#if metadata.navbarBrandName}}{{metadata.navbarBrandName}}{{/if}}</span>
|
|
7
|
+
<button id="burgerCloseBtn" type="button" class="navbar-btn btn-close" data-bs-toggle="collapse"
|
|
8
|
+
aria-label="Close" data-bs-target="#main-nav" aria-expanded="false"
|
|
9
|
+
aria-controls="collapseExample">Close</button>
|
|
19
10
|
</div>
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
</a>
|
|
37
|
-
</li>
|
|
38
|
-
{{#each navigation}}
|
|
39
|
-
{{#if dropdown_enabled}}
|
|
40
|
-
<li class="nav-item dropdown">
|
|
41
|
-
<!-- Desktop primary dropdown style and behaviour -->
|
|
42
|
-
<a class="nav-link dropdown-toggle desktop-only" href="{{target_url}}" id="menuDropdown"
|
|
43
|
-
role="button" aria-controls="" data-bs-toggle="dropdown" aria-expanded="false"
|
|
44
|
-
aria-label="Toggle navigation">
|
|
45
|
-
{{title}}
|
|
46
|
-
<svg class="toggle_icon">
|
|
47
|
-
<use href="{{@root.metadata.options.icon-root}}#qld__icon__chevron-down"></use>
|
|
48
|
-
</svg>
|
|
49
|
-
</a>
|
|
50
|
-
{{#if navigation_items}}
|
|
51
|
-
<ul id="dropdown-menu" class="dropdown-menu" role="menu"
|
|
52
|
-
data-bs-popper="none">
|
|
53
|
-
<div class="row dropdown-menu__inner">
|
|
54
|
-
{{#if dropdown_options}}
|
|
55
|
-
<div class="col-12">
|
|
56
|
-
<a class="dropdown-menu__featured" href="{{dropdown_options.feature_link_href}}">
|
|
57
|
-
<span class="">{{dropdown_options.feature_link_value}}</span>
|
|
58
|
-
<svg class="chevron__icon">
|
|
59
|
-
<use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right"></use>
|
|
60
|
-
</svg>
|
|
61
|
-
</a>
|
|
62
|
-
{{#if dropdown_options.feature_link_description}}
|
|
63
|
-
<p class="dropdown-menu__description">{{dropdown_options.feature_link_description}}</p>
|
|
11
|
+
<div class="navbar-collapse">
|
|
12
|
+
<ul class="navbar-nav">
|
|
13
|
+
{{#each navigation}}
|
|
14
|
+
{{#if navigationItems}}
|
|
15
|
+
<li class="nav-item dropdown{{#if @first}} active{{/if}}{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}">
|
|
16
|
+
<a class="nav-link{{#unless ../metadata.verticalOrientation}} dropdown-toggle{{/unless}}" aria-current="page" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}} role="button" data-bs-toggle="dropdown"
|
|
17
|
+
aria-expanded="false">
|
|
18
|
+
{{#if iconName}}
|
|
19
|
+
<span class="qld-icon qld-icon-md {{iconName}}" aria-hidden="true"></span>
|
|
20
|
+
{{#if hideLabel}}
|
|
21
|
+
<span class="visually-hidden">{{text}}</span>
|
|
22
|
+
{{else}}
|
|
23
|
+
{{text}}
|
|
24
|
+
{{/if}}
|
|
25
|
+
{{else}}
|
|
26
|
+
{{text}}
|
|
64
27
|
{{/if}}
|
|
65
|
-
<hr>
|
|
66
|
-
</div>
|
|
67
|
-
{{/if}}
|
|
68
|
-
{{#each navigation_items}}
|
|
69
|
-
<li class="col-lg-4 col-sm-12">
|
|
70
|
-
<a href="{{target_url}}" class="dropdown-item">
|
|
71
|
-
<span class="dropdown-item__text">{{title}}</span>
|
|
72
|
-
<svg class="chevron__icon">
|
|
73
|
-
<use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right"></use>
|
|
74
|
-
</svg>
|
|
75
28
|
</a>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
<
|
|
88
|
-
<
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
<!-- Mobile only -->
|
|
99
|
-
<div class="nav-item-group mobile-only">
|
|
100
|
-
|
|
101
|
-
<!-- Primary dropdown style and behaviour -->
|
|
102
|
-
<a class="nav-link first-element" href="{{target_url}}">
|
|
103
|
-
{{title}}
|
|
104
|
-
</a>
|
|
105
|
-
|
|
106
|
-
<button class="dropdown-toggle second-element" id="menuDropdown" role="button" aria-controls=""
|
|
107
|
-
data-bs-toggle="dropdown" aria-expanded="false" aria-selected="false"
|
|
108
|
-
aria-label="Toggle navigation">
|
|
109
|
-
<svg class="toggle_icon">
|
|
110
|
-
<use href="{{@root.metadata.options.icon-root}}#qld__icon__chevron-down"></use>
|
|
111
|
-
</svg>
|
|
112
|
-
<span class="visually-hidden">Expand</span>
|
|
113
|
-
</button>
|
|
114
|
-
|
|
115
|
-
{{#if navigation_items}}
|
|
116
|
-
<ul id="dropdown-menu" class="dropdown-menu" role="menu"
|
|
117
|
-
data-bs-popper="none">
|
|
118
|
-
<div class="row dropdown-menu__inner">
|
|
119
|
-
{{#if dropdown_options}}
|
|
120
|
-
<div class="col-12">
|
|
121
|
-
<a class="dropdown-menu__featured" href="{{dropdown_options.feature_link_href}}">
|
|
122
|
-
<span class="">{{dropdown_options.feature_link_value}}</span>
|
|
123
|
-
<svg class="chevron__icon">
|
|
124
|
-
<use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
|
|
125
|
-
</use>
|
|
126
|
-
</svg>
|
|
127
|
-
</a>
|
|
128
|
-
{{#if dropdown_options.feature_link_description}}
|
|
129
|
-
<p class="dropdown-menu__description">{{dropdown_options.feature_link_description}}
|
|
130
|
-
</p>
|
|
29
|
+
<button class="nav-link dropdown-toggle" aria-current="page" aria-controls="" data-bs-toggle="dropdown" aria-expanded="false" aria-selected="false" aria-label="Toggle navigation">
|
|
30
|
+
<span class="visually-hidden">Expand</span>
|
|
31
|
+
</button>
|
|
32
|
+
<ul class="dropdown-menu">
|
|
33
|
+
<li>
|
|
34
|
+
<a class="dropdown-item parent-link" role="button" aria-controls aria-current="page" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>{{#if dropdownOptions.alternativeText}}{{dropdownOptions.alternativeText}}{{else}}{{title}}{{/if}}</a>
|
|
35
|
+
{{#if dropdownOptions.description}}
|
|
36
|
+
<p>{{dropdownOptions.description}}</p>
|
|
37
|
+
{{/if}}
|
|
38
|
+
</li>
|
|
39
|
+
{{#each navigationItems}}
|
|
40
|
+
<li{{#if mobileOnly}} class="mobile-only"{{/if}}>
|
|
41
|
+
<a class="dropdown-item" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>{{text}}</a>
|
|
42
|
+
{{#if description}}
|
|
43
|
+
<p>{{description}}</p>
|
|
44
|
+
{{/if}}
|
|
45
|
+
</li>
|
|
46
|
+
{{/each}}
|
|
47
|
+
{{#if dropdownOptions.viewAllHref}}
|
|
48
|
+
<li>
|
|
49
|
+
<a class="dropdown-item view-all" href="{{dropdownOptions.viewAllHref}}">View all</a>
|
|
50
|
+
</li>
|
|
131
51
|
{{/if}}
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
<
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
</a>
|
|
144
|
-
{{#if description}}
|
|
145
|
-
<p class="dropdown-item__description">{{description}}</p>
|
|
52
|
+
</ul>
|
|
53
|
+
</li>
|
|
54
|
+
{{else}}
|
|
55
|
+
<li class="nav-item{{#if @first}} active{{/if}}{{#if alternativeColor}} alt{{/if}}{{#if mobileOnly}} mobile-only{{/if}}">
|
|
56
|
+
<a class="nav-link" aria-current="page" href="{{url}}"{{#if target}} target="{{target}}"{{/if}}{{#ifCond target '==' '_blank'}} rel="noopener noreferrer"{{/ifCond}}>
|
|
57
|
+
{{#if iconName}}
|
|
58
|
+
<span class="qld-icon qld-icon-md {{iconName}}" aria-hidden="true"></span>
|
|
59
|
+
{{#if hideLabel}}
|
|
60
|
+
<span class="visually-hidden">{{text}}</span>
|
|
61
|
+
{{else}}
|
|
62
|
+
{{text}}
|
|
146
63
|
{{/if}}
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
{{#if dropdown_options.view_value}}
|
|
150
|
-
<li class="col-12 text-end">
|
|
151
|
-
<hr>
|
|
152
|
-
<a class="dropdown-menu__view_all" href="{{dropdown_options.view_href}}">
|
|
153
|
-
<span>
|
|
154
|
-
{{dropdown_options.view_value}}
|
|
155
|
-
<svg class="chevron__icon">
|
|
156
|
-
<use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
|
|
157
|
-
</use>
|
|
158
|
-
</svg>
|
|
159
|
-
</span>
|
|
160
|
-
</a>
|
|
161
|
-
</li>
|
|
64
|
+
{{else}}
|
|
65
|
+
{{text}}
|
|
162
66
|
{{/if}}
|
|
163
|
-
|
|
164
|
-
|
|
67
|
+
</a>
|
|
68
|
+
</li>
|
|
165
69
|
{{/if}}
|
|
166
|
-
|
|
167
|
-
</
|
|
168
|
-
|
|
169
|
-
<li class="nav-item">
|
|
170
|
-
<a class="nav-link" href="{{target_url}}">{{title}}</a>
|
|
171
|
-
</li>
|
|
172
|
-
{{/if}}
|
|
173
|
-
{{/each }}
|
|
174
|
-
{{#each CTA}}
|
|
175
|
-
<li class="nav-item dropdown CTA_feature">
|
|
176
|
-
<!-- Mobile only -->
|
|
177
|
-
<div class="nav-item-group mobile-only">
|
|
178
|
-
|
|
179
|
-
<!-- Primary dropdown style and behaviour -->
|
|
180
|
-
<a class="nav-link first-element" href="{{target_url}}">
|
|
181
|
-
{{{label}}}
|
|
182
|
-
</a>
|
|
183
|
-
|
|
184
|
-
<button class="dropdown-toggle second-element" id="menuDropdown-{{id}}" role="button"
|
|
185
|
-
aria-controls="" data-bs-toggle="dropdown" aria-expanded="false"
|
|
186
|
-
aria-label="Toggle navigation">
|
|
187
|
-
<svg class="toggle_icon">
|
|
188
|
-
<use href="{{@root.metadata.options.icon-root}}#qld__icon__chevron-down"></use>
|
|
189
|
-
</svg>
|
|
190
|
-
<span class="visually-hidden">Expand</span>
|
|
191
|
-
</button>
|
|
192
|
-
|
|
193
|
-
{{#if dropdown_enabled}}
|
|
194
|
-
<ul id="dropdown-menu-{{id}}" class="dropdown-menu"
|
|
195
|
-
role="menu" data-bs-popper="none">
|
|
196
|
-
<div class="row dropdown-menu__inner">
|
|
197
|
-
{{#if dropdown_options.dropdown_config.groups}}
|
|
198
|
-
<div class="col-12">
|
|
199
|
-
<a class="dropdown-menu__featured" href="{{dropdown_options.view_more_url}}">
|
|
200
|
-
<span class="">{{dropdown_options.view_more_label}}</span>
|
|
201
|
-
<svg class="chevron__icon">
|
|
202
|
-
<use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
|
|
203
|
-
</use>
|
|
204
|
-
</svg>
|
|
205
|
-
</a>
|
|
206
|
-
<hr>
|
|
207
|
-
</div>
|
|
208
|
-
{{#each dropdown_options.dropdown_config.groups}}
|
|
209
|
-
{{#isType ../dropdown_options.dropdown_type "list"}}
|
|
210
|
-
<li class="col-lg-4 col-sm-12">
|
|
211
|
-
<a href="{{url}}" class="dropdown-item" target="{{action}}">
|
|
212
|
-
{{label}}
|
|
213
|
-
<svg class="chevron__icon">
|
|
214
|
-
<use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
|
|
215
|
-
</use>
|
|
216
|
-
</svg>
|
|
217
|
-
</a>
|
|
218
|
-
</li>
|
|
219
|
-
{{/isType}}
|
|
220
|
-
{{#isType ../dropdown_options.dropdown_type "form"}}
|
|
221
|
-
{{#if content}}
|
|
222
|
-
{{{content}}}
|
|
223
|
-
{{/if}}
|
|
224
|
-
{{/isType}}
|
|
225
|
-
|
|
226
|
-
{{/each }}
|
|
227
|
-
{{#if dropdown_options.dropdown_config.view_more}}
|
|
228
|
-
<li class="col-12 text-end">
|
|
229
|
-
<hr>
|
|
230
|
-
<a class="dropdown-menu__view_all"
|
|
231
|
-
href="{{dropdown_options.dropdown_config.view_more_options.url}}"
|
|
232
|
-
target="{{dropdown_options.dropdown_config.view_more_options.target}}">
|
|
233
|
-
<span>
|
|
234
|
-
{{dropdown_options.dropdown_config.view_more_options.label}}
|
|
235
|
-
<svg class="chevron__icon">
|
|
236
|
-
<use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
|
|
237
|
-
</use>
|
|
238
|
-
</svg>
|
|
239
|
-
</span>
|
|
240
|
-
</a>
|
|
241
|
-
</li>
|
|
242
|
-
{{/if}}
|
|
243
|
-
{{/if}}
|
|
244
|
-
</div>
|
|
245
|
-
</ul>
|
|
246
|
-
{{/if}}
|
|
247
|
-
</div>
|
|
248
|
-
</li>
|
|
249
|
-
{{/each}}
|
|
250
|
-
</ul>
|
|
70
|
+
{{/each}}
|
|
71
|
+
</ul>
|
|
72
|
+
</div>
|
|
251
73
|
</div>
|
|
252
|
-
<div id="overlay"
|
|
253
|
-
|
|
254
|
-
</nav>
|
|
255
|
-
<!-- MAIN NAVIGATION END -->
|
|
74
|
+
<div id="overlay"></div>
|
|
75
|
+
</nav>
|
|
@@ -3,14 +3,14 @@
|
|
|
3
3
|
-->
|
|
4
4
|
<div class="container {{variantClass}}">
|
|
5
5
|
<div class="qld-search-input {{customClass}} d-flex">
|
|
6
|
-
<input id="{{ inputID }}" name=" {{ inputName }}" class="form-control" type="text"
|
|
6
|
+
<input id="{{ inputID }}" name=" {{ inputName }}" class="form-control" type="text"
|
|
7
7
|
autocomplete="off" aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
|
|
8
8
|
|
|
9
9
|
{{#if suggestions}}
|
|
10
10
|
<div class="suggestions suggestions__group d-none">
|
|
11
11
|
<div class="default-suggestions">
|
|
12
|
-
<div class="suggestions-category mt-
|
|
13
|
-
<strong class="suggestions-category-label">Popular services</strong>
|
|
12
|
+
<div class="suggestions-category mt-16">
|
|
13
|
+
<strong class="suggestions-category-label d-block">Popular services</strong>
|
|
14
14
|
<ul class="mt-2">
|
|
15
15
|
{{#each default_suggestions.popular_services}}
|
|
16
16
|
<li><a href="{{link}}">{{title}}</a></li>
|
|
@@ -18,11 +18,9 @@
|
|
|
18
18
|
</ul>
|
|
19
19
|
</div>
|
|
20
20
|
|
|
21
|
-
<
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<strong class="suggestions-category-label">Browse by category</strong>
|
|
25
|
-
<ul class="mt-2">
|
|
21
|
+
<div class="suggestions-category mt-16">
|
|
22
|
+
<strong class="suggestions-category-label d-block">Browse by category</strong>
|
|
23
|
+
<ul class="mt-12 mb-0">
|
|
26
24
|
{{#each default_suggestions.categories}}
|
|
27
25
|
<li><a href="{{link}}">{{title}}</a></li>
|
|
28
26
|
{{/each}}
|
|
@@ -30,8 +28,8 @@
|
|
|
30
28
|
</div>
|
|
31
29
|
|
|
32
30
|
{{#if default_suggestions.options.view_more}}
|
|
33
|
-
<div class="suggestions-category
|
|
34
|
-
<a href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
|
|
31
|
+
<div class="suggestions-category">
|
|
32
|
+
<a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more" href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
|
|
35
33
|
</div>
|
|
36
34
|
{{/if}}
|
|
37
35
|
</div>
|