From f3e3b568fc519f538187d339192bcbc216567404 Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Thu, 16 Feb 2023 14:40:48 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(react)=20add=20active=20state=20on=20?=
 =?UTF-8?q?button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously we had no way of forcing a button to render in
an active state.
---
 packages/react/src/components/Button/index.scss     | 7 ++++---
 packages/react/src/components/Button/index.spec.tsx | 1 -
 packages/react/src/components/Button/index.tsx      | 5 +++++
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/components/Button/index.scss b/packages/react/src/components/Button/index.scss
index cd9449e..f870217 100644
--- a/packages/react/src/components/Button/index.scss
+++ b/packages/react/src/components/Button/index.scss
@@ -38,7 +38,7 @@
       background-color: var(--c--theme--colors--primary-600);
     }
 
-    &:active {
+    &:active, &.c__button--active {
       background-color: var(--c--theme--colors--primary-500);
     }
   }
@@ -51,7 +51,7 @@
       background-color: var(--c--theme--colors--secondary-600);
     }
 
-    &:active {
+    &:active, &.c__button--active {
       background-color: var(--c--theme--colors--secondary-500);
     }
   }
@@ -64,8 +64,9 @@
       color: var(--c--theme--colors--greyscale-900);
     }
 
-    &:active {
+    &:active, &.c__button--active {
       color: var(--c--theme--colors--greyscale-800);
+      background-color: var(--c--theme--colors--greyscale-200);
     }
   }
 
diff --git a/packages/react/src/components/Button/index.spec.tsx b/packages/react/src/components/Button/index.spec.tsx
index 919fe6a..26fcfad 100644
--- a/packages/react/src/components/Button/index.spec.tsx
+++ b/packages/react/src/components/Button/index.spec.tsx
@@ -1,4 +1,3 @@
-import { describe, expect, it } from "vitest";
 import { act, render, screen, waitFor } from "@testing-library/react";
 import React from "react";
 import { buildTheme, loadTokens } from "tests/Theme";
diff --git a/packages/react/src/components/Button/index.tsx b/packages/react/src/components/Button/index.tsx
index 482a472..684ed0b 100644
--- a/packages/react/src/components/Button/index.tsx
+++ b/packages/react/src/components/Button/index.tsx
@@ -4,6 +4,7 @@ interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
   color?: "primary" | "secondary" | "tertiary" | "danger";
   icon?: ReactNode;
   iconPosition?: "left" | "right";
+  active?: boolean;
 }
 
 export const Button = ({
@@ -11,6 +12,7 @@ export const Button = ({
   color = "primary",
   iconPosition = "left",
   icon,
+  active,
   ...props
 }: Props) => {
   const classes = ["c__button", "c__button--" + color];
@@ -20,6 +22,9 @@ export const Button = ({
   if (icon && !children) {
     classes.push("c__button--icon-only");
   }
+  if (active) {
+    classes.push("c__button--active");
+  }
   return (
     <button className={classes.join(" ")} {...props}>
       {!!icon && iconPosition === "left" && icon}