From 2c7f3781fcd8c496766b43973716c6bf6990352f Mon Sep 17 00:00:00 2001
From: hxtree <matthew.heroux@gmail.com>
Date: Fri, 22 Dec 2023 05:26:27 +0000
Subject: [PATCH] feat: add disable clear button

Signed-off-by: hxtree <matthew.heroux@gmail.com>
---
 .../src/components/DiceAnalyzer.tsx           | 25 +++++++++----------
 .../src/components/Button/Button.tsx          | 11 ++++++--
 .../src/components/Button/style.module.scss   |  8 +++++-
 3 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/services/admin-client/src/components/DiceAnalyzer.tsx b/services/admin-client/src/components/DiceAnalyzer.tsx
index d3462ae7..d2a4d823 100644
--- a/services/admin-client/src/components/DiceAnalyzer.tsx
+++ b/services/admin-client/src/components/DiceAnalyzer.tsx
@@ -123,21 +123,20 @@ export const DiceAnalyzer = (props: DiceAnalyzerProps) => {
         </Grid>
         <div>
         <Button
-      color="secondary"
-      onClick={() => clear()}
-      // TODO clear should be disabled when already cleared
-      // disabled="true"
-      testId={`dice-analyzer-clear`}
-      ref={(ref: any) => analytics.set(ref, 'Clear')}>
-      Clear
+        color="secondary"
+        onClick={() => clear()}
+        disabled={data.length < 1}
+        testId={`dice-analyzer-clear`}
+        ref={(ref: any) => analytics.set(ref, 'Clear')}>
+        Clear
       </Button>
       <Button
-      color="primary"
-      loading={isLoading}
-      onClick={() => callApi()}
-      testId={`dice-analyzer-roll`}
-      ref={(ref: any) => analytics.set(ref, 'Roll')}>
-      Roll
+        color="primary"
+        loading={isLoading}
+        onClick={() => callApi()}
+        testId={`dice-analyzer-roll`}
+        ref={(ref: any) => analytics.set(ref, 'Roll')}>
+        Roll
       </Button>
 
 
diff --git a/services/design-system/src/components/Button/Button.tsx b/services/design-system/src/components/Button/Button.tsx
index 9bf8753b..bee7370d 100644
--- a/services/design-system/src/components/Button/Button.tsx
+++ b/services/design-system/src/components/Button/Button.tsx
@@ -27,12 +27,13 @@ export type ButtonProps = {
   selected?: boolean;
   size?: keyof typeof ButtonSize;
   href?: string; // TODO add support
+  disabled?: boolean;
   onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
   testId?: string;
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props: ButtonProps, ref) => {
-  const { testId, href, loading, color, children, variant, selected, size, onClick } = props;
+  const { disabled, testId, href, loading, color, children, variant, selected, size, onClick } = props;
 
   const classNames: string[] = ['button'];
 
@@ -63,7 +64,12 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props: B
   }
 
   let onClickHandler;
-  if (onClick !== undefined) {
+  let isButtonDisabled = false;
+
+  if(disabled){
+    isButtonDisabled = true;
+    classNames.push(`button-disabled`)
+  } else if (onClick !== undefined) {
     onClickHandler = onClick;
   } else if(href){
     onClickHandler = () => { window.location.href = href};
@@ -71,6 +77,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>((props: B
 
   return (
     <button
+      disabled={isButtonDisabled}
       className={classNames.join(' ')}
       onClick={ onClickHandler }
       ref={ref}
diff --git a/services/design-system/src/components/Button/style.module.scss b/services/design-system/src/components/Button/style.module.scss
index cb0e6723..ea48b086 100644
--- a/services/design-system/src/components/Button/style.module.scss
+++ b/services/design-system/src/components/Button/style.module.scss
@@ -12,7 +12,13 @@
     border: none;
     margin: 8px;
     box-shadow: none;
-
+    &.button-disabled {
+      opacity: 0.5;
+      border: 3px solid $color-white !important;
+      background-color: $color-gray !important;
+      color: $color-black !important;
+      cursor: not-allowed;
+    }
     &.button-primary {
       border: 3px solid $color-primary;
       background-color: $color-primary;