@hero-design/rn 8.33.1 → 8.34.0

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

@@ -161,7 +161,7 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is false
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         Array [
@@ -173,10 +173,9 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is false
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Please agree to our privacy policy
   </Text>
@@ -246,7 +245,7 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is true 1
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         Array [
@@ -258,10 +257,9 @@ exports[`Checkbox renders correctly when disabled is false, withBorder is true 1
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Please agree to our privacy policy
   </Text>
@@ -327,7 +325,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is false 1
           "color": "#4d6265",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         Array [
@@ -339,10 +337,9 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is false 1
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="subdued"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Please agree to our privacy policy
   </Text>
@@ -412,7 +409,7 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`
           "color": "#4d6265",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         Array [
@@ -424,10 +421,9 @@ exports[`Checkbox renders correctly when disabled is true, withBorder is true 1`
         ],
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="subdued"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     Please agree to our privacy policy
   </Text>

package/src/components/Checkbox/index.tsx

@@ -57,7 +57,7 @@ const Checkbox = ({
     testID={testID}
   >
     {!!description && (
-      <StyledDescription intent={disabled ? 'subdued' : 'body'}>
+      <StyledDescription intent={disabled ? 'subdued' : 'body'} variant="small">
         {description}
       </StyledDescription>
     )}

package/src/components/ContentNavigator/StyledContentNavigator.tsx

@@ -1,6 +1,5 @@
 import { View } from 'react-native';
 import styled from '@emotion/native';
-import Typography from '../Typography';
 
 const Wrapper = styled(View)(() => ({
   flex: 1,
@@ -8,8 +7,4 @@ const Wrapper = styled(View)(() => ({
   justifyContent: 'space-between',
 }));
 
-const Value = styled(Typography.Text)(({ theme }) => ({
-  paddingHorizontal: theme.__hd__.contentNavigator.space.valueHorizontalPadding,
-}));
-
-export { Wrapper, Value };
+export { Wrapper };

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { Value, Wrapper } from '../StyledContentNavigator';
+import { Wrapper } from '../StyledContentNavigator';
 
 describe('Wrapper', () => {
   it('has correct style', () => {
@@ -9,11 +9,3 @@ describe('Wrapper', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 });
-
-describe('Value', () => {
-  it('has correct style', () => {
-    const { toJSON } = renderWithTheme(<Value>Text</Value>);
-
-    expect(toJSON()).toMatchSnapshot();
-  });
-});

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

@@ -1,34 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Value has correct style 1`] = `
-<Text
-  allowFontScaling={false}
-  style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "paddingHorizontal": 8,
-        },
-        undefined,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeTypeface="neutral"
->
-  Text
-</Text>
-`;
-
 exports[`Wrapper has correct style 1`] = `
 <View
   style={

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

@@ -59,22 +59,18 @@ exports[`rendering renders correctly 1`] = `
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.24,
           "lineHeight": 22,
         },
-        Array [
-          Object {
-            "paddingHorizontal": 8,
-          },
-          undefined,
-        ],
+        Object {
+          "paddingHorizontal": 8,
+        },
       ]
     }
     testID="content-navigator-value"
-    themeFontSize="medium"
-    themeFontWeight="semi-bold"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small-bold"
   >
     20
   </Text>
@@ -178,21 +174,132 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.24,
           "lineHeight": 22,
         },
+        Object {
+          "paddingHorizontal": 8,
+        },
+      ]
+    }
+    testID="content-navigator-value"
+    themeIntent="body"
+    themeTypeface="neutral"
+    themeVariant="small-bold"
+  >
+    20
+  </Text>
+  <View
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+    testID="next-icon-button"
+  >
+    <HeroIcon
+      name="arrow-right"
+      style={
         Array [
           Object {
-            "paddingHorizontal": 8,
+            "color": "#bfc1c5",
+            "fontSize": 24,
           },
           undefined,
-        ],
+        ]
+      }
+      themeIntent="disabled-text"
+      themeSize="medium"
+    />
+  </View>
+</View>
+`;
+
+exports[`rendering renders correctly with large 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flex": 1,
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    accessibilityState={
+      Object {
+        "disabled": false,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "opacity": 1,
+      }
+    }
+    testID="previous-icon-button"
+  >
+    <HeroIcon
+      name="arrow-left"
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontSize": 24,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="text"
+      themeSize="medium"
+    />
+  </View>
+  <Text
+    allowFontScaling={false}
+    style={
+      Array [
+        Object {
+          "color": "#001f23",
+          "fontFamily": "BeVietnamPro-SemiBold",
+          "fontSize": 18,
+          "letterSpacing": 0.24,
+          "lineHeight": 28,
+        },
+        Object {
+          "paddingHorizontal": 8,
+        },
       ]
     }
     testID="content-navigator-value"
-    themeFontSize="medium"
-    themeFontWeight="semi-bold"
     themeIntent="body"
+    themeLevel="h5"
     themeTypeface="neutral"
   >
     20
@@ -200,7 +307,7 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
   <View
     accessibilityState={
       Object {
-        "disabled": true,
+        "disabled": false,
       }
     }
     accessible={true}
@@ -225,13 +332,13 @@ exports[`rendering renders correctly when icon buttons are disabled 1`] = `
       style={
         Array [
           Object {
-            "color": "#bfc1c5",
+            "color": "#001f23",
             "fontSize": 24,
           },
           undefined,
         ]
       }
-      themeIntent="disabled-text"
+      themeIntent="text"
       themeSize="medium"
     />
   </View>

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

@@ -33,6 +33,22 @@ describe('rendering', () => {
     expect(getByText('20')).toBeDefined();
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('renders correctly with large', () => {
+    const { toJSON, getByText, queryAllByTestId } = renderWithTheme(
+      <ContentNavigator
+        value={20}
+        onPreviousPress={jest.fn()}
+        onNextPress={jest.fn()}
+        fontSize="large"
+      />
+    );
+
+    expect(getByText('20')).toBeDefined();
+    expect(toJSON()).toMatchSnapshot();
+    expect(queryAllByTestId('previous-icon-button')).toHaveLength(1);
+    expect(queryAllByTestId('next-icon-button')).toHaveLength(1);
+  });
 });
 
 describe('behavior', () => {

package/src/components/ContentNavigator/index.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { Value, Wrapper } from './StyledContentNavigator';
+import { Wrapper } from './StyledContentNavigator';
 import Button from '../Button';
+import Typography from '../Typography';
+import { useTheme } from '../../theme';
 
 interface ContentNavigatorProps {
   /**
@@ -54,6 +56,7 @@ function ContentNavigator({
   testID,
   style,
 }: ContentNavigatorProps) {
+  const theme = useTheme();
   return (
     <Wrapper testID={testID} style={style}>
       <Button.Icon
@@ -62,14 +65,32 @@ function ContentNavigator({
         disabled={previousDisabled}
         testID="previous-icon-button"
       />
-      <Value
-        fontWeight="semi-bold"
-        fontSize={fontSize}
-        onPress={onPress}
-        testID="content-navigator-value"
-      >
-        {value}
-      </Value>
+      {fontSize === 'medium' ? (
+        <Typography.Body
+          style={{
+            paddingHorizontal:
+              theme.__hd__.contentNavigator.space.valueHorizontalPadding,
+          }}
+          variant="small-bold"
+          onPress={onPress}
+          testID="content-navigator-value"
+        >
+          {value}
+        </Typography.Body>
+      ) : (
+        <Typography.Title
+          style={{
+            paddingHorizontal:
+              theme.__hd__.contentNavigator.space.valueHorizontalPadding,
+          }}
+          level="h5"
+          onPress={onPress}
+          testID="content-navigator-value"
+        >
+          {value}
+        </Typography.Title>
+      )}
+
       <Button.Icon
         icon="arrow-right"
         onPress={onNextPress}

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

@@ -105,14 +105,13 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 12,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 12,
                     "lineHeight": 12,
                   },
                   Object {
@@ -122,11 +121,9 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"
-            themeTypeface="neutral"
           >
             Start date
           </Text>
@@ -203,6 +200,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
             Object {
               "minHeight": 16,
               "paddingLeft": 16,
+              "paddingTop": 2,
             },
             undefined,
           ]
@@ -330,14 +328,13 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 12,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 12,
                     "lineHeight": 12,
                   },
                   Object {
@@ -347,11 +344,9 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"
-            themeTypeface="neutral"
           >
             Start date
           </Text>
@@ -428,6 +423,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
             Object {
               "minHeight": 16,
               "paddingLeft": 16,
+              "paddingTop": 2,
             },
             undefined,
           ]
@@ -561,14 +557,13 @@ exports[`DatePicker renders variant Calendar 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 12,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 12,
                     "lineHeight": 12,
                   },
                   Object {
@@ -578,11 +573,9 @@ exports[`DatePicker renders variant Calendar 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"
-            themeTypeface="neutral"
           >
             Start date
           </Text>
@@ -659,6 +652,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
             Object {
               "minHeight": 16,
               "paddingLeft": 16,
+              "paddingTop": 2,
             },
             undefined,
           ]

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

@@ -105,14 +105,13 @@ exports[`DatePickerAndroid renders correctly 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 12,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 12,
                     "lineHeight": 12,
                   },
                   Object {
@@ -122,11 +121,9 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"
-            themeTypeface="neutral"
           >
             Start date
           </Text>
@@ -203,6 +200,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
             Object {
               "minHeight": 16,
               "paddingLeft": 16,
+              "paddingTop": 2,
             },
             undefined,
           ]

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

@@ -105,14 +105,13 @@ exports[`DatePickerCalendar renders correctly 1`] = `
                 Object {
                   "color": "#001f23",
                   "fontFamily": "BeVietnamPro-Regular",
-                  "fontSize": 14,
-                  "letterSpacing": 0.42,
-                  "lineHeight": 22,
+                  "fontSize": 12,
+                  "letterSpacing": 0.48,
+                  "lineHeight": 16,
                 },
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 12,
                     "lineHeight": 12,
                   },
                   Object {
@@ -122,11 +121,9 @@ exports[`DatePickerCalendar renders correctly 1`] = `
               ]
             }
             testID="input-label"
-            themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
             themeState="filled"
-            themeTypeface="neutral"
           >
             Start date
           </Text>
@@ -203,6 +200,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
             Object {
               "minHeight": 16,
               "paddingLeft": 16,
+              "paddingTop": 2,
             },
             undefined,
           ]