@hero-design/rn 7.23.0 → 7.25.0

package/src/components/Calendar/CalendarRowItem.tsx

@@ -6,10 +6,7 @@ import {
   StyledMark,
 } from './StyledCalendar';
 
-const getCellVariant = (
-  isSelected: boolean = false,
-  isCurrent: boolean = false
-) => {
+const getCellVariant = (isSelected = false, isCurrent = false) => {
   if (isSelected) return 'selected';
   if (isCurrent) return 'current';
 

package/src/components/Calendar/__tests__/__snapshots__/CalendarRowItem.spec.tsx.snap

@@ -65,7 +65,7 @@ exports[`CalendarRowItem renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "bottom": "10%",
             "height": 4,
@@ -147,7 +147,7 @@ exports[`CalendarRowItem renders correctly 2`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "bottom": "10%",
             "height": 4,
@@ -195,7 +195,7 @@ exports[`CalendarRowItem renders correctly when is current date 1`] = `
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderColor": "#001f23",
         "borderRadius": 999,
         "borderWidth": 0,
@@ -277,7 +277,7 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderColor": "#001f23",
         "borderRadius": 999,
         "borderWidth": 0,
@@ -359,7 +359,7 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
     style={
       Object {
         "alignItems": "center",
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderColor": "#001f23",
         "borderRadius": 999,
         "borderWidth": 0,

package/src/components/Calendar/index.tsx

@@ -12,6 +12,7 @@ import {
 } from './StyledCalendar';
 import CalendarRowItem from './CalendarRowItem';
 import { getValidDate, initArray, isEqDate } from './helpers';
+import { noop } from '../../utils/functions';
 
 const DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
 // Sunday first column => 0
@@ -69,9 +70,9 @@ const Calendar = ({
   value,
   visibleDate,
   onChange,
-  onPreviousPress = () => {},
-  onNextPress = () => {},
-  onTitlePress = () => {},
+  onPreviousPress = noop,
+  onNextPress = noop,
+  onTitlePress = noop,
   minDate,
   maxDate,
   markedDates = [],

package/src/components/Card/DataCard/__tests__/__snapshots__/StyledDataCard.spec.tsx.snap

@@ -53,7 +53,7 @@ exports[`Indicator renders correctly when intent is primary 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "height": "100%",
         "width": 16,
       },

package/src/components/Card/__tests__/__snapshots__/StyledCard.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`LeftDataCard renders correctly 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "height": "100%",
         "width": 16,
       },

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

@@ -42,7 +42,7 @@ exports[`Card renders correctly when intent is primary 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 12,
         "overflow": "hidden",
       },

package/src/components/Checkbox/StyledCheckbox.tsx

@@ -27,18 +27,20 @@ export const StyledDescription = styled(Typography.Text)(({ theme }) => ({
   flex: 1,
 }));
 
+export const StyledCheckboxContainer = styled(View)(({ theme }) => ({
+  height: theme.__hd__.checkbox.sizes.icon,
+  width: theme.__hd__.checkbox.sizes.icon,
+  overflow: 'hidden',
+}));
+
 export const StyledCheckbox = styled(View)<{ themeDisabled: boolean }>(
   ({ theme, themeDisabled }) => ({
-    flexDirection: 'row',
-    justifyContent: 'center',
-    height: theme.__hd__.checkbox.sizes.icon,
-    width: theme.__hd__.checkbox.sizes.icon,
+    flex: 1,
     borderRadius: theme.__hd__.checkbox.radii.icon,
     borderWidth: theme.__hd__.checkbox.borderWidths.icon,
     borderColor: themeDisabled
       ? theme.__hd__.checkbox.colors.disabledBorder
       : theme.__hd__.checkbox.colors.default,
-    overflow: 'hidden',
   })
 );
 

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

@@ -8,11 +8,7 @@ exports[`StyledCheckbox renders correctly when disabled is false 1`] = `
         "borderColor": "#001f23",
         "borderRadius": 4,
         "borderWidth": 2,
-        "flexDirection": "row",
-        "height": 24,
-        "justifyContent": "center",
-        "overflow": "hidden",
-        "width": 24,
+        "flex": 1,
       },
       undefined,
     ]
@@ -26,14 +22,10 @@ exports[`StyledCheckbox renders correctly when disabled is true 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#4d6265",
+        "borderColor": "#bfc1c5",
         "borderRadius": 4,
         "borderWidth": 2,
-        "flexDirection": "row",
-        "height": 24,
-        "justifyContent": "center",
-        "overflow": "hidden",
-        "width": 24,
+        "flex": 1,
       },
       undefined,
     ]
@@ -105,7 +97,7 @@ exports[`StyledWrapper renders correctly when disabled is true, withBorder is tr
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "borderColor": "#4d6265",
+      "borderColor": "#bfc1c5",
       "borderRadius": 8,
       "borderWidth": 1,
       "flexDirection": "row",

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

@@ -24,20 +24,29 @@ exports[`Checkbox renders correctly when checked is false and there is no descri
     style={
       Array [
         Object {
-          "borderColor": "#001f23",
-          "borderRadius": 4,
-          "borderWidth": 2,
-          "flexDirection": "row",
           "height": 24,
-          "justifyContent": "center",
           "overflow": "hidden",
           "width": 24,
         },
         undefined,
       ]
     }
-    themeDisabled={false}
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      themeDisabled={false}
+    />
+  </View>
 </View>
 `;
 
@@ -65,19 +74,13 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
     style={
       Array [
         Object {
-          "borderColor": "#001f23",
-          "borderRadius": 4,
-          "borderWidth": 2,
-          "flexDirection": "row",
           "height": 24,
-          "justifyContent": "center",
           "overflow": "hidden",
           "width": 24,
         },
         undefined,
       ]
     }
-    themeDisabled={false}
   >
     <HeroIcon
       name="box-check"
@@ -100,6 +103,20 @@ exports[`Checkbox renders correctly when checked is true and there is no descrip
       themeIntent="text"
       themeSize="medium"
     />
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      themeDisabled={false}
+    />
   </View>
 </View>
 `;
@@ -153,20 +170,29 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is false
     style={
       Array [
         Object {
-          "borderColor": "#001f23",
-          "borderRadius": 4,
-          "borderWidth": 2,
-          "flexDirection": "row",
           "height": 24,
-          "justifyContent": "center",
           "overflow": "hidden",
           "width": 24,
         },
         undefined,
       ]
     }
-    themeDisabled={false}
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      themeDisabled={false}
+    />
+  </View>
 </View>
 `;
 
@@ -223,20 +249,29 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is true 1
     style={
       Array [
         Object {
-          "borderColor": "#001f23",
-          "borderRadius": 4,
-          "borderWidth": 2,
-          "flexDirection": "row",
           "height": 24,
-          "justifyContent": "center",
           "overflow": "hidden",
           "width": 24,
         },
         undefined,
       ]
     }
-    themeDisabled={false}
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      themeDisabled={false}
+    />
+  </View>
 </View>
 `;
 
@@ -289,20 +324,29 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is false 1
     style={
       Array [
         Object {
-          "borderColor": "#4d6265",
-          "borderRadius": 4,
-          "borderWidth": 2,
-          "flexDirection": "row",
           "height": 24,
-          "justifyContent": "center",
           "overflow": "hidden",
           "width": 24,
         },
         undefined,
       ]
     }
-    themeDisabled={true}
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#bfc1c5",
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      themeDisabled={true}
+    />
+  </View>
 </View>
 `;
 
@@ -321,7 +365,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "borderColor": "#4d6265",
+      "borderColor": "#bfc1c5",
       "borderRadius": 8,
       "borderWidth": 1,
       "flexDirection": "row",
@@ -359,19 +403,28 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`
     style={
       Array [
         Object {
-          "borderColor": "#4d6265",
-          "borderRadius": 4,
-          "borderWidth": 2,
-          "flexDirection": "row",
           "height": 24,
-          "justifyContent": "center",
           "overflow": "hidden",
           "width": 24,
         },
         undefined,
       ]
     }
-    themeDisabled={true}
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#bfc1c5",
+            "borderRadius": 4,
+            "borderWidth": 2,
+            "flex": 1,
+          },
+          undefined,
+        ]
+      }
+      themeDisabled={true}
+    />
+  </View>
 </View>
 `;

package/src/components/Checkbox/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import {
   StyledCheckbox,
+  StyledCheckboxContainer,
   StyledCheckMark,
   StyledDescription,
   StyledWrapper,
@@ -60,7 +61,7 @@ const Checkbox = ({
         {description}
       </StyledDescription>
     )}
-    <StyledCheckbox themeDisabled={disabled}>
+    <StyledCheckboxContainer>
       {checked && (
         <StyledCheckMark
           icon="box-check"
@@ -68,7 +69,8 @@ const Checkbox = ({
           testID="check-mark"
         />
       )}
-    </StyledCheckbox>
+      <StyledCheckbox themeDisabled={disabled} />
+    </StyledCheckboxContainer>
   </StyledWrapper>
 );
 

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

@@ -146,7 +146,7 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
       style={
         Array [
           Object {
-            "color": "#4d6265",
+            "color": "#bfc1c5",
             "fontSize": 24,
           },
           undefined,
@@ -205,7 +205,7 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
       style={
         Array [
           Object {
-            "color": "#4d6265",
+            "color": "#bfc1c5",
             "fontSize": 24,
           },
           undefined,

package/src/components/ContentNavigator/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { Value, Wrapper } from './StyledContentNavigator';
 import Button from '../Button';
@@ -7,7 +8,7 @@ interface ContentNavigatorProps {
   /**
    * The navigator's content value.
    */
-  value: number | string;
+  value: number | string | ReactElement;
   /**
    * Handler to handle press event of previous icon.
    */
@@ -61,14 +62,18 @@ function ContentNavigator({
         disabled={previousDisabled}
         testID="previous-icon-button"
       />
-      <Value
-        fontWeight="semi-bold"
-        fontSize={fontSize}
-        onPress={onPress}
-        testID="content-navigator-value"
-      >
-        {value}
-      </Value>
+      {typeof value === 'string' || typeof value === 'number' ? (
+        <Value
+          fontWeight="semi-bold"
+          fontSize={fontSize}
+          onPress={onPress}
+          testID="content-navigator-value"
+        >
+          {value}
+        </Value>
+      ) : (
+        value
+      )}
       <Button.Icon
         icon="arrow-right"
         onPress={onNextPress}

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

@@ -61,6 +61,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               undefined,
             ]
           }
+          themeFocused={false}
           themeVariant="filled"
         />
         <View
@@ -138,6 +139,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                   "flexGrow": 2,
                   "fontSize": 14,
                   "marginHorizontal": 8,
+                  "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
                 Object {

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

@@ -61,6 +61,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
               undefined,
             ]
           }
+          themeFocused={false}
           themeVariant="filled"
         />
         <View
@@ -138,6 +139,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                   "flexGrow": 2,
                   "fontSize": 14,
                   "marginHorizontal": 8,
+                  "paddingVertical": 0,
                   "textAlignVertical": "center",
                 },
                 Object {
@@ -251,32 +253,6 @@ exports[`DatePickerIOS renders correctly 1`] = `
               ]
             }
           >
-            <View
-              accessible={true}
-              collapsable={false}
-              focusable={true}
-              nativeID="animatedComponent"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onFocus={[Function]}
-              onResponderGrant={[Function]}
-              onResponderMove={[Function]}
-              onResponderRelease={[Function]}
-              onResponderTerminate={[Function]}
-              onResponderTerminationRequest={[Function]}
-              onStartShouldSetResponder={[Function]}
-              style={
-                Object {
-                  "backgroundColor": "#001f23",
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 0.48,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                }
-              }
-            />
             <View
               onLayout={[Function]}
               style={
@@ -294,6 +270,32 @@ exports[`DatePickerIOS renders correctly 1`] = `
                 ]
               }
             >
+              <View
+                accessible={true}
+                collapsable={false}
+                focusable={true}
+                nativeID="animatedComponent"
+                onBlur={[Function]}
+                onClick={[Function]}
+                onFocus={[Function]}
+                onResponderGrant={[Function]}
+                onResponderMove={[Function]}
+                onResponderRelease={[Function]}
+                onResponderTerminate={[Function]}
+                onResponderTerminationRequest={[Function]}
+                onStartShouldSetResponder={[Function]}
+                style={
+                  Object {
+                    "backgroundColor": "#001f23",
+                    "bottom": 0,
+                    "left": 0,
+                    "opacity": 0.48,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  }
+                }
+              />
               <RCTSafeAreaView
                 collapsable={false}
                 emulateUnlessSupported={true}
@@ -502,7 +504,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "color": "#001f23",
+                              "color": "#401960",
                               "fontFamily": "BeVietnamPro-SemiBold",
                               "fontSize": 16,
                               "letterSpacing": 0.48,

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

@@ -124,8 +124,6 @@ const DragableDrawer = ({
 
       return () => animation.stop();
     }
-
-    return () => {};
   }, [animatedToValue]);
 
   const panResponder = useRef(

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

@@ -37,7 +37,7 @@ exports[`Empty renders empty state content correctly 1`] = `
     style={
       Array [
         Object {
-          "color": "#4d6265",
+          "color": "#bfc1c5",
           "fontFamily": "BeVietnamPro-Light",
           "fontSize": 16,
           "textAlign": "center",
@@ -104,7 +104,7 @@ exports[`Empty renders empty state with image correctly 1`] = `
     style={
       Array [
         Object {
-          "color": "#4d6265",
+          "color": "#bfc1c5",
           "fontFamily": "BeVietnamPro-Light",
           "fontSize": 16,
           "textAlign": "center",

package/src/components/Empty/index.tsx

@@ -24,8 +24,7 @@ interface EmptyProps {
    */
   description?: string;
   /**
-   * Empty's variant
-   * 'dark' if rendered on a dark background and 'light' otherwise
+   * Empty's variant.
    */
   variant?: 'light' | 'dark';
   /**