@hero-design/rn 8.85.0 → 8.87.1

package/src/components/Carousel/CardCarousel.tsx

@@ -65,6 +65,10 @@ export interface CardCarouselProps {
    * onLayout event handler.
    */
   onLayout?: (event: LayoutChangeEvent) => void;
+  /**
+   * Gap between items.
+   */
+  gap?: 'xsmall' | 'small' | 'medium';
 }
 
 export const getCardCarouselValidIndex = (index: number, length: number) => {
@@ -82,6 +86,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       autoPlay = false,
       autoPlayInterval = 3000,
       onLayout,
+      gap = 'medium',
     }: CardCarouselProps,
     ref?: React.Ref<CardCarouselHandles>
   ) => {
@@ -181,12 +186,12 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
     const renderItem: ListRenderItem<React.ReactNode> = useCallback(
       ({ item }) => {
         return (
-          <StyledItemWrapper style={{ width: itemWidth }}>
+          <StyledItemWrapper themeGap={gap} style={{ width: itemWidth }}>
             <StyledCard>{item}</StyledCard>
           </StyledItemWrapper>
         );
       },
-      [itemWidth]
+      [itemWidth, gap]
     );
 
     const { contentContainerPaddingHorizontal } =

package/src/components/Carousel/StyledCardCarousel.tsx

@@ -18,8 +18,12 @@ const StyledCard = styled(Card)<CardProps>(({ theme }) => ({
   flex: 1,
 }));
 
-const StyledItemWrapper = styled(View)<ViewProps>(({ theme }) => ({
-  padding: theme.__hd__.cardCarousel.space.carouselItemSpacing,
+const StyledItemWrapper = styled(View)<
+  ViewProps & {
+    themeGap: 'xsmall' | 'small' | 'medium';
+  }
+>(({ theme, themeGap }) => ({
+  padding: theme.__hd__.cardCarousel.space.carouselItemSpacing[themeGap],
 }));
 
 export { StyledCard, StyledItemWrapper, StyledWrapper, StyledPageControl };

package/src/components/Carousel/__tests__/CardCarousel.spec.tsx

@@ -112,7 +112,7 @@ describe('CardCarousel', () => {
     beforeAll(() => {
       Platform.OS = 'android';
     });
-    it('should render correctly on iOS', () => {
+    it('should render correctly on Android', () => {
       const wrapper = renderWithTheme(
         <CardCarousel
           testID="cardCarousel"
@@ -209,4 +209,31 @@ describe('CardCarousel', () => {
       });
     });
   });
+
+  describe('gap', () => {
+    it.each`
+      gap         | platform
+      ${'xsmall'} | ${'ios'}
+      ${'small'}  | ${'ios'}
+      ${'medium'} | ${'ios'}
+      ${'xsmall'} | ${'android'}
+      ${'small'}  | ${'android'}
+      ${'medium'} | ${'android'}
+    `('renders correctly with gap $gap', ({ gap, platform }) => {
+      Platform.OS = platform;
+      const wrapper = renderWithTheme(
+        <CardCarousel
+          testID="cardCarousel"
+          style={{ width: 100, height: 100 }}
+          gap={gap}
+          items={[
+            <Typography.Body variant="small"> screen 1</Typography.Body>,
+            <Typography.Body variant="small"> screen 2</Typography.Body>,
+          ]}
+        />
+      );
+
+      expect(wrapper.toJSON()).toMatchSnapshot();
+    });
+  });
 });

package/src/components/Carousel/__tests__/StyledCardCarousel.spec.tsx

@@ -31,8 +31,13 @@ describe('StyledCard', () => {
 });
 
 describe('StyledItemWrapper', () => {
-  it('should render correctly', () => {
-    const { toJSON } = renderWithTheme(<StyledItemWrapper />);
+  it.each`
+    gap
+    ${'xsmall'}
+    ${'small'}
+    ${'medium'}
+  `('should render correctly with gap=$gap', ({ gap }) => {
+    const { toJSON } = renderWithTheme(<StyledItemWrapper themeGap={gap} />);
     expect(toJSON()).toMatchSnapshot();
   });
 });