Added new white outline variant and active state to button component

digitalnsw · Jul 10, 2023 · 677dc1a · 677dc1a
1 parent 75572fe
commit 677dc1a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 0 deletions.
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
@@ -56,6 +56,16 @@ $nsw-buttons: (
     focus: var(--nsw-white),
     hover: black
   ),
+  white-outline: (
+    text-color: var(--nsw-white),
+    text-color-hover: var(--nsw-text-dark),
+    background: transparent,
+    background-hover: var(--nsw-white),
+    border: var(--nsw-white),
+    border-hover: transparent,
+    focus: var(--nsw-white),
+    hover: black
+  ),
   danger: (
     text-color: var(--nsw-text-light),
     text-color-hover: var(--nsw-text-light),
@@ -88,6 +98,7 @@ $nsw-buttons: (
   padding: rem(10px) rem(22px);
   cursor: pointer;
   -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+  appearance: none;
   text-decoration: none;
   -webkit-font-smoothing: antialiased;
   text-align: center;
@@ -206,6 +217,22 @@ $nsw-buttons: (
         }
       }
 
+      &:active {
+        color: map-get($property-map, text-color-hover);
+        background-color: map-get($property-map, background-hover);
+        border-color: map-get($property-map, border-hover);
+        @if map-get($property-map, hover) == white {
+          background-image: linear-gradient(rgba(var(--nsw-white-rgb), 0.075), rgba(var(--nsw-white-rgb), 0.075));
+        }
+        @if map-get($property-map, hover) == black {
+          background-image: linear-gradient(rgba(var(--nsw-black-rgb), 0.035), rgba(var(--nsw-black-rgb), 0.035));
+        }
+
+        .nsw-material-icons {
+          color: map-get($property-map, text-color-hover);
+        }
+      }
+
       &:disabled,
       &.disabled {
         color: map-get($property-map, text-color);

diff --git a/src/components/button/index.hbs b/src/components/button/index.hbs
@@ -89,6 +89,19 @@ meta-index: true
 </div>
 {{/_docs-example}}
 
+<h3>White Outline</h3>
+{{#> _docs-example dark="true"}}
+<div class="nsw-list nsw-list--8">
+  {{>_button-link url="#" style="white-outline" text="Link"}}
+  {{>_button-link url="#" style="white-outline" text="Link icon" icon="upload"}}
+  {{>_button type="button" style="white-outline" text="Button"}}
+  {{>_button type="button" style="white-outline" text="Button link" icon="download" icon-after="true"}}
+  {{>_button-input type="button" style="white-outline" text="Input"}}
+  {{>_button-input type="button" style="white-outline" text="Disabled" isDisabled=true}}
+  {{>_button type="button" style="white-outline" text="Full Width" isFullWidth=true}}
+</div>
+{{/_docs-example}}
+
 <h3>Danger</h3>
 {{#>_docs-example}}
 <div class="nsw-list nsw-list--8">