diff --git a/packages/components/src/Carousel/Carousel.d.ts b/packages/components/src/Carousel/Carousel.d.ts index 59184596..9bad6146 100644 --- a/packages/components/src/Carousel/Carousel.d.ts +++ b/packages/components/src/Carousel/Carousel.d.ts @@ -15,6 +15,7 @@ export interface CarouselProps { hideNextButton?: boolean; hidePrevButton?: boolean; onChange?: (currentIndex: number) => void; + isIconButton?: boolean; children?: ReactNode; } declare const Carousel: React.FC; diff --git a/packages/components/src/Carousel/Carousel.tsx b/packages/components/src/Carousel/Carousel.tsx index 9f1ea0da..8f4f2b57 100644 --- a/packages/components/src/Carousel/Carousel.tsx +++ b/packages/components/src/Carousel/Carousel.tsx @@ -4,8 +4,15 @@ import { default as SlickSlider, ResponsiveObject } from 'react-slick'; import styled from 'styled-components'; import { display, layout, space } from 'styled-system'; +import { + MaterialCheck, + MaterialChevronLeft, + MaterialChevronRight, +} from '@t3n/icons'; + import Box from '../Box'; import Button from '../Button'; +import IconButton from '../IconButton'; export interface CarouselProps { slidesToShow?: number; @@ -22,6 +29,7 @@ export interface CarouselProps { hideNextButton?: boolean; hidePrevButton?: boolean; onChange?: (currentIndex: number) => void; + isIconButton?: boolean; children?: ReactNode; } @@ -68,14 +76,40 @@ const StyledPrevButton = styled(Button)` ${({ theme }) => display({ theme, display: ['none', 'block'] })} `; +const StyledIconButtonWrapper = styled.div<{ position: 'left' | 'right' }>` + position: absolute; + bottom: 0; + ${({ position }) => (position === 'left' ? 'left: 0;' : 'right: 0;')} + z-index: 1; +`; + const NextButton: React.FC<{ onClick?: () => void; show: boolean; - label: string; + label?: string; customOnClick?: () => void; -}> = ({ onClick, show = true, label, customOnClick }) => { + isIconButton?: boolean; + isLastSlide?: boolean; +}> = ({ + onClick, + show = true, + label, + customOnClick, + isIconButton, + isLastSlide, +}) => { if (!show) return null; + const icon = isLastSlide ? MaterialCheck : MaterialChevronRight; + + if (isIconButton) { + return ( + + + + ); + } + return ( {label} @@ -86,11 +120,23 @@ const NextButton: React.FC<{ const PrevButton: React.FC<{ onClick?: () => void; show: boolean; - label: string; + label?: string; customOnClick?: () => void; -}> = ({ onClick, show = true, label, customOnClick }) => { + isIconButton?: boolean; +}> = ({ onClick, show = true, label, customOnClick, isIconButton }) => { if (!show) return null; + if (isIconButton) { + return ( + + + + ); + } + return ( {label} @@ -112,6 +158,7 @@ const Carousel: React.FC = ({ onPrevClick, hideNextButton, hidePrevButton, + isIconButton, onChange, children, }) => { @@ -123,7 +170,7 @@ const Carousel: React.FC = ({ onChange(currentIndex); } }, [currentIndex, onChange]); - + const isLastSlide = currentIndex === slidesAmount - slidesToShow; return ( = ({ ? !hideNextButton : currentIndex < slidesAmount - 1 || infinite } + isLastSlide={isLastSlide} + isIconButton={isIconButton} label={nextLabel} customOnClick={onNextClick} /> @@ -152,6 +201,7 @@ const Carousel: React.FC = ({ ? !hidePrevButton : currentIndex > 0 || infinite } + isIconButton={isIconButton} label={prevLabel} customOnClick={onPrevClick} /> diff --git a/packages/storybook/src/stories/components/content/carousel.stories.d.ts b/packages/storybook/src/stories/components/content/carousel.stories.d.ts index e6c67d62..a94d279f 100644 --- a/packages/storybook/src/stories/components/content/carousel.stories.d.ts +++ b/packages/storybook/src/stories/components/content/carousel.stories.d.ts @@ -8,3 +8,5 @@ export declare const infinite: Story; export declare const autoplay: Story; export declare const responsive: Story; export declare const sliderInModal: Story; +export declare const carouselWithChevronButtons: Story; +export declare const sliderWithChevronButtonsInModal: Story; diff --git a/packages/storybook/src/stories/components/content/carousel.stories.tsx b/packages/storybook/src/stories/components/content/carousel.stories.tsx index 6279e018..e8c6d430 100644 --- a/packages/storybook/src/stories/components/content/carousel.stories.tsx +++ b/packages/storybook/src/stories/components/content/carousel.stories.tsx @@ -99,6 +99,7 @@ const meta: Meta = { nextLabel: 'Nächste', prevLabel: 'Zurück', speed: 500, + isIconButton: false, children: defaultData.map((el) => ( { + const [showOnboardingModal, setShowOnboardingModal] = useState(true); + const [currentIndex, setCurrentIndex] = useState(0); + + return ( + <> + + + {showOnboardingModal && ( + + setShowOnboardingModal(false)}> + setShowOnboardingModal(false) + : undefined + } + isIconButton + hideNextButton={false} + nextLabel={ + currentIndex === defaultData.length - 1 + ? 'Schließen' + : undefined + } + onChange={setCurrentIndex} + > + {defaultData.map((el) => ( + + {el.headline} + + + {el.name} + + + {el.headline} + + {el.description} + + ))} + + + + )} + + ); + }, +};