npm - @hero-design/rn - Versions diffs - 8.3.0 → 8.3.1 - Mend

@hero-design/rn 8.3.0 → 8.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (28) hide show

package/src/components/Carousel/CarouselPaginator/index.tsx CHANGED Viewed

@@ -22,8 +22,8 @@ const CarouselPaginator = ({
     <StyledCarouselPaginator>
       {new Array(numberOfSlides).fill('').map((_, index) => {
         const inputRange = [
-          (index - 1) * width,
-          index * width,
+          (index - 1) * width - 1,
+          index * width - 1,
           (index + 1) * width,
         ];
@@ -45,7 +45,6 @@ const CarouselPaginator = ({
         return (
           <StyledCarouselPaginatorAnimatedView
-            indicatorWidth={indicatorWidth}
             style={[{ width: indicatorWidth, opacity }]}
             key={index.toString()}
           />

package/src/components/Carousel/StyledCarousel.tsx CHANGED Viewed

@@ -4,10 +4,9 @@ import Typography from '../Typography';
 import Image from '../Image';
 import Box from '../Box';
-const StyledCarousel = styled(View)<{
+const StyledBackDrop = styled(View)<{
   themeSlideBackground: string;
 }>(({ themeSlideBackground }) => ({
-  zIndex: 99999,
   position: 'absolute',
   backgroundColor: themeSlideBackground,
   top: 0,
@@ -17,8 +16,8 @@ const StyledCarousel = styled(View)<{
 }));
 const StyledCarouselView = styled(View)(() => ({
+  flexGrow: 2,
   justifyContent: 'space-between',
-  height: '100%',
 }));
 const StyledCarouselHeading = styled(Typography.Text)(({ theme }) => ({
@@ -41,12 +40,16 @@ const StyledCarouselContentWrapper = styled(Box)<{
   width,
 }));
-const StyledCarouselFooterWrapper = styled(Box)(() => ({
-  width: '100%',
+const StyledCarouselFooterWrapper = styled(View)(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.carousel.space.footerPaddingHorizontal,
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  paddingVertical: theme.__hd__.carousel.space.footerPaddingVertical,
+  marginBottom: theme.__hd__.carousel.space.footerMarginBottom,
 }));
 export {
-  StyledCarousel,
+  StyledBackDrop,
   StyledCarouselView,
   StyledCarouselHeading,
   StyledCarouselImage,

package/src/components/Carousel/__tests__/StyledCarousel.spec.tsx CHANGED Viewed

@@ -1,12 +1,12 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { StyledCarousel } from '../StyledCarousel';
+import { StyledBackDrop } from '../StyledCarousel';
 import theme from '../../../theme';
-describe('StyledCard', () => {
+describe('StyledBackDrop', () => {
   it('renders correct basic style', () => {
     const { toJSON } = renderWithTheme(
-      <StyledCarousel themeSlideBackground={theme.colors.highlightedSurface} />
+      <StyledBackDrop themeSlideBackground={theme.colors.highlightedSurface} />
     );
     expect(toJSON()).toMatchSnapshot();
   });

package/src/components/Carousel/__tests__/__snapshots__/StyledCarousel.spec.tsx.snap CHANGED Viewed

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`StyledCard renders correct basic style 1`] = `
+exports[`StyledBackDrop renders correct basic style 1`] = `
 <View
   style={
     Array [
@@ -11,7 +11,6 @@ exports[`StyledCard renders correct basic style 1`] = `
         "position": "absolute",
         "right": 0,
         "top": 0,
-        "zIndex": 99999,
       },
       undefined,
     ]

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

@@ -0,0 +1,600 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`Carousel renders basic carousel 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 {
+                      "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": 36,
+                        "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": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="medium"
+                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 {
+                      "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": 36,
+                        "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": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="medium"
+                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 {
+                      "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": 36,
+                        "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": 14,
+                      "letterSpacing": 0.42,
+                      "lineHeight": 22,
+                    },
+                    undefined,
+                  ]
+                }
+                themeFontSize="medium"
+                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",
+              "marginStart": "auto",
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "marginHorizontal": 8,
+              "opacity": 0.9993342210386151,
+              "width": 23.978695073235684,
+            }
+          }
+        />
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "marginHorizontal": 8,
+              "opacity": 0.5006666666666667,
+              "width": 8.021333333333333,
+            }
+          }
+        />
+        <View
+          collapsable={false}
+          style={
+            Object {
+              "backgroundColor": "#401960",
+              "borderRadius": 999,
+              "height": 8,
+              "marginHorizontal": 8,
+              "opacity": 0.5,
+              "width": 8,
+            }
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;