@hero-design/rn 8.6.1 → 8.8.0

package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap

@@ -551,9 +551,622 @@ exports[`Carousel renders basic carousel 1`] = `
             Object {
               "alignItems": "center",
               "flexDirection": "row",
-              "marginStart": "auto",
             },
-            undefined,
+            Array [
+              Object {
+                "marginStart": "auto",
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "marginHorizontal": 8,
+              "opacity": 1,
+              "width": 24,
+            }
+          }
+          testID="page-control-indicator0"
+        />
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "marginHorizontal": 8,
+              "opacity": 0.5,
+              "width": 8,
+            }
+          }
+          testID="page-control-indicator1"
+        />
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "marginHorizontal": 8,
+              "opacity": 0.5,
+              "width": 8,
+            }
+          }
+          testID="page-control-indicator2"
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Carousel should call skip call back when press skip 1`] = `
+<View
+  testID="carousel"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "backgroundColor": "#ece8ef",
+          "bottom": 0,
+          "left": 0,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+    themeSlideBackground="#ece8ef"
+  />
+  <View
+    style={
+      Array [
+        Object {
+          "flexGrow": 2,
+          "justifyContent": "space-between",
+        },
+        undefined,
+      ]
+    }
+  >
+    <RCTScrollView
+      bounces={false}
+      data={
+        Array [
+          Object {
+            "background": "#ece8ef",
+            "body": "Access your Work, Money and Benefits in the palm of your hand.",
+            "heading": "Welcome to the new Employment Hero app",
+            "image": "https://picsum.photos/800/1200",
+          },
+          Object {
+            "background": "#ccd2d3",
+            "body": "Our app now has a new bright clean modern look and feel with the same great features.",
+            "content": <Image
+              source={
+                Object {
+                  "uri": "https://picsum.photos/30",
+                }
+              }
+            />,
+            "heading": "Same app with a new look!",
+            "image": "https://picsum.photos/800/1200",
+          },
+          Object {
+            "background": "#ccd2d3",
+            "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.",
+            "heading": "Easier to get around",
+            "image": "https://picsum.photos/800/1200",
+          },
+        ]
+      }
+      getItem={[Function]}
+      getItemCount={[Function]}
+      horizontal={true}
+      keyExtractor={[Function]}
+      onContentSizeChange={[Function]}
+      onLayout={[Function]}
+      onMomentumScrollBegin={[Function]}
+      onMomentumScrollEnd={[Function]}
+      onScroll={[Function]}
+      onScrollBeginDrag={[Function]}
+      onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
+      pagingEnabled={true}
+      removeClippedSubviews={false}
+      renderItem={[Function]}
+      scrollEventThrottle={32}
+      showsHorizontalScrollIndicator={false}
+      stickyHeaderIndices={Array []}
+      viewabilityConfig={
+        Object {
+          "viewAreaCoveragePercentThreshold": 50,
+        }
+      }
+      viewabilityConfigCallbackPairs={
+        Array [
+          Object {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": Object {
+              "viewAreaCoveragePercentThreshold": 50,
+            },
+          },
+        ]
+      }
+    >
+      <View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {},
+                Object {
+                  "width": 750,
+                },
+              ]
+            }
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://picsum.photos/800/1200",
+                }
+              }
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 0,
+                    "height": 72,
+                    "width": 72,
+                  },
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "resizeMode": "contain",
+                      "width": "100%",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            />
+            <View
+              marginTop="large"
+              paddingHorizontal="large"
+              style={
+                Array [
+                  Object {
+                    "marginTop": 24,
+                    "paddingHorizontal": 24,
+                  },
+                  Array [
+                    Object {
+                      "minHeight": 250,
+                      "width": 750,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={750}
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Array [
+                      Object {
+                        "fontFamily": "RebondGrotesque-SemiBold",
+                        "fontSize": 32,
+                        "lineHeight": 44,
+                        "marginBottom": 16,
+                        "marginTop": 8,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Welcome to the new Employment Hero app
+              </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Access your Work, Money and Benefits in the palm of your hand.
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {},
+                Object {
+                  "width": 750,
+                },
+              ]
+            }
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://picsum.photos/800/1200",
+                }
+              }
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 0,
+                    "height": 72,
+                    "width": 72,
+                  },
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "resizeMode": "contain",
+                      "width": "100%",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            />
+            <View
+              marginTop="large"
+              paddingHorizontal="large"
+              style={
+                Array [
+                  Object {
+                    "marginTop": 24,
+                    "paddingHorizontal": 24,
+                  },
+                  Array [
+                    Object {
+                      "minHeight": 250,
+                      "width": 750,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={750}
+            >
+              <Image
+                source={
+                  Object {
+                    "uri": "https://picsum.photos/30",
+                  }
+                }
+                style={
+                  Array [
+                    Object {
+                      "borderRadius": 0,
+                      "height": 72,
+                      "width": 72,
+                    },
+                    undefined,
+                  ]
+                }
+              />
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Array [
+                      Object {
+                        "fontFamily": "RebondGrotesque-SemiBold",
+                        "fontSize": 32,
+                        "lineHeight": 44,
+                        "marginBottom": 16,
+                        "marginTop": 8,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Same app with a new look!
+              </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Our app now has a new bright clean modern look and feel with the same great features.
+              </Text>
+            </View>
+          </View>
+        </View>
+        <View
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {},
+                Object {
+                  "width": 750,
+                },
+              ]
+            }
+          >
+            <Image
+              source={
+                Object {
+                  "uri": "https://picsum.photos/800/1200",
+                }
+              }
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 0,
+                    "height": 72,
+                    "width": 72,
+                  },
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "resizeMode": "contain",
+                      "width": "100%",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            />
+            <View
+              marginTop="large"
+              paddingHorizontal="large"
+              style={
+                Array [
+                  Object {
+                    "marginTop": 24,
+                    "paddingHorizontal": 24,
+                  },
+                  Array [
+                    Object {
+                      "minHeight": 250,
+                      "width": 750,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={750}
+            >
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    Array [
+                      Object {
+                        "fontFamily": "RebondGrotesque-SemiBold",
+                        "fontSize": 32,
+                        "lineHeight": 44,
+                        "marginBottom": 16,
+                        "marginTop": 8,
+                      },
+                      undefined,
+                    ],
+                  ]
+                }
+                themeFontSize="medium"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Easier to get around
+              </Text>
+              <Text
+                style={
+                  Array [
+                    Object {
+                      "color": "#001f23",
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "letterSpacing": 0.48,
+                      "lineHeight": 24,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="large"
+                themeFontWeight="regular"
+                themeIntent="body"
+                themeTypeface="neutral"
+              >
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae pulvinar quam, ac facilisis massa. Aliquam facilisis nisi eu justo dignissim, vel tempus justo iaculis.
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </RCTScrollView>
+    <View
+      style={
+        Array [
+          Object {
+            "flexDirection": "row",
+            "justifyContent": "space-between",
+            "marginBottom": 24,
+            "paddingHorizontal": 24,
+            "paddingVertical": 16,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        accessibilityState={
+          Object {
+            "disabled": false,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Object {
+            "alignItems": "center",
+            "alignSelf": "stretch",
+            "backgroundColor": "#401960",
+            "borderRadius": 32,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "opacity": 1,
+            "padding": 16,
+          }
+        }
+      >
+        <Text
+          disabled={false}
+          ellipsizeMode="tail"
+          numberOfLines={1}
+          style={
+            Array [
+              Object {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.42,
+                "lineHeight": 22,
+              },
+              Array [
+                Object {
+                  "color": "#ffffff",
+                  "flexShrink": 1,
+                  "fontFamily": "BeVietnamPro-SemiBold",
+                  "fontSize": 18,
+                  "lineHeight": 24,
+                  "textAlign": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="filled-primary"
+        >
+          Skip
+        </Text>
+      </View>
+      <View
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "flexDirection": "row",
+            },
+            Array [
+              Object {
+                "marginStart": "auto",
+              },
+              undefined,
+            ],
           ]
         }
       >
@@ -565,10 +1178,11 @@ exports[`Carousel renders basic carousel 1`] = `
               "borderRadius": 999,
               "height": 8,
               "marginHorizontal": 8,
-              "opacity": 0.9993342210386151,
-              "width": 23.978695073235684,
+              "opacity": 1,
+              "width": 24,
             }
           }
+          testID="page-control-indicator0"
         />
         <View
           collapsable={false}
@@ -578,10 +1192,11 @@ exports[`Carousel renders basic carousel 1`] = `
               "borderRadius": 999,
               "height": 8,
               "marginHorizontal": 8,
-              "opacity": 0.5006666666666667,
-              "width": 8.021333333333333,
+              "opacity": 0.5,
+              "width": 8,
             }
           }
+          testID="page-control-indicator1"
         />
         <View
           collapsable={false}
@@ -595,6 +1210,7 @@ exports[`Carousel renders basic carousel 1`] = `
               "width": 8,
             }
           }
+          testID="page-control-indicator2"
         />
       </View>
     </View>

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

@@ -76,7 +76,7 @@ describe('Carousel', () => {
   it('should call skip call back when press skip', () => {
     const onSkip = jest.fn();
 
-    const { queryByText } = renderWithTheme(
+    const { queryByText, toJSON } = renderWithTheme(
       <Carousel
         testID="carousel"
         items={carouselData}
@@ -86,6 +86,8 @@ describe('Carousel', () => {
       />
     );
 
+    expect(toJSON()).toMatchSnapshot();
+
     expect(queryByText('Skip')).toBeTruthy();
 
     fireEvent.press(queryByText('Skip'));

package/src/components/Carousel/index.tsx

@@ -17,11 +17,11 @@ import {
 } from 'react-native';
 
 import { CarouselData } from './types';
-import CarouselPaginator from './CarouselPaginator';
 import {
   StyledBackDrop,
   StyledCarouselFooterWrapper,
   StyledCarouselView,
+  StyledPageControl,
 } from './StyledCarousel';
 import CarouselItem from './CarouselItem';
 
@@ -153,9 +153,9 @@ const Carousel = ({
         <StyledCarouselFooterWrapper>
           {renderActions && renderActions(currentSlideIndex)}
           {shouldShowPagination(currentSlideIndex) && (
-            <CarouselPaginator
-              numberOfSlides={items.length}
-              scrollX={scrollX}
+            <StyledPageControl
+              numberOfPages={items.length}
+              currentPage={currentSlideIndex}
             />
           )}
         </StyledCarouselFooterWrapper>