@hero-design/rn 8.40.1 → 8.40.2

package/.turbo/turbo-build.log

@@ -4,5 +4,5 @@ $ rollup -c
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 25s
+created lib/index.js, es/index.js in 26.4s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -2649,13 +2649,14 @@ var getRichTextEditorTheme = function getRichTextEditorTheme(theme) {
 
 var getSectionHeadingTheme = function getSectionHeadingTheme(theme) {
   var colors = {
-    background: theme.colors.neutralGlobalSurface
+    background: theme.colors.neutralGlobalSurface,
+    backgroundSmall: theme.colors.decorativePrimarySurface
   };
   var space = {
     headingVerticalPadding: theme.space.small,
     headingHorizontalPadding: theme.space.medium,
     headingMarginBottom: theme.space.medium,
-    iconMarginRight: theme.space.small
+    iconMarginRight: theme.space.smallMedium
   };
   return {
     colors: colors,
@@ -15493,11 +15494,12 @@ var CompoundRadio = {
 };
 
 var StyledHeading = index$b(View)(function (_ref) {
-  var theme = _ref.theme;
+  var theme = _ref.theme,
+    themeSize = _ref.themeSize;
   return {
     paddingVertical: theme.__hd__.sectionHeading.space.headingVerticalPadding,
     paddingHorizontal: theme.__hd__.sectionHeading.space.headingHorizontalPadding,
-    backgroundColor: theme.__hd__.sectionHeading.colors.background,
+    backgroundColor: themeSize === 'medium' ? theme.__hd__.sectionHeading.colors.background : theme.__hd__.sectionHeading.colors.backgroundSmall,
     marginBottom: theme.__hd__.sectionHeading.space.headingMarginBottom,
     display: 'flex',
     flexDirection: 'row',
@@ -15514,15 +15516,14 @@ var StyledIconWrapper$2 = index$b(View)(function (_ref2) {
 var StyledWrapper$3 = index$b(View)(function () {
   return {
     display: 'flex',
-    flexDirection: 'row'
+    flexDirection: 'row',
+    alignItems: 'center'
   };
 });
 
 var ICON_SIZE_MAP = {
   small: 'small',
-  medium: 'medium',
-  large: 'medium',
-  xlarge: 'large'
+  medium: 'medium'
 };
 var ICON_INTENT_MAP = {
   body: 'text',
@@ -15539,22 +15540,28 @@ var SectionHeading = function SectionHeading(_ref) {
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$fontWeight = _ref.fontWeight,
     fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
     style = _ref.style,
     testID = _ref.testID;
+  useDeprecation("SectionHeading's fontSize prop is deprecated and will be removed in the next major release, please remove it.", fontSize !== undefined);
+  useDeprecation("SectionHeading's fontWeight prop is deprecated and will be removed in the next major release, please remove it.", fontWeight !== undefined);
   return /*#__PURE__*/React.createElement(StyledHeading, {
+    themeSize: size,
     style: style,
     testID: testID
   }, /*#__PURE__*/React.createElement(StyledWrapper$3, null, /*#__PURE__*/React.createElement(StyledIconWrapper$2, null, icon !== undefined && (typeof icon === 'string' ? /*#__PURE__*/React.createElement(Icon, {
     icon: icon,
-    size: ICON_SIZE_MAP[fontSize],
+    size: ICON_SIZE_MAP[size],
     intent: ICON_INTENT_MAP[intent]
   }) : /*#__PURE__*/React.cloneElement(icon, _objectSpread2({
-    size: ICON_SIZE_MAP[fontSize],
+    size: ICON_SIZE_MAP[size],
     intent: ICON_INTENT_MAP[intent]
-  }, icon.props)))), /*#__PURE__*/React.createElement(Typography.Text, {
-    fontSize: fontSize,
-    intent: intent,
-    fontWeight: fontWeight
+  }, icon.props)))), size === 'small' ? /*#__PURE__*/React.createElement(Typography.Caption, {
+    intent: intent
+  }, text) : /*#__PURE__*/React.createElement(Typography.Body, {
+    variant: "small",
+    intent: intent
   }, text)), rightChildren);
 };
 

package/lib/index.js

@@ -2680,13 +2680,14 @@ var getRichTextEditorTheme = function getRichTextEditorTheme(theme) {
 
 var getSectionHeadingTheme = function getSectionHeadingTheme(theme) {
   var colors = {
-    background: theme.colors.neutralGlobalSurface
+    background: theme.colors.neutralGlobalSurface,
+    backgroundSmall: theme.colors.decorativePrimarySurface
   };
   var space = {
     headingVerticalPadding: theme.space.small,
     headingHorizontalPadding: theme.space.medium,
     headingMarginBottom: theme.space.medium,
-    iconMarginRight: theme.space.small
+    iconMarginRight: theme.space.smallMedium
   };
   return {
     colors: colors,
@@ -15524,11 +15525,12 @@ var CompoundRadio = {
 };
 
 var StyledHeading = index$b(reactNative.View)(function (_ref) {
-  var theme = _ref.theme;
+  var theme = _ref.theme,
+    themeSize = _ref.themeSize;
   return {
     paddingVertical: theme.__hd__.sectionHeading.space.headingVerticalPadding,
     paddingHorizontal: theme.__hd__.sectionHeading.space.headingHorizontalPadding,
-    backgroundColor: theme.__hd__.sectionHeading.colors.background,
+    backgroundColor: themeSize === 'medium' ? theme.__hd__.sectionHeading.colors.background : theme.__hd__.sectionHeading.colors.backgroundSmall,
     marginBottom: theme.__hd__.sectionHeading.space.headingMarginBottom,
     display: 'flex',
     flexDirection: 'row',
@@ -15545,15 +15547,14 @@ var StyledIconWrapper$2 = index$b(reactNative.View)(function (_ref2) {
 var StyledWrapper$3 = index$b(reactNative.View)(function () {
   return {
     display: 'flex',
-    flexDirection: 'row'
+    flexDirection: 'row',
+    alignItems: 'center'
   };
 });
 
 var ICON_SIZE_MAP = {
   small: 'small',
-  medium: 'medium',
-  large: 'medium',
-  xlarge: 'large'
+  medium: 'medium'
 };
 var ICON_INTENT_MAP = {
   body: 'text',
@@ -15570,22 +15571,28 @@ var SectionHeading = function SectionHeading(_ref) {
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$fontWeight = _ref.fontWeight,
     fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
     style = _ref.style,
     testID = _ref.testID;
+  useDeprecation("SectionHeading's fontSize prop is deprecated and will be removed in the next major release, please remove it.", fontSize !== undefined);
+  useDeprecation("SectionHeading's fontWeight prop is deprecated and will be removed in the next major release, please remove it.", fontWeight !== undefined);
   return /*#__PURE__*/React__default["default"].createElement(StyledHeading, {
+    themeSize: size,
     style: style,
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$3, null, /*#__PURE__*/React__default["default"].createElement(StyledIconWrapper$2, null, icon !== undefined && (typeof icon === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: icon,
-    size: ICON_SIZE_MAP[fontSize],
+    size: ICON_SIZE_MAP[size],
     intent: ICON_INTENT_MAP[intent]
   }) : /*#__PURE__*/React__default["default"].cloneElement(icon, _objectSpread2({
-    size: ICON_SIZE_MAP[fontSize],
+    size: ICON_SIZE_MAP[size],
     intent: ICON_INTENT_MAP[intent]
-  }, icon.props)))), /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
-    fontSize: fontSize,
-    intent: intent,
-    fontWeight: fontWeight
+  }, icon.props)))), size === 'small' ? /*#__PURE__*/React__default["default"].createElement(Typography.Caption, {
+    intent: intent
+  }, text) : /*#__PURE__*/React__default["default"].createElement(Typography.Body, {
+    variant: "small",
+    intent: intent
   }, text)), rightChildren);
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.40.1",
+  "version": "8.40.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.40.1",
+    "@hero-design/colors": "8.40.2",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.40.1",
+    "@hero-design/react-native-month-year-picker": "^8.40.2",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -48,8 +48,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.11.0",
-    "@hero-design/eslint-plugin": "8.40.1",
-    "@hero-design/react-native-month-year-picker": "^8.40.1",
+    "@hero-design/eslint-plugin": "8.40.2",
+    "@hero-design/react-native-month-year-picker": "^8.40.2",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -65,12 +65,12 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.40.1",
+    "eslint-config-hd": "8.40.2",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "jest-junit": "^16.0.0",
-    "prettier-config-hd": "8.40.1",
+    "prettier-config-hd": "8.40.2",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

package/src/components/SectionHeading/StyledHeading.tsx

@@ -1,16 +1,26 @@
 import styled from '@emotion/native';
 import { View } from 'react-native';
 
-const StyledHeading = styled(View)(({ theme }) => ({
-  paddingVertical: theme.__hd__.sectionHeading.space.headingVerticalPadding,
-  paddingHorizontal: theme.__hd__.sectionHeading.space.headingHorizontalPadding,
-  backgroundColor: theme.__hd__.sectionHeading.colors.background,
-  marginBottom: theme.__hd__.sectionHeading.space.headingMarginBottom,
-  display: 'flex',
-  flexDirection: 'row',
-  alignContent: 'center',
-  justifyContent: 'space-between',
-}));
+type StyledHeadingProps = {
+  themeSize: 'small' | 'medium';
+};
+
+const StyledHeading = styled(View)<StyledHeadingProps>(
+  ({ theme, themeSize }) => ({
+    paddingVertical: theme.__hd__.sectionHeading.space.headingVerticalPadding,
+    paddingHorizontal:
+      theme.__hd__.sectionHeading.space.headingHorizontalPadding,
+    backgroundColor:
+      themeSize === 'medium'
+        ? theme.__hd__.sectionHeading.colors.background
+        : theme.__hd__.sectionHeading.colors.backgroundSmall,
+    marginBottom: theme.__hd__.sectionHeading.space.headingMarginBottom,
+    display: 'flex',
+    flexDirection: 'row',
+    alignContent: 'center',
+    justifyContent: 'space-between',
+  })
+);
 
 const StyledIconWrapper = styled(View)(({ theme }) => ({
   marginRight: theme.__hd__.sectionHeading.space.iconMarginRight,
@@ -19,6 +29,7 @@ const StyledIconWrapper = styled(View)(({ theme }) => ({
 const StyledWrapper = styled(View)(() => ({
   display: 'flex',
   flexDirection: 'row',
+  alignItems: 'center',
 }));
 
 export { StyledHeading, StyledIconWrapper, StyledWrapper };

package/src/components/SectionHeading/__tests__/StyledHeading.spec.tsx

@@ -7,8 +7,12 @@ import {
 } from '../StyledHeading';
 
 describe('StyledHeading', () => {
-  it('renders correct style', () => {
-    const { toJSON } = renderWithTheme(<StyledHeading />);
+  it.each`
+    themeSize
+    ${'small'}
+    ${'medium'}
+  `('renders correct style with $themeSize', ({ themeSize }) => {
+    const { toJSON } = renderWithTheme(<StyledHeading themeSize={themeSize} />);
     expect(toJSON()).toMatchSnapshot();
   });
 });

package/src/components/SectionHeading/__tests__/__snapshots__/StyledHeading.spec.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StyledHeading renders correct style 1`] = `
+exports[`StyledHeading renders correct style with medium 1`] = `
 <View
   style={
     [
@@ -17,6 +17,28 @@ exports[`StyledHeading renders correct style 1`] = `
       undefined,
     ]
   }
+  themeSize="medium"
+/>
+`;
+
+exports[`StyledHeading renders correct style with small 1`] = `
+<View
+  style={
+    [
+      {
+        "alignContent": "center",
+        "backgroundColor": "#ccd2d3",
+        "display": "flex",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "marginBottom": 16,
+        "paddingHorizontal": 16,
+        "paddingVertical": 8,
+      },
+      undefined,
+    ]
+  }
+  themeSize="small"
 />
 `;
 
@@ -25,7 +47,7 @@ exports[`StyledIconWrapper renders correct style 1`] = `
   style={
     [
       {
-        "marginRight": 8,
+        "marginRight": 12,
       },
       undefined,
     ]
@@ -38,6 +60,7 @@ exports[`StyledWrapper renders correct style 1`] = `
   style={
     [
       {
+        "alignItems": "center",
         "display": "flex",
         "flexDirection": "row",
       },

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

@@ -17,11 +17,13 @@ exports[`SectionHeading allows to customise the icon 1`] = `
       undefined,
     ]
   }
+  themeSize="medium"
 >
   <View
     style={
       [
         {
+          "alignItems": "center",
           "display": "flex",
           "flexDirection": "row",
         },
@@ -33,7 +35,7 @@ exports[`SectionHeading allows to customise the icon 1`] = `
       style={
         [
           {
-            "marginRight": 8,
+            "marginRight": 12,
           },
           undefined,
         ]
@@ -61,17 +63,16 @@ exports[`SectionHeading allows to customise the icon 1`] = `
           {
             "color": "#401960",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="regular"
       themeIntent="primary"
       themeTypeface="neutral"
+      themeVariant="small"
     >
       test demo
     </Text>
@@ -97,11 +98,13 @@ exports[`SectionHeading render icon correctly 1`] = `
     ]
   }
   testID="sectionHeading"
+  themeSize="medium"
 >
   <View
     style={
       [
         {
+          "alignItems": "center",
           "display": "flex",
           "flexDirection": "row",
         },
@@ -113,7 +116,7 @@ exports[`SectionHeading render icon correctly 1`] = `
       style={
         [
           {
-            "marginRight": 8,
+            "marginRight": 12,
           },
           undefined,
         ]
@@ -141,17 +144,16 @@ exports[`SectionHeading render icon correctly 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="small"
     >
       test demo
     </Text>
@@ -177,11 +179,13 @@ exports[`SectionHeading render right children correctly 1`] = `
     ]
   }
   testID="sectionHeading"
+  themeSize="medium"
 >
   <View
     style={
       [
         {
+          "alignItems": "center",
           "display": "flex",
           "flexDirection": "row",
         },
@@ -193,7 +197,7 @@ exports[`SectionHeading render right children correctly 1`] = `
       style={
         [
           {
-            "marginRight": 8,
+            "marginRight": 12,
           },
           undefined,
         ]
@@ -206,17 +210,16 @@ exports[`SectionHeading render right children correctly 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="small"
     >
       test demo
     </Text>
@@ -244,6 +247,135 @@ exports[`SectionHeading render right children correctly 1`] = `
 </View>
 `;
 
+exports[`SectionHeading renders correct style with medium 1`] = `
+<View
+  style={
+    [
+      {
+        "alignContent": "center",
+        "backgroundColor": "#f6f6f7",
+        "display": "flex",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "marginBottom": 16,
+        "paddingHorizontal": 16,
+        "paddingVertical": 8,
+      },
+      undefined,
+    ]
+  }
+  themeSize="medium"
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "display": "flex",
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "marginRight": 12,
+          },
+          undefined,
+        ]
+      }
+    />
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="small"
+    >
+      Section Heading
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`SectionHeading renders correct style with small 1`] = `
+<View
+  style={
+    [
+      {
+        "alignContent": "center",
+        "backgroundColor": "#ccd2d3",
+        "display": "flex",
+        "flexDirection": "row",
+        "justifyContent": "space-between",
+        "marginBottom": 16,
+        "paddingHorizontal": 16,
+        "paddingVertical": 8,
+      },
+      undefined,
+    ]
+  }
+  themeSize="small"
+>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "display": "flex",
+          "flexDirection": "row",
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "marginRight": 12,
+          },
+          undefined,
+        ]
+      }
+    />
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 12,
+            "letterSpacing": 0.48,
+            "lineHeight": 16,
+          },
+          undefined,
+        ]
+      }
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      Section Heading
+    </Text>
+  </View>
+</View>
+`;
+
 exports[`SectionHeading renders correctly 1`] = `
 <View
   style={
@@ -262,11 +394,13 @@ exports[`SectionHeading renders correctly 1`] = `
     ]
   }
   testID="sectionHeading"
+  themeSize="medium"
 >
   <View
     style={
       [
         {
+          "alignItems": "center",
           "display": "flex",
           "flexDirection": "row",
         },
@@ -278,7 +412,7 @@ exports[`SectionHeading renders correctly 1`] = `
       style={
         [
           {
-            "marginRight": 8,
+            "marginRight": 12,
           },
           undefined,
         ]
@@ -291,17 +425,16 @@ exports[`SectionHeading renders correctly 1`] = `
           {
             "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
-            "fontSize": 16,
+            "fontSize": 14,
             "letterSpacing": 0.48,
-            "lineHeight": 24,
+            "lineHeight": 22,
           },
           undefined,
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="small"
     >
       test demo
     </Text>

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

@@ -52,4 +52,16 @@ describe('SectionHeading', () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it.each`
+    size
+    ${'small'}
+    ${'medium'}
+  `('renders correct style with $size', ({ size }) => {
+    const wrapper = renderWithTheme(
+      <SectionHeading text="Section Heading" size={size} />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
 });