feat(modal): add options to disable buttons

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;
@@ -696,6 +698,8 @@ declare namespace LocalJSX {
     }
     interface AtomModal {
         "alertType"?: 'alert' | 'error';
+        "disablePrimary"?: boolean;
+        "disableSecondary"?: boolean;
         "hasDivider"?: boolean;
         "hasFooter"?: boolean;
         "headerTitle"?: string;

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>

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

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,
 }

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>

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>

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>