@hero-design/rn 8.73.1 → 8.74.0

package/.turbo/turbo-build.log

@@ -1,8 +1,8 @@
-(node:2943) 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:3037) 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:2943) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3037) 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 50.4s
+created lib/index.js, es/index.js in 52.2s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.74.0
+
+### Minor Changes
+
+- [#3449](https://github.com/Thinkei/hero-design/pull/3449) [`b3029bb02497703734c5fab90aff67d20b94940b`](https://github.com/Thinkei/hero-design/commit/b3029bb02497703734c5fab90aff67d20b94940b) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Icon][typography] Add muted intent
+
 ## 8.73.1
 
 ### Patch Changes

package/es/index.js

@@ -2902,7 +2902,8 @@ var getIconTheme = function getIconTheme(theme) {
     success: theme.colors.success,
     warning: theme.colors.warning,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
-    invertedText: theme.colors.onDarkGlobalSurface
+    invertedText: theme.colors.onDarkGlobalSurface,
+    muted: theme.colors.mutedOnDefaultGlobalSurface
   };
   var sizes = {
     xsmall: theme.fontSizes.large,
@@ -3679,7 +3680,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     success: theme.colors.success,
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface,
-    disabled: theme.colors.disabledOnDefaultGlobalSurface
+    disabled: theme.colors.disabledOnDefaultGlobalSurface,
+    muted: theme.colors.mutedOnDefaultGlobalSurface
   };
   var fontSizes = {
     xsmall: theme.fontSizes.xsmall,
@@ -7792,7 +7794,8 @@ var COLOR_INTENTS = {
   success: 'success',
   warning: 'warning',
   'disabled-text': 'disabledText',
-  'text-inverted': 'invertedText'
+  'text-inverted': 'invertedText',
+  muted: 'muted'
 };
 var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   var themeIntent = _ref.themeIntent,

package/lib/index.js

@@ -2929,7 +2929,8 @@ var getIconTheme = function getIconTheme(theme) {
     success: theme.colors.success,
     warning: theme.colors.warning,
     disabledText: theme.colors.disabledOnDefaultGlobalSurface,
-    invertedText: theme.colors.onDarkGlobalSurface
+    invertedText: theme.colors.onDarkGlobalSurface,
+    muted: theme.colors.mutedOnDefaultGlobalSurface
   };
   var sizes = {
     xsmall: theme.fontSizes.large,
@@ -3706,7 +3707,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     success: theme.colors.success,
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface,
-    disabled: theme.colors.disabledOnDefaultGlobalSurface
+    disabled: theme.colors.disabledOnDefaultGlobalSurface,
+    muted: theme.colors.mutedOnDefaultGlobalSurface
   };
   var fontSizes = {
     xsmall: theme.fontSizes.xsmall,
@@ -7819,7 +7821,8 @@ var COLOR_INTENTS = {
   success: 'success',
   warning: 'warning',
   'disabled-text': 'disabledText',
-  'text-inverted': 'invertedText'
+  'text-inverted': 'invertedText',
+  muted: 'muted'
 };
 var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   var themeIntent = _ref.themeIntent,

package/package.json

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

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

@@ -12,7 +12,8 @@ type ThemeIntent =
   | 'success'
   | 'warning'
   | 'disabled-text'
-  | 'text-inverted';
+  | 'text-inverted'
+  | 'muted';
 
 const HeroIcon = createIconSet(
   glyphMap,
@@ -30,6 +31,7 @@ const COLOR_INTENTS = {
   warning: 'warning',
   'disabled-text': 'disabledText',
   'text-inverted': 'invertedText',
+  muted: 'muted',
 } as const;
 
 const StyledHeroIcon = styled(HeroIcon)<{

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

@@ -149,6 +149,51 @@ exports[`Icon renders correctly with color and size 1`] = `
 `;
 
 exports[`Icon renders correctly with intent 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      [
+        {
+          "color": "#001f23",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+  <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[`Icon renders correctly with intent 2`] = `
 <View
   style={
     {
@@ -192,3 +237,363 @@ exports[`Icon renders correctly with intent 1`] = `
   />
 </View>
 `;
+
+exports[`Icon renders correctly with intent 3`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      [
+        {
+          "color": "#795e90",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="secondary"
+    themeSize="medium"
+  />
+  <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[`Icon renders correctly with intent 4`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      [
+        {
+          "color": "#b5c3fd",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="info"
+    themeSize="medium"
+  />
+  <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[`Icon renders correctly with intent 5`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      [
+        {
+          "color": "#cb300a",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="danger"
+    themeSize="medium"
+  />
+  <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[`Icon renders correctly with intent 6`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      [
+        {
+          "color": "#5ace7d",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="success"
+    themeSize="medium"
+  />
+  <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[`Icon renders correctly with intent 7`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      [
+        {
+          "color": "#ffbe71",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="warning"
+    themeSize="medium"
+  />
+  <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[`Icon renders correctly with intent 8`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      [
+        {
+          "color": "#bfc1c5",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="disabled-text"
+    themeSize="medium"
+  />
+  <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[`Icon renders correctly with intent 9`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      [
+        {
+          "color": "#ffffff",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="text-inverted"
+    themeSize="medium"
+  />
+  <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[`Icon renders correctly with intent 10`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <HeroIcon
+    name="home"
+    style={
+      [
+        {
+          "color": "#4d6265",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="muted"
+    themeSize="medium"
+  />
+  <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>
+`;

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

@@ -9,8 +9,20 @@ describe('Icon', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it('renders correctly with intent', () => {
-    const { toJSON } = renderWithTheme(<Icon icon="home" intent="primary" />);
+  it.each`
+    intent
+    ${'text'}
+    ${'primary'}
+    ${'secondary'}
+    ${'info'}
+    ${'danger'}
+    ${'success'}
+    ${'warning'}
+    ${'disabled-text'}
+    ${'text-inverted'}
+    ${'muted'}
+  `('renders correctly with intent', ({ intent }) => {
+    const { toJSON } = renderWithTheme(<Icon icon="home" intent={intent} />);
 
     expect(toJSON()).toMatchSnapshot();
   });

package/src/components/Icon/index.tsx

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

package/src/components/Typography/Body/__tests__/__snapshots__/index.spec.tsx.snap

@@ -306,6 +306,57 @@ exports[`Body has inverted intent style 1`] = `
 </View>
 `;
 
+exports[`Body has muted intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#4d6265",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 16,
+          "letterSpacing": 0.48,
+          "lineHeight": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="muted"
+    themeTypeface="neutral"
+    themeVariant="regular"
+  >
+    This is a test
+  </Text>
+  <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[`Body has primary intent style 1`] = `
 <View
   style={

package/src/components/Typography/Body/__tests__/index.spec.tsx

@@ -22,6 +22,7 @@ describe('Body', () => {
     ${'inverted'}
     ${'archived'}
     ${'disabled'}
+    ${'muted'}
   `('has $intent intent style', ({ intent }) => {
     const { toJSON } = renderWithTheme(
       <Body intent={intent}>This is a test</Body>

package/src/components/Typography/Body/index.tsx

@@ -26,7 +26,8 @@ export interface BodyProps extends NativeTextProps {
     | 'danger'
     | 'inverted'
     | 'archived'
-    | 'disabled';
+    | 'disabled'
+    | 'muted';
   /**
    * Additional style.
    */

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

@@ -300,6 +300,56 @@ exports[`Caption has inverted intent style 1`] = `
 </View>
 `;
 
+exports[`Caption has muted intent style 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#4d6265",
+          "fontFamily": "BeVietnamPro-Regular",
+          "fontSize": 12,
+          "letterSpacing": 0.36,
+          "lineHeight": 16,
+        },
+        undefined,
+      ]
+    }
+    themeFontWeight="regular"
+    themeIntent="muted"
+  >
+    This is a test
+  </Text>
+  <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[`Caption has primary intent style 1`] = `
 <View
   style={

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

@@ -36,6 +36,7 @@ describe('Caption', () => {
     ${'inverted'}
     ${'archived'}
     ${'disabled'}
+    ${'muted'}
   `('has $intent intent style', ({ intent }) => {
     const { toJSON } = renderWithTheme(
       <Caption intent={intent}>This is a test</Caption>