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

Comparing version 0.5.0 to 0.6.0

package.json

 {
   "name": "@cfpb/cfpb-atomic-component",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Design System atomic component micro-framework",
@@ -16,3 +16,3 @@ "less": "src/cfpb-atomic-component.less",
   ],
-  "gitHead": "fccedbaea6195fc074d491c7c3a42b09f229a452"
+  "gitHead": "6dd58b56abcd0c5a98fbe66a5fcbabf56b31060e"
 }

README.md

@@ -14,3 +14,59 @@ # @cfpb/atomic-component [![Build Status](https://img.shields.io/travis/cfpb/design-system.svg)](https://travis-ci.org/cfpb/design-system) [![npm](https://img.shields.io/npm/v/@cfpb/atomic-component.svg?style=flat-square)](https://www.npmjs.com/package/@cfpb/atomic-component)
 
+## Utility descriptions
 
+### object-assign
+
+Utility used to copy Javascript object properties from one or more source objects to a target object
+
+#### Example
+
+```
+var assert = require( 'assert' );
+import { assign } from '../utilities/object-assign.js';
+var testObjectA = {
+    str:  'test',
+    func: function() { return 'testStr'; },
+    num:  1
+ };
+ var testObjectB = {
+    obj:   { test: 2 },
+    arr:   [ 3 ],
+   	_null: null
+ };
+ assign( testObjectA, testObjectB );
+ assert( testObjectA.hasOwnProperty( 'obj' ), true ) ;
+ assert( testObjectA.hasOwnProperty( 'arr' ) );
+ assert( testObjectA.hasOwnProperty( '_null' ), true );
+```
+
+### Type Checkers
+
+ Utility functions for checking Javascript types and primitives.
+
+#### Example
+
+```
+var assert = require( 'assert' );
+import typeCheckers from '../utilities/type-checkers.js';
+
+var UNDEFINED;
+
+var date = new Date( 2011, 7, 21 );
+
+function func() {
+  return true;
+}
+
+var object = {
+  a: '1',
+  b: '2',
+  c: '3'
+};
+
+assert.equal( typeCheckers.isUndefined( UNDEFINED ), true );
+assert.equal( typeCheckers.isObject( object ), true );
+assert.equal( typeCheckers.isFunction( func ), true );
+assert.equal( typeCheckers.isDate( date ), true );
+```
+
 ## Getting involved
@@ -17,0 +73,0 @@

src/components/AtomicComponent.js

@@ -13,7 +13,10 @@ /* ==========================================================================
 
-import { assign } from '../utilities/object-assign';
 const Delegate = require( 'ftdomdelegate' ).Delegate;
 import EventObserver from '../mixins/EventObserver.js';
-import typeCheckers from '../utilities/type-checkers';
+import { assign } from '../utilities/object-assign.js';
+import { instantiateAll, setInitFlag } from '../utilities/atomic-helpers.js';
+import typeCheckers from '../utilities/type-checkers.js';
 
+const TAG_NAME = 'div';
+
 /**
@@ -36,8 +39,2 @@ * Function as the constrcutor for the AtomicComponent.
   this.initializers.push( this.initialize );
-  this.initializers.forEach( function( func ) {
-    if ( typeCheckers.isFunction( func ) ) {
-      func.apply( this, arguments );
-    }
-  }, this );
-  this.dispatchEvent( 'component:initialized' );
 }
@@ -48,4 +45,16 @@
 
-  tagName: 'div',
+  /**
+   * Run through and call the component's initializers.
+   */
+  init: function() {
+    this.initializers.forEach( function( func ) {
+      if ( typeCheckers.isFunction( func ) ) {
+        func.apply( this, arguments );
+      }
+    }, this );
+    this.dispatchEvent( 'component:initialized' );
 
+    return this;
+  },
+
   /**
@@ -92,3 +101,3 @@ * Function used to process class modifiers. These should
       if ( this.className ) attrs.class = this.className;
-      this.setElement( document.createElement( this.tagName ) );
+      this.setElement( document.createElement( TAG_NAME ) );
       this.setElementAttributes( attrs );
@@ -98,3 +107,3 @@ } else {
     }
-    this.element.setAttribute( 'data-bound', true );
+    setInitFlag( this.element );
   },
@@ -244,3 +253,3 @@
     }
-    this.element.removeAttribute( 'data-bound' );
+    this.element.removeAttribute( 'data-js-hook' );
 
@@ -264,3 +273,2 @@ return this;
 
-
 /**
@@ -273,3 +281,3 @@ * Function used to set the attributes on an element.
  */
-AtomicComponent.extend = function( attributes ) {
+function extend( attributes ) {
 
@@ -299,3 +307,2 @@ /**
 
-
 /**
@@ -308,18 +315,11 @@ * Function used to instantiate all instances of the particular
  */
-AtomicComponent.init = function( scope ) {
-  const base = scope || document;
-  const elements = base.querySelectorAll( this.selector );
-  const components = [];
-
-  let element;
-  for ( let i = 0, len = elements.length; i < len; i++ ) {
-    element = elements[i];
-    if ( element.hasAttribute( 'data-bound' ) === false ) {
-      components.push( new this( element ) );
-    }
-  }
-
+ function init( scope ) {
+  const components = instantiateAll( this.selector, this, scope );
   return components;
 };
 
+// Set public static methods.
+AtomicComponent.init = init;
+AtomicComponent.extend = extend;
+
 export default AtomicComponent;

src/utilities/transition/AlphaTransition.js

 // Required modules.
+import BaseTransition from './BaseTransition.js';
 import EventObserver from '../../mixins/EventObserver.js';
-import BaseTransition from './BaseTransition.js';
 
@@ -5,0 +5,0 @@ // Exported constants.

src/utilities/transition/MoveTransition.js

 // Required modules.
+import BaseTransition from './BaseTransition.js';
 import EventObserver from '../../mixins/EventObserver.js';
-import BaseTransition from './BaseTransition.js';
 
@@ -5,0 +5,0 @@ // Exported constants.

No alert changes

Improved metrics

Total package byte prevSize

54656

increased by0.76%

Lines of code

1298

increased by11.42%

Number of lines in readme file

84

increased by200%

Worsened metrics

Number of package files

19

decreased by-24%

No dependency changes