@qld-gov-au/qgds-bootstrap5 1.0.1

package/dist/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/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/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/components/bs5/navbar/navbar.hbs

@@ -0,0 +1,100 @@
+<!-- QGDS Partial: Primary navigation -->
+
+<!-- Primary Navigation / Desktop -->
+<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">
+                    <a class="nav-link dropdown-toggle" href="{{target_url}}" id="menuDropdown" role="button"
+                        aria-controls="" data-bs-toggle="dropdown" aria-expanded="false" aria-selected="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">
+                                        {{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}}
+                </li>
+                {{else}}
+                <li class="nav-item">
+                    <a class="nav-link" href="{{target_url}}">{{title}}</a>
+                </li>
+                {{/if}}
+                {{/each }}
+            </ul>
+        </div>
+        <div id="overlay" class="navbar__overlay" aria-controls="main-nav"></div>
+    </div>
+</nav>
+<!-- MAIN NAVIGATION END -->

package/dist/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/components/bs5/quickexit/quickexit.hbs

@@ -0,0 +1,30 @@
+<!-- QGDS Component: Loading Quick exit -->
+
+<div class="qld-quick-exit dark">
+  <div class="qld-quick-exit-inner container-fluid">
+    <div class="qg-quick-exit__tips">
+      <a href="https://www.qld.gov.au/help/tips-to-browse-safely-online" class="qld-quick-exit-tip-link">
+        <span class="qld-icon icon-info"></span>
+        <span class="qld-quick-exit-tip-title">Tips to browse safely online</span>
+      </a>
+    </div>
+    <div class="qld-quick-exit-actions">
+      <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">What is this?</span>
+            <div class="qld-tooltip-wrapper">
+              <div class="qld-tooltip">
+                <span class="qld-tooltip-content">To leave this site quickly, click the 'Close this site' button or press 'ESC' on your keyboard. You will be taken to google.com.au.</span>
+              </div>
+            </div>
+          </label>
+        </li>
+        <li class="qld-quick-exit-item">
+          <button class="btn btn-secondary qld-quick-exit-button">Close this site</button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>

package/dist/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" states}}
+<span id="text-field-success" class="qld-input-success">
+    {{successMessageText}}
+</span>
+{{/contains}}
+
+{{#contains "qld-input-error" states}}
+<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}} {{states}}"
+    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/components/bs5/sidenav/sidenav.hbs

@@ -0,0 +1,66 @@
+<div class="qld-side-navigation">
+
+    <h2 class="nav-title">
+        {{#if navtitlelink }}
+        <a 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/components/bs5/spinner/spinner.hbs

@@ -0,0 +1,8 @@
+<!-- QGDS Component: Loading Spinner -->
+
+<div class="qld-spinner {{#if stacked}}align-center{{/if}}" role="status">
+    <div class="spinner-border"></div>
+    <span class="qld-spinner-label {{#if minimal}}sr-only{{/if}}">
+        Loading...
+    </span>
+</div>

package/dist/components/bs5/table/table.hbs

@@ -0,0 +1,49 @@
+<!-- QGDS Component: Table -->
+
+<div class="table-responsive qld-table {{customClass}}">
+
+    <table class="table {{variantClass}}">
+
+        {{#if caption}}
+        <caption class="caption">
+            {{caption}}
+            {{#if subcaption}}
+            <span class="sub-caption">{{{ subcaption }}}</span>
+            {{/if}}
+        </caption>
+        {{/if}}
+
+        {{#if headers}}
+        <thead>
+            <tr>
+                {{#each headers}}
+                <th scope="col">{{this}}</th>
+                {{/each}}
+            </tr>
+        </thead>
+        {{/if}}
+
+        <tbody>
+            {{#rows}}
+            <tr class="">
+                {{#each cells}}
+                <td>{{this}}</td>
+                {{/each}}
+            </tr>
+            {{/rows}}
+        </tbody>
+
+        {{#if footer}}
+        <tfoot>
+            {{#each footer}}
+            <tr class="">
+                {{#each cells}}
+                <td>{{this}}</td>
+                {{/each}}
+            </tr>
+            {{/each}}
+        </tfoot>
+        {{/if}}
+
+    </table>
+</div>

package/dist/components/bs5/tag/tag.hbs

@@ -0,0 +1,9 @@
+<!-- QGDS Component: Tag -->
+
+<ui class="tag-list {{variant}}">
+  {{#each tagItems}}
+  <li class="tag-item {{classes}}">
+    {{{content}}}
+  </li>
+  {{/each }}
+</ui>

package/dist/components/bs5/textarea/textarea.hbs

@@ -0,0 +1,32 @@
+<!-- QGDS Component: Textarea -->
+
+<!-- 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>
+    {{/if}}
+</label>
+
+<!-- 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" states}}
+<span class="qld-input-success">
+    {{successMessageText}}
+</span>
+{{/contains}}
+
+{{#contains "qld-input-error" states}}
+<span class="qld-input-error">
+    {{errorMessageText}}
+</span>
+{{/contains}}
+
+<!-- First text input field, described by the hint text above -->
+<textarea id="example-1" class="qld-text-input form-control {{customClass}} {{states}}"
+    placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required
+    aria-required="true" {{/if}}></textarea>
+    

package/dist/components/bs5/textbox/textbox.hbs

@@ -0,0 +1,31 @@
+<!-- QGDS Component: Textbox -->
+
+<!-- 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>
+    {{/if}}
+</label>
+
+<!-- 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" states}}
+<span id="text-field-success" class="qld-input-success">
+    {{successMessageText}}
+</span>
+{{/contains}}
+
+{{#contains "qld-input-error" states}}
+<span id="text-field-error" class="qld-input-error">
+    {{errorMessageText}}
+</span>
+{{/contains}}
+
+<!-- First text input field, described by the hint text above -->
+<input id="example-1" class="qld-text-input form-control {{customClass}} {{states}}" type="text"
+    placeholder="{{placeholder}}" aria-label="Text input example" {{#if isDisabled}}disabled{{/if}} {{#if
+    isRequired}}required aria-required="true"{{/if}} />

package/dist/components/bs5/typography/typography.hbs

@@ -0,0 +1 @@
+<!-- QGDS Partial: typography -->

package/dist/components/bs5/video/video.hbs

@@ -0,0 +1,50 @@
+<!-- QGDS Component: Video -->
+
+{{#if analyticsTrackingCode}}
+<script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/{{analyticsTrackingCode}}.js">
+</script>
+{{/if}}
+
+
+<section class="video not-ready {{videoSize}}">
+    <div class="video-player ratio ratio-{{aspectRatio}}">
+        <a href="#" class="video-thumbnail" style="--thumbnail:url({{thumbnail}})">
+
+            <div class="video-nav">
+                <div class="video-watch"><span class="icon"></span><span>Watch</span></div>
+
+            {{#if duration}}
+                <div title="Video duration" class="video-duration"><span class="icon"></span><span>{{duration}}</span></div>
+            {{/if}}
+            </div>
+        </a>
+
+        <div class="video-embed ratio ratio-{{aspectRatio}}">
+            {{#ifCond source '===' 'vimeo'}}
+                <iframe title="Vimeo video" class="embed-responsive-item video-vimeo" allow="autoplay; fullscreen" allowfullscreen muted="muted" src="https://player.vimeo.com/video/{{videoId}}?rel=0"></iframe>
+
+            {{else ifCond source '===' 'youtube'}}
+                <iframe title="YouTube video" class="embed-responsive-item video-youtube" allow="autoplay; fullscreen" allowfullscreen src="https://www.youtube.com/embed/{{videoId}}?rel=0"></iframe>
+
+            {{else ifCond source '===' 'custom'}}
+            <iframe title="Custom video" class="embed-responsive-item video-custom" allow="autoplay; fullscreen" allowfullscreen
+                src="{{videoId}}"></iframe>
+
+            {{else}}
+
+            <p class="text-center position-absolute top-50">A video has not been provided.</p>
+
+            {{/ifCond}}
+        </div>
+
+    </div>
+
+
+
+    <div class="video-description">
+        {{{ description }}}
+    </div>
+
+    {{{transcript}}}
+
+</section>