From 7cc329f2236ebde3f844b9d7d86e5070ea53ce47 Mon Sep 17 00:00:00 2001 From: Anna Yeshtukova <> Date: Tue, 23 Feb 2021 22:11:45 +1100 Subject: [PATCH] New button classes and full width modifier --- src/components/button/_button-input.hbs | 2 +- src/components/button/_button-link.hbs | 2 +- src/components/button/_button.hbs | 2 +- src/components/button/_button.scss | 10 ++++++ src/components/button/index.hbs | 45 +++++++++++++++---------- src/global/scss/settings/_settings.scss | 27 ++++++++++++--- 6 files changed, 63 insertions(+), 25 deletions(-) diff --git a/src/components/button/_button-input.hbs b/src/components/button/_button-input.hbs index b04fbac9..47736549 100644 --- a/src/components/button/_button-input.hbs +++ b/src/components/button/_button-input.hbs @@ -4,7 +4,7 @@ {{else}} type="button" {{/if}} - class="nsw-button nsw-button--{{style}}" + class="nsw-button nsw-button--{{style}}{{#if isFullWidth}} nsw-button--full-width{{/if}}" {{#if isDisabled}}disabled{{/if}} value="{{text}}" > diff --git a/src/components/button/_button-link.hbs b/src/components/button/_button-link.hbs index 9bfb4192..3602d57d 100644 --- a/src/components/button/_button-link.hbs +++ b/src/components/button/_button-link.hbs @@ -1,3 +1,3 @@ - + {{text}} diff --git a/src/components/button/_button.hbs b/src/components/button/_button.hbs index c33b555d..37bc4a7d 100644 --- a/src/components/button/_button.hbs +++ b/src/components/button/_button.hbs @@ -4,7 +4,7 @@ {{else}} type="button" {{/if}} - class="nsw-button nsw-button--{{style}}" + class="nsw-button nsw-button--{{style}}{{#if isFullWidth}} nsw-button--full-width{{/if}}" {{#if isDisabled}}disabled{{/if}}> {{text}} diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss index 0ad1ce58..0d4c5404 100644 --- a/src/components/button/_button.scss +++ b/src/components/button/_button.scss @@ -49,3 +49,13 @@ margin-bottom: 0; } } + +.nsw-button--full-width { + display: block; + width: 100%; + + @include breakpoint($desktop-breakpoint) { + display: inline-block; + width: auto; + } +} diff --git a/src/components/button/index.hbs b/src/components/button/index.hbs index f512dfb1..f74a633b 100644 --- a/src/components/button/index.hbs +++ b/src/components/button/index.hbs @@ -19,24 +19,24 @@ title: Buttons {{>_button-input type="reset" style="primary" text="Input Reset"}}
-

Highlight

- {{>_button-link url="#" style="highlight" text="Link"}} - {{>_button type="button" style="highlight" text="Button"}} - {{>_button type="submit" style="highlight" text="Submit Button"}} - {{>_button type="reset" style="highlight" text="Reset Button"}} - {{>_button-input type="button" style="highlight" text="Input"}} - {{>_button-input type="submit" style="highlight" text="Input Submit"}} - {{>_button-input type="reset" style="highlight" text="Input Reset"}} +

Secondary

+ {{>_button-link url="#" style="secondary" text="Link"}} + {{>_button type="button" style="secondary" text="Button"}} + {{>_button type="submit" style="secondary" text="Submit Button"}} + {{>_button type="reset" style="secondary" text="Reset Button"}} + {{>_button-input type="button" style="secondary" text="Input"}} + {{>_button-input type="submit" style="secondary" text="Input Submit"}} + {{>_button-input type="reset" style="secondary" text="Input Reset"}}
-

Outline

- {{>_button-link url="#" style="outline" text="Link"}} - {{>_button type="button" style="outline" text="Button"}} - {{>_button type="submit" style="outline" text="Submit Button"}} - {{>_button type="reset" style="outline" text="Reset Button"}} - {{>_button-input type="button" style="outline" text="Input"}} - {{>_button-input type="submit" style="outline" text="Input Submit"}} - {{>_button-input type="reset" style="outline" text="Input Reset"}} +

Danger

+ {{>_button-link url="#" style="danger" text="Link"}} + {{>_button type="button" style="danger" text="Button"}} + {{>_button type="submit" style="danger" text="Submit Button"}} + {{>_button type="reset" style="danger" text="Reset Button"}} + {{>_button-input type="button" style="danger" text="Input"}} + {{>_button-input type="submit" style="danger" text="Input Submit"}} + {{>_button-input type="reset" style="danger" text="Input Reset"}}
@@ -70,7 +70,7 @@ title: Buttons

Disabled

-

Note: Its not possible to disable links, a class of .disable should only be applied to buttons and inputs

+

Note: It is not possible to disable links, therefore attribute "disabled" should only be applied to buttons and inputs.

{{>_button type="button" style="primary" text="Button" isDisabled=true}} {{>_button type="submit" style="primary" text="Submit Button" isDisabled=true}} {{>_button type="reset" style="primary" text="Reset Button" isDisabled=true}} @@ -78,6 +78,17 @@ title: Buttons {{>_button-input type="submit" style="primary" text="Input Submit" isDisabled=true}} {{>_button-input type="reset" style="primary" text="Input Reset" isDisabled=true}}
+
+

Full width

+

Note: Full width buttons will stretch to 100% on mobile but will revert back to usual behaviour on desktop.

+ {{>_button-link url="#" style="primary" text="Link" isFullWidth=true}} + {{>_button type="button" style="primary" text="Button" isFullWidth=true}} + {{>_button type="submit" style="primary" text="Submit Button" isFullWidth=true}} + {{>_button type="reset" style="primary" text="Reset Button" isFullWidth=true}} + {{>_button-input type="button" style="primary" text="Input" isFullWidth=true}} + {{>_button-input type="submit" style="primary" text="Input Submit" isFullWidth=true}} + {{>_button-input type="reset" style="primary" text="Input Reset" isFullWidth=true}} +
diff --git a/src/global/scss/settings/_settings.scss b/src/global/scss/settings/_settings.scss index 762136af..91af9e3b 100644 --- a/src/global/scss/settings/_settings.scss +++ b/src/global/scss/settings/_settings.scss @@ -118,6 +118,7 @@ $light10: #f4f4f7 !default; $white: #ffffff !default; // Utility colors +$danger: #d7153a !default; $info: $nsw-secondary-blue !default; $info-background: #eaedf4 !default; $success: #00a908 !default; @@ -246,13 +247,21 @@ $button-variations: ( border: $nsw-primary-blue, border-hover: lighten($nsw-primary-blue, 5.88) ), - highlight: ( + secondary: ( + text-color: $dark80, + text-color-hover: $white, + background: $white, + background-hover: $nsw-primary-blue, + border: $nsw-primary-blue, + border-hover: $nsw-primary-blue + ), + danger: ( text-color: $white, text-color-hover: $white, - background: $nsw-primary-highlight, - background-hover: lighten($nsw-primary-highlight, 5.88), - border: $nsw-primary-highlight, - border-hover: lighten($nsw-primary-highlight, 5.88) + background: $danger, + background-hover: lighten($danger, 5.88), + border: $danger, + border-hover: lighten($danger, 5.88) ), outline: ( text-color: $dark80, @@ -262,6 +271,14 @@ $button-variations: ( border: $nsw-primary-blue, border-hover: $nsw-primary-blue ), + highlight: ( + text-color: $white, + text-color-hover: $white, + background: $nsw-primary-highlight, + background-hover: lighten($nsw-primary-highlight, 5.88), + border: $nsw-primary-highlight, + border-hover: lighten($nsw-primary-highlight, 5.88) + ), white: ( text-color: $dark80, text-color-hover: $dark80,