Coachmark: Moved pulsingBeacon animation to styling package for reuse

common/changes/@uifabric/styling/pulsing-beacon-styling_2018-04-03-20-00.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/styling",
+      "comment": "New pulsing beacon animation to use in Coachmark and ActivityItem.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/styling",
+  "email": "lynam.emily@gmail.com"
+}

common/changes/office-ui-fabric-react/pulsing-beacon-styling_2018-04-03-20-00.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Coachmark: Moved pulsing beacon animation to the styling package.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "lynam.emily@gmail.com"
+}

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

@@ -1,4 +1,9 @@
-import { IStyle, IRawStyle, keyframes } from '../../Styling';
+import {
+  IStyle,
+  IRawStyle,
+  keyframes,
+  PulsingBeaconAnimationStyles
+} from '../../Styling';
 
 export interface ICoachmarkStyleProps {
   /**
@@ -98,47 +103,6 @@ export interface ICoachmarkStyles {
   collapsed?: IStyle;
 }
 
-function continuousPulseStepOne(beaconColorOne: string): IRawStyle {
-  return {
-    borderColor: beaconColorOne,
-    borderWidth: '0px',
-    width: '35px',
-    height: '35px'
-  };
-}
-
-function continuousPulseStepTwo(): IRawStyle {
-  return {
-    opacity: '1',
-    borderWidth: '10px'
-  };
-}
-
-function continuousPulseStepThree(): IRawStyle {
-  return {
-    opacity: 1
-  };
-}
-
-function continuousPulseStepFour(beaconColorTwo: string): IRawStyle {
-  return {
-    borderWidth: '0',
-    width: '150px',
-    height: '150px',
-    opacity: '0',
-    borderColor: beaconColorTwo
-  };
-}
-
-function continuousPulseStepFive(beaconColorOne: string): IRawStyle {
-  return {
-    ...continuousPulseStepOne(beaconColorOne),
-    ...{
-      opacity: '0'
-    }
-  };
-}
-
 export const translateOne: string = keyframes({
   '0%': {
     transform: 'translate(0, 0)', // orig 25
@@ -254,33 +218,26 @@ export const rotateOne: string = keyframes({
 });
 
 export function getStyles(props: ICoachmarkStyleProps): ICoachmarkStyles {
-  const ContinuousPulse: string = keyframes({
-    '0%': continuousPulseStepOne(props.beaconColorOne!),
-    '1.42%': continuousPulseStepTwo(),
-    '3.57%': continuousPulseStepThree(),
-    '7.14%': continuousPulseStepFour(props.beaconColorTwo!),
-    '8%': continuousPulseStepFive(props.beaconColorOne!),
-    '29.99%': continuousPulseStepFive(props.beaconColorOne!),
-    '30%': continuousPulseStepOne(props.beaconColorOne!),
-    '31.42%': continuousPulseStepTwo(),
-    '33.57%': continuousPulseStepThree(),
-    '37.14%': continuousPulseStepFour(props.beaconColorTwo!),
-    '38%': continuousPulseStepFive(props.beaconColorOne!),
-    '79.42%': continuousPulseStepFive(props.beaconColorOne!),
-    '79.43': continuousPulseStepOne(props.beaconColorOne!),
-    '81.85': continuousPulseStepTwo(),
-    '83.42': continuousPulseStepThree(),
-    '87%': continuousPulseStepFour(props.beaconColorTwo!),
-    '100%': {}
-  });
+  const animationInnerDimension = '35px';
+  const animationOuterDimension = '150px';
+  const animationBorderWidth = '10px';
+
+  const ContinuousPulse: string = PulsingBeaconAnimationStyles.continuousPulseAnimation(
+    props.beaconColorOne!,
+    props.beaconColorTwo!,
+    animationInnerDimension,
+    animationOuterDimension,
+    animationBorderWidth
+  );
+
+  const ContinuousPulseAnimation = PulsingBeaconAnimationStyles.createDefaultAnimation(ContinuousPulse);
 
   return {
     root: [
       {
         position: 'relative'
       }
     ],
-    // The pulsing beacon
     pulsingBeacon: [
       {
         position: 'absolute',
@@ -293,13 +250,7 @@ export function getStyles(props: ICoachmarkStyleProps): ICoachmarkStyles {
         borderStyle: 'solid',
         opacity: '0'
       },
-      (props.collapsed && props.isBeaconAnimating) && {
-        animationName: ContinuousPulse,
-        animationIterationCount: '1',
-        animationDuration: '14s',
-        zIndex: 1000,
-        animationDelay: '2s'
-      }
+      (props.collapsed && props.isBeaconAnimating) && ContinuousPulseAnimation
     ],
     // Translate Animation Layer
     translateAnimationContainer: [

packages/styling/src/styles/PulsingBeaconAnimationStyles.ts

@@ -0,0 +1,90 @@
+import { IRawStyle, keyframes } from '@uifabric/merge-styles/lib/index';
+
+const DEFAULT_DURATION = '14s';
+const DEFAULT_DELAY = '2s';
+const DEFAULT_ITERATION_COUNT = '1';
+
+function _continuousPulseStepOne(beaconColorOne: string, innerDimension: string): IRawStyle {
+  return {
+    borderColor: beaconColorOne,
+    borderWidth: '0px',
+    width: innerDimension,
+    height: innerDimension
+  };
+}
+
+function _continuousPulseStepTwo(borderWidth: string): IRawStyle {
+  return {
+    opacity: 1,
+    borderWidth: borderWidth
+  };
+}
+
+function _continuousPulseStepThree(): IRawStyle {
+  return {
+    opacity: 1
+  };
+}
+
+function _continuousPulseStepFour(beaconColorTwo: string, outerDimension: string): IRawStyle {
+  return {
+    borderWidth: '0',
+    width: outerDimension,
+    height: outerDimension,
+    opacity: 0,
+    borderColor: beaconColorTwo
+  };
+}
+
+function _continuousPulseStepFive(beaconColorOne: string, innerDimension: string): IRawStyle {
+  return {
+    ..._continuousPulseStepOne(beaconColorOne, innerDimension),
+    ...{
+      opacity: 0
+    }
+  };
+}
+
+function _continuousPulseAnimation(
+  beaconColorOne: string,
+  beaconColorTwo: string,
+  innerDimension: string,
+  outerDimension: string,
+  borderWidth: string
+): string {
+  return keyframes({
+    '0%': _continuousPulseStepOne(beaconColorOne, innerDimension),
+    '1.42%': _continuousPulseStepTwo(borderWidth),
+    '3.57%': _continuousPulseStepThree(),
+    '7.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
+    '8%': _continuousPulseStepFive(beaconColorOne, innerDimension),
+    '29.99%': _continuousPulseStepFive(beaconColorOne, innerDimension),
+    '30%': _continuousPulseStepOne(beaconColorOne, innerDimension),
+    '31.42%': _continuousPulseStepTwo(borderWidth),
+    '33.57%': _continuousPulseStepThree(),
+    '37.14%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
+    '38%': _continuousPulseStepFive(beaconColorOne, innerDimension),
+    '79.42%': _continuousPulseStepFive(beaconColorOne, innerDimension),
+    '79.43': _continuousPulseStepOne(beaconColorOne, innerDimension),
+    '81.85': _continuousPulseStepTwo(borderWidth),
+    '83.42': _continuousPulseStepThree(),
+    '87%': _continuousPulseStepFour(beaconColorTwo, outerDimension),
+    '100%': {}
+  });
+}
+
+function _createDefaultAnimation(
+  animationName: string,
+): IRawStyle {
+  return {
+    animationName,
+    animationIterationCount: DEFAULT_ITERATION_COUNT,
+    animationDuration: DEFAULT_DURATION,
+    animationDelay: DEFAULT_DELAY
+  };
+}
+
+export const PulsingBeaconAnimationStyles = {
+  continuousPulseAnimation: _continuousPulseAnimation,
+  createDefaultAnimation: _createDefaultAnimation
+};