@hero-design/rn 7.5.0 → 7.6.0

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

@@ -19,6 +19,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';
@@ -47,6 +49,8 @@ export {
   Spinner,
   Radio,
   SectionHeading,
+  Select,
+  Switch,
   Tabs,
   Tag,
   TextInput,

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

@@ -320,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",
@@ -333,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,
@@ -402,10 +458,10 @@ Object {
       },
       "space": Object {
         "containerPadding": 16,
+        "inputHorizontalMargin": 8,
         "labelHorizontalPadding": 4,
         "labelLeft": 16,
         "labelTop": -10,
-        "prefixMarginRight": 8,
       },
     },
     "typography": Object {
@@ -447,6 +503,7 @@ Object {
     "dangerLight": "#f2ae9d",
     "disabledLightText": "#ccced1",
     "disabledText": "#8b8d92",
+    "inactiveBackground": "#727478",
     "info": "#4568fb",
     "infoBackground": "#ecf0ff",
     "infoLight": "#d1d9fe",

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

@@ -30,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

@@ -20,8 +20,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';
@@ -42,8 +45,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>;
@@ -71,9 +77,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),

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;

package/types/components/Radio/RadioGroup.d.ts

@@ -1,21 +1,24 @@
 import { ReactElement } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-export interface RadioGroupProps {
+import { OptionType } from './types';
+export interface RadioGroupProps<T> {
     /**
      * An array of radio options to be selected.
      */
-    options: {
-        text: string;
-        value: string;
-    }[];
+    options: OptionType<T>[];
     /**
      * Radio input value.
      */
-    value: string;
+    value: T;
     /**
      * Press event handler receiving selected radio's value.
      */
-    onPress: (value: string) => void;
+    onPress: (value: T) => void;
+    /**
+     * Used to extract a unique key for a given option at the specified index. Key is used for caching and as the react key to track item re-ordering.
+     * The default extractor checks option.key, and then falls back to using the index, like React does.
+     */
+    keyExtractor?: (option: OptionType<T>, index?: number) => string;
     /**
      * Additional style.
      */
@@ -25,5 +28,5 @@ export interface RadioGroupProps {
      */
     testID?: string;
 }
-declare const RadioGroup: ({ value, onPress, options, style, testID, }: RadioGroupProps) => ReactElement;
+declare const RadioGroup: <T>({ value, onPress, options, keyExtractor, style, testID, }: RadioGroupProps<T>) => ReactElement;
 export default RadioGroup;

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

@@ -1,4 +1,4 @@
 declare const CompoundRadio: {
-    readonly Group: ({ value, onPress, options, style, testID, }: import("./RadioGroup").RadioGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    readonly Group: <T>({ value, onPress, options, keyExtractor, style, testID, }: import("./RadioGroup").RadioGroupProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 };
 export default CompoundRadio;

package/types/components/Radio/types.d.ts

@@ -0,0 +1,5 @@
+export declare type OptionType<T> = {
+    value: T;
+    text: string;
+    key?: string;
+};

package/types/components/Select/MultiSelect/Footer.d.ts

@@ -0,0 +1,5 @@
+declare function Footer({ label, onPress }: {
+    label: string;
+    onPress: () => void;
+}): JSX.Element;
+export default Footer;

package/types/components/Select/MultiSelect/OptionList.d.ts

@@ -0,0 +1,3 @@
+import { MultiSelectProps } from '.';
+declare function OptionList<T>({ value, options, onPress, keyExtractor, }: Pick<MultiSelectProps<T>, 'value' | 'options' | 'onPress' | 'keyExtractor'>): JSX.Element;
+export default OptionList;

package/types/components/Select/MultiSelect/StyledMultiSelect.d.ts

@@ -0,0 +1,26 @@
+import { View, TouchableOpacity } from 'react-native';
+declare const OptionWrapper: import("@emotion/native").StyledComponent<import("react-native").TouchableOpacityProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSelected: boolean;
+}, {}, {
+    ref?: import("react").Ref<TouchableOpacity> | undefined;
+}>;
+declare const OptionListWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const Spacer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const FooterText: import("@emotion/native").StyledComponent<import("../../Typography/Text").TextProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, {}, {}>;
+export { OptionWrapper, OptionListWrapper, Spacer, FooterText };

package/types/components/Select/MultiSelect/__tests__/StyledMultiSelect.spec.d.ts

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

package/types/components/Select/MultiSelect/__tests__/index.spec.d.ts

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

package/types/components/Select/MultiSelect/index.d.ts

@@ -0,0 +1,39 @@
+import { StyleProp, ViewStyle } from 'react-native';
+import { OptionType } from './types';
+export interface MultiSelectProps<T> {
+    /**
+     * An array of options to be selected.
+     */
+    options: OptionType<T>[];
+    /**
+     * Current selected value.
+     */
+    value: T[];
+    /**
+     * onPress event handler.
+     */
+    onPress: (value: T[]) => void;
+    /**
+     * Field label.
+     */
+    label: string;
+    /**
+     * Footer label.
+     */
+    footerLabel: string;
+    /**
+     * Used to extract a unique key for a given option at the specified index. Key is used for caching and as the react key to track item re-ordering.
+     * The default extractor checks option.key, and then falls back to using the index, like React does.
+     */
+    keyExtractor?: (option: OptionType<T>, index?: number) => string;
+    /**
+     * Additional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare function MultiSelect<T>({ options, value, testID, style, label, footerLabel, onPress, }: MultiSelectProps<T>): JSX.Element;
+export default MultiSelect;

package/types/components/Select/MultiSelect/types.d.ts

@@ -0,0 +1,5 @@
+export declare type OptionType<T> = {
+    value: T;
+    text: string;
+    key?: string;
+};

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

@@ -0,0 +1,5 @@
+import MultiSelect from './MultiSelect';
+declare const CompoundSelect: {
+    readonly Multi: typeof MultiSelect;
+};
+export default CompoundSelect;

package/types/components/Switch/StyledSwitch.d.ts

@@ -0,0 +1,36 @@
+import { Animated, View } from 'react-native';
+declare type ThemeSize = 'small' | 'medium';
+declare const StyledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeChecked: boolean | undefined;
+    themeSize: ThemeSize;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledDisabledWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledThumbWrapper: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {
+    ref?: import("react").Ref<View> | undefined;
+}>;
+declare const StyledKnot: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<View>> & {
+    children?: import("react").ReactNode;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    themeSize: ThemeSize;
+}, {}, {}>;
+export { StyledWrapper, StyledDisabledWrapper, StyledThumbWrapper, StyledKnot };

package/types/components/Switch/__tests__/StyledHeading.spec.d.ts

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

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

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

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

@@ -0,0 +1,30 @@
+import { ReactElement } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface SwitchProps {
+    /**
+     * Control whether the switch is checked
+     */
+    checked?: boolean;
+    /**
+     * Whether the switch is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Event handler.
+     */
+    onPress?: () => void;
+    /**
+     * Size of the switch
+     */
+    size?: 'small' | 'medium';
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const Switch: ({ size, disabled, checked, onPress, style, testID, }: SwitchProps) => ReactElement;
+export default Switch;

package/types/components/TextInput/StyledTextInput.d.ts

@@ -9,14 +9,10 @@ declare const Label: import("@emotion/native").StyledComponent<import("../Typogr
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const Prefix: import("@emotion/native").StyledComponent<import("../Icon").IconProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {}>;
 declare const StyledTextInput: import("@emotion/native").StyledComponent<import("react-native").TextInputProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {
     ref?: import("react").Ref<TextInput> | undefined;
 }>;
-export { Container, Label, Prefix, StyledTextInput };
+export { Container, Label, StyledTextInput };

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

@@ -1,6 +1,6 @@
-import { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle } from 'react-native';
+import { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
 import { IconName } from '../Icon';
-interface TextInputProps extends NativeTextInputProps {
+export interface TextInputProps extends NativeTextInputProps {
     /**
      * Field label.
      */
@@ -10,17 +10,25 @@ 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;
 }
-declare const TextInput: ({ label, prefix, style, testID, accessibilityLabelledBy, ...nativeProps }: TextInputProps) => JSX.Element;
+declare const TextInput: ({ label, prefix, suffix, style, textStyle, testID, accessibilityLabelledBy, ...nativeProps }: TextInputProps) => JSX.Element;
 export default TextInput;

package/types/index.d.ts

@@ -18,9 +18,11 @@ 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';
 import Typography from './components/Typography';
-export { theme, getTheme, useTheme, scale, ThemeProvider, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Button, Card, Collapse, ContentNavigator, Divider, Drawer, FAB, Icon, Progress, Spinner, Radio, SectionHeading, Tabs, Tag, TextInput, Typography, };
+export { theme, getTheme, useTheme, scale, ThemeProvider, Alert, Avatar, Badge, BottomNavigation, BottomSheet, Button, Card, Collapse, ContentNavigator, Divider, Drawer, FAB, Icon, Progress, Spinner, Radio, SectionHeading, Select, Switch, Tabs, Tag, TextInput, Typography, };
 export * from './types';