✨(react) add active state on button

Previously we had no way of forcing a button to render in
an active state.

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);
     }
   }
 

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";

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}