feat(modal): add new props to atom-modal interface and update stories

juntossomosmais · Feb 12, 2025 · 07cf29b · 07cf29b
1 parent 7d58aae
commit 07cf29b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 3 deletions.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -201,11 +201,13 @@ export namespace Components {
     }
     interface AtomModal {
         "alertType"?: 'alert' | 'error';
+        "canDismiss"?: boolean;
         "disablePrimaryButton": boolean;
         "disableSecondaryButton": boolean;
         "hasDivider": boolean;
         "hasFooter": boolean;
         "headerTitle": string;
+        "idName"?: string;
         "isOpen": boolean;
         "primaryButtonText"?: string;
         "progress"?: number;
@@ -935,11 +937,13 @@ declare namespace LocalJSX {
     }
     interface AtomModal {
         "alertType"?: 'alert' | 'error';
+        "canDismiss"?: boolean;
         "disablePrimaryButton"?: boolean;
         "disableSecondaryButton"?: boolean;
         "hasDivider"?: boolean;
         "hasFooter"?: boolean;
         "headerTitle"?: string;
+        "idName"?: string;
         "isOpen"?: boolean;
         "onAtomCloseClick"?: (event: AtomModalCustomEvent<any>) => void;
         "onAtomDidDismiss"?: (event: AtomModalCustomEvent<any>) => void;

diff --git a/packages/core/src/components/modal/stories/modal.args.ts b/packages/core/src/components/modal/stories/modal.args.ts
@@ -29,6 +29,13 @@ export const ModalStoryArgs = {
         category: Category.PROPERTIES,
       },
     },
+    id: {
+      control: 'text',
+      description: 'The id of the modal',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
     hasDivider: {
       control: 'boolean',
       description: 'if true, a divider will be added on the header and footer',
@@ -104,6 +111,14 @@ export const ModalStoryArgs = {
         category: Category.PROPERTIES,
       },
     },
+    canDismiss: {
+      control: 'boolean',
+      description:
+        'If true, the modal can be dismissed by clicking outside the modal. Default is true',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
     atomCloseClick: {
       action: 'atomCloseClick',
       description:
@@ -227,4 +242,5 @@ export const ModalComponentArgs = {
   disableSecondaryButton: false,
   disablePrimaryButton: false,
   isOpen: false,
+  canDismiss: true,
 }
diff --git a/packages/core/src/components/modal/stories/modal.core.stories.tsx b/packages/core/src/components/modal/stories/modal.core.stories.tsx
@@ -24,6 +24,8 @@ const createModal = (args) => {
         disable-secondary-button="${args.disableSecondaryButton}"
         disable-primary-button="${args.disablePrimaryButton}"
         is-open="${args.isOpen}"
+        can-dismiss="${args.canDismiss}"
+        id="${args.id}"
       >
         <div slot="header">Custom Header</div>
         <p>Modal Content</p>
@@ -63,7 +65,7 @@ export const Alert: StoryObj = {
   },
 }
 
-export const Error: StoryObj = {
+export const ErrorModal: StoryObj = {
   render: (args) => createModal(args),
   args: {
     ...ModalComponentArgs,

diff --git a/packages/core/src/components/modal/stories/modal.react.stories.tsx b/packages/core/src/components/modal/stories/modal.react.stories.tsx
@@ -23,6 +23,8 @@ const createModal = (args) => (
       disablePrimaryButton={args.disablePrimaryButton}
       disableSecondaryButton={args.disableSecondaryButton}
       isOpen={args.isOpen}
+      canDismiss={args.canDismiss}
+      id={args.id}
     >
       <div slot='header'>Custom Header</div>
       <p>Modal Content</p>
@@ -61,7 +63,7 @@ export const Alert: StoryObj = {
   },
 }
 
-export const Error: StoryObj = {
+export const ErrorModal: StoryObj = {
   render: (args) => createModal(args),
   args: {
     ...ModalComponentArgs,

diff --git a/packages/core/src/components/modal/stories/modal.vue.stories.tsx b/packages/core/src/components/modal/stories/modal.vue.stories.tsx
@@ -26,6 +26,8 @@ const createModal = (args, themeColor = 'light') => ({
         disable-primary-button="${args.disablePrimaryButton}"
         disable-secondary-button="${args.disableSecondaryButton}"
         is-open="${args.isOpen}"
+        can-dismiss="${args.canDismiss}"
+        id="${args.id}"
       >
         <div slot='header'>Custom Header</div>
         <p>Modal Content</p>
@@ -65,7 +67,7 @@ export const Alert: StoryObj = {
   },
 }
 
-export const Error: StoryObj = {
+export const ErrorModal: StoryObj = {
   render: (args) => createModal(args),
   args: {
     ...ModalComponentArgs,