fleetcor-lwc 3.5.1 → 3.6.0

package/README.md

@@ -243,16 +243,37 @@ Add / update `lwc.config.json` file in your project
 | ------- | ----------------------------- |
 | default | any html element can be there |
 
+### Loader
+
+```html
+<flt-loader>
+  <flt-icon icon="arrow-left"></flt-icon>
+</flt-loader>
+...
+```
+
+#### Loader slot
+
+| slot    | description                   |
+| ------- | ----------------------------- |
+| default | any html element can be there |
+
 ### Modal
 
 ```html
-<flt-modal>
+<flt-modal deactive-glass>
   <flt-icon icon="arrow-left"></flt-icon>
 </flt-modal>
 
 ...
 ```
 
+#### Modal variables
+
+| @api variables | type | values | required | description                             |
+| -------------- | ---- | ------ | -------- | --------------------------------------- |
+| deactiveGlass  | bool |        | -        | Depricate close modal by clicking glass |
+
 #### Modal slot
 
 | slot    | description                   |
@@ -408,7 +429,7 @@ This component fully extends from `Input Text`
 
 #### ModalViewer
 
-- `ModalViewer.showModalWithComponent(element)` - to show modal window with element inside
+- `ModalViewer.showModalWithComponent(element, options)` - to show modal window with element inside
 - `ModalViewer.hideModals()` - remove all modals
 
 ```js
@@ -422,7 +443,7 @@ btn.onclick = () => {
   ModalViewer.hideModals();
 };
 
-ModalViewer.showModalWithComponent(btn);
+ModalViewer.showModalWithComponent(btn, { duration: 700, deactiveGlass: true });
 ```
 
 ## Override styles
@@ -497,18 +518,34 @@ You can override them as you wish by global css variables as priority.
   --flt-input-border-color-success: #59eb9c;
   --flt-input-border-radius: 12px;
   --flt-card-bgc: #fff;
-  --flt-card-padding-xs: 24px;
-  --flt-card-border-radius-xs: 20px;
+  --flt-card-padding: 24px;
+  --flt-card-border-radius: 20px;
   --flt-card-box-shadow: (
     0px 2px 3px 0px #0000004d,
     0px 6px 10px 4px #00000026
   );
-  --flt-card-border-radius-lg: 24px;
+  --flt-loader-gap: 16px;
+  --flt-loader-background: #ffffff;
+  --flt-loader-spinner-circle: 80px;
+  --flt-loader-spinner-fill-first-part: #ffffff;
+  --flt-loader-spinner-fill: #85a2b6;
+  --flt-loader-spinner-inner-circle-percent: 88%;
+  --flt-loader-spinner-bgc-inner-circle: #ffffff;
+  --flt-loader-message-font-size: 16px;
+  --flt-loader-message-color: #80828a;
 }
 ```
 
 ## Release Notes:
 
+- v.3.6.0
+
+  - Added new component `flt-loader`
+
+- v.3.5.2
+
+  - Update modal component with option `deactiveGlass`
+
 - v.3.5.1
 
   - Bug fix with progress component

package/frontend/components/flt/card/card.scss

@@ -1,13 +1,6 @@
 .flt-card {
     background-color: var(--flt-card-bgc, #fff);
-    padding: var(--flt-card-padding-xs, 24px);
-    border-radius: var(--flt-card-border-radius-xs, 20px);
+    padding: var(--flt-card-padding, 24px);
+    border-radius: var(--flt-card-border-radius, 20px);
     box-shadow: var(--flt-card-box-shadow, (0px 2px 3px 0px #0000004d, 0px 6px 10px 4px #00000026));
 }
-
-@media (min-width: 1280px) {
-    .flt-card {
-        padding: var(--flt-card-padding-lg, 24px);
-        border-radius: var(--flt-card-border-radius-lg, 24px);
-    }
-}

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

@@ -0,0 +1,20 @@
+import { createElement } from 'lwc'
+import Loader from 'flt/loader'
+
+describe('flt-modal', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('base test', () => {
+        const loader = createElement('flt-loader', { is: Loader })
+        document.body.appendChild(loader)
+        const bodyElement = document.body.querySelector('.flt-loader')
+        const pEl = document.createElement('p')
+        pEl.innerHTML = 'Hello world'
+        bodyElement.appendChild(pEl)
+        expect(loader.innerHTML).toContain('Hello world')
+    })
+})

package/frontend/components/flt/loader/loader.html

@@ -0,0 +1,8 @@
+<template lwc:render-mode="light">
+    <div class="flt-loader">
+        <div class="flt-loader__circle">
+            <div class="flt-loader__inner-circle"></div>
+        </div>
+        <slot></slot>
+    </div>
+</template>

package/frontend/components/flt/loader/loader.js

@@ -0,0 +1,4 @@
+import { LightningDomElement } from 'fleetcor-lwc'
+import './loader.scss'
+
+export default class Loader extends LightningDomElement {}

package/frontend/components/flt/loader/loader.scss

@@ -0,0 +1,41 @@
+.flt-loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    gap: var(--flt-loader-gap, 16px);
+    background-color: var(--flt-loader-background, #ffffff);
+    font-size: var(--flt-loader-message-font-size, 16px);
+    color: var(--flt-loader-message-color, #80828a);
+
+    &__circle {
+        width: var(--flt-loader-spinner-circle, 80px);
+        height: var(--flt-loader-spinner-circle, 80px);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 50%;
+        background: linear-gradient(
+            0deg,
+            var(--flt-loader-spinner-fill-first-part, #ffffff) 50%,
+            var(--flt-loader-spinner-fill, #85a2b6) 100%
+        );
+        animation: rotate 1s linear infinite;
+    }
+
+    &__inner-circle {
+        width: var(--flt-loader-spinner-inner-circle-percent, 88%);
+        height: var(--flt-loader-spinner-inner-circle-percent, 88%);
+        background-color: var(--flt-loader-spinner-bgc-inner-circle, #ffffff);
+        border-radius: 50%;
+    }
+}
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

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

@@ -29,4 +29,26 @@ describe('flt-modal', () => {
             expect(removedModalElement).toBeFalsy()
         }, 1000)
     })
+
+    it('deactiveGlass test', () => {
+        const progressStep = createElement('flt-progress-step', { is: ProgressStep })
+        progressStep.total = 9
+        progressStep.current = 2
+        progressStep.title = 'Good job'
+        ModalViewer.showModalWithComponent(progressStep, { deactiveGlass: true })
+
+        const modalElement = document.body.querySelector('flt-modal')
+        expect(modalElement.firstChild.classList).toContain('flt-modal')
+        const progressStepElemet = modalElement.querySelector('flt-progress-step')
+        expect(progressStepElemet.total).toBe(9)
+        expect(progressStepElemet.current).toBe(2)
+        expect(progressStepElemet.title).toBe('Good job')
+
+        const glassEl = modalElement.querySelector('.flt-modal__glass')
+        glassEl.click()
+        setTimeout(() => {
+            const removedModalElement = document.body.querySelector('flt-modal')
+            expect(removedModalElement).toBeTruthy()
+        }, 1000)
+    })
 })

package/frontend/components/flt/modal/modal.js

@@ -1,8 +1,13 @@
 import { BaseElement, ModalViewer } from 'fleetcor-lwc'
+import { api } from 'lwc'
 import './modal.scss'
 
 export default class Modal extends BaseElement {
+    @api deactiveGlass
+
     handleCloseButton() {
-        ModalViewer.hideModals()
+        if (!this.deactiveGlass) {
+            ModalViewer.hideModals()
+        }
     }
 }

package/frontend/components/flt/modal/modal.scss

@@ -8,6 +8,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    overflow-y: auto;
 
     &__glass {
         position: absolute;

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

@@ -16,12 +16,12 @@ describe('flt-progress-step', () => {
         progressStep.title = 'Good job'
         document.body.appendChild(progressStep)
 
-        expect(progressStep.firstChild.classList).toContain('progress-step')
+        expect(progressStep.firstChild.classList).toContain('flt-progress-step')
 
-        const position = progressStep.firstChild.querySelector('.progress-step__number-propotion')
+        const position = progressStep.firstChild.querySelector('.flt-progress-step__number-propotion')
         expect(position.textContent).toBe('2/9')
 
-        const title = progressStep.firstChild.querySelector('.progress-step__current-title')
+        const title = progressStep.firstChild.querySelector('.flt-progress-step__current-title')
         expect(title.textContent).toBe('Good job')
     })
 
@@ -32,12 +32,12 @@ describe('flt-progress-step', () => {
         progressStep.title = 'Good job'
         document.body.appendChild(progressStep)
 
-        expect(progressStep.firstChild.classList).toContain('progress-step')
+        expect(progressStep.firstChild.classList).toContain('flt-progress-step')
 
-        const position = progressStep.firstChild.querySelector('.progress-step__number-propotion')
+        const position = progressStep.firstChild.querySelector('.flt-progress-step__number-propotion')
         expect(position.textContent).toBe('8/9')
 
-        const title = progressStep.firstChild.querySelector('.progress-step__current-title')
+        const title = progressStep.firstChild.querySelector('.flt-progress-step__current-title')
         expect(title.textContent).toBe('Good job')
     })
 })

package/frontend/core/interface/ModalViewer.js

@@ -8,8 +8,9 @@ import Modal from 'flt/modal'
  * @description This class is used to show and hide modal view
  */
 export default class ModalViewer {
-    static showModalWithComponent(cmp, options = { duration: 300 }) {
+    static showModalWithComponent(cmp, options = { duration: 300, deactiveGlass: false }) {
         const appEl = createElement('flt-modal', { is: Modal })
+        appEl.deactiveGlass = options?.deactiveGlass
         document.body.appendChild(appEl)
         appEl.querySelector('.flt-modal__container').appendChild(cmp)
         Animation.fadeIn({

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.5.1",
+    "version": "3.6.0",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",