feat: add navigation button size

juntossomosmais · Feb 26, 2024 · 9e17961 · 9e17961
1 parent 1dec40c
commit 9e17961
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 15 deletions.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -58,6 +58,7 @@ export namespace Components {
         "freeMode"?: boolean;
         "loop"?: boolean;
         "navigation"?: boolean;
+        "navigationButtonSize"?: 'medium' | 'xxlarge';
         "pagination"?: boolean;
         "paginationClickable"?: boolean;
         "paginationType"?: PaginationOptions['type'] | 'thumbnails';
@@ -503,6 +504,7 @@ declare namespace LocalJSX {
         "freeMode"?: boolean;
         "loop"?: boolean;
         "navigation"?: boolean;
+        "navigationButtonSize"?: 'medium' | 'xxlarge';
         "onAtomChange"?: (event: AtomCarouselCustomEvent<string>) => void;
         "onAtomClickNext"?: (event: AtomCarouselCustomEvent<string>) => void;
         "onAtomClickPrev"?: (event: AtomCarouselCustomEvent<string>) => void;

diff --git a/packages/core/src/components/carousel/carousel.scss b/packages/core/src/components/carousel/carousel.scss
@@ -4,22 +4,19 @@
 
 ::part(button-prev),
 ::part(button-next) {
-  background: var(--color-neutral-white);
-  border: 1px solid transparent;
+  background: var(--color-brand-secondary-regular);
   border-radius: var(--border-radius-full);
   box-shadow: var(--elevation-3);
-  color: var(--color-brand-secondary-regular);
-  height: var(--spacing-medium);
+  color: var(--color-neutral-white);
   padding: var(--spacing-small);
   transition:
     border var(--transition-duration),
     box-shadow var(--transition-duration),
     opacity var(--transition-duration);
-  width: var(--spacing-medium);
   will-change: border, box-shadow;
 
   &:hover {
-    border-color: var(--color-brand-secondary-regular);
+    background: var(--color-brand-secondary-light-1);
   }
 }
 

diff --git a/packages/core/src/components/carousel/carousel.tsx b/packages/core/src/components/carousel/carousel.tsx
@@ -7,8 +7,9 @@ import {
   Prop,
   h,
 } from '@stencil/core'
-import 'swiper/swiper-element-bundle.js'
+import { register } from 'swiper/element/bundle'
 import { AutoplayOptions, PaginationOptions, Swiper } from 'swiper/types'
+register()
 
 import { renderThumbs } from './utils/render-thumbs'
 
@@ -59,12 +60,8 @@ export class AtomCarousel {
   thumbnailImages?: string = ''
   @Prop({ mutable: true })
   videoIcons?: boolean = false
-
-  // If you need more info please read the ADR 0012 at Caveat sections
-  private injectStyles = [
-    '.swiper-button-disabled { opacity: 0 !important}',
-    '.swiper-pagination-custom { display: flex; justify-content: center; column-gap: var(--spacing-base); } ',
-  ]
+  @Prop({ mutable: true })
+  navigationButtonSize?: 'medium' | 'xxlarge' = 'medium'
 
   componentDidLoad() {
     this.swiperEl = this.host.querySelector('swiper-container')
@@ -113,6 +110,13 @@ export class AtomCarousel {
     Object.assign(this.swiperEl, params)
   }
   render() {
+    const injectStyles = [
+      '.swiper-button-disabled { opacity: 0 !important}',
+      '.swiper-pagination-custom { display: flex; justify-content: center; column-gap: var(--spacing-base); } ',
+      `.swiper-button-next { width: var(--spacing-${this.navigationButtonSize}); height: var(--spacing-${this.navigationButtonSize}); }`,
+      `.swiper-button-prev { width: var(--spacing-${this.navigationButtonSize}); height: var(--spacing-${this.navigationButtonSize}); }`,
+    ]
+
     return (
       <Host>
         <swiper-container
@@ -126,7 +130,7 @@ export class AtomCarousel {
           free-mode={this.freeMode}
           autoplay={this.autoplay}
           autoplay-delay={this.autoplayDelay}
-          injectStyles={this.injectStyles}
+          injectStyles={injectStyles}
           touch-start-prevent-default='false'
           center-insufficient-slides={this.centerInsufficientSlides}
           centered-slides={this.centeredSlides}

diff --git a/packages/core/src/components/carousel/stories/carousel.core.stories.tsx b/packages/core/src/components/carousel/stories/carousel.core.stories.tsx
@@ -37,7 +37,11 @@ const createComponent = (args, itemClass: string) => {
       : ''
   }
 
-
+  ${
+    args.navigationButtonSize !== undefined
+      ? `navigationButtonSize="${args.navigationButtonSize}"`
+      : ''
+  }
   ${args.loop !== undefined ? `loop="${args.loop}"` : ''}
   ${args.autoplay !== undefined ? `autoplay="${args.autoplay}"` : ''}
   ${args.speed !== undefined ? `speed="${args.speed}"` : ''}