feat: add disable clear button

Signed-off-by: hxtree <[email protected]>
hxtree · Dec 22, 2023 · 2c7f378 · 2c7f378
1 parent 1a952a6
commit 2c7f378
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git 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
@@ -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,14 +64,20 @@ 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};
   }
 
   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
@@ -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;