@hero-design/rn 7.5.0 → 7.6.1-alpha.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

@@ -1,5 +1,4 @@
-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';
@@ -19,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';
@@ -47,6 +48,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

@@ -1,3 +1,5 @@
+import * as Emotion from '@emotion/react';
+
 import {
   GlobalTheme,
   Scale,
@@ -20,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';
@@ -42,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>;
@@ -71,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),
@@ -84,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/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/Checkbox/StyledCheckbox.d.ts

@@ -0,0 +1,8 @@
+import { TouchableOpacity } from 'react-native';
+declare const StyledWrapper: 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 { StyledWrapper };

package/types/components/Checkbox/__tests__/StyledCheckbox.spec.d.ts

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

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

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

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

@@ -0,0 +1,25 @@
+import { StyleProp, ViewStyle } from 'react-native';
+export interface CheckboxProps {
+    /**
+     * Control whether the switch is checked
+     */
+    checked?: boolean;
+    /**
+     * Whether the switch is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Event handler.
+     */
+    onPress?: () => void;
+    /**
+     * Addditional style.
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Testing id of the component.
+     */
+    testID?: string;
+}
+declare const CheckBox: ({ checked, disabled, onPress, style, testID, }: CheckboxProps) => JSX.Element;
+export default CheckBox;