Start of EuiAvatarGroup

src-docs/src/views/avatar/avatar.js

@@ -4,6 +4,7 @@ import {
   EuiAvatar,
   EuiSpacer,
   EuiTitle,
+  EuiAvatarGroup,
 } from '../../../../src/components';
 
 export default () => (
@@ -28,5 +29,14 @@ export default () => (
      
     <EuiAvatar size="xl" name="Cat" imageUrl="https://source.unsplash.com/64x64/?cat" />
 
+
+    <EuiAvatarGroup
+      avatars={[
+        <EuiAvatar key="1" name="Rafael"/>,
+        <EuiAvatar key="2" name="Donatello" />,
+        <EuiAvatar key="3" name="Leornardo" color="#BD10E0" />,
+        <EuiAvatar key="4" name="Michaelangelo" />
+      ]}
+    />
   </div>
 );

src/components/avatar/__snapshots__/avatar_group.test.tsx.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiAvatarGroup is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiAvatarGroup testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    aria-label="Rafael"
+    class="euiAvatar euiAvatar--m euiAvatar--user"
+    style="background-image:none;background-color:#F98510;color:#000000"
+    title="Rafael"
+  >
+    <span
+      aria-hidden="true"
+    >
+      R
+    </span>
+  </div>
+  <div
+    aria-label="Donatello"
+    class="euiAvatar euiAvatar--m euiAvatar--user"
+    style="background-image:none;background-color:#920000;color:#FFFFFF"
+    title="Donatello"
+  >
+    <span
+      aria-hidden="true"
+    >
+      D
+    </span>
+  </div>
+  <div
+    aria-label="Leornardo"
+    class="euiAvatar euiAvatar--m euiAvatar--user"
+    style="background-image:none;background-color:#BD10E0;color:#FFFFFF"
+    title="Leornardo"
+  >
+    <span
+      aria-hidden="true"
+    >
+      L
+    </span>
+  </div>
+  <span
+    class="euiAvatarGroup__more"
+  >
+    +1
+  </span>
+</div>
+`;

src/components/avatar/_avatar_group.scss

@@ -0,0 +1,14 @@
+.euiAvatarGroup {
+  vertical-align: baseline;
+
+  > .euiAvatar:not(:first-of-type) {
+    margin-left: ($euiSizeXS * -1);
+    box-shadow: 0 0 0 1px $euiColorGhost;
+  }
+}
+
+.euiAvatarGroup__more {
+  @include euiFontSizeS;
+  font-weight: $euiFontWeightMedium;
+  margin-left: $euiSizeXS;
+}

src/components/avatar/_index.scss

@@ -1 +1,2 @@
 @import 'avatar';
+@import 'avatar_group';

src/components/avatar/avatar_group.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../test/required_props';
+
+import { EuiAvatar } from './avatar';
+import { EuiAvatarGroup } from './avatar_group';
+
+describe('EuiAvatarGroup', () => {
+  test('is rendered', () => {
+    const component = render(
+      <EuiAvatarGroup
+        avatars={[
+          <EuiAvatar key="1" name="Rafael" />,
+          <EuiAvatar key="2" name="Donatello" />,
+          <EuiAvatar key="3" name="Leornardo" color="#BD10E0" />,
+          <EuiAvatar key="4" name="Michaelangelo" />,
+        ]}
+        {...requiredProps}
+      />
+    );
+
+    expect(component).toMatchSnapshot();
+  });
+});

src/components/avatar/avatar_group.tsx

@@ -0,0 +1,43 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+import { CommonProps } from '../common';
+import classNames from 'classnames';
+// import { EuiAvatar } from './avatar';
+
+export type EuiAvatarGroupProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {
+    /**
+     * Array of avatars
+     */
+    avatars: ReactNode[];
+    /**
+     * How many avatars to show before displaying the more text
+     */
+    maxLength?: number;
+  };
+
+export const EuiAvatarGroup: React.FunctionComponent<EuiAvatarGroupProps> = ({
+  className,
+  avatars,
+  maxLength = 3,
+  ...rest
+}) => {
+  const classes = classNames('euiAvatarGroup', className);
+
+  const visibleChildren = avatars.slice(0, maxLength).map(avatar => avatar);
+
+  let moreNode;
+  if (avatars.length > maxLength) {
+    moreNode = (
+      <span className="euiAvatarGroup__more">
+        +{avatars.length - maxLength}
+      </span>
+    );
+  }
+
+  return (
+    <div className={classes} {...rest}>
+      {visibleChildren}
+      {moreNode}
+    </div>
+  );
+};

src/components/avatar/index.ts

@@ -1 +1,2 @@
 export { EuiAvatar } from './avatar';
+export { EuiAvatarGroup } from './avatar_group';

src/components/index.js

@@ -4,6 +4,7 @@ export {
 
 export {
   EuiAvatar,
+  EuiAvatarGroup,
 } from './avatar';
 
 export {