@hero-design/rn 8.73.0 → 8.74.0

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/MapPin/StyledMapPin.tsx

@@ -15,11 +15,8 @@ export const StyledContainer = styled(View)(({ theme }) => ({
 
 export const StyledContent = styled(View)<{
   themeState: State;
-  themeIsIcon: boolean;
-}>(({ theme, themeState, themeIsIcon }) => ({
-  backgroundColor: themeIsIcon
-    ? theme.__hd__.mapPin.colors.iconBackground
-    : theme.__hd__.mapPin.colors.background,
+}>(({ theme, themeState }) => ({
+  backgroundColor: theme.__hd__.mapPin.colors.background,
   borderRadius: theme.__hd__.mapPin.radii.default,
   borderWidth: theme.__hd__.mapPin.borderWidths.default,
   borderColor: theme.__hd__.mapPin.colors.border[themeState],

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

@@ -28,7 +28,7 @@ exports[`MapPin renders applied state correctly 1`] = `
         [
           {
             "alignItems": "center",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#ffffff",
             "borderColor": "#795e90",
             "borderRadius": 12,
             "borderWidth": 4,
@@ -48,7 +48,6 @@ exports[`MapPin renders applied state correctly 1`] = `
           undefined,
         ]
       }
-      themeIsIcon={true}
       themeState="applied"
     >
       <HeroIcon
@@ -56,14 +55,14 @@ exports[`MapPin renders applied state correctly 1`] = `
         style={
           [
             {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontSize": 16,
             },
             undefined,
           ]
         }
         testID="map-pin-icon"
-        themeIntent="text-inverted"
+        themeIntent="text"
         themeSize="xsmall"
       />
     </View>
@@ -170,7 +169,7 @@ exports[`MapPin renders icon correctly 1`] = `
         [
           {
             "alignItems": "center",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#ffffff",
             "borderColor": "#ffffff",
             "borderRadius": 12,
             "borderWidth": 4,
@@ -190,7 +189,6 @@ exports[`MapPin renders icon correctly 1`] = `
           undefined,
         ]
       }
-      themeIsIcon={true}
       themeState="idle"
     >
       <HeroIcon
@@ -198,14 +196,14 @@ exports[`MapPin renders icon correctly 1`] = `
         style={
           [
             {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontSize": 16,
             },
             undefined,
           ]
         }
         testID="map-pin-icon"
-        themeIntent="text-inverted"
+        themeIntent="text"
         themeSize="xsmall"
       />
     </View>
@@ -281,7 +279,6 @@ exports[`MapPin renders image correctly 1`] = `
           undefined,
         ]
       }
-      themeIsIcon={false}
       themeState="idle"
     >
       <Image
@@ -355,7 +352,7 @@ exports[`MapPin renders selected state correctly 1`] = `
         [
           {
             "alignItems": "center",
-            "backgroundColor": "#4d6265",
+            "backgroundColor": "#ffffff",
             "borderColor": "#795e90",
             "borderRadius": 12,
             "borderWidth": 4,
@@ -375,7 +372,6 @@ exports[`MapPin renders selected state correctly 1`] = `
           undefined,
         ]
       }
-      themeIsIcon={true}
       themeState="selected"
     >
       <HeroIcon
@@ -383,14 +379,14 @@ exports[`MapPin renders selected state correctly 1`] = `
         style={
           [
             {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontSize": 16,
             },
             undefined,
           ]
         }
         testID="map-pin-icon"
-        themeIntent="text-inverted"
+        themeIntent="text"
         themeSize="xsmall"
       />
     </View>

package/src/components/MapPin/index.tsx

@@ -32,7 +32,7 @@ const MapPin = ({
   const badgeIcon = getBadgeIconName(state);
   return (
     <StyledContainer {...nativeProps} style={style} testID={testID}>
-      <StyledContent themeState={state} themeIsIcon={!!icon}>
+      <StyledContent themeState={state}>
         {image && (
           <StyledImage
             testID={testID ? `${testID}-image` : undefined}
@@ -43,7 +43,7 @@ const MapPin = ({
           <Icon
             icon={icon}
             size="xsmall"
-            intent="text-inverted"
+            intent="text"
             testID={testID ? `${testID}-icon` : undefined}
           />
         )}

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.
    */