ActivityItem: add pulsing beacon animation

common/changes/@uifabric/styling/activity-item-animation_2018-04-13-22-07.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "PulsingBeaconAnimationStyles: Distinguish between single and double pulse.",
+      "packageName": "@uifabric/styling",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/styling",
+  "email": "lynam.emily@gmail.com"
+}

common/changes/office-ui-fabric-react/activity-item-animation_2018-04-05-17-04.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "ActivityItem: Added the pulsing beacon animation for the compact size.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "lynam.emily@gmail.com"
+}

packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.classNames.ts

@@ -16,6 +16,7 @@ export interface IActivityItemClassNames {
   activityTypeIcon?: string;
   commentText?: string;
   timeStamp?: string;
+  pulsingBeacon?: string;
 }
 
 export const getClassNames = memoizeFunction((
@@ -32,6 +33,11 @@ export const getClassNames = memoizeFunction((
       isCompact && styles.isCompactRoot
     ),
 
+    pulsingBeacon: mergeStyles(
+      'ms-ActivityItem-pulsingBeacon',
+      styles.pulsingBeacon
+    ),
+
     personaContainer: mergeStyles(
       'ms-ActivityItem-personaContainer',
       styles.personaContainer,

packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts

@@ -2,22 +2,66 @@ import {
   concatStyleSets,
   ITheme,
   getTheme,
-  HighContrastSelector
+  HighContrastSelector,
+  keyframes,
+  PulsingBeaconAnimationStyles
 } from '../../Styling';
 import {
   memoizeFunction
 } from '../../Utilities';
-import { IActivityItemStyles } from './ActivityItem.types';
+import { IActivityItemStyles, IActivityItemProps } from './ActivityItem.types';
 
 const DEFAULT_PERSONA_SIZE = '32px';
 const COMPACT_PERSONA_SIZE = '16px';
 const DEFAULT_ICON_SIZE = '16px';
 const COMPACT_ICON_SIZE = '13px';
+const ANIMATION_INNER_DIMENSION = '4px';
+const ANIMATION_OUTER_DIMENSION = '28px';
+const ANIMATION_BORDER_WIDTH = '4px';
 
 export const getStyles = memoizeFunction((
+  props: IActivityItemProps,
   theme: ITheme = getTheme(),
   customStyles?: IActivityItemStyles
 ): IActivityItemStyles => {
+
+  const continuousPulse = PulsingBeaconAnimationStyles.continuousPulseAnimationSingle(
+    props.beaconColorOne!,
+    props.beaconColorTwo!,
+    ANIMATION_INNER_DIMENSION,
+    ANIMATION_OUTER_DIMENSION,
+    ANIMATION_BORDER_WIDTH
+  );
+
+  const fadeIn: string = keyframes({
+    from: { opacity: 0, },
+    to: { opacity: 1, }
+  });
+
+  const slideIn: string = keyframes({
+    from: { transform: 'translateX(-10px)' },
+    to: { transform: 'translateX(0)' }
+  });
+
+  const continuousPulseAnimation = {
+    animationName: continuousPulse,
+    animationIterationCount: '1',
+    animationDuration: '.8s',
+    zIndex: 1000
+  };
+
+  const slideInAnimation = {
+    animationName: slideIn,
+    animationIterationCount: '1',
+    animationDuration: '.5s',
+  };
+
+  const fadeInAnimation = {
+    animationName: fadeIn,
+    animationIterationCount: '1',
+    animationDuration: '.5s',
+  };
+
   const ActivityItemStyles: IActivityItemStyles = {
 
     root: [
@@ -29,7 +73,23 @@ export const getStyles = memoizeFunction((
         lineHeight: '17px',
         boxSizing: 'border-box',
         color: theme.palette.neutralSecondary
-      }
+      },
+      (props.isCompact && props.animateBeaconSignal) && fadeInAnimation
+    ],
+
+    pulsingBeacon: [
+      {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        width: '0px',
+        height: '0px',
+        borderRadius: '225px',
+        borderStyle: 'solid',
+        opacity: 0
+      },
+      (props.isCompact && props.animateBeaconSignal) && continuousPulseAnimation
     ],
 
     isCompactRoot: {
@@ -63,13 +123,18 @@ export const getStyles = memoizeFunction((
 
     isCompactIcon: {
       height: COMPACT_PERSONA_SIZE,
+      minWidth: COMPACT_PERSONA_SIZE,
       fontSize: COMPACT_ICON_SIZE,
       lineHeight: COMPACT_ICON_SIZE,
       color: theme.palette.themePrimary,
       marginTop: '1px',
+      position: 'relative',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
       selectors: {
         '.ms-Persona-imageArea': {
-          marginTop: '-2px',
+          margin: '-2px 0 0 -2px',
           border: '2px solid' + theme.palette.white,
           borderRadius: '50%',
           selectors: {
@@ -101,9 +166,12 @@ export const getStyles = memoizeFunction((
       overflow: 'visible'
     },
 
-    activityContent: {
-      padding: '0 8px'
-    },
+    activityContent: [
+      {
+        padding: '0 8px'
+      },
+      (props.isCompact && props.animateBeaconSignal) && slideInAnimation
+    ],
 
     activityText: {
       display: 'inline'

packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx

@@ -34,7 +34,7 @@ describe('ActivityItem', () => {
   it('renders with an icon correctly', () => {
     const component = renderer.create(
       <ActivityItem
-        {...defaultProps}
+        { ...defaultProps }
         activityIcon={ <Icon iconName={ 'Message' } /> }
       />
     );
@@ -45,7 +45,7 @@ describe('ActivityItem', () => {
   it('renders with a single persona correctly', () => {
     const component = renderer.create(
       <ActivityItem
-        {...defaultProps}
+        { ...defaultProps }
         activityPersonas={ [defaultPersonaProps[0]] }
       />
     );
@@ -56,7 +56,7 @@ describe('ActivityItem', () => {
   it('renders with multiple personas correctly', () => {
     const component = renderer.create(
       <ActivityItem
-        {...defaultProps}
+        { ...defaultProps }
         activityPersonas={ defaultPersonaProps }
       />
     );
@@ -67,7 +67,7 @@ describe('ActivityItem', () => {
   it('renders compact with an icon correctly', () => {
     const component = renderer.create(
       <ActivityItem
-        {...defaultProps}
+        { ...defaultProps }
         activityIcon={ <Icon iconName={ 'Message' } /> }
         isCompact={ true }
       />
@@ -79,7 +79,7 @@ describe('ActivityItem', () => {
   it('renders compact with a single persona correctly', () => {
     const component = renderer.create(
       <ActivityItem
-        {...defaultProps}
+        { ...defaultProps }
         activityPersonas={ [defaultPersonaProps[0]] }
         isCompact={ true }
       />
@@ -91,7 +91,7 @@ describe('ActivityItem', () => {
   it('renders compact with multiple personas correctly', () => {
     const component = renderer.create(
       <ActivityItem
-        {...defaultProps}
+        { ...defaultProps }
         activityPersonas={ defaultPersonaProps }
         isCompact={ true }
       />
@@ -100,4 +100,17 @@ describe('ActivityItem', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('renders compact with animation correctly', () => {
+    const component = renderer.create(
+      <ActivityItem
+        { ...defaultProps }
+        activityPersonas={ [defaultPersonaProps[0]] }
+        isCompact={ true }
+        animateBeaconSignal={ true }
+      />
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
 });

packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx

@@ -9,6 +9,11 @@ import { getStyles } from './ActivityItem.styles';
 import { PersonaSize, PersonaCoin, IPersonaSharedProps } from '../../Persona';
 
 export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
+  public static defaultProps: Partial<IActivityItemProps> = {
+    beaconColorOne: '#00FFEC',
+    beaconColorTwo: '#005EDD'
+  };
+
   constructor(props: IActivityItemProps) {
     super(props);
   }
@@ -19,7 +24,9 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
       onRenderActivityDescription = this._onRenderActivityDescription,
       onRenderComments = this._onRenderComments,
       onRenderTimeStamp = this._onRenderTimeStamp,
-      styles: customStyles
+      styles: customStyles,
+      animateBeaconSignal,
+      isCompact
     } = this.props;
 
     const classNames = this._getClassNames(this.props);
@@ -29,6 +36,9 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
 
         { (this.props.activityPersonas || this.props.activityIcon || this.props.onRenderIcon) &&
           <div className={ classNames.activityTypeIcon }>
+            { animateBeaconSignal && isCompact &&
+              <div className={ classNames.pulsingBeacon } />
+            }
             { onRenderIcon(this.props) }
           </div>
         }
@@ -122,6 +132,6 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
   }
 
   private _getClassNames(props: IActivityItemProps): IActivityItemClassNames {
-    return getClassNames(getStyles(undefined, props.styles), props.className!, props.activityPersonas!, props.isCompact!);
+    return getClassNames(getStyles(props, undefined, props.styles), props.className!, props.activityPersonas!, props.isCompact!);
   }
 }

packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.types.ts

@@ -76,6 +76,23 @@ export interface IActivityItemProps extends React.AllHTMLAttributes<HTMLElement>
    * Element shown as a timestamp on this activity. If not included, no timestamp is shown.
    */
   timeStamp?: string | React.ReactNode[] | React.ReactNode;
+
+  /**
+   * Beacon color one
+   */
+  beaconColorOne?: string;
+
+  /**
+   * Beacon color two
+   */
+  beaconColorTwo?: string;
+
+  /**
+   * Enables/Disables the beacon that radiates
+   * from the center of the center of the activity icon. Signals an activity has started.
+   * @default false
+   */
+  animateBeaconSignal?: boolean;
 }
 
 export interface IActivityItemStyles {
@@ -84,6 +101,11 @@ export interface IActivityItemStyles {
    */
   root?: IStyle;
 
+  /**
+   * Styles applied to the root activity item container.
+   */
+  pulsingBeacon?: IStyle;
+
   /**
    * Styles applied to the main container of the activity's description.
    */