From 887c05806b925952614fc1da3a2b9a6b5cf4aca4 Mon Sep 17 00:00:00 2001 From: Devon Chau Date: Wed, 3 Aug 2022 15:14:05 +1000 Subject: [PATCH 1/5] add css helper class --- .../_project/_blocks/scss-general/_qg-css-helpers.scss | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 src/assets/_project/_blocks/scss-general/_qg-css-helpers.scss diff --git a/src/assets/_project/_blocks/scss-general/_qg-css-helpers.scss b/src/assets/_project/_blocks/scss-general/_qg-css-helpers.scss new file mode 100644 index 000000000..d708b1072 --- /dev/null +++ b/src/assets/_project/_blocks/scss-general/_qg-css-helpers.scss @@ -0,0 +1,7 @@ +// expose helper class to all application +.qg-absolute-center { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} \ No newline at end of file From bdf86afdad96e2679087c8cf826b3f11d1cbe051 Mon Sep 17 00:00:00 2001 From: Devon Chau Date: Wed, 3 Aug 2022 15:15:33 +1000 Subject: [PATCH 2/5] add and expose global css variables --- src/assets/_project/_blocks/qg-main.scss | 7 +++++ .../scss-general/_qg-css-variables.scss | 29 +++++++++++++++++++ .../scss-general/_qg-global-variables.scss | 3 ++ 3 files changed, 39 insertions(+) create mode 100644 src/assets/_project/_blocks/scss-general/_qg-css-variables.scss diff --git a/src/assets/_project/_blocks/qg-main.scss b/src/assets/_project/_blocks/qg-main.scss index 8cc4e6871..73db3dc8d 100644 --- a/src/assets/_project/_blocks/qg-main.scss +++ b/src/assets/_project/_blocks/qg-main.scss @@ -23,6 +23,12 @@ // Queensland government styles // ------------------------- +// expose css variables +@import "scss-general/qg-css-variables"; + +// helper or utility class +@import "scss-general/qg-css-helpers"; + // QG Mixins @import "scss-general/mixins/font-size"; @import "scss-general/mixins/qg-responsive-spacing"; @@ -61,6 +67,7 @@ @import "components/misc/qg-correct-incorrect"; // Adds correct / incorrect styling @import "components/misc/qg-misc"; @import "components/misc/qg-fancybox"; +@import "components/spinners/qg-spinners"; // QG layout components @import "layout/layout-scaffolding"; // Primary layout structure diff --git a/src/assets/_project/_blocks/scss-general/_qg-css-variables.scss b/src/assets/_project/_blocks/scss-general/_qg-css-variables.scss new file mode 100644 index 000000000..943da9abd --- /dev/null +++ b/src/assets/_project/_blocks/scss-general/_qg-css-variables.scss @@ -0,0 +1,29 @@ +// expose color variables to all application +:root { + --qg-color-primary: #{$qg-global-primary}; + --qg-color-primary-dark: #{$qg-global-primary-dark}; + --qg-color-primary-darker: #{$qg-global-primary-darker}; + --qg-color-primary-light: #{$qg-global-primary-light}; + --qg-color-primary-hover: #{$qg-global-primary-hover}; + + --qg-color-primary-grey: #{$qg-global-primary-grey}; + --qg-color-primary-dark-grey: #{$qg-global-primary-dark-grey}; + --qg-color-primary-darker-grey: #{$qg-global-primary-darker-grey}; + --qg-color-primary-light-grey: #{$qg-global-primary-light-grey}; + --qg-color-primary-hover-grey: #{$qg-global-primary-hover-grey}; + + --qg-color-prominent: #{$qg-global-prominent}; + + --qg-color-dark-grey-active: #{$qg-global-dark-grey-active}; + --qg-color-dark-grey-dark-active: #{$qg-global-dark-grey-dark-active}; + --qg-color-primary-accesible-grey: #{$qg-global-primary-accesible-grey}; + --qg-color-light-gray-dark: #{$qg-light-gray-dark}; + + --qg-color-error: #{$qg-global-error}; + + --qg-color-facebook: #{$qg-facebook}; + --qg-color-twitter: #{$qg-twitter}; + --qg-color-linkedin: #{$qg-linkedin}; + + --qg-gutter-width: #{$grid-gutter-width * 0.5}; +} \ No newline at end of file diff --git a/src/assets/_project/_blocks/scss-general/_qg-global-variables.scss b/src/assets/_project/_blocks/scss-general/_qg-global-variables.scss index 6006817d5..23815781b 100644 --- a/src/assets/_project/_blocks/scss-general/_qg-global-variables.scss +++ b/src/assets/_project/_blocks/scss-general/_qg-global-variables.scss @@ -14,6 +14,9 @@ $qg-global-primary-darker-grey: #292929; $qg-global-primary-light-grey: #f3f3f3; $qg-global-primary-hover-grey:#CCC; +// ## Global Prominent Colours +$qg-global-prominent: $qg-light-green; + // ## Dark grey $qg-global-dark-grey-active: #373737; $qg-global-dark-grey-dark-active: #303030; From a74a4efec2a6e05cbcff3d93eb6fc262a83e0558 Mon Sep 17 00:00:00 2001 From: Devon Chau Date: Wed, 3 Aug 2022 15:15:48 +1000 Subject: [PATCH 3/5] add spinner component --- .../components/spinners/_qg-spinners.scss | 54 ++++ .../bootstrap/_bootstrap-imports.scss | 1 + src/docs/components.html | 1 + src/docs/components/buttons.html | 23 ++ src/docs/components/spinners.html | 235 ++++++++++++++++++ 5 files changed, 314 insertions(+) create mode 100644 src/assets/_project/_blocks/components/spinners/_qg-spinners.scss create mode 100644 src/docs/components/spinners.html diff --git a/src/assets/_project/_blocks/components/spinners/_qg-spinners.scss b/src/assets/_project/_blocks/components/spinners/_qg-spinners.scss new file mode 100644 index 000000000..1651f4fe1 --- /dev/null +++ b/src/assets/_project/_blocks/components/spinners/_qg-spinners.scss @@ -0,0 +1,54 @@ +.qg-spinner { + text-align: center; + .spinner-border { + color: $qg-global-prominent; + width: 30px; + height: 30px; + } + .qg-spinner-label { + @extend .h3; + margin-top: 0.75rem; + margin-bottom: 0; + } + &.align-left { + text-align: left; + display: flex; + align-items: center; + .spinner-border { + margin-right: 1rem; + } + .qg-spinner-label { + margin-top: 0; + } + } +} + +.qg-btn { + .spinner-border { + vertical-align: middle; + margin-right: 0.5rem; + width: 22px; + height: 22px; + margin-top: -6px; + margin-bottom: -2px; + border-width: 4px; + } + &.btn-xs { + .spinner-border { + width: 14px; + height: 14px; + } + } + &.btn-sm { + .spinner-border { + width: 18px; + height: 18px; + } + } + &.btn-lg { + .spinner-border { + width: 26px; + height: 26px; + } + } +} \ No newline at end of file diff --git a/src/assets/_project/_blocks/scss-general/bootstrap/_bootstrap-imports.scss b/src/assets/_project/_blocks/scss-general/bootstrap/_bootstrap-imports.scss index 70b5b6c34..7e3664bf4 100644 --- a/src/assets/_project/_blocks/scss-general/bootstrap/_bootstrap-imports.scss +++ b/src/assets/_project/_blocks/scss-general/bootstrap/_bootstrap-imports.scss @@ -32,4 +32,5 @@ @import "node_modules/bootstrap/scss/popover"; @import "node_modules/bootstrap/scss/carousel"; @import "node_modules/bootstrap/scss/utilities"; +@import "node_modules/bootstrap/scss/spinners"; @import "../../layout/print"; diff --git a/src/docs/components.html b/src/docs/components.html index b14dec549..4be828e8a 100644 --- a/src/docs/components.html +++ b/src/docs/components.html @@ -100,6 +100,7 @@

Components

  • Promotions
  • Correct / incorrect
  • Quick Exit
    • +
  • Spinners
  • Survey
  • Tables
  • Twitter Feed
    • diff --git a/src/docs/components/buttons.html b/src/docs/components/buttons.html index 72e1edeb7..785b57537 100644 --- a/src/docs/components/buttons.html +++ b/src/docs/components/buttons.html @@ -120,6 +120,29 @@

    Block level buttons

    + +

    Loading button

    +

    When the loading is triggerd by an "action" button. The primary button is used and the spinner size is reduced to fit/match the font size.

    +

    Button is disabled when spinner is visible (when loading is occuring).

    +

    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...".

    +

    Button text to be sentence case.

    +

    Spinner is the same font colour as the button label.

    +
    +
    + + + + +
    +
    +
    +
    <button type="button" class="qg-btn btn-primary" disabled>
+  <span class="spinner-border" role="status">
+    <span class="sr-only" role="status">Loading...</span>
+  </span> 
+  Button label
+</button>
    +

    HTML

    Please refer to Bootstrap's button component for additional implementation advice.

    diff --git a/src/docs/components/spinners.html b/src/docs/components/spinners.html new file mode 100644 index 000000000..dd79fde62 --- /dev/null +++ b/src/docs/components/spinners.html @@ -0,0 +1,235 @@ + + + + + + + + + Spinners + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    + +
    +
    +
    +
    +
    + +
    +

    Spinners

    +

    Customised

    +

    The spinner component below extends the Bootstrap Spinners.

    +

    Spinners indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

    +

    Avoid showing multiple loading spinners on a single page.

    +

    Loading page or content area

    +
      +
    • Spinner to be placed in the part of the page that is loading.
      • +
    • At a minimum, use Heading 3 font size, and a spinner with a height and width of 30px.
      • +
    +

    Default = center aligned

    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + 
    <div class="qg-spinner" role="status">
+  <div class="spinner-border"></div>
+  <div class="qg-spinner-label">
+    Loading contact form...
+  </div>
+</div>
    +

    If possible, provide text to explain what is loading, otherwise fallback to describing the state of the loading element e.g. “Loading...”, “Saving...”, “Processing...”.

    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    + 
    <div class="qg-spinner" role="status">
+  <div class="spinner-border"></div>
+  <div class="qg-spinner-label">
+    Loading...
+  </div>
+</div>
    + +

    Alternative = left aligned

    +
    +
    +
    +
    + +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    <div class="qg-spinner align-left" role="status">
+<div class="spinner-border"></div>
+<div class="qg-spinner-label">
+  Loading...
+</div>
+</div>
    + +

    Absolute center position

    +

    Please use the helper class qg-absolute-center if use want to align the spinner in the middle of a container with defined height.

    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    <div style="min-height: 300px;">
+  <div class="qg-spinner qg-absolute-center" role="status">
+    <div class="spinner-border"></div>
+    <div class="qg-spinner-label">
+      Loading...
+    </div>
+  </div>
+</div>
    + +
    +
    +
    +
    +
    +
    +
    + + + + + + + + + From 70708f7619412cc86b0615830a2c5f2c75681731 Mon Sep 17 00:00:00 2001 From: Devon Chau Date: Thu, 4 Aug 2022 08:30:14 +1000 Subject: [PATCH 4/5] fix typo --- src/docs/components/buttons.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/docs/components/buttons.html b/src/docs/components/buttons.html index 785b57537..6d028ff6c 100644 --- a/src/docs/components/buttons.html +++ b/src/docs/components/buttons.html @@ -122,8 +122,8 @@

    Block level buttons

    Loading button

    -

    When the loading is triggerd by an "action" button. The primary button is used and the spinner size is reduced to fit/match the font size.

    -

    Button is disabled when spinner is visible (when loading is occuring).

    +

    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.

    +

    Button is disabled when spinner is visible (when loading is occurring).

    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...".

    Button text to be sentence case.

    Spinner is the same font colour as the button label.

    From df16c0d12f1a5ff82864fec379ccff2a81ad0a10 Mon Sep 17 00:00:00 2001 From: Devon Chau Date: Fri, 5 Aug 2022 09:06:16 +1000 Subject: [PATCH 5/5] update component stories --- src/docs/components/buttons.html | 29 ++++----------------- src/docs/components/spinners.html | 43 +++++-------------------------- 2 files changed, 11 insertions(+), 61 deletions(-) diff --git a/src/docs/components/buttons.html b/src/docs/components/buttons.html index 6d028ff6c..f269ec820 100644 --- a/src/docs/components/buttons.html +++ b/src/docs/components/buttons.html @@ -81,11 +81,11 @@
    -

    Buttons

    -

    Default Bootstrap

    -

    Publishers can use buttons to express what action will occur when the user clicks it. Buttons are used to initialise an action

    -

    Standard buttons

    -

    The SWE leverages the button component from Bootstrap, with the addition of the 'Primary Alt' button.

    +

    Buttons

    +

    Documentation

    +
    @@ -94,11 +94,9 @@

    Standard buttons

    -

    Publishers may choose between dark and light Outline button according to the background colour, light version by using class .btn-outline-light and dark version by using class .btn-outline-dark

    Sizes

    -

    Publishers may choose the size of the buttons by using classes .btn-lg for larger buttons and .btn-sm and .btn-xs for smaller buttons.

    @@ -111,7 +109,6 @@

    Sizes

    Block level buttons

    -

    Publishers can create block level buttons which span the full width of a parent by adding .btn-block.

    @@ -122,11 +119,6 @@

    Block level buttons

    Loading button

    -

    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.

    -

    Button is disabled when spinner is visible (when loading is occurring).

    -

    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...".

    -

    Button text to be sentence case.

    -

    Spinner is the same font colour as the button label.

    @@ -135,17 +127,6 @@

    Loading button

    -
    -
    <button type="button" class="qg-btn btn-primary" disabled>
-  <span class="spinner-border" role="status">
-    <span class="sr-only" role="status">Loading...</span>
-  </span> 
-  Button label
-</button>
    - -

    HTML

    -

    Please refer to Bootstrap's button component for additional implementation advice.

    -
    diff --git a/src/docs/components/spinners.html b/src/docs/components/spinners.html index dd79fde62..8e7679fff 100644 --- a/src/docs/components/spinners.html +++ b/src/docs/components/spinners.html @@ -79,15 +79,10 @@

    Spinners

    -

    Customised

    -

    The spinner component below extends the Bootstrap Spinners.

    -

    Spinners indicate the loading state of a component or page with Bootstrap spinners, built entirely with HTML, CSS, and no JavaScript.

    -

    Avoid showing multiple loading spinners on a single page.

    -

    Loading page or content area

    -
      -
    • Spinner to be placed in the part of the page that is loading.
      • -
    • At a minimum, use Heading 3 font size, and a spinner with a height and width of 30px.
      • -
    +

    Documentation

    +

    Default = center aligned

    @@ -114,13 +109,8 @@

    Default = center aligned


    - 
    <div class="qg-spinner" role="status">
-  <div class="spinner-border"></div>
-  <div class="qg-spinner-label">
-    Loading contact form...
-  </div>
-</div>
    -

    If possible, provide text to explain what is loading, otherwise fallback to describing the state of the loading element e.g. “Loading...”, “Saving...”, “Processing...”.

    + +

    Default = center aligned, label without specification

    @@ -146,12 +136,6 @@

    Default = center aligned


    - 
    <div class="qg-spinner" role="status">
-  <div class="spinner-border"></div>
-  <div class="qg-spinner-label">
-    Loading...
-  </div>
-</div>

    Alternative = left aligned

    @@ -179,15 +163,8 @@

    Alternative = left aligned


    -
    <div class="qg-spinner align-left" role="status">
-<div class="spinner-border"></div>
-<div class="qg-spinner-label">
-  Loading...
-</div>
-</div>

    Absolute center position

    -

    Please use the helper class qg-absolute-center if use want to align the spinner in the middle of a container with defined height.

    @@ -203,14 +180,6 @@

    Absolute center position


    -
    <div style="min-height: 300px;">
-  <div class="qg-spinner qg-absolute-center" role="status">
-    <div class="spinner-border"></div>
-    <div class="qg-spinner-label">
-      Loading...
-    </div>
-  </div>
-</div>