@hero-design/rn 7.22.1 → 7.22.3

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

@@ -26,7 +26,7 @@ exports[`StyledCheckbox renders correctly when disabled is true 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#808f91",
+        "borderColor": "#4d6265",
         "borderRadius": 4,
         "borderWidth": 2,
         "flexDirection": "row",
@@ -105,7 +105,7 @@ exports[`StyledWrapper renders correctly when disabled is true, withBorder is tr
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "borderColor": "#808f91",
+      "borderColor": "#4d6265",
       "borderRadius": 8,
       "borderWidth": 1,
       "flexDirection": "row",

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

@@ -264,7 +264,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is false 1
     style={
       Array [
         Object {
-          "color": "#808f91",
+          "color": "#4d6265",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
           "letterSpacing": 0.42,
@@ -289,7 +289,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is false 1
     style={
       Array [
         Object {
-          "borderColor": "#808f91",
+          "borderColor": "#4d6265",
           "borderRadius": 4,
           "borderWidth": 2,
           "flexDirection": "row",
@@ -321,7 +321,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "borderColor": "#808f91",
+      "borderColor": "#4d6265",
       "borderRadius": 8,
       "borderWidth": 1,
       "flexDirection": "row",
@@ -334,7 +334,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`
     style={
       Array [
         Object {
-          "color": "#808f91",
+          "color": "#4d6265",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
           "letterSpacing": 0.42,
@@ -359,7 +359,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`
     style={
       Array [
         Object {
-          "borderColor": "#808f91",
+          "borderColor": "#4d6265",
           "borderRadius": 4,
           "borderWidth": 2,
           "flexDirection": "row",

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": "#808f91",
+            "color": "#4d6265",
             "fontSize": 24,
           },
           undefined,
@@ -205,7 +205,7 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
       style={
         Array [
           Object {
-            "color": "#808f91",
+            "color": "#4d6265",
             "fontSize": 24,
           },
           undefined,

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

@@ -26,12 +26,16 @@ exports[`DatePickerAndroid renders correctly 1`] = `
       style={
         Array [
           Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
+      themeVariant="filled"
     >
       <View
         style={
@@ -45,24 +49,6 @@ exports[`DatePickerAndroid renders correctly 1`] = `
           ]
         }
       >
-        <View
-          style={
-            Array [
-              Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              undefined,
-            ]
-          }
-          themeVariant="filled"
-        />
         <View
           pointerEvents="none"
           style={

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

@@ -26,12 +26,16 @@ exports[`DatePickerIOS renders correctly 1`] = `
       style={
         Array [
           Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
+      themeVariant="filled"
     >
       <View
         style={
@@ -45,24 +49,6 @@ exports[`DatePickerIOS renders correctly 1`] = `
           ]
         }
       >
-        <View
-          style={
-            Array [
-              Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              undefined,
-            ]
-          }
-          themeVariant="filled"
-        />
         <View
           pointerEvents="none"
           style={
@@ -502,7 +488,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                         style={
                           Array [
                             Object {
-                              "color": "#8505a2",
+                              "color": "#001f23",
                               "fontFamily": "BeVietnamPro-SemiBold",
                               "fontSize": 16,
                               "letterSpacing": 0.48,

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

@@ -44,7 +44,7 @@ exports[`Drawer renders correctly in invisible state 1`] = `
     pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#ffffff",
         "bottom": 0,
         "left": 0,
         "opacity": 0,
@@ -125,7 +125,7 @@ exports[`Drawer renders correctly in visible state 1`] = `
     pointerEvents="auto"
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#ffffff",
         "bottom": 0,
         "left": 0,
         "opacity": 0.35,
@@ -206,7 +206,7 @@ exports[`Drawer renders correctly with no backdrop 1`] = `
     pointerEvents="box-none"
     style={
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#ffffff",
         "bottom": 0,
         "left": 0,
         "opacity": 0,

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -102,7 +102,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -181,7 +181,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -260,7 +260,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -339,7 +339,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -418,7 +418,7 @@ exports[`ActionGroup has active false 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -665,7 +665,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -744,7 +744,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -823,7 +823,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -902,7 +902,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,
@@ -981,7 +981,7 @@ exports[`ActionGroup has active true 1`] = `
           Object {
             "alignItems": "center",
             "alignSelf": "flex-end",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#001f23",
             "borderRadius": 999,
             "flexDirection": "row",
             "margin": 8,

package/src/components/Icon/HeroIcon/index.tsx

@@ -6,6 +6,7 @@ type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
 type ThemeIntent =
   | 'text'
   | 'primary'
+  | 'secondary'
   | 'info'
   | 'danger'
   | 'success'
@@ -22,6 +23,7 @@ const HeroIcon = createIconSetFromIcoMoon(
 const COLOR_INTENTS = {
   text: 'text',
   primary: 'primary',
+  secondary: 'secondary',
   info: 'info',
   danger: 'danger',
   success: 'success',

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

@@ -71,7 +71,7 @@ exports[`Icon renders correctly with intent 1`] = `
   style={
     Array [
       Object {
-        "color": "#8505a2",
+        "color": "#001f23",
         "fontSize": 24,
       },
       undefined,

package/src/components/Icon/index.tsx

@@ -17,6 +17,7 @@ export interface IconProps {
   intent?:
     | 'text'
     | 'primary'
+    | 'secondary'
     | 'info'
     | 'danger'
     | 'success'

package/src/components/List/StyledBasicListItem.tsx

@@ -24,6 +24,7 @@ const StyledListItemContainer = styled(TouchableHighlight)<{
   opacity: themeDisabled
     ? theme.__hd__.list.opacity.disabled
     : theme.__hd__.list.opacity.enabled,
+  borderRadius: theme.__hd__.list.radii.basicItem,
 }));
 export {
   StyledListItemContainer,

package/src/components/List/__tests__/BasicListItem.spec.tsx

@@ -1,22 +1,46 @@
 import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import Icon from '../../Icon';
 import BasicListItem from '../BasicListItem';
 
 describe('BasicListItem', () => {
-  it('renders correctly', () => {
-    const wrapper = renderWithTheme(
-      <BasicListItem
-        title="List item"
-        subtitle="subtitle"
-        suffix="checkmark"
-        testID="basic-list-item"
-      />
-    );
-    expect(wrapper.toJSON()).toMatchSnapshot();
-    expect(wrapper.queryAllByTestId('basic-list-item')).toHaveLength(1);
-    expect(wrapper.queryAllByText('List item')).toHaveLength(1);
-    expect(wrapper.queryAllByText('subtitle')).toHaveLength(1);
+  describe('when suffix and prefix are icon name', () => {
+    it('renders correctly', () => {
+      const wrapper = renderWithTheme(
+        <BasicListItem
+          title="List item"
+          subtitle="subtitle"
+          suffix="checkmark"
+          prefix="circle-question-outlined"
+          testID="basic-list-item"
+        />
+      );
+      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(wrapper.queryAllByTestId('basic-list-item')).toHaveLength(1);
+      expect(wrapper.queryAllByText('List item')).toHaveLength(1);
+      expect(wrapper.queryAllByText('subtitle')).toHaveLength(1);
+    });
+  });
+
+  describe('when suffix and prefix are react element', () => {
+    it('renders correctly', () => {
+      const wrapper = renderWithTheme(
+        <BasicListItem
+          title="List item"
+          subtitle="subtitle"
+          suffix={<Icon icon="checkmark" testID="suffix" />}
+          prefix={<Icon icon="circle-question-outlined" testID="prefix" />}
+          testID="basic-list-item"
+        />
+      );
+      expect(wrapper.toJSON()).toMatchSnapshot();
+      expect(wrapper.queryAllByTestId('basic-list-item')).toHaveLength(1);
+      expect(wrapper.queryAllByTestId('suffix')).toHaveLength(1);
+      expect(wrapper.queryAllByTestId('prefix')).toHaveLength(1);
+      expect(wrapper.queryAllByText('List item')).toHaveLength(1);
+      expect(wrapper.queryAllByText('subtitle')).toHaveLength(1);
+    });
   });
 
   it('onPress', () => {

package/src/components/List/__tests__/__snapshots__/BasicListItem.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BasicListItem renders correctly 1`] = `
+exports[`BasicListItem when suffix and prefix are icon name renders correctly 1`] = `
 <View
   accessibilityState={
     Object {
@@ -21,6 +21,7 @@ exports[`BasicListItem renders correctly 1`] = `
       Object {
         "alignItems": "center",
         "backgroundColor": "#ffffff",
+        "borderRadius": 4,
         "flexDirection": "row",
         "opacity": 1,
         "padding": 16,
@@ -30,6 +31,31 @@ exports[`BasicListItem renders correctly 1`] = `
   }
   testID="basic-list-item"
 >
+  <View
+    style={
+      Array [
+        Object {
+          "marginRight": 8,
+        },
+        undefined,
+      ]
+    }
+  >
+    <HeroIcon
+      name="circle-question-outlined"
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="medium"
+    />
+  </View>
   <View
     style={
       Array [
@@ -63,7 +89,7 @@ exports[`BasicListItem renders correctly 1`] = `
       style={
         Array [
           Object {
-            "color": "#808f91",
+            "color": "#4d6265",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 12,
             "letterSpacing": 0.36,
@@ -106,3 +132,138 @@ exports[`BasicListItem renders correctly 1`] = `
   </View>
 </View>
 `;
+
+exports[`BasicListItem when suffix and prefix are react element renders correctly 1`] = `
+<View
+  accessibilityState={
+    Object {
+      "disabled": false,
+    }
+  }
+  accessible={true}
+  focusable={false}
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Array [
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#ffffff",
+        "borderRadius": 4,
+        "flexDirection": "row",
+        "opacity": 1,
+        "padding": 16,
+      },
+      undefined,
+    ]
+  }
+  testID="basic-list-item"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "marginRight": 8,
+        },
+        undefined,
+      ]
+    }
+  >
+    <HeroIcon
+      name="circle-question-outlined"
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      testID="prefix"
+      themeIntent="text"
+      themeSize="medium"
+    />
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "flex": 1,
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "letterSpacing": 0.48,
+            "lineHeight": 24,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="large"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      List item
+    </Text>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#4d6265",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 12,
+            "letterSpacing": 0.36,
+            "lineHeight": 20,
+          },
+          undefined,
+        ]
+      }
+      themeFontSize="small"
+      themeFontWeight="regular"
+      themeIntent="subdued"
+    >
+      subtitle
+    </Text>
+  </View>
+  <View
+    style={
+      Array [
+        Object {
+          "marginLeft": 8,
+        },
+        undefined,
+      ]
+    }
+  >
+    <HeroIcon
+      name="checkmark"
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      testID="suffix"
+      themeIntent="text"
+      themeSize="medium"
+    />
+  </View>
+</View>
+`;