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

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

@@ -1,6 +1,9 @@
 import React from 'react';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import Avatar from '../..';
+import Typography from '../../../Typography';
+import HeroDesignProvider from '../../../HeroDesignProvider';
+import { theme } from '../../../..';
 
 beforeEach(() => {
   jest.spyOn(Math, 'random').mockReturnValue(0.123);
@@ -11,9 +14,13 @@ afterEach(() => {
 });
 
 describe('AvatarStack', () => {
-  it('renders correctly by default', () => {
+  it.each`
+    variant
+    ${'horizontal'}
+    ${'vertical'}
+  `('renders correctly when variant is $variant', ({ variant }) => {
     const wrapper = renderWithTheme(
-      <Avatar.Stack testID="group-avatar">
+      <Avatar.Stack variant={variant} testID="group-avatar">
         <Avatar title="TT" />
         <Avatar title="SS" />
         <Avatar title="AA" />
@@ -27,10 +34,14 @@ describe('AvatarStack', () => {
     expect(wrapper.queryAllByText('AA')).toHaveLength(1);
     expect(wrapper.queryAllByText('OO')).toHaveLength(1);
     expect(wrapper.queryAllByText('NA')).toHaveLength(1);
-    expect(wrapper.getByTestId('group-avatar')).toHaveStyle({
-      width: 121.6,
-      height: 32,
-    });
+    expect(wrapper.getByTestId('group-avatar')).toHaveStyle(
+      variant === 'horizontal'
+        ? {
+            width: 121.6,
+            height: 32,
+          }
+        : { width: 32, height: 121.6 }
+    );
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
@@ -59,4 +70,127 @@ describe('AvatarStack', () => {
 
     expect(wrapper.toJSON()).toMatchSnapshot();
   });
+
+  it('does not render surplus when max is equal or larger than the number of avatars', () => {
+    const { toJSON, getByText, queryByTestId, rerender } = renderWithTheme(
+      <Avatar.Stack
+        max={4}
+        renderSurplus={(surplus) => (
+          <Typography.Body>Custom surplus {surplus}</Typography.Body>
+        )}
+      >
+        <Avatar title="TT" />
+        <Avatar title="SS" />
+        <Avatar title="AA" />
+        <Avatar title="OO" />
+      </Avatar.Stack>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('TT')).toBeDefined();
+    expect(getByText('OO')).toBeDefined();
+    expect(queryByTestId('surplus-container')).toBeNull();
+
+    rerender(
+      <HeroDesignProvider theme={theme}>
+        <Avatar.Stack
+          max={10}
+          renderSurplus={(surplus) => (
+            <Typography.Body>Custom surplus {surplus}</Typography.Body>
+          )}
+        >
+          <Avatar title="TT" />
+          <Avatar title="SS" />
+          <Avatar title="AA" />
+          <Avatar title="OO" />
+        </Avatar.Stack>
+      </HeroDesignProvider>
+    );
+
+    expect(queryByTestId('surplus-container')).toBeNull();
+  });
+
+  it('does not render surplus when total is equal to the number of avatars', () => {
+    const { toJSON, getByText, queryByTestId, rerender } = renderWithTheme(
+      <Avatar.Stack
+        total={4}
+        renderSurplus={(surplus) => (
+          <Typography.Body>Custom surplus {surplus}</Typography.Body>
+        )}
+      >
+        <Avatar title="TT" />
+        <Avatar title="SS" />
+        <Avatar title="AA" />
+        <Avatar title="OO" />
+      </Avatar.Stack>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('TT')).toBeDefined();
+    expect(getByText('OO')).toBeDefined();
+    expect(queryByTestId('surplus-container')).toBeNull();
+
+    rerender(
+      <HeroDesignProvider theme={theme}>
+        <Avatar.Stack
+          total={10}
+          renderSurplus={(surplus) => (
+            <Typography.Body>Custom surplus {surplus}</Typography.Body>
+          )}
+        >
+          <Avatar title="TT" />
+          <Avatar title="SS" />
+          <Avatar title="AA" />
+          <Avatar title="OO" />
+        </Avatar.Stack>
+      </HeroDesignProvider>
+    );
+
+    expect(getByText('Custom surplus 6')).toBeDefined();
+  });
+
+  it('render correctly surplus when both max and total are set', () => {
+    const { toJSON, getByText, queryByText } = renderWithTheme(
+      <Avatar.Stack
+        total={25}
+        max={2}
+        renderSurplus={(surplus) => (
+          <Typography.Body>Custom surplus {surplus}</Typography.Body>
+        )}
+      >
+        <Avatar title="TT" />
+        <Avatar title="SS" />
+        <Avatar title="AA" />
+        <Avatar title="OO" />
+        <Avatar title="NA" />
+      </Avatar.Stack>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('TT')).toBeDefined();
+    expect(queryByText('AA')).toBeNull();
+    expect(getByText('Custom surplus 23')).toBeDefined();
+  });
+
+  it('allow rendering custom surplus', () => {
+    const { toJSON, getByText } = renderWithTheme(
+      <Avatar.Stack
+        total={25}
+        renderSurplus={(surplus) => (
+          <Typography.Body>Custom surplus {surplus}</Typography.Body>
+        )}
+      >
+        <Avatar title="TT" />
+        <Avatar title="SS" />
+        <Avatar title="AA" />
+        <Avatar title="OO" />
+        <Avatar title="NA" />
+      </Avatar.Stack>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    expect(getByText('TT')).toBeDefined();
+    expect(getByText('NA')).toBeDefined();
+    expect(getByText('Custom surplus 20')).toBeDefined();
+  });
 });

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

@@ -1,7 +1,11 @@
-import React, { ReactElement } from 'react';
+import React, { ReactElement, ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
-import Avatar, { AvatarProps } from '../Avatar';
-import { StyledAvatar, StyledWrapper } from './StyledAvatarStack';
+import { AvatarProps } from '../Avatar';
+import {
+  StyledAvatar,
+  StyledSurplusContainer,
+  StyledWrapper,
+} from './StyledAvatarStack';
 import { useAvatarColors } from './utils';
 
 export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
@@ -13,6 +17,14 @@ export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
    * Max avatars to show.
    */
   max?: number;
+  /**
+   * The total number of avatars. Used for calculating the number of extra avatars.
+   */
+  total?: number;
+  /**
+   * Custom renderer of extraAvatars.
+   */
+  renderSurplus?: (value: number) => ReactNode;
   /**
    * Additional style.
    */
@@ -21,39 +33,112 @@ export interface AvatarStackProps extends Pick<AvatarProps, 'size'> {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Variant of the avatar stack.
+   */
+  variant?: 'horizontal' | 'vertical';
 }
 
+type SurplusProps = {
+  value: number;
+  renderSurplus?: AvatarStackProps['renderSurplus'];
+  size?: AvatarStackProps['size'];
+  variant?: AvatarStackProps['variant'];
+  index: number;
+  backgroundColor: string;
+};
+
+const Surplus = ({
+  value,
+  renderSurplus,
+  size,
+  variant = 'horizontal',
+  index,
+  backgroundColor,
+}: SurplusProps) => {
+  if (value > 0) {
+    if (renderSurplus) {
+      return (
+        <StyledSurplusContainer
+          testID="surplus-container"
+          themeSize={size}
+          themeVariant={variant}
+          themeIndex={index}
+          style={{ backgroundColor }}
+        >
+          {renderSurplus(value)}
+        </StyledSurplusContainer>
+      );
+    }
+
+    return (
+      <StyledAvatar
+        testID="surplus-container"
+        themeVariant={variant}
+        title={`+${value}`}
+        size={size}
+        themeIndex={index}
+        style={{ backgroundColor }}
+      />
+    );
+  }
+
+  return null;
+};
+
 const AvatarStack = ({
   children,
   max,
   size = 'small',
   style,
   testID,
+  variant = 'horizontal',
+  total,
+  renderSurplus,
 }: AvatarStackProps) => {
   const colors = useAvatarColors();
   const avatars = children.slice(0, max);
-  if (max !== undefined && children.length - max > 0) {
-    const remainingAvatar = (
-      <Avatar title={`+${children.length - max}`} size={size} />
-    );
-    avatars.push(remainingAvatar);
-  }
+
+  const remainingAvatar = (() => {
+    let remain = 0;
+
+    // Remaining value will prioritize total prop if it exists
+    if (total && total > children.length) {
+      remain = total - avatars.length;
+    } else if (max && children.length > max) {
+      remain = children.length - max;
+    }
+
+    return remain;
+  })();
 
   return (
     <StyledWrapper
       themeSize={size}
       themeAvatarCount={avatars.length}
+      themeHasSurplus={remainingAvatar > 0}
       style={style}
       testID={testID}
+      themeVariant={variant}
     >
       {avatars.map((avt, index) => (
         <StyledAvatar
+          themeVariant={variant}
           {...avt.props}
           size={size}
           themeIndex={index}
           style={{ backgroundColor: colors[index % colors.length] }}
         />
       ))}
+
+      <Surplus
+        value={remainingAvatar}
+        index={avatars.length}
+        size={size}
+        variant={variant}
+        renderSurplus={renderSurplus}
+        backgroundColor={colors[avatars.length % colors.length]}
+      />
     </StyledWrapper>
   );
 };

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

@@ -1,82 +1,183 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`StyledImage renders correct style 1`] = `
-<Image
-  source={
-    Object {
-      "uri": "https://i.pravatar.cc/300",
-    }
-  }
+<View
   style={
-    Array [
-      Object {
-        "height": 32,
-        "width": 32,
-      },
-      undefined,
-    ]
+    {
+      "flex": 1,
+    }
   }
-  themeSize="small"
-/>
+>
+  <Image
+    source={
+      {
+        "uri": "https://i.pravatar.cc/300",
+      }
+    }
+    style={
+      [
+        {
+          "height": 32,
+          "width": 32,
+        },
+        undefined,
+      ]
+    }
+    themeSize="small"
+  />
+  <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[`StyledPressable renders correct style 1`] = `
 <View
-  accessible={true}
-  collapsable={false}
-  focusable={false}
-  onClick={[Function]}
-  onResponderGrant={[Function]}
-  onResponderMove={[Function]}
-  onResponderRelease={[Function]}
-  onResponderTerminate={[Function]}
-  onResponderTerminationRequest={[Function]}
-  onStartShouldSetResponder={[Function]}
   style={
-    Object {
-      "backgroundColor": "#401960",
-      "borderRadius": 999,
-      "height": 32,
-      "opacity": 1,
-      "overflow": "hidden",
-      "width": 32,
+    {
+      "flex": 1,
     }
   }
-/>
+>
+  <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
+    accessible={true}
+    collapsable={false}
+    focusable={false}
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      {
+        "backgroundColor": "#401960",
+        "borderRadius": 999,
+        "height": 32,
+        "opacity": 1,
+        "overflow": "hidden",
+        "width": 32,
+      }
+    }
+  />
+  <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[`StyledText renders correct style 1`] = `
-<Text
-  allowFontScaling={false}
+<View
   style={
-    Array [
-      Object {
-        "color": "#001f23",
-        "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 14,
-        "letterSpacing": 0.42,
-        "lineHeight": 22,
-      },
-      Array [
-        Object {
-          "color": "#ffffff",
+    {
+      "flex": 1,
+    }
+  }
+>
+  <Text
+    allowFontScaling={false}
+    style={
+      [
+        {
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
-          "fontSize": 16,
-          "lineHeight": 0,
-          "overflow": "hidden",
-          "textAlign": "center",
-          "textAlignVertical": "center",
+          "fontSize": 14,
+          "letterSpacing": 0.42,
+          "lineHeight": 22,
+        },
+        [
+          {
+            "color": "#ffffff",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 16,
+            "lineHeight": 0,
+            "overflow": "hidden",
+            "textAlign": "center",
+            "textAlignVertical": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+    themeFontSize="medium"
+    themeFontWeight="regular"
+    themeIntent="body"
+    themeSize="small"
+    themeTypeface="neutral"
+  >
+    MD
+  </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,
-      ],
-    ]
-  }
-  themeFontSize="medium"
-  themeFontWeight="regular"
-  themeIntent="body"
-  themeSize="small"
-  themeTypeface="neutral"
->
-  MD
-</Text>
+      ]
+    }
+  />
+</View>
 `;