@hero-design/rn 8.30.4 → 8.31.0

package/src/components/Typography/Caption/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,287 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Caption has archived intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#737479",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="archived"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has body intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has danger intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#f46363",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="danger"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has disabled intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#bfc1c5",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="disabled"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has info intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#4568fb",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="info"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has inverted intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#ffffff",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="inverted"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has primary intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#401960",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="primary"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has regular fontWeight style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has secondary intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#795e90",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="secondary"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has semi-bold fontWeight style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-SemiBold",
+        "fontSize": 12,
+        "letterSpacing": 0.24,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="semi-bold"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has subdued intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#4d6265",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="subdued"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has success intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#5ace7d",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="success"
+>
+  This is a test
+</Text>
+`;
+
+exports[`Caption has warning intent style 1`] = `
+<Text
+  allowFontScaling={false}
+  style={
+    Array [
+      Object {
+        "color": "#ffbe71",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="warning"
+>
+  This is a test
+</Text>
+`;

package/src/components/Typography/Caption/__tests__/index.spec.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import Caption from '..';
+
+describe('Caption', () => {
+  it('renders correctly', () => {
+    const { queryAllByText } = renderWithTheme(
+      <Caption>This is a test</Caption>
+    );
+
+    expect(queryAllByText('This is a test')).toHaveLength(1);
+  });
+
+  it.each`
+    fontWeight
+    ${'regular'}
+    ${'semi-bold'}
+  `('has $fontWeight fontWeight style', ({ fontWeight }) => {
+    const { toJSON } = renderWithTheme(
+      <Caption fontWeight={fontWeight}>This is a test</Caption>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    intent
+    ${'body'}
+    ${'subdued'}
+    ${'primary'}
+    ${'secondary'}
+    ${'success'}
+    ${'info'}
+    ${'warning'}
+    ${'danger'}
+    ${'inverted'}
+    ${'archived'}
+    ${'disabled'}
+  `('has $intent intent style', ({ intent }) => {
+    const { toJSON } = renderWithTheme(
+      <Caption intent={intent}>This is a test</Caption>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import type {
+  TextProps as NativeTextProps,
+  StyleProp,
+  TextStyle,
+} from 'react-native';
+import { StyledCaption } from './StyledCaption';
+
+export interface CaptionProps extends NativeTextProps {
+  /**
+   * Text content.
+   */
+  children: ReactNode;
+  /**
+   * Font weight of the text.
+   */
+  fontWeight?: 'regular' | 'semi-bold';
+  /**
+   * Visual intent color to apply to the text.
+   */
+  intent?:
+    | 'body'
+    | 'subdued'
+    | 'primary'
+    | 'secondary'
+    | 'success'
+    | 'info'
+    | 'warning'
+    | 'danger'
+    | 'inverted'
+    | 'archived'
+    | 'disabled';
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<TextStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Caption = ({
+  children,
+  fontWeight = 'regular',
+  intent = 'body',
+  allowFontScaling = false,
+  ...nativeProps
+}: CaptionProps) => (
+  <StyledCaption
+    {...nativeProps}
+    themeFontWeight={fontWeight}
+    themeIntent={intent}
+    allowFontScaling={allowFontScaling}
+  >
+    {children}
+  </StyledCaption>
+);
+
+export default Caption;

package/src/components/Typography/index.tsx

@@ -1,11 +1,14 @@
 import Text from './Text';
+import Caption from './Caption';
 
 interface TypographyProps {
   Text: typeof Text;
+  Caption: typeof Caption;
 }
 
 const Typography: TypographyProps = {
   Text,
+  Caption,
 };
 
 export default Typography;

package/src/components/Typography/types.ts

@@ -0,0 +1,18 @@
+export const FONTWEIGHT_MAP = {
+  light: 'light',
+  regular: 'regular',
+  'semi-bold': 'semiBold',
+} as const;
+
+export type ThemeIntent =
+  | 'body'
+  | 'subdued'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'info'
+  | 'warning'
+  | 'danger'
+  | 'inverted'
+  | 'archived'
+  | 'disabled';

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

@@ -1114,6 +1114,7 @@ Object {
       "fontSizes": Object {
         "6xlarge": 36,
         "7xlarge": 42,
+        "caption": 12,
         "large": 16,
         "medium": 14,
         "small": 12,
@@ -1138,6 +1139,7 @@ Object {
       "lineHeights": Object {
         "6xlarge": 44,
         "7xlarge": 50,
+        "caption": 16,
         "large": 24,
         "medium": 22,
         "small": 16,

package/src/theme/components/typography.ts

@@ -26,6 +26,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xxxxxlarge: theme.fontSizes.xxxxxlarge,
     '6xlarge': theme.fontSizes['6xlarge'],
     '7xlarge': theme.fontSizes['7xlarge'],
+    caption: theme.fontSizes.small,
   };
 
   const lineHeights = {
@@ -39,6 +40,7 @@ const getTypographyTheme = (theme: GlobalTheme) => {
     xxxxxlarge: theme.lineHeights.xxxxxlarge,
     '6xlarge': theme.lineHeights['6xlarge'],
     '7xlarge': theme.lineHeights['7xlarge'],
+    caption: theme.lineHeights.small,
   };
 
   return { colors, fonts: theme.fonts, fontSizes, lineHeights };

package/src/utils/helpers.ts

@@ -3,7 +3,10 @@ import { Platform } from 'react-native';
 export const isIOS = Platform.OS === 'ios';
 export const isAndroid = Platform.OS === 'android';
 
-export function pick<O, T extends keyof O>(keys: T[], obj: O): Pick<O, T> {
+export function pick<O extends object, T extends keyof O>(
+  keys: T[],
+  obj: O
+): Pick<O, T> {
   return keys
     .filter((key) => key in obj)
     .reduce<Partial<O>>(

package/types/components/Accordion/AccordionItem.d.ts

@@ -1,7 +1,7 @@
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { Variant } from './StyledAccordion';
-export declare type AccordionItemProps = {
+export type AccordionItemProps = {
     header: string | ReactElement;
     content: ReactElement;
     open?: boolean;

package/types/components/Accordion/StyledAccordion.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TouchableOpacity, View } from 'react-native';
-export declare type Variant = 'default' | 'card';
+export type Variant = 'default' | 'card';
 export declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Avatar/StyledAvatar.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { View, Image, TouchableOpacity } from 'react-native';
 import { TextProps } from '../Typography/Text';
-declare type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
-declare type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
+type ThemeSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge' | 'xxxxlarge' | 'xxxxxlarge';
+type ThemeIntent = 'primary' | 'info' | 'danger' | 'success' | 'warning';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Badge/StyledBadge.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Animated } from 'react-native';
-declare type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
-declare type ThemePadding = 'narrowContent' | 'wideContent';
+type ThemeIntent = 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'archived';
+type ThemePadding = 'narrowContent' | 'wideContent';
 declare const StyledView: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
     children?: import("react").ReactNode;
 } & {

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

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import type { IconName } from '../Icon';
-export declare type BottomNavigationTabType = {
+export type BottomNavigationTabType = {
     key: string;
     title?: string;
     icon: IconName;

package/types/components/BottomSheet/BottomSheetContext.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare type BottomSheetContextType = {
+export type BottomSheetContextType = {
     setInternalShowDivider: (value: boolean) => void;
 };
 declare const BottomSheetContext: import("react").Context<BottomSheetContextType>;

package/types/components/Box/config.d.ts

@@ -165,6 +165,6 @@ declare const config: {
     };
 };
 export declare const flexPropsKey: readonly ["alignContent", "alignItems", "alignSelf", "display", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "justifyContent"];
-export declare type ConfigType = typeof config;
-export declare type FlexPropsKeyType = typeof flexPropsKey[number];
+export type ConfigType = typeof config;
+export type FlexPropsKeyType = typeof flexPropsKey[number];
 export default config;

package/types/components/Box/types.d.ts

@@ -10,11 +10,11 @@ export interface ThemeScale {
     radii: keyof Radii;
     borderWidths: keyof BorderWidths;
 }
-declare type ConfigKeyType = keyof ConfigType;
-export declare type StyleProps = {
+type ConfigKeyType = keyof ConfigType;
+export type StyleProps = {
     [key in ConfigKeyType]?: ThemeScale[ConfigType[key]['scale']];
 };
-export declare type FlexStyleProps = Pick<Omit<ViewStyle, keyof StyleProps>, FlexPropsKeyType>;
+export type FlexStyleProps = Pick<Omit<ViewStyle, keyof StyleProps>, FlexPropsKeyType>;
 export interface BoxViewProps extends ViewProps {
     /**
      * Box's content.

package/types/components/Button/LoadingIndicator/StyledLoadingIndicator.d.ts

@@ -2,7 +2,7 @@
 import { View } from 'react-native';
 import type { ViewProps } from 'react-native';
 import type { Theme } from '@emotion/react';
-declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
+type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
 declare const StyledLoadingIndicatorWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Button/LoadingIndicator/index.d.ts

@@ -1,5 +1,5 @@
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
-declare type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
+type ThemeVariant = 'basic-transparent' | 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
 interface LoadingIndicatorProps extends ViewProps {
     /**
      * Size of the loading dot.

package/types/components/Button/StyledButton.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { TouchableHighlight, View } from 'react-native';
 import type { Theme } from '@emotion/react';
-declare type Intent = 'primary' | 'secondary' | 'danger';
-declare type ThemeVariant = 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
+type Intent = 'primary' | 'secondary' | 'danger';
+type ThemeVariant = 'filled-primary' | 'filled-secondary' | 'filled-danger' | 'outlined-primary' | 'outlined-secondary' | 'outlined-danger' | 'text-primary' | 'text-secondary' | 'text-danger';
 declare const StyledButtonContainer: import("@emotion/native").StyledComponent<import("react-native").TouchableHighlightProps & {
     theme?: Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
-export declare type CardCarouselHandles = {
+export type CardCarouselHandles = {
     snapToIndex: (index: number) => void;
 };
 export interface CardCarouselProps {

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

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

package/types/components/Divider/StyledDivider.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { View } from 'react-native';
-declare type MarginSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+type MarginSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 declare const StyledDivider: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Drawer/DragableDrawer/helpers.d.ts

@@ -1,5 +1,5 @@
 export declare const getOffset: (height: number, percentage: number) => number;
-export declare type SnapPointsData = {
+export type SnapPointsData = {
     list: number[];
     minHeightOffset: number;
     maxHeightOffset: number;

package/types/components/Empty/StyledEmpty.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { View } from 'react-native';
-declare type ThemeVariant = 'light' | 'dark';
+type ThemeVariant = 'light' | 'dark';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Error/StyledError.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Modal, View } from 'react-native';
-declare type ErrorVariant = 'full-screen' | 'in-page';
+type ErrorVariant = 'full-screen' | 'in-page';
 declare const StyledErrorModal: import("@emotion/native").StyledComponent<import("react-native").ModalBaseProps & import("react-native").ModalPropsIOS & import("react-native").ModalPropsAndroid & import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/FAB/AnimatedFABIcon.d.ts

@@ -1,5 +1,5 @@
 import type { IconProps } from '../Icon';
-declare type Props = {
+type Props = {
     active?: boolean;
 } & IconProps;
 declare const AnimatedFABIcon: ({ active, ...iconProps }: Props) => JSX.Element;

package/types/components/Icon/AnimatedIcon.d.ts

@@ -1,5 +1,5 @@
 import type { ComponentProps } from 'react';
 import StyledHeroIcon from './HeroIcon';
-declare type AnimatedIconProps = ComponentProps<typeof StyledHeroIcon>;
+type AnimatedIconProps = ComponentProps<typeof StyledHeroIcon>;
 declare const AnimatedIcon: ({ style, ...otherProps }: AnimatedIconProps) => JSX.Element;
 export default AnimatedIcon;