@hero-design/rn 7.3.2 → 7.6.0

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Switch from '..';
+
+describe('Switch', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(<Switch testID="switch" />);
+    expect(wrapper.queryAllByTestId('switch')).toHaveLength(1);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it('trigger press function correctly', () => {
+    const pressFn = jest.fn();
+    const wrapper = renderWithTheme(
+      <Switch testID="switch" onPress={pressFn} />
+    );
+    fireEvent.press(wrapper.getByTestId('switch'));
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(pressFn).toBeCalled();
+  });
+});

package/src/components/Switch/index.tsx

@@ -0,0 +1,87 @@
+import { useTheme } from '@emotion/react';
+import React, { ReactElement, useState, useEffect } from 'react';
+
+import {
+  StyleProp,
+  ViewStyle,
+  Animated,
+  Easing,
+  TouchableWithoutFeedback,
+} from 'react-native';
+
+import {
+  StyledDisabledWrapper,
+  StyledKnot,
+  StyledThumbWrapper,
+  StyledWrapper,
+} from './StyledSwitch';
+
+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;
+}
+
+const Switch = ({
+  size = 'medium',
+  disabled = false,
+  checked,
+  onPress,
+  style,
+  testID,
+}: SwitchProps): ReactElement => {
+  const theme = useTheme();
+
+  const offset = checked
+    ? theme.__hd__.switch.widths[size] -
+      theme.__hd__.switch.thumbSizes[size] -
+      theme.__hd__.switch.spaces[size] * 2
+    : theme.__hd__.switch.spaces.inactive;
+
+  const [animatedOffset] = useState(() => new Animated.Value(offset));
+
+  useEffect(() => {
+    Animated.timing(animatedOffset, {
+      toValue: offset,
+      easing: Easing.inOut(Easing.cubic),
+      useNativeDriver: false,
+    }).start();
+  }, [checked]);
+  return (
+    <TouchableWithoutFeedback
+      testID={testID}
+      onPress={onPress}
+      disabled={disabled}
+    >
+      <StyledWrapper themeChecked={checked} themeSize={size} style={style}>
+        {disabled && <StyledDisabledWrapper themeSize={size} />}
+        <StyledThumbWrapper themeSize={size}>
+          <StyledKnot themeSize={size} style={{ left: animatedOffset }} />
+        </StyledThumbWrapper>
+      </StyledWrapper>
+    </TouchableWithoutFeedback>
+  );
+};
+
+export default Switch;

package/src/components/TextInput/StyledTextInput.tsx

@@ -0,0 +1,30 @@
+import { TextInput, View } from 'react-native';
+import styled from '@emotion/native';
+import Typography from '../Typography';
+
+const Container = styled(View)(({ theme }) => ({
+  position: 'relative',
+  width: '100%',
+  borderWidth: theme.__hd__.textInput.borderWidths.container,
+  borderRadius: theme.__hd__.textInput.radii.container,
+  padding: theme.__hd__.textInput.space.containerPadding,
+  flexDirection: 'row',
+  alignItems: 'center',
+}));
+
+const Label = styled(Typography.Text)(({ theme }) => ({
+  position: 'absolute',
+  left: theme.__hd__.textInput.space.labelLeft,
+  top: theme.__hd__.textInput.space.labelTop,
+  backgroundColor: theme.__hd__.textInput.colors.labelBackground,
+  zIndex: 1,
+  paddingHorizontal: theme.__hd__.textInput.space.labelHorizontalPadding,
+}));
+
+const StyledTextInput = styled(TextInput)(({ theme }) => ({
+  flex: 1,
+  fontSize: theme.__hd__.textInput.fontSizes.text,
+  marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
+}));
+
+export { Container, Label, StyledTextInput };

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { Container, Label, StyledTextInput } from '../StyledTextInput';
+
+describe('Container', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(<Container />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('Label', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(<Label>Label</Label>);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledTextInput', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(<StyledTextInput />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Container renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "borderRadius": 8,
+        "borderWidth": 1,
+        "flexDirection": "row",
+        "padding": 16,
+        "position": "relative",
+        "width": "100%",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Label renders correctly 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 14,
+        "letterSpacing": 0.42,
+        "lineHeight": 22,
+      },
+      Array [
+        Object {
+          "backgroundColor": "#ffffff",
+          "left": 16,
+          "paddingHorizontal": 4,
+          "position": "absolute",
+          "top": -10,
+          "zIndex": 1,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeFontSize="medium"
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  Label
+</Text>
+`;
+
+exports[`StyledTextInput renders correctly 1`] = `
+<TextInput
+  style={
+    Array [
+      Object {
+        "flex": 1,
+        "fontSize": 16,
+        "marginHorizontal": 8,
+      },
+      undefined,
+    ]
+  }
+/>
+`;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import TextInput from '../index';
+
+describe('TextInput', () => {
+  it('renders label, prefix and native TextInput', () => {
+    const { queryAllByTestId, queryAllByText } = renderWithTheme(
+      <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

@@ -0,0 +1,74 @@
+import React from 'react';
+import {
+  TextInputProps as NativeTextInputProps,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { Container, Label, StyledTextInput } from './StyledTextInput';
+import Icon, { IconName } from '../Icon';
+
+export interface TextInputProps extends NativeTextInputProps {
+  /**
+   * Field label.
+   */
+  label?: string;
+  /**
+   * Name of Icon to render on the left side of the input, before the user's cursor.
+   */
+  prefix?: IconName;
+  /**
+   * 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 label for the input (Android).
+   */
+  accessibilityLabelledBy?: string;
+}
+
+const TextInput = ({
+  label,
+  prefix,
+  suffix,
+  style,
+  textStyle,
+  testID,
+  accessibilityLabelledBy,
+  ...nativeProps
+}: TextInputProps) => (
+  <Container style={style} testID={testID}>
+    {label && (
+      <Label
+        nativeID={accessibilityLabelledBy}
+        testID="input-label"
+        fontSize="small"
+      >
+        {label}
+      </Label>
+    )}
+    {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>
+);
+
+export default TextInput;

package/src/index.ts

@@ -2,19 +2,28 @@ import { ThemeProvider, useTheme } from '@emotion/react';
 import theme, { getTheme } 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';
+import BottomSheet from './components/BottomSheet';
 import Button from './components/Button';
 import Card from './components/Card';
 import Collapse from './components/Collapse';
+import ContentNavigator from './components/ContentNavigator';
 import Divider from './components/Divider';
 import Drawer from './components/Drawer';
 import FAB from './components/FAB';
 import Icon from './components/Icon';
 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 {
@@ -23,19 +32,28 @@ export {
   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,
 };
 

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,
@@ -81,6 +102,33 @@ Object {
         "titleMarginTop": 4,
       },
     },
+    "bottomSheet": Object {
+      "colors": Object {
+        "backdrop": "#292a2b",
+        "background": "#ffffff",
+        "shadow": "#292a2b",
+      },
+      "radii": Object {
+        "default": 16,
+      },
+      "shadows": Object {
+        "elevation": 10,
+        "offset": Object {
+          "height": 3,
+          "width": 0,
+        },
+        "opacity": 0.27,
+        "radius": 4.65,
+      },
+      "sizes": Object {
+        "closeIconWidth": 72,
+        "sectionHeight": 64,
+      },
+      "space": Object {
+        "horizontalPadding": 24,
+        "verticalPadding": 8,
+      },
+    },
     "button": Object {
       "borderWidth": Object {
         "default": 2,
@@ -124,6 +172,11 @@ Object {
         "default": 12,
       },
     },
+    "contentNavigator": Object {
+      "space": Object {
+        "valueHorizontalPadding": 8,
+      },
+    },
     "divider": Object {
       "borderWidths": Object {
         "default": 1,
@@ -210,6 +263,7 @@ Object {
     "icon": Object {
       "colors": Object {
         "danger": "#de350b",
+        "disabledText": "#8b8d92",
         "info": "#4568fb",
         "primary": "#7622d7",
         "success": "#01b39c",
@@ -243,6 +297,98 @@ Object {
         "strokeWidth": 8,
       },
     },
+    "radio": Object {
+      "borderWidths": Object {
+        "circle": 2,
+      },
+      "colors": Object {
+        "checkedCircle": "#7622d7",
+        "checkedWrapper": "#f1e9fb",
+        "circle": "#000000",
+        "wrapper": "#ffffff",
+      },
+      "radii": Object {
+        "wrapper": 4,
+      },
+      "sizes": Object {
+        "circle": 20,
+        "innerCircle": 10,
+      },
+      "space": Object {
+        "circleLeftMargin": 8,
+        "groupTopMargin": 4,
+        "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",
+      },
+      "radii": Object {
+        "default": 8,
+      },
+      "space": Object {
+        "spinnerDot": 16,
+        "spinnerDotPadding": 8,
+        "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,
@@ -296,6 +442,28 @@ Object {
         "verticalPadding": 2,
       },
     },
+    "textInput": Object {
+      "borderWidths": Object {
+        "container": 1,
+      },
+      "colors": Object {
+        "border": "#292a2b",
+        "labelBackground": "#ffffff",
+      },
+      "fontSizes": Object {
+        "text": 16,
+      },
+      "radii": Object {
+        "container": 8,
+      },
+      "space": Object {
+        "containerPadding": 16,
+        "inputHorizontalMargin": 8,
+        "labelHorizontalPadding": 4,
+        "labelLeft": 16,
+        "labelTop": -10,
+      },
+    },
     "typography": Object {
       "colors": Object {
         "body": "#292a2b",
@@ -323,19 +491,23 @@ Object {
   },
   "borderWidths": Object {
     "base": 1,
+    "medium": 2,
   },
   "colors": Object {
     "archived": "#ccced1",
     "backgroundDark": "#292a2b",
     "backgroundLight": "#fafbfb",
+    "black": "#000000",
     "danger": "#de350b",
     "dangerBackground": "#fcebe7",
     "dangerLight": "#f2ae9d",
     "disabledLightText": "#ccced1",
     "disabledText": "#8b8d92",
+    "inactiveBackground": "#727478",
     "info": "#4568fb",
     "infoBackground": "#ecf0ff",
     "infoLight": "#d1d9fe",
+    "infoMediumLight": "#1dbeee",
     "invertedText": "#ffffff",
     "outline": "#dadbde",
     "platformBackground": "#ffffff",
@@ -382,8 +554,10 @@ Object {
   },
   "radii": Object {
     "base": 4,
+    "large": 12,
     "medium": 8,
     "rounded": 999,
+    "xlarge": 16,
   },
   "space": Object {
     "large": 24,

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/bottomSheet.ts

@@ -0,0 +1,34 @@
+import { GlobalTheme } from '../global';
+
+const getBottomSheetTheme = (theme: GlobalTheme) => {
+  const colors = {
+    shadow: theme.colors.backgroundDark,
+    background: theme.colors.platformBackground,
+    backdrop: theme.colors.backgroundDark,
+  };
+
+  const sizes = {
+    sectionHeight: 64,
+    closeIconWidth: 72,
+  };
+
+  const space = {
+    horizontalPadding: theme.space.large,
+    verticalPadding: theme.space.small,
+  };
+
+  const shadows = {
+    offset: { width: 0, height: 3 },
+    opacity: 0.27,
+    radius: 4.65,
+    elevation: 10,
+  };
+
+  const radii = {
+    default: theme.radii.xlarge,
+  };
+
+  return { colors, shadows, radii, sizes, space };
+};
+
+export default getBottomSheetTheme;