Merge branch 'main' into feat/create-component-rich-tooltip

juntossomosmais · Feb 13, 2025 · 218f715 · 218f715
2 parents 155808b + 8c4bea9
commit 218f715
Show file tree

Hide file tree

Showing 11 changed files with 86 additions and 7 deletions.
diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/core": "3.4.0",
+  "packages/core": "3.5.0",
   "packages/tokens": "2.0.1"
 }
diff --git a/README.md b/README.md
@@ -23,7 +23,7 @@
 | ------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- |
 | Core | [`@juntossomosmais/atomium`](https://github.com/juntossomosmais/atomium/pkgs/npm/atomium) | <img src="https://img.shields.io/github/package-json/v/juntossomosmais/atomium?filename=packages%2Fcore%2Fpackage.json" alt="version"> | [README](./packages/core/README.md)   |
 | React | [`@juntossomosmais/atomium/react`](https://github.com/juntossomosmais/atomium/pkgs/npm/atomium) | <img src="https://img.shields.io/github/package-json/v/juntossomosmais/atomium?filename=packages%2Fcore%2Fpackage.json" alt="version"> | [README](./packages/react/README.md)  |
-| Vue | [`@juntossomosmais/atomium/vue`](https://github.com/juntossomosmais/atomium/pkgs/npm/atomium) | <img src="https://img.shields.io/github/package-json/v/juntossomosmais/atomium?filename=packages%2Fcore%2Fpackage.json" alt="version"> | [README](./packages/react/README.md)  |
+| Vue | [`@juntossomosmais/atomium/vue`](https://github.com/juntossomosmais/atomium/pkgs/npm/atomium) | <img src="https://img.shields.io/github/package-json/v/juntossomosmais/atomium?filename=packages%2Fcore%2Fpackage.json" alt="version"> | [README](./packages/vue/README.md)  |
 | Tokens | [`@juntossomosmais/atomium-tokens`](https://github.com/juntossomosmais/atomium/pkgs/npm/atomium-tokens) | <img src="https://img.shields.io/github/package-json/v/juntossomosmais/atomium?filename=packages%2Ftokens%2Fpackage.json" alt="version"> | [README](./packages/tokens/README.md) |
 
 ## About
@@ -151,7 +151,7 @@ To locally test Atomium using NPM Link, follow the steps below:
 Build the Atomium libraries by running the following command in the root directory of the Atomium project
 
 ```bash
-npm run core:build
+npm run build
 ```
 
 Link the Atomium libraries by navigating to the `node_modules/@juntossomosmais/atomium` directory

diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [3.5.0](https://github.com/juntossomosmais/atomium/compare/atomium-v3.4.0...atomium-v3.5.0) (2025-02-13)
+
+
+### Features
+
+* **modal:** add can-dismiss property to control modal dismissal ([#700](https://github.com/juntossomosmais/atomium/issues/700)) ([6b7640f](https://github.com/juntossomosmais/atomium/commit/6b7640f10eb71a30024ffed35b6addfa698b0615))
+
 ## [3.4.0](https://github.com/juntossomosmais/atomium/compare/atomium-v3.3.0...atomium-v3.4.0) (2025-02-11)
 
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@juntossomosmais/atomium",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Core of web components for Atomium",
   "repository": {
     "type": "git",

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -210,11 +210,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;
@@ -996,11 +998,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/modal.spec.ts b/packages/core/src/components/modal/modal.spec.ts
@@ -82,6 +82,7 @@ describe('atom-modal', () => {
 
     expect(page.root?.innerHTML).not.toContain('isopen')
   })
+
   it('should render modal opened if is open is set to true', async () => {
     page = await newSpecPage({
       components: [AtomModal],
@@ -146,6 +147,7 @@ describe('atom-modal', () => {
     expect(spyPrimary).toHaveBeenCalled()
     expect(spySecondary).toHaveBeenCalled()
   })
+
   it('should render progress bar when progress is passed even if it is zero', async () => {
     await page.setContent(`
       <atom-modal>
@@ -172,6 +174,7 @@ describe('atom-modal', () => {
       '<ion-progress-bar value="0" color="primary"></ion-progress-bar>'
     )
   })
+
   it('should emit atomIsOpenChange when is open changes', async () => {
     const isOpenChangeSpy = jest.fn()
 
@@ -185,4 +188,43 @@ describe('atom-modal', () => {
     expect(isOpenChangeSpy).toHaveBeenCalled()
     expect(isOpenChangeSpy.mock.calls[0][0].detail).toBe(true)
   })
+
+  it('should render not can close modal when prop.canDismiss is set to true', async () => {
+    page = await newSpecPage({
+      components: [AtomModal],
+      html: `
+      <atom-modal is-open="true" can-dismiss="true">
+        Modal content
+      </atom-modal>
+    `,
+    })
+
+    expect(page.root?.innerHTML).toContain('candismiss')
+  })
+
+  it('should render not can close modal when prop.canDismiss is set to false', async () => {
+    page = await newSpecPage({
+      components: [AtomModal],
+      html: `
+      <atom-modal is-open="true" can-dismiss="false">
+        Modal content
+      </atom-modal>
+    `,
+    })
+
+    expect(page.root?.innerHTML).not.toContain('candismiss')
+  })
+
+  it('should render the modal with the specified id when the idName prop is set', async () => {
+    page = await newSpecPage({
+      components: [AtomModal],
+      html: `
+      <atom-modal is-open="true" id-name="modal-id">
+        Modal content
+      </atom-modal>
+    `,
+    })
+
+    expect(page.root?.innerHTML).toContain('modal-id')
+  })
 })
diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx
@@ -18,6 +18,7 @@ type AlertType = Record<'alert' | 'error', { icon: IconProps; color: string }>
   scoped: true,
 })
 export class AtomModal {
+  @Prop() idName?: string
   @Prop() trigger?: string
   @Prop() headerTitle = ''
   @Prop() primaryButtonText?: string
@@ -29,6 +30,7 @@ export class AtomModal {
   @Prop() disablePrimaryButton = false
   @Prop() disableSecondaryButton = false
   @Prop({ mutable: true }) isOpen = false
+  @Prop({ mutable: true }) canDismiss?: boolean
 
   @Event() atomCloseClick: EventEmitter
   @Event() atomDidDismiss: EventEmitter
@@ -88,6 +90,7 @@ export class AtomModal {
           aria-describedby='atom-modal__content'
           ref={(el) => (this.modal = el as HTMLIonModalElement)}
           trigger={this.trigger}
+          id={this.idName}
           class={{
             'atom-modal': true,
             'atom-modal--progress': !!this.progress,
@@ -96,6 +99,7 @@ export class AtomModal {
           onDidDismiss={this.handleDidDismiss}
           onDidPresent={this.handleDidPresent}
           isOpen={this.isOpen}
+          canDismiss={this.canDismiss}
           part='modal'
         >
           <header part='header' class='atom-modal__header'>

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,