fleetcor-lwc 3.12.1 → 3.13.0

package/README.md

@@ -700,10 +700,18 @@ 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>
+<flt-collapsible-section title="Details">
+  <div class="collapsible-section__body-item">
+    <flt-icon icon="oil"></flt-icon>
+    <span>Oil</span>
+  </div>
+  <div class="collapsible-section__body-item">
+    <flt-icon icon="fuel"></flt-icon>
+    <span>Fuel</span>
+  </div>
+  <div class="collapsible-section__body-item">
+    <flt-icon icon="hgv"></flt-icon>
+    <span>Hgv</span>
   </div>
 </flt-collapsible-section>
 ```
@@ -713,17 +721,23 @@ This component fully extends from `Input Text`
 
 #### 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) |
+| @api variables | type | values | required | description                                                         |
+| -------------- | ---- | ------ | -------- | ------------------------------------------------------------------- |
+| opened         | bool |        | -        | To control section status `closed` or `opened` (default - `closed`) |
+| title          | html |        | -        | Any html text                                                       |
+
+#### Collapsible Section methods
+
+| @api                 | params | return type | description          |
+| -------------------- | ------ | ----------- | -------------------- |
+| handleToggleCollapse |        | void        | Toggle `opened` flag |
 
 #### Collapsible Section slots
 
 | slot    | description                   |
 | ------- | ----------------------------- |
+| header  | any html element can be there |
 | default | any html element can be there |
-| title   | any html element can be there |
 
 </details>
 
@@ -896,6 +910,30 @@ You can override them as you wish by global css variables as priority.
   --flt-alert-info-content-font-weight: 400;
   --flt-alert-info-content-color: #1a1a1a;
   --flt-alert-info-icon-max-width: 20px;
+  --flt-alert-info-gap: 16px;
+  --flt-collapsible-section-background: initial;
+  --flt-collapsible-section-padding: initial;
+  --flt-collapsible-section-border: initial;
+  --flt-collapsible-section-border-radius: initial;
+  --flt-collapsible-section-box-shadow: initial;
+  --flt-collapsible-section-opened-header-base-icon-transform: rotate(180deg) scale(
+      -1
+    );
+  --flt-collapsible-section-body-animation-duration: 0.5s;
+  --flt-collapsible-section-body-animation-type: ease;
+  --flt-collapsible-section-header-base-padding: initial;
+  --flt-collapsible-section-header-base-border: initial;
+  --flt-collapsible-section-header-base-border-radius: initial;
+  --flt-collapsible-section-header-base-background: initial;
+  --flt-collapsible-section-header-base-cursor: pointer;
+  --flt-collapsible-section-header-base-title-color: #1a1a1a;
+  --flt-collapsible-section-header-base-font-size: 16px;
+  --flt-collapsible-section-header-base-line-height: 24px;
+  --flt-collapsible-section-header-base-font-weight: 700;
+  --flt-collapsible-section-body-animation-duration: 0.5s;
+  --flt-collapsible-section-body-animation-type: ease;
+  --flt-collapsible-section-header-base-icon-transform: rotate(180deg);
+  --flt-collapsible-section-header-base-icon-fill: #1a1a1a;
 }
 ```
 
@@ -908,6 +946,19 @@ You can override them as you wish by global css variables as priority.
 <details>
 <summary>Click to expand/collapse</summary>
 
+v.3.13.0
+
+- Update `flt-collapsible-section` component
+- Update Demo page
+
+---
+
+v.3.12.2
+
+- Bugfix `flt-alert-info`
+
+---
+
 v.3.12.1
 
 - Bugfix `flt-alert-info`

package/frontend/components/flt/alertInfo/alertInfo.html

@@ -7,7 +7,7 @@
         </div>
         <div class="flt-alert-info__block">
             <slot name="title">
-                <div class="flt-alert-info__title" lwc:inner-html={title}></div>
+                <div lwc:if={title} class="flt-alert-info__title" lwc:inner-html={title}></div>
             </slot>
             <slot name="content">
                 <div class="flt-alert-info__content" lwc:inner-html={content}></div>

package/frontend/components/flt/alertInfo/alertInfo.scss

@@ -3,7 +3,7 @@
     border-radius: var(--flt-alert-info-border-radius, 8px);
     border: var(--flt-alert-info-border, initial);
     display: flex;
-    gap: 16px;
+    gap: var(--flt-alert-info-gap, 16px);
     background: var(--flt-alert-info-background, #d6e7fc);
 
     &_warning {
@@ -27,9 +27,12 @@
 
     &__icon {
         flex-shrink: 0;
+        
         .flt-icon {
             max-width: var(--flt-alert-info-icon-max-width, 20px);
+            max-height: var(--flt-alert-info-icon-max-heigth, 20px);
         }
+        max-height: var(--flt-alert-info-icon-max-heigth, 20px);
         max-width: var(--flt-alert-info-icon-max-width, 20px);
     }
 }

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

@@ -0,0 +1,40 @@
+import { createElement, setHooks } from 'lwc'
+
+setHooks({
+    sanitizeHtmlContent(content) {
+        return content
+    }
+})
+
+import CollapsibleSection from 'flt/collapsibleSection'
+
+describe('flt-collapsible-section', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('flt collapsible section base', () => {
+        const collapsibleSectionEl = createElement('flt-collapsible-section', {
+            is: CollapsibleSection
+        })
+        document.body.appendChild(collapsibleSectionEl)
+        expect(collapsibleSectionEl.firstChild.classList).toContain('flt-collapsible-section')
+
+        collapsibleSectionEl.opened = true
+
+        return Promise.resolve().then(async () => {
+            expect(collapsibleSectionEl.firstChild.classList).toContain(
+                'flt-collapsible-section_opened'
+            )
+
+            collapsibleSectionEl.handleToggleCollapse()
+            return Promise.resolve().then(async () => {
+                expect(collapsibleSectionEl.firstChild.classList).not.toContain(
+                    'flt-collapsible-section_opened'
+                )
+            })
+        })
+    })
+})

package/frontend/components/flt/collapsibleSection/collapsibleSection.html

@@ -1,10 +1,27 @@
 <template lwc:render-mode="light">
-    <div class={titleClass} onclick={handleToggleWrapper}>
-        <slot name="title"><span class="title-empty-slot"></span></slot>
-    </div>
-    <div class={containerWrapperClass}>
-        <div>
-            <slot></slot>
+    <div class={collapsibleSectionStyles}>
+        <div class="flt-collapsible-section__header">
+            <slot name="header">
+                <div class="flt-collapsible-section__header-base" onclick={handleToggleCollapse}>
+                    <div
+                        class="flt-collapsible-section__header-base-title"
+                        lwc:inner-html={title}></div>
+                    <svg
+                        class="flt-collapsible-section__header-base-icon"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 24 24"
+                        fill="none">
+                        <path
+                            d="M5 14.7949L6.41 16.2049L12 10.6249L17.59 16.2049L19 14.7949L12 7.79492L5 14.7949Z"></path>
+                    </svg>
+                </div>
+            </slot>
+        </div>
+        <div class="flt-collapsible-section__body">
+            <div class="flt-collapsible-section__content">
+                <slot></slot>
+            </div>
         </div>
     </div>
 </template>

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

@@ -1,43 +1,20 @@
-import { api } from 'lwc';
+import { api } from 'lwc'
 import { BaseElement } from 'fleetcor-lwc'
-import './collapsibleSection.scss';
+import './collapsibleSection.scss'
 
 export default class CollapsibleSection extends BaseElement {
-    titleSlotNonEmpty;
+    @api opened
+    @api title = 'Section Title'
 
-    @api closed = false;
-    @api styleOff = false;
-
-    get containerWrapperClass() {
-        return this.generateClassNameList({
-            'collapsible-section__container-wrapper': true,
-            'collapsible-section__container-wrapper_expanded': !this.closed
-        })
+    @api
+    handleToggleCollapse() {
+        this.opened = !this.opened
     }
 
-    get titleClass() {
-        if (this.styleOff) {
-            return '';
-        }
+    get collapsibleSectionStyles() {
         return this.generateClassNameList({
-            'collapsible-section__title': this.titleSlotNonEmpty,
-            'collapsible-section__title-active': !this.closed && this.titleSlotNonEmpty
-        });
-    }
-
-
-    renderedCallback() {
-        const titleEmptySlot = this.querySelector('.title-empty-slot');
-        if (titleEmptySlot) {
-            this.titleSlotNonEmpty = false;
-        } else {
-            this.titleSlotNonEmpty = true;
-        }
-    }
-
-    handleToggleWrapper() {
-        if (this.titleSlotNonEmpty) {
-            this.closed = !this.closed;
-        }
+            'flt-collapsible-section': true,
+            'flt-collapsible-section_opened': this.opened
+        })
     }
 }

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

@@ -1,50 +1,61 @@
-.collapsible-section {
-    &__container {
-        animation: fadeOut 0.5s ease-in;
+.flt-collapsible-section {
+    background: var(--flt-collapsible-section-background, initial);
+    padding: var(--flt-collapsible-section-padding, initial);
+    border: var(--flt-collapsible-section-border, initial);
+    border-radius: var(--flt-collapsible-section-border-radius, initial);
+    box-shadow: var(--flt-collapsible-section-box-shadow, initial);
+
+    &_opened {
+        .flt-collapsible-section__body {
+            grid-template-rows: 1fr;
+        }
+
+        .flt-collapsible-section__header-base-icon {
+            transform: var(
+                --flt-collapsible-section-opened-header-base-icon-transform,
+                rotate(180deg) scale(-1)
+            );
+        }
     }
 
-    &__container-wrapper {
+    &__body {
         display: grid;
         grid-template-rows: 0fr;
-        transition: grid-template-rows 500ms, margin-top 500ms;
-
-        &_expanded {
-            grid-template-rows: 1fr;
-        }
+        transition: grid-template-rows var(--flt-collapsible-section-body-animation-duration, 0.5s)
+            var(--flt-collapsible-section-body-animation-type, ease);
     }
 
-    &__container-wrapper > div {
+    &__content {
         overflow: hidden;
-        margin-top: 0px;
+        min-height: 0;
     }
 
-    &__title {
-        font-size: 16px;
-        font-weight: 700;
-        padding-bottom: 12px;
-        cursor: pointer;
+    &__header-base {
         display: flex;
-        justify-content: space-between;
         align-items: center;
+        justify-content: space-between;
+        padding: var(--flt-collapsible-section-header-base-padding, initial);
+        border: var(--flt-collapsible-section-header-base-border, initial);
+        border-radius: var(--flt-collapsible-section-header-base-border-radius, initial);
+        background: var(--flt-collapsible-section-header-base-background, initial);
+        cursor: var(--flt-collapsible-section-header-base-cursor, pointer);
+        gap: 8px;
+    }
 
-        &:after {
-            content: '';
-            display: inline-block;
-            margin-left: 0.75rem;
-            width: 10px;
-            height: 10px;
-            border-bottom: 2px solid #111827;
-            border-left: 2px solid #111827;
-            transform: rotate(-45deg);
-            margin-top: -8px;
-            transition: all 0.4s ease-out;
-        }
+    &__header-base-title {
+        color: var(--flt-collapsible-section-header-base-title-color, #1a1a1a);
+        font-size: var(--flt-collapsible-section-header-base-font-size, 16px);
+        line-height: var(--flt-collapsible-section-header-base-line-height, 24px);
+        font-weight: var(--flt-collapsible-section-header-base-font-weight, 700);
+    }
 
-        &_active {
-            &:after {
-                transform: rotate(135deg);
-                margin-top: 2px;
-            }
+    &__header-base-icon {
+        transition: transform var(--flt-collapsible-section-body-animation-duration, 0.5s)
+            var(--flt-collapsible-section-body-animation-type, ease);
+        transform: var(--flt-collapsible-section-header-base-icon-transform, rotate(180deg));
+        flex-shrink: 0;
+        path {
+            fill: var(--flt-collapsible-section-header-base-icon-fill, #1a1a1a);
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.12.1",
+    "version": "3.13.0",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -84,6 +84,7 @@
         "webpack-dev-server": "^5.2.3"
     },
     "dependencies": {
-        "imask": "^7.6.1"
+        "imask": "^7.6.1",
+        "prismjs": "^1.30.0"
     }
-}
+}