@cfpb/cfpb-atomic-component - npm Package Compare versions

Comparing version 0.7.2 to 0.7.3

package.json

 {
   "name": "@cfpb/cfpb-atomic-component",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "Design System atomic component micro-framework",
@@ -16,3 +16,3 @@ "less": "src/cfpb-atomic-component.less",
   ],
-  "gitHead": "0217cd509f15f7d2aef4906804b0b282c5977cd9"
+  "gitHead": "e6095811f3833937556159afed9f773743c5e0de"
 }

src/utilities/transition/AlphaTransition.js

 // Required modules.
 import BaseTransition from './BaseTransition.js';
-import EventObserver from '../../mixins/EventObserver.js';
+import EventObserver from '@cfpb/cfpb-atomic-component/src/mixins/EventObserver.js';
 
 // Exported constants.
 const CLASSES = {
-  BASE_CLASS: 'u-alpha-transition',
-  ALPHA_100:  'u-alpha-100',
-  ALPHA_0:    'u-alpha-0'
+  CSS_PROPERTY: 'opacity',
+  BASE_CLASS:   'u-alpha-transition',
+  ALPHA_100:    'u-alpha-100',
+  ALPHA_0:      'u-alpha-0'
 };
@@ -11,0 +12,0 @@

src/utilities/transition/BaseTransition.js

 // Required modules.
-import EventObserver from '../../mixins/EventObserver.js';
+import EventObserver from '@cfpb/cfpb-atomic-component/src/mixins/EventObserver.js';
 
-/* eslint-disable max-lines-per-function, max-statements */
+// eslint-disable-next-line max-statements
 /**
@@ -30,2 +30,11 @@ * BaseTransition
 
+  // Make sure required attributes are passed in.
+  if ( typeof _classes.CSS_PROPERTY === 'undefined' ||
+       typeof _classes.BASE_CLASS === 'undefined' ) {
+    throw new Error(
+      'Transitions require CSS_PROPERTY and BASE_CLASS ' +
+      'to be passed into BaseTransition.'
+    );
+  }
+
   /**
@@ -116,2 +125,3 @@ * @returns {BaseTransition} An instance.
   function _addEventListener() {
+    _dom.classList.add( BaseTransition.ANIMATING_CLASS );
     _isAnimating = true;
@@ -140,11 +150,18 @@ // If transition is not supported, call handler directly (IE9/OperaMini).
    * Handle the end of a transition.
+   * @param {TransitionEvent} evt - Transition event object.
+   * @returns {boolean} True if transition was cleaned up,
+   *   false if an outside transitioning property triggered this event handler.
    */
-  function _transitionComplete() {
+  function _transitionComplete( evt ) {
+    if ( evt && evt.propertyName !== _classes.CSS_PROPERTY ) {
+      return false;
+    }
+
     _removeEventListener();
+    _dom.classList.remove( BaseTransition.ANIMATING_CLASS );
     this.dispatchEvent( BaseTransition.END_EVENT, { target: this } );
     _isAnimating = false;
+    return true;
   }
 
-  // TODO Fix complexity issue
-  /* eslint-disable complexity */
   /**
@@ -164,3 +181,2 @@ * Search for and remove initial BaseTransition classes that have
   }
-  /* eslint-enable complexity */
 
@@ -209,4 +225,2 @@ /**
 
-  // TODO Fix complexity issue
-  /* eslint-disable complexity */
   /**
@@ -231,7 +245,7 @@ * @param {HTMLNode} elem
 
-    let transitionEnd;
-    for ( transitionEnd in transitions ) {
-      if ( transitions.hasOwnProperty( transitionEnd ) &&
-           typeof elem.style[transitionEnd] !== 'undefined' ) {
-        transition = transitions[transitionEnd];
+    let transitionEvent;
+    for ( transitionEvent in transitions ) {
+      if ( transitions.hasOwnProperty( transitionEvent ) &&
+           typeof elem.style[transitionEvent] !== 'undefined' ) {
+        transition = transitions[transitionEvent];
         break;
@@ -242,3 +256,2 @@ }
   }
-  /* eslint-enable complexity */
 
@@ -262,3 +275,2 @@ // Attach public events.
 }
-/* eslint-enable max-lines-per-function, max-statements */
 
@@ -269,3 +281,4 @@ // Public static constants.
 BaseTransition.NO_ANIMATION_CLASS = 'u-no-animation';
+BaseTransition.ANIMATING_CLASS = 'u-is-animating';
 
 export default BaseTransition;

src/utilities/transition/MoveTransition.js

 // Required modules.
 import BaseTransition from './BaseTransition.js';
-import EventObserver from '../../mixins/EventObserver.js';
+import EventObserver from '@cfpb/cfpb-atomic-component/src/mixins/EventObserver.js';
 
 // Exported constants.
 const CLASSES = {
+  CSS_PROPERTY:   'transform',
   BASE_CLASS:     'u-move-transition',
@@ -16,3 +17,2 @@ MOVE_TO_ORIGIN: 'u-move-to-origin',
 
-/* eslint-disable max-lines-per-function */
 /**
@@ -126,3 +126,2 @@ * MoveTransition
 }
-/* eslint-enable max-lines-per-function */
 
@@ -129,0 +128,0 @@ // Public static properties.

No alert changes

Improved metrics

Total package byte prevSize

55840

increased by1.03%

Lines of code

1331

increased by0.83%

No dependency changes