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

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

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

package/dist/assets/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" 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 -->
+<textarea id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
+    placeholder="{{placeholder}}" rows="{{rows}}" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required
+    aria-required="true" {{/if}}></textarea>

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

@@ -0,0 +1,32 @@
+<!-- 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" 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 -->
+<input id="example-1" class="qld-text-input form-control {{customClass}} {{#if isFilled}}form-style-filled{{/if}}"
+    type="text" placeholder="{{placeholder}}" aria-label="Text input example" {{#if isDisabled}}disabled{{/if}} {{#if
+    isRequired}}required aria-required="true" {{/if}} />

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

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

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

@@ -0,0 +1,52 @@
+<!-- QGDS Component: Video -->
+
+{{#if analyticsTrackingCode}}
+<script type="text/javascript" defer="defer" src="https://extend.vimeocdn.com/ga/{{analyticsTrackingCode}}.js">
+</script>
+{{/if}}
+
+{{! By default, 'not-ready' class is added and will be removed by javascript event handler.
+    When thumbnail attribute is empty / does not exist, 'empty-thumbnail' css class is added. }}
+<section class="video not-ready {{#unless thumbnail}}empty-thumbnail{{/unless}} {{videoSize}}">
+    <div class="video-player ratio ratio-{{aspectRatio}}">
+
+        <a href="#" class="video-thumbnail video-controls">
+            <div class="video-thumbnail-image" style="--thumbnail:url({{thumbnail}})"></div>
+
+            <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&autoplay={{urlParams.autoplay}}&background={{urlParams.background}}&controls={{urlParams.controls}}"></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&autoplay={{urlParams.autoplay}}&controls={{urlParams.controls}}"></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>
+
+    {{! Render the transcript content in an accordion template }}
+    {{#if transcriptContent}}
+        {{{ transcriptAccordion }}}
+    {{/if}}
+
+</section>