@cfpb/cfpb-expandables - npm Package Compare versions

Comparing version 0.20.1 to 0.21.0

package.json

 {
   "name": "@cfpb/cfpb-expandables",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "description": "Design System expandables",
@@ -12,5 +12,5 @@ "main": "src/cfpb-expandables.js",
   "dependencies": {
-    "@cfpb/cfpb-atomic-component": "^0.20.1",
-    "@cfpb/cfpb-core": "^0.20.0",
-    "@cfpb/cfpb-icons": "^0.20.0"
+    "@cfpb/cfpb-atomic-component": "^0.21.0",
+    "@cfpb/cfpb-core": "^0.21.0",
+    "@cfpb/cfpb-icons": "^0.21.0"
   },
@@ -20,4 +20,4 @@ "keywords": [
   ],
-  "gitHead": "32bd5d9b20a025e8bdbb0083106f31eb06f85ea6",
+  "gitHead": "905c9fa959cdf19f992fabfc0b3f5f64b315d67e",
   "type": "module"
 }

src/Expandable.js

@@ -43,7 +43,7 @@ /* ==========================================================================
   this.transition.addEventListener(
-    'expandBegin',
+    'expandbegin',
     expandBeginHandler.bind(this)
   );
   this.transition.addEventListener(
-    'collapseEnd',
+    'collapseend',
     collapseEndHandler.bind(this)
@@ -50,0 +50,0 @@ );

src/ExpandableTransition.js

@@ -23,3 +23,3 @@ import BaseTransition from '@cfpb/cfpb-atomic-component/src/utilities/transition/BaseTransition.js';
 function ExpandableTransition(element) {
-  const _baseTransition = new BaseTransition(element, CLASSES);
+  const _baseTransition = new BaseTransition(element, CLASSES, this);
   let previousHeight;
@@ -32,3 +32,3 @@
     if (element.classList.contains(CLASSES.EXPANDED)) {
-      this.dispatchEvent('expandEnd', { target: this });
+      this.dispatchEvent('expandend', { target: this });
 
@@ -39,3 +39,3 @@ if (element.scrollHeight > previousHeight) {
     } else if (element.classList.contains(CLASSES.COLLAPSED)) {
-      this.dispatchEvent('collapseEnd', { target: this });
+      this.dispatchEvent('collapseend', { target: this });
     }
@@ -48,4 +48,6 @@ }
   function init() {
-    _baseTransition.init();
-    _baseTransition.addEventListener(
+    const openOnLoad = element.classList.contains(CLASSES.OPEN_DEFAULT);
+    const initialClass = openOnLoad ? CLASSES.EXPANDED : CLASSES.COLLAPSED;
+    _baseTransition.init(initialClass);
+    this.addEventListener(
       BaseTransition.END_EVENT,
@@ -55,3 +57,3 @@ _transitionComplete.bind(this)
 
-    if (element.classList.contains(CLASSES.OPEN_DEFAULT)) {
+    if (openOnLoad) {
       this.expand();
@@ -86,3 +88,3 @@ } else {
   function collapse() {
-    this.dispatchEvent('collapseBegin', { target: this });
+    this.dispatchEvent('collapsebegin', { target: this });
 
@@ -102,3 +104,3 @@ previousHeight = element.scrollHeight;
   function expand() {
-    this.dispatchEvent('expandBegin', { target: this });
+    this.dispatchEvent('expandbegin', { target: this });
 
@@ -105,0 +107,0 @@ if (!previousHeight || element.scrollHeight > previousHeight) {

No alert changes

Improved metrics

Total package byte prevSize

60103

increased by18.37%

Number of package files

11

increased by22.22%

Lines of code

434

increased by77.14%

Dependency changes

• + Added@cfpb/cfpb-atomic-component@0.21.9(transitive)

• + Added@cfpb/cfpb-core@0.21.0(transitive)

• + Added@cfpb/cfpb-icons@0.21.11(transitive)

• - Removed@cfpb/cfpb-atomic-component@0.20.1(transitive)

• - Removed@cfpb/cfpb-core@0.20.0(transitive)

• - Removed@cfpb/cfpb-icons@0.20.0(transitive)

• Updated@cfpb/cfpb-atomic-component@^0.21.0

• Updated@cfpb/cfpb-core@^0.21.0

• Updated@cfpb/cfpb-icons@^0.21.0