@hero-design/rn 8.30.4 → 8.31.0

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 27.5s
+created lib/index.js, es/index.js in 22.7s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -3118,7 +3118,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     xxxxlarge: theme.fontSizes.xxxxlarge,
     xxxxxlarge: theme.fontSizes.xxxxxlarge,
     '6xlarge': theme.fontSizes['6xlarge'],
-    '7xlarge': theme.fontSizes['7xlarge']
+    '7xlarge': theme.fontSizes['7xlarge'],
+    caption: theme.fontSizes.small
   };
   var lineHeights = {
     xsmall: theme.lineHeights.xsmall,
@@ -3130,7 +3131,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     xxxxlarge: theme.lineHeights.xxxxlarge,
     xxxxxlarge: theme.lineHeights.xxxxxlarge,
     '6xlarge': theme.lineHeights['6xlarge'],
-    '7xlarge': theme.lineHeights['7xlarge']
+    '7xlarge': theme.lineHeights['7xlarge'],
+    caption: theme.lineHeights.small
   };
   return {
     colors: colors,
@@ -6190,7 +6192,7 @@ var Spacer$1 = index$a(View)(function (_ref3) {
   };
 });
 
-var FONTWEIGHT_MAP = {
+var FONTWEIGHT_MAP$1 = {
   light: 'light',
   regular: 'regular',
   'semi-bold': 'semiBold'
@@ -6207,12 +6209,12 @@ var StyledText$3 = index$a(Text$1)(function (_ref) {
     letterSpacing: theme.__hd__.typography.fontSizes[themeFontSize] * 0.03
   };
   return _objectSpread2(_objectSpread2({}, sizeStyles), {}, {
-    fontFamily: theme.__hd__.typography.fonts[themeTypeface][FONTWEIGHT_MAP[themeFontWeight]],
+    fontFamily: theme.__hd__.typography.fonts[themeTypeface][FONTWEIGHT_MAP$1[themeFontWeight]],
     color: theme.__hd__.typography.colors[themeIntent]
   });
 });
 
-var _excluded$u = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$v = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -6225,7 +6227,7 @@ var Text = function Text(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$u);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/React.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6235,8 +6237,45 @@ var Text = function Text(_ref) {
   }), children);
 };
 
+var FONTWEIGHT_MAP = {
+  light: 'light',
+  regular: 'regular',
+  'semi-bold': 'semiBold'
+};
+
+var StyledCaption = index$a(Text$1)(function (_ref) {
+  var themeFontWeight = _ref.themeFontWeight,
+    themeIntent = _ref.themeIntent,
+    theme = _ref.theme;
+  return {
+    fontSize: theme.__hd__.typography.fontSizes.caption,
+    lineHeight: theme.__hd__.typography.lineHeights.caption,
+    letterSpacing: theme.__hd__.typography.fontSizes.caption * (themeFontWeight === 'regular' ? 0.04 : 0.02),
+    color: theme.__hd__.typography.colors[themeIntent],
+    fontFamily: theme.__hd__.typography.fonts.neutral[FONTWEIGHT_MAP[themeFontWeight]]
+  };
+});
+
+var _excluded$u = ["children", "fontWeight", "intent", "allowFontScaling"];
+var Caption = function Caption(_ref) {
+  var children = _ref.children,
+    _ref$fontWeight = _ref.fontWeight,
+    fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
+    _ref$intent = _ref.intent,
+    intent = _ref$intent === void 0 ? 'body' : _ref$intent,
+    _ref$allowFontScaling = _ref.allowFontScaling,
+    allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$u);
+  return /*#__PURE__*/React.createElement(StyledCaption, _extends$1({}, nativeProps, {
+    themeFontWeight: fontWeight,
+    themeIntent: intent,
+    allowFontScaling: allowFontScaling
+  }), children);
+};
+
 var Typography = {
-  Text: Text
+  Text: Text,
+  Caption: Caption
 };
 
 // 🔴 DO NOT EDIT — This file is generated automatically.

package/lib/index.js

@@ -3148,7 +3148,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     xxxxlarge: theme.fontSizes.xxxxlarge,
     xxxxxlarge: theme.fontSizes.xxxxxlarge,
     '6xlarge': theme.fontSizes['6xlarge'],
-    '7xlarge': theme.fontSizes['7xlarge']
+    '7xlarge': theme.fontSizes['7xlarge'],
+    caption: theme.fontSizes.small
   };
   var lineHeights = {
     xsmall: theme.lineHeights.xsmall,
@@ -3160,7 +3161,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     xxxxlarge: theme.lineHeights.xxxxlarge,
     xxxxxlarge: theme.lineHeights.xxxxxlarge,
     '6xlarge': theme.lineHeights['6xlarge'],
-    '7xlarge': theme.lineHeights['7xlarge']
+    '7xlarge': theme.lineHeights['7xlarge'],
+    caption: theme.lineHeights.small
   };
   return {
     colors: colors,
@@ -6220,7 +6222,7 @@ var Spacer$1 = index$a(reactNative.View)(function (_ref3) {
   };
 });
 
-var FONTWEIGHT_MAP = {
+var FONTWEIGHT_MAP$1 = {
   light: 'light',
   regular: 'regular',
   'semi-bold': 'semiBold'
@@ -6237,12 +6239,12 @@ var StyledText$3 = index$a(reactNative.Text)(function (_ref) {
     letterSpacing: theme.__hd__.typography.fontSizes[themeFontSize] * 0.03
   };
   return _objectSpread2(_objectSpread2({}, sizeStyles), {}, {
-    fontFamily: theme.__hd__.typography.fonts[themeTypeface][FONTWEIGHT_MAP[themeFontWeight]],
+    fontFamily: theme.__hd__.typography.fonts[themeTypeface][FONTWEIGHT_MAP$1[themeFontWeight]],
     color: theme.__hd__.typography.colors[themeIntent]
   });
 });
 
-var _excluded$u = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
+var _excluded$v = ["children", "fontSize", "fontWeight", "intent", "typeface", "allowFontScaling"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -6255,7 +6257,7 @@ var Text = function Text(_ref) {
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$u);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$v);
   return /*#__PURE__*/React__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6265,8 +6267,45 @@ var Text = function Text(_ref) {
   }), children);
 };
 
+var FONTWEIGHT_MAP = {
+  light: 'light',
+  regular: 'regular',
+  'semi-bold': 'semiBold'
+};
+
+var StyledCaption = index$a(reactNative.Text)(function (_ref) {
+  var themeFontWeight = _ref.themeFontWeight,
+    themeIntent = _ref.themeIntent,
+    theme = _ref.theme;
+  return {
+    fontSize: theme.__hd__.typography.fontSizes.caption,
+    lineHeight: theme.__hd__.typography.lineHeights.caption,
+    letterSpacing: theme.__hd__.typography.fontSizes.caption * (themeFontWeight === 'regular' ? 0.04 : 0.02),
+    color: theme.__hd__.typography.colors[themeIntent],
+    fontFamily: theme.__hd__.typography.fonts.neutral[FONTWEIGHT_MAP[themeFontWeight]]
+  };
+});
+
+var _excluded$u = ["children", "fontWeight", "intent", "allowFontScaling"];
+var Caption = function Caption(_ref) {
+  var children = _ref.children,
+    _ref$fontWeight = _ref.fontWeight,
+    fontWeight = _ref$fontWeight === void 0 ? 'regular' : _ref$fontWeight,
+    _ref$intent = _ref.intent,
+    intent = _ref$intent === void 0 ? 'body' : _ref$intent,
+    _ref$allowFontScaling = _ref.allowFontScaling,
+    allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
+    nativeProps = _objectWithoutProperties(_ref, _excluded$u);
+  return /*#__PURE__*/React__default["default"].createElement(StyledCaption, _extends$1({}, nativeProps, {
+    themeFontWeight: fontWeight,
+    themeIntent: intent,
+    allowFontScaling: allowFontScaling
+  }), children);
+};
+
 var Typography = {
-  Text: Text
+  Text: Text,
+  Caption: Caption
 };
 
 // 🔴 DO NOT EDIT — This file is generated automatically.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.30.4",
+  "version": "8.31.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.30.4",
+    "@hero-design/colors": "8.31.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -45,7 +45,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.30.4",
+    "@hero-design/eslint-plugin": "8.31.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,10 +61,10 @@
     "@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.30.4",
+    "eslint-config-hd": "8.31.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.30.4",
+    "prettier-config-hd": "8.31.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Typography/Caption/StyledCaption.tsx

@@ -0,0 +1,19 @@
+import { Text } from 'react-native';
+import styled from '@emotion/native';
+import { FONTWEIGHT_MAP, ThemeIntent } from '../types';
+
+const StyledCaption = styled(Text)<{
+  themeFontWeight: 'regular' | 'semi-bold';
+  themeIntent: ThemeIntent;
+}>(({ themeFontWeight, themeIntent, theme }) => ({
+  fontSize: theme.__hd__.typography.fontSizes.caption,
+  lineHeight: theme.__hd__.typography.lineHeights.caption,
+  letterSpacing:
+    theme.__hd__.typography.fontSizes.caption *
+    (themeFontWeight === 'regular' ? 0.04 : 0.02),
+  color: theme.__hd__.typography.colors[themeIntent],
+  fontFamily:
+    theme.__hd__.typography.fonts.neutral[FONTWEIGHT_MAP[themeFontWeight]],
+}));
+
+export { StyledCaption };

package/src/components/Typography/Caption/__tests__/StyledCaption.spec.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import { StyledCaption } from '../StyledCaption';
+
+describe('StyledCaption', () => {
+  it.each`
+    fontWeight
+    ${'regular'}
+    ${'semi-bold'}
+  `('has $fontWeight fontWeight style', ({ fontWeight }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledCaption themeFontWeight={fontWeight} themeIntent="body">
+        This is a test
+      </StyledCaption>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it.each`
+    intent
+    ${'body'}
+    ${'subdued'}
+    ${'primary'}
+    ${'success'}
+    ${'info'}
+    ${'warning'}
+    ${'danger'}
+    ${'inverted'}
+  `('has $intent intent style', ({ intent }) => {
+    const { toJSON } = renderWithTheme(
+      <StyledCaption themeFontWeight="regular" themeIntent={intent}>
+        This is a test
+      </StyledCaption>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

package/src/components/Typography/Caption/__tests__/__snapshots__/StyledCaption.spec.tsx.snap

@@ -0,0 +1,211 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledCaption has body intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has danger intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#f46363",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="danger"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has info intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#4568fb",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="info"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has inverted intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#ffffff",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="inverted"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has primary intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#401960",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="primary"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has regular fontWeight style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has semi-bold fontWeight style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#001f23",
+        "fontFamily": "BeVietnamPro-SemiBold",
+        "fontSize": 12,
+        "letterSpacing": 0.24,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="semi-bold"
+  themeIntent="body"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has subdued intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#4d6265",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="subdued"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has success intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#5ace7d",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="success"
+>
+  This is a test
+</Text>
+`;
+
+exports[`StyledCaption has warning intent style 1`] = `
+<Text
+  style={
+    Array [
+      Object {
+        "color": "#ffbe71",
+        "fontFamily": "BeVietnamPro-Regular",
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
+      },
+      undefined,
+    ]
+  }
+  themeFontWeight="regular"
+  themeIntent="warning"
+>
+  This is a test
+</Text>
+`;