@qld-gov-au/qgds-bootstrap5 1.0.21 → 1.1.1

package/dist/assets/components/bs5/inpageAlert/inpageAlert.hbs

@@ -0,0 +1,6 @@
+<div class="alert {{variantClass}} {{customClass}}" role="alert">
+    {{#if heading}}
+    <div class="alert-heading" role="heading">{{{ heading }}}</div>
+    {{/if}}
+    {{{ content }}}
+</div>

package/dist/assets/components/bs5/inpagenav/inpagenav.hbs

@@ -0,0 +1,15 @@
+<!-- QGDS Partial: inpage-nav -->
+
+<div class="qld-inpage-nav">
+
+    <h2 class="nav-title">{{navtitle}}</h2>
+
+    <ul class="nav">
+        {{#each navitems}}
+        <li class="nav-item">
+            <a class="nav-link" href="#{{linkid}}">{{linktext}}</a>
+        </li>
+        {{/each}}
+    </ul>
+
+</div>

package/dist/assets/components/bs5/mainContainerWrapper/mainContainerWrapper.hbs

@@ -0,0 +1,28 @@
+{{> header header}}
+{{> navbar navbar}}
+{{> globalAlert globalAlert}}
+<main>
+  {{#> breadcrumbsWrapper}}
+    {{> breadcrumbs breadcrumbs}}
+  {{/breadcrumbsWrapper}}
+  <!-- Main content-->
+  <div class="container-fluid">
+    <div class="container qld-content">
+      <div class="row">
+        <!-- Side Nav -->
+        {{#> sidenavWrapper}}
+          {{> sidenav sidenav}}
+        {{/sidenavWrapper}}
+        {{#> contentWrapper}}
+        {{> @partial-block }}
+        {{/contentWrapper}}
+      </div> <!-- end row -->
+    </div>
+
+    {{#>contentFooterWrapper}}
+      {{> contentFooter contentFooter }}
+    {{/contentFooterWrapper}}
+
+  </div>
+</main>
+{{> footer footer}}

package/dist/assets/components/bs5/mainContainerWrapper/mainContainerWrapper.test.hbs

@@ -0,0 +1,6 @@
+{{#> mainContainerWrapper}}
+  <p>inner mainContainerWrapper data</p>
+  <p>content goes here dd</p>
+{{/mainContainerWrapper}}
+
+

package/dist/assets/components/bs5/metaDcTerms/metaDcTerms.hbs

@@ -0,0 +1,19 @@
+<!-- DCTERMS https://www.dublincore.org/specifications/dublin-core/dcmi-terms/-->
+{{#if dcTerms}}
+<link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" />
+<link rel="schema.AGLSTERMS" href="https://agls.gov.au/documents/aglsterms/" />
+<meta name="DCTERMS.title" content="{{ title }}">
+<meta name="DCTERMS.publisher" scheme="AGLSTERMS.AglsAgent" content="{{#if dcTerms.publisher}}{{dcTerms.publisher}}{{else}}corporateName=The State of Queensland; jurisdiction=Queensland{{/if}}" />
+<meta name="DCTERMS.creator" scheme="AGLSTERMS.GOLD" content="{{#if dcTerms.creator}}{{dcTerms.creator}}{{else}}c=AU; o=The State of Queensland;{{/if}}">
+{{#if dcTerms.created}}<meta name="DCTERMS.created" content="{{ dcTerms.created }}">{{/if}}
+{{#if dcTerms.modified}}<meta name="DCTERMS.modified" content="{{ dcTerms.modified }}">{{/if}}
+{{#if description}}<meta name="DCTERMS.description" content="{{ description }}">{{/if}}
+{{#if uri}}<meta name="DCTERMS.identifier" scheme="DCTERMS.URI" content="{{ uri }}">{{/if}}
+<meta name="DCTERMS.jurisdiction" scheme="AGLSTERMS.AglsJuri" content="{{#if dcTerms.jurisdiction}}{{dcTerms.jurisdiction}}{{else}}Queensland{{/if}}">
+{{#if dcTerms.type}}<meta name="DCTERMS.type" scheme="DCTERMS.DCMIType" content="{{ dcTerms.type }}" />{{/if}}
+{{#if dcTerms.aggregationLevel}}<meta name="AGLSTERMS.aggregationLevel" content="{{ dcTerms.aggregationLevel }}"/>{{/if}}
+{{#if dcTerms.documentType}}<meta name="AGLSTERMS.documentType" scheme="AGLSTERMS.agls-document" content="{{ dcTerms.documentType }}" />{{/if}}
+{{#if dcTerms.subject}}<meta name="DCTERMS.subject" content="{{ dcTerms.subject }}" />{{/if}}
+{{#if dcTerms.audience}}<meta name="DCTERMS.audience" content="all" scheme="{{ dcTerms.audience }}" />{{/if}}
+{{#if dcTerms.licenseUri}}<meta name="DCTERMS.license" scheme="DCTERMS.URI" content="{{ dcTerms.licenseUri }}">{{/if}}
+{{/if}}

package/dist/assets/components/bs5/metaOpenGraph/metaOpenGraph.hbs

@@ -0,0 +1,18 @@
+
+<!-- SEO (required) -->
+{{#if description }}<meta name="description" content="{{ description }}" />{{/if}}
+{{#if seo.pageSnippet }}<meta name="page.snippet" content="{{ seo.pageSnippet}}" />{{/if}}
+
+<!-- SEO -->
+{{#if seo.keywords }}<meta name="keywords" content="{{ seo.keywords }}" />{{/if}}
+{{#if seo.department }}<meta name="department" content="{{ seo.department }}" />{{/if}}
+
+<!-- Open Graph protocol https://ogp.me/ basics -->
+<meta property="og:title" content="{{ title }}" />
+<meta name="twitter:title" content="{{ title }}" />
+{{#if description }}<meta property="og:description" content="{{ description }}" />{{/if}}
+{{#ifAny og.twitter_description description }}<meta name="twitter:description" content="{{#if og.twitter_description }}{{ og.twitter_description }}{{else}}{{ description }}{{/if}}" />{{/ifAny}}
+{{#if og.image }}<meta property="og:image" content="{{ og.image }}">{{/if}}
+{{#ifAny og.twitter_image og.image }}<meta name="twitter:image:src" content="{{#if og.twitter_image }}{{ og.twitter_image }}{{else}}{{ og.image }}{{/if}}" />{{/ifAny}}
+{{#if uri }}<meta property="og:url" content="{{ uri }}" />{{/if}}
+{{#if og.type }}<meta property="og:type" content="{{og.type}}" />{{/if}}

package/dist/assets/components/bs5/modal/modal.hbs

@@ -0,0 +1,38 @@
+<!-- Example button to trigger the modal -->
+<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#{{modalID}}">
+  {{launchButtonLabel}}
+</button>
+
+<!-- You can also use a standard link. It must contain data-bs-toggle and data-bs-target attributes -->
+<p>You can also <a class="d-inline-block my-3" href="#" data-bs-toggle="modal" data-bs-target="#{{modalID}}">open a model</a> with a standard link.
+
+
+<!-- QGDS Modal -->
+<div class="modal fade" id="{{modalID}}" tabindex="-1" aria-labelledby="{{modalLabel}}" aria-hidden="true">
+  <div class="modal-dialog {{modalSize}}">
+    <div class="modal-content">
+
+      {{#if header}}
+      <div class="modal-header">
+        <h1 class="modal-title" id="{{modalLabel}}">{{{ header.title }}}</h1>
+        {{#if header.closeButton}}
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        {{/if}}
+      </div>
+      {{/if}}
+      
+      <div class="modal-body">
+        {{{ content }}}
+      </div>
+    
+      {{#if footer}}
+      <div class="modal-footer">
+        {{#each footer.buttons}}
+            {{{ . }}}
+        {{/each}}
+      </div>
+      {{/if}}
+    
+    </div>
+  </div>
+</div>

package/dist/assets/components/bs5/navbar/navbar.hbs

@@ -0,0 +1,251 @@
+<!-- QGDS Partial: Primary navigation -->
+
+<!-- Primary Navigation / Desktop -->
+<nav id="main-nav" class="navbar navbar-expand-lg" aria-label="Website navigation" role="navigation">
+    <div class="container navbar-contain">
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <div class="navbar__header">
+                <h6 class="navbar__heading">Menu</h6>
+                <button aria-controls="main-nav" class="navbar__toggle navbar__toggle--close" data-bs-toggle="collapse"
+                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
+                    aria-expanded="false" aria-label="Close navigation">
+                    <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon">
+                        <use href="{{metadata.options.icon-root}}#qld__icon__close"></use>
+                    </svg>
+                    <span class="navbar__toggle-text">Close</span>
+                </button>
+            </div>
+            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+                <li class="nav-item nav-item-home">
+                    <a class="nav-link {{#if metadata.options.home-active}}nav-link-home-active{{/if}}"
+                        href="{{metadata.target_url}}">
+                        <svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon">
+                            <use
+                                href="{{#if metadata.options.icon-root}}{{metadata.options.icon-root}}#qld__icon__home{{/if}}">
+                            </use>
+                        </svg>
+                        {{#if metadata.options.showHomeTitleSmallDevices}}
+                        <span class="home-label">Home</span>
+                        {{else}}
+                        <span class="visually-hidden">Home</span>
+                        {{/if}}
+                    </a>
+                </li>
+                {{#each navigation}}
+                {{#if dropdown_enabled}}
+                <li class="nav-item dropdown">
+                    <!-- Desktop primary dropdown style and behaviour -->
+                    <a class="nav-link dropdown-toggle desktop-only" href="{{target_url}}" id="menuDropdown"
+                        role="button" aria-controls="" data-bs-toggle="dropdown" aria-expanded="false"
+                        aria-label="Toggle navigation">
+                        {{title}}
+                        <svg class="toggle_icon">
+                            <use href="{{@root.metadata.options.icon-root}}#qld__icon__chevron-down"></use>
+                        </svg>
+                    </a>
+                    {{#if navigation_items}}
+                    <ul id="dropdown-menu" class="dropdown-menu" aria-labelledby="menuDropdown" role="menu"
+                        data-bs-popper="none">
+                        <div class="row dropdown-menu__inner">
+                            {{#if dropdown_options}}
+                            <div class="col-12">
+                                <a class="dropdown-menu__featured" href="{{dropdown_options.feature_link_href}}">
+                                    <span class="">{{dropdown_options.feature_link_value}}</span>
+                                    <svg class="chevron__icon">
+                                        <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right"></use>
+                                    </svg>
+                                </a>
+                                {{#if dropdown_options.feature_link_description}}
+                                <p class="dropdown-menu__description">{{dropdown_options.feature_link_description}}</p>
+                                {{/if}}
+                                <hr>
+                            </div>
+                            {{/if}}
+                            {{#each navigation_items}}
+                            <li class="col-lg-4 col-sm-12">
+                                <a href="{{target_url}}" class="dropdown-item">
+                                    <span class="dropdown-item__text">{{title}}</span>
+                                    <svg class="chevron__icon">
+                                        <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right"></use>
+                                    </svg>
+                                </a>
+                                {{#if description}}
+                                <p class="dropdown-item__description">{{description}}</p>
+                                {{/if}}
+                            </li>
+                            {{/each }}
+                            {{#if dropdown_options.view_value}}
+                            <li class="col-12 text-end">
+                                <hr>
+                                <a class="dropdown-menu__view_all" href="{{dropdown_options.view_href}}">
+                                    <span>
+                                        {{dropdown_options.view_value}}
+                                        <svg class="chevron__icon">
+                                            <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
+                                            </use>
+                                        </svg>
+                                    </span>
+                                </a>
+                            </li>
+                            {{/if}}
+                        </div>
+                    </ul>
+                    {{/if}}
+                    <!-- Mobile only -->
+                    <div class="nav-item-group mobile-only">
+
+                        <!-- Primary dropdown style and behaviour -->
+                        <a class="nav-link first-element" href="{{target_url}}">
+                            {{title}}
+                        </a>
+
+                        <button class="dropdown-toggle second-element" id="menuDropdown" role="button" aria-controls=""
+                            data-bs-toggle="dropdown" aria-expanded="false" aria-selected="false"
+                            aria-label="Toggle navigation">
+                            <svg class="toggle_icon">
+                                <use href="{{@root.metadata.options.icon-root}}#qld__icon__chevron-down"></use>
+                            </svg>
+                            <span class="visually-hidden">Expand</span>
+                        </button>
+
+                        {{#if navigation_items}}
+                        <ul id="dropdown-menu" class="dropdown-menu" aria-labelledby="menuDropdown" role="menu"
+                            data-bs-popper="none">
+                            <div class="row dropdown-menu__inner">
+                                {{#if dropdown_options}}
+                                <div class="col-12">
+                                    <a class="dropdown-menu__featured" href="{{dropdown_options.feature_link_href}}">
+                                        <span class="">{{dropdown_options.feature_link_value}}</span>
+                                        <svg class="chevron__icon">
+                                            <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
+                                            </use>
+                                        </svg>
+                                    </a>
+                                    {{#if dropdown_options.feature_link_description}}
+                                    <p class="dropdown-menu__description">{{dropdown_options.feature_link_description}}
+                                    </p>
+                                    {{/if}}
+                                    <hr>
+                                </div>
+                                {{/if}}
+                                {{#each navigation_items}}
+                                <li class="col-lg-4 col-sm-12">
+                                    <a href="{{target_url}}" class="dropdown-item">
+                                        {{title}}
+                                        <svg class="chevron__icon">
+                                            <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
+                                            </use>
+                                        </svg>
+                                    </a>
+                                    {{#if description}}
+                                    <p class="dropdown-item__description">{{description}}</p>
+                                    {{/if}}
+                                </li>
+                                {{/each }}
+                                {{#if dropdown_options.view_value}}
+                                <li class="col-12 text-end">
+                                    <hr>
+                                    <a class="dropdown-menu__view_all" href="{{dropdown_options.view_href}}">
+                                        <span>
+                                            {{dropdown_options.view_value}}
+                                            <svg class="chevron__icon">
+                                                <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
+                                                </use>
+                                            </svg>
+                                        </span>
+                                    </a>
+                                </li>
+                                {{/if}}
+                            </div>
+                        </ul>
+                        {{/if}}
+                    </div>
+                </li>
+                {{else}}
+                <li class="nav-item">
+                    <a class="nav-link" href="{{target_url}}">{{title}}</a>
+                </li>
+                {{/if}}
+                {{/each }}
+                {{#each CTA}}
+                    <li class="nav-item dropdown CTA_feature">
+                        <!-- Mobile only -->
+                        <div class="nav-item-group mobile-only">
+
+                            <!-- Primary dropdown style and behaviour -->
+                            <a class="nav-link first-element" href="{{target_url}}">
+                                {{label}}
+                            </a>
+
+                            <button class="dropdown-toggle second-element" id="menuDropdown-{{id}}" role="button"
+                                aria-controls="" data-bs-toggle="dropdown" aria-expanded="false" 
+                                aria-label="Toggle navigation">
+                                <svg class="toggle_icon">
+                                    <use href="{{@root.metadata.options.icon-root}}#qld__icon__chevron-down"></use>
+                                </svg>
+                                <span class="visually-hidden">Expand</span>
+                            </button>
+
+                            {{#if dropdown_enabled}}
+                            <ul id="dropdown-menu-{{id}}" class="dropdown-menu" aria-labelledby="menuDropdown-{{id}}"
+                                role="menu" data-bs-popper="none">
+                                <div class="row dropdown-menu__inner">
+                                    {{#if dropdown_options.dropdown_config.groups}}
+                                    <div class="col-12">
+                                        <a class="dropdown-menu__featured" href="{{dropdown_options.view_more_url}}">
+                                            <span class="">{{dropdown_options.view_more_label}}</span>
+                                            <svg class="chevron__icon">
+                                                <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
+                                                </use>
+                                            </svg>
+                                        </a>
+                                        <hr>
+                                    </div>
+                                    {{#each dropdown_options.dropdown_config.groups}}
+                                        {{#isType ../dropdown_options.dropdown_type "list"}}
+                                            <li class="col-lg-4 col-sm-12">
+                                                <a href="{{url}}" class="dropdown-item" target="{{action}}">
+                                                    {{label}}
+                                                    <svg class="chevron__icon">
+                                                        <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
+                                                        </use>
+                                                    </svg>
+                                                </a>
+                                            </li>
+                                        {{/isType}}
+                                        {{#isType ../dropdown_options.dropdown_type "form"}}
+                                            {{#if content}}
+                                                {{{content}}}
+                                            {{/if}}
+                                        {{/isType}}
+
+                                    {{/each }}
+                                    {{#if dropdown_options.dropdown_config.view_more}}
+                                    <li class="col-12 text-end">
+                                        <hr>
+                                        <a class="dropdown-menu__view_all"
+                                            href="{{dropdown_options.dropdown_config.view_more_options.url}}"
+                                            target="{{dropdown_options.dropdown_config.view_more_options.target}}">
+                                            <span>
+                                                {{dropdown_options.dropdown_config.view_more_options.label}}
+                                                <svg class="chevron__icon">
+                                                    <use href="{{@root.metadata.options.icon-root}}#qld__icon__arrow-right">
+                                                    </use>
+                                                </svg>
+                                            </span>
+                                        </a>
+                                    </li>
+                                    {{/if}}
+                                    {{/if}}
+                                </div>
+                            </ul>
+                            {{/if}}
+                        </div>
+                    </li>
+                {{/each}}
+            </ul>
+        </div>
+        <div id="overlay" class="navbar__overlay" aria-controls="main-nav"></div>
+    </div>
+</nav>
+<!-- MAIN NAVIGATION END -->

package/dist/assets/components/bs5/pagination/pagination.hbs

@@ -0,0 +1,43 @@
+{{!
+Component Name: QGDS QOL Pagination
+Component Version: 1.0
+Framework: Bootstrap 5.3
+Reference: https://getbootstrap.com/docs/5.0/components/pagination/
+}}
+
+<nav aria-label="{{ arialabel }}">
+
+    <ul class="pagination">
+
+        {{#if previous }}
+        <li class="page-item previous">
+            <a class="page-link" href="{{previous.href}}" aria-label="{{previous.arialabel}}">
+                <span>{{ previous.linktext }}</span>
+            </a>
+        </li>
+        {{/if}}
+
+        {{#each pages}}
+        <li class="page-item {{customClasses}}">
+            {{#if more}}
+            {{! More button }}
+            <span></span>
+            {{else}}
+            {{! Page button }}
+            <a class="page-link" href="{{href}}" aria-label="{{arialabel}}">{{ linktext }}</a>
+            {{/if}}
+        </li>
+
+        {{/each }}
+
+        {{#if next }}
+        <li class="page-item next">
+            <a class="page-link" href="{{next.href}}" aria-label="{{next.arialabel}}">
+                <span>{{ next.linktext }}</span>
+            </a>
+        </li>
+        {{/if}}
+
+    </ul>
+
+</nav>

package/dist/assets/components/bs5/quickexit/quickexit.hbs

@@ -0,0 +1,40 @@
+<!-- QGDS Component: Loading Quick exit -->
+
+<div class="qld-quick-exit"><!-- dark -->
+  <div class="container">
+    <div class="qld-quick-exit-inner container-fluid {{#if hasIconInfo}} has-icon-info{{/if}}{{#if hasTooltip}} has-tooltip{{/if}}">
+      <div class="qg-quick-exit__tips">
+        {{#if hasIconInfo}}
+          <span class="qld-icon icon-info"></span>
+        {{/if}}
+        <p class="qld-quick-exit-tip-title">{{{exitMessage}}}</p>
+        <a href="{{browseSafelyOnlineURL}}" class="qld-quick-exit-tip-link">
+          <span>{{exitMessageLinkText}}</span>
+        </a>
+      </div>
+      <div class="qld-quick-exit-actions">
+        {{#if hasTooltip}}
+          <ul class="qld-quick-exit-list">
+            <li class="qld-quick-exit-item qld-tooltip-container">
+              <input type="checkbox" id="qld-quick-exit-input" class="qld-quick-exit-input sr-only" />
+              <label for="qld-quick-exit-input" class="qld-quick-exit-label qld-tooltip-parent">
+                <span class="qld-tooltip-prompt">{{qldTooltipPrompt}}</span>
+                <div class="qld-tooltip-wrapper">
+                  <div class="qld-tooltip">
+                    <span class="qld-tooltip-content">{{qldTooltipContent}}</span>
+                  </div>
+                </div>
+              </label>
+            </li>
+            
+            <li class="qld-quick-exit-item">
+              {{/if}}
+                <button class="btn btn-secondary qld-quick-exit-button">{{{quickExitButtonText}}}</button>
+              {{#if hasTooltip}}
+            </li>   
+          </ul>
+        {{/if}}
+      </div>
+    </div>
+  </div>
+</div>

package/dist/assets/components/bs5/searchInput/searchInput.hbs

@@ -0,0 +1,47 @@
+<!-- 
+    QGDS Component: Search input 
+-->
+<div class="container {{variantClass}}">
+    <div class="qld-search-input {{customClass}}">
+        <input id="{{ inputID }}" name=" {{ inputName }}" class="form-control" type="text" placeholder="{{placeholder}}"
+            autocomplete="off" aria-label="{{ ariaLabel }}" {{#each tags}} data-{{@key}}="{{this}}" {{/each}} />
+
+        <button class="btn btn-primary" type="{{ buttonType }}" id="{{ buttonID }}">
+            <span class="btn-icon"></span>
+            <span class="btn-label">{{ buttonLabel }}</span>
+        </button>
+
+        {{#if suggestions}}
+        <ul class="suggestions suggestions__group">
+            <div class="default-suggestions">
+                <div class="suggestions-category mt-2">
+                    <strong class="suggestions-category-label">Popular services</strong>
+                    <ul class="mt-2">
+                        {{#each default_suggestions.popular_services}}
+                            <li><a href="{{link}}">{{title}}</a></li>
+                        {{/each}}
+                    </ul>
+                </div>
+
+                <hr>
+
+                <div class="suggestions-category mt-2">
+                    <strong class="suggestions-category-label">Browse by category</strong>
+                    <ul class="mt-2">
+                        {{#each default_suggestions.categories}}
+                            <li><a href="{{link}}">{{title}}</a></li>
+                        {{/each}}
+                    </ul>
+                </div>
+
+                {{#if default_suggestions.options.view_more}}
+                    <div class="suggestions-category mt-4 mb-4">
+                        <a href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
+                    </div>
+                {{/if}}
+            </div>
+            <div class="dynamic-suggestions"></div>
+        </ul>
+        {{/if}}
+    </div>
+</div>

package/dist/assets/components/bs5/select/select.hbs

@@ -0,0 +1,34 @@
+<!-- QGDS Component: Select -->
+
+<!-- Label for the first input field -->
+<label class="qld-text-input-label {{#if isRequired}}field-required{{/if}} {{#if isDisabled}}field-disabled{{/if}}" for="example-1">
+    {{label-text}}
+    {{#if optional-text}}
+    <span class="label-text-optional">({{optional-text}})</span></label>
+    {{/if}}
+
+<!-- Hint text for the first input field -->
+{{#if hint-text}}
+<span class="qld-hint-text" id="example-1-hint">{{hint-text}}</span>
+{{/if}}
+
+{{#contains "qld-input-success" customClass}}
+<span id="text-field-success" class="qld-input-success">
+    {{successMessageText}}
+</span>
+{{/contains}}
+
+{{#contains "qld-input-error" customClass}}
+<span id="text-field-error" class="qld-input-error">
+    {{errorMessageText}}
+</span>
+{{/contains}}
+
+<!-- First text input field, described by the hint text above -->
+<select class="qld-text-input form-select qld-select qld-field-width-1-quarter {{customClass}}"
+    aria-label="Default select example" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required aria-required="true"{{/if}}>
+    <option selected>{{placeholder}}</option>
+    <option value="1">Option 1</option>
+    <option value="2">Option 2</option>
+    <option value="3">Option 3</option>
+</select>

package/dist/assets/components/bs5/sidenav/sidenav.hbs

@@ -0,0 +1,66 @@
+<div class="qld-side-navigation">
+
+    <h2 class="nav-title">
+        {{#if navtitlelink }}
+        <a class="nav-link" href="{{navtitlelink}}">{{navtitle}}</a>
+        {{else}}
+        {{navtitle}}
+        {{/if}}
+    </h2>
+
+    <!-- Level One -->
+    <ul class="nav" aria-label="section navigation">
+
+        {{#each navlist}}
+        <li class="nav-item {{class}}">
+            
+            {{#contains "active" class }}
+            <span class="nav-link">{{label}}</span>
+            {{else}}
+            <a class="nav-link" href="{{link}}" target="{{target}}">
+                {{label}} {{class}}
+            </a>
+            {{/contains}}
+
+            {{#if children}}
+            <!-- Level Two -->
+            <ul>
+            {{#each children}}
+                <li class="nav-item {{class}}">
+                    
+                {{#contains "active" class }}
+                <span class="nav-link">{{label}}</span>
+                {{else}}
+                <a class="nav-link" href="{{link}}" target="{{target}}">
+                    {{label}} {{class}}
+                </a>
+                {{/contains}}
+
+                    {{#if children}}
+                    <!-- Level Three -->
+                    <ul class="with-stalks">
+                    {{#each children}}
+                        <li class="nav-item {{class}}">
+                           
+                        {{#contains "active" class }}
+                        <span class="nav-link">{{label}}</span>
+                        {{else}}
+                        <a class="nav-link" href="{{link}}" target="{{target}}">
+                            {{label}} {{class}}
+                        </a>
+                        {{/contains}}
+
+                        </li>
+                    {{/each}}
+                    </ul>
+                    {{/if}}
+
+                </li>
+            {{/each}}
+            </ul>
+            {{/if}}
+
+        </li>
+        {{/each}}
+    </ul>
+</div>

package/dist/assets/components/bs5/sidenavWrapper/sidenavWrapper.hbs

@@ -0,0 +1,4 @@
+<!-- Side Nav -->
+<div class="col-12 col-lg-3 pe-lg-0 order-last order-lg-first mt-5 mt-lg-0">
+  {{> @partial-block }}
+</div>

package/dist/assets/components/bs5/sidenavWrapper/sidenavWrapper.test.hbs

@@ -0,0 +1,15 @@
+<!-- Side Nav test -->
+<div class="container-fluid">
+<div class="row">
+<p>pre sidenaveWrapper prefix</p>
+</div>
+  <div class="row">
+{{#>sidenavWrapper}}
+  {{> sidenav }}
+  <p>inner sidenavWrapper data</p>
+{{/sidenavWrapper}}
+<div class="col-12 col-lg-8 ps-lg-64 qld-content-body" id="content">
+<p>post sidenaveWrapper suffix</p>
+</div>
+</div>
+</div>