Skip to content

Commit

Permalink
feat(carousel): carousel new loading conclude
Browse files Browse the repository at this point in the history
  • Loading branch information
@lucasMurtaVI
lucasMurtaVI committed Jan 13, 2025
1 parent c47032b commit 549c788
Show file tree
Hide file tree
Showing 8 changed files with 330 additions and 341 deletions.
37 changes: 34 additions & 3 deletions src/components/carousel/carousel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,25 @@
&_slide {
width: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
padding: 0 48px;

&::after {
content: '';
position: absolute;
inset: -8px;
border: 2px solid transparent;
border-radius: 4px;
pointer-events: none;
}

&:focus-visible {
outline: none;
&::after {
border-color: $color-focus;
}
}

&_fullwidth {
padding: 0;
}
Expand Down Expand Up @@ -105,7 +120,7 @@

&_bullets {
position: relative;
margin-top: 16px;
margin-top: 8px;

&_inside {
position: absolute;
Expand Down Expand Up @@ -145,6 +160,22 @@
border-radius: 50%;
}

&::after {
content: '';
position: absolute;
inset: -8px;
transform: rotate(-45deg);
border: 2px solid transparent;
border-radius: 4px;
}

&:focus-visible {
outline: none;
&::after {
border-color: $color-focus;
}
}

&_active {
&::before {
background-color: $color-primary;
Expand All @@ -155,7 +186,7 @@
position: absolute;
inset: -2px;
border-radius: 50%;
border: 2px solid $color-primary;
border: 2px solid $color-content-disable;
}

&_loader {
Expand Down
76 changes: 41 additions & 35 deletions src/components/carousel/carousel.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import {
BdsCarouselItem,
BdsGrid,
BdsIllustration,
BdsPaper,
BdsTypo,
} from '../../../blip-ds-react/dist/components';

Expand All @@ -32,7 +31,7 @@ const DATACAROUSEL = [
type: 'spots',
name: 'star',
},
bgColor: '#fff',
bgColor: '#e7f0ff',
theme: 'light',
},
{
Expand All @@ -43,7 +42,7 @@ const DATACAROUSEL = [
type: 'spots',
name: 'check',
},
bgColor: '#222',
bgColor: '#202d44',
theme: 'dark',
},
{
Expand All @@ -54,7 +53,7 @@ const DATACAROUSEL = [
type: 'spots',
name: 'air-ballon',
},
bgColor: '#fff',
bgColor: '#e7f0ff',
theme: 'light',
},
{
Expand All @@ -65,7 +64,7 @@ const DATACAROUSEL = [
type: 'spots',
name: 'air-ballon',
},
bgColor: '#222',
bgColor: '#202d44',
theme: 'dark',
},
];
Expand Down Expand Up @@ -350,27 +349,27 @@ export const Methods = () => {
return (
<BdsGrid direction="column" gap="2">
<BdsGrid gap="2">
<BdsButton onClick={() => nextSlide('carousel')} variant="primary" size="short">
<BdsButton onClick={() => nextSlide('carousel-method')} variant="primary" size="short">
nextSlide
</BdsButton>
<BdsButton onClick={() => prevSlide('carousel')} variant="primary" size="short">
<BdsButton onClick={() => prevSlide('carousel-method')} variant="primary" size="short">
prevSlide
</BdsButton>
<BdsButton onClick={() => setActivated('carousel')} variant="primary" size="short">
<BdsButton onClick={() => setActivated('carousel-method')} variant="primary" size="short">
setActivated 2
</BdsButton>
<BdsButton onClick={() => pauseAutoplay('carousel')} variant="primary" size="short">
<BdsButton onClick={() => pauseAutoplay('carousel-method')} variant="primary" size="short">
pauseAutoplay
</BdsButton>
<BdsButton onClick={() => runAutoplay('carousel')} variant="primary" size="short">
<BdsButton onClick={() => runAutoplay('carousel-method')} variant="primary" size="short">
runAutoplay
</BdsButton>
<BdsButton onClick={() => buildCarousel('carousel')} variant="primary" size="short">
<BdsButton onClick={() => buildCarousel('carousel-method')} variant="primary" size="short">
buildCarousel
</BdsButton>
</BdsGrid>
<BdsCarousel
id="carousel"
<bds-carousel
id="carousel-method"
autoplay={true}
autoplay-timeout="10000"
autoplay-hover-pause={true}
Expand Down Expand Up @@ -398,23 +397,30 @@ export const Methods = () => {
</bds-carousel-item>
);
})}
</BdsCarousel>
</bds-carousel>
</BdsGrid>
);
};

export const Events = () => {
useEffect(() => {
const carousel = document.getElementById('carousel');
const carousel = document.getElementById('carousel-event');
carousel.addEventListener('bdsChangeCarousel', () => {
console.log('Evento bdsChangeCarousel funcionando');
});
});
return (
<BdsCarousel id="carousel" arrows="outside" bullets="outside" infinite-loop={true} slide-per-page={1} gap="2">
{DATAITEMS.map((item, index) => {
<bds-carousel
id="carousel-event"
arrows="outside"
bullets="outside"
infinite-loop={true}
slide-per-page={1}
gap="2"
>
{DATACAROUSEL.map((item, index) => {
return (
<bds-carousel-item key={index} bgColor={item.bgColor} theme={item.theme}>
<bds-carousel-item key={index} bg-color={item.bgColor} theme={item.theme}>
<bds-grid padding="x-7" margin="y-6" align-items="center">
<bds-grid xxs="3" direction="column">
<bds-illustration type={item.illustration.type} name={item.illustration.name}></bds-illustration>
Expand All @@ -430,7 +436,7 @@ export const Events = () => {
</bds-carousel-item>
);
})}
</BdsCarousel>
</bds-carousel>
);
};

Expand All @@ -441,26 +447,26 @@ export const FrameworkReact = () => {
arrows="inside"
bullets="inside"
bulletsPosition="center"
infinite-loop={true}
slide-per-page={1}
infiniteLoop={true}
slidePerPage={1}
gap="2"
>
{DATAITEMS.map((item, index) => {
{DATACAROUSEL.map((item, index) => {
return (
<bds-carousel-item key={index} bgColor={item.bgColor} theme={item.theme}>
<bds-grid padding="x-7" margin="y-6" align-items="center">
<bds-grid xxs="3" direction="column">
<bds-illustration type={item.illustration.type} name={item.illustration.name}></bds-illustration>
</bds-grid>
<bds-grid xxs="10" direction="column" gap="1">
<bds-typo variant="fs-20" bold="bold" margin={false}>
<BdsCarouselItem key={index} bgColor={item.bgColor} theme={item.theme}>
<BdsGrid padding="x-7" margin="y-6" alignItems="center">
<BdsGrid xxs="3" direction="column">
<BdsIllustration type={item.illustration.type} name={item.illustration.name}></BdsIllustration>
</BdsGrid>
<BdsGrid xxs="10" direction="column" gap="1">
<BdsTypo variant="fs-20" bold="bold" margin={false}>
{item.title}
</bds-typo>
<bds-typo variant="fs-16">{item.subTitle}</bds-typo>
<bds-button>Saiba mais</bds-button>
</bds-grid>
</bds-grid>
</bds-carousel-item>
</BdsTypo>
<BdsTypo variant="fs-16">{item.subTitle}</BdsTypo>
<BdsButton>Saiba mais</BdsButton>
</BdsGrid>
</BdsGrid>
</BdsCarouselItem>
);
})}
</BdsCarousel>
Expand Down
53 changes: 36 additions & 17 deletions src/components/carousel/carousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { gapChanged, getHighestItem, getItems } from '../../utils/position-eleme
})
export class BdsCarousel {
private itemsElement?: HTMLCollectionOf<HTMLBdsCarouselItemElement> = null;
private bulletElement?: HTMLElement = null;
private frame?: HTMLElement;
private themeProviderArrows?: any;
private frameRepeater?: HTMLElement;
Expand Down Expand Up @@ -118,8 +119,12 @@ export class BdsCarousel {
}
if (this.autoHeight) this.updateHeight(Array.from(this.itemsElement));
}
if (this.slidePerPage <= 1 && this.arrows == 'inside') {
this.themeProviderArrows.theme = this.itemsElement[this.itemActivated - 1].theme;
if (this.arrows == 'inside') {
const firstItemActived = (this.itemActivated - 1) * (this.itemsElement.length / this.internalItens.length) + 1;
this.themeProviderArrows.theme =
this.slidePerPage <= 1
? this.itemsElement[this.itemActivated - 1].theme
: this.itemsElement[Math.round(firstItemActived)].theme;
}
}

Expand Down Expand Up @@ -284,6 +289,10 @@ export class BdsCarousel {
this.frameRepeater = el;
};

private refBulletElement = (el: HTMLElement): void => {
this.bulletElement = el;
};

private onMouseOver = () => {
if (this.autoplayHoverPause) {
this.pauseAutoplay();
Expand Down Expand Up @@ -344,8 +353,21 @@ export class BdsCarousel {
}
};

private setKeydownNavigation = (ev) => {
console.log(ev.key);
if (ev.key == 'Tab') {
this.bulletElement.focus();
}
if (ev.key == 'ArrowRight') {
this.nextSlide();
}
if (ev.key == 'ArrowLeft') {
this.prevSlide();
}
};

render() {
const ThemeOrDivArrows = this.slidePerPage <= 1 && this.arrows == 'inside' ? 'bds-theme-provider' : 'div';
const ThemeOrDivArrows = this.arrows == 'inside' ? 'bds-theme-provider' : 'div';
const justifybulletsPosition =
this.bulletsPosition == 'center'
? 'center'
Expand All @@ -355,7 +377,9 @@ export class BdsCarousel {
return (
<div class={{ carousel: true }}>
<div
class={{ carousel_slide: true, carousel_slide_fullwidth: this.slidePerPage <= 1 && this.arrows != 'outside' }}
class={{ carousel_slide: true, carousel_slide_fullwidth: this.arrows != 'outside' }}
tabindex="0"
onKeyDown={(ev) => this.setKeydownNavigation(ev)}
>
<div
ref={(el) => this.refFrame(el)}
Expand All @@ -366,14 +390,8 @@ export class BdsCarousel {
onMouseEnter={() => this.onMouseEnter()}
onMouseUp={() => this.onMouseUp()}
onMouseMove={(ev) => this.onMouseMove(ev)}
tabindex="0"
>
<div
ref={(el) => this.refFrameRepeater(el)}
class={{ carousel_slide_frame_repeater: true }}
tabindex="0"
role="tabpanel"
>
<div ref={(el) => this.refFrameRepeater(el)} class={{ carousel_slide_frame_repeater: true }}>
<slot />
</div>
</div>
Expand All @@ -385,7 +403,7 @@ export class BdsCarousel {
ref={(el) => this.refThemeProviderArrows(el)}
class={{
carousel_buttons: true,
carousel_buttons_fullwidth: this.slidePerPage <= 1 && this.arrows == 'inside',
carousel_buttons_fullwidth: this.arrows != 'outside',
}}
>
<bds-button
Expand All @@ -409,15 +427,15 @@ export class BdsCarousel {
<div
class={{
carousel_bullets: true,
carousel_bullets_inside: this.slidePerPage <= 1 && this.bullets == 'inside',
carousel_bullets_inside: this.bullets == 'inside',
}}
>
{this.loading ? (
{this.loading && this.bullets != 'inside' ? (
<bds-grid
xxs="12"
gap="1"
justify-content={justifybulletsPosition}
padding={this.slidePerPage <= 1 && this.arrows == 'outside' ? 'x-7' : 'none'}
padding={this.arrows === 'outside' ? 'x-7' : 'none'}
>
<bds-skeleton height="16px" width="16px" shape="circle" />
<bds-skeleton height="16px" width="16px" shape="circle" />
Expand All @@ -428,17 +446,18 @@ export class BdsCarousel {
<bds-grid
xxs="12"
justify-content={justifybulletsPosition}
padding={this.slidePerPage <= 1 && this.arrows == 'outside' ? 'x-7' : 'none'}
padding={this.arrows === 'outside' ? 'x-7' : 'none'}
>
<div
class={{
carousel_bullets_card: true,
carousel_bullets_card_inside: this.slidePerPage <= 1 && this.bullets == 'inside',
carousel_bullets_card_inside: this.bullets == 'inside',
}}
>
{this.internalItens.map((item, index) => (
<div
key={index}
ref={(el) => this.refBulletElement(el)}
class={{
carousel_bullets_item: true,
carousel_bullets_item_active: item.id == this.itemActivated,
Expand Down
5 changes: 0 additions & 5 deletions src/components/carousel/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,6 @@

## Dependencies

### Used by

- [bds-test-component](../test-component)

### Depends on

- [bds-theme-provider](../theme-provider)
Expand All @@ -34,7 +30,6 @@ graph TD;
bds-image --> bds-skeleton
bds-image --> bds-illustration
bds-skeleton --> bds-grid
bds-test-component --> bds-carousel-item
style bds-carousel-item fill:#f9f,stroke:#333,stroke-width:4px
```

Expand Down
Loading

0 comments on commit 549c788

Please sign in to comment.