@hero-design/rn 7.3.2 → 7.4.0

package/src/components/Spinner/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Spinner renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {},
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "height": "100%",
+          "justifyContent": "center",
+        },
+        undefined,
+      ]
+    }
+    testID="spinner"
+  >
+    <View
+      collapsable={false}
+      nativeID="animatedComponent"
+      style={
+        Object {
+          "transform": Array [
+            Object {
+              "rotate": "0deg",
+            },
+          ],
+        }
+      }
+    >
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+              "marginBottom": 8,
+            },
+            Object {},
+          ]
+        }
+        themePosition="top"
+      >
+        <View
+          collapsable={false}
+          nativeID="animatedComponent"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#7622d7",
+                "borderRadius": 8,
+                "height": 16,
+                "opacity": 1,
+                "width": 16,
+              },
+              Object {},
+            ]
+          }
+          themePosition="topLeft"
+        />
+        <View
+          collapsable={false}
+          nativeID="animatedComponent"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#7622d7",
+                "borderRadius": 8,
+                "height": 16,
+                "marginLeft": 8,
+                "opacity": 0.7,
+                "width": 16,
+              },
+              Object {},
+            ]
+          }
+          themePosition="topRight"
+        />
+      </View>
+      <View
+        collapsable={false}
+        nativeID="animatedComponent"
+        style={
+          Array [
+            Object {
+              "flexDirection": "row",
+              "marginBottom": 0,
+            },
+            Object {},
+          ]
+        }
+        themePosition="bottom"
+      >
+        <View
+          collapsable={false}
+          nativeID="animatedComponent"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#7622d7",
+                "borderRadius": 8,
+                "height": 16,
+                "opacity": 0.5,
+                "width": 16,
+              },
+              Object {},
+            ]
+          }
+          themePosition="bottomLeft"
+        />
+        <View
+          collapsable={false}
+          nativeID="animatedComponent"
+          style={
+            Array [
+              Object {
+                "backgroundColor": "#7622d7",
+                "borderRadius": 8,
+                "height": 16,
+                "marginLeft": 8,
+                "opacity": 0.3,
+                "width": 16,
+              },
+              Object {},
+            ]
+          }
+          themePosition="bottomRight"
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Spinner from '..';
+
+describe('Spinner', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(<Spinner testID="spinner" />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Spinner/index.tsx

@@ -0,0 +1,22 @@
+import React, { ReactElement } from 'react';
+import { ViewProps } from 'react-native';
+
+import { StyledSpinnerContainer, StyledView } from './StyledSpinner';
+import { AnimatedSpinner } from './AnimatedSpinner';
+
+interface SpinnerProps extends ViewProps {
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+}
+
+const Spinner = ({ testID, ...nativeProps }: SpinnerProps): ReactElement => (
+  <StyledView {...nativeProps}>
+    <StyledSpinnerContainer testID={testID}>
+      <AnimatedSpinner />
+    </StyledSpinnerContainer>
+  </StyledView>
+);
+
+export default Spinner;

package/src/components/TextInput/StyledTextInput.tsx

@@ -0,0 +1,34 @@
+import { TextInput, View } from 'react-native';
+import styled from '@emotion/native';
+import Typography from '../Typography';
+import Icon from '../Icon';
+
+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 Prefix = styled(Icon)(({ theme }) => ({
+  marginRight: theme.__hd__.textInput.space.prefixMarginRight,
+}));
+
+const StyledTextInput = styled(TextInput)(({ theme }) => ({
+  flex: 1,
+  fontSize: theme.__hd__.textInput.fontSizes.text,
+}));
+
+export { Container, Label, Prefix, StyledTextInput };

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { Container, Label, Prefix, 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('Prefix', () => {
+  it('renders correctly', () => {
+    const { toJSON } = renderWithTheme(<Prefix icon="user" />);
+
+    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,88 @@
+// 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[`Prefix renders correctly 1`] = `
+<HeroIcon
+  name="user"
+  style={
+    Array [
+      Object {
+        "color": "#292a2b",
+        "fontSize": 24,
+      },
+      Array [
+        Object {
+          "marginRight": 8,
+        },
+        undefined,
+      ],
+    ]
+  }
+  themeIntent="text"
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledTextInput renders correctly 1`] = `
+<TextInput
+  style={
+    Array [
+      Object {
+        "flex": 1,
+        "fontSize": 16,
+      },
+      undefined,
+    ]
+  }
+/>
+`;

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

@@ -0,0 +1,16 @@
+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" />
+    );
+
+    expect(queryAllByText('Input Label')).toHaveLength(1);
+    expect(queryAllByTestId('input-label')).toHaveLength(1);
+    expect(queryAllByTestId('input-prefix')).toHaveLength(1);
+    expect(queryAllByTestId('text-input')).toHaveLength(1);
+  });
+});

package/src/components/TextInput/index.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import {
+  TextInputProps as NativeTextInputProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { Container, Label, Prefix, StyledTextInput } from './StyledTextInput';
+import { IconName } from '../Icon';
+
+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;
+  /**
+   * Additional style.
+   */
+  style?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * Accessibility lable for the input (Android).
+   */
+  accessibilityLabelledBy?: string;
+}
+
+const TextInput = ({
+  label,
+  prefix,
+  style,
+  testID,
+  accessibilityLabelledBy,
+  ...nativeProps
+}: TextInputProps) => (
+  <Container style={style} testID={testID}>
+    {label && (
+      <Label
+        nativeID={accessibilityLabelledBy}
+        testID="input-label"
+        fontSize="small"
+      >
+        {label}
+      </Label>
+    )}
+    {prefix && <Prefix testID="input-prefix" icon={prefix} size="xsmall" />}
+    <StyledTextInput
+      testID="text-input"
+      // @ts-ignore
+      accessibilityLabelledBy={accessibilityLabelledBy}
+      {...nativeProps}
+    />
+  </Container>
+);
+
+export default TextInput;

package/src/index.ts

@@ -5,16 +5,22 @@ import { scale } from './utils/scale';
 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 Tabs from './components/Tabs';
 import Tag from './components/Tag';
+import TextInput from './components/TextInput';
 import Typography from './components/Typography';
 
 export {
@@ -26,16 +32,22 @@ export {
   Avatar,
   Badge,
   BottomNavigation,
+  BottomSheet,
   Button,
   Card,
   Collapse,
+  ContentNavigator,
   Divider,
   Drawer,
   FAB,
   Icon,
   Progress,
+  Spinner,
+  Radio,
+  SectionHeading,
   Tabs,
   Tag,
+  TextInput,
   Typography,
 };
 

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

@@ -81,6 +81,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 +151,11 @@ Object {
         "default": 12,
       },
     },
+    "contentNavigator": Object {
+      "space": Object {
+        "valueHorizontalPadding": 8,
+      },
+    },
     "divider": Object {
       "borderWidths": Object {
         "default": 1,
@@ -210,6 +242,7 @@ Object {
     "icon": Object {
       "colors": Object {
         "danger": "#de350b",
+        "disabledText": "#8b8d92",
         "info": "#4568fb",
         "primary": "#7622d7",
         "success": "#01b39c",
@@ -243,6 +276,42 @@ 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,
+      },
+    },
+    "spinner": Object {
+      "color": Object {
+        "default": "#7622d7",
+      },
+      "radii": Object {
+        "default": 8,
+      },
+      "space": Object {
+        "spinnerDot": 16,
+        "spinnerDotPadding": 8,
+        "spinnerTextPaddingTop": 8,
+      },
+    },
     "tabs": Object {
       "borderWidths": Object {
         "headerBottom": 1,
@@ -296,6 +365,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,
+        "labelHorizontalPadding": 4,
+        "labelLeft": 16,
+        "labelTop": -10,
+        "prefixMarginRight": 8,
+      },
+    },
     "typography": Object {
       "colors": Object {
         "body": "#292a2b",
@@ -323,11 +414,13 @@ Object {
   },
   "borderWidths": Object {
     "base": 1,
+    "medium": 2,
   },
   "colors": Object {
     "archived": "#ccced1",
     "backgroundDark": "#292a2b",
     "backgroundLight": "#fafbfb",
+    "black": "#000000",
     "danger": "#de350b",
     "dangerBackground": "#fcebe7",
     "dangerLight": "#f2ae9d",
@@ -382,8 +475,10 @@ Object {
   },
   "radii": Object {
     "base": 4,
+    "large": 12,
     "medium": 8,
     "rounded": 999,
+    "xlarge": 16,
   },
   "space": Object {
     "large": 24,

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;

package/src/theme/components/contentNavigator.ts

@@ -0,0 +1,11 @@
+import { GlobalTheme } from '../global';
+
+const getContentNavigatorTheme = (theme: GlobalTheme) => {
+  const space = {
+    valueHorizontalPadding: theme.space.small,
+  };
+
+  return { space };
+};
+
+export default getContentNavigatorTheme;

package/src/theme/components/icon.ts

@@ -8,6 +8,7 @@ const getIconTheme = (theme: GlobalTheme) => {
     danger: theme.colors.danger,
     success: theme.colors.success,
     warning: theme.colors.warning,
+    disabledText: theme.colors.disabledText,
   };
 
   const sizes = {

package/src/theme/components/radio.ts

@@ -0,0 +1,34 @@
+import { scale } from '../../utils/scale';
+import { GlobalTheme } from '../global';
+
+const getRadioTheme = (theme: GlobalTheme) => {
+  const colors = {
+    circle: theme.colors.black,
+    checkedCircle: theme.colors.primary,
+    wrapper: theme.colors.platformBackground,
+    checkedWrapper: theme.colors.primaryBackground,
+  };
+
+  const space = {
+    wrapperPadding: theme.space.medium, // left padding should be 12 according to the design
+    circleLeftMargin: theme.space.small,
+    groupTopMargin: theme.space.xsmall,
+  };
+
+  const sizes = {
+    circle: scale(20),
+    innerCircle: scale(10),
+  };
+
+  const borderWidths = {
+    circle: theme.borderWidths.medium,
+  };
+
+  const radii = {
+    wrapper: theme.radii.base,
+  };
+
+  return { sizes, borderWidths, space, colors, radii };
+};
+
+export default getRadioTheme;