fleetcor-lwc 3.9.8 → 3.10.0

package/README.md

@@ -672,6 +672,37 @@ This component fully extends from `Input Text`
 
 ---
 
+### Collapsible Section
+
+```html
+<flt-collapsible-section>
+  <div slot="title">Collapsible Section Title</div>
+  <div>
+      <div>Any Content...</div>
+  </div>
+</flt-collapsible-section>
+```
+
+<details>
+<summary>Details</summary>
+
+#### Collapsible Section variables
+
+| @api variables     | type   | values       | required | description                                                                    |
+| ------------------ | ------ | ------------ | -------- | -----------                                                                    |
+| closed             | bool   |              | -        | To control section status `closed/opened` (default - false)                    |
+| styleOff           | bool   |              | -        | To be able to turn off default styles for named slot `title` (default - false) |
+
+#### Collapsible Section slots
+
+| slot      | description                                    |
+| --------- | ---------------------------------------------- |
+| default   | any html element can be there                  |
+| title     | any html element can be there                  |
+</details>
+
+---
+
 
 ## Interfaces
 
@@ -836,6 +867,18 @@ You can override them as you wish by global css variables as priority.
 <details>
 <summary>Click to expand/collapse</summary>
 
+v.3.10.0
+
+- Added expose for component `flt-collapsible-section`
+
+---
+
+v.3.9.9
+
+- Added component `flt-collapsible-section`
+
+---
+
 v.3.9.8
 
 - Updates for `Readme.md`

package/frontend/components/flt/collapsibleSection/collapsibleSection.js

@@ -1,28 +1,27 @@
 import { api } from 'lwc';
 import { BaseElement } from 'fleetcor-lwc'
-import { UTILS } from 'c/utils';
 import './collapsibleSection.scss';
 
 export default class CollapsibleSection extends BaseElement {
     titleSlotNonEmpty;
 
-    @api isClosed = false;
-    @api disableTitleSlotStyle = false;
+    @api closed = false;
+    @api styleOff = false;
 
     get containerWrapperClass() {
         return this.generateClassNameList({
-            'collapsing-section__container-wrapper': true,
-            'collapsing-section__container-wrapper_expanded': !this.isClosed
+            'collapsible-section__container-wrapper': true,
+            'collapsible-section__container-wrapper_expanded': !this.closed
         })
     }
 
     get titleClass() {
-        if (this.disableTitleSlotStyle) {
+        if (this.styleOff) {
             return '';
         }
-        return UTILS.configToString({
-            'collapsing-section_title': this.titleSlotNonEmpty,
-            'collapsing-section_title-active': !this.isClosed && this.titleSlotNonEmpty
+        return this.generateClassNameList({
+            'collapsible-section_title': this.titleSlotNonEmpty,
+            'collapsible-section_title-active': !this.closed && this.titleSlotNonEmpty
         });
     }
 
@@ -38,7 +37,7 @@ export default class CollapsibleSection extends BaseElement {
 
     toggleWrapper() {
         if (this.titleSlotNonEmpty) {
-            this.isClosed = !this.isClosed;
+            this.closed = !this.closed;
         }
     }
 }

package/frontend/components/flt/collapsibleSection/collapsibleSection.scss

@@ -1,4 +1,4 @@
-.collapsing-section {
+.collapsible-section {
     &__container {
         animation: fadeOut 0.5s ease-in;
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.9.8",
+    "version": "3.10.0",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -33,6 +33,7 @@
             "flt/inputText",
             "flt/inputEmail",
             "flt/inputPhone",
+            "flt/collapsibleSection",
             "flt/inputWithPicklist",
             "flt/picklist",
             "flt/modal",