fix(Slider): rename Slider component to Carousel (#2213)

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',

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>
+)

packages/ui/src/components/Slider/__stories__/index.stories.tsx → 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'

packages/ui/src/components/Slider/__tests__/__snapshots__/index.tsx.snap → 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>

packages/ui/src/components/Slider/__tests__/index.tsx → 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(

packages/ui/src/components/Slider/index.tsx → 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

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'

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,