Merge branch 'main' of github.com:juntossomosmais/atomium into fix/li…

…nk-color-and-size-prop
juntossomosmais · Aug 27, 2024 · f7b4f8e · f7b4f8e
2 parents 9171bce + 4b93184
commit f7b4f8e
Show file tree

Hide file tree

Showing 27 changed files with 918 additions and 28 deletions.
diff --git a/.github/workflows/pr-title-check.yml b/.github/workflows/pr-title-check.yml
@@ -2,7 +2,7 @@ name: PR Title Check
 
 on:
   pull_request:
-    types: [opened]
+    types: [opened, edited]
 
 jobs:
   pr-title:
@@ -14,9 +14,9 @@ jobs:
 
       - name: Validate PR Title
         run: |
-          if [[ ! "${{ github.event.pull_request.title }}" =~ ^(feat|fix|chore|major|docs|ci))\([a-zA-Z0-9_-]+\):\ .+$ ]]; then
+          if [[ ! "${{ github.event.pull_request.title }}" =~ ^(feat|fix|chore|major|docs|ci)\(([a-z_-]+)\):(.+|\d+)$ ]]; then
             echo "The Pull Request title must follow the convention: 'type(context): description'."
-            "The types must be: feat, fix, chore, major."
+            echo "The types must be: feat, fix, chore, major, docs, ci."
             echo "Example of a correct title: feat(component): create link component"
             exit 1
           fi
diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -1,4 +1,4 @@
 {
-  "packages/core": "2.13.0",
+  "packages/core": "2.14.2",
   "packages/tokens": "1.2.0"
 }
diff --git 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
@@ -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
@@ -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/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -1,5 +1,35 @@
 # 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)
+
+
+### 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)
+
+
+### 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)
+
+
+### Bug Fixes
+
+* **button:** decrease horizontal padding size ([#531](https://github.com/juntossomosmais/atomium/issues/531)) ([1c6a7b7](https://github.com/juntossomosmais/atomium/commit/1c6a7b724b6abebadcb7cf98f78d416bc9f079cd))
+
 ## [2.13.0](https://github.com/juntossomosmais/atomium/compare/atomium-v2.12.0...atomium-v2.13.0) (2024-08-06)
 
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@juntossomosmais/atomium",
-  "version": "2.13.0",
+  "version": "2.14.2",
   "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
@@ -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;
@@ -155,6 +158,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;
@@ -261,6 +274,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;
@@ -431,6 +448,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;
@@ -494,6 +532,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;
@@ -528,7 +567,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;
@@ -651,6 +693,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;
@@ -754,6 +811,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;
@@ -778,6 +836,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/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 {

diff --git a/packages/core/src/components/button/button.scss b/packages/core/src/components/button/button.scss
@@ -14,6 +14,7 @@
 }
 
 .atom-button {
+  margin: 0;
   text-transform: inherit;
 
   &[color='white'] {
@@ -26,10 +27,17 @@
     --ion-color-contrast: var(--color-neutral-black);
   }
 
+  &[size='small'],
+  &[size='default'],
+  &[size='large'] {
+    --padding-start: var(--spacing-base);
+    --padding-end: var(--spacing-base);
+    height: var(--button-size);
+  }
+
   &[size='default'] {
     --button-size: var(--spacing-xxxxlarge);
     font: var(--button-medium);
-    height: var(--button-size);
     letter-spacing: var(--button-medium-letter);
 
     &.is-circle {
@@ -40,7 +48,6 @@
   &[size='small'] {
     --button-size: var(--spacing-xxxlarge);
     font: var(--button-small);
-    height: var(--button-size);
     letter-spacing: var(--button-small-letter);
 
     &.is-circle {
@@ -51,7 +58,6 @@
   &[size='large'] {
     --button-size: var(--spacing-giant);
     font: var(--button-large);
-    height: var(--button-size);
     letter-spacing: var(--button-large-letter);
 
     &.is-circle {
@@ -67,7 +73,7 @@
     }
   }
 
-  &.is-outline-filled{
+  &.is-outline-filled {
     --background: var(--color-neutral-white);
     --color: var(--ion-color-base);
     --border-width: 2px;
@@ -98,5 +104,3 @@
   top: 50%;
   transform: translate(-50%, -50%);
 }
-
-
diff --git 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
@@ -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'>