@hero-design/rn 8.6.0 → 8.7.0

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';
 
@@ -46,6 +46,10 @@ interface CarouselProps extends ViewProps {
    * Render action elements function.
    */
   renderActions?: (pageIndex: number) => JSX.Element;
+  /**
+   * Should show paginations
+   */
+  shouldShowPagination?: (pageIndex: number) => boolean;
   /**
    * Current selected item index.
    */
@@ -68,6 +72,7 @@ const Carousel = ({
   renderActions,
   selectedItemIndex = 0,
   style,
+  shouldShowPagination = () => true,
   ...nativeProps
 }: CarouselProps) => {
   const carouselRef = useRef<FlatList>(null);
@@ -147,7 +152,12 @@ const Carousel = ({
         />
         <StyledCarouselFooterWrapper>
           {renderActions && renderActions(currentSlideIndex)}
-          <CarouselPaginator numberOfSlides={items.length} scrollX={scrollX} />
+          {shouldShowPagination(currentSlideIndex) && (
+            <StyledPageControl
+              numberOfPages={items.length}
+              currentPage={currentSlideIndex}
+            />
+          )}
         </StyledCarouselFooterWrapper>
       </StyledCarouselView>
     </View>

package/src/components/Carousel/types.ts

@@ -1,8 +1,14 @@
 import { ReactNode } from 'react';
-import { ImageSourcePropType } from 'react-native';
+import { ImageSourcePropType, ImageResizeMode } from 'react-native';
+
+export type CarouselImageProps = ImageSourcePropType & {
+  height?: number;
+  width?: number;
+  resizeMode?: ImageResizeMode;
+};
 
 export type CarouselData = {
-  image: ImageSourcePropType | string;
+  image: CarouselImageProps | string;
   content?: ReactNode;
   heading: string;
   body?: string;

package/src/components/Icon/HeroIcon/glyphMap.json

@@ -1 +1 @@
-{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bookmark-added":59011,"bookmark":59012,"box-check":59013,"box":59014,"buildings":59015,"cake":59016,"calendar-clock":59017,"calendar":59018,"candy-box-menu":59019,"caret-down-small":59020,"caret-down":59021,"caret-left-small":59022,"caret-left":59023,"caret-right-small":59024,"caret-right":59025,"caret-up-small":59026,"caret-up":59027,"check-radio":59028,"circle-add":59029,"circle-cancel":59030,"circle-check":59031,"circle-down":59032,"circle-info":59033,"circle-left":59034,"circle-ok":59035,"circle-pencil":59036,"circle-question":59037,"circle-remove":59038,"circle-right":59039,"circle-up":59040,"circle-warning":59041,"clock-3":59042,"clock":59043,"cloud-download":59044,"cloud-upload":59045,"cog":59046,"coin":59047,"contacts":59048,"credit-card":59049,"diamond":59050,"direction-arrows":59051,"directory":59052,"document":59053,"dollar-coin-shine":59054,"double-buildings":59055,"edit-template":59056,"envelope":59057,"expense":59058,"eye-circle":59059,"eye-invisible":59060,"eye":59061,"face-meh":59062,"face-sad":59063,"face-smiley":59064,"feed":59065,"feedbacks":59066,"file-certified":59067,"file-clone":59068,"file-copy":59069,"file-csv":59070,"file-dispose":59071,"file-doc":59072,"file-excel":59073,"file-export":59074,"file-lock":59075,"file-pdf":59076,"file-powerpoint":59077,"file-search":59078,"file-secured":59079,"file-sheets":59080,"file-slide":59081,"file-verified":59082,"file-word":59083,"file":59084,"filter":59085,"folder-user":59086,"folder":59087,"format-bold":59088,"format-heading1":59089,"format-heading2":59090,"format-italic":59091,"format-list-bulleted":59092,"format-list-numbered":59093,"format-underlined":59094,"funnel-filter":59095,"global-dollar":59096,"globe":59097,"graduation-cap":59098,"graph":59099,"happy-sun":59100,"health-bag":59101,"heart":59102,"home":59103,"image":59104,"import":59105,"incident-siren":59106,"instapay":59107,"list":59108,"loading-2":59109,"loading":59110,"location":59111,"lock":59112,"looks-one":59113,"looks-two":59114,"media-content":59115,"menu":59116,"money-notes":59117,"moneybag":59118,"moon":59119,"multiple-stars":59120,"multiple-users":59121,"node":59122,"open-folder":59123,"paperclip":59124,"payment-summary":59125,"pencil":59126,"phone":59127,"piggy-bank":59128,"plane":59129,"play-circle":59130,"print":59131,"raising-hands":59132,"reply-arrow":59133,"reply":59134,"reschedule":59135,"rostering":59136,"save":59137,"schedule-send":59138,"schedule":59139,"search-person":59140,"send":59141,"speaker-active":59142,"speaker":59143,"star-award":59144,"star-badge":59145,"star-circle":59146,"star-medal":59147,"star":59148,"steps-circle":59149,"stopwatch":59150,"suitcase":59151,"survey":59152,"swag":59153,"switch":59154,"tag":59155,"target":59156,"teams":59157,"timesheet":59158,"touch-id":59159,"trash-bin":59160,"unlock":59161,"user":59162,"video-1":59163,"video-2":59164,"wallet":59165,"warning":59166,"activate-outlined":59167,"add-credit-card-outlined":59168,"add-person-outlined":59169,"add-section-outlined":59170,"add-time-outlined":59171,"add":59172,"adjustment-outlined":59173,"alignment-2-outlined":59174,"alignment-outlined":59175,"all-caps":59176,"arrow-down":59177,"arrow-downwards":59178,"arrow-left":59179,"arrow-leftwards":59180,"arrow-right":59181,"arrow-rightwards":59182,"arrow-up":59183,"arrow-upwards":59184,"article-outlined":59185,"at-sign":59186,"auto-graph-outlined":59187,"bell-active-outlined":59188,"bell-outlined":59189,"bell-slash-outlined":59190,"billing-outlined":59191,"body-outlined":59192,"bold":59193,"bookmark-added-outlined":59194,"bookmark-outlined":59195,"box-check-outlined":59196,"box-outlined":59197,"bullet-points":59198,"cake-outlined":59199,"calendar-dates-outlined":59200,"calendar-star-outlined":59201,"camera-outlined":59202,"cancel":59203,"chat-bubble-outlined":59204,"chat-unread-outlined":59205,"checkmark":59206,"circle-add-outlined":59207,"circle-cancel-outlined":59208,"circle-down-outlined":59209,"circle-info-outlined":59210,"circle-left-outlined":59211,"circle-ok-outlined":59212,"circle-question-outlined":59213,"circle-remove-outlined":59214,"circle-right-outlined":59215,"circle-up-outlined":59216,"circle-warning-outlined":59217,"clock-2-outlined":59218,"clock-outlined":59219,"cog-outlined":59220,"coin-outlined":59221,"comment-outlined":59222,"contacts-outlined":59223,"credit-card-outlined":59224,"cup-outlined":59225,"direction-arrows-outlined":59226,"directory-outlined":59227,"document-outlined":59228,"dollar-card-outlined":59229,"dollar-coin-shine-outlined":59230,"dollar-credit-card-outlined":59231,"dollar-sign":59232,"double-buildings-outlined":59233,"double-left-arrows":59234,"double-right-arrows":59235,"download-outlined":59236,"edit-template-outlined":59237,"email-outlined":59238,"enter-arrow":59239,"envelope-outlined":59240,"expense-outlined":59241,"explore-outlined":59242,"external-link":59243,"eye-invisible-outlined":59244,"eye-outlined":59245,"face-id":59246,"face-meh-outlined":59247,"face-open-smiley-outlined":59248,"face-sad-outlined":59249,"face-smiley-outlined":59250,"feed-outlined":59251,"file-certified-outlined":59252,"file-clone-outlined":59253,"file-copy-outlined":59254,"file-dispose-outlined":59255,"file-dollar-outlined":59256,"file-download-outlined":59257,"file-export-outlined":59258,"file-lock-outlined":59259,"file-outlined":59260,"file-search-outlined":59261,"file-secured-outlined":59262,"file-statutory-outlined":59263,"file-verified-outlined":59264,"filter-outlined":59265,"folder-outlined":59266,"folder-user-outlined":59267,"funnel-filter-outline":59268,"graph-outlined":59269,"hand-holding-user-outlined":59270,"happy-sun-outlined":59271,"health-bag-outlined":59272,"heart-outlined":59273,"home-active-outlined":59274,"home-outlined":59275,"id-card-outlined":59276,"image-outlined":59277,"import-outlined":59278,"instapay-outlined":59279,"italic":59280,"link-1":59281,"link-2":59282,"list-outlined":59283,"live-help-outlined":59284,"location-outlined":59285,"lock-outlined":59286,"locked-file-outlined":59287,"log-out":59288,"media-content-outlined":59289,"menu-close":59290,"menu-expand":59291,"menu-fold-outlined":59292,"menu-unfold-outlined":59293,"moneybag-outlined":59294,"moon-outlined":59295,"more-horizontal":59296,"more-vertical":59297,"multiple-folders-outlined":59298,"multiple-users-outlined":59299,"near-me-outlined":59300,"node-outlined":59301,"number-points":59302,"number":59303,"overview-outlined":59304,"payment-summary-outlined":59305,"payslip-outlined":59306,"pencil-outlined":59307,"percentage":59308,"phone-outlined":59309,"piggy-bank-outlined":59310,"plane-outlined":59311,"play-circle-outlined":59312,"print-outlined":59313,"qr-code-outlined":59314,"qualification-outlined":59315,"re-assign":59316,"redeem":59317,"refresh":59318,"remove":59319,"reply-outlined":59320,"restart":59321,"return-arrow":59322,"rostering-outlined":59323,"save-outlined":59324,"schedule-outlined":59325,"search-outlined":59326,"search-secured-outlined":59327,"send-outlined":59328,"share-1":59329,"share-2":59330,"share-outlined":59331,"show-chart-outlined":59332,"single-down-arrow":59333,"single-left-arrow":59334,"single-right-arrow":59335,"single-up-arrow":59336,"speaker-active-outlined":59337,"speaker-outlined":59338,"star-circle-outlined":59339,"star-outlined":59340,"stopwatch-outlined":59341,"strikethrough":59342,"suitcase-clock-outlined":59343,"suitcase-outlined":59344,"survey-outlined":59345,"switch-outlined":59346,"sync":59347,"target-outlined":59348,"timesheet-outlined":59349,"today-outlined":59350,"transfer":59351,"trash-bin-outlined":59352,"umbrela-outlined":59353,"unavailable":59354,"underline":59355,"unlock-outlined":59356,"upload-outlined":59357,"user-circle-outlined":59358,"user-gear-outlined":59359,"user-outlined":59360,"user-rectangle-outlined":59361,"video-1-outlined":59362,"video-2-outlined":59363,"wallet-outlined":59364}
+{"activate":59000,"add-emoji":59001,"add-person":59002,"adjustment":59003,"alignment":59004,"antenna":59005,"archive":59006,"assignment-warning":59007,"bank":59008,"bell":59009,"billing":59010,"bookmark-added":59011,"bookmark":59012,"box-check":59013,"box":59014,"bpay":59015,"buildings":59016,"cake":59017,"calendar-clock":59018,"calendar":59019,"candy-box-menu":59020,"caret-down-small":59021,"caret-down":59022,"caret-left-small":59023,"caret-left":59024,"caret-right-small":59025,"caret-right":59026,"caret-up-small":59027,"caret-up":59028,"check-radio":59029,"circle-add":59030,"circle-cancel":59031,"circle-check":59032,"circle-down":59033,"circle-info":59034,"circle-left":59035,"circle-ok":59036,"circle-pencil":59037,"circle-question":59038,"circle-remove":59039,"circle-right":59040,"circle-up":59041,"circle-warning":59042,"clock-3":59043,"clock":59044,"cloud-download":59045,"cloud-upload":59046,"cog":59047,"coin":59048,"contacts":59049,"credit-card":59050,"diamond":59051,"direction-arrows":59052,"directory":59053,"document":59054,"dollar-coin-shine":59055,"double-buildings":59056,"edit-template":59057,"envelope":59058,"expense":59059,"eye-circle":59060,"eye-invisible":59061,"eye":59062,"face-meh":59063,"face-sad":59064,"face-smiley":59065,"feed":59066,"feedbacks":59067,"file-certified":59068,"file-clone":59069,"file-copy":59070,"file-csv":59071,"file-dispose":59072,"file-doc":59073,"file-excel":59074,"file-export":59075,"file-lock":59076,"file-pdf":59077,"file-powerpoint":59078,"file-search":59079,"file-secured":59080,"file-sheets":59081,"file-slide":59082,"file-verified":59083,"file-word":59084,"file":59085,"filter":59086,"folder-user":59087,"folder":59088,"format-bold":59089,"format-heading1":59090,"format-heading2":59091,"format-italic":59092,"format-list-bulleted":59093,"format-list-numbered":59094,"format-underlined":59095,"funnel-filter":59096,"global-dollar":59097,"globe":59098,"graduation-cap":59099,"graph":59100,"happy-sun":59101,"health-bag":59102,"heart":59103,"home":59104,"image":59105,"import":59106,"incident-siren":59107,"instapay":59108,"list":59109,"loading-2":59110,"loading":59111,"location":59112,"lock":59113,"looks-one":59114,"looks-two":59115,"media-content":59116,"menu":59117,"money-notes":59118,"moneybag":59119,"moon":59120,"multiple-stars":59121,"multiple-users":59122,"node":59123,"open-folder":59124,"paperclip":59125,"payment-summary":59126,"pencil":59127,"phone":59128,"piggy-bank":59129,"plane":59130,"play-circle":59131,"print":59132,"raising-hands":59133,"reply-arrow":59134,"reply":59135,"reschedule":59136,"rostering":59137,"save":59138,"schedule-send":59139,"schedule":59140,"search-person":59141,"send":59142,"speaker-active":59143,"speaker":59144,"star-award":59145,"star-badge":59146,"star-circle":59147,"star-medal":59148,"star":59149,"steps-circle":59150,"stopwatch":59151,"suitcase":59152,"survey":59153,"swag":59154,"switch":59155,"tag":59156,"target":59157,"teams":59158,"timesheet":59159,"touch-id":59160,"trash-bin":59161,"unlock":59162,"user":59163,"video-1":59164,"video-2":59165,"wallet":59166,"warning":59167,"activate-outlined":59168,"add-credit-card-outlined":59169,"add-person-outlined":59170,"add-section-outlined":59171,"add-time-outlined":59172,"add":59173,"adjustment-outlined":59174,"alignment-2-outlined":59175,"alignment-outlined":59176,"all-caps":59177,"arrow-down":59178,"arrow-downwards":59179,"arrow-left":59180,"arrow-leftwards":59181,"arrow-right":59182,"arrow-rightwards":59183,"arrow-up":59184,"arrow-upwards":59185,"article-outlined":59186,"at-sign":59187,"auto-graph-outlined":59188,"bell-active-outlined":59189,"bell-outlined":59190,"bell-slash-outlined":59191,"billing-outlined":59192,"body-outlined":59193,"bold":59194,"bookmark-added-outlined":59195,"bookmark-outlined":59196,"box-check-outlined":59197,"box-outlined":59198,"bullet-points":59199,"cake-outlined":59200,"calendar-dates-outlined":59201,"calendar-star-outlined":59202,"camera-outlined":59203,"cancel":59204,"charging-station-outlined":59205,"chat-bubble-outlined":59206,"chat-unread-outlined":59207,"checkmark":59208,"circle-add-outlined":59209,"circle-cancel-outlined":59210,"circle-down-outlined":59211,"circle-info-outlined":59212,"circle-left-outlined":59213,"circle-ok-outlined":59214,"circle-question-outlined":59215,"circle-remove-outlined":59216,"circle-right-outlined":59217,"circle-up-outlined":59218,"circle-warning-outlined":59219,"clock-2-outlined":59220,"clock-outlined":59221,"cog-outlined":59222,"coin-outlined":59223,"comment-outlined":59224,"contacts-outlined":59225,"contacts-user-outlined":59226,"credit-card-outlined":59227,"cup-outlined":59228,"direction-arrows-outlined":59229,"directory-outlined":59230,"document-outlined":59231,"dollar-box-outlined":59232,"dollar-card-outlined":59233,"dollar-coin-shine-outlined":59234,"dollar-credit-card-outlined":59235,"dollar-sign":59236,"double-buildings-outlined":59237,"double-left-arrows":59238,"double-right-arrows":59239,"download-outlined":59240,"edit-template-outlined":59241,"email-outlined":59242,"enter-arrow":59243,"envelope-outlined":59244,"expense-outlined":59245,"explore-outlined":59246,"external-link":59247,"eye-invisible-outlined":59248,"eye-outlined":59249,"face-id":59250,"face-meh-outlined":59251,"face-open-smiley-outlined":59252,"face-sad-outlined":59253,"face-smiley-outlined":59254,"feed-outlined":59255,"file-certified-outlined":59256,"file-clone-outlined":59257,"file-copy-outlined":59258,"file-dispose-outlined":59259,"file-dollar-certified-outlined":59260,"file-dollar-outlined":59261,"file-download-outlined":59262,"file-export-outlined":59263,"file-lock-outlined":59264,"file-outlined":59265,"file-search-outlined":59266,"file-secured-outlined":59267,"file-statutory-outlined":59268,"file-verified-outlined":59269,"filter-outlined":59270,"folder-outlined":59271,"folder-user-outlined":59272,"funnel-filter-outline":59273,"graph-outlined":59274,"hand-holding-user-outlined":59275,"happy-sun-outlined":59276,"health-bag-outlined":59277,"heart-outlined":59278,"home-active-outlined":59279,"home-outlined":59280,"id-card-outlined":59281,"image-outlined":59282,"import-outlined":59283,"instapay-outlined":59284,"italic":59285,"link-1":59286,"link-2":59287,"list-outlined":59288,"live-help-outlined":59289,"location-on-outlined":59290,"location-outlined":59291,"lock-outlined":59292,"locked-file-outlined":59293,"log-out":59294,"media-content-outlined":59295,"menu-close":59296,"menu-expand":59297,"menu-fold-outlined":59298,"menu-unfold-outlined":59299,"moneybag-outlined":59300,"moon-outlined":59301,"more-horizontal":59302,"more-vertical":59303,"multiple-folders-outlined":59304,"multiple-users-outlined":59305,"near-me-outlined":59306,"node-outlined":59307,"number-points":59308,"number":59309,"overview-outlined":59310,"payment-summary-outlined":59311,"payslip-outlined":59312,"pencil-outlined":59313,"percentage":59314,"phone-outlined":59315,"piggy-bank-outlined":59316,"plane-outlined":59317,"play-circle-outlined":59318,"print-outlined":59319,"qr-code-outlined":59320,"qualification-outlined":59321,"re-assign":59322,"redeem":59323,"refresh":59324,"remove":59325,"reply-outlined":59326,"restart":59327,"return-arrow":59328,"rostering-outlined":59329,"save-outlined":59330,"schedule-outlined":59331,"search-outlined":59332,"search-secured-outlined":59333,"send-outlined":59334,"share-1":59335,"share-2":59336,"share-outlined":59337,"show-chart-outlined":59338,"single-down-arrow":59339,"single-left-arrow":59340,"single-right-arrow":59341,"single-up-arrow":59342,"speaker-active-outlined":59343,"speaker-outlined":59344,"star-circle-outlined":59345,"star-outlined":59346,"stopwatch-outlined":59347,"strikethrough":59348,"suitcase-clock-outlined":59349,"suitcase-outlined":59350,"survey-outlined":59351,"switch-outlined":59352,"sync":59353,"target-outlined":59354,"timesheet-outlined":59355,"today-outlined":59356,"transfer":59357,"trash-bin-outlined":59358,"umbrela-outlined":59359,"unavailable":59360,"underline":59361,"unlock-outlined":59362,"upload-outlined":59363,"user-circle-outlined":59364,"user-gear-outlined":59365,"user-outlined":59366,"user-rectangle-outlined":59367,"video-1-outlined":59368,"video-2-outlined":59369,"wallet-outlined":59370}

package/src/components/Icon/IconList.ts

@@ -15,6 +15,7 @@ const IconList = [
   'bookmark',
   'box-check',
   'box',
+  'bpay',
   'buildings',
   'cake',
   'calendar-clock',
@@ -204,6 +205,7 @@ const IconList = [
   'calendar-star-outlined',
   'camera-outlined',
   'cancel',
+  'charging-station-outlined',
   'chat-bubble-outlined',
   'chat-unread-outlined',
   'checkmark',
@@ -224,11 +226,13 @@ const IconList = [
   'coin-outlined',
   'comment-outlined',
   'contacts-outlined',
+  'contacts-user-outlined',
   'credit-card-outlined',
   'cup-outlined',
   'direction-arrows-outlined',
   'directory-outlined',
   'document-outlined',
+  'dollar-box-outlined',
   'dollar-card-outlined',
   'dollar-coin-shine-outlined',
   'dollar-credit-card-outlined',
@@ -256,6 +260,7 @@ const IconList = [
   'file-clone-outlined',
   'file-copy-outlined',
   'file-dispose-outlined',
+  'file-dollar-certified-outlined',
   'file-dollar-outlined',
   'file-download-outlined',
   'file-export-outlined',
@@ -285,6 +290,7 @@ const IconList = [
   'link-2',
   'list-outlined',
   'live-help-outlined',
+  'location-on-outlined',
   'location-outlined',
   'lock-outlined',
   'locked-file-outlined',

package/src/components/PageControl/StyledPageControl.tsx

@@ -0,0 +1,17 @@
+import { Animated, View } from 'react-native';
+import styled from '@emotion/native';
+
+const StyledPageControl = styled(View)(() => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+}));
+
+const StyledPageControlAnimatedView = styled(Animated.View)(({ theme }) => ({
+  height: theme.__hd__.pageControl.sizes.paginatorHeight,
+  width: theme.__hd__.pageControl.sizes.paginatorWidth,
+  borderRadius: theme.__hd__.pageControl.radii.paginatorBorderRadius,
+  backgroundColor: theme.__hd__.pageControl.colors.paginatorBackgroundColor,
+  marginHorizontal: theme.__hd__.pageControl.space.paginatorMarginHorizontal,
+}));
+
+export { StyledPageControl, StyledPageControlAnimatedView };

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

@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RefreshControl renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "flexDirection": "row",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 8,
+        "marginHorizontal": 8,
+        "opacity": 0.5,
+        "width": 8,
+      }
+    }
+    testID="page-control-indicator0"
+  />
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 8,
+        "marginHorizontal": 8,
+        "opacity": 1,
+        "width": 24,
+      }
+    }
+    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>
+`;

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import PageControl from '..';
+
+describe('RefreshControl', () => {
+  it('renders correctly', () => {
+    const { toJSON, getByTestId } = renderWithTheme(
+      <PageControl numberOfPages={3} currentPage={1} />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getByTestId('page-control-indicator0')).toBeTruthy();
+    expect(getByTestId('page-control-indicator1')).toBeTruthy();
+    expect(getByTestId('page-control-indicator2')).toBeTruthy();
+
+    expect(getByTestId('page-control-indicator0')).toHaveStyle({ width: 8 });
+    expect(getByTestId('page-control-indicator1')).toHaveStyle({ width: 24 });
+    expect(getByTestId('page-control-indicator2')).toHaveStyle({ width: 8 });
+  });
+});

package/src/components/PageControl/index.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { Animated, StyleProp, ViewStyle } from 'react-native';
+
+import {
+  StyledPageControlAnimatedView,
+  StyledPageControl,
+} from './StyledPageControl';
+import { useTheme } from '../../theme';
+
+export interface PageControlProps {
+  /**
+   * The number of pages to display
+   */
+  numberOfPages: number;
+  /**
+   * The current page to display
+   */
+  currentPage: number;
+  /**
+   * Additional styles
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+const PageControl = ({
+  numberOfPages,
+  currentPage = 0,
+  testID,
+  style,
+}: PageControlProps) => {
+  const theme = useTheme();
+
+  const animatedValue = React.useRef(new Animated.Value(currentPage)).current;
+
+  React.useEffect(() => {
+    animatedValue.setValue(currentPage);
+  }, [currentPage]);
+
+  return (
+    <StyledPageControl testID={testID} style={style}>
+      {new Array(numberOfPages).fill('').map((_, index) => {
+        const inputRange = [index - 1, index, index + 1];
+
+        const indicatorWidth = animatedValue.interpolate({
+          inputRange,
+          outputRange: [
+            theme.space.small,
+            theme.space.large,
+            theme.space.small,
+          ],
+          extrapolate: 'clamp',
+        });
+
+        const opacity = animatedValue.interpolate({
+          inputRange,
+          outputRange: [0.5, 1, 0.5],
+          extrapolate: 'clamp',
+        });
+
+        return (
+          <StyledPageControlAnimatedView
+            style={[{ width: indicatorWidth, opacity }]}
+            key={index.toString()}
+            testID={`page-control-indicator${index}`}
+          />
+        );
+      })}
+    </StyledPageControl>
+  );
+};
+
+export default PageControl;

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

@@ -14,6 +14,7 @@ const StyledText = styled(Text)<{
     | 'large'
     | 'xlarge'
     | 'xxxlarge'
+    | 'xxxxlarge'
     | 'xxxxxlarge'
     | '6xlarge'
     | '7xlarge';

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

@@ -21,6 +21,7 @@ export interface TextProps extends NativeTextProps {
     | 'large'
     | 'xlarge'
     | 'xxxlarge'
+    | 'xxxxlarge'
     | 'xxxxxlarge'
     | '6xlarge'
     | '7xlarge';

package/src/index.ts

@@ -53,6 +53,7 @@ import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
 import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
+import PageControl from './components/PageControl';
 
 export {
   theme,
@@ -92,6 +93,7 @@ export {
   List,
   PinInput,
   Progress,
+  PageControl,
   Slider,
   Spinner,
   Swipeable,

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

@@ -254,9 +254,6 @@ Object {
       },
     },
     "carousel": Object {
-      "colors": Object {
-        "paginatorBackgroundColor": "#401960",
-      },
       "fontSizes": Object {
         "heading": 32,
       },
@@ -266,21 +263,12 @@ Object {
       "lineHeights": Object {
         "heading": 44,
       },
-      "radii": Object {
-        "paginatorBorderRadius": 999,
-      },
-      "sizes": Object {
-        "indicatorWidth": 16,
-        "paginatorHeight": 8,
-        "paginatorWidth": 8,
-      },
       "space": Object {
         "footerMarginBottom": 24,
         "footerPaddingHorizontal": 24,
         "footerPaddingVertical": 16,
         "headingMarginBottom": 16,
         "headingMarginTop": 8,
-        "paginatorMarginHorizontal": 8,
       },
     },
     "checkbox": Object {
@@ -498,6 +486,22 @@ Object {
         "leadingStatus": 8,
       },
     },
+    "pageControl": Object {
+      "colors": Object {
+        "paginatorBackgroundColor": "#401960",
+      },
+      "radii": Object {
+        "paginatorBorderRadius": 999,
+      },
+      "sizes": Object {
+        "indicatorWidth": 16,
+        "paginatorHeight": 8,
+        "paginatorWidth": 8,
+      },
+      "space": Object {
+        "paginatorMarginHorizontal": 8,
+      },
+    },
     "pinInput": Object {
       "borderWidths": Object {
         "default": 1,
@@ -938,6 +942,7 @@ Object {
         "small": 12,
         "xlarge": 18,
         "xxxlarge": 24,
+        "xxxxlarge": 28,
         "xxxxxlarge": 32,
       },
       "fonts": Object {
@@ -960,6 +965,7 @@ Object {
         "small": 20,
         "xlarge": 26,
         "xxxlarge": 32,
+        "xxxxlarge": 36,
         "xxxxxlarge": 40,
       },
     },

package/src/theme/components/carousel.ts

@@ -1,29 +1,14 @@
 import type { GlobalTheme } from '../global';
 
 const getCarouselTheme = (theme: GlobalTheme) => {
-  const colors = {
-    paginatorBackgroundColor: theme.colors.primary,
-  };
-
   const space = {
     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 = {
-    indicatorWidth: theme.sizes.medium,
-    paginatorHeight: theme.sizes.small,
-    paginatorWidth: theme.sizes.small,
-  };
-
-  const radii = {
-    paginatorBorderRadius: theme.radii.rounded,
-  };
-
   const fontSizes = {
     heading: theme.fontSizes['xxxxxlarge'],
   };
@@ -36,7 +21,7 @@ const getCarouselTheme = (theme: GlobalTheme) => {
     heading: theme.lineHeights['6xlarge'],
   };
 
-  return { colors, sizes, radii, space, fonts, fontSizes, lineHeights };
+  return { space, fonts, fontSizes, lineHeights };
 };
 
 export default getCarouselTheme;

package/src/theme/components/pageControl.ts

@@ -0,0 +1,25 @@
+import type { GlobalTheme } from '../global';
+
+const getPageControlTheme = (theme: GlobalTheme) => {
+  const colors = {
+    paginatorBackgroundColor: theme.colors.primary,
+  };
+
+  const sizes = {
+    indicatorWidth: theme.sizes.medium,
+    paginatorHeight: theme.sizes.small,
+    paginatorWidth: theme.sizes.small,
+  };
+
+  const space = {
+    paginatorMarginHorizontal: theme.space.small,
+  };
+
+  const radii = {
+    paginatorBorderRadius: theme.radii.rounded,
+  };
+
+  return { colors, sizes, space, radii };
+};
+
+export default getPageControlTheme;

package/src/theme/components/typography.ts

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

package/src/theme/getTheme.ts

@@ -21,6 +21,7 @@ import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
 import getImageTheme from './components/image';
 import getListTheme from './components/list';
+import getPageControlTheme from './components/pageControl';
 import getPinInputTheme from './components/pinInput';
 import getProgressTheme from './components/progress';
 import getRadioTheme from './components/radio';
@@ -65,6 +66,7 @@ type Theme = GlobalTheme & {
     icon: ReturnType<typeof getIconTheme>;
     image: ReturnType<typeof getImageTheme>;
     list: ReturnType<typeof getListTheme>;
+    pageControl: ReturnType<typeof getPageControlTheme>;
     pinInput: ReturnType<typeof getPinInputTheme>;
     progress: ReturnType<typeof getProgressTheme>;
     radio: ReturnType<typeof getRadioTheme>;
@@ -115,6 +117,7 @@ const getTheme = (
       icon: getIconTheme(globalTheme),
       image: getImageTheme(globalTheme),
       list: getListTheme(globalTheme),
+      pageControl: getPageControlTheme(globalTheme),
       pinInput: getPinInputTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
       radio: getRadioTheme(globalTheme),

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

@@ -1,4 +1,4 @@
-import { View } from 'react-native';
+import { View, ImageResizeMode } from 'react-native';
 declare const StyledBackDrop: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -21,6 +21,14 @@ declare const StyledCarouselImage: import("@emotion/native").StyledComponent<imp
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
+declare const StyledCustomSizeCarouselImage: import("@emotion/native").StyledComponent<import("../Image").ImageProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    height?: number | undefined;
+    width?: number | undefined;
+    resizeMode?: ImageResizeMode | undefined;
+}, {}, {}>;
 declare const StyledCarouselContentWrapper: import("@emotion/native").StyledComponent<import("../Box").BoxProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -33,4 +41,8 @@ declare const StyledCarouselFooterWrapper: import("@emotion/native").StyledCompo
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-export { StyledBackDrop, StyledCarouselView, StyledCarouselHeading, StyledCarouselImage, StyledCarouselContentWrapper, StyledCarouselFooterWrapper, };
+declare const StyledPageControl: import("@emotion/native").StyledComponent<import("../PageControl").PageControlProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { StyledBackDrop, StyledCarouselView, StyledCarouselHeading, StyledCarouselImage, StyledCarouselContentWrapper, StyledCarouselFooterWrapper, StyledCustomSizeCarouselImage, StyledPageControl, };

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

@@ -22,11 +22,15 @@ interface CarouselProps extends ViewProps {
      * Render action elements function.
      */
     renderActions?: (pageIndex: number) => JSX.Element;
+    /**
+     * Should show paginations
+     */
+    shouldShowPagination?: (pageIndex: number) => boolean;
     /**
      * Current selected item index.
      */
     selectedItemIndex?: number;
 }
 export declare function useStateFromProp<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>];
-declare const Carousel: ({ items, onItemIndexChange, renderActions, selectedItemIndex, style, ...nativeProps }: CarouselProps) => JSX.Element;
+declare const Carousel: ({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, ...nativeProps }: CarouselProps) => JSX.Element;
 export default Carousel;

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

@@ -1,7 +1,12 @@
 import { ReactNode } from 'react';
-import { ImageSourcePropType } from 'react-native';
+import { ImageSourcePropType, ImageResizeMode } from 'react-native';
+export declare type CarouselImageProps = ImageSourcePropType & {
+    height?: number;
+    width?: number;
+    resizeMode?: ImageResizeMode;
+};
 export declare type CarouselData = {
-    image: ImageSourcePropType | string;
+    image: CarouselImageProps | string;
     content?: ReactNode;
     heading: string;
     body?: string;