@hero-design/rn 8.20.0 → 8.22.0-alpha.0

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Carousel renders basic carousel 1`] = `
+exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
 <View
   testID="carousel"
 >
@@ -20,6 +20,18 @@ exports[`Carousel renders basic carousel 1`] = `
     }
     themeSlideBackground="#ece8ef"
   />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "height": 48,
+          "justifyContent": "center",
+        },
+        undefined,
+      ]
+    }
+  />
   <View
     style={
       Array [
@@ -144,6 +156,7 @@ exports[`Carousel renders basic carousel 1`] = `
                   Array [
                     Object {
                       "flex": 1,
+                      "flexGrow": 2,
                       "resizeMode": "contain",
                       "width": "100%",
                     },
@@ -163,7 +176,6 @@ exports[`Carousel renders basic carousel 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -263,6 +275,7 @@ exports[`Carousel renders basic carousel 1`] = `
                   Array [
                     Object {
                       "flex": 1,
+                      "flexGrow": 2,
                       "resizeMode": "contain",
                       "width": "100%",
                     },
@@ -282,7 +295,6 @@ exports[`Carousel renders basic carousel 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -425,7 +437,6 @@ exports[`Carousel renders basic carousel 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -549,7 +560,6 @@ exports[`Carousel renders basic carousel 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -657,7 +667,6 @@ exports[`Carousel renders basic carousel 1`] = `
                   "flexShrink": 1,
                   "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 18,
-                  "lineHeight": 24,
                   "textAlign": "center",
                 },
                 undefined,
@@ -682,7 +691,7 @@ exports[`Carousel renders basic carousel 1`] = `
             },
             Array [
               Object {
-                "marginStart": "auto",
+                "paddingVertical": 8,
               },
               undefined,
             ],
@@ -751,7 +760,7 @@ exports[`Carousel renders basic carousel 1`] = `
 </View>
 `;
 
-exports[`Carousel should call skip call back when press skip 1`] = `
+exports[`Carousel renders correctly with pageControlPosition top 1`] = `
 <View
   testID="carousel"
 >
@@ -771,6 +780,779 @@ exports[`Carousel should call skip call back when press skip 1`] = `
     }
     themeSlideBackground="#ece8ef"
   />
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "height": 48,
+          "justifyContent": "center",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+          Array [
+            Object {
+              "paddingVertical": 8,
+            },
+            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
+        collapsable={false}
+        style={
+          Object {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator3"
+      />
+    </View>
+  </View>
+  <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": 1,
+          },
+          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": Object {
+              "height": 100,
+              "resizeMode": "cover",
+              "uri": "https://picsum.photos/1200/800",
+              "width": 30,
+            },
+          },
+          Object {
+            "background": "#ccd2d3",
+            "heading": "Test slide 4",
+            "image": Object {
+              "height": 100,
+              "uri": "https://picsum.photos/1200/800",
+              "width": 30,
+            },
+          },
+        ]
+      }
+      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={1}
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 0,
+                    "height": 72,
+                    "width": 72,
+                  },
+                  Array [
+                    Object {
+                      "flex": 1,
+                      "flexGrow": 2,
+                      "resizeMode": "contain",
+                      "width": "100%",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            />
+            <View
+              marginTop="large"
+              paddingHorizontal="large"
+              style={
+                Array [
+                  Object {
+                    "marginTop": 24,
+                    "paddingHorizontal": 24,
+                  },
+                  Array [
+                    Object {
+                      "width": 750,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={750}
+            >
+              <Text
+                allowFontScaling={false}
+                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
+                allowFontScaling={false}
+                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,
+                      "flexGrow": 2,
+                      "resizeMode": "contain",
+                      "width": "100%",
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+            />
+            <View
+              marginTop="large"
+              paddingHorizontal="large"
+              style={
+                Array [
+                  Object {
+                    "marginTop": 24,
+                    "paddingHorizontal": 24,
+                  },
+                  Array [
+                    Object {
+                      "width": 750,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={750}
+            >
+              <Image
+                source={
+                  Object {
+                    "uri": "https://picsum.photos/30",
+                  }
+                }
+                style={
+                  Array [
+                    Object {
+                      "borderRadius": 0,
+                      "height": 72,
+                      "width": 72,
+                    },
+                    undefined,
+                  ]
+                }
+              />
+              <Text
+                allowFontScaling={false}
+                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
+                allowFontScaling={false}
+                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
+              height={100}
+              resizeMode="cover"
+              source={
+                Object {
+                  "height": 100,
+                  "resizeMode": "cover",
+                  "uri": "https://picsum.photos/1200/800",
+                  "width": 30,
+                }
+              }
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 0,
+                    "height": 72,
+                    "width": 72,
+                  },
+                  Array [
+                    Object {
+                      "alignSelf": "center",
+                      "height": 100,
+                      "resizeMode": "cover",
+                      "width": 30,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={30}
+            />
+            <View
+              marginTop="large"
+              paddingHorizontal="large"
+              style={
+                Array [
+                  Object {
+                    "marginTop": 24,
+                    "paddingHorizontal": 24,
+                  },
+                  Array [
+                    Object {
+                      "width": 750,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={750}
+            >
+              <Text
+                allowFontScaling={false}
+                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
+                allowFontScaling={false}
+                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
+          onLayout={[Function]}
+          style={
+            Array [
+              Object {
+                "flexDirection": "row",
+              },
+              null,
+            ]
+          }
+        >
+          <View
+            style={
+              Array [
+                Object {},
+                Object {
+                  "width": 750,
+                },
+              ]
+            }
+          >
+            <Image
+              height={100}
+              source={
+                Object {
+                  "height": 100,
+                  "uri": "https://picsum.photos/1200/800",
+                  "width": 30,
+                }
+              }
+              style={
+                Array [
+                  Object {
+                    "borderRadius": 0,
+                    "height": 72,
+                    "width": 72,
+                  },
+                  Array [
+                    Object {
+                      "alignSelf": "center",
+                      "height": 100,
+                      "resizeMode": "contain",
+                      "width": 30,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={30}
+            />
+            <View
+              marginTop="large"
+              paddingHorizontal="large"
+              style={
+                Array [
+                  Object {
+                    "marginTop": 24,
+                    "paddingHorizontal": 24,
+                  },
+                  Array [
+                    Object {
+                      "width": 750,
+                    },
+                    undefined,
+                  ],
+                ]
+              }
+              width={750}
+            >
+              <Text
+                allowFontScaling={false}
+                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"
+              >
+                Test slide 4
+              </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}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
+            Object {
+              "alignItems": "center",
+              "alignSelf": "stretch",
+              "backgroundColor": "#401960",
+              "borderRadius": 32,
+              "flexDirection": "row",
+              "justifyContent": "center",
+              "padding": 16,
+            },
+            undefined,
+          ]
+        }
+      >
+        <Text
+          allowFontScaling={false}
+          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,
+                  "textAlign": "center",
+                },
+                undefined,
+              ],
+            ]
+          }
+          themeFontSize="medium"
+          themeFontWeight="regular"
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="filled-primary"
+        >
+          Skip
+        </Text>
+      </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 {
+          "alignItems": "center",
+          "height": 48,
+          "justifyContent": "center",
+        },
+        undefined,
+      ]
+    }
+  />
   <View
     style={
       Array [
@@ -895,6 +1677,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   Array [
                     Object {
                       "flex": 1,
+                      "flexGrow": 2,
                       "resizeMode": "contain",
                       "width": "100%",
                     },
@@ -914,7 +1697,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -1014,6 +1796,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   Array [
                     Object {
                       "flex": 1,
+                      "flexGrow": 2,
                       "resizeMode": "contain",
                       "width": "100%",
                     },
@@ -1033,7 +1816,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -1176,7 +1958,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -1300,7 +2081,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   },
                   Array [
                     Object {
-                      "minHeight": 250,
                       "width": 750,
                     },
                     undefined,
@@ -1408,7 +2188,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
                   "flexShrink": 1,
                   "fontFamily": "BeVietnamPro-SemiBold",
                   "fontSize": 18,
-                  "lineHeight": 24,
                   "textAlign": "center",
                 },
                 undefined,
@@ -1433,7 +2212,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
             },
             Array [
               Object {
-                "marginStart": "auto",
+                "paddingVertical": 8,
               },
               undefined,
             ],