@hero-design/rn 7.8.0 → 7.9.0

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
-@hero-design/rn:build: cache hit, replaying output 12464e58d4dc494f
+@hero-design/rn:build: cache hit, replaying output e062770c8d58771a
 @hero-design/rn:build: $ yarn build:js && yarn build:types
 @hero-design/rn:build: $ rollup -c
 @hero-design/rn:build: 
 @hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
 @hero-design/rn:build: (!) 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`.
-@hero-design/rn:build: created lib/index.js, es/index.js in 7.5s
+@hero-design/rn:build: created lib/index.js, es/index.js in 7.1s
 @hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly

package/es/index.js

@@ -2975,11 +2975,15 @@ var getCardTheme = function getCardTheme(theme) {
       danger: theme.colors.dangerMediumLight
     }
   };
+  var sizes = {
+    indicatorWidth: theme.space.medium
+  };
   var radii = {
     "default": theme.radii.large
   };
   return {
     colors: colors,
+    sizes: sizes,
     radii: radii
   };
 };
@@ -3135,7 +3139,8 @@ var getIconTheme = function getIconTheme(theme) {
     danger: theme.colors.danger,
     success: theme.colors.success,
     warning: theme.colors.warning,
-    disabledText: theme.colors.disabledText
+    disabledText: theme.colors.disabledText,
+    invertedText: theme.colors.invertedText
   };
   var sizes = {
     xsmall: theme.fontSizes.large,
@@ -15399,7 +15404,8 @@ var COLOR_INTENTS = {
   danger: 'danger',
   success: 'success',
   warning: 'warning',
-  'disabled-text': 'disabledText'
+  'disabled-text': 'disabledText',
+  'text-inverted': 'invertedText'
 };
 var StyledHeroIcon = index$5(HeroIcon)(function (_ref) {
   var themeIntent = _ref.themeIntent,
@@ -16640,7 +16646,6 @@ var StyledDataCard = index$5(View)(function (_ref) {
   return {
     borderRadius: theme.__hd__.card.radii["default"],
     overflow: 'hidden',
-    flex: 1,
     flexDirection: 'row'
   };
 });
@@ -16649,7 +16654,7 @@ var Indicator = index$5(View)(function (_ref2) {
       themeIntent = _ref2.themeIntent;
   return {
     backgroundColor: theme.__hd__.card.colors.indicator[themeIntent],
-    width: scale(16),
+    width: theme.__hd__.card.sizes.indicatorWidth,
     height: '100%'
   };
 });
@@ -16676,7 +16681,6 @@ var StyledCard = index$5(View)(function (_ref) {
     overflow: 'hidden'
   };
   var dataStyles = {
-    flex: 1,
     flexDirection: 'row'
   };
 
@@ -16692,7 +16696,7 @@ var LeftDataCard = index$5(View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     backgroundColor: theme.__hd__.card.colors.dataCardIndicator,
-    width: scale(16),
+    width: theme.__hd__.card.sizes.indicatorWidth,
     height: '100%'
   };
 });

package/lib/index.js

@@ -3002,11 +3002,15 @@ var getCardTheme = function getCardTheme(theme) {
       danger: theme.colors.dangerMediumLight
     }
   };
+  var sizes = {
+    indicatorWidth: theme.space.medium
+  };
   var radii = {
     "default": theme.radii.large
   };
   return {
     colors: colors,
+    sizes: sizes,
     radii: radii
   };
 };
@@ -3162,7 +3166,8 @@ var getIconTheme = function getIconTheme(theme) {
     danger: theme.colors.danger,
     success: theme.colors.success,
     warning: theme.colors.warning,
-    disabledText: theme.colors.disabledText
+    disabledText: theme.colors.disabledText,
+    invertedText: theme.colors.invertedText
   };
   var sizes = {
     xsmall: theme.fontSizes.large,
@@ -15426,7 +15431,8 @@ var COLOR_INTENTS = {
   danger: 'danger',
   success: 'success',
   warning: 'warning',
-  'disabled-text': 'disabledText'
+  'disabled-text': 'disabledText',
+  'text-inverted': 'invertedText'
 };
 var StyledHeroIcon = index$5(HeroIcon)(function (_ref) {
   var themeIntent = _ref.themeIntent,
@@ -16667,7 +16673,6 @@ var StyledDataCard = index$5(ReactNative.View)(function (_ref) {
   return {
     borderRadius: theme.__hd__.card.radii["default"],
     overflow: 'hidden',
-    flex: 1,
     flexDirection: 'row'
   };
 });
@@ -16676,7 +16681,7 @@ var Indicator = index$5(ReactNative.View)(function (_ref2) {
       themeIntent = _ref2.themeIntent;
   return {
     backgroundColor: theme.__hd__.card.colors.indicator[themeIntent],
-    width: scale(16),
+    width: theme.__hd__.card.sizes.indicatorWidth,
     height: '100%'
   };
 });
@@ -16703,7 +16708,6 @@ var StyledCard = index$5(ReactNative.View)(function (_ref) {
     overflow: 'hidden'
   };
   var dataStyles = {
-    flex: 1,
     flexDirection: 'row'
   };
 
@@ -16719,7 +16723,7 @@ var LeftDataCard = index$5(ReactNative.View)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     backgroundColor: theme.__hd__.card.colors.dataCardIndicator,
-    width: scale(16),
+    width: theme.__hd__.card.sizes.indicatorWidth,
     height: '100%'
   };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.8.0",
+  "version": "7.9.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": "7.8.0"
+    "@hero-design/colors": "7.9.0"
   },
   "peerDependencies": {
     "react": "17.0.2",

package/src/components/Card/DataCard/StyledDataCard.tsx

@@ -1,11 +1,9 @@
 import { View } from 'react-native';
 import styled from '@emotion/native';
-import { scale } from '../../../utils/scale';
 
 const StyledDataCard = styled(View)(({ theme }) => ({
   borderRadius: theme.__hd__.card.radii.default,
   overflow: 'hidden',
-  flex: 1,
   flexDirection: 'row',
 }));
 
@@ -13,7 +11,7 @@ const Indicator = styled(View)<{
   themeIntent: 'success' | 'info' | 'warning' | 'danger' | 'archived';
 }>(({ theme, themeIntent }) => ({
   backgroundColor: theme.__hd__.card.colors.indicator[themeIntent],
-  width: scale(16),
+  width: theme.__hd__.card.sizes.indicatorWidth,
   height: '100%',
 }));
 

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

@@ -86,7 +86,6 @@ exports[`StyledDataCard renders correctly 1`] = `
     Array [
       Object {
         "borderRadius": 12,
-        "flex": 1,
         "flexDirection": "row",
         "overflow": "hidden",
       },

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

@@ -6,7 +6,6 @@ exports[`DataCard renders correctly when intent is archived 1`] = `
     Array [
       Object {
         "borderRadius": 12,
-        "flex": 1,
         "flexDirection": "row",
         "overflow": "hidden",
       },
@@ -37,7 +36,6 @@ exports[`DataCard renders correctly when intent is danger 1`] = `
     Array [
       Object {
         "borderRadius": 12,
-        "flex": 1,
         "flexDirection": "row",
         "overflow": "hidden",
       },
@@ -68,7 +66,6 @@ exports[`DataCard renders correctly when intent is info 1`] = `
     Array [
       Object {
         "borderRadius": 12,
-        "flex": 1,
         "flexDirection": "row",
         "overflow": "hidden",
       },
@@ -99,7 +96,6 @@ exports[`DataCard renders correctly when intent is success 1`] = `
     Array [
       Object {
         "borderRadius": 12,
-        "flex": 1,
         "flexDirection": "row",
         "overflow": "hidden",
       },
@@ -130,7 +126,6 @@ exports[`DataCard renders correctly when intent is warning 1`] = `
     Array [
       Object {
         "borderRadius": 12,
-        "flex": 1,
         "flexDirection": "row",
         "overflow": "hidden",
       },

package/src/components/Card/StyledCard.tsx

@@ -1,6 +1,5 @@
 import { View } from 'react-native';
 import styled from '@emotion/native';
-import { scale } from '../../utils/scale';
 
 const StyledCard = styled(View)<{ themeVariant: 'basic' | 'data' }>(
   ({ themeVariant, theme }) => {
@@ -10,7 +9,6 @@ const StyledCard = styled(View)<{ themeVariant: 'basic' | 'data' }>(
     } as const;
 
     const dataStyles = {
-      flex: 1,
       flexDirection: 'row',
     };
 
@@ -25,7 +23,7 @@ const StyledCard = styled(View)<{ themeVariant: 'basic' | 'data' }>(
 
 const LeftDataCard = styled(View)(({ theme }) => ({
   backgroundColor: theme.__hd__.card.colors.dataCardIndicator,
-  width: scale(16),
+  width: theme.__hd__.card.sizes.indicatorWidth,
   height: '100%',
 }));
 

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

@@ -36,7 +36,6 @@ exports[`StyledCard renders correct data style 1`] = `
     Array [
       Object {
         "borderRadius": 12,
-        "flex": 1,
         "flexDirection": "row",
         "overflow": "hidden",
       },

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

@@ -10,7 +10,8 @@ type ThemeIntent =
   | 'danger'
   | 'success'
   | 'warning'
-  | 'disabled-text';
+  | 'disabled-text'
+  | 'text-inverted';
 
 const HeroIcon = createIconSetFromIcoMoon(
   heroIconConfig,
@@ -26,6 +27,7 @@ const COLOR_INTENTS = {
   success: 'success',
   warning: 'warning',
   'disabled-text': 'disabledText',
+  'text-inverted': 'invertedText',
 } as const;
 
 const StyledHeroIcon = styled(HeroIcon)<{

package/src/components/Icon/index.tsx

@@ -20,7 +20,8 @@ export interface IconProps {
     | 'danger'
     | 'success'
     | 'warning'
-    | 'disabled-text';
+    | 'disabled-text'
+    | 'text-inverted';
   /**
    * Size of the Icon.
    */

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -180,6 +180,9 @@ Object {
       "radii": Object {
         "default": 12,
       },
+      "sizes": Object {
+        "indicatorWidth": 16,
+      },
     },
     "checkbox": Object {
       "borderWidths": Object {
@@ -293,6 +296,7 @@ Object {
         "danger": "#de350b",
         "disabledText": "#8b8d92",
         "info": "#4568fb",
+        "invertedText": "#ffffff",
         "primary": "#7622d7",
         "success": "#01b39c",
         "text": "#292a2b",

package/src/theme/components/card.ts

@@ -12,11 +12,15 @@ const getCardTheme = (theme: GlobalTheme) => {
     },
   };
 
+  const sizes = {
+    indicatorWidth: theme.space.medium,
+  };
+
   const radii = {
     default: theme.radii.large,
   };
 
-  return { colors, radii };
+  return { colors, sizes, radii };
 };
 
 export default getCardTheme;

package/src/theme/components/icon.ts

@@ -9,6 +9,7 @@ const getIconTheme = (theme: GlobalTheme) => {
     success: theme.colors.success,
     warning: theme.colors.warning,
     disabledText: theme.colors.disabledText,
+    invertedText: theme.colors.invertedText,
   };
 
   const sizes = {

package/types/components/Icon/HeroIcon/index.d.ts

@@ -1,5 +1,5 @@
 declare type ThemeSize = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
-declare type ThemeIntent = 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text';
+declare type ThemeIntent = 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text' | 'text-inverted';
 declare const StyledHeroIcon: import("@emotion/native").StyledComponent<import("react-native-vector-icons/Icon").IconProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/types/components/Icon/index.d.ts

@@ -9,7 +9,7 @@ export interface IconProps {
     /**
      * Intent of the Icon.
      */
-    intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text';
+    intent?: 'text' | 'primary' | 'info' | 'danger' | 'success' | 'warning' | 'disabled-text' | 'text-inverted';
     /**
      * Size of the Icon.
      */