@hero-design/rn 7.4.0 → 7.6.1-alpha

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

@@ -5,12 +5,13 @@ import TextInput from '../index';
 describe('TextInput', () => {
   it('renders label, prefix and native TextInput', () => {
     const { queryAllByTestId, queryAllByText } = renderWithTheme(
-      <TextInput label="Input Label" prefix="user" />
+      <TextInput label="Input Label" prefix="user" suffix="arrow-down" />
     );
 
     expect(queryAllByText('Input Label')).toHaveLength(1);
     expect(queryAllByTestId('input-label')).toHaveLength(1);
     expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+    expect(queryAllByTestId('input-suffix')).toHaveLength(1);
     expect(queryAllByTestId('text-input')).toHaveLength(1);
   });
 });

package/src/components/TextInput/index.tsx

@@ -3,11 +3,12 @@ import {
   TextInputProps as NativeTextInputProps,
   StyleProp,
   ViewStyle,
+  TextStyle,
 } from 'react-native';
-import { Container, Label, Prefix, StyledTextInput } from './StyledTextInput';
-import { IconName } from '../Icon';
+import { Container, Label, StyledTextInput } from './StyledTextInput';
+import Icon, { IconName } from '../Icon';
 
-interface TextInputProps extends NativeTextInputProps {
+export interface TextInputProps extends NativeTextInputProps {
   /**
    * Field label.
    */
@@ -17,15 +18,23 @@ interface TextInputProps extends NativeTextInputProps {
    */
   prefix?: IconName;
   /**
-   * Additional style.
+   * Name of Icon to render on the right side of the input.
+   */
+  suffix?: IconName;
+  /**
+   * Additional wrapper style.
    */
   style?: StyleProp<ViewStyle>;
+  /**
+   * Input text style.
+   */
+  textStyle?: StyleProp<TextStyle>;
   /**
    * Testing id of the component.
    */
   testID?: string;
   /**
-   * Accessibility lable for the input (Android).
+   * Accessibility label for the input (Android).
    */
   accessibilityLabelledBy?: string;
 }
@@ -33,7 +42,9 @@ interface TextInputProps extends NativeTextInputProps {
 const TextInput = ({
   label,
   prefix,
+  suffix,
   style,
+  textStyle,
   testID,
   accessibilityLabelledBy,
   ...nativeProps
@@ -48,13 +59,15 @@ const TextInput = ({
         {label}
       </Label>
     )}
-    {prefix && <Prefix testID="input-prefix" icon={prefix} size="xsmall" />}
+    {prefix && <Icon testID="input-prefix" icon={prefix} size="xsmall" />}
     <StyledTextInput
+      style={textStyle}
       testID="text-input"
       // @ts-ignore
       accessibilityLabelledBy={accessibilityLabelledBy}
       {...nativeProps}
     />
+    {suffix && <Icon testID="input-suffix" icon={suffix} size="xsmall" />}
   </Container>
 );
 

package/src/index.ts

@@ -1,7 +1,7 @@
-import { ThemeProvider, useTheme } from '@emotion/react';
-import theme, { getTheme } from './theme';
+import theme, { getTheme, ThemeProvider, useTheme } from './theme';
 import { scale } from './utils/scale';
 
+import Alert from './components/Alert';
 import Avatar from './components/Avatar';
 import Badge from './components/Badge';
 import BottomNavigation from './components/BottomNavigation';
@@ -18,6 +18,8 @@ import Progress from './components/Progress';
 import Spinner from './components/Spinner';
 import Radio from './components/Radio';
 import SectionHeading from './components/SectionHeading';
+import Select from './components/Select';
+import Switch from './components/Switch';
 import Tabs from './components/Tabs';
 import Tag from './components/Tag';
 import TextInput from './components/TextInput';
@@ -29,6 +31,7 @@ export {
   useTheme,
   scale,
   ThemeProvider,
+  Alert,
   Avatar,
   Badge,
   BottomNavigation,
@@ -45,6 +48,8 @@ export {
   Spinner,
   Radio,
   SectionHeading,
+  Select,
+  Switch,
   Tabs,
   Tag,
   TextInput,

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

@@ -3,6 +3,27 @@
 exports[`theme returns correct theme object 1`] = `
 Object {
   "__hd__": Object {
+    "alert": Object {
+      "borderWidths": Object {
+        "base": 1,
+      },
+      "colors": Object {
+        "divider": "#fafbfb",
+        "error": "#de350b",
+        "info": "#1dbeee",
+        "success": "#01b39c",
+        "warning": "#ffa234",
+      },
+      "radii": Object {
+        "default": 16,
+      },
+      "sizes": Object {
+        "height": 48,
+      },
+      "space": Object {
+        "padding": 16,
+      },
+    },
     "avatar": Object {
       "borderWidths": Object {
         "default": 1,
@@ -299,6 +320,32 @@ Object {
         "wrapperPadding": 16,
       },
     },
+    "sectionHeading": Object {
+      "colors": Object {
+        "background": "#dadbde",
+      },
+      "space": Object {
+        "headingHorizontalPadding": 16,
+        "headingMarginBottom": 16,
+        "headingVerticalPadding": 8,
+        "iconMarginRight": 8,
+      },
+    },
+    "select": Object {
+      "colors": Object {
+        "checkedOption": "#f1e9fb",
+        "footerText": "#7622d7",
+        "option": "#ffffff",
+      },
+      "radii": Object {
+        "option": 4,
+      },
+      "space": Object {
+        "optionListPadding": 16,
+        "optionListSpacing": 4,
+        "optionPadding": 16,
+      },
+    },
     "spinner": Object {
       "color": Object {
         "default": "#7622d7",
@@ -312,6 +359,36 @@ Object {
         "spinnerTextPaddingTop": 8,
       },
     },
+    "switch": Object {
+      "borderWidths": Object {
+        "default": 1,
+      },
+      "colors": Object {
+        "active": "#7622d7",
+        "inactive": "#727478",
+        "thumb": "#ffffff",
+      },
+      "heights": Object {
+        "medium": 28.799999999999997,
+        "small": 24,
+      },
+      "radii": Object {
+        "rounded": 999,
+      },
+      "spaces": Object {
+        "inactive": 0,
+        "medium": 4,
+        "small": 4,
+      },
+      "thumbSizes": Object {
+        "medium": 20.8,
+        "small": 16,
+      },
+      "widths": Object {
+        "medium": 56,
+        "small": 48,
+      },
+    },
     "tabs": Object {
       "borderWidths": Object {
         "headerBottom": 1,
@@ -381,10 +458,10 @@ Object {
       },
       "space": Object {
         "containerPadding": 16,
+        "inputHorizontalMargin": 8,
         "labelHorizontalPadding": 4,
         "labelLeft": 16,
         "labelTop": -10,
-        "prefixMarginRight": 8,
       },
     },
     "typography": Object {
@@ -426,9 +503,11 @@ Object {
     "dangerLight": "#f2ae9d",
     "disabledLightText": "#ccced1",
     "disabledText": "#8b8d92",
+    "inactiveBackground": "#727478",
     "info": "#4568fb",
     "infoBackground": "#ecf0ff",
     "infoLight": "#d1d9fe",
+    "infoMediumLight": "#1dbeee",
     "invertedText": "#ffffff",
     "outline": "#dadbde",
     "platformBackground": "#ffffff",

package/src/theme/components/alert.ts

@@ -0,0 +1,32 @@
+import { scale } from '../../utils/scale';
+import { GlobalTheme } from '../global';
+
+const getAlertTheme = (theme: GlobalTheme) => {
+  const colors = {
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+    error: theme.colors.danger,
+    info: theme.colors.infoMediumLight,
+    divider: theme.colors.backgroundLight,
+  };
+
+  const sizes = {
+    height: scale(48),
+  };
+
+  const space = {
+    padding: theme.space.medium,
+  };
+
+  const radii = {
+    default: theme.radii.xlarge,
+  };
+
+  const borderWidths = {
+    base: theme.borderWidths.base,
+  };
+
+  return { colors, radii, sizes, space, borderWidths };
+};
+
+export default getAlertTheme;

package/src/theme/components/sectionHeading.ts

@@ -0,0 +1,18 @@
+import { GlobalTheme } from '../global';
+
+const getSectionHeadingTheme = (theme: GlobalTheme) => {
+  const colors = {
+    background: theme.colors.outline,
+  };
+
+  const space = {
+    headingVerticalPadding: theme.space.small,
+    headingHorizontalPadding: theme.space.medium,
+    headingMarginBottom: theme.space.medium,
+    iconMarginRight: theme.space.small,
+  };
+
+  return { colors, space };
+};
+
+export default getSectionHeadingTheme;

package/src/theme/components/select.ts

@@ -0,0 +1,23 @@
+import { GlobalTheme } from '../global';
+
+const getSelectTheme = (theme: GlobalTheme) => {
+  const colors = {
+    option: theme.colors.platformBackground,
+    checkedOption: theme.colors.primaryBackground,
+    footerText: theme.colors.primary,
+  };
+
+  const space = {
+    optionPadding: theme.space.medium,
+    optionListPadding: theme.space.medium, // left padding should be 12 according to the design
+    optionListSpacing: theme.space.xsmall,
+  };
+
+  const radii = {
+    option: theme.radii.base,
+  };
+
+  return { space, colors, radii };
+};
+
+export default getSelectTheme;

package/src/theme/components/switch.ts

@@ -0,0 +1,50 @@
+import { GlobalTheme } from '../global';
+
+const getSwitchTheme = (theme: GlobalTheme) => {
+  const colors = {
+    thumb: theme.colors.platformBackground,
+    active: theme.colors.primary,
+    inactive: theme.colors.inactiveBackground,
+  };
+
+  const thumbSizes = {
+    small: theme.space.medium,
+    medium: theme.space.medium * 1.3,
+  };
+
+  const widths = {
+    small: theme.space.xxxlarge,
+    medium: theme.space.xxxxlarge,
+  };
+
+  const heights = {
+    small: theme.space.large,
+    medium: theme.space.large * 1.2,
+  };
+
+  const spaces = {
+    small: theme.space.xsmall,
+    medium: theme.space.xsmall,
+    inactive: 0,
+  };
+
+  const radii = {
+    rounded: theme.radii.rounded,
+  };
+
+  const borderWidths = {
+    default: theme.borderWidths.base,
+  };
+
+  return {
+    colors,
+    thumbSizes,
+    widths,
+    heights,
+    spaces,
+    radii,
+    borderWidths,
+  };
+};
+
+export default getSwitchTheme;

package/src/theme/components/textInput.ts

@@ -11,7 +11,7 @@ const getTextInputTheme = (theme: GlobalTheme) => {
     labelLeft: theme.space.medium,
     labelTop: theme.lineHeights.small / -2,
     labelHorizontalPadding: theme.space.xsmall,
-    prefixMarginRight: theme.space.small,
+    inputHorizontalMargin: theme.space.small,
   };
 
   const fontSizes = {

package/src/theme/global/colors.ts

@@ -8,6 +8,7 @@ const systemPalette = {
   secondary: palette.dodgerBlue,
   secondaryLight: palette.dodgerBlueLight75,
   info: palette.dodgerBlue,
+  infoMediumLight: palette.blue,
   infoLight: palette.dodgerBlueLight75,
   infoBackground: palette.dodgerBlueLight90,
   success: palette.green,
@@ -29,6 +30,7 @@ const systemPalette = {
   outline: palette.greyLight60,
   archived: palette.greyLight45,
   black: palette.black,
+  inactiveBackground: palette.greyDark30,
 };
 
 type SystemPalette = typeof systemPalette;

package/src/theme/index.ts

@@ -1,3 +1,5 @@
+import * as Emotion from '@emotion/react';
+
 import {
   GlobalTheme,
   Scale,
@@ -7,6 +9,7 @@ import {
   defaultSystemPalette,
 } from './global';
 
+import getAlertTheme from './components/alert';
 import getAvatarTheme from './components/avatar';
 import getBadgeTheme from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
@@ -19,8 +22,11 @@ import getDrawerTheme from './components/drawer';
 import getFABTheme from './components/fab';
 import getIconTheme from './components/icon';
 import getProgressTheme from './components/progress';
-import getSpinnerTheme from './components/spinner';
 import getRadioTheme from './components/radio';
+import getSectionHeadingTheme from './components/sectionHeading';
+import getSelectTheme from './components/select';
+import getSpinnerTheme from './components/spinner';
+import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
 import getTagTheme from './components/tag';
 import getTextInputTheme from './components/textInput';
@@ -28,6 +34,7 @@ import getTypographyTheme from './components/typography';
 
 type Theme = GlobalTheme & {
   __hd__: {
+    alert: ReturnType<typeof getAlertTheme>;
     avatar: ReturnType<typeof getAvatarTheme>;
     badge: ReturnType<typeof getBadgeTheme>;
     bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
@@ -40,8 +47,11 @@ type Theme = GlobalTheme & {
     fab: ReturnType<typeof getFABTheme>;
     icon: ReturnType<typeof getIconTheme>;
     progress: ReturnType<typeof getProgressTheme>;
-    spinner: ReturnType<typeof getSpinnerTheme>;
     radio: ReturnType<typeof getRadioTheme>;
+    sectionHeading: ReturnType<typeof getSectionHeadingTheme>;
+    select: ReturnType<typeof getSelectTheme>;
+    spinner: ReturnType<typeof getSpinnerTheme>;
+    switch: ReturnType<typeof getSwitchTheme>;
     tabs: ReturnType<typeof getTabsTheme>;
     tag: ReturnType<typeof getTagTheme>;
     textInput: ReturnType<typeof getTextInputTheme>;
@@ -58,6 +68,7 @@ const getTheme = (
     ...globalTheme,
     __hd__: {
       avatar: getAvatarTheme(globalTheme),
+      alert: getAlertTheme(globalTheme),
       badge: getBadgeTheme(globalTheme),
       bottomNavigation: getBottomNavigationTheme(globalTheme),
       bottomSheet: getBottomSheetTheme(globalTheme),
@@ -68,9 +79,12 @@ const getTheme = (
       drawer: getDrawerTheme(globalTheme),
       fab: getFABTheme(globalTheme),
       icon: getIconTheme(globalTheme),
-      spinner: getSpinnerTheme(globalTheme),
       progress: getProgressTheme(globalTheme),
       radio: getRadioTheme(globalTheme),
+      sectionHeading: getSectionHeadingTheme(globalTheme),
+      select: getSelectTheme(globalTheme),
+      spinner: getSpinnerTheme(globalTheme),
+      switch: getSwitchTheme(globalTheme),
       tabs: getTabsTheme(globalTheme),
       tag: getTagTheme(globalTheme),
       textInput: getTextInputTheme(globalTheme),
@@ -81,6 +95,18 @@ const getTheme = (
 
 const theme = getTheme();
 
-export { Theme, getTheme };
+export interface ThemeProviderProps {
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+  children: React.ReactNode;
+}
+
+interface ThemeProviderType {
+  (props: ThemeProviderProps): React.ReactElement;
+}
+
+const ThemeProvider = Emotion.ThemeProvider as ThemeProviderType;
+
+const useTheme = Emotion.useTheme as () => Theme;
+export { Theme, getTheme, ThemeProvider, useTheme };
 
 export default theme;

package/types/components/Alert/StyledAlert.d.ts

@@ -0,0 +1,37 @@
+import { TouchableOpacity, View, ViewProps } from 'react-native';
+declare const Container: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeVariant: 'default' | 'round';
+    themeIntent: 'success' | 'info' | 'warning' | 'error';
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const IconContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const TextContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const ContentContainer: import("@emotion/native").StyledComponent<ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    showDivider: boolean;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const CTAWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+export { Container, ContentContainer, TextContainer, IconContainer, CTAWrapper, };

package/types/components/Alert/__tests__/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,42 @@
+import { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { IconName } from '../Icon';
+interface AlertProps {
+    /**
+     * Alert title.
+     */
+    title?: string | ReactElement;
+    /**
+     * Alert content.
+     */
+    content: string | ReactElement;
+    /**
+     * Icon name of the alert.
+     * - undefined: use default icon according to Alert intent.
+     * - null: no icon at all.
+     * - IconName: an icon identifier from hero-design icon list.
+     */
+    icon?: null | IconName;
+    /**
+     * Visual intent color to apply to alert.
+     */
+    intent?: 'success' | 'info' | 'warning' | 'error';
+    /**
+     * Closing callback. When onClose is available, an X button will be rendered on the right side of alert. The callback will be called when user clicks on X button.
+     */
+    onClose?: () => void;
+    /**
+     * Use rounded variant.
+     */
+    variant?: 'default' | 'round';
+    /**
+     * Addtional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Alert: ({ content, icon, title, intent, onClose, variant, style, testID, }: AlertProps) => JSX.Element;
+export default Alert;

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

@@ -26,6 +26,10 @@ interface BottomSheetProps {
      * is being dismiss by interacting outside of the bottom sheet.
      */
     onRequestClose?: () => void;
+    /**
+     * Callback that is called once the bottom sheet has been dismissed.
+     */
+    onDismiss?: () => void;
     /**
      * Displays an X button on bottom sheet header that will invoke onRequestClose callback on press.
      */
@@ -47,5 +51,5 @@ interface BottomSheetProps {
      */
     testID?: string;
 }
-declare const BottomSheet: ({ open, header, footer, children, onOpen, onRequestClose, showCloseButton, hasBackdrop, showDivider, style, testID, }: BottomSheetProps) => JSX.Element;
+declare const BottomSheet: ({ open, header, footer, children, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, }: BottomSheetProps) => JSX.Element;
 export default BottomSheet;