[BD-8468][BpkCarousel] new component for mobile

examples/bpk-component-carousel/example.js

@@ -0,0 +1,34 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BpkCarousel from '../../packages/bpk-component-carousel'
+
+const imageUrls = [
+  "https://content.skyscnr.com/m/7470cf6a4ee49c26/original/Carousel-placeholder-4.jpg",
+  "https://content.skyscnr.com/m/183e7ddaaca13b16/original/Carousel-placeholder-2.jpg",
+  "https://content.skyscnr.com/m/f8b42e98e2b79a6/original/Carousel-placeholder-3.jpg",
+  "https://content.skyscnr.com/m/51c4c9dd04c8dc95/original/Carousel-placeholder-1.jpg",
+]
+
+const imagesList = imageUrls.map(url => <div><img src={url} alt='hotel bedroom' /></div>)
+
+const DefaultExample = () => (
+  <BpkCarousel images={imagesList} bottom={16} />
+);
+
+export default DefaultExample

examples/bpk-component-carousel/stories.js

@@ -0,0 +1,35 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BpkCarousel from '../../packages/bpk-component-carousel'
+
+import DefaultExample from './example'
+
+export default {
+  title: 'bpk-component-carousel',
+  component: BpkCarousel,
+};
+
+
+export const Default = DefaultExample;
+
+export const VisualTest = DefaultExample;
+export const VisualTestWithZoom = VisualTest.bind({});
+VisualTestWithZoom.args = {
+  zoomEnabled: true
+};

packages/bpk-component-carousel/README.md

@@ -0,0 +1,28 @@
+# bpk-component-carousel
+
+> Backpack carousel component.
+
+## Description
+This component is used to display images in the form of a carousel, users can browse through images by swipe. It only works on mobile.
+
+## Installation
+
+Check the main [Readme](https://github.com/skyscanner/backpack#usage) for a complete installation guide.
+
+## Usage
+
+```tsx
+import BpkCarousel from '@skyscanner/backpack-web/bpk-component-carousel';
+
+const imageChangeHandler = () => {
+  console.log('Image Changed')
+}
+
+export default () => (
+  <BpkCarousel
+    images={[ <img src="https://url/1_WxH.jpg" alt='image' />]}
+    initialImageIndex={2}
+    onImageChanged={imageChangeHandler}
+  />
+  );
+```

packages/bpk-component-carousel/index.ts

@@ -0,0 +1,21 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2016 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import BpkCarousel from "./src/BpkCarousel";
+
+export default BpkCarousel

packages/bpk-component-carousel/src/BpkCarousel-test.tsx

@@ -0,0 +1,93 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { ReactNode } from 'react';
+
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+
+import BpkCarousel from './BpkCarousel';
+
+
+describe('BpkCarousel', () => {
+  let images: ReactNode[]
+
+  const DemoImages = () => (
+    <img src="http://content.skyscnr.com/available/949043373/949043373_343x132.jpg" alt='hotel bedroom' />
+  )
+
+  function generateDemoImages(count: number) {
+    return Array.from({ length: count }, (_, i) => (<DemoImages />));
+  }
+
+  type TestCase = [
+    expectedCount: 7 | 5 | 4 | 12,
+    actualCount: number,
+    props: React.ComponentProps<typeof BpkCarousel>,
+  ];
+
+  beforeAll(() => {
+
+    window.HTMLElement.prototype.scrollIntoView = jest.fn();
+
+    (window as any).IntersectionObserver = class IntersectionObserver {
+      observe = jest.fn();
+
+      disconnect = jest.fn();
+
+      unobserve = jest.fn();
+    };
+    images = [<DemoImages />, <DemoImages />, <DemoImages />, <DemoImages />, <DemoImages />];
+  });
+
+  it('should render correctly', () => {
+    render(<BpkCarousel images={images} />);
+
+    expect(screen.getAllByRole('listitem').length).toBe(7);
+    expect(document.querySelectorAll('.bpk-page-indicator__indicator').length).toBe(
+      5,
+    );
+    expect(document.querySelector('.bpk-carousel__page-indicator-over-image')).toBeTruthy();
+  });
+
+  it.each<TestCase>([
+    [12, 10, { images: generateDemoImages(10) }],
+    [7, 5, { images: generateDemoImages(5) }],
+    [5, 3, { images: generateDemoImages(3) }],
+    [4, 2, { images: generateDemoImages(2) }],
+  ])(
+    'renders %i image(s) when there are %i image(s) available',
+    (expectedCount, actualCount, props) => {
+      render(<BpkCarousel {...props} />);
+
+      expect(screen.getByTestId('image-gallery-scroll-container').childElementCount).toBe(expectedCount);
+    },
+  );
+
+  it('renders only one image when only one available (no fake images for the infinite scroll)', async () => {
+    render(<BpkCarousel images={[images[0]]} />);
+
+    expect(screen.getByTestId('image-gallery-scroll-container').childElementCount).toBe(1);
+  });
+
+  it('should render costom bottom', async () => {
+    render(<BpkCarousel images={images} bottom={48} />);
+
+    expect(screen.getByTestId('carousel-page-indicator-container')).toHaveStyle({bottom: '48px'});
+  });
+});

packages/bpk-component-carousel/src/BpkCarousel.module.scss

@@ -0,0 +1,34 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@use '../../unstable__bpk-mixins/tokens';
+
+.bpk-carousel {
+  position: relative;
+
+  &__page-indicator-over-image {
+    position: absolute;
+    right: 0;
+    bottom: tokens.bpk-spacing-sm();
+    left: 0;
+    display: flex;
+    margin: auto tokens.bpk-spacing-base();
+    justify-content: center;
+    overflow: clip;
+  }
+}

packages/bpk-component-carousel/src/BpkCarousel.tsx

@@ -0,0 +1,73 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useRef, useState } from 'react';
+
+// @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
+import BpkPageIndicator, { VARIANT } from '../../bpk-component-page-indicator';
+import { cssModules } from '../../bpk-react-utils';
+
+import BpkCarouselContainer from './BpkCarouselContainer';
+import { useScrollToInitialImage } from './utils';
+
+import type { Props } from './types';
+
+import STYLES from './BpkCarousel.module.scss';
+
+const getClassName = cssModules(STYLES);
+
+const BpkCarousel = ({
+  bottom,
+  images,
+  initialImageIndex = 0,
+  onImageChanged = null,
+}: Props) => {
+  const [shownImageIndex, updateShownImageIndex] = useState(initialImageIndex);
+  const imagesRef = useRef<Array<HTMLElement | null>>([]);
+
+  useScrollToInitialImage(initialImageIndex!, imagesRef);
+
+  return (
+    <div className={getClassName('bpk-carousel')}>
+      <BpkCarouselContainer
+        images={images}
+        onVisible={updateShownImageIndex}
+        imagesRef={imagesRef}
+        onImageChanged={onImageChanged}
+      />
+      <div
+        className={getClassName('bpk-carousel__page-indicator-over-image')}
+        style={bottom ? {
+          bottom
+        } : undefined}
+        data-testid="carousel-page-indicator-container"
+      >
+        <BpkPageIndicator
+          currentIndex={shownImageIndex}
+          totalIndicators={images.length}
+          variant={VARIANT.overImage}
+          indicatorLabel="Go to slide"
+          prevNavLabel="Previous slide"
+          nextNavLabel="Next slide"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default BpkCarousel;

packages/bpk-component-carousel/src/BpkCarouselContainer.module.scss

@@ -0,0 +1,35 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2022 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.bpk-carousel-container {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  grid: 1fr / auto-flow 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  backface-visibility: hidden;
+  overscroll-behavior: contain;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  user-select: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}