@hero-design/rn 7.17.0 → 7.18.0

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

@@ -15,7 +15,7 @@ exports[`Checkbox renders correctly 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "borderColor": "#7622d7",
+      "borderColor": "#8505a2",
       "borderRadius": 4,
       "borderWidth": 2,
       "display": "flex",
@@ -46,7 +46,7 @@ exports[`Checkbox trigger press function correctly 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "borderColor": "#7622d7",
+      "borderColor": "#8505a2",
       "borderRadius": 4,
       "borderWidth": 2,
       "display": "flex",

package/src/components/ContentNavigator/__tests__/__snapshots__/StyledContentNavigator.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`Value has correct style 1`] = `
   style={
     Array [
       Object {
-        "color": "#292a2b",
+        "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,

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

@@ -37,7 +37,7 @@ exports[`rendering renders correctly 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontSize": 24,
           },
           undefined,
@@ -51,7 +51,7 @@ exports[`rendering renders correctly 1`] = `
     style={
       Array [
         Object {
-          "color": "#292a2b",
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 14,
           "letterSpacing": 0.42,
@@ -96,7 +96,7 @@ exports[`rendering renders correctly 1`] = `
       style={
         Array [
           Object {
-            "color": "#292a2b",
+            "color": "#001f23",
             "fontSize": 24,
           },
           undefined,
@@ -146,7 +146,7 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
       style={
         Array [
           Object {
-            "color": "#8b8d92",
+            "color": "#808f91",
             "fontSize": 24,
           },
           undefined,
@@ -160,7 +160,7 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
     style={
       Array [
         Object {
-          "color": "#292a2b",
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 14,
           "letterSpacing": 0.42,
@@ -205,7 +205,7 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
       style={
         Array [
           Object {
-            "color": "#8b8d92",
+            "color": "#808f91",
             "fontSize": 24,
           },
           undefined,

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -49,7 +49,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
           style={
             Array [
               Object {
-                "borderColor": "#292a2b",
+                "borderColor": "#001f23",
                 "borderRadius": 8,
                 "borderWidth": 1,
                 "bottom": 0,
@@ -84,7 +84,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
             style={
               Array [
                 Object {
-                  "color": "#292a2b",
+                  "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
@@ -92,7 +92,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                 },
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                   },
                   undefined,
                 ],
@@ -115,6 +115,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                 "alignSelf": "stretch",
                 "flexDirection": "row",
                 "flexGrow": 2,
+                "flexShrink": 1,
               },
               undefined,
             ]
@@ -140,7 +141,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                   "textAlignVertical": "center",
                 },
                 Object {
-                  "color": "#292a2b",
+                  "color": "#001f23",
                 },
               ]
             }
@@ -153,7 +154,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 16,
               },
               undefined,

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -49,7 +49,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
           style={
             Array [
               Object {
-                "borderColor": "#292a2b",
+                "borderColor": "#001f23",
                 "borderRadius": 8,
                 "borderWidth": 1,
                 "bottom": 0,
@@ -84,7 +84,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
             style={
               Array [
                 Object {
-                  "color": "#292a2b",
+                  "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
                   "fontSize": 12,
                   "letterSpacing": 0.36,
@@ -92,7 +92,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 },
                 Array [
                   Object {
-                    "color": "#292a2b",
+                    "color": "#001f23",
                   },
                   undefined,
                 ],
@@ -115,6 +115,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 "alignSelf": "stretch",
                 "flexDirection": "row",
                 "flexGrow": 2,
+                "flexShrink": 1,
               },
               undefined,
             ]
@@ -140,7 +141,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   "textAlignVertical": "center",
                 },
                 Object {
-                  "color": "#292a2b",
+                  "color": "#001f23",
                 },
               ]
             }
@@ -153,7 +154,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
           style={
             Array [
               Object {
-                "color": "#292a2b",
+                "color": "#001f23",
                 "fontSize": 16,
               },
               undefined,
@@ -266,7 +267,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
               onStartShouldSetResponder={[Function]}
               style={
                 Object {
-                  "backgroundColor": "#292a2b",
+                  "backgroundColor": "#001f23",
                   "bottom": 0,
                   "left": 0,
                   "opacity": 0.48,
@@ -288,7 +289,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   "borderTopRightRadius": 16,
                   "elevation": 10,
                   "maxHeight": "94%",
-                  "shadowColor": "#292a2b",
+                  "shadowColor": "#001f23",
                   "shadowOffset": Object {
                     "height": 3,
                     "width": 0,
@@ -334,7 +335,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                     style={
                       Array [
                         Object {
-                          "color": "#292a2b",
+                          "color": "#001f23",
                           "fontFamily": "BeVietnamPro-SemiBold",
                           "fontSize": 16,
                           "letterSpacing": 0.48,
@@ -388,7 +389,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "#292a2b",
+                            "color": "#001f23",
                             "fontSize": 20,
                           },
                           undefined,
@@ -404,7 +405,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 style={
                   Array [
                     Object {
-                      "borderBottomColor": "#dadbde",
+                      "borderBottomColor": "#e8e9ea",
                       "borderBottomWidth": 1,
                       "maxWidth": "100%",
                     },
@@ -440,7 +441,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "borderBottomColor": "#dadbde",
+                        "borderBottomColor": "#e8e9ea",
                         "borderBottomWidth": 1,
                         "maxWidth": "100%",
                       },
@@ -485,7 +486,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                       style={
                         Array [
                           Object {
-                            "color": "#7622d7",
+                            "color": "#8505a2",
                             "fontFamily": "BeVietnamPro-SemiBold",
                             "fontSize": 16,
                             "letterSpacing": 0.48,

package/src/components/Divider/__tests__/__snapshots__/StyledDivider.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`Divider has large marginHorizontal style 1`] = `
   style={
     Array [
       Object {
-        "borderBottomColor": "#dadbde",
+        "borderBottomColor": "#e8e9ea",
         "borderBottomWidth": 1,
         "marginHorizontal": 24,
         "maxWidth": "100%",
@@ -22,7 +22,7 @@ exports[`Divider has large marginVertical style 1`] = `
   style={
     Array [
       Object {
-        "borderBottomColor": "#dadbde",
+        "borderBottomColor": "#e8e9ea",
         "borderBottomWidth": 1,
         "marginVertical": 24,
         "maxWidth": "100%",
@@ -39,7 +39,7 @@ exports[`Divider has medium marginHorizontal style 1`] = `
   style={
     Array [
       Object {
-        "borderBottomColor": "#dadbde",
+        "borderBottomColor": "#e8e9ea",
         "borderBottomWidth": 1,
         "marginHorizontal": 16,
         "maxWidth": "100%",
@@ -56,7 +56,7 @@ exports[`Divider has medium marginVertical style 1`] = `
   style={
     Array [
       Object {
-        "borderBottomColor": "#dadbde",
+        "borderBottomColor": "#e8e9ea",
         "borderBottomWidth": 1,
         "marginVertical": 16,
         "maxWidth": "100%",
@@ -73,7 +73,7 @@ exports[`Divider has small marginHorizontal style 1`] = `
   style={
     Array [
       Object {
-        "borderBottomColor": "#dadbde",
+        "borderBottomColor": "#e8e9ea",
         "borderBottomWidth": 1,
         "marginHorizontal": 8,
         "maxWidth": "100%",
@@ -90,7 +90,7 @@ exports[`Divider has small marginVertical style 1`] = `
   style={
     Array [
       Object {
-        "borderBottomColor": "#dadbde",
+        "borderBottomColor": "#e8e9ea",
         "borderBottomWidth": 1,
         "marginVertical": 8,
         "maxWidth": "100%",
@@ -107,7 +107,7 @@ exports[`Divider has undefined marginHorizontal style 1`] = `
   style={
     Array [
       Object {
-        "borderBottomColor": "#dadbde",
+        "borderBottomColor": "#e8e9ea",
         "borderBottomWidth": 1,
         "maxWidth": "100%",
       },
@@ -122,7 +122,7 @@ exports[`Divider has undefined marginVertical style 1`] = `
   style={
     Array [
       Object {
-        "borderBottomColor": "#dadbde",
+        "borderBottomColor": "#e8e9ea",
         "borderBottomWidth": 1,
         "maxWidth": "100%",
       },
@@ -137,7 +137,7 @@ exports[`Divider has xlarge marginHorizontal style 1`] = `
   style={
     Array [
       Object {
-        "borderBottomColor": "#dadbde",
+        "borderBottomColor": "#e8e9ea",
         "borderBottomWidth": 1,
         "marginHorizontal": 32,
         "maxWidth": "100%",
@@ -154,7 +154,7 @@ exports[`Divider has xlarge marginVertical style 1`] = `
   style={
     Array [
       Object {
-        "borderBottomColor": "#dadbde",
+        "borderBottomColor": "#e8e9ea",
         "borderBottomWidth": 1,
         "marginVertical": 32,
         "maxWidth": "100%",
@@ -171,7 +171,7 @@ exports[`Divider has xsmall marginHorizontal style 1`] = `
   style={
     Array [
       Object {
-        "borderBottomColor": "#dadbde",
+        "borderBottomColor": "#e8e9ea",
         "borderBottomWidth": 1,
         "marginHorizontal": 4,
         "maxWidth": "100%",
@@ -188,7 +188,7 @@ exports[`Divider has xsmall marginVertical style 1`] = `
   style={
     Array [
       Object {
-        "borderBottomColor": "#dadbde",
+        "borderBottomColor": "#e8e9ea",
         "borderBottomWidth": 1,
         "marginVertical": 4,
         "maxWidth": "100%",

package/src/components/Drawer/DragableDrawer/__tests__/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,99 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DragableDrawer renders correctly 1`] = `
+<View
+  enableShadow={true}
+  pointerEvents="box-none"
+  style={
+    Array [
+      Object {
+        "bottom": 0,
+        "elevation": 9999,
+        "flexDirection": "column-reverse",
+        "left": 0,
+        "overflow": "hidden",
+        "position": "absolute",
+        "right": 0,
+        "shadowColor": "#001f23",
+        "shadowOffset": Object {
+          "height": 3,
+          "width": 0,
+        },
+        "shadowOpacity": 0.27,
+        "shadowRadius": 4.65,
+        "top": 0,
+        "zIndex": 9999,
+      },
+      undefined,
+    ]
+  }
+  testID="drawer"
+>
+  <View
+    collapsable={false}
+    enableShadow={true}
+    nativeID="animatedComponent"
+    onLayout={[Function]}
+    style={
+      Object {
+        "backgroundColor": "#ffffff",
+        "borderTopLeftRadius": 16,
+        "borderTopRightRadius": 16,
+        "elevation": 10,
+        "maxHeight": "100%",
+        "overflow": "hidden",
+        "transform": Array [
+          Object {
+            "scaleY": 0,
+          },
+          Object {
+            "translateY": 0,
+          },
+        ],
+      }
+    }
+  >
+    <View
+      onMoveShouldSetResponder={[Function]}
+      onMoveShouldSetResponderCapture={[Function]}
+      onResponderEnd={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderReject={[Function]}
+      onResponderRelease={[Function]}
+      onResponderStart={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      onStartShouldSetResponderCapture={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "#ffffff",
+            "paddingVertical": 8,
+          },
+          undefined,
+        ]
+      }
+    >
+      <View
+        style={
+          Array [
+            Object {
+              "backgroundColor": "#001f23",
+              "borderRadius": 4,
+              "height": 4,
+              "width": 56,
+            },
+            undefined,
+          ]
+        }
+      />
+    </View>
+    <Text>
+      Drawer Content
+    </Text>
+  </View>
+</View>
+`;

package/src/components/Drawer/DragableDrawer/__tests__/helpers.spec.ts

@@ -0,0 +1,39 @@
+import {
+  calculateAnimatedToValue,
+  calculateSnapPointsData,
+  getOffset,
+} from '../helpers';
+
+describe('calculateSnapPointsData', () => {
+  it('returns correct values', () => {
+    const actual = calculateSnapPointsData(20, 1000, [10, 30, 40, 80]);
+    expect(actual).toEqual({
+      list: [800, 700, 600, 200, 0],
+      minHeightOffset: 800,
+      maxHeightOffset: 0,
+    });
+  });
+});
+
+describe('calculateAnimatedToValue', () => {
+  it('returns correct value', () => {
+    const actual = calculateAnimatedToValue(350, [800, 500, 300, 0]);
+    expect(actual).toEqual(300);
+  });
+});
+
+describe('getOffset', () => {
+  it.each`
+    percentage | expected
+    ${-2}      | ${1000}
+    ${0}       | ${1000}
+    ${150}     | ${0}
+    ${30}      | ${700}
+  `(
+    'returns $expected when percentage is $percentage',
+    ({ percentage, expected }) => {
+      const actual = getOffset(1000, percentage);
+      expect(actual).toEqual(expected);
+    }
+  );
+});

package/src/components/Drawer/DragableDrawer/__tests__/index.spec.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Text } from 'react-native';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import DragableDrawer from '..';
+
+describe('DragableDrawer', () => {
+  it('renders correctly', () => {
+    const { toJSON, getByTestId } = renderWithTheme(
+      <DragableDrawer
+        initialHeightPercentage={30}
+        minimumHeightPercentage={10}
+        onExpanded={jest.fn()}
+        onCollapsed={jest.fn()}
+        snapPoints={[40, 70]}
+        testID="drawer"
+      >
+        <Text>Drawer Content</Text>
+      </DragableDrawer>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByTestId('drawer')).toBeTruthy();
+  });
+});

package/src/components/Drawer/DragableDrawer/helpers.ts

@@ -0,0 +1,43 @@
+export const getOffset = (height: number, percentage: number) => {
+  if (percentage < 0) return height;
+  if (percentage > 100) return 0;
+
+  return height * ((100 - percentage) / 100);
+};
+
+export type SnapPointsData = {
+  list: number[];
+  minHeightOffset: number;
+  maxHeightOffset: number;
+};
+
+export const calculateSnapPointsData = (
+  minimumHeight: number,
+  height: number,
+  snapPoints: number[]
+): SnapPointsData => {
+  const filteredSnapPoints = snapPoints.filter(value => value >= minimumHeight);
+  const snapPointsOffsetValues = [
+    minimumHeight,
+    ...filteredSnapPoints,
+  ].map(value => getOffset(height, value));
+  const uniqSnapPointOffsetValues = Array.from(
+    new Set([...snapPointsOffsetValues, 0])
+  );
+
+  return {
+    list: uniqSnapPointOffsetValues,
+    minHeightOffset: Math.max(...uniqSnapPointOffsetValues), // Furthest from max height
+    maxHeightOffset: 0, // Max height
+  };
+};
+
+export const calculateAnimatedToValue = (
+  position: number,
+  heightSnapPoints: number[]
+) => {
+  const distances = heightSnapPoints.map(height => Math.abs(position - height));
+
+  const minIndex = distances.indexOf(Math.min(...distances));
+  return heightSnapPoints[minIndex];
+};