Coachmark: Pulsing beacon animation was moved to Styling

common/changes/office-ui-fabric-react/move-coachmark-beacon_2018-04-05-16-29.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Coachmark: The pulsing beacon animation moved 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/index.ts

@@ -4,6 +4,7 @@ export { DefaultFontStyles, registerDefaultFontFaces } from './DefaultFontStyles
 export { FontSizes, FontWeights, IconFontSizes, createFontStyles } from './fonts';
 export { getFocusStyle, focusClear } from './getFocusStyle';
 export { hiddenContentStyle } from './hiddenContentStyle';
+export { PulsingBeaconAnimationStyles } from './PulsingBeaconAnimationStyles';
 export {
   ThemeSettingName,
   getTheme,

scripts/package.json

@@ -49,7 +49,7 @@
   "bundlesize": [
     {
       "path": "../apps/test-bundle-button/dist/test-bundle-button.min.js",
-      "maxSize": "45.6 kB"
+      "maxSize": "45.8 kB"
     }
   ]
 }