@spothero/ui 14.3.4 → 14.3.5-beta.0

package/styles/v2/components/ImageCarousel/ImageCarousel.jsx

@@ -1,177 +0,0 @@
-import React, {useState, useEffect, useCallback} from 'react';
-import PropTypes from 'prop-types';
-import {Box} from '@chakra-ui/react';
-import useEmblaCarousel from 'embla-carousel-react';
-import IconChevronLeft from '@spothero/icons/chevron-left';
-import IconChevronRight from '@spothero/icons/chevron-right';
-import Button from 'v2/components/Button/Button';
-
-const ImageCarousel = ({images, width, height, ...props}) => {
-    const imgWidth = width ? `${width}rem` : '100%';
-    const imgHeight = `${height}rem`;
-
-    const [viewportRef, embla] = useEmblaCarousel({
-        skipSnaps: false,
-        loop: true,
-    });
-    const [selectedIndex, setSelectedIndex] = useState(0);
-    const scrollPrev = useCallback(() => embla && embla.scrollPrev(), [embla]);
-    const scrollNext = useCallback(() => embla && embla.scrollNext(), [embla]);
-
-    const onSelect = useCallback(() => {
-        if (!embla) return;
-        setSelectedIndex(embla.selectedScrollSnap());
-    }, [embla, setSelectedIndex]);
-
-    useEffect(() => {
-        if (!embla) return;
-        onSelect();
-        embla.on('select', onSelect);
-    }, [embla, onSelect]);
-
-    if (images.length === 1) {
-        const image = images[0];
-
-        return (
-            <Box width={imgWidth} height={imgHeight} {...props}>
-                <img
-                    style={{
-                        width: '100%',
-                        height: '100%',
-                        objectFit: 'cover',
-                    }}
-                    src={image.src}
-                    alt={image.alt}
-                />
-            </Box>
-        );
-    }
-
-    return (
-        <Box
-            as="section"
-            position="relative"
-            overflow="hidden"
-            width={imgWidth}
-            {...props}
-        >
-            <Box ref={viewportRef}>
-                <Box display="flex" role="group">
-                    {images.map((image, index) => {
-                        return (
-                            <Box
-                                position="relative"
-                                flex="0 0 100%"
-                                key={index}
-                                aria-label={`Slide ${index + 1} of ${
-                                    images.length
-                                }`}
-                            >
-                                <Box position="relative" height={imgHeight}>
-                                    <img
-                                        style={{
-                                            width: '100%',
-                                            height: '100%',
-                                            objectFit: 'cover',
-                                        }}
-                                        src={image.src}
-                                        alt={image.alt}
-                                    />
-                                </Box>
-                            </Box>
-                        );
-                    })}
-                </Box>
-            </Box>
-            <Button
-                onClick={scrollPrev}
-                width="16"
-                height="100%"
-                position="absolute"
-                left="0"
-                top="0"
-                bg="none"
-                borderRadius="0"
-                border="0"
-                _hover={{
-                    bg: 'none',
-                    border: 0,
-                }}
-                _focus={{
-                    boxShadow: 'none',
-                }}
-                padding="3"
-            >
-                <Box
-                    width="100%"
-                    padding="3"
-                    borderRadius="50%"
-                    bgColor="black"
-                    opacity="0.6"
-                >
-                    <IconChevronLeft />
-                </Box>
-            </Button>
-            <Button
-                onClick={scrollNext}
-                width="16"
-                height="100%"
-                position="absolute"
-                right="0"
-                top="0"
-                bg="none"
-                borderRadius="0"
-                border="0"
-                _hover={{
-                    bg: 'none',
-                    border: 0,
-                }}
-                _focus={{
-                    boxShadow: 'none',
-                }}
-                padding="3"
-            >
-                <Box
-                    width="100%"
-                    padding="3"
-                    borderRadius="50%"
-                    bgColor="black"
-                    opacity="0.6"
-                >
-                    <IconChevronRight />
-                </Box>
-            </Button>
-            <Box
-                color="white"
-                borderRadius="1rem"
-                bgColor="black"
-                opacity="0.6"
-                paddingX={3}
-                paddingY={1}
-                fontSize="xs"
-                position="absolute"
-                bottom={3}
-                left="50%"
-                transform="translateX(-50%)"
-            >
-                {selectedIndex + 1}/{images.length}
-            </Box>
-        </Box>
-    );
-};
-
-ImageCarousel.propTypes = {
-    /** Array of images with src and alt */
-    images: PropTypes.arrayOf(
-        PropTypes.shape({
-            src: PropTypes.string.isRequired,
-            alt: PropTypes.string.isRequired,
-        })
-    ).isRequired,
-    /** Height of the carousel in rem */
-    height: PropTypes.number.isRequired,
-    /** Width of the carousel in rem */
-    width: PropTypes.number,
-};
-
-export default ImageCarousel;

package/styles/v2/components/ImageCarousel/ImageCarousel.spec.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-
-import ImageCarousel from './ImageCarousel';
-
-describe('ImageCarousel', () => {
-    it('displays an image without carousel buttons if only one image is present', () => {
-        render(
-            <ImageCarousel
-                width={40}
-                height={22.5}
-                images={[
-                    {
-                        src: 'https://via.placeholder.com/640x360',
-                        alt: 'A single image',
-                    },
-                ]}
-            />
-        );
-
-        expect(screen.getByRole('img')).toHaveAttribute(
-            'src',
-            'https://via.placeholder.com/640x360'
-        );
-        expect(screen.queryByRole('button')).toBeNull();
-    });
-
-    it('displays a carousel of images with next and previous buttons if multiple images are present', () => {
-        render(
-            <ImageCarousel
-                width={50}
-                height={30}
-                images={[
-                    {
-                        src: 'https://via.placeholder.com/640x360',
-                        alt: 'A very neat slide 1',
-                    },
-                    {
-                        src: 'https://via.placeholder.com/450x450',
-                        alt: 'A very neat slide 2',
-                    },
-                    {
-                        src: 'https://via.placeholder.com/290x780',
-                        alt: 'A very neat slide 3',
-                    },
-                ]}
-            />
-        );
-
-        expect(screen.queryAllByRole('img')).toHaveLength(3);
-        expect(screen.queryAllByRole('button')).toHaveLength(2);
-    });
-});

package/styles/v2/components/ImageCarousel/ImageCarousel.stories.js

@@ -1,71 +0,0 @@
-import React from 'react';
-import ImageCarousel from './ImageCarousel';
-import {Box} from '@chakra-ui/react';
-
-export default {
-    title: 'v2/ImageCarousel',
-    component: ImageCarousel,
-    parameters: {
-        removeBaseHtmlClass: true,
-        importBy: 'ImageCarousel',
-    },
-};
-
-const Template = props => <ImageCarousel {...props} />;
-
-const ParentTemplate = props => (
-    <Box borderWidth="1px" borderColor="gray.300" padding={4} width="100%">
-        <ImageCarousel {...props} />
-    </Box>
-);
-
-export const SingleImage = Template.bind({});
-SingleImage.args = {
-    width: 40,
-    height: 22.5,
-    images: [
-        {
-            src: 'https://via.placeholder.com/640x360',
-            alt: 'A very neat single slide',
-        },
-    ],
-};
-
-export const MultipleImages = Template.bind({});
-MultipleImages.args = {
-    width: 40,
-    height: 22.5,
-    images: [
-        {
-            src: 'https://via.placeholder.com/640x360',
-            alt: 'A very neat slide 1',
-        },
-        {
-            src: 'https://via.placeholder.com/450x450',
-            alt: 'A very neat slide 2',
-        },
-        {
-            src: 'https://via.placeholder.com/290x780',
-            alt: 'A very neat slide 3',
-        },
-    ],
-};
-
-export const ParentWidth = ParentTemplate.bind({});
-ParentWidth.args = {
-    height: 20,
-    images: [
-        {
-            src: 'https://via.placeholder.com/640x360',
-            alt: 'A very neat slide 1',
-        },
-        {
-            src: 'https://via.placeholder.com/450x450',
-            alt: 'A very neat slide 2',
-        },
-        {
-            src: 'https://via.placeholder.com/290x780',
-            alt: 'A very neat slide 3',
-        },
-    ],
-};