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 {