@hero-design/rn 8.3.0 → 8.3.1

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

@@ -5,6 +5,7 @@ import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Carousel from '..';
 import Image from '../../Image';
 import { theme } from '../../..';
+import Button from '../../Button/Button';
 
 const carouselData = [
   {
@@ -30,15 +31,14 @@ const carouselData = [
 
 describe('Carousel', () => {
   it('renders basic carousel', async () => {
-    const onSkip = jest.fn();
-    const onFinish = jest.fn();
-
-    const { getByTestId, queryByText } = renderWithTheme(
+    const onPress = jest.fn();
+    const { getByTestId, queryByText, toJSON } = renderWithTheme(
       <Carousel
         testID="carousel"
         items={carouselData}
-        onSkipPress={onSkip}
-        onFinishPress={onFinish}
+        renderActions={(_) => {
+          return <Button text="Skip" onPress={onPress} />;
+        }}
       />
     );
 
@@ -69,13 +69,21 @@ describe('Carousel', () => {
         '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.'
       )
     ).toBeTruthy();
+
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it('should call skip call back when press skip', () => {
     const onSkip = jest.fn();
 
     const { queryByText } = renderWithTheme(
-      <Carousel testID="carousel" items={carouselData} onSkipPress={onSkip} />
+      <Carousel
+        testID="carousel"
+        items={carouselData}
+        renderActions={(_) => {
+          return <Button text="Skip" onPress={onSkip} />;
+        }}
+      />
     );
 
     expect(queryByText('Skip')).toBeTruthy();

package/src/components/Carousel/index.tsx

@@ -1,9 +1,17 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, {
+  Dispatch,
+  SetStateAction,
+  useCallback,
+  useRef,
+  useEffect,
+  useState,
+} from 'react';
 import {
   Animated,
   FlatList,
   StyleProp,
   useWindowDimensions,
+  View,
   ViewProps,
   ViewStyle,
 } from 'react-native';
@@ -11,11 +19,10 @@ import {
 import { CarouselData } from './types';
 import CarouselPaginator from './CarouselPaginator';
 import {
-  StyledCarousel,
+  StyledBackDrop,
   StyledCarouselFooterWrapper,
   StyledCarouselView,
 } from './StyledCarousel';
-import Button from '../Button';
 import CarouselItem from './CarouselItem';
 
 interface CarouselProps extends ViewProps {
@@ -27,101 +34,86 @@ interface CarouselProps extends ViewProps {
    * Testing id of the component.
    */
   testID?: string;
-
-  /**
-   * Callback to be called when the user slides to the next slide.
-   */
-  onSlideChange?: (currentSlide?: CarouselData) => void;
-
   /**
-   * Callback to be called when the user skips the intro carousel.
+   * onItemIndexChange event handler receiving index of selected Item.
    */
-  onSkipPress?: (currentSlide?: CarouselData) => void;
-
-  /**
-   * Callback to be called when the user finishes the intro carousel.
-   */
-  onFinishPress?: (currentSlide?: CarouselData) => void;
-
+  onItemIndexChange?: Dispatch<SetStateAction<number>>;
   /**
    * Carousel data.
    */
   items: CarouselData[];
-
   /**
-   * Finish button label.
+   * Render action elements function.
    */
-  finishButtonLabel?: string;
-
+  renderActions?: (pageIndex: number) => JSX.Element;
   /**
-   * Skip button label.
+   * Current selected item index.
    */
-  skipButtonLabel?: string;
+  selectedItemIndex?: number;
+}
 
-  /**
-   * Footer height.
-   */
-  footerHeight?: number;
+export function useStateFromProp<T>(
+  initialValue: T
+): [T, Dispatch<SetStateAction<T>>] {
+  const [value, setValue] = useState(initialValue);
 
-  /**
-   * Min content height.
-   */
-  minContentHeight?: number;
+  useEffect(() => setValue(initialValue), [initialValue]);
+
+  return [value, setValue];
 }
 
 const Carousel = ({
   items,
-  onFinishPress,
-  onSkipPress,
-  onSlideChange,
-  finishButtonLabel = `Let's go!`,
-  skipButtonLabel = 'Skip',
-  footerHeight = 70,
-  minContentHeight = 250,
+  onItemIndexChange,
+  renderActions,
+  selectedItemIndex = 0,
+  style,
   ...nativeProps
 }: CarouselProps) => {
-  const carouselRef = useRef(null);
-  const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
-  const { width } = useWindowDimensions();
+  const carouselRef = useRef<FlatList>(null);
 
-  const scrollX = useRef(new Animated.Value(0)).current;
+  const [currentSlideIndex, setCurrentSlideIndex] =
+    useStateFromProp(selectedItemIndex);
 
-  const visibleSlideChanged = useCallback(
-    ({ viewableItems }) => {
-      if (!viewableItems || (viewableItems && !viewableItems.length)) return;
-      const currentIndex = viewableItems[0].index;
-      setCurrentSlideIndex(viewableItems[0].index);
-      const currentSlide = items[currentIndex];
-      if (onSlideChange) {
-        onSlideChange(currentSlide);
+  const internalOnItemIndexChange = useCallback(
+    (index: number) => {
+      setCurrentSlideIndex(index);
+      if (onItemIndexChange) {
+        onItemIndexChange(index);
       }
     },
-    [items, onSlideChange]
+    [setCurrentSlideIndex, onItemIndexChange]
   );
+  const { width } = useWindowDimensions();
 
-  const skipCarousel = useCallback(() => {
-    const currentSlide = items[currentSlideIndex];
-    if (onSkipPress) {
-      onSkipPress(currentSlide);
-    }
-  }, [currentSlideIndex, onSkipPress, items]);
-
-  const finishCarousel = useCallback(() => {
-    const currentSlide = items[currentSlideIndex];
-    if (onFinishPress) {
-      onFinishPress(currentSlide);
-    }
-  }, [onFinishPress, items, currentSlideIndex]);
+  const scrollX = useRef(new Animated.Value(0)).current;
+  useEffect(() => {
+    // must use setTimeout since when layout is mounted, the pagination dots are not set correct scrollX
+    const handle = setTimeout(() => {
+      scrollX.setValue(currentSlideIndex * width);
+      carouselRef.current?.scrollToOffset({
+        offset: currentSlideIndex * width,
+        animated: true,
+      });
+    }, 100);
+    return () => {
+      clearTimeout(handle);
+    };
+  }, [currentSlideIndex, carouselRef]);
+
+  const visibleSlideChanged = useCallback(({ viewableItems }) => {
+    if (!viewableItems || (viewableItems && !viewableItems.length)) return;
+    const { index } = viewableItems[0];
+    internalOnItemIndexChange(index);
+  }, []);
 
   const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
 
-  const isLastSlide = currentSlideIndex === items.length - 1;
-
   return (
-    <StyledCarousel
-      themeSlideBackground={items[currentSlideIndex].background}
-      {...nativeProps}
-    >
+    <View style={style} {...nativeProps}>
+      <StyledBackDrop
+        themeSlideBackground={items[currentSlideIndex].background}
+      />
       <StyledCarouselView>
         <FlatList
           horizontal
@@ -148,28 +140,17 @@ const Carousel = ({
                 heading={heading}
                 body={body}
                 content={content}
-                minHeight={minContentHeight}
                 width={width}
               />
             );
           }}
         />
-        <StyledCarouselFooterWrapper
-          paddingHorizontal="large"
-          flexDirection="row"
-          justifyContent="space-between"
-          style={{ height: footerHeight }}
-        >
-          <Button
-            variant={isLastSlide ? 'filled' : 'text'}
-            intent="primary"
-            onPress={isLastSlide ? finishCarousel : skipCarousel}
-            text={isLastSlide ? finishButtonLabel : skipButtonLabel}
-          />
+        <StyledCarouselFooterWrapper>
+          {renderActions && renderActions(currentSlideIndex)}
           <CarouselPaginator numberOfSlides={items.length} scrollX={scrollX} />
         </StyledCarouselFooterWrapper>
       </StyledCarouselView>
-    </StyledCarousel>
+    </View>
   );
 };
 

package/src/components/Typography/Text/StyledText.tsx

@@ -15,6 +15,7 @@ const StyledText = styled(Text)<{
     | 'xlarge'
     | 'xxxlarge'
     | 'xxxxxlarge'
+    | '6xlarge'
     | '7xlarge';
   themeFontWeight: 'light' | 'regular' | 'semi-bold';
   themeIntent:

package/src/components/Typography/Text/index.tsx

@@ -22,6 +22,7 @@ export interface TextProps extends NativeTextProps {
     | 'xlarge'
     | 'xxxlarge'
     | 'xxxxxlarge'
+    | '6xlarge'
     | '7xlarge';
   /**
    * Font weight of the text.

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -258,13 +258,13 @@ Object {
         "paginatorBackgroundColor": "#401960",
       },
       "fontSizes": Object {
-        "heading": 32,
+        "heading": 36,
       },
       "fonts": Object {
         "heading": "RebondGrotesque-SemiBold",
       },
       "lineHeights": Object {
-        "heading": 32,
+        "heading": 44,
       },
       "radii": Object {
         "paginatorBorderRadius": 999,
@@ -275,6 +275,9 @@ Object {
         "paginatorWidth": 8,
       },
       "space": Object {
+        "footerMarginBottom": 24,
+        "footerPaddingHorizontal": 24,
+        "footerPaddingVertical": 16,
         "headingMarginBottom": 16,
         "headingMarginTop": 8,
         "paginatorMarginHorizontal": 8,
@@ -927,6 +930,7 @@ Object {
         "warning": "#ffa234",
       },
       "fontSizes": Object {
+        "6xlarge": 36,
         "7xlarge": 42,
         "large": 16,
         "medium": 14,
@@ -948,6 +952,7 @@ Object {
         },
       },
       "lineHeights": Object {
+        "6xlarge": 44,
         "7xlarge": 50,
         "large": 24,
         "medium": 22,
@@ -1007,6 +1012,7 @@ Object {
     "warningSurface": "#fff6eb",
   },
   "fontSizes": Object {
+    "6xlarge": 36,
     "7xlarge": 42,
     "large": 16,
     "medium": 14,
@@ -1031,6 +1037,7 @@ Object {
     },
   },
   "lineHeights": Object {
+    "6xlarge": 44,
     "7xlarge": 50,
     "large": 24,
     "medium": 22,

package/src/theme/components/carousel.ts

@@ -9,6 +9,9 @@ const getCarouselTheme = (theme: GlobalTheme) => {
     headingMarginTop: theme.space.small,
     headingMarginBottom: theme.space.medium,
     paginatorMarginHorizontal: theme.space.small,
+    footerPaddingHorizontal: theme.space.large,
+    footerPaddingVertical: theme.space.medium,
+    footerMarginBottom: theme.space.large,
   };
 
   const sizes = {
@@ -22,7 +25,7 @@ const getCarouselTheme = (theme: GlobalTheme) => {
   };
 
   const fontSizes = {
-    heading: theme.fontSizes.xxxxxlarge,
+    heading: theme.fontSizes['6xlarge'],
   };
 
   const fonts = {
@@ -30,7 +33,7 @@ const getCarouselTheme = (theme: GlobalTheme) => {
   };
 
   const lineHeights = {
-    heading: theme.lineHeights.xxxlarge,
+    heading: theme.lineHeights['6xlarge'],
   };
 
   return { colors, sizes, radii, space, fonts, fontSizes, lineHeights };

package/src/theme/components/typography.ts

@@ -20,6 +20,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xlarge: theme.fontSizes.xlarge,
     xxxlarge: theme.fontSizes.xxxlarge,
     xxxxxlarge: theme.fontSizes.xxxxxlarge,
+    '6xlarge': theme.fontSizes['6xlarge'],
     '7xlarge': theme.fontSizes['7xlarge'],
   };
 
@@ -30,6 +31,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xlarge: theme.lineHeights.xlarge,
     xxxlarge: theme.lineHeights.xxxlarge,
     xxxxxlarge: theme.lineHeights.xxxxxlarge,
+    '6xlarge': theme.lineHeights['6xlarge'],
     '7xlarge': theme.lineHeights['7xlarge'],
   };
 

package/src/theme/global/typography.ts

@@ -13,6 +13,7 @@ interface Fonts {
 
 interface FontSizes {
   '7xlarge': number;
+  '6xlarge': number;
   xxxxxlarge: number;
   xxxxlarge: number;
   xxxlarge: number;
@@ -62,6 +63,7 @@ const getFontSizes = (baseFontSize: number): FontSizes => {
   });
   return {
     '7xlarge': scale(fontSizes[10]), // 42
+    '6xlarge': scale(fontSizes[9]), //  36
     xxxxxlarge: scale(fontSizes[8]), // 32
     xxxxlarge: scale(fontSizes[7]), //  28
     xxxlarge: scale(fontSizes[6]), //   24
@@ -78,6 +80,7 @@ const getLineHeights = (fontSizes: FontSizes): LineHeights => {
   const additionalSpace = 8;
   return {
     '7xlarge': fontSizes['7xlarge'] + additionalSpace,
+    '6xlarge': fontSizes['6xlarge'] + additionalSpace,
     xxxxxlarge: fontSizes.xxxxxlarge + additionalSpace,
     xxxxlarge: fontSizes.xxxxlarge + additionalSpace,
     xxxlarge: fontSizes.xxxlarge + additionalSpace,

package/types/components/Carousel/CarouselItem.d.ts

@@ -1,7 +1,6 @@
 import { CarouselData } from './types';
 interface CarouselItemProps extends Omit<CarouselData, 'background'> {
     width: number;
-    minHeight: number;
 }
-declare const CarouselItem: ({ width, image, content, heading, body, minHeight, }: CarouselItemProps) => JSX.Element;
+declare const CarouselItem: ({ width, image, content, heading, body, }: CarouselItemProps) => JSX.Element;
 export default CarouselItem;

package/types/components/Carousel/CarouselPaginator/StyledCarouselPaginator.d.ts

@@ -10,7 +10,5 @@ declare const StyledCarouselPaginatorAnimatedView: import("@emotion/native").Sty
 } & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & {
-    indicatorWidth: Animated.AnimatedInterpolation;
 }, {}, {}>;
 export { StyledCarouselPaginator, StyledCarouselPaginatorAnimatedView };

package/types/components/Carousel/StyledCarousel.d.ts

@@ -1,5 +1,5 @@
 import { View } from 'react-native';
-declare const StyledCarousel: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+declare const StyledBackDrop: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
@@ -27,8 +27,10 @@ declare const StyledCarouselContentWrapper: import("@emotion/native").StyledComp
 } & {
     width: number;
 }, {}, {}>;
-declare const StyledCarouselFooterWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
+declare const StyledCarouselFooterWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
-export { StyledCarousel, StyledCarouselView, StyledCarouselHeading, StyledCarouselImage, StyledCarouselContentWrapper, StyledCarouselFooterWrapper, };
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+export { StyledBackDrop, StyledCarouselView, StyledCarouselHeading, StyledCarouselImage, StyledCarouselContentWrapper, StyledCarouselFooterWrapper, };

package/types/components/Carousel/index.d.ts

@@ -1,3 +1,4 @@
+import { Dispatch, SetStateAction } from 'react';
 import { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { CarouselData } from './types';
 interface CarouselProps extends ViewProps {
@@ -10,37 +11,22 @@ interface CarouselProps extends ViewProps {
      */
     testID?: string;
     /**
-     * Callback to be called when the user slides to the next slide.
+     * onItemIndexChange event handler receiving index of selected Item.
      */
-    onSlideChange?: (currentSlide?: CarouselData) => void;
-    /**
-     * Callback to be called when the user skips the intro carousel.
-     */
-    onSkipPress?: (currentSlide?: CarouselData) => void;
-    /**
-     * Callback to be called when the user finishes the intro carousel.
-     */
-    onFinishPress?: (currentSlide?: CarouselData) => void;
+    onItemIndexChange?: Dispatch<SetStateAction<number>>;
     /**
      * Carousel data.
      */
     items: CarouselData[];
     /**
-     * Finish button label.
-     */
-    finishButtonLabel?: string;
-    /**
-     * Skip button label.
-     */
-    skipButtonLabel?: string;
-    /**
-     * Footer height.
+     * Render action elements function.
      */
-    footerHeight?: number;
+    renderActions?: (pageIndex: number) => JSX.Element;
     /**
-     * Min content height.
+     * Current selected item index.
      */
-    minContentHeight?: number;
+    selectedItemIndex?: number;
 }
-declare const Carousel: ({ items, onFinishPress, onSkipPress, onSlideChange, finishButtonLabel, skipButtonLabel, footerHeight, minContentHeight, ...nativeProps }: CarouselProps) => JSX.Element;
+export declare function useStateFromProp<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>];
+declare const Carousel: ({ items, onItemIndexChange, renderActions, selectedItemIndex, style, ...nativeProps }: CarouselProps) => JSX.Element;
 export default Carousel;

package/types/components/Typography/Text/StyledText.d.ts

@@ -3,7 +3,7 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("reac
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
-    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '7xlarge';
+    themeFontSize: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
     themeFontWeight: 'light' | 'regular' | 'semi-bold';
     themeIntent: 'body' | 'subdued' | 'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'inverted';
     themeTypeface: 'neutral' | 'playful';

package/types/components/Typography/Text/index.d.ts

@@ -8,7 +8,7 @@ export interface TextProps extends NativeTextProps {
     /**
      * Size of the text.
      */
-    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '7xlarge';
+    fontSize?: 'small' | 'medium' | 'large' | 'xlarge' | 'xxxlarge' | 'xxxxxlarge' | '6xlarge' | '7xlarge';
     /**
      * Font weight of the text.
      */

package/types/theme/components/carousel.d.ts

@@ -15,6 +15,9 @@ declare const getCarouselTheme: (theme: GlobalTheme) => {
         headingMarginTop: number;
         headingMarginBottom: number;
         paginatorMarginHorizontal: number;
+        footerPaddingHorizontal: number;
+        footerPaddingVertical: number;
+        footerMarginBottom: number;
     };
     fonts: {
         heading: string;

package/types/theme/components/typography.d.ts

@@ -19,6 +19,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         xlarge: number;
         xxxlarge: number;
         xxxxxlarge: number;
+        '6xlarge': number;
         '7xlarge': number;
     };
     lineHeights: {
@@ -28,6 +29,7 @@ declare const getTypographyTheme: (theme: GlobalTheme) => {
         xlarge: number;
         xxxlarge: number;
         xxxxxlarge: number;
+        '6xlarge': number;
         '7xlarge': number;
     };
 };

package/types/theme/global/typography.d.ts

@@ -9,6 +9,7 @@ interface Fonts {
 }
 interface FontSizes {
     '7xlarge': number;
+    '6xlarge': number;
     xxxxxlarge: number;
     xxxxlarge: number;
     xxxlarge: number;