From bd44e780151b16192032c9311d25dca486699e43 Mon Sep 17 00:00:00 2001
From: BABAK0T0 <nrandrianarivo@scaleway.com>
Date: Mon, 23 Jan 2023 10:40:03 +0100
Subject: [PATCH] fix(Slider): rename Slider component to Carousel (#2213)

---
 packages/ui/src/__tests__/a11y.test.tsx       |  2 +-
 .../__stories__/Playground.stories.tsx        |  0
 .../Carousel/__stories__/Template.stories.tsx | 13 +++++++
 .../__stories__/index.stories.tsx             | 10 +++---
 .../__tests__/__snapshots__/index.tsx.snap    | 22 ++++++------
 .../{Slider => Carousel}/__tests__/index.tsx  | 36 +++++++++----------
 .../components/{Slider => Carousel}/index.tsx | 13 ++++---
 .../Slider/__stories__/Template.stories.tsx   | 13 -------
 packages/ui/src/components/index.ts           |  2 +-
 packages/ui/src/index.ts                      |  2 +-
 10 files changed, 58 insertions(+), 55 deletions(-)
 rename packages/ui/src/components/{Slider => Carousel}/__stories__/Playground.stories.tsx (100%)
 create mode 100644 packages/ui/src/components/Carousel/__stories__/Template.stories.tsx
 rename packages/ui/src/components/{Slider => Carousel}/__stories__/index.stories.tsx (62%)
 rename packages/ui/src/components/{Slider => Carousel}/__tests__/__snapshots__/index.tsx.snap (77%)
 rename packages/ui/src/components/{Slider => Carousel}/__tests__/index.tsx (51%)
 rename packages/ui/src/components/{Slider => Carousel}/index.tsx (94%)
 delete mode 100644 packages/ui/src/components/Slider/__stories__/Template.stories.tsx

diff --git a/packages/ui/src/__tests__/a11y.test.tsx b/packages/ui/src/__tests__/a11y.test.tsx
index 39282d1a6e..61f5a6c8da 100644
--- a/packages/ui/src/__tests__/a11y.test.tsx
+++ b/packages/ui/src/__tests__/a11y.test.tsx
@@ -14,11 +14,11 @@ const testedComponents = [
   'Badge',
   'Bullet',
   'Button',
+  'Carousel',
   'Checkbox',
   'MarkDown',
   'Placeholder',
   'Separator',
-  'Slider',
   'Sphere',
   'Stack',
   'Status',
diff --git a/packages/ui/src/components/Slider/__stories__/Playground.stories.tsx b/packages/ui/src/components/Carousel/__stories__/Playground.stories.tsx
similarity index 100%
rename from packages/ui/src/components/Slider/__stories__/Playground.stories.tsx
rename to packages/ui/src/components/Carousel/__stories__/Playground.stories.tsx
diff --git a/packages/ui/src/components/Carousel/__stories__/Template.stories.tsx b/packages/ui/src/components/Carousel/__stories__/Template.stories.tsx
new file mode 100644
index 0000000000..abc278ea03
--- /dev/null
+++ b/packages/ui/src/components/Carousel/__stories__/Template.stories.tsx
@@ -0,0 +1,13 @@
+import type { ComponentStory } from '@storybook/react'
+import { Carousel } from '..'
+
+export const Template: ComponentStory<typeof Carousel> = props => (
+  <Carousel {...props}>
+    <Carousel.Item>Item 1</Carousel.Item>
+    <Carousel.Item>Item 2</Carousel.Item>
+    <Carousel.Item>Item 3</Carousel.Item>
+    <Carousel.Item>Item 4</Carousel.Item>
+    <Carousel.Item>Item 5</Carousel.Item>
+    <Carousel.Item>Item 6</Carousel.Item>
+  </Carousel>
+)
diff --git a/packages/ui/src/components/Slider/__stories__/index.stories.tsx b/packages/ui/src/components/Carousel/__stories__/index.stories.tsx
similarity index 62%
rename from packages/ui/src/components/Slider/__stories__/index.stories.tsx
rename to packages/ui/src/components/Carousel/__stories__/index.stories.tsx
index 7e524d7524..6155f36330 100644
--- a/packages/ui/src/components/Slider/__stories__/index.stories.tsx
+++ b/packages/ui/src/components/Carousel/__stories__/index.stories.tsx
@@ -1,8 +1,8 @@
 import type { ComponentMeta } from '@storybook/react'
-import { Slider, SliderItem } from '..'
+import { Carousel, CarouselItem } from '..'
 
 export default {
-  component: Slider,
+  component: Carousel,
   parameters: {
     docs: {
       description: {
@@ -11,8 +11,8 @@ export default {
       },
     },
   },
-  title: 'Components/Data Display/Slider',
-  subcomponents: { SliderItem },
-} as ComponentMeta<typeof Slider>
+  title: 'Components/Data Display/Carousel',
+  subcomponents: { CarouselItem },
+} as ComponentMeta<typeof Carousel>
 
 export { Playground } from './Playground.stories'
diff --git a/packages/ui/src/components/Slider/__tests__/__snapshots__/index.tsx.snap b/packages/ui/src/components/Carousel/__tests__/__snapshots__/index.tsx.snap
similarity index 77%
rename from packages/ui/src/components/Slider/__tests__/__snapshots__/index.tsx.snap
rename to packages/ui/src/components/Carousel/__tests__/__snapshots__/index.tsx.snap
index b42dddb4ab..215091a8b0 100644
--- a/packages/ui/src/components/Slider/__tests__/__snapshots__/index.tsx.snap
+++ b/packages/ui/src/components/Carousel/__tests__/__snapshots__/index.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Slider renders correctly with default props 1`] = `
+exports[`Carousel renders correctly with default props 1`] = `
 <DocumentFragment>
   .cache-vz5p1b-StyledWrapper {
   position: relative;
@@ -78,54 +78,54 @@ exports[`Slider renders correctly with default props 1`] = `
 }
 
 <div
-    class="cache-vz5p1b-StyledWrapper eex9ttu4"
+    class="cache-vz5p1b-StyledWrapper eam0u74"
   >
     <span
-      class="cache-qrxupe-StyledBeforeScroll eex9ttu3"
+      class="cache-qrxupe-StyledBeforeScroll eam0u73"
       data-testid="scrollbar-before"
     />
     <div
-      class="cache-1khe6nh-StyledScrollableWrapper eex9ttu2"
+      class="cache-1khe6nh-StyledScrollableWrapper eam0u72"
     >
       <div
-        class="cache-5lqo8q-StyledBorderWrapper eex9ttu0"
+        class="cache-5lqo8q-StyledBorderWrapper eam0u70"
         draggable="true"
       >
         Item 1
       </div>
       <div
-        class="cache-5lqo8q-StyledBorderWrapper eex9ttu0"
+        class="cache-5lqo8q-StyledBorderWrapper eam0u70"
         draggable="true"
       >
         Item 2
       </div>
       <div
-        class="cache-5lqo8q-StyledBorderWrapper eex9ttu0"
+        class="cache-5lqo8q-StyledBorderWrapper eam0u70"
         draggable="true"
       >
         Item 3
       </div>
       <div
-        class="cache-5lqo8q-StyledBorderWrapper eex9ttu0"
+        class="cache-5lqo8q-StyledBorderWrapper eam0u70"
         draggable="true"
       >
         Item 4
       </div>
       <div
-        class="cache-5lqo8q-StyledBorderWrapper eex9ttu0"
+        class="cache-5lqo8q-StyledBorderWrapper eam0u70"
         draggable="true"
       >
         Item 5
       </div>
       <div
-        class="cache-5lqo8q-StyledBorderWrapper eex9ttu0"
+        class="cache-5lqo8q-StyledBorderWrapper eam0u70"
         draggable="true"
       >
         Item 6
       </div>
     </div>
     <span
-      class="cache-w86y5s-StyledAfterScroll eex9ttu1"
+      class="cache-w86y5s-StyledAfterScroll eam0u71"
       data-testid="scrollbar-after"
     />
   </div>
diff --git a/packages/ui/src/components/Slider/__tests__/index.tsx b/packages/ui/src/components/Carousel/__tests__/index.tsx
similarity index 51%
rename from packages/ui/src/components/Slider/__tests__/index.tsx
rename to packages/ui/src/components/Carousel/__tests__/index.tsx
index c12b841f94..4f40680bb9 100644
--- a/packages/ui/src/components/Slider/__tests__/index.tsx
+++ b/packages/ui/src/components/Carousel/__tests__/index.tsx
@@ -1,34 +1,34 @@
 import { act } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
-import { Slider } from '..'
+import { Carousel } from '..'
 import {
   renderWithTheme,
   shouldMatchEmotionSnapshot,
 } from '../../../../.jest/helpers'
 
-describe('Slider', () => {
+describe('Carousel', () => {
   test(`renders correctly with default props`, () =>
     shouldMatchEmotionSnapshot(
-      <Slider>
-        <Slider.Item>Item 1</Slider.Item>
-        <Slider.Item>Item 2</Slider.Item>
-        <Slider.Item>Item 3</Slider.Item>
-        <Slider.Item>Item 4</Slider.Item>
-        <Slider.Item>Item 5</Slider.Item>
-        <Slider.Item>Item 6</Slider.Item>
-      </Slider>,
+      <Carousel>
+        <Carousel.Item>Item 1</Carousel.Item>
+        <Carousel.Item>Item 2</Carousel.Item>
+        <Carousel.Item>Item 3</Carousel.Item>
+        <Carousel.Item>Item 4</Carousel.Item>
+        <Carousel.Item>Item 5</Carousel.Item>
+        <Carousel.Item>Item 6</Carousel.Item>
+      </Carousel>,
     ))
 
   test('check hover state on scrollbar', async () => {
     const container = renderWithTheme(
-      <Slider>
-        <Slider.Item>Item 1</Slider.Item>
-        <Slider.Item>Item 2</Slider.Item>
-        <Slider.Item>Item 3</Slider.Item>
-        <Slider.Item>Item 4</Slider.Item>
-        <Slider.Item>Item 5</Slider.Item>
-        <Slider.Item>Item 6</Slider.Item>
-      </Slider>,
+      <Carousel>
+        <Carousel.Item>Item 1</Carousel.Item>
+        <Carousel.Item>Item 2</Carousel.Item>
+        <Carousel.Item>Item 3</Carousel.Item>
+        <Carousel.Item>Item 4</Carousel.Item>
+        <Carousel.Item>Item 5</Carousel.Item>
+        <Carousel.Item>Item 6</Carousel.Item>
+      </Carousel>,
     )
 
     const scrollbarBefore = container.getByTestId(
diff --git a/packages/ui/src/components/Slider/index.tsx b/packages/ui/src/components/Carousel/index.tsx
similarity index 94%
rename from packages/ui/src/components/Slider/index.tsx
rename to packages/ui/src/components/Carousel/index.tsx
index 439cfcdb67..771dd1dfe4 100644
--- a/packages/ui/src/components/Slider/index.tsx
+++ b/packages/ui/src/components/Carousel/index.tsx
@@ -75,19 +75,22 @@ const StyledBorderWrapper = styled.div`
   }
 `
 
-type SliderItemProps = {
+type CarouselItemProps = {
   children: ReactNode
 }
-export const SliderItem = ({ children }: SliderItemProps): JSX.Element => (
+export const CarouselItem = ({ children }: CarouselItemProps): JSX.Element => (
   <StyledBorderWrapper draggable="true">{children}</StyledBorderWrapper>
 )
 
-type SliderProps = {
+type CarouselProps = {
   className?: string
   children?: ReactNode
 }
 
-export const Slider = ({ children, className }: SliderProps): JSX.Element => {
+export const Carousel = ({
+  children,
+  className,
+}: CarouselProps): JSX.Element => {
   const scrollRef = useRef<HTMLDivElement>(null)
   let intervalLeft: ReturnType<typeof setInterval>
   let intervalRight: ReturnType<typeof setInterval>
@@ -165,4 +168,4 @@ export const Slider = ({ children, className }: SliderProps): JSX.Element => {
   )
 }
 
-Slider.Item = SliderItem
+Carousel.Item = CarouselItem
diff --git a/packages/ui/src/components/Slider/__stories__/Template.stories.tsx b/packages/ui/src/components/Slider/__stories__/Template.stories.tsx
deleted file mode 100644
index d50e7f5f31..0000000000
--- a/packages/ui/src/components/Slider/__stories__/Template.stories.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import type { ComponentStory } from '@storybook/react'
-import { Slider } from '..'
-
-export const Template: ComponentStory<typeof Slider> = props => (
-  <Slider {...props}>
-    <Slider.Item>Item 1</Slider.Item>
-    <Slider.Item>Item 2</Slider.Item>
-    <Slider.Item>Item 3</Slider.Item>
-    <Slider.Item>Item 4</Slider.Item>
-    <Slider.Item>Item 5</Slider.Item>
-    <Slider.Item>Item 6</Slider.Item>
-  </Slider>
-)
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 956f17e79f..a37ca49436 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -40,7 +40,7 @@ export { ScrollView } from './ScrollView'
 export { SelectableCard } from './SelectableCard'
 export { SelectNumber } from './SelectNumber'
 export { Separator } from './Separator'
-export { Slider } from './Slider'
+export { Carousel } from './Carousel'
 export { Snippet } from './Snippet'
 export { Sphere } from './Sphere'
 export { Stack } from './Stack'
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 1b378ac56f..193481c6cc 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -9,6 +9,7 @@ export {
   Breadcrumbs,
   Bullet,
   Button,
+  Carousel,
   Checkbox,
   Container,
   Stepper,
@@ -43,7 +44,6 @@ export {
   SelectableCard,
   SelectNumber,
   Separator,
-  Slider,
   Sphere,
   Stack,
   StateBar,