@hero-design/rn 8.86.0 → 8.87.1-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hero-design/rn
 
+## 8.87.1
+
+### Patch Changes
+
+- [#3619](https://github.com/Thinkei/hero-design/pull/3619) [`88bfafcf9fc3dcaea7fd5ce14c29c03f3b9e80d2`](https://github.com/Thinkei/hero-design/commit/88bfafcf9fc3dcaea7fd5ce14c29c03f3b9e80d2) Thanks [@sonnguyen-eh](https://github.com/sonnguyen-eh)! - Bump hero-editor to 1.15.4, create new events and expose new functions in RichTextEditor
+
+## 8.87.0
+
+### Minor Changes
+
+- [#3620](https://github.com/Thinkei/hero-design/pull/3620) [`5a7779f2a1283c746bd918e5f3fd35fec8471369`](https://github.com/Thinkei/hero-design/commit/5a7779f2a1283c746bd918e5f3fd35fec8471369) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Carousel.Card] Support gap prop
+
 ## 8.86.0
 
 ### Minor Changes

package/es/index.js

@@ -2644,8 +2644,12 @@ var getCarouselTheme = function getCarouselTheme(theme) {
 var getCardCarouselTheme = function getCardCarouselTheme(theme) {
   var space = {
     pageControlMarginTop: theme.space.medium,
-    carouselItemSpacing: theme.space.small,
-    contentContainerPaddingHorizontal: theme.space.large
+    contentContainerPaddingHorizontal: theme.space.large,
+    carouselItemSpacing: {
+      xsmall: theme.space.xxsmall,
+      small: theme.space.xsmall,
+      medium: theme.space.small
+    }
   };
   var colors = {
     carouselItemBackground: theme.colors.defaultSurface
@@ -13157,9 +13161,10 @@ var StyledCard = index$a(Card$1)(function (_ref2) {
   };
 });
 var StyledItemWrapper = index$a(View)(function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref3.theme,
+    themeGap = _ref3.themeGap;
   return {
-    padding: theme.__hd__.cardCarousel.space.carouselItemSpacing
+    padding: theme.__hd__.cardCarousel.space.carouselItemSpacing[themeGap]
   };
 });
 
@@ -13187,7 +13192,9 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
     autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
     _ref$autoPlayInterval = _ref.autoPlayInterval,
     autoPlayInterval = _ref$autoPlayInterval === void 0 ? 3000 : _ref$autoPlayInterval,
-    onLayout = _ref.onLayout;
+    onLayout = _ref.onLayout,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 'medium' : _ref$gap;
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
@@ -13271,11 +13278,12 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var renderItem = useCallback(function (_ref3) {
     var item = _ref3.item;
     return /*#__PURE__*/React__default.createElement(StyledItemWrapper, {
+      themeGap: gap,
       style: {
         width: itemWidth
       }
     }, /*#__PURE__*/React__default.createElement(StyledCard, null, item));
-  }, [itemWidth]);
+  }, [itemWidth, gap]);
   var contentContainerPaddingHorizontal = theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal;
   return /*#__PURE__*/React__default.createElement(StyledWrapper$9, {
     style: style,

package/lib/index.js

@@ -2672,8 +2672,12 @@ var getCarouselTheme = function getCarouselTheme(theme) {
 var getCardCarouselTheme = function getCardCarouselTheme(theme) {
   var space = {
     pageControlMarginTop: theme.space.medium,
-    carouselItemSpacing: theme.space.small,
-    contentContainerPaddingHorizontal: theme.space.large
+    contentContainerPaddingHorizontal: theme.space.large,
+    carouselItemSpacing: {
+      xsmall: theme.space.xxsmall,
+      small: theme.space.xsmall,
+      medium: theme.space.small
+    }
   };
   var colors = {
     carouselItemBackground: theme.colors.defaultSurface
@@ -13185,9 +13189,10 @@ var StyledCard = index$a(Card$1)(function (_ref2) {
   };
 });
 var StyledItemWrapper = index$a(reactNative.View)(function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref3.theme,
+    themeGap = _ref3.themeGap;
   return {
-    padding: theme.__hd__.cardCarousel.space.carouselItemSpacing
+    padding: theme.__hd__.cardCarousel.space.carouselItemSpacing[themeGap]
   };
 });
 
@@ -13215,7 +13220,9 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
     _ref$autoPlayInterval = _ref.autoPlayInterval,
     autoPlayInterval = _ref$autoPlayInterval === void 0 ? 3000 : _ref$autoPlayInterval,
-    onLayout = _ref.onLayout;
+    onLayout = _ref.onLayout,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 'medium' : _ref$gap;
   var _useState = React.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     currentIndex = _useState2[0],
@@ -13299,11 +13306,12 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var renderItem = React.useCallback(function (_ref3) {
     var item = _ref3.item;
     return /*#__PURE__*/React__namespace.default.createElement(StyledItemWrapper, {
+      themeGap: gap,
       style: {
         width: itemWidth
       }
     }, /*#__PURE__*/React__namespace.default.createElement(StyledCard, null, item));
-  }, [itemWidth]);
+  }, [itemWidth, gap]);
   var contentContainerPaddingHorizontal = theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal;
   return /*#__PURE__*/React__namespace.default.createElement(StyledWrapper$9, {
     style: style,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.86.0",
+  "version": "8.87.1-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

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();
   });
 });