feat: new carousel component

package.json

@@ -108,7 +108,7 @@
     "@types/react-bootstrap": "^0.32.37",
     "@types/react-dom": "^18.2.24",
     "@types/react-transition-group": "^4.4.10",
-    "bootstrap-italia": "^2.13.4",
+    "bootstrap-italia": "^2.14.0",
     "browserslist-config-design-italia": "^1.0.0",
     "eslint": "^9.10.0",
     "eslint-plugin-mdx": "^3.1.5",
@@ -135,6 +135,8 @@
     "vite": "^5.2.7"
   },
   "dependencies": {
+    "@splidejs/react-splide": "^0.7.12",
+    "accessible-autocomplete": "^3.0.1",
     "classnames": "^2.3.1",
     "is-number": "^7.0.0",
     "react-bootstrap": "^2.10.6",

src/Carousel/Carousel.tsx

@@ -0,0 +1,210 @@
+import React, { FC } from 'react';
+import classNames from 'classnames';
+
+import {Splide, SplideProps} from '@splidejs/react-splide'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const CONFIG_DEFAULT: any = {
+  slideFocus: false,
+  rewind: true,
+  perMove: 1,
+  i18n: {
+    prev: 'Slide precedente',
+    next: 'Slide successiva',
+    first: 'Vai alla prima slide',
+    last: 'Vai all’ultima slide',
+    slideX: 'Vai alla slide %s',
+    pageX: 'Vai a pagina %s',
+    play: 'Attiva autoplay',
+    pause: 'Pausa autoplay',
+    carousel: 'Carosello',
+    select: 'Seleziona una slide da mostrare',
+    slide: 'slide',
+    slideLabel: '%s di %s',
+  },
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const CONFIGS: any= {
+  'landscape-three-cols': {
+    type: 'slide',
+    perPage: 3,
+    gap: 24,
+    padding: { left: 0, right: 0 },
+    arrows: false,
+    breakpoints: {
+      768: {
+        perPage: 1,
+        gap: 24,
+        padding: { left: 0, right: 0 },
+        arrows: false,
+      },
+      992: {
+        perPage: 2,
+        gap: 24,
+        padding: { left: 40, right: 40 },
+        arrows: false,
+      },
+    },
+  },
+  'landscape-three-cols-arrows': {
+    type: 'slide',
+    perPage: 3,
+    gap: 24,
+    padding: { left: 0, right: 0 },
+    arrows: true,
+    breakpoints: {
+      768: {
+        perPage: 1,
+        gap: 24,
+        padding: { left: 40, right: 40 },
+        arrows: true,
+      },
+      992: {
+        perPage: 2,
+        gap: 24,
+        padding: { left: 40, right: 40 },
+        arrows: true,
+      },
+    },
+  },
+  'big-image': {
+    type: 'loop',
+    perPage: 1,
+    gap: 48,
+    padding: { left: 320, right: 320 },
+    arrows: false,
+    breakpoints: {
+      768: {
+        perPage: 1,
+        gap: 0,
+        padding: { left: 0, right: 0 },
+        arrows: false,
+      },
+      992: {
+        perPage: 1,
+        gap: 24,
+        padding: { left: 160, right: 160 },
+        arrows: false,
+      },
+    },
+  },
+  'standard-image': {
+    type: 'loop',
+    perPage: 3,
+    gap: 24,
+    padding: { left: 48, right: 48 },
+    arrows: false,
+    breakpoints: {
+      768: {
+        perPage: 1,
+        gap: 24,
+        padding: { left: 40, right: 40 },
+        arrows: false,
+      },
+      992: {
+        perPage: 2,
+        gap: 24,
+        padding: { left: 48, right: 48 },
+        arrows: false,
+      },
+    },
+  },
+  'landscape': {
+    type: 'slide',
+    perPage: 1,
+    gap: 24,
+    padding: { left: 0, right: 0 },
+    arrows: false,
+    breakpoints: {
+      768: {
+        perPage: 1,
+        gap: 24,
+        padding: { left: 0, right: 0 },
+        arrows: false,
+      },
+      992: {
+        perPage: 1,
+        gap: 24,
+        padding: { left: 24, right: 24 },
+        arrows: false,
+      },
+    },
+  },
+  'calendar-wrapper': {
+    type: 'slide',
+    perPage: 4,
+    gap: 0,
+    padding: { left: 0, right: 0 },
+    arrows: false,
+    breakpoints: {
+      560: {
+        perPage: 1,
+        gap: 0,
+        padding: { left: 24, right: 24 },
+        arrows: false,
+      },
+      768: {
+        perPage: 2,
+        gap: 0,
+        padding: { left: 0, right: 0 },
+        arrows: false,
+      },
+      992: {
+        perPage: 3,
+        gap: 0,
+        padding: { left: 0, right: 0 },
+        arrows: false,
+      },
+    },
+  },
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const EXTRA_CLASSES: any= {
+  'landscape-three-cols': [
+    'it-carousel-landscape-abstract-three-cols'
+  ],
+  'landscape-three-cols-arrows': [
+    'it-carousel-landscape-abstract-three-cols-arrow-visible'
+  ],
+  'big-image': [
+    'it-carousel-landscape-abstract-three-cols',
+    'it-full-carousel',
+    'it-big-img'
+  ],
+  'standard-image': [
+    'it-carousel-landscape-abstract-three-cols',
+    'it-full-carousel',
+    'it-standard-image'
+  ],
+  'landscape': [
+    'it-carousel-landscape-abstract'
+  ],
+  'calendar-wrapper': [
+    'it-calendar-wrapper'
+  ]
+}
+
+export interface CarouselProps extends SplideProps {
+  type: string;
+  children?: React.ReactNode;
+}
+
+// Splide wrapper
+export const Carousel: FC<CarouselProps> = ({
+  className = '',
+  type,
+  children,
+  ...attributes
+}) => {
+  let conf = Object.assign({}, CONFIG_DEFAULT)
+  if (['big-image', 'standard-image'].includes(type)){
+    conf = Object.assign({}, conf, CONFIGS['landscape-three-cols'])
+  }
+  conf = Object.assign({}, conf, CONFIGS[type])
+  return <Splide
+    {...attributes}
+    className={classNames('it-carousel-wrapper', className, ...EXTRA_CLASSES[type])}
+    options={conf}>{children}</Splide>;
+};

src/Carousel/CarouselSlide.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {SplideSlide} from '@splidejs/react-splide'
+
+// Splide wrapper
+export const CarouselSlide: React.FC<JSX.IntrinsicElements['li']> = ({
+  children,
+}) => {
+
+  return <SplideSlide>
+    <div className='it-single-slide-wrapper'>
+      {children}
+    </div>
+  </SplideSlide>;
+};

src/index.ts

@@ -79,6 +79,8 @@ export { CardTag } from './Card/CardTag';
 export { CardTagsHeader } from './Card/CardTagsHeader';
 export { CardText } from './Card/CardText';
 export { CardTitle } from './Card/CardTitle';
+export { Carousel } from './Carousel/Carousel';
+export { CarouselSlide } from './Carousel/CarouselSlide';
 export { Chip } from './Chips/Chip';
 export { ChipLabel } from './Chips/ChipLabel';
 export { Collapse } from './Collapse/Collapse';
@@ -178,6 +180,7 @@ export type { CardTagProps } from './Card/CardTag';
 export type { CardTagsHeaderProps } from './Card/CardTagsHeader';
 export type { CardTextProps } from './Card/CardText';
 export type { CardTitleProps } from './Card/CardTitle';
+export type { CarouselProps } from './Carousel/Carousel';
 export type { ChipProps } from './Chips/Chip';
 export type { ChipLabelProps } from './Chips/ChipLabel';
 export type { DimmerProps } from './Dimmer/Dimmer';