@hero-design/rn 8.0.2 → 8.2.0

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

@@ -14,6 +14,7 @@ exports[`Alert Icon render custom icon correctly 1`] = `
     ]
   }
   themeIntent="info"
+  themeVariant="rounded"
 >
   <View
     showDivider={false}
@@ -107,6 +108,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
     ]
   }
   themeIntent="error"
+  themeVariant="rounded"
 >
   <View
     showDivider={true}
@@ -207,7 +209,6 @@ exports[`Alert renders correctly when intent is error 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -256,6 +257,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
     ]
   }
   themeIntent="info"
+  themeVariant="rounded"
 >
   <View
     showDivider={true}
@@ -356,7 +358,6 @@ exports[`Alert renders correctly when intent is info 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -405,6 +406,7 @@ exports[`Alert renders correctly when intent is notification 1`] = `
     ]
   }
   themeIntent="notification"
+  themeVariant="rounded"
 >
   <View
     showDivider={true}
@@ -478,7 +480,6 @@ exports[`Alert renders correctly when intent is notification 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -527,6 +528,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
     ]
   }
   themeIntent="success"
+  themeVariant="rounded"
 >
   <View
     showDivider={true}
@@ -627,7 +629,6 @@ exports[`Alert renders correctly when intent is success 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -676,6 +677,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
     ]
   }
   themeIntent="warning"
+  themeVariant="rounded"
 >
   <View
     showDivider={true}
@@ -776,7 +778,6 @@ exports[`Alert renders correctly when intent is warning 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -810,3 +811,117 @@ exports[`Alert renders correctly when intent is warning 1`] = `
   </View>
 </View>
 `;
+
+exports[`Alert renders correctly without rounded  1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "backgroundColor": "#b5c3fd",
+        "borderRadius": 0,
+        "flexDirection": "row",
+        "minHeight": 48,
+      },
+      undefined,
+    ]
+  }
+  themeIntent="info"
+  themeVariant="unrounded"
+>
+  <View
+    showDivider={false}
+    style={
+      Array [
+        Object {
+          "borderColor": "#e8e9ea",
+          "borderRightWidth": 0,
+          "flex": 1,
+          "flexDirection": "row",
+          "paddingVertical": 12,
+        },
+        undefined,
+      ]
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "paddingLeft": 12,
+          },
+          undefined,
+        ]
+      }
+      testID="alert-left-icon"
+    >
+      <HeroIcon
+        name="circle-info"
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="text"
+        themeSize="small"
+      />
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 12,
+          },
+          undefined,
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-SemiBold",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="semi-bold"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        Title
+      </Text>
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 14,
+              "letterSpacing": 0.42,
+              "lineHeight": 22,
+            },
+            undefined,
+          ]
+        }
+        themeFontSize="medium"
+        themeFontWeight="regular"
+        themeIntent="body"
+        themeTypeface="neutral"
+      >
+        Content
+      </Text>
+    </View>
+  </View>
+</View>
+`;

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

@@ -29,6 +29,20 @@ describe('Alert', () => {
     expect(getByTestId('alert-close-icon')).toBeDefined();
   });
 
+  it('renders correctly without rounded ', () => {
+    const { toJSON, getByTestId, getByText, queryByTestId } = renderWithTheme(
+      <Alert title="Title" content="Content" variant="unrounded" />
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    // Has default icon
+    expect(getByTestId('alert-left-icon')).toBeDefined();
+
+    expect(getByText('Title')).toBeDefined();
+    expect(getByText('Content')).toBeDefined();
+    expect(queryByTestId('alert-close-icon')).toBeNull();
+  });
+
   it('renders correctly when intent is notification', () => {
     const { toJSON, getByText, queryByTestId } = renderWithTheme(
       <Alert

package/src/components/Alert/index.tsx

@@ -1,7 +1,6 @@
-import type { ReactElement } from 'react';
 import React from 'react';
+import type { ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import type { IconName } from '../Icon';
 import Icon from '../Icon';
 import Typography from '../Typography';
 import {
@@ -11,6 +10,7 @@ import {
   IconContainer,
   TextContainer,
 } from './StyledAlert';
+import type { IconName } from '../Icon';
 
 const getIntentIcon = (
   intent: 'success' | 'info' | 'warning' | 'error' | 'notification'
@@ -60,6 +60,10 @@ interface AlertProps {
    * Closing callback. When onClose is available, an X button will be rendered on the right side of alert. The callback will be called when user clicks on X button.
    */
   onClose?: () => void;
+  /**
+   * Alert variant.
+   */
+  variant?: 'unrounded' | 'rounded';
   /**
    * Addtional style.
    */
@@ -76,11 +80,17 @@ const Alert = ({
   title,
   intent = 'info',
   onClose,
+  variant = 'rounded',
   style,
   testID,
 }: AlertProps): JSX.Element => {
   return (
-    <Container themeIntent={intent} style={style} testID={testID}>
+    <Container
+      themeVariant={variant}
+      themeIntent={intent}
+      style={style}
+      testID={testID}
+    >
       <ContentContainer showDivider={!!onClose}>
         {icon !== null ? (
           <AlertIcon icon={icon || getIntentIcon(intent)} />

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

@@ -87,7 +87,6 @@ exports[`Attachment renders correctly 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -123,7 +122,6 @@ exports[`Attachment renders correctly 1`] = `
     accessible={true}
     collapsable={false}
     focusable={true}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/StyledAvatarStack.spec.tsx.snap

@@ -2,10 +2,14 @@
 
 exports[`StyledAvatar renders correctly 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}

package/src/components/Avatar/AvatarStack/__tests__/__snapshots__/index.spec.tsx.snap

@@ -17,10 +17,14 @@ exports[`AvatarStack renders correctly by default 1`] = `
   themeSize="small"
 >
   <View
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={false}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -74,10 +78,14 @@ exports[`AvatarStack renders correctly by default 1`] = `
     </View>
   </View>
   <View
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={false}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -131,10 +139,14 @@ exports[`AvatarStack renders correctly by default 1`] = `
     </View>
   </View>
   <View
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={false}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -188,10 +200,14 @@ exports[`AvatarStack renders correctly by default 1`] = `
     </View>
   </View>
   <View
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={false}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -245,10 +261,14 @@ exports[`AvatarStack renders correctly by default 1`] = `
     </View>
   </View>
   <View
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={false}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -321,10 +341,14 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
   themeSize="medium"
 >
   <View
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={false}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -378,10 +402,14 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     </View>
   </View>
   <View
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={false}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -435,10 +463,14 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     </View>
   </View>
   <View
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={false}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}
@@ -492,10 +524,14 @@ exports[`AvatarStack renders correctly with custom props 1`] = `
     </View>
   </View>
   <View
+    accessibilityState={
+      Object {
+        "disabled": true,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={false}
-    nativeID="animatedComponent"
     onClick={[Function]}
     onResponderGrant={[Function]}
     onResponderMove={[Function]}

package/src/components/Avatar/__tests__/__snapshots__/StyledAvatar.spec.tsx.snap

@@ -25,7 +25,6 @@ exports[`StyledPressable renders correct style 1`] = `
   accessible={true}
   collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}

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

@@ -2,7 +2,13 @@
 
 exports[`Avatar fallbacks to title when there image failed to load 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
   accessible={true}
+  collapsable={false}
   focusable={false}
   onClick={[Function]}
   onResponderGrant={[Function]}
@@ -79,10 +85,14 @@ exports[`Avatar fallbacks to title when there image failed to load 1`] = `
 
 exports[`Avatar prioritizes source over title 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
@@ -128,10 +138,14 @@ exports[`Avatar prioritizes source over title 1`] = `
 
 exports[`Avatar shows title when there is no source 1`] = `
 <View
+  accessibilityState={
+    Object {
+      "disabled": true,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={false}
-  nativeID="animatedComponent"
   onClick={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}

package/src/components/Badge/__tests__/__snapshots__/Badge.spec.tsx.snap

@@ -3,7 +3,6 @@
 exports[`Badge has danger style when intent is danger 1`] = `
 <View
   collapsable={false}
-  nativeID="animatedComponent"
   style={
     Object {
       "alignItems": "center",
@@ -47,7 +46,6 @@ exports[`Badge has danger style when intent is danger 1`] = `
 exports[`Badge has info style when intent is info 1`] = `
 <View
   collapsable={false}
-  nativeID="animatedComponent"
   style={
     Object {
       "alignItems": "center",
@@ -91,7 +89,6 @@ exports[`Badge has info style when intent is info 1`] = `
 exports[`Badge has info style when intent is primary 1`] = `
 <View
   collapsable={false}
-  nativeID="animatedComponent"
   style={
     Object {
       "alignItems": "center",
@@ -135,7 +132,6 @@ exports[`Badge has info style when intent is primary 1`] = `
 exports[`Badge has success style when intent is success 1`] = `
 <View
   collapsable={false}
-  nativeID="animatedComponent"
   style={
     Object {
       "alignItems": "center",
@@ -179,7 +175,6 @@ exports[`Badge has success style when intent is success 1`] = `
 exports[`Badge has warning style when intent is warning 1`] = `
 <View
   collapsable={false}
-  nativeID="animatedComponent"
   style={
     Object {
       "alignItems": "center",
@@ -223,7 +218,6 @@ exports[`Badge has warning style when intent is warning 1`] = `
 exports[`Badge renders correctly with custom props 1`] = `
 <View
   collapsable={false}
-  nativeID="animatedComponent"
   style={
     Object {
       "alignItems": "center",

package/src/components/Badge/__tests__/__snapshots__/Status.spec.tsx.snap

@@ -19,7 +19,6 @@ exports[`Status Badge renders correctly 1`] = `
   />
   <View
     collapsable={false}
-    nativeID="animatedComponent"
     style={
       Object {
         "backgroundColor": "#de350b",
@@ -66,7 +65,6 @@ exports[`Status Badge renders correctly with intent 1`] = `
   </Text>
   <View
     collapsable={false}
-    nativeID="animatedComponent"
     style={
       Object {
         "backgroundColor": "#017d6d",