From f3fc1bbe47362a88a0754324160f1e25f2fccc65 Mon Sep 17 00:00:00 2001
From: Matheus Rosa <106702647+matheus-rosa-jsm@users.noreply.github.com>
Date: Fri, 16 Aug 2024 13:37:36 -0300
Subject: [PATCH 1/8] feat(modal): add modal component (#534)

---
 apps/docs-react/.storybook/preview.ts         |   2 +-
 apps/docs-vue/.storybook/preview.ts           |   2 +-
 apps/docs/.storybook/preview.ts               |   2 +-
 packages/core/src/components.d.ts             |  63 ++++++-
 .../core/src/components/button/button.spec.ts |  10 +-
 .../core/src/components/button/button.tsx     |   7 +-
 packages/core/src/components/modal/modal.scss |  93 +++++++++++
 .../core/src/components/modal/modal.spec.ts   | 132 +++++++++++++++
 packages/core/src/components/modal/modal.tsx  | 154 ++++++++++++++++++
 .../components/modal/stories/modal.args.ts    | 146 +++++++++++++++++
 .../modal/stories/modal.core.stories.tsx      |  77 +++++++++
 .../modal/stories/modal.react.stories.tsx     |  75 +++++++++
 .../modal/stories/modal.vue.stories.tsx       |  78 +++++++++
 .../{ => templates}/DocumentationTemplate.mdx |   0
 .../templates/DocumentationWithoutStories.mdx |  20 +++
 15 files changed, 850 insertions(+), 11 deletions(-)
 create mode 100644 packages/core/src/components/modal/modal.scss
 create mode 100644 packages/core/src/components/modal/modal.spec.ts
 create mode 100644 packages/core/src/components/modal/modal.tsx
 create mode 100644 packages/core/src/components/modal/stories/modal.args.ts
 create mode 100644 packages/core/src/components/modal/stories/modal.core.stories.tsx
 create mode 100644 packages/core/src/components/modal/stories/modal.react.stories.tsx
 create mode 100644 packages/core/src/components/modal/stories/modal.vue.stories.tsx
 rename utils/storybook/{ => templates}/DocumentationTemplate.mdx (100%)
 create mode 100644 utils/storybook/templates/DocumentationWithoutStories.mdx

diff --git a/apps/docs-react/.storybook/preview.ts b/apps/docs-react/.storybook/preview.ts
index 6689d19e9..50f2931c6 100644
--- a/apps/docs-react/.storybook/preview.ts
+++ b/apps/docs-react/.storybook/preview.ts
@@ -1,5 +1,5 @@
 import { CustomViewports } from '@atomium/storybook-utils/custom-viewports'
-import DocumentationTemplate from '@atomium/storybook-utils/DocumentationTemplate.mdx'
+import DocumentationTemplate from '@atomium/storybook-utils/templates/DocumentationTemplate.mdx'
 
 import '@atomium/storybook-utils/preview.css'
 
diff --git a/apps/docs-vue/.storybook/preview.ts b/apps/docs-vue/.storybook/preview.ts
index 2eef9c7f6..d33577b66 100644
--- a/apps/docs-vue/.storybook/preview.ts
+++ b/apps/docs-vue/.storybook/preview.ts
@@ -1,5 +1,5 @@
 import { CustomViewports } from '@atomium/storybook-utils/custom-viewports'
-import DocumentationTemplate from '@atomium/storybook-utils/DocumentationTemplate.mdx'
+import DocumentationTemplate from '@atomium/storybook-utils/templates/DocumentationTemplate.mdx'
 
 import '@atomium/storybook-utils/preview.css'
 
diff --git a/apps/docs/.storybook/preview.ts b/apps/docs/.storybook/preview.ts
index 0c521b403..1c8473a60 100644
--- a/apps/docs/.storybook/preview.ts
+++ b/apps/docs/.storybook/preview.ts
@@ -1,7 +1,7 @@
 import { defineCustomElements } from '@juntossomosmais/atomium/loader'
 
 import { CustomViewports } from '@atomium/storybook-utils/custom-viewports'
-import DocumentationTemplate from '@atomium/storybook-utils/DocumentationTemplate.mdx'
+import DocumentationTemplate from '@atomium/storybook-utils/templates/DocumentationTemplate.mdx'
 
 import '@atomium/storybook-utils/preview.css'
 
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index a838b79e1..b2af27881 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -38,7 +38,10 @@ export namespace Components {
         "disabled"?: boolean;
         "download"?: string;
         "expand"?: 'block';
-        "fill": 'clear' | 'outline' | 'outline-filled' | 'solid';
+        "fill": | 'clear'
+    | 'outline'
+    | 'outline-filled'
+    | 'solid';
         "href"?: string;
         "loading"?: boolean;
         "mode": Mode;
@@ -154,6 +157,16 @@ export namespace Components {
     }
     interface AtomListSliderItem {
     }
+    interface AtomModal {
+        "alertType"?: 'alert' | 'error';
+        "hasDivider"?: boolean;
+        "hasFooter"?: boolean;
+        "headerTitle"?: string;
+        "primaryText"?: string;
+        "progress"?: number;
+        "secondaryText"?: string;
+        "trigger"?: string;
+    }
     interface AtomSelect {
         "color"?: 'primary' | 'secondary' | 'danger';
         "disabled"?: boolean;
@@ -260,6 +273,10 @@ export interface AtomListSliderCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAtomListSliderElement;
 }
+export interface AtomModalCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLAtomModalElement;
+}
 export interface AtomSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLAtomSelectElement;
@@ -430,6 +447,27 @@ declare global {
         prototype: HTMLAtomListSliderItemElement;
         new (): HTMLAtomListSliderItemElement;
     };
+    interface HTMLAtomModalElementEventMap {
+        "atomCloseClick": any;
+        "atomDidDismiss": any;
+        "atomDidPresent": any;
+        "atomPrimaryClick": any;
+        "atomSecondaryClick": any;
+    }
+    interface HTMLAtomModalElement extends Components.AtomModal, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLAtomModalElementEventMap>(type: K, listener: (this: HTMLAtomModalElement, ev: AtomModalCustomEvent<HTMLAtomModalElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLAtomModalElementEventMap>(type: K, listener: (this: HTMLAtomModalElement, ev: AtomModalCustomEvent<HTMLAtomModalElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLAtomModalElement: {
+        prototype: HTMLAtomModalElement;
+        new (): HTMLAtomModalElement;
+    };
     interface HTMLAtomSelectElementEventMap {
         "atomBlur": void;
         "atomCancel": void;
@@ -493,6 +531,7 @@ declare global {
         "atom-link": HTMLAtomLinkElement;
         "atom-list-slider": HTMLAtomListSliderElement;
         "atom-list-slider-item": HTMLAtomListSliderItemElement;
+        "atom-modal": HTMLAtomModalElement;
         "atom-select": HTMLAtomSelectElement;
         "atom-tag": HTMLAtomTagElement;
         "atom-textarea": HTMLAtomTextareaElement;
@@ -527,7 +566,10 @@ declare namespace LocalJSX {
         "disabled"?: boolean;
         "download"?: string;
         "expand"?: 'block';
-        "fill"?: 'clear' | 'outline' | 'outline-filled' | 'solid';
+        "fill"?: | 'clear'
+    | 'outline'
+    | 'outline-filled'
+    | 'solid';
         "href"?: string;
         "loading"?: boolean;
         "mode"?: Mode;
@@ -649,6 +691,21 @@ declare namespace LocalJSX {
     }
     interface AtomListSliderItem {
     }
+    interface AtomModal {
+        "alertType"?: 'alert' | 'error';
+        "hasDivider"?: boolean;
+        "hasFooter"?: boolean;
+        "headerTitle"?: string;
+        "onAtomCloseClick"?: (event: AtomModalCustomEvent<any>) => void;
+        "onAtomDidDismiss"?: (event: AtomModalCustomEvent<any>) => void;
+        "onAtomDidPresent"?: (event: AtomModalCustomEvent<any>) => void;
+        "onAtomPrimaryClick"?: (event: AtomModalCustomEvent<any>) => void;
+        "onAtomSecondaryClick"?: (event: AtomModalCustomEvent<any>) => void;
+        "primaryText"?: string;
+        "progress"?: number;
+        "secondaryText"?: string;
+        "trigger"?: string;
+    }
     interface AtomSelect {
         "color"?: 'primary' | 'secondary' | 'danger';
         "disabled"?: boolean;
@@ -752,6 +809,7 @@ declare namespace LocalJSX {
         "atom-link": AtomLink;
         "atom-list-slider": AtomListSlider;
         "atom-list-slider-item": AtomListSliderItem;
+        "atom-modal": AtomModal;
         "atom-select": AtomSelect;
         "atom-tag": AtomTag;
         "atom-textarea": AtomTextarea;
@@ -776,6 +834,7 @@ declare module "@stencil/core" {
             "atom-link": LocalJSX.AtomLink & JSXBase.HTMLAttributes<HTMLAtomLinkElement>;
             "atom-list-slider": LocalJSX.AtomListSlider & JSXBase.HTMLAttributes<HTMLAtomListSliderElement>;
             "atom-list-slider-item": LocalJSX.AtomListSliderItem & JSXBase.HTMLAttributes<HTMLAtomListSliderItemElement>;
+            "atom-modal": LocalJSX.AtomModal & JSXBase.HTMLAttributes<HTMLAtomModalElement>;
             "atom-select": LocalJSX.AtomSelect & JSXBase.HTMLAttributes<HTMLAtomSelectElement>;
             "atom-tag": LocalJSX.AtomTag & JSXBase.HTMLAttributes<HTMLAtomTagElement>;
             "atom-textarea": LocalJSX.AtomTextarea & JSXBase.HTMLAttributes<HTMLAtomTextareaElement>;
diff --git a/packages/core/src/components/button/button.spec.ts b/packages/core/src/components/button/button.spec.ts
index 1e7fc3d8b..2c0027d2f 100644
--- a/packages/core/src/components/button/button.spec.ts
+++ b/packages/core/src/components/button/button.spec.ts
@@ -25,7 +25,7 @@ describe('AtomButton', () => {
     expect(page.root).toEqualHtml(`
       <atom-button>
         <mock:shadow-root>
-          <ion-button class="atom-button" color="primary" fill="solid" mode="md" shape="round" size="default" type="button">
+          <ion-button class="atom-button" color="primary" fill="solid" mode="md" part="button" shape="round" size="default" type="button">
             <span class="slot">
               <slot></slot>
             </span>
@@ -47,7 +47,7 @@ describe('AtomButton', () => {
     expect(page.root).toEqualHtml(`
       <atom-button loading="true">
         <mock:shadow-root>
-          <ion-button class="atom-button is-loading" color="primary" disabled="" fill="solid" mode="md" shape="round" size="default" type="button">
+          <ion-button class="atom-button is-loading" color="primary" disabled="" fill="solid" mode="md" part="button" shape="round" size="default" type="button">
             <span class="loading">
               <ion-spinner color="light"></ion-spinner>
             </span>
@@ -69,7 +69,7 @@ describe('AtomButton', () => {
     await page.waitForChanges()
 
     expect(page.root?.shadowRoot).toEqualHtml(`
-      <ion-button class="atom-button is-loading" color="primary" disabled="" fill="outline" mode="md" shape="round" size="default" type="button">
+      <ion-button class="atom-button is-loading" color="primary" disabled="" fill="outline" mode="md" part="button" shape="round" size="default" type="button">
         <span class="loading">
           <ion-spinner color="primary"></ion-spinner>
         </span>
@@ -89,7 +89,7 @@ describe('AtomButton', () => {
     await page.waitForChanges()
 
     expect(page.root?.shadowRoot).toEqualHtml(`
-      <ion-button class="atom-button" color="medium" disabled="" fill="solid" mode="md" shape="round" size="default" type="button">
+      <ion-button class="atom-button" color="medium" disabled="" fill="solid" mode="md" part="button" shape="round" size="default" type="button">
         <span class="slot">
           <slot></slot>
         </span>
@@ -106,7 +106,7 @@ describe('AtomButton', () => {
     await page.waitForChanges()
 
     expect(page.root?.shadowRoot).toEqualHtml(`
-      <ion-button class="atom-button is-circle" color="primary" fill="solid" mode="md" shape="round" size="default" type="button">
+      <ion-button class="atom-button is-circle" color="primary" fill="solid" mode="md" part="button" shape="round" size="default" type="button">
         <span class="slot">
           <slot></slot>
         </span>
diff --git a/packages/core/src/components/button/button.tsx b/packages/core/src/components/button/button.tsx
index 276047f7a..60cfff316 100644
--- a/packages/core/src/components/button/button.tsx
+++ b/packages/core/src/components/button/button.tsx
@@ -19,7 +19,11 @@ export class AtomButton {
   @Prop({ mutable: true }) disabled?: boolean
   @Prop({ mutable: true }) download?: string
   @Prop({ mutable: true }) expand?: 'block'
-  @Prop({ mutable: true }) fill: 'clear' | 'outline' | 'outline-filled' | 'solid' = 'solid'
+  @Prop({ mutable: true }) fill:
+    | 'clear'
+    | 'outline'
+    | 'outline-filled'
+    | 'solid' = 'solid'
   @Prop({ mutable: true }) shape?: 'round' | 'circle' = 'round'
   @Prop({ mutable: true }) href?: string
   @Prop({ mutable: true }) loading?: boolean
@@ -89,6 +93,7 @@ export class AtomButton {
           target={this.target}
           download={this.download}
           onClick={this.handleClick.bind(this)}
+          part='button'
         >
           {this.loading && (
             <span class='loading'>
diff --git a/packages/core/src/components/modal/modal.scss b/packages/core/src/components/modal/modal.scss
new file mode 100644
index 000000000..34a1dbe51
--- /dev/null
+++ b/packages/core/src/components/modal/modal.scss
@@ -0,0 +1,93 @@
+@import '~@atomium/scss-utils/index';
+
+.atom-modal {
+  &__close {
+    position: absolute;
+    right: var(--spacing-small);
+    top: var(--spacing-small);
+  }
+
+  &__close-icon {
+    color: var(--color-neutral-regular);
+    font-size: var(--spacing-large);
+  }
+
+  &__content {
+    color: var(--color-neutral-light-1);
+    font: var(--text-body-medium);
+    height: 100%;
+    letter-spacing: var(--text-body-medium-letter);
+    padding: var(--spacing-large);
+    padding-top: 0;
+
+    &--divided {
+      border-bottom: 1px solid var(--color-neutral-light-3);
+      border-top: 1px solid var(--color-neutral-light-3);
+      padding-top: var(--spacing-large);
+    }
+  }
+
+  &__footer {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-medium);
+    justify-content: flex-end;
+    padding: var(--spacing-large);
+  }
+
+  &__header {
+    color: var(--color-neutral-light-1);
+    padding: var(--spacing-large);
+    position: relative;
+  }
+
+  &__icon-type {
+    font-size: var(--spacing-xxxxlarge);
+    margin-bottom: var(--spacing-large);
+
+    &--warning {
+      color: var(--color-contextual-warning-dark-1);
+    }
+
+    &--error {
+      color: var(--color-contextual-error-regular);
+    }
+  }
+
+  &__title,
+  &__header {
+    font: var(--title-headline-xsmall);
+    letter-spacing: var(--title-headline-xsmall-letter);
+    margin: 0;
+  }
+
+  &--progress {
+    .atom-modal__content--divided {
+      border-top: 0;
+    }
+  }
+
+  ion-progress-bar::part(track) {
+    background-color: var(--color-brand-primary-light-2);
+  }
+
+  @include below(small) {
+    &__btn-action {
+      width: 100%;
+
+      &::part(button) {
+        width: 100%;
+      }
+    }
+  }
+}
+
+ion-modal::part(content) {
+  --border-radius: 8px;
+  height: auto;
+
+  @include below(small) {
+    --border-radius: 0;
+    height: 100%;
+  }
+}
diff --git a/packages/core/src/components/modal/modal.spec.ts b/packages/core/src/components/modal/modal.spec.ts
new file mode 100644
index 000000000..303b93887
--- /dev/null
+++ b/packages/core/src/components/modal/modal.spec.ts
@@ -0,0 +1,132 @@
+import { newSpecPage, SpecPage } from '@stencil/core/testing'
+
+import { AtomModal } from './modal'
+
+describe('atom-modal', () => {
+  let page: SpecPage
+
+  beforeEach(async () => {
+    page = await newSpecPage({
+      components: [AtomModal],
+      html: `
+        <atom-modal
+          trigger="button"
+          primary-text="Primary"
+          secondary-text="Secondary" 
+        >
+          Modal content
+        </atom-modal>`,
+    })
+  })
+
+  it('should render modal with default values', async () => {
+    expect(page.root).toEqualHtml(`
+      <atom-modal primary-text="Primary" secondary-text="Secondary" trigger="button">
+        <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>
+            <atom-button aria-label="close" class="atom-modal__close" fill="clear" shape="circle">
+              <atom-icon aria-hidden="true" class="atom-modal__close-icon" icon="close"></atom-icon>
+            </atom-button>
+          </header>
+          <div class="atom-modal__content" id="atom-modal__content">
+            Modal content
+          </div>
+          <footer class="atom-modal__footer">
+            <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">
+              Primary
+            </atom-button>
+          </footer>
+        </ion-modal>
+      </atom-modal>
+    `)
+  })
+
+  it('should render header slot when headerTitle is not passed', async () => {
+    await page.setContent(`
+      <atom-modal>
+        Modal content
+        <div slot="header">Custom Header</div>
+      </atom-modal>
+    `)
+
+    expect(page.root?.textContent).toContain('Custom Header')
+  })
+
+  it('should render header from prop when headerTitle is passed', async () => {
+    await page.setContent(`
+      <atom-modal header-title="Header from prop">
+        Modal content
+        <div slot="header">Custom Header</div>
+      </atom-modal>
+    `)
+
+    expect(page.root?.innerHTML).not.toContain('<div hidden="" slot="header">')
+    expect(page.root?.textContent).toContain('Header from prop')
+  })
+
+  it('should render icon type when alertType is passed', async () => {
+    await page.setContent(`
+      <atom-modal alert-type="error">
+        Modal content
+      </atom-modal>
+    `)
+
+    expect(page.root?.innerHTML).toContain(
+      'atom-modal__icon-type atom-modal__icon-type--error'
+    )
+  })
+
+  it('should render progress bar when progress is passed', async () => {
+    await page.setContent(`
+      <atom-modal progress="0.5">
+        Modal content
+      </atom-modal>
+    `)
+
+    expect(page.root?.innerHTML).toContain(
+      '<ion-progress-bar value="0.5" color="primary">'
+    )
+  })
+
+  it('should content contain divided class', async () => {
+    await page.setContent(`
+      <atom-modal has-divider="true">
+        Modal content
+      </atom-modal>
+    `)
+
+    expect(page.root?.innerHTML).toContain('atom-modal__content--divided')
+  })
+
+  it('should emit click events when clicked', async () => {
+    const closeButton = page.root?.querySelector('.atom-modal__close')
+    const primaryButton = page.root?.querySelector(
+      '.atom-modal__btn-action--primary'
+    )
+    const secondaryButton = page.root?.querySelector(
+      '.atom-modal__btn-action--secondary'
+    )
+    const spyClose = jest.fn()
+    const spyPrimary = jest.fn()
+    const spySecondary = jest.fn()
+
+    page.rootInstance.modal = {
+      dismiss: jest.fn(),
+    }
+    page.root?.addEventListener('atomCloseClick', spyClose)
+    page.root?.addEventListener('atomPrimaryClick', spyPrimary)
+    page.root?.addEventListener('atomSecondaryClick', spySecondary)
+
+    closeButton?.dispatchEvent(new Event('click'))
+    primaryButton?.dispatchEvent(new Event('click'))
+    secondaryButton?.dispatchEvent(new Event('click'))
+
+    expect(spyClose).toHaveBeenCalled()
+    expect(spyPrimary).toHaveBeenCalled()
+    expect(spySecondary).toHaveBeenCalled()
+  })
+})
diff --git a/packages/core/src/components/modal/modal.tsx b/packages/core/src/components/modal/modal.tsx
new file mode 100644
index 000000000..4d092c92a
--- /dev/null
+++ b/packages/core/src/components/modal/modal.tsx
@@ -0,0 +1,154 @@
+import { Component, Event, EventEmitter, Host, Prop, h } from '@stencil/core'
+
+import { IconProps } from '../../icons'
+
+type AlertType = Record<'alert' | 'error', { icon: IconProps; color: string }>
+
+/* @todo it's needed to prevent a ionic error. In the version 8.0 it was fixed, remove it after the upgrade.
+ *  https://github.com/ionic-team/ionic-framework/issues/23942
+ */
+const BACKDROP_NO_SCROLL = 'backdrop-no-scroll'
+
+@Component({
+  tag: 'atom-modal',
+  styleUrl: 'modal.scss',
+  shadow: false,
+  scoped: true,
+})
+export class AtomModal {
+  @Prop() trigger?: string
+  @Prop() headerTitle?: string = ''
+  @Prop() primaryText?: string
+  @Prop() secondaryText?: string
+  @Prop() hasDivider?: boolean = false
+  @Prop() alertType?: 'alert' | 'error'
+  @Prop() progress?: number
+  @Prop() hasFooter?: boolean = true
+
+  @Event() atomCloseClick: EventEmitter
+  @Event() atomDidDismiss: EventEmitter
+  @Event() atomDidPresent: EventEmitter
+  @Event() atomPrimaryClick: EventEmitter
+  @Event() atomSecondaryClick: EventEmitter
+
+  private modal: HTMLIonModalElement
+
+  private alertMap: AlertType = {
+    alert: {
+      icon: 'alert-outline',
+      color: 'warning',
+    },
+    error: {
+      icon: 'alert-circle-outline',
+      color: 'error',
+    },
+  }
+
+  componentDidLoad() {
+    document.body.classList.remove(BACKDROP_NO_SCROLL)
+  }
+
+  private handleDidDimiss = () => {
+    this.atomDidDismiss.emit(this.modal)
+  }
+
+  private handleDidPresent = () => {
+    this.atomDidPresent.emit(this.modal)
+  }
+
+  private handleCloseClick = async () => {
+    this.atomCloseClick.emit(this.modal)
+    await this.modal.dismiss()
+    document.body.classList.remove(BACKDROP_NO_SCROLL)
+  }
+
+  private handleSecondaryClick = () => {
+    this.atomSecondaryClick.emit(this.modal)
+  }
+
+  private handlePrimaryClick = () => {
+    this.atomPrimaryClick.emit(this.modal)
+  }
+
+  render() {
+    const iconType = this.alertMap[this.alertType]
+
+    return (
+      <Host>
+        <ion-modal
+          aria-labelledby='atom-modal__header-title'
+          aria-describedby='atom-modal__content'
+          ref={(el) => (this.modal = el as HTMLIonModalElement)}
+          trigger={this.trigger}
+          class={{
+            'atom-modal': true,
+            'atom-modal--progress': !!this.progress,
+          }}
+          onIonModalDidDismiss={this.handleDidDimiss}
+          onDidPresent={this.handleDidPresent}
+        >
+          <header class='atom-modal__header'>
+            {iconType && (
+              <atom-icon
+                aria-hidden='true'
+                icon={iconType.icon}
+                class={`atom-modal__icon-type atom-modal__icon-type--${iconType.color}`}
+              />
+            )}
+            <div id='atom-modal__header-title'>
+              {this.headerTitle ? (
+                <h1 class='atom-modal__title'>{this.headerTitle}</h1>
+              ) : (
+                <slot name='header' />
+              )}
+            </div>
+            <atom-button
+              fill='clear'
+              shape='circle'
+              onClick={this.handleCloseClick}
+              aria-label='close'
+              class='atom-modal__close'
+            >
+              <atom-icon
+                icon='close'
+                class='atom-modal__close-icon'
+                aria-hidden='true'
+              ></atom-icon>
+            </atom-button>
+          </header>
+          {!!this.progress && (
+            <ion-progress-bar value={this.progress} color='primary' />
+          )}
+          <div
+            id='atom-modal__content'
+            class={{
+              'atom-modal__content': true,
+              'atom-modal__content--divided': this.hasDivider,
+            }}
+          >
+            <slot />
+          </div>
+          {this.hasFooter && (
+            <footer class='atom-modal__footer'>
+              <atom-button
+                color='secondary'
+                fill='outline'
+                class='atom-modal__btn-action atom-modal__btn-action--secondary'
+                onClick={this.handleSecondaryClick}
+              >
+                {this.secondaryText}
+              </atom-button>
+              <atom-button
+                color='primary'
+                class='atom-modal__btn-action atom-modal__btn-action--primary'
+                onClick={this.handlePrimaryClick}
+              >
+                {this.primaryText}
+              </atom-button>
+            </footer>
+          )}
+        </ion-modal>
+      </Host>
+    )
+  }
+}
diff --git a/packages/core/src/components/modal/stories/modal.args.ts b/packages/core/src/components/modal/stories/modal.args.ts
new file mode 100644
index 000000000..8e65b9614
--- /dev/null
+++ b/packages/core/src/components/modal/stories/modal.args.ts
@@ -0,0 +1,146 @@
+import { Category } from '@atomium/storybook-utils/enums/table'
+import DocumentationTemplate from '@atomium/storybook-utils/templates/DocumentationWithoutStories.mdx'
+import { withActions } from '@storybook/addon-actions/decorator'
+
+export const ModalStoryArgs = {
+  parameters: {
+    actions: {
+      handles: [
+        'atomCloseClick',
+        'atomDidDismiss',
+        'atomDidPresent',
+        'atomPrimaryClick',
+        'atomSecondaryClick',
+      ],
+    },
+    docs: {
+      description: {
+        component:
+          'Wrapper of Ionic Modal component. Read the [Ionic documentation](https://ionicframework.com/docs/api/modal) for more information about the available properties and possibilities.',
+      },
+      page: DocumentationTemplate,
+    },
+  },
+  decorators: [withActions],
+  argTypes: {
+    trigger: {
+      description: 'The id of the element that will trigger the modal',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    hasDivider: {
+      control: 'boolean',
+      description: 'if true, a divider will be added on the header and footer',
+      defaultValue: false,
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    hasFooter: {
+      control: 'boolean',
+      description: 'If false, the footer will not be rendered. Default is true',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    headerTitle: {
+      control: 'text',
+      description: 'The title of the modal',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    primaryText: {
+      control: 'text',
+      description: 'Text of the primary button',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    secondaryText: {
+      control: 'text',
+      description: 'Text of the secondary button',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    alertType: {
+      control: 'select',
+      options: ['alert', 'error'],
+      description: 'Type of alert icon. Available options: alert, error',
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    progress: {
+      control: 'number',
+      description: "Percentage of the progress bar's width",
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
+    atomCloseClick: {
+      action: 'atomCloseClick',
+      description:
+        'Event emitted when the close button is clicked. The event callback recieve ion-modal custom component as a param.',
+      table: {
+        category: Category.EVENTS,
+      },
+    },
+    atomDidDismiss: {
+      action: 'atomDidDismiss',
+      description:
+        'Event emitted after the modal has dismissed. The event callback recieve ion-modal custom component as a param.',
+      table: {
+        category: Category.EVENTS,
+      },
+    },
+    atomDidPresent: {
+      action: 'atomDidPresent',
+      description:
+        'Event emitted after the modal has presented. The event callback recieve ion-modal custom component as a param.',
+      table: {
+        category: Category.EVENTS,
+      },
+    },
+    atomPrimaryClick: {
+      action: 'atomPrimaryClick',
+      description:
+        'Event emitted when the primary button is clicked. The event callback recieve ion-modal custom component as a param.',
+      table: {
+        category: Category.EVENTS,
+      },
+    },
+    atomSecondaryClick: {
+      action: 'atomSecondaryClick',
+      description:
+        'Event emitted when the secondary button is clicked. The event callback recieve ion-modal custom component as a param.',
+      table: {
+        category: Category.EVENTS,
+      },
+    },
+    default: {
+      name: '',
+      description:
+        'The default slot is where the content of the modal will be rendered',
+      table: {
+        category: Category.SLOTS,
+      },
+    },
+    header: {
+      name: 'header',
+      description:
+        'The header slot is where the custom header of the modal will be rendered. It is only rendered if the headerTitle property is not set',
+      table: {
+        category: Category.SLOTS,
+      },
+    },
+  },
+}
+
+export const ModalComponentArgs = {
+  primaryText: 'Primary',
+  secondaryText: 'Secondary',
+  hasDivider: 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
new file mode 100644
index 000000000..7e8fba709
--- /dev/null
+++ b/packages/core/src/components/modal/stories/modal.core.stories.tsx
@@ -0,0 +1,77 @@
+import { Meta, StoryObj } from '@storybook/web-components'
+import { html } from 'lit'
+
+import { ModalComponentArgs, ModalStoryArgs } from './modal.args'
+
+export default {
+  title: 'Components/Modal',
+  ...ModalStoryArgs,
+} as Meta
+
+const createModal = (args) => {
+  return html`
+    <div>
+      <atom-button id="open-modal">Open Modal</atom-button>
+      <atom-modal
+        alert-type="${args.alertType}"
+        has-divider="${args.hasDivider}"
+        primary-text="${args.primaryText}"
+        secondary-text="${args.secondaryText}"
+        trigger="open-modal"
+        progress="${args.progress}"
+        has-footer="${args.hasFooter}"
+        header-title="${args.headerTitle}"
+      >
+        <div slot="header">Custom Header</div>
+        <p>Modal Content</p>
+      </<atom-modal>
+    </div>
+  `
+}
+
+export const Default: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+  },
+}
+
+export const Divided: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    hasDivider: true,
+  },
+}
+
+export const Progress: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    progress: 0.5,
+  },
+}
+
+export const Alert: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    alertType: 'alert',
+  },
+}
+
+export const Error: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    alertType: 'error',
+  },
+}
+
+export const HeaderTitle: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    headerTitle: 'Title',
+  },
+}
diff --git a/packages/core/src/components/modal/stories/modal.react.stories.tsx b/packages/core/src/components/modal/stories/modal.react.stories.tsx
new file mode 100644
index 000000000..f4202a9f3
--- /dev/null
+++ b/packages/core/src/components/modal/stories/modal.react.stories.tsx
@@ -0,0 +1,75 @@
+import { AtomButton, AtomModal } from '@juntossomosmais/atomium/react'
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import { ModalComponentArgs, ModalStoryArgs } from './modal.args'
+
+export default {
+  title: 'Components/Modal',
+  component: AtomModal,
+  ...ModalStoryArgs,
+} as Meta
+
+const createModal = (args) => (
+  <div>
+    <AtomButton id='open-modal'>Open Modal</AtomButton>
+    <AtomModal
+      alertType={args.alertType}
+      hasDivider={args.hasDivider}
+      primaryText={args.primaryText}
+      secondaryText={args.secondaryText}
+      trigger='open-modal'
+      progress={args.progress}
+    >
+      <div slot='header'>Custom Header</div>
+      <p>Modal Content</p>
+    </AtomModal>
+  </div>
+)
+
+export const Default: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+  },
+}
+
+export const Divided: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    hasDivider: true,
+  },
+}
+
+export const Progress: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    progress: 0.5,
+  },
+}
+
+export const Alert: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    alertType: 'alert',
+  },
+}
+
+export const Error: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    alertType: 'error',
+  },
+}
+
+export const HeaderTitle: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    headerTitle: 'Title',
+  },
+}
diff --git a/packages/core/src/components/modal/stories/modal.vue.stories.tsx b/packages/core/src/components/modal/stories/modal.vue.stories.tsx
new file mode 100644
index 000000000..940aaceed
--- /dev/null
+++ b/packages/core/src/components/modal/stories/modal.vue.stories.tsx
@@ -0,0 +1,78 @@
+import { AtomButton, AtomModal } from '@juntossomosmais/atomium/vue'
+import { Meta, StoryObj } from '@storybook/vue3'
+
+import { ModalComponentArgs, ModalStoryArgs } from './modal.args'
+
+export default {
+  title: 'Components/Button',
+  ...ModalStoryArgs,
+} as Meta
+
+const createModal = (args, themeColor = 'light') => ({
+  components: { AtomModal, AtomButton },
+  setup() {
+    return { args, themeColor }
+  },
+  template: `
+    <div>
+      <AtomButton id='open-modal'>Open Modal</AtomButton>
+      <AtomModal
+        alert-type="${args.alertType}"
+        has-divider="${args.hasDivider}"
+        primary-text="${args.primaryText}"
+        secondary-text="${args.secondaryText}"
+        trigger="open-modal"
+        progress="${args.progress}"
+      >
+        {{ args.label }}
+      </AtomModal>
+    </div>
+  `,
+})
+
+export const Default: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+  },
+}
+
+export const Divided: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    hasDivider: true,
+  },
+}
+
+export const Progress: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    progress: 0.5,
+  },
+}
+
+export const Alert: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    alertType: 'alert',
+  },
+}
+
+export const Error: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    alertType: 'error',
+  },
+}
+
+export const HeaderTitle: StoryObj = {
+  render: (args) => createModal(args),
+  args: {
+    ...ModalComponentArgs,
+    headerTitle: 'Title',
+  },
+}
diff --git a/utils/storybook/DocumentationTemplate.mdx b/utils/storybook/templates/DocumentationTemplate.mdx
similarity index 100%
rename from utils/storybook/DocumentationTemplate.mdx
rename to utils/storybook/templates/DocumentationTemplate.mdx
diff --git a/utils/storybook/templates/DocumentationWithoutStories.mdx b/utils/storybook/templates/DocumentationWithoutStories.mdx
new file mode 100644
index 000000000..47c9e029a
--- /dev/null
+++ b/utils/storybook/templates/DocumentationWithoutStories.mdx
@@ -0,0 +1,20 @@
+import {
+  Meta,
+  Title,
+  Description,
+  Primary,
+  Controls,
+  Stories,
+} from '@storybook/blocks'
+
+<Meta isTemplate />
+
+<Title />
+
+<Description />
+
+<Primary />
+
+### Props
+
+<Controls />

From f04d310243aae09c2465aae04d10875dc7c4dfc7 Mon Sep 17 00:00:00 2001
From: Matheus Rosa <106702647+matheus-rosa-jsm@users.noreply.github.com>
Date: Fri, 16 Aug 2024 15:07:51 -0300
Subject: [PATCH 2/8] feat(icons): add verified icons (#539)

---
 packages/core/src/icons.d.ts                 | 2 ++
 packages/icons/svg/mdi/verified-outiline.svg | 1 +
 packages/icons/svg/mdi/verified.svg          | 1 +
 3 files changed, 4 insertions(+)
 create mode 100644 packages/icons/svg/mdi/verified-outiline.svg
 create mode 100644 packages/icons/svg/mdi/verified.svg

diff --git a/packages/core/src/icons.d.ts b/packages/core/src/icons.d.ts
index f9da79100..7218135c6 100644
--- a/packages/core/src/icons.d.ts
+++ b/packages/core/src/icons.d.ts
@@ -175,6 +175,8 @@ export type IconProps =
   | 'tune'
   | 'upload-outline'
   | 'upload'
+  | 'verified-outiline'
+  | 'verified'
   | 'wallet-giftcard'
   | 'watch-later-outline'
   | 'watch-later'
diff --git a/packages/icons/svg/mdi/verified-outiline.svg b/packages/icons/svg/mdi/verified-outiline.svg
new file mode 100644
index 000000000..fe502784e
--- /dev/null
+++ b/packages/icons/svg/mdi/verified-outiline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="mdi-verified-outiline" viewBox="0 0 24 24"><path d="M23 11.99 20.56 9.2l.34-3.69-3.61-.82L15.4 1.5 12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 11.99l2.44 2.79-.34 3.7 3.61.82 1.89 3.2 3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69zm-3.95 1.48-.56.65.08.85.18 1.95-1.9.43-.84.19-.44.74-.99 1.68-1.78-.77-.8-.34-.79.34-1.78.77-.99-1.67-.44-.74-.84-.19-1.9-.43.18-1.96.08-.85-.56-.65L3.67 12l1.29-1.48.56-.65-.09-.86-.18-1.94 1.9-.43.84-.19.44-.74.99-1.68 1.78.77.8.34.79-.34 1.78-.77.99 1.68.44.74.84.19 1.9.43-.18 1.95-.08.85.56.65 1.29 1.47z"></path><path d="m10.09 13.75-2.32-2.33-1.48 1.49 3.8 3.81 7.34-7.36-1.48-1.49z"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/mdi/verified.svg b/packages/icons/svg/mdi/verified.svg
new file mode 100644
index 000000000..5886b8e5d
--- /dev/null
+++ b/packages/icons/svg/mdi/verified.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="mdi-verified" viewBox="0 0 24 24"><path d="m23 12-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69zm-12.91 4.72-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48z"></path></svg>
\ No newline at end of file

From 54deb3560ed8fb99b3feffce5088f72250be2f06 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 16 Aug 2024 16:52:52 -0300
Subject: [PATCH 3/8] chore: release main (#538)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .release-please-manifest.json | 2 +-
 packages/core/CHANGELOG.md    | 8 ++++++++
 packages/core/package.json    | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index 6e7e822d4..423ab0c4a 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/core": "2.13.1",
+  "packages/core": "2.14.0",
   "packages/tokens": "1.2.0"
 }
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 6347274c3..f1ca09b0c 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## [2.14.0](https://github.com/juntossomosmais/atomium/compare/atomium-v2.13.1...atomium-v2.14.0) (2024-08-16)
+
+
+### Features
+
+* **icons:** add verified icons ([#539](https://github.com/juntossomosmais/atomium/issues/539)) ([f04d310](https://github.com/juntossomosmais/atomium/commit/f04d310243aae09c2465aae04d10875dc7c4dfc7))
+* **modal:** add modal component ([#534](https://github.com/juntossomosmais/atomium/issues/534)) ([f3fc1bb](https://github.com/juntossomosmais/atomium/commit/f3fc1bbe47362a88a0754324160f1e25f2fccc65))
+
 ## [2.13.1](https://github.com/juntossomosmais/atomium/compare/atomium-v2.13.0...atomium-v2.13.1) (2024-08-08)
 
 
diff --git a/packages/core/package.json b/packages/core/package.json
index 04330b802..42b64cc57 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@juntossomosmais/atomium",
-  "version": "2.13.1",
+  "version": "2.14.0",
   "description": "Core of web components for Atomium",
   "repository": {
     "type": "git",

From 57e3b517f331fe31d9bab207dd13a6e033575765 Mon Sep 17 00:00:00 2001
From: Matheus Rosa <106702647+matheus-rosa-jsm@users.noreply.github.com>
Date: Wed, 21 Aug 2024 09:31:24 -0300
Subject: [PATCH 4/8] fix(icons): rename verified outline icon (#540)

---
 packages/core/src/icons.d.ts                 | 2 +-
 packages/icons/svg/mdi/verified-outiline.svg | 1 -
 packages/icons/svg/mdi/verified-outline.svg  | 1 +
 3 files changed, 2 insertions(+), 2 deletions(-)
 delete mode 100644 packages/icons/svg/mdi/verified-outiline.svg
 create mode 100644 packages/icons/svg/mdi/verified-outline.svg

diff --git a/packages/core/src/icons.d.ts b/packages/core/src/icons.d.ts
index 7218135c6..2daa36b96 100644
--- a/packages/core/src/icons.d.ts
+++ b/packages/core/src/icons.d.ts
@@ -175,7 +175,7 @@ export type IconProps =
   | 'tune'
   | 'upload-outline'
   | 'upload'
-  | 'verified-outiline'
+  | 'verified-outline'
   | 'verified'
   | 'wallet-giftcard'
   | 'watch-later-outline'
diff --git a/packages/icons/svg/mdi/verified-outiline.svg b/packages/icons/svg/mdi/verified-outiline.svg
deleted file mode 100644
index fe502784e..000000000
--- a/packages/icons/svg/mdi/verified-outiline.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" id="mdi-verified-outiline" viewBox="0 0 24 24"><path d="M23 11.99 20.56 9.2l.34-3.69-3.61-.82L15.4 1.5 12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 11.99l2.44 2.79-.34 3.7 3.61.82 1.89 3.2 3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69zm-3.95 1.48-.56.65.08.85.18 1.95-1.9.43-.84.19-.44.74-.99 1.68-1.78-.77-.8-.34-.79.34-1.78.77-.99-1.67-.44-.74-.84-.19-1.9-.43.18-1.96.08-.85-.56-.65L3.67 12l1.29-1.48.56-.65-.09-.86-.18-1.94 1.9-.43.84-.19.44-.74.99-1.68 1.78.77.8.34.79-.34 1.78-.77.99 1.68.44.74.84.19 1.9.43-.18 1.95-.08.85.56.65 1.29 1.47z"></path><path d="m10.09 13.75-2.32-2.33-1.48 1.49 3.8 3.81 7.34-7.36-1.48-1.49z"></path></svg>
\ No newline at end of file
diff --git a/packages/icons/svg/mdi/verified-outline.svg b/packages/icons/svg/mdi/verified-outline.svg
new file mode 100644
index 000000000..bf84df009
--- /dev/null
+++ b/packages/icons/svg/mdi/verified-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="mdi-verified-outline" viewBox="0 0 24 24"><path d="M23 11.99 20.56 9.2l.34-3.69-3.61-.82L15.4 1.5 12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 11.99l2.44 2.79-.34 3.7 3.61.82 1.89 3.2 3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69zm-3.95 1.48-.56.65.08.85.18 1.95-1.9.43-.84.19-.44.74-.99 1.68-1.78-.77-.8-.34-.79.34-1.78.77-.99-1.67-.44-.74-.84-.19-1.9-.43.18-1.96.08-.85-.56-.65L3.67 12l1.29-1.48.56-.65-.09-.86-.18-1.94 1.9-.43.84-.19.44-.74.99-1.68 1.78.77.8.34.79-.34 1.78-.77.99 1.68.44.74.84.19 1.9.43-.18 1.95-.08.85.56.65 1.29 1.47z"></path><path d="m10.09 13.75-2.32-2.33-1.48 1.49 3.8 3.81 7.34-7.36-1.48-1.49z"></path></svg>
\ No newline at end of file

From c098357e0cf1e4b7202febd0398f000a51c92cbc Mon Sep 17 00:00:00 2001
From: Matheus Rosa <106702647+matheus-rosa-jsm@users.noreply.github.com>
Date: Thu, 22 Aug 2024 09:29:39 -0300
Subject: [PATCH 5/8] fix(tag): light tag color (#542)

---
 packages/core/src/components/tag/tag.scss    | 9 +++++----
 packages/core/src/components/tag/tag.spec.ts | 7 ++++++-
 packages/core/src/components/tag/tag.tsx     | 2 ++
 3 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/core/src/components/tag/tag.scss b/packages/core/src/components/tag/tag.scss
index dd30396d2..e417a52b9 100644
--- a/packages/core/src/components/tag/tag.scss
+++ b/packages/core/src/components/tag/tag.scss
@@ -2,20 +2,21 @@
 
 :host {
   --icon-size: var(--spacing-small);
-  --atom-tag-height: 10px;
+  --atom-tag-height: var(--spacing-medium);
   line-height: 0;
 }
 
 .atom-tag {
   align-items: center;
-  border: solid 1px transparent;
+  box-sizing: border-box;
   color: var(--color-neutral-white);
   display: flex;
   font: var(--text-caption-focused);
+  font-weight: var(--font-weight-bold);
   height: var(--atom-tag-height);
   justify-content: center;
   letter-spacing: var(--text-caption-focused-letter);
-  padding: var(--spacing-xxsmall) var(--spacing-xsmall);
+  padding: 0 var(--spacing-xsmall);
   width: fit-content;
 
   &[color='warning'] {
@@ -42,7 +43,7 @@
   &[color='light'] {
     background-color: var(--color-neutral-light-5);
     border: 1px solid var(--color-neutral-light-3);
-    color: var(--color-neutral-regular);
+    color: var(--color-neutral-light-1);
   }
 }
 
diff --git a/packages/core/src/components/tag/tag.spec.ts b/packages/core/src/components/tag/tag.spec.ts
index a8774ed88..3e9735b94 100644
--- a/packages/core/src/components/tag/tag.spec.ts
+++ b/packages/core/src/components/tag/tag.spec.ts
@@ -1,6 +1,7 @@
 import { newSpecPage } from '@stencil/core/testing'
 
 import { IconProps } from '../../icons'
+
 import { AtomTag } from './tag'
 
 const setup = async (
@@ -39,8 +40,10 @@ describe('atom-tag', () => {
     const colorExists = atomTag?.shadowRoot?.innerHTML
       .split(' ')
       .find((el) => el === `color="${mockedColor}"`)
+
     expect(colorExists).toBeTruthy()
     const atomTagLabel = page.root?.innerHTML
+
     expect(atomTag?.nodeName.toLocaleLowerCase()).toBe('atom-tag')
     expect(atomTagLabel).toBe(tagLabel)
   })
@@ -48,8 +51,9 @@ describe('atom-tag', () => {
   it('should render atom-tag with icon', async () => {
     const mockedIcon = 'heart'
     const pageRoot = await setup('success', mockedIcon)
+
     expect(pageRoot?.root?.shadowRoot)
-      .toEqualHtml(`<ion-badge class="atom-tag" color="success">
+      .toEqualHtml(`<ion-badge class="atom-tag" color="success" part="tag">
     <atom-icon class="atom-icon" icon=${mockedIcon}></atom-icon>
     <slot></slot>
   </ion-badge>`)
@@ -71,6 +75,7 @@ describe('atom-tag', () => {
     const customColorsExists = page?.root?.shadowRoot?.innerHTML.includes(
       `style="${customColors}"`
     )
+
     expect(customColorsExists).toBeTruthy()
   })
 })
diff --git a/packages/core/src/components/tag/tag.tsx b/packages/core/src/components/tag/tag.tsx
index 98d2a6508..10d97844e 100644
--- a/packages/core/src/components/tag/tag.tsx
+++ b/packages/core/src/components/tag/tag.tsx
@@ -1,4 +1,5 @@
 import { Component, Host, Prop, h } from '@stencil/core'
+
 import { IconProps } from '../../icons'
 
 @Component({
@@ -31,6 +32,7 @@ export class AtomTag {
             backgroundColor: this.getColor(this.customBackgroundColor),
             color: this.getColor(this.customTextColor),
           }}
+          part='tag'
           class='atom-tag'
         >
           {this.icon && (

From 01df955f0552107c5c0eac54418ddd7135eafdeb Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 22 Aug 2024 09:39:55 -0300
Subject: [PATCH 6/8] chore: release main (#541)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .release-please-manifest.json | 2 +-
 packages/core/CHANGELOG.md    | 8 ++++++++
 packages/core/package.json    | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index 423ab0c4a..29b328a51 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/core": "2.14.0",
+  "packages/core": "2.14.1",
   "packages/tokens": "1.2.0"
 }
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index f1ca09b0c..2f4656131 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## [2.14.1](https://github.com/juntossomosmais/atomium/compare/atomium-v2.14.0...atomium-v2.14.1) (2024-08-22)
+
+
+### Bug Fixes
+
+* **icons:** rename verified outline icon ([#540](https://github.com/juntossomosmais/atomium/issues/540)) ([57e3b51](https://github.com/juntossomosmais/atomium/commit/57e3b517f331fe31d9bab207dd13a6e033575765))
+* **tag:** light tag color ([#542](https://github.com/juntossomosmais/atomium/issues/542)) ([c098357](https://github.com/juntossomosmais/atomium/commit/c098357e0cf1e4b7202febd0398f000a51c92cbc))
+
 ## [2.14.0](https://github.com/juntossomosmais/atomium/compare/atomium-v2.13.1...atomium-v2.14.0) (2024-08-16)
 
 
diff --git a/packages/core/package.json b/packages/core/package.json
index 42b64cc57..77adbefeb 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@juntossomosmais/atomium",
-  "version": "2.14.0",
+  "version": "2.14.1",
   "description": "Core of web components for Atomium",
   "repository": {
     "type": "git",

From 9c587d6cbd7ab3e2cbe30502ec6a35cfe6ef873a Mon Sep 17 00:00:00 2001
From: Felipe Fialho <hi@felipefialho.com>
Date: Fri, 23 Aug 2024 14:21:50 -0300
Subject: [PATCH 7/8] fix(alert): improve position of icon on single line
 (#543)

---
 packages/core/src/components/alert/alert.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/alert/alert.scss b/packages/core/src/components/alert/alert.scss
index c66b63e41..9e1da1ba7 100644
--- a/packages/core/src/components/alert/alert.scss
+++ b/packages/core/src/components/alert/alert.scss
@@ -1,5 +1,7 @@
 @import '~@atomium/scss-utils/index';
 
+$min-height-title: var(--spacing-large);
+
 :host {
   --close-size: var(--spacing-xxxlarge);
   --icon-size: var(--spacing-medium);
@@ -75,6 +77,7 @@
 .atom-title {
   font-weight: var(--font-weight-bold);
   margin: 0;
+  min-height: $min-height-title;
 
   &:not(:last-child) {
     margin-bottom: var(--spacing-xsmall);
@@ -118,8 +121,10 @@
 }
 
 .atom-icon {
+  align-items: center;
+  display: flex;
   font-size: var(--icon-size);
-  width: var(--space-large);
+  height: $min-height-title;
 }
 
 .atom-close {

From 4b931840bc7909decf0992debb071383fa279004 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 23 Aug 2024 14:24:49 -0300
Subject: [PATCH 8/8] chore: release main (#544)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .release-please-manifest.json | 2 +-
 packages/core/CHANGELOG.md    | 7 +++++++
 packages/core/package.json    | 2 +-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index 29b328a51..4245250ef 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/core": "2.14.1",
+  "packages/core": "2.14.2",
   "packages/tokens": "1.2.0"
 }
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
index 2f4656131..d19ae1038 100644
--- a/packages/core/CHANGELOG.md
+++ b/packages/core/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## [2.14.2](https://github.com/juntossomosmais/atomium/compare/atomium-v2.14.1...atomium-v2.14.2) (2024-08-23)
+
+
+### Bug Fixes
+
+* **alert:** improve position of icon on single line ([#543](https://github.com/juntossomosmais/atomium/issues/543)) ([9c587d6](https://github.com/juntossomosmais/atomium/commit/9c587d6cbd7ab3e2cbe30502ec6a35cfe6ef873a))
+
 ## [2.14.1](https://github.com/juntossomosmais/atomium/compare/atomium-v2.14.0...atomium-v2.14.1) (2024-08-22)
 
 
diff --git a/packages/core/package.json b/packages/core/package.json
index 77adbefeb..dc70442f3 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@juntossomosmais/atomium",
-  "version": "2.14.1",
+  "version": "2.14.2",
   "description": "Core of web components for Atomium",
   "repository": {
     "type": "git",