@hero-design/rn 7.25.1 → 7.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.25.1",
+  "version": "7.27.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.25.1",
+    "@hero-design/colors": "7.27.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.12"
@@ -58,7 +58,7 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "7.25.1",
+    "eslint-config-hd": "7.27.0",
     "jest": "^27.3.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
@@ -72,7 +72,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
     "ts-jest": "^27.0.7",
-    "prettier-config-hd": "7.25.1",
+    "prettier-config-hd": "7.27.0",
     "rn-7-23-0": "npm:@hero-design/rn@7.23.0"
   },
   "prettier": "prettier-config-hd"

package/src/components/Accordion/__tests__/__snapshots__/AccordionItem.spec.tsx.snap

@@ -50,6 +50,7 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
       themeFontSize="medium"
       themeFontWeight="regular"
       themeIntent="body"
+      themeTypeface="neutral"
     >
       Accordion header
     </Text>
@@ -123,6 +124,7 @@ exports[`AccordionItem renders correctly when header is an element 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeTypeface="neutral"
         >
           Accordion content
         </Text>
@@ -182,6 +184,7 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
       themeFontSize="large"
       themeFontWeight="semi-bold"
       themeIntent="body"
+      themeTypeface="neutral"
     >
       Accordion header
     </Text>
@@ -255,6 +258,7 @@ exports[`AccordionItem renders correctly when header is string 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeTypeface="neutral"
         >
           Accordion content
         </Text>
@@ -314,6 +318,7 @@ exports[`AccordionItem renders correctly when open 1`] = `
       themeFontSize="large"
       themeFontWeight="semi-bold"
       themeIntent="body"
+      themeTypeface="neutral"
     >
       Accordion header
     </Text>
@@ -387,6 +392,7 @@ exports[`AccordionItem renders correctly when open 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeTypeface="neutral"
         >
           Accordion content
         </Text>
@@ -446,6 +452,7 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
       themeFontSize="large"
       themeFontWeight="semi-bold"
       themeIntent="body"
+      themeTypeface="neutral"
     >
       Accordion header
     </Text>
@@ -519,6 +526,7 @@ exports[`AccordionItem renders correctly when variant is card 1`] = `
           themeFontSize="medium"
           themeFontWeight="regular"
           themeIntent="body"
+          themeTypeface="neutral"
         >
           Accordion content
         </Text>

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

@@ -58,6 +58,7 @@ exports[`Accordion allows fully controlled 1`] = `
         themeFontSize="large"
         themeFontWeight="semi-bold"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Accordion header 1
       </Text>
@@ -131,6 +132,7 @@ exports[`Accordion allows fully controlled 1`] = `
             themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             Accordion content 1
           </Text>
@@ -187,6 +189,7 @@ exports[`Accordion allows fully controlled 1`] = `
         themeFontSize="large"
         themeFontWeight="semi-bold"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Accordion header 2
       </Text>
@@ -260,6 +263,7 @@ exports[`Accordion allows fully controlled 1`] = `
             themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             Accordion content 2
           </Text>
@@ -328,6 +332,7 @@ exports[`Accordion renders correctly 1`] = `
         themeFontSize="large"
         themeFontWeight="semi-bold"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Accordion header 1
       </Text>
@@ -401,6 +406,7 @@ exports[`Accordion renders correctly 1`] = `
             themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             Accordion content 1
           </Text>
@@ -457,6 +463,7 @@ exports[`Accordion renders correctly 1`] = `
         themeFontSize="large"
         themeFontWeight="semi-bold"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Accordion header 2
       </Text>
@@ -530,6 +537,7 @@ exports[`Accordion renders correctly 1`] = `
             themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             Accordion content 2
           </Text>
@@ -598,6 +606,7 @@ exports[`Accordion renders correctly when variant is card 1`] = `
         themeFontSize="large"
         themeFontWeight="semi-bold"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Accordion header 1
       </Text>
@@ -671,6 +680,7 @@ exports[`Accordion renders correctly when variant is card 1`] = `
             themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             Accordion content 1
           </Text>
@@ -738,6 +748,7 @@ exports[`Accordion renders correctly when variant is card 1`] = `
         themeFontSize="large"
         themeFontWeight="semi-bold"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Accordion header 2
       </Text>
@@ -811,6 +822,7 @@ exports[`Accordion renders correctly when variant is card 1`] = `
             themeFontSize="medium"
             themeFontWeight="regular"
             themeIntent="body"
+            themeTypeface="neutral"
           >
             Accordion content 2
           </Text>

package/src/components/Accordion/index.tsx

@@ -3,7 +3,7 @@ import type { Key, ReactElement } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import AccordionItem from './AccordionItem';
 import { Spacer, StyledWrapper } from './StyledAccordion';
-import { usePropsOrInternalState } from './utils';
+import { usePropsOrInternalState } from '../../utils/hooks';
 
 export interface AccordionProps<K extends Key> {
   /**

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

@@ -85,6 +85,7 @@ exports[`Alert Icon render custom icon correctly 1`] = `
         themeFontSize="medium"
         themeFontWeight="regular"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Content
       </Text>
@@ -178,6 +179,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
         themeFontSize="medium"
         themeFontWeight="semi-bold"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Title
       </Text>
@@ -197,6 +199,7 @@ exports[`Alert renders correctly when intent is error 1`] = `
         themeFontSize="medium"
         themeFontWeight="regular"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Content
       </Text>
@@ -326,6 +329,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
         themeFontSize="medium"
         themeFontWeight="semi-bold"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Title
       </Text>
@@ -345,6 +349,7 @@ exports[`Alert renders correctly when intent is info 1`] = `
         themeFontSize="medium"
         themeFontWeight="regular"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Content
       </Text>
@@ -447,6 +452,7 @@ exports[`Alert renders correctly when intent is notification 1`] = `
         themeFontSize="medium"
         themeFontWeight="semi-bold"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Title
       </Text>
@@ -466,6 +472,7 @@ exports[`Alert renders correctly when intent is notification 1`] = `
         themeFontSize="medium"
         themeFontWeight="regular"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Content
       </Text>
@@ -595,6 +602,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
         themeFontSize="medium"
         themeFontWeight="semi-bold"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Title
       </Text>
@@ -614,6 +622,7 @@ exports[`Alert renders correctly when intent is success 1`] = `
         themeFontSize="medium"
         themeFontWeight="regular"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Content
       </Text>
@@ -743,6 +752,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
         themeFontSize="medium"
         themeFontWeight="semi-bold"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Title
       </Text>
@@ -762,6 +772,7 @@ exports[`Alert renders correctly when intent is warning 1`] = `
         themeFontSize="medium"
         themeFontWeight="regular"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Content
       </Text>

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

@@ -77,6 +77,7 @@ exports[`Attachment renders correctly 1`] = `
         themeFontSize="medium"
         themeFontWeight="regular"
         themeIntent="body"
+        themeTypeface="neutral"
       >
         Screenshot.png
       </Text>

package/src/components/Avatar/{index.tsx → Avatar.tsx}

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type {
   ImageSourcePropType,
   StyleProp,
@@ -7,24 +7,31 @@ import type {
 } from 'react-native';
 import {
   StyledImage,
-  StyledPressable,
+  StyledWrapper,
   StyledText,
   StyledTextWrapper,
-  StyledView,
 } from './StyledAvatar';
 
-interface AvatarProps extends ViewProps {
-  /** Callback function when pressing component. */
+export interface AvatarProps extends ViewProps {
+  /**
+   * Callback function when pressing component.
+   */
   onPress?: () => void;
-  /** Image source to be displayed on avatar. */
+  /**
+   * Image source to be displayed on avatar.
+   */
   source?: ImageSourcePropType;
-  /** Renders title in the placeholder. */
+  /**
+   * Renders title in the placeholder.
+   */
   title?: string;
   /**
    * Intent of the Icon.
    */
   intent?: 'primary' | 'info' | 'danger' | 'success' | 'warning';
-  /** Size of the avatar. */
+  /**
+   * Size of the avatar.
+   */
   size?:
     | 'small'
     | 'medium'
@@ -53,27 +60,35 @@ const Avatar = ({
   size = 'small',
   intent = 'primary',
 }: AvatarProps) => {
-  const Wrapper = onPress ? StyledPressable : StyledView;
-  return title !== undefined || source !== undefined ? (
-    <Wrapper
+  const [hasImageError, setHasImageError] = useState(false);
+
+  if (title === undefined && source === undefined) return null;
+  return (
+    <StyledWrapper
       testID={testID}
       onPress={onPress}
+      disabled={onPress === undefined}
       themeIntent={intent}
       themeSize={size}
       style={style}
     >
-      {title !== undefined && source === undefined && (
+      {(source === undefined || hasImageError) && (
         <StyledTextWrapper>
-          <StyledText themeIntent={intent} themeSize={size}>
-            {title}
-          </StyledText>
+          <StyledText themeSize={size}>{title}</StyledText>
         </StyledTextWrapper>
       )}
       {source !== undefined && (
-        <StyledImage resizeMode="cover" source={source} themeSize={size} />
+        <StyledImage
+          resizeMode="cover"
+          source={source}
+          themeSize={size}
+          onLoad={() => setHasImageError(false)}
+          onError={() => setHasImageError(true)}
+          testID="avatar-image"
+        />
       )}
-    </Wrapper>
-  ) : null;
+    </StyledWrapper>
+  );
 };
 
 export default Avatar;

package/src/components/Avatar/AvatarStack/StyledAvatarStack.tsx

@@ -0,0 +1,29 @@
+import styled from '@emotion/native';
+import { View } from 'react-native';
+import Avatar, { AvatarProps } from '../Avatar';
+
+const VISIBLE_RATIO = 0.7;
+
+export const StyledWrapper = styled(View)<{
+  themeSize: Required<AvatarProps>['size'];
+  themeAvatarCount: number;
+}>(({ theme, themeSize, themeAvatarCount }) => {
+  const avatarSize = theme.__hd__.avatar.sizes[themeSize];
+
+  return {
+    flexDirection: 'row',
+    height: avatarSize,
+    width: avatarSize * (1 + VISIBLE_RATIO * (themeAvatarCount - 1)),
+  };
+});
+
+export const StyledAvatar = styled(Avatar)<{
+  themeIndex: number;
+}>(({ theme, themeIndex, size = 'small' }) => {
+  const avatarSize = theme.__hd__.avatar.sizes[size];
+
+  return {
+    position: 'absolute',
+    left: avatarSize * VISIBLE_RATIO * themeIndex,
+  };
+});

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import { StyledWrapper, StyledAvatar } from '../StyledAvatarStack';
+import theme from '../../../../theme';
+
+beforeAll(() => {
+  theme.__hd__.avatar.colors.visualisation = [theme.colors.primary];
+});
+
+describe('StyledWrapper', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <StyledWrapper themeSize="large" themeAvatarCount={4} testID="wrapper" />
+    );
+
+    expect(wrapper.getByTestId('wrapper')).toHaveStyle({
+      height: 48,
+      width: 48 * (1 + 0.7 * 3),
+    });
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('StyledAvatar', () => {
+  it('renders correctly', () => {
+    const wrapper = renderWithTheme(
+      <StyledAvatar themeIndex={2} size="medium" title="AA" testID="avatar" />
+    );
+
+    expect(wrapper.getByTestId('avatar')).toHaveStyle({ left: 56 });
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StyledAvatar renders correctly 1`] = `
+<View
+  accessible={true}
+  collapsable={false}
+  focusable={false}
+  nativeID="animatedComponent"
+  onClick={[Function]}
+  onResponderGrant={[Function]}
+  onResponderMove={[Function]}
+  onResponderRelease={[Function]}
+  onResponderTerminate={[Function]}
+  onResponderTerminationRequest={[Function]}
+  onStartShouldSetResponder={[Function]}
+  style={
+    Object {
+      "backgroundColor": "#401960",
+      "borderRadius": 999,
+      "height": 40,
+      "left": 56,
+      "opacity": 1,
+      "overflow": "hidden",
+      "position": "absolute",
+      "width": 40,
+    }
+  }
+  testID="avatar"
+>
+  <View
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "display": "flex",
+          "height": "100%",
+          "justifyContent": "center",
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 18,
+            "overflow": "hidden",
+          },
+          undefined,
+        ]
+      }
+      themeSize="medium"
+    >
+      AA
+    </Text>
+  </View>
+</View>
+`;
+
+exports[`StyledWrapper renders correctly 1`] = `
+<View
+  style={
+    Array [
+      Object {
+        "flexDirection": "row",
+        "height": 48,
+        "width": 148.79999999999998,
+      },
+      undefined,
+    ]
+  }
+  testID="wrapper"
+  themeAvatarCount={4}
+  themeSize="large"
+/>
+`;