New button classes and full width modifier

digitalnsw · Feb 23, 2021 · 7cc329f · 7cc329f
1 parent 37efd8e
commit 7cc329f
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 25 deletions.
diff --git 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
@@ -1,3 +1,3 @@
-<a href="{{url}}" class="nsw-button nsw-button--{{style}}">
+<a href="{{url}}" class="nsw-button nsw-button--{{style}}{{#if isFullWidth}} nsw-button--full-width{{/if}}">
   {{text}}
 </a>
diff --git 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}}
 </button>
diff --git 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
@@ -19,24 +19,24 @@ title: Buttons
               {{>_button-input type="reset" style="primary" text="Input Reset"}}
             </div>
             <div class="nsw-col">
-              <h2 class="nsw-section-title">Highlight</h2>
-              {{>_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"}}
+              <h2 class="nsw-section-title">Secondary</h2>
+              {{>_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"}}
             </div>
             <div class="nsw-col">
-              <h2 class="nsw-section-title">Outline</h2>
-              {{>_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"}}
+              <h2 class="nsw-section-title">Danger</h2>
+              {{>_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"}}
             </div>
           </div>
         </div>
@@ -70,14 +70,25 @@ title: Buttons
           <div class="nsw-grid">
             <div class="nsw-col">
               <h2 class="nsw-section-title">Disabled</h2>
-              <p><strong>Note:</strong> Its not possible to disable links, a class of .disable should only be applied to buttons and inputs</p>
+              <p><strong>Note:</strong> It is not possible to disable links, therefore attribute "disabled" should only be applied to buttons and inputs.</p>
               {{>_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}}
               {{>_button-input type="button" style="primary" text="Input" isDisabled=true}}
               {{>_button-input type="submit" style="primary" text="Input Submit" isDisabled=true}}
               {{>_button-input type="reset" style="primary" text="Input Reset" isDisabled=true}}
             </div>
+            <div class="nsw-col">
+              <h2 class="nsw-section-title">Full width</h2>
+              <p><strong>Note:</strong> Full width buttons will stretch to 100% on mobile but will revert back to usual behaviour on desktop.</p>
+              {{>_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}}
+            </div>
           </div>
         </div>
       </div>

diff --git 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,