Skip to content

Commit

Permalink
Merge pull request #7 from takenet/fix/ajustments-notification
Browse files Browse the repository at this point in the history 
feat(passive-feedback): add component of passive-feedback
  • Loading branch information
@lucasMurtaVI
lucasMurtaVI authored Sep 26, 2024
2 parents ef6613c + 9b95f21 commit 6910198
Show file tree
Hide file tree
Showing 8 changed files with 624 additions and 2,494 deletions.
2,587 changes: 190 additions & 2,397 deletions package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"babel-loader": "^8.2.5",
"blip-ds": "1.288.2",
"blip-ds": "1.291.1",
"blip-tokens": "^1.82.0",
"css-loader": "^6.7.1",
"eslint": "^8.17.0",
Expand Down
4 changes: 2 additions & 2 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const browserTheme = window.matchMedia('(prefers-color-scheme: dark)');
const App = () => {
const [openSidebar, setOpenSidebar] = useState(true);
return (
<BdsThemeProvider theme={browserTheme.matches ? 'dark' : 'light'} class="provider-global">
<BdsThemeProvider theme="light" class="provider-global">
<BdsNavbar orientation="vertical" justifyContent="flex-start" class="nav-global">
<BdsNavbarContent>
<BdsButtonIcon
Expand Down Expand Up @@ -63,7 +63,7 @@ const App = () => {
</bds-grid>
</bds-grid>
</bds-grid>
<DownTimeModal downtime={20} waintingTime={10}></DownTimeModal>
{/* <DownTimeModal downtime={20} waintingTime={10}></DownTimeModal> */}
</BdsThemeProvider>
);
};
Expand Down
34 changes: 23 additions & 11 deletions src/pages/Home.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,39 @@
import React from 'react';
import { BdsButton, BdsIllustration, BdsTypo } from 'blip-ds/dist/blip-ds-react/components';
import { BdsGrid, BdsIllustration, BdsPaper, BdsTypo } from 'blip-ds/dist/blip-ds-react/components';
import PassiveFeedback from '../wrappers/PassiveFeedback';

const data = {
title: 'Resolução inteligente',
};

const Home = () => {
const dataPassiveFeedBack = (ev: CustomEvent) => {
console.log('Retorno da funcionalidade', ev.detail);
};
window.addEventListener('onLikeFeedback', () => console.log('onLikeFeedback'), false);
window.addEventListener('onDisikeFeedback', () => console.log('onDisikeFeedback'), false);
window.addEventListener('onSubmitFeedback', (ev) => dataPassiveFeedBack(ev as CustomEvent), false);
return (
<>
<bds-grid margin="y-4" container>
<bds-paper class="w-100">
<bds-grid margin="y-3" padding="x-3" containerFluid align-items="center">
<bds-grid xxs="6" padding="x-6" direction="column">
<BdsGrid margin="y-4" container direction="column" gap="2">
<BdsPaper class="w-100">
<BdsGrid margin="y-3" padding="x-3" containerFluid align-items="center">
<BdsGrid xxs="6" padding="x-6" direction="column">
<BdsIllustration type="default" name="management" />
</bds-grid>
<bds-grid xxs="6" direction="column">
</BdsGrid>
<BdsGrid xxs="6" direction="column">
<BdsTypo variant="fs-20" bold="bold">
Área de teste Uai Design System
</BdsTypo>
<BdsTypo variant="fs-16">
Aqui vamo aplicar todos os teste nos componentes. Você pode navegar no menu lateral para acessar os
componentes.
</BdsTypo>
</bds-grid>
</bds-grid>
</bds-paper>
</bds-grid>
</BdsGrid>
</BdsGrid>
</BdsPaper>
<PassiveFeedback functionTitle={data.title}></PassiveFeedback>
</BdsGrid>
</>
);
};
Expand Down
259 changes: 176 additions & 83 deletions src/pages/teamComponents/carousel/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,169 @@
import React, { useRef } from 'react';
import React, { useRef, useState, useEffect } from 'react';
import {
BdsGrid,
BdsPaper,
BdsTypo,
BdsBanner,
BdsBannerLink,
BdsCarousel,
BdsCarouselItem,
BdsIllustration,
BdsButton,
BdsCarouselItem,
} from 'blip-ds/dist/blip-ds-react/components';

export interface Illust {
type?: string;
name?: string;
}

export interface DataCarousel {
id: string;
title?: string;
subTitle?: string;
illustration?: Illust;
}

const DATACAROUSEL = [
{
id: '1',
title: '1 - Título do Slide',
subTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
illustration: {
type: 'spots',
name: 'star',
},
},
{
id: '2',
title: '2 - Título do Slide',
subTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
illustration: {
type: 'spots',
name: 'check',
},
},
{
id: '3',
title: '3 - Título do Slide',
subTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
illustration: {
type: 'spots',
name: 'air-ballon',
},
},
{
id: '4',
title: '4 - Título do Slide',
subTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
illustration: {
type: 'spots',
name: 'air-ballon',
},
},
{
id: '5',
title: '5 - Título do Slide',
subTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
illustration: {
type: 'spots',
name: 'air-ballon',
},
},
{
id: '6',
title: '6 - Título do Slide',
subTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
illustration: {
type: 'spots',
name: 'air-ballon',
},
},
{
id: '7',
title: '7 - Título do Slide',
subTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
illustration: {
type: 'spots',
name: 'air-ballon',
},
},
{
id: '8',
title: '8 - Título do Slide',
subTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
illustration: {
type: 'spots',
name: 'air-ballon',
},
},
];

const NEWDATACAROUSEL = [
{
id: '48',
title: '48 - Título do Slide',
subTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
illustration: {
type: 'spots',
name: 'star',
},
},
{
id: '27',
title: '27 - Título do Slide',
subTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
illustration: {
type: 'spots',
name: 'check',
},
},
{
id: '32',
title: '32 - Título do Slide',
subTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
illustration: {
type: 'spots',
name: 'air-ballon',
},
},
{
id: '46',
title: '46 - Título do Slide',
subTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
illustration: {
type: 'spots',
name: 'air-ballon',
},
},
];

const Carousel = () => {
const carouselElement = useRef<HTMLBdsCarouselElement>(null);
const [data, setData] = useState<DataCarousel[]>(DATACAROUSEL);

useEffect(() => {
if (carouselElement.current) {
carouselElement.current.buildCarousel();
}
}, [data]);

const removeCarousel = (id: string) => {
setData((data) => data.filter((item) => item.id !== id));
};

const newSlide = () => {
const newItem = {
id: `${data.length + 1}`,
title: `${data.length + 1} - Título do Slide`,
subTitle: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
illustration: {
type: 'spots',
name: 'air-ballon',
},
};
setData([...data, newItem]);
};

const newCarousel = () => {
setData(NEWDATACAROUSEL);
};

return (
<>
Expand All @@ -26,86 +177,28 @@ const Carousel = () => {
<BdsTypo variant="fs-16">
É uma entrada de texto normal aprimorada por um painel de opções sugeridas.
</BdsTypo>
<BdsButton onBdsClick={() => carouselElement.current?.buildCarousel()}> buildCarousel </BdsButton>
<BdsButton onBdsClick={() => newCarousel()}> new Carousel </BdsButton>
<BdsButton onBdsClick={() => newSlide()}> new Slide </BdsButton>
<BdsButton onBdsClick={() => removeCarousel(data.length.toString())}> remove Slide </BdsButton>
</BdsGrid>
<BdsGrid xxs="12" margin="y-2" direction="column">
<BdsCarousel ref={carouselElement}>
<BdsCarouselItem>
<BdsPaper bgColor="surface-0">
<BdsGrid align-items="center">
<BdsGrid xxs="3" padding="3" direction="column" margin="y-2">
<BdsIllustration type="spots" name="star"></BdsIllustration>
</BdsGrid>
<BdsGrid xxs="9" direction="column" padding="2" margin="y-2" gap="1">
<BdsTypo variant="fs-20" bold="bold" margin={false}>
1 - Título do Slide
</BdsTypo>
<BdsTypo variant="fs-16">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ipsum augue, pulvinar sit
amet tincidunt non.
</BdsTypo>
<BdsButton>Saiba mais</BdsButton>
</BdsGrid>
</BdsGrid>
</BdsPaper>
</BdsCarouselItem>
<BdsCarouselItem>
<BdsPaper bgColor="surface-0">
<BdsGrid align-items="center">
<BdsGrid xxs="3" padding="3" direction="column" margin="y-2">
<BdsIllustration type="spots" name="check"></BdsIllustration>
</BdsGrid>
<BdsGrid xxs="9" direction="column" padding="2" margin="y-2" gap="1">
<BdsTypo variant="fs-20" bold="bold" margin={false}>
2 - Título do Slide
</BdsTypo>
<BdsTypo variant="fs-16">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ipsum augue, pulvinar sit
amet tincidunt non.
</BdsTypo>
<BdsButton>Saiba mais</BdsButton>
</BdsGrid>
</BdsGrid>
</BdsPaper>
</BdsCarouselItem>
<BdsCarouselItem>
<BdsPaper bgColor="surface-0">
<BdsGrid align-items="center">
<BdsGrid xxs="3" padding="3" direction="column" margin="y-2">
<BdsIllustration type="spots" name="air-ballon"></BdsIllustration>
</BdsGrid>
<BdsGrid xxs="9" direction="column" padding="2" margin="y-2" gap="1">
<BdsTypo variant="fs-20" bold="bold" margin={false}>
3 - Título do Slide
</BdsTypo>
<BdsTypo variant="fs-16">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ipsum augue, pulvinar sit
amet tincidunt non.
</BdsTypo>
<BdsButton>Saiba mais</BdsButton>
</BdsGrid>
</BdsGrid>
</BdsPaper>
</BdsCarouselItem>
<BdsCarouselItem>
<BdsPaper bgColor="surface-0">
<BdsGrid align-items="center">
<BdsGrid xxs="3" padding="3" direction="column" margin="y-2">
<BdsIllustration type="spots" name="analytics-satisfaction"></BdsIllustration>
</BdsGrid>
<BdsGrid xxs="9" direction="column" padding="2" margin="y-2" gap="1">
<BdsTypo variant="fs-20" bold="bold" margin={false}>
4 - Título do Slide
</BdsTypo>
<BdsTypo variant="fs-16">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ipsum augue, pulvinar sit
amet tincidunt non.
</BdsTypo>
<BdsButton>Saiba mais</BdsButton>
</BdsGrid>
</BdsGrid>
</BdsPaper>
</BdsCarouselItem>
<BdsCarousel
ref={carouselElement}
slidePerPage={4}
onBdsChangeCarousel={() => console.log('onBdsChangeCarousel')}
>
{data &&
data.length > 0 &&
data?.map((item) => {
return (
<BdsCarouselItem key={item.id}>
<BdsGrid direction="column">
<BdsTypo>{item.title}</BdsTypo>
<BdsTypo>{item.subTitle}</BdsTypo>
</BdsGrid>
</BdsCarouselItem>
);
})}
</BdsCarousel>
</BdsGrid>
</BdsGrid>
Expand Down
Loading

0 comments on commit 6910198

Please sign in to comment.