From 7bfbef3e2b48869b21ae51461a69d71cc8567fd4 Mon Sep 17 00:00:00 2001
From: Lauren Hitchon <lauren@hitchon.me>
Date: Mon, 10 Jul 2023 13:02:12 +1000
Subject: [PATCH] Added new white outline variant and active state to button
 component (#317)

---
 src/components/button/_button.scss | 27 +++++++++++++++++++++++++++
 src/components/button/index.hbs    | 13 +++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 3a49996a..7120b238 100644
--- 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
index 0d740857..f9a677e9 100644
--- 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">