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

…ert-icon-size

.release-please-manifest.json

@@ -1,4 +1,4 @@
 {
-  "packages/core": "1.12.2",
+  "packages/core": "1.13.0",
   "packages/tokens": "1.2.0"
 }

package.json

@@ -29,15 +29,15 @@
     "tokens:build": "nx build @juntossomosmais/atomium-tokens"
   },
   "dependencies": {
-    "@ionic/core": "^7.7.3",
+    "@ionic/core": "^7.8.2",
     "@stencil/core": "^4.12.4",
     "swiper": "^11.0.7"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.0",
+    "@babel/core": "^7.24.3",
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
+    "@babel/preset-typescript": "^7.24.1",
     "@commitlint/cli": "^19.0.3",
     "@commitlint/config-conventional": "^19.0.3",
     "@juntossomosmais/linters": "^0.18.0",
@@ -103,12 +103,6 @@
     "typescript": "^5.3.3",
     "vue": "^3.4.21"
   },
-  "optionalDependencies": {
-    "@nx/nx-darwin-arm64": "18.0.6",
-    "@nx/nx-darwin-x64": "18.0.6",
-    "@nx/nx-linux-x64-gnu": "18.0.6",
-    "@nx/nx-win32-x64-msvc": "18.0.6"
-  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "prettier --write",

packages/core/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.13.0](https://github.com/juntossomosmais/atomium/compare/atomium-v1.12.3...atomium-v1.13.0) (2024-04-11)
+
+
+### Features
+
+* add new watch-slides-progress carousel prop ([#412](https://github.com/juntossomosmais/atomium/issues/412)) ([a5e29b2](https://github.com/juntossomosmais/atomium/commit/a5e29b234c51794ce26308969dd0ce04c93e3bed))
+
+## [1.12.3](https://github.com/juntossomosmais/atomium/compare/atomium-v1.12.2...atomium-v1.12.3) (2024-03-07)
+
+
+### Bug Fixes
+
+* **button:** use default behavior when is link ([#399](https://github.com/juntossomosmais/atomium/issues/399)) ([2873800](https://github.com/juntossomosmais/atomium/commit/28738006014c5d25296c36d241d791e34814c08c))
+
 ## [1.12.2](https://github.com/juntossomosmais/atomium/compare/atomium-v1.12.1...atomium-v1.12.2) (2024-02-27)
 
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juntossomosmais/atomium",
-  "version": "1.12.2",
+  "version": "1.13.0",
   "description": "Core of web components for Atomium",
   "repository": {
     "type": "git",

packages/core/src/components.d.ts

@@ -68,6 +68,7 @@ export namespace Components {
         "speed"?: number;
         "thumbnailImages"?: string;
         "videoIcons"?: boolean;
+        "watchSlidesProgress"?: boolean;
     }
     interface AtomCarouselItem {
     }
@@ -517,6 +518,7 @@ declare namespace LocalJSX {
         "speed"?: number;
         "thumbnailImages"?: string;
         "videoIcons"?: boolean;
+        "watchSlidesProgress"?: boolean;
     }
     interface AtomCarouselItem {
     }

packages/core/src/components/button/button.spec.ts

@@ -1,4 +1,5 @@
 import { newSpecPage } from '@stencil/core/testing'
+
 import { AtomButton } from './button'
 
 describe('AtomButton', () => {
@@ -140,8 +141,10 @@ describe('AtomButton', () => {
 
     await page.waitForChanges()
     const formEl = page.body.querySelector('form') as HTMLFormElement
+
     formEl.requestSubmit = jest.fn
     const buttonEl = page.root?.shadowRoot?.querySelector('ion-button')
+
     jest.spyOn(formEl, 'requestSubmit')
 
     buttonEl?.click()
@@ -157,8 +160,10 @@ describe('AtomButton', () => {
 
     await page.waitForChanges()
     const formEl = page.body.querySelector('form') as HTMLFormElement
+
     formEl.reset = jest.fn()
     const buttonEl = page.root?.shadowRoot?.querySelector('ion-button')
+
     jest.spyOn(formEl, 'reset')
     buttonEl?.click()
 
@@ -173,11 +178,35 @@ describe('AtomButton', () => {
 
     await page.waitForChanges()
     const formEl = page.body.querySelector('form') as HTMLFormElement
+
     formEl.reset = jest.fn()
     const buttonEl = page.root?.shadowRoot?.querySelector('ion-button')
+
     jest.spyOn(formEl, 'reset')
     buttonEl?.click()
 
     expect(formEl.reset).not.toHaveBeenCalled()
   })
+
+  it('should allow default event when is link', async () => {
+    const button = new AtomButton()
+
+    button.href = 'http://example.com'
+    button.download = 'name_file'
+    button.target = '_blank'
+
+    const event = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+    })
+
+    jest.spyOn(event, 'preventDefault')
+    jest.spyOn(event, 'stopPropagation')
+
+    //@ts-expect-error - Testing private method
+    button.handleClick(event)
+
+    expect(event.preventDefault).not.toHaveBeenCalled()
+    expect(event.stopPropagation).not.toHaveBeenCalled()
+  })
 })

packages/core/src/components/button/button.tsx

@@ -38,7 +38,13 @@ export class AtomButton {
     submit: 'requestSubmit',
   }
 
+  private get isLink() {
+    return this.href || this.download || this.target
+  }
+
   private handleClick = (event) => {
+    if (this.isLink) return
+
     event.preventDefault()
     event.stopPropagation()
 

packages/core/src/components/button/stories/button.core.stories.tsx

@@ -115,3 +115,45 @@ export const IconAndText: StoryObj = {
     ...Primary.args,
   },
 }
+
+export const Link: StoryObj = {
+  render: (args) => html`
+    <atom-button
+      color="${args.color}"
+      fill="${args.fill}"
+      expand="${args.expand}"
+      size="${args.size}"
+      disabled="${args.disabled}"
+      loading="${args.loading}"
+      type="${args.type}"
+      mode="${args.mode}"
+      shape="${args.shape}"
+      download="${args.download}"
+      href="${args.href}"
+      target="${args.target}"
+    >
+      ${args.label}
+    </atom-button>
+  `,
+  args: {
+    ...Primary.args,
+    href: undefined,
+    download: undefined,
+    target: undefined,
+  },
+  argTypes: {
+    href: {
+      options: ['Download', 'Navigate'],
+      mapping: {
+        Download: '/custom/jsm.svg',
+        Navigate: 'https://www.juntossomosmais.com.br',
+      },
+    },
+    download: {
+      control: 'text',
+    },
+    target: {
+      options: ['_blank', '_self', '_parent', '_top'],
+    },
+  },
+}

packages/core/src/components/button/stories/button.react.stories.tsx

@@ -114,3 +114,45 @@ export const IconAndText: StoryObj = {
     ...Primary.args,
   },
 }
+
+export const Link: StoryObj = {
+  render: (args: any) => (
+    <AtomButton
+      color={args.color}
+      fill={args.fill}
+      size={args.size}
+      disabled={args.disabled}
+      loading={args.loading}
+      type={args.type}
+      mode={args.mode}
+      expand={args.expand}
+      shape={args.shape}
+      download={args.download}
+      href={args.href}
+      target={args.target}
+    >
+      {args.label}
+    </AtomButton>
+  ),
+  args: {
+    ...Primary.args,
+    href: undefined,
+    download: undefined,
+    target: undefined,
+  },
+  argTypes: {
+    href: {
+      options: ['Download', 'Navigate'],
+      mapping: {
+        Download: '/custom/jsm.svg',
+        Navigate: 'https://www.juntossomosmais.com.br',
+      },
+    },
+    download: {
+      control: 'text',
+    },
+    target: {
+      options: ['_blank', '_self', '_parent', '_top'],
+    },
+  },
+}

packages/core/src/components/carousel/carousel.spec.ts

@@ -25,7 +25,8 @@ describe('AtomCarousel', () => {
   it('should render component with passed props', async () => {
     const page = await newSpecPage({
       components: [AtomCarousel],
-      html: `<atom-carousel center-insufficient-slides="true" pagination="false" navigation="false" slides-per-group="4" slides-per-view="2">
+      html: `<atom-carousel center-insufficient-slides="true" pagination="false"
+      navigation="false" slides-per-group="4" slides-per-view="2" watch-slides-progress="true">
               <atom-carousel-item> Slide 1</atom-carousel-item>
               <atom-carousel-item> Slide 2</atom-carousel-item>
               </atom-carousel>`,
@@ -43,6 +44,7 @@ describe('AtomCarousel', () => {
     expect(swiperContainer?.outerHTML).toContain('slides-per-view="2"')
     expect(swiperContainer?.outerHTML).toContain('slides-per-group="4"')
     expect(swiperContainer?.outerHTML).toContain('center-insufficient-slides')
+    expect(swiperContainer?.outerHTML).toContain('watch-slides-progress')
   })
 
   it('should render component with default props', async () => {

packages/core/src/components/carousel/carousel.tsx

@@ -61,6 +61,8 @@ export class AtomCarousel {
   videoIcons?: boolean = false
   @Prop({ mutable: true })
   navigationButtonSize?: 'medium' | 'xxlarge' = 'medium'
+  @Prop({ mutable: true })
+  watchSlidesProgress?: boolean = false
 
   componentDidLoad() {
     this.swiperEl = this.host.querySelector('swiper-container')
@@ -133,6 +135,7 @@ export class AtomCarousel {
           touch-start-prevent-default='false'
           center-insufficient-slides={this.centerInsufficientSlides}
           centered-slides={this.centeredSlides}
+          watch-slides-progress={this.watchSlidesProgress}
         ></swiper-container>
       </Host>
     )

packages/core/src/components/carousel/stories/carousel.args.ts

@@ -17,15 +17,13 @@ export const CarouselStoryArgs = {
     autoplay: {
       description: 'Set to `true` to enable carousel autoplay',
       defaultValue: { summary: false },
-
       table: {
         category: Category.PROPERTIES,
       },
     },
     autoplayDelay: {
       description: 'Delay between transitions (in ms)',
       defaultValue: { summary: 0 },
-
       table: {
         category: Category.PROPERTIES,
       },
@@ -34,7 +32,6 @@ export const CarouselStoryArgs = {
       description:
         'When enabled it center slides if the amount of slides less than slidesPerView',
       defaultValue: { summary: false },
-
       table: {
         category: Category.PROPERTIES,
       },
@@ -131,6 +128,14 @@ export const CarouselStoryArgs = {
         category: Category.PROPERTIES,
       },
     },
+    watchSlidesProgress: {
+      description:
+        'Enable this feature to calculate each slides progress and visibility (slides in viewport will have additional visible class)',
+      defaultValue: { summary: false },
+      table: {
+        category: Category.PROPERTIES,
+      },
+    },
     atomChange: {
       action: 'atomChange',
       description: 'Emitted when the visible item changes.',