@qld-gov-au/qgds-bootstrap5 1.0.1

package/docs/storybook-static/assets/components/bs5/accordion/accordion.hbs

@@ -0,0 +1,28 @@
+<!-- QGDS Component: Accordion -->
+<div class="accordion-group">
+
+    {{#if toggleAll}}
+        <div class="accordion-toggle">
+            <button class="accordion-toggle-btn accordion-toggle-btn--closed" type="button">Open all</button>
+        </div>
+    {{/if}}
+    <div class="accordion" id="{{groupid}}">
+        {{#each accordionItems }}
+        <div class="accordion-item">
+            <h2 class="accordion-header" id="heading-{{id}}">
+                <button class="accordion-button {{#unless expanded}}collapsed{{/unless}}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-{{id}}" aria-expanded="{{expanded}}" aria-controls="collapse-{{id}}">
+                    {{title}}
+                </button>
+            </h2>
+
+            <div id="collapse-{{id}}" class="accordion-collapse collapse {{#if expanded}}show{{/if}}" aria-labelledby="heading-{{id}}">
+                <div class="accordion-body">
+                    {{{content}}}
+                </div>
+            </div>
+        </div>
+        {{/each }}
+
+    </div>
+
+</div>

package/docs/storybook-static/assets/components/bs5/banner/banner.hbs

@@ -0,0 +1,24 @@
+<!-- QGDS Partial: banner -->
+
+<div class="container-fluid qld-banner {{classes}}">
+
+    <div class="container">
+        <div class="row">
+            
+            <div class="col-12 col-md-7">
+
+                {{{breadcrumbs}}}
+
+                <h1 class="banner-title">{{{title}}}</h1>
+                <p class="banner-lead">{{{content}}}</p>
+
+            </div>
+
+            <div class="col-12 col-md-5 position-relative">
+                <div class="banner-image {{image.classes}}" style="--background-img:url({{image.url}})"></div>
+            </div>
+
+        </div>
+    </div>
+
+</div>

package/docs/storybook-static/assets/components/bs5/blockquote/blockquote.hbs

@@ -0,0 +1,13 @@
+<!-- QGDS Component: Blockquote -->
+
+<figure class="blockquote {{classes}}">
+
+	<blockquote cite="{{cite-url}}">
+		{{{content}}}
+	</blockquote>
+
+	<figcaption class="quote-source">
+		{{cite-text}}
+	</figcaption>
+
+</figure>

package/docs/storybook-static/assets/components/bs5/breadcrumbs/breadcrumbs.hbs

@@ -0,0 +1,16 @@
+<nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+        {{#each breadcrumbs}}
+            {{! print all breadcrumbs except the current page as links}}
+            {{#unless @last}}
+            <li class="breadcrumb-item">
+                <a href="{{link}}">{{linktext}}</a>
+            </li>
+            {{/unless}}
+            {{! print the current page as plain text}}
+            {{#if @last}}
+            <li class="breadcrumb-item active" aria-current="page">{{linktext}}</li>
+            {{/if}}
+        {{/each}}
+    </ol>
+</nav>

package/docs/storybook-static/assets/components/bs5/button/button.hbs

@@ -0,0 +1,12 @@
+<!-- // QGDS Component: Button -->
+<!-- // https://getbootstrap.com/docs/5.3/components/buttons -->
+
+{{#unless islink}}
+<button class="btn {{variantClass}}" onclick="{{{onclick}}}" {{#if isdisabled}}disabled{{/if}}>
+    {{#if iconClass}}<span class="btn-icon {{iconClass}}"></span>{{/if}}{{label}}
+</button>
+{{else}}
+<a class="btn {{variantClass}} {{#if isdisabled}}disabled" aria-disabled="true{{/if}}" href="{{href}}" target="{{target}}">
+    {{#if iconClass}}<span class="btn-icon {{iconClass}}"></span>{{/if}}{{label}}
+</a>
+{{/unless }}

package/docs/storybook-static/assets/components/bs5/callout/callout.hbs

@@ -0,0 +1,8 @@
+<!-- QGDS Component: Callout -->
+
+<div class="callout">
+    {{#if title}}
+        <h3 class="callout-title">{{{title}}}</h3>
+    {{/if}}
+    <div class="callout-text">{{{content}}}</div>
+</div>

package/docs/storybook-static/assets/components/bs5/card/card.hbs

@@ -0,0 +1,65 @@
+<!-- QGDS Partial: card -->
+
+<div class="col{{#if feature}}-md-12 col-lg-12{{/if}}">
+
+    <div class="card card-{{variantClass}} {{variantClass}} {{iconPosition}} card-{{action}}-action{{#if arrow}} card-arrow{{/if}}{{#if equalHeight}} h-100{{/if}}{{#if feature}} card-feature card-feature-{{featureImagePosition}}{{/if}}{{#if video}} card-video{{/if}}">
+
+        {{#if image}}
+        <div class="card-img ratio ratio-16x9">
+            <div class="{{#if feature}}card-img-{{featureImagePosition}}{{else}}card-img-top{{/if}}"
+            style="--card-image:url({{image}})" alt="{{imageAlt}}"></div>
+
+            {{#if video}}
+            <div class="video-overlay">
+                <div class="video-nav">
+                    <div class="video-watch"><span class="icon"></span><span>Watch</span></div>
+
+                    {{#if videoDuration}}
+                        <div title="Video duration" class="video-duration"><span class="icon"></span><span>{{videoDuration}}</span></div>
+                    {{/if}}
+                </div>
+            </div>
+            {{/if}}
+        </div>
+        {{/if}}
+
+        {{#if iconClasses}}
+        <div class="card-icon {{iconPosition}} {{iconClasses}}"></div>
+        {{/if}}
+
+        {{#if feature}}<div class="card-inner">{{/if}}
+
+            <div class="card-body">
+                {{#if date}}
+                <div class="card-date">{{date}}</div>
+                {{/if}}
+                <h3 class="card-title">
+                    {{#if link}}
+                    <a href="{{link}}" {{#ifCond action '===' 'single'}}class="stretched-link"{{/ifCond}}>{{title}}</a>
+                    {{else}}
+                    {{ title }}
+                    {{/if }}
+                </h3>
+
+                {{#if description}}
+                <p class="card-text">
+                    {{{description}}}
+                </p>
+                {{/if}}
+            </div>
+
+            {{#if arrow}}
+            <div class="card-icon icon-arrow"></div>
+            {{/if}}
+
+            {{#if footer}}
+            <div class="card-footer">
+                {{{footer}}}
+            </div>
+            {{/if }}
+
+        {{#if feature}}</div>{{/if}}
+
+    </div>
+
+</div>

package/docs/storybook-static/assets/components/bs5/card/cardblock.hbs

@@ -0,0 +1,14 @@
+<div class="row row-cols-1 row-cols-md-3 g-4">
+
+{{#each cards}}
+  <div class="col">
+    <div class="card h-100">
+      <img src="{{image}}" class="card-img-top" alt="{{alt}}">
+      <div class="card-body">
+        <h5 class="card-title">{{#if islink}} <a href="{{link}}"> {{title}} </a> {{else}} {{title}}{{/if}} </h5>
+        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
+      </div>
+    </div>
+  </div>
+  {{/each}}
+</div>

package/docs/storybook-static/assets/components/bs5/correctincorrect/correctincorrect.hbs

@@ -0,0 +1,6 @@
+<!-- QGDS Partial: callout -->
+<div class="example-component {{classes}}">
+    <h2>{{title}}</h2>
+    <p>{{content}}</p>
+    <a href="{{link}}" class="btn btn-secondary" target="{{target}}">{{linktext}}</a>
+</div>

package/docs/storybook-static/assets/components/bs5/dateinput/dateinput.hbs

@@ -0,0 +1,64 @@
+<!-- QGDS Component: Date input -->
+
+<!-- Label -->
+<label id="dategroup-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 -->
+{{#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}}
+
+<div aria-labelledby="dategroup-label" role="group" class="row date-container {{customClass}}">
+    <!-- day group -->
+    <div class="day-group">
+        <label for="dayinput" class="date-label qld-text-input-label">Day</label>
+        <div>
+            <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{day-placeholder}}" type="text"
+                inputmode="numeric" maxlength="2"
+                class="qld-text-input form-control dayinput {{customClass}} {{states}}" id="dayinput"
+                ref="day" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required
+                aria-required="true" {{/if}}>
+        </div>
+    </div>
+    <!-- month group -->
+    <div class="date-group">
+        <label for="monthinput" class="date-label qld-text-input-label">Month</label>
+        <div>
+            <input aria-required="true" aria-labelledby="dategroup-label" placeholder="{{month-placeholder}}"
+                type="text" inputmode="numeric" maxlength="2"
+                class="qld-text-input form-control monthinput {{customClass}} {{states}}" id="monthinput"
+                ref="month" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required
+                aria-required="true" {{/if}}>
+        </div>
+    </div>
+    <!-- year group -->
+    <div class="date-group">
+        <label for="yearinput" class="date-label">Year</label>
+        <div class="year-label">
+            <input aria-required="true" aria-labelledby="dategroup-label qld-text-input-label"
+                placeholder="{{year-placeholder}}" type="text" inputmode="numeric" maxlength="4"
+                class="qld-text-input form-control yearinput {{customClass}} {{states}}" id="yearinput"
+                ref="year" aria-invalid="false" {{#if isDisabled}}disabled{{/if}} {{#if isRequired}}required
+                aria-required="true" {{/if}}>
+        </div>
+    </div>
+</div>