feat(AvatarStack): add total prop (#1869)

src/components/AvatarStack/AvatarStack.tsx

@@ -14,6 +14,7 @@ const b = block('avatar-stack');
 
 const AvatarStackComponent = ({
     max = 3,
+    total,
     overlapSize = 's',
     size,
     children,
@@ -22,6 +23,7 @@ const AvatarStackComponent = ({
 }: AvatarStackProps) => {
     const visibleItems: React.ReactElement[] = [];
     let moreItems = 0;
+    const normalizedMax = max < 1 ? 1 : max;
 
     React.Children.forEach(children, (child) => {
         if (!React.isValidElement(child)) {
@@ -30,13 +32,15 @@ const AvatarStackComponent = ({
 
         const item = <AvatarStackItem key={visibleItems.length}>{child}</AvatarStackItem>;
 
-        if (visibleItems.length <= max) {
+        if (visibleItems.length <= normalizedMax) {
             visibleItems.unshift(item);
         } else {
             moreItems += 1;
         }
     });
 
+    moreItems = Math.max(moreItems, total ? total - normalizedMax : 0);
+
     const hasMoreButton = moreItems > 0;
     /** Avatars + more button, or just avatars, when avatars count is equal to `max` or less */
     const normalOverflow = moreItems >= 1;
@@ -59,7 +63,7 @@ const AvatarStackComponent = ({
                     )}
                 </AvatarStackItem>
             ) : null}
-            {normalOverflow ? visibleItems.slice(0, max) : visibleItems}
+            {normalOverflow ? visibleItems.slice(0, normalizedMax) : visibleItems}
         </ul>
     );
 };

src/components/AvatarStack/README.md

@@ -27,6 +27,7 @@ Component is not limit you to what components to render, basic usage is:
 | Name        | Description                                                                                                                                                        |                        Type                        | Default |
 | :---------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------: | :-----: |
 | max         | How much avatars should be visible before more button. If avatars count is only 1 short from `max`, than more button would be replaced with avatar.                |                      `number`                      |    3    |
+| total       | Total amount of items, used to calculate number of not rendered avatars                                                                                            |                      `number`                      |         |
 | overlapSize | How much each item should overlap next one. `s` recommended for `Avatar`'s of sizes `xs`-`m`, `m` recomended for `l` size avatars and `l` overlap for `xl` avatars |                   `s`, `m`, `l`                    |   `s`   |
 | size        | Size for control displaying extra avatars. Value same to `Avatar` size.                                                                                            |                    `AvatarSize`                    |         |
 | className   | Class name of root DOM node                                                                                                                                        |                      `string`                      |         |

src/components/AvatarStack/__stories__/AvatarStack.stories.tsx

@@ -100,6 +100,14 @@ export const MoreButton: Story = {
     render: getTemplate({count: 6}),
 };
 
+export const Total: Story = {
+    render: getTemplate({count: 6}),
+    args: {
+        max: 3,
+        total: 12,
+    },
+};
+
 export const MoreButtonOmit: Story = {
     render: getTemplate({count: 4}),
     parameters: {

src/components/AvatarStack/__tests__/AvatarStack.visual.test.tsx

@@ -22,4 +22,10 @@ test.describe('AvatarStack', () => {
 
         await expectScreenshot();
     });
+
+    test('render story <Total>', async ({mount, expectScreenshot}) => {
+        await mount(<AvatarStackStories.Total randomAvatar={false} />);
+
+        await expectScreenshot();
+    });
 });

src/components/AvatarStack/types.ts

@@ -7,6 +7,8 @@ export type AvatarStackOverlapSize = 's' | 'm' | 'l';
 export interface AvatarStackProps {
     /** Amount of avatars to be shown before more button. Default 3. */
     max?: number;
+    /** Total amount of items, used to calculate number of not rendered avatars */
+    total?: number;
     /**
      * How much each avatar should overlap next one
      * | Avatar sizes | Recommended overlap |