@hero-design/rn 8.65.1 → 8.66.0

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
-(node:2923) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
+(node:2991) ExperimentalWarning: Import assertions are not a stable feature of the JavaScript language. Avoid relying on their current behavior and syntax as those might change in a future version of Node.js.
 (Use `node --trace-warnings ...` to show where the warning was created)
-(node:2923) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:2991) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 
 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 '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 51.3s
+created lib/index.js, es/index.js in 50.1s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.66.0
+
+### Minor Changes
+
+- [#3385](https://github.com/Thinkei/hero-design/pull/3385) [`e056fd3ba0867e2879153306e5b9d10a935a590f`](https://github.com/Thinkei/hero-design/commit/e056fd3ba0867e2879153306e5b9d10a935a590f) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Card] Add neutral intent
+
 ## 8.65.1
 
 ### Patch Changes

package/es/index.js

@@ -2466,7 +2466,8 @@ var getCardTheme = function getCardTheme(theme) {
     success: theme.colors.success,
     warning: theme.colors.warning,
     danger: theme.colors.error,
-    archived: theme.colors.archived
+    archived: theme.colors.archived,
+    neutral: theme.colors.neutralGlobalSurface
   };
   var sizes = {
     indicatorWidth: theme.sizes.medium

package/lib/index.js

@@ -2493,7 +2493,8 @@ var getCardTheme = function getCardTheme(theme) {
     success: theme.colors.success,
     warning: theme.colors.warning,
     danger: theme.colors.error,
-    archived: theme.colors.archived
+    archived: theme.colors.archived,
+    neutral: theme.colors.neutralGlobalSurface
   };
   var sizes = {
     indicatorWidth: theme.sizes.medium

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.65.1",
+  "version": "8.66.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Card/StyledCard.tsx

@@ -2,7 +2,13 @@ import { View } from 'react-native';
 import styled from '@emotion/native';
 
 const StyledCard = styled(View)<{
-  themeIntent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived';
+  themeIntent?:
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'archived'
+    | 'neutral';
 }>(({ theme, themeIntent }) => ({
   ...(themeIntent !== undefined && {
     backgroundColor: theme.__hd__.card.colors[themeIntent],

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

@@ -260,6 +260,70 @@ exports[`Card renders correctly when intent is primary 1`] = `
 </View>
 `;
 
+exports[`Card renders correctly when intent is subdued 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 12,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="subdued"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="small"
+    >
+      Card Content
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Card renders correctly when intent is success 1`] = `
 <View
   style={

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

@@ -25,6 +25,7 @@ describe('Card', () => {
     ${'info'}
     ${'danger'}
     ${'archived'}
+    ${'subdued'}
   `('renders correctly when intent is $intent', ({ intent }) => {
     const { toJSON, getByText } = renderWithTheme(
       <Card intent={intent}>

package/src/components/Card/index.tsx

@@ -12,7 +12,13 @@ export interface CardProps extends ViewProps {
   /**
    * Visual intent color to apply to card.
    */
-  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived';
+  intent?:
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'archived'
+    | 'neutral';
   /**
    * Additional style.
    */

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

@@ -273,6 +273,7 @@ exports[`theme returns correct theme object 1`] = `
         "danger": "#f46363",
         "dataCardIndicator": "#401960",
         "info": "#b5c3fd",
+        "neutral": "#f6f6f7",
         "primary": "#401960",
         "success": "#5ace7d",
         "warning": "#ffbe71",

package/src/theme/components/card.ts

@@ -9,6 +9,7 @@ const getCardTheme = (theme: GlobalTheme) => {
     warning: theme.colors.warning,
     danger: theme.colors.error,
     archived: theme.colors.archived,
+    neutral: theme.colors.neutralGlobalSurface,
   };
 
   const sizes = {