From 262cba6e1694276e31789c04acc75eb61f0aa3f9 Mon Sep 17 00:00:00 2001
From: Matheus Rosa <matheus.rosa@juntossomosmais.com.br>
Date: Thu, 5 Sep 2024 14:49:48 -0300
Subject: [PATCH] feat(moda): options to disable buttons

---
 packages/core/src/components.d.ts              |  4 ++++
 .../core/src/components/modal/modal.spec.ts    |  7 ++++---
 packages/core/src/components/modal/modal.tsx   |  4 ++++
 .../src/components/modal/stories/modal.args.ts | 18 ++++++++++++++++++
 .../modal/stories/modal.core.stories.tsx       |  2 ++
 .../modal/stories/modal.react.stories.tsx      |  2 ++
 .../modal/stories/modal.vue.stories.tsx        |  2 ++
 7 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index 89a08562e..96c91aeb9 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -160,6 +160,8 @@ export namespace Components {
     }
     interface AtomModal {
         "alertType"?: 'alert' | 'error';
+        "disablePrimary"?: boolean;
+        "disableSecondary"?: boolean;
         "hasDivider"?: boolean;
         "hasFooter"?: boolean;
         "headerTitle"?: string;
@@ -695,6 +697,8 @@ declare namespace LocalJSX {
     }
     interface AtomModal {
         "alertType"?: 'alert' | 'error';
+        "disablePrimary"?: boolean;
+        "disableSecondary"?: boolean;
         "hasDivider"?: boolean;
         "hasFooter"?: boolean;
         "headerTitle"?: string;
diff --git a/packages/core/src/components/modal/modal.spec.ts b/packages/core/src/components/modal/modal.spec.ts
index 303b93887..008a81e78 100644
--- a/packages/core/src/components/modal/modal.spec.ts
+++ b/packages/core/src/components/modal/modal.spec.ts
@@ -12,7 +12,8 @@ describe('atom-modal', () => {
         <atom-modal
           trigger="button"
           primary-text="Primary"
-          secondary-text="Secondary" 
+          secondary-text="Secondary"
+          disable-primary="true"
         >
           Modal content
         </atom-modal>`,
@@ -21,7 +22,7 @@ describe('atom-modal', () => {
 
   it('should render modal with default values', async () => {
     expect(page.root).toEqualHtml(`
-      <atom-modal primary-text="Primary" secondary-text="Secondary" trigger="button">
+      <atom-modal primary-text="Primary" secondary-text="Secondary" trigger="button" disable-primary="true">
         <ion-modal aria-describedby="atom-modal__content" aria-labelledby="atom-modal__header-title" class="atom-modal" trigger="button">
           <header class="atom-modal__header">
             <div id="atom-modal__header-title"></div>
@@ -36,7 +37,7 @@ describe('atom-modal', () => {
             <atom-button class="atom-modal__btn-action atom-modal__btn-action--secondary" color="secondary" fill="outline">
               Secondary
             </atom-button>
-            <atom-button class="atom-modal__btn-action atom-modal__btn-action--primary" color="primary">
+            <atom-button class="atom-modal__btn-action atom-modal__btn-action--primary" color="primary" disabled="">
               Primary
             </atom-button>
           </footer>
diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx
index 4d092c92a..29d91349e 100644
--- a/packages/core/src/components/modal/modal.tsx
+++ b/packages/core/src/components/modal/modal.tsx
@@ -24,6 +24,8 @@ export class AtomModal {
   @Prop() alertType?: 'alert' | 'error'
   @Prop() progress?: number
   @Prop() hasFooter?: boolean = true
+  @Prop() disablePrimary?: boolean = false
+  @Prop() disableSecondary?: boolean = false
 
   @Event() atomCloseClick: EventEmitter
   @Event() atomDidDismiss: EventEmitter
@@ -132,6 +134,7 @@ export class AtomModal {
             <footer class='atom-modal__footer'>
               <atom-button
                 color='secondary'
+                disabled={this.disableSecondary}
                 fill='outline'
                 class='atom-modal__btn-action atom-modal__btn-action--secondary'
                 onClick={this.handleSecondaryClick}
@@ -140,6 +143,7 @@ export class AtomModal {
               </atom-button>
               <atom-button
                 color='primary'
+                disabled={this.disablePrimary}
                 class='atom-modal__btn-action atom-modal__btn-action--primary'
                 onClick={this.handlePrimaryClick}
               >
diff --git a/packages/core/src/components/modal/stories/modal.args.ts b/packages/core/src/components/modal/stories/modal.args.ts
index 8e65b9614..5c58e274b 100644
--- a/packages/core/src/components/modal/stories/modal.args.ts
+++ b/packages/core/src/components/modal/stories/modal.args.ts
@@ -80,6 +80,22 @@ export const ModalStoryArgs = {
         category: Category.PROPERTIES,
       },
     },
+    disableSecondary: {
+      control: 'boolean',
+      description:
+        'If true, the secondary button will be disabled. Default is false',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    disablePrimary: {
+      control: 'boolean',
+      description:
+        'If true, the primary button will be disabled. Default is false',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
     atomCloseClick: {
       action: 'atomCloseClick',
       description:
@@ -143,4 +159,6 @@ export const ModalComponentArgs = {
   primaryText: 'Primary',
   secondaryText: 'Secondary',
   hasDivider: false,
+  disableSecondary: false,
+  disablePrimary: false,
 }
diff --git a/packages/core/src/components/modal/stories/modal.core.stories.tsx b/packages/core/src/components/modal/stories/modal.core.stories.tsx
index 7e8fba709..8ef8864aa 100644
--- a/packages/core/src/components/modal/stories/modal.core.stories.tsx
+++ b/packages/core/src/components/modal/stories/modal.core.stories.tsx
@@ -21,6 +21,8 @@ const createModal = (args) => {
         progress="${args.progress}"
         has-footer="${args.hasFooter}"
         header-title="${args.headerTitle}"
+        disable-secondary="${args.disableSecondary}"
+        disable-primary="${args.disablePrimary}"
       >
         <div slot="header">Custom Header</div>
         <p>Modal Content</p>
diff --git a/packages/core/src/components/modal/stories/modal.react.stories.tsx b/packages/core/src/components/modal/stories/modal.react.stories.tsx
index f4202a9f3..98b39f102 100644
--- a/packages/core/src/components/modal/stories/modal.react.stories.tsx
+++ b/packages/core/src/components/modal/stories/modal.react.stories.tsx
@@ -20,6 +20,8 @@ const createModal = (args) => (
       secondaryText={args.secondaryText}
       trigger='open-modal'
       progress={args.progress}
+      disablePrimary={args.disablePrimary}
+      disableSecondary={args.disableSecondary}
     >
       <div slot='header'>Custom Header</div>
       <p>Modal Content</p>
diff --git a/packages/core/src/components/modal/stories/modal.vue.stories.tsx b/packages/core/src/components/modal/stories/modal.vue.stories.tsx
index 940aaceed..20da66fb4 100644
--- a/packages/core/src/components/modal/stories/modal.vue.stories.tsx
+++ b/packages/core/src/components/modal/stories/modal.vue.stories.tsx
@@ -23,6 +23,8 @@ const createModal = (args, themeColor = 'light') => ({
         secondary-text="${args.secondaryText}"
         trigger="open-modal"
         progress="${args.progress}"
+        disable-primary="${args.disablePrimary}"
+        disable-secondary="${args.disableSecondary}"
       >
         {{ args.label }}
       </AtomModal>