@hero-design/rn 9.0.0-0 → 9.0.0-alpha.0

package/src/components/AnimatedScroller/index.tsx

@@ -0,0 +1,5 @@
+import ScrollViewWithFAB from './ScrollViewWithFAB';
+import FlatListWithFAB from './FlatListWithFAB';
+import SectionListWithFAB from './SectionListWithFAB';
+
+export { ScrollViewWithFAB, FlatListWithFAB, SectionListWithFAB };

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

@@ -3,156 +3,217 @@
 exports[`Attachment renders correctly 1`] = `
 <View
   style={
-    Array [
-      Object {
-        "alignItems": "center",
-        "flexDirection": "row",
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
 >
   <View
     style={
-      Array [
-        Object {
+      [
+        {
           "alignItems": "center",
-          "backgroundColor": undefined,
-          "borderRadius": undefined,
-          "flex": 1,
           "flexDirection": "row",
-          "padding": 16,
         },
         undefined,
       ]
     }
-    themeHighlighted={false}
   >
-    <Image
-      source={
-        Object {
-          "uri": "https://i.pinimg.com/originals/e6/92/fe/e692fe2bef601bf4760425bd62118117.jpg",
-        }
-      }
-      style={
-        Array [
-          Object {
-            "borderRadius": 0,
-            "height": 72,
-            "width": 72,
-          },
-          undefined,
-        ]
-      }
-      testID="attachment-image"
-    />
     <View
       style={
-        Array [
-          Object {
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": undefined,
+            "borderRadius": undefined,
             "flex": 1,
             "flexDirection": "row",
-            "flexWrap": "wrap",
-            "paddingHorizontal": 8,
+            "padding": 16,
           },
           undefined,
         ]
       }
-      testID="attachment-content"
+      themeHighlighted={false}
     >
-      <Text
-        allowFontScaling={false}
-        numberOfLines={1}
+      <Image
+        source={
+          {
+            "uri": "https://i.pinimg.com/originals/e6/92/fe/e692fe2bef601bf4760425bd62118117.jpg",
+          }
+        }
         style={
-          Array [
-            Object {
-              "color": "#001f23",
-              "fontFamily": "BeVietnamPro-Regular",
-              "fontSize": 14,
-              "letterSpacing": 0.42,
-              "lineHeight": 22,
+          [
+            {
+              "borderRadius": 0,
+              "height": 72,
+              "width": 72,
+            },
+            undefined,
+          ]
+        }
+        testID="attachment-image"
+      />
+      <View
+        style={
+          [
+            {
+              "flex": 1,
+              "flexDirection": "row",
+              "flexWrap": "wrap",
+              "paddingHorizontal": 8,
             },
             undefined,
           ]
         }
-        themeFontSize="medium"
-        themeFontWeight="regular"
-        themeIntent="body"
-        themeTypeface="neutral"
+        testID="attachment-content"
       >
-        Screenshot.png
-      </Text>
+        <Text
+          allowFontScaling={false}
+          numberOfLines={1}
+          style={
+            [
+              {
+                "color": "#001f23",
+                "fontFamily": "BeVietnamPro-Regular",
+                "fontSize": 14,
+                "letterSpacing": 0.48,
+                "lineHeight": 22,
+              },
+              undefined,
+            ]
+          }
+          themeIntent="body"
+          themeTypeface="neutral"
+          themeVariant="small"
+        >
+          Screenshot.png
+        </Text>
+      </View>
     </View>
-  </View>
-  <View
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      Object {
-        "justifyContent": "center",
-        "opacity": 1,
-        "padding": 16,
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
       }
-    }
-    testID="attachment-download-icon"
-  >
-    <HeroIcon
-      name="download-outlined"
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        Array [
-          Object {
-            "color": "#001f23",
-            "fontSize": 20,
-          },
-          undefined,
-        ]
+        {
+          "justifyContent": "center",
+          "opacity": 1,
+          "padding": 16,
+        }
       }
-      themeIntent="text"
-      themeSize="small"
-    />
-  </View>
-  <View
-    accessible={true}
-    collapsable={false}
-    focusable={true}
-    onClick={[Function]}
-    onResponderGrant={[Function]}
-    onResponderMove={[Function]}
-    onResponderRelease={[Function]}
-    onResponderTerminate={[Function]}
-    onResponderTerminationRequest={[Function]}
-    onStartShouldSetResponder={[Function]}
-    style={
-      Object {
-        "justifyContent": "center",
-        "opacity": 1,
-        "padding": 16,
+      testID="attachment-download-icon"
+    >
+      <HeroIcon
+        name="download-outlined"
+        style={
+          [
+            {
+              "color": "#001f23",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="text"
+        themeSize="small"
+      />
+    </View>
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
       }
-    }
-    testID="attachment-remove-icon"
-  >
-    <HeroIcon
-      name="trash-bin-outlined"
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
       style={
-        Array [
-          Object {
-            "color": "#de350b",
-            "fontSize": 20,
-          },
-          undefined,
-        ]
+        {
+          "justifyContent": "center",
+          "opacity": 1,
+          "padding": 16,
+        }
       }
-      themeIntent="danger"
-      themeSize="small"
-    />
+      testID="attachment-remove-icon"
+    >
+      <HeroIcon
+        name="trash-bin-outlined"
+        style={
+          [
+            {
+              "color": "#cb300a",
+              "fontSize": 20,
+            },
+            undefined,
+          ]
+        }
+        themeIntent="danger"
+        themeSize="small"
+      />
+    </View>
   </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>
 `;

package/src/components/Attachment/index.tsx

@@ -57,7 +57,9 @@ const Attachment = ({
       {previewElement}
       {filename ? (
         <StyledTextContainer testID="attachment-content">
-          <Typography.Text numberOfLines={1}>{filename}</Typography.Text>
+          <Typography.Body variant="small" numberOfLines={1}>
+            {filename}
+          </Typography.Body>
         </StyledTextContainer>
       ) : null}
     </StyledContentContainer>

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

@@ -1,29 +1,83 @@
 import styled from '@emotion/native';
 import { View } from 'react-native';
 import Avatar, { AvatarProps } from '../Avatar';
+import Box from '../../Box';
 
 const VISIBLE_RATIO = 0.7;
 
+type ThemeVariant = 'horizontal' | 'vertical';
+
 export const StyledWrapper = styled(View)<{
   themeSize: Required<AvatarProps>['size'];
   themeAvatarCount: number;
-}>(({ theme, themeSize, themeAvatarCount }) => {
-  const avatarSize = theme.__hd__.avatar.sizes[themeSize];
+  themeVariant: ThemeVariant;
+  themeHasSurplus: boolean;
+}>(
+  ({
+    theme,
+    themeSize,
+    themeAvatarCount,
+    themeVariant = 'horizontal',
+    themeHasSurplus = false,
+  }) => {
+    const avatarSize = theme.__hd__.avatar.sizes[themeSize];
+
+    const widthAndHeightByVariant = {
+      horizontal: {
+        width:
+          avatarSize *
+          (1 +
+            VISIBLE_RATIO *
+              (themeHasSurplus ? themeAvatarCount : themeAvatarCount - 1)),
+        height: avatarSize,
+      },
+      vertical: {
+        width: avatarSize,
+        height:
+          avatarSize *
+          (1 +
+            VISIBLE_RATIO *
+              (themeHasSurplus ? themeAvatarCount : themeAvatarCount - 1)),
+      },
+    };
+
+    return {
+      flexDirection: themeVariant === 'horizontal' ? 'row' : 'column',
+      height: widthAndHeightByVariant[themeVariant].height,
+      width: widthAndHeightByVariant[themeVariant].width,
+    };
+  }
+);
+
+export const StyledAvatar = styled(Avatar)<{
+  themeIndex: number;
+  themeVariant: ThemeVariant;
+}>(({ theme, themeIndex, size = 'small', themeVariant = 'horizontal' }) => {
+  const avatarSize = theme.__hd__.avatar.sizes[size];
+  const offset = avatarSize * VISIBLE_RATIO * themeIndex;
 
   return {
-    flexDirection: 'row',
-    height: avatarSize,
-    width: avatarSize * (1 + VISIBLE_RATIO * (themeAvatarCount - 1)),
+    position: 'absolute',
+    left: themeVariant === 'horizontal' ? offset : undefined,
+    top: themeVariant === 'vertical' ? offset : undefined,
   };
 });
 
-export const StyledAvatar = styled(Avatar)<{
+export const StyledSurplusContainer = styled(Box)<{
   themeIndex: number;
-}>(({ theme, themeIndex, size = 'small' }) => {
-  const avatarSize = theme.__hd__.avatar.sizes[size];
+  themeSize: AvatarProps['size'];
+  themeVariant: ThemeVariant;
+}>(({ theme, themeIndex, themeVariant, themeSize = 'small' }) => {
+  const avatarSize = theme.__hd__.avatar.sizes[themeSize];
+  const offset = avatarSize * VISIBLE_RATIO * themeIndex;
 
   return {
     position: 'absolute',
-    left: avatarSize * VISIBLE_RATIO * themeIndex,
+    left: themeVariant === 'horizontal' ? offset : undefined,
+    top: themeVariant === 'vertical' ? offset : undefined,
+    borderRadius: theme.__hd__.avatar.radii.rounded,
+    width: theme.__hd__.avatar.sizes[themeSize],
+    height: theme.__hd__.avatar.sizes[themeSize],
+    overflow: 'hidden',
   };
 });

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

@@ -11,26 +11,88 @@ afterEach(() => {
 });
 
 describe('StyledWrapper', () => {
-  it('renders correctly', () => {
+  it.each`
+    themeVariant
+    ${'horizontal'}
+    ${'vertical'}
+  `('renders correctly with $variant', ({ themeVariant }) => {
     const wrapper = renderWithTheme(
-      <StyledWrapper themeSize="large" themeAvatarCount={4} testID="wrapper" />
+      <StyledWrapper
+        themeHasSurplus={false}
+        themeVariant={themeVariant}
+        themeSize="large"
+        themeAvatarCount={4}
+        testID="wrapper"
+      />
+    );
+
+    expect(wrapper.getByTestId('wrapper')).toHaveStyle(
+      themeVariant === 'horizontal'
+        ? {
+            height: 48,
+            width: 48 * (1 + 0.7 * 3),
+          }
+        : {
+            height: 48 * (1 + 0.7 * 3),
+            width: 48,
+          }
     );
 
-    expect(wrapper.getByTestId('wrapper')).toHaveStyle({
-      height: 48,
-      width: 48 * (1 + 0.7 * 3),
-    });
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it.each`
+    themeHasSurplus
+    ${true}
+    ${false}
+  `(
+    'render with correct width and height when themeHasSurplus is $themeHasSurplus',
+    ({ themeHasSurplus }) => {
+      const { toJSON, getByTestId } = renderWithTheme(
+        <StyledWrapper
+          themeHasSurplus={themeHasSurplus}
+          themeVariant="horizontal"
+          themeSize="large"
+          themeAvatarCount={4}
+          testID="wrapper"
+        />
+      );
+
+      expect(getByTestId('wrapper')).toHaveStyle(
+        themeHasSurplus
+          ? {
+              height: 48,
+              width: 48 * (1 + 0.7 * 4),
+            }
+          : {
+              height: 48,
+              width: 48 * (1 + 0.7 * 3),
+            }
+      );
+      expect(toJSON()).toMatchSnapshot();
+    }
+  );
 });
 
 describe('StyledAvatar', () => {
-  it('renders correctly', () => {
+  it.each`
+    themeVariant
+    ${'horizontal'}
+    ${'vertical'}
+  `('renders correctly with $variant', ({ themeVariant }) => {
     const wrapper = renderWithTheme(
-      <StyledAvatar themeIndex={2} size="medium" title="AA" testID="avatar" />
+      <StyledAvatar
+        themeVariant={themeVariant}
+        themeIndex={2}
+        size="medium"
+        title="AA"
+        testID="avatar"
+      />
     );
 
-    expect(wrapper.getByTestId('avatar')).toHaveStyle({ left: 56 });
+    expect(wrapper.getByTestId('avatar')).toHaveStyle(
+      themeVariant === 'horizontal' ? { left: 56 } : { top: 56 }
+    );
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });