Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Qol 9031 add spinner component #484

Merged
merged 6 commits into from
Aug 5, 2022
Merged

Qol 9031 add spinner component #484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
887c058
add css helper class
devonpis Aug 3, 2022
bdf86af
add and expose global css variables
devonpis Aug 3, 2022
a74a4ef
add spinner component
devonpis Aug 3, 2022
70708f7
fix typo
devonpis Aug 3, 2022
df16c0d
update component stories
devonpis Aug 4, 2022
d9b184f
Merge branch 'release-v4.0.13' into QOL-9031-add-spinner-component
devonpis Aug 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 5 additions & 24 deletions src/docs/components/buttons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,11 +81,11 @@
<div id="qg-one-col" class="row wide">

<div id="qg-primary-content" role="main">
<h2 id="buttons" class="category">Buttons</h2>
<p><span class="label label-default" title="Default bootstrap implementation">Default Bootstrap</span></p>
<p>Publishers can use buttons to express what action will occur when the user clicks it. Buttons are used to initialise an action</p>
<h3> Standard buttons </h3>
<p>The SWE leverages the button component from Bootstrap, with the addition of the 'Primary Alt' button.</p>
<h1 class="category" id="buttons">Buttons</h1>
<h2>Documentation</h2>
<div class="alert alert-info mb-4" role="alert">
<p>Find the <a href="https://www.forgov.qld.gov.au/information-and-communication-technology/communication-and-publishing/website-and-digital-publishing/website-standards-guidelines-and-templates/swe/components/buttons">implementation and usage guidance</a> for this component in the SWE documentation on For Government.</p>
</div>
<div class="qg-tmplt-example">
<div class="panel-body mb-2 p-4">
<button type="button" class="qg-btn btn-default">Default</button>
Expand All @@ -94,11 +94,9 @@ <h3> Standard buttons </h3>
<button type="button" class="qg-btn btn-link ml-3">Link</button>
<button type="button" class="qg-btn btn-outline-dark ml-3">Outline button dark</button>
</div>
<p>Publishers may choose between dark and light Outline button according to the background colour, light version by using class <code>.btn-outline-light</code> and dark version by using class <code>.btn-outline-dark</code> </p>
</div>

<h3> Sizes </h3>
<p> Publishers may choose the size of the buttons by using classes <code>.btn-lg</code> for larger buttons and <code>.btn-sm</code> and <code>.btn-xs</code> for smaller buttons. </p>
<div class="qg-tmplt-example">
<div class="panel-body">
<p>
Expand All @@ -111,7 +109,6 @@ <h3> Sizes </h3>
</div>

<h3> Block level buttons </h3>
<p>Publishers can create block level buttons which span the full width of a parent by adding <code>.btn-block</code>.</p>
<div class="qg-tmplt-example">
<div class="panel-body">
<p>
Expand All @@ -122,11 +119,6 @@ <h3> Block level buttons </h3>
</div>

<h3>Loading button</h3>
<p>When the loading is triggered by an "action" button. The primary button is used and the spinner size is reduced to fit/match the font size.</p>
<p>Button is disabled when spinner is visible (when loading is occurring).</p>
<p>Button text should remain the same so that the user still knows what action is occurring. If space allows, you can change it to describe the action, e.g. "Submitting...", "Saving...", "Downloading...", "Processing...".</p>
<p>Button text to be sentence case.</p>
<p>Spinner is the same font colour as the button label.</p>
<div class="qg-tmplt-example">
<div class="panel-body mb-2 p-4">
<button type="button" class="qg-btn btn-default btn-xs" disabled><span class="spinner-border" role="status"><span class="sr-only">Loading...</span></span> Default</button>
Expand All @@ -135,17 +127,6 @@ <h3>Loading button</h3>
<button type="button" class="qg-btn btn-outline-dark ml-3 btn-lg" disabled><span class="spinner-border" role="status"><span class="sr-only">Loading...</span></span> Outline button dark</button>
</div>
</div>
<br/>
<pre><code class="language-markup">&lt;button type="button" class="qg-btn btn-primary" disabled&gt;
&lt;span class="spinner-border" role="status"&gt;
&lt;span class="sr-only" role="status"&gt;Loading...&lt;/span&gt;
&lt;/span&gt;
Button label
&lt;/button&gt;</code></pre>

<h3> HTML </h3>
<p>Please refer to <a href="http://getbootstrap.com/css/#buttons">Bootstrap's button component</a> for additional implementation advice.</p>

</div>
</div>
</div>
Expand Down
43 changes: 6 additions & 37 deletions src/docs/components/spinners.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,15 +79,10 @@

<div id="qg-primary-content" role="main">
<h1 class="category" id="spinners">Spinners</h1>
<p><span class="label label-primary" title="Heavily customised bootstrap implementation">Customised</span></p>
<p>The spinner component below extends the <a href="https://getbootstrap.com/docs/4.6/components/spinners/" target="_blank">Bootstrap Spinners</a>.</p>
<p>Spinners indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.</p>
<p>Avoid showing multiple loading spinners on a single page.</p>
<h2>Loading page or content area</h2>
<ul>
<li>Spinner to be placed in the part of the page that is loading. </li>
<li>At a minimum, use Heading 3 font size, and a spinner with a height and width of 30px.</li>
</ul>
<h2>Documentation</h2>
<div class="alert alert-info mb-4" role="alert">
<p>Find the <a href="https://www.forgov.qld.gov.au/information-and-communication-technology/communication-and-publishing/website-and-digital-publishing/website-standards-guidelines-and-templates/swe/components/spinners">implementation and usage guidance</a> for this component in the SWE documentation on For Government.</p>
</div>
<h3>Default = center aligned</h3>
<div class="container-fluid">
<div class="row" style="gap: var(--qg-gutter-width)">
Expand All @@ -114,13 +109,8 @@ <h3>Default = center aligned</h3>
</div>
</div>
<br/>
<pre><code class="language-markup">&lt;div class="qg-spinner" role="status"&gt;
&lt;div class="spinner-border"&gt;&lt;/div&gt;
&lt;div class="qg-spinner-label"&gt;
Loading contact form...
&lt;/div&gt;
&lt;/div&gt;</code></pre>
<p>If possible, provide text to explain what is loading, otherwise fallback to describing the state of the loading element e.g. “Loading...”, “Saving...”, “Processing...”.</p>

<h3>Default = center aligned, label without specification</h3>
<div class="container-fluid">
<div class="row" style="gap: var(--qg-gutter-width)">
<div class="card col-sm">
Expand All @@ -146,12 +136,6 @@ <h3>Default = center aligned</h3>
</div>
</div>
<br/>
<pre><code class="language-markup">&lt;div class="qg-spinner" role="status"&gt;
&lt;div class="spinner-border"&gt;&lt;/div&gt;
&lt;div class="qg-spinner-label"&gt;
Loading...
&lt;/div&gt;
&lt;/div&gt;</code></pre>

<h3>Alternative = left aligned</h3>
<div class="container-fluid">
Expand Down Expand Up @@ -179,15 +163,8 @@ <h3>Alternative = left aligned</h3>
</div>
</div>
<br/>
<pre><code class="language-markup">&lt;div class="qg-spinner align-left" role="status"&gt;
&lt;div class="spinner-border"&gt;&lt;/div&gt;
&lt;div class="qg-spinner-label"&gt;
Loading...
&lt;/div&gt;
&lt;/div&gt;</code></pre>

<h3>Absolute center position</h3>
<p>Please use the helper class <code>qg-absolute-center</code> if use want to align the spinner in the middle of a container with defined height.</p>
<div class="container-fluid">
<div class="row" style="gap: var(--qg-gutter-width)">
<div class="card col" style="background-color: var(--qg-color-primary); color: white; min-height: 300px;">
Expand All @@ -203,14 +180,6 @@ <h3>Absolute center position</h3>
</div>
</div>
<br/>
<pre><code class="language-markup">&lt;div style="min-height: 300px;"&gt;
&lt;div class="qg-spinner qg-absolute-center" role="status"&gt;
&lt;div class="spinner-border"&gt;&lt;/div&gt;
&lt;div class="qg-spinner-label"&gt;
Loading...
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</code></pre>

</div>
</div>
Expand Down