@hero-design/rn 7.17.1 → 7.18.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.17.1",
+  "version": "7.18.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.17.1",
+    "@hero-design/colors": "7.18.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"

package/src/components/BottomNavigation/index.tsx

@@ -142,7 +142,7 @@ const BottomNavigation = ({
                     intent={active ? 'primary' : 'text'}
                     testID={`hero-icon-${icon}`}
                   />
-                  {title && (
+                  {!!title && (
                     <StyledBottomBarText
                       fontSize="small"
                       fontWeight="semi-bold"

package/src/components/Button/Button.tsx

@@ -60,6 +60,7 @@ export interface ButtonProps {
   text: ReactChild;
   /**
    * Button type.
+   * basic-transparent is deprecated and will be removed in the next major release.
    */
   variant?: 'basic-transparent' | 'filled' | 'outlined' | 'text';
 }

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/StyledLoadingIndicator.spec.tsx.snap

@@ -105,7 +105,7 @@ exports[`StyledLoadingIndicator has outlined-primary style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#8505a2",
+        "backgroundColor": "#001f23",
         "borderRadius": 8,
         "height": 12,
         "marginBottom": 4,
@@ -165,7 +165,7 @@ exports[`StyledLoadingIndicator has text-primary style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#8505a2",
+        "backgroundColor": "#001f23",
         "borderRadius": 8,
         "height": 12,
         "marginBottom": 4,

package/src/components/Button/LoadingIndicator/__tests__/__snapshots__/index.spec.tsx.snap

@@ -641,7 +641,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-primar
       style={
         Array [
           Object {
-            "backgroundColor": "#8505a2",
+            "backgroundColor": "#001f23",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -675,7 +675,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-primar
       style={
         Array [
           Object {
-            "backgroundColor": "#8505a2",
+            "backgroundColor": "#001f23",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -709,7 +709,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is outlined-primar
       style={
         Array [
           Object {
-            "backgroundColor": "#8505a2",
+            "backgroundColor": "#001f23",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -1004,7 +1004,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
       style={
         Array [
           Object {
-            "backgroundColor": "#8505a2",
+            "backgroundColor": "#001f23",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -1038,7 +1038,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
       style={
         Array [
           Object {
-            "backgroundColor": "#8505a2",
+            "backgroundColor": "#001f23",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,
@@ -1072,7 +1072,7 @@ exports[`LoadingIndicator renders correctly when themeVariant is text-primary 1`
       style={
         Array [
           Object {
-            "backgroundColor": "#8505a2",
+            "backgroundColor": "#001f23",
             "borderRadius": 8,
             "height": 12,
             "marginBottom": 4,

package/src/components/Button/UtilityButton/{styled.tsx → StyledUtilityButton.tsx}

@@ -14,12 +14,12 @@ export const ButtonContainer = styled(TouchableOpacity)(({ theme }) => ({
 }));
 
 export const IconWrapper = styled(View)(({ theme }) => ({
-  paddingRight: theme.__hd__.button.space.utilityIconPadding,
+  paddingRight: theme.__hd__.button.space.iconPadding,
 }));
 
 export const ButtonText = styled(Typography.Text)(({ theme }) => ({
   flexShrink: 1,
   textAlign: 'center',
   fontSize: theme.__hd__.button.fontSize.utility,
-  fontFamily: theme.__hd__.button.fonts.default,
+  fontFamily: theme.__hd__.button.fonts.utility,
 }));

package/src/components/Button/UtilityButton/__tests__/__snapshots__/index.spec.tsx.snap

@@ -66,7 +66,7 @@ exports[`UtilityButton snapshot has intent primary style 1`] = `
         Array [
           Object {
             "flexShrink": 1,
-            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 16,
             "textAlign": "center",
           },
@@ -149,7 +149,7 @@ exports[`UtilityButton snapshot has intent text style 1`] = `
         Array [
           Object {
             "flexShrink": 1,
-            "fontFamily": "BeVietnamPro-SemiBold",
+            "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 16,
             "textAlign": "center",
           },

package/src/components/Button/UtilityButton/index.tsx

@@ -2,7 +2,11 @@ import React, { ReactChild } from 'react';
 import { ViewProps } from 'react-native';
 
 import Icon, { IconName } from '../../Icon';
-import { ButtonContainer, IconWrapper, ButtonText } from './styled';
+import {
+  ButtonContainer,
+  IconWrapper,
+  ButtonText,
+} from './StyledUtilityButton';
 
 export interface UtilityButtonProps extends ViewProps {
   /**

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -83,7 +83,7 @@ exports[`StyledButtonContainer has filled-primary style 1`] = `
       Object {
         "alignItems": "center",
         "alignSelf": "stretch",
-        "backgroundColor": "#8505a2",
+        "backgroundColor": "#001f23",
         "borderRadius": 32,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -182,7 +182,7 @@ exports[`StyledButtonContainer has outlined-primary style 1`] = `
         "alignItems": "center",
         "alignSelf": "stretch",
         "backgroundColor": "transparent",
-        "borderColor": "#8505a2",
+        "borderColor": "#001f23",
         "borderRadius": 32,
         "borderWidth": 2,
         "flexDirection": "row",
@@ -316,7 +316,7 @@ exports[`StyledButtonContainer has pressed with the correct variant filled-prima
       Object {
         "alignItems": "center",
         "alignSelf": "stretch",
-        "backgroundColor": "#c282d1",
+        "backgroundColor": "#808f91",
         "borderRadius": 32,
         "flexDirection": "row",
         "justifyContent": "center",
@@ -415,7 +415,7 @@ exports[`StyledButtonContainer has pressed with the correct variant outlined-pri
         "alignItems": "center",
         "alignSelf": "stretch",
         "backgroundColor": "transparent",
-        "borderColor": "#c282d1",
+        "borderColor": "#808f91",
         "borderRadius": 32,
         "borderWidth": 2,
         "flexDirection": "row",
@@ -810,7 +810,7 @@ exports[`StyledButtonIcon has outlined-primary style 1`] = `
       },
       Array [
         Object {
-          "color": "#8505a2",
+          "color": "#001f23",
           "fontSize": 18,
           "lineHeight": 24,
         },
@@ -974,7 +974,7 @@ exports[`StyledButtonIcon has pressed with the correct variant outlined-primary
       },
       Array [
         Object {
-          "color": "#c282d1",
+          "color": "#808f91",
           "fontSize": 18,
           "lineHeight": 24,
         },
@@ -1046,7 +1046,7 @@ exports[`StyledButtonIcon has pressed with the correct variant text-primary styl
       },
       Array [
         Object {
-          "color": "#c282d1",
+          "color": "#808f91",
           "fontSize": 16,
           "lineHeight": 24,
         },
@@ -1118,7 +1118,7 @@ exports[`StyledButtonIcon has text-primary style 1`] = `
       },
       Array [
         Object {
-          "color": "#8505a2",
+          "color": "#001f23",
           "fontSize": 16,
           "lineHeight": 24,
         },
@@ -1183,7 +1183,7 @@ exports[`StyledButtonIconWrapper has left style 1`] = `
   style={
     Array [
       Object {
-        "paddingRight": 8,
+        "paddingRight": 12,
       },
       undefined,
     ]
@@ -1197,7 +1197,7 @@ exports[`StyledButtonIconWrapper has right style 1`] = `
   style={
     Array [
       Object {
-        "paddingLeft": 8,
+        "paddingLeft": 12,
       },
       undefined,
     ]
@@ -1384,7 +1384,7 @@ exports[`StyledButtonText has outlined-primary style 1`] = `
       },
       Array [
         Object {
-          "color": "#8505a2",
+          "color": "#001f23",
           "flexShrink": 1,
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 18,
@@ -1621,7 +1621,7 @@ exports[`StyledButtonText has pressed with the correct variant outlined-primary
       },
       Array [
         Object {
-          "color": "#c282d1",
+          "color": "#808f91",
           "flexShrink": 1,
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 18,
@@ -1723,7 +1723,7 @@ exports[`StyledButtonText has pressed with the correct variant text-primary styl
       },
       Array [
         Object {
-          "color": "#c282d1",
+          "color": "#808f91",
           "flexShrink": 1,
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 16,
@@ -1823,7 +1823,7 @@ exports[`StyledButtonText has text-primary style 1`] = `
       },
       Array [
         Object {
-          "color": "#8505a2",
+          "color": "#001f23",
           "flexShrink": 1,
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 16,

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

@@ -115,6 +115,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                 "alignSelf": "stretch",
                 "flexDirection": "row",
                 "flexGrow": 2,
+                "flexShrink": 1,
               },
               undefined,
             ]

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

@@ -115,6 +115,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 "alignSelf": "stretch",
                 "flexDirection": "row",
                 "flexGrow": 2,
+                "flexShrink": 1,
               },
               undefined,
             ]

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];
+};