fleetcor-lwc 3.5.0 → 3.5.2

package/README.md

@@ -246,13 +246,19 @@ Add / update `lwc.config.json` file in your project
 ### 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 +414,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 +428,7 @@ btn.onclick = () => {
   ModalViewer.hideModals();
 };
 
-ModalViewer.showModalWithComponent(btn);
+ModalViewer.showModalWithComponent(btn, { duration: 700, deactiveGlass: true });
 ```
 
 ## Override styles
@@ -509,6 +515,14 @@ You can override them as you wish by global css variables as priority.
 
 ## Release Notes:
 
+- v.3.5.2
+
+  - Update modal component with option `deactiveGlass`
+
+- v.3.5.1
+
+  - Bug fix with progress component
+
 - v.3.5.0
 
   - Added new component `flt-card`

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/components/flt/progressStep/progressStep.html

@@ -1,7 +1,7 @@
 <template lwc:render-mode="light">
-    <div class="progress-step">
-        <div class="progress-step__number-wrapp">
-            <svg class="progress-step__circle" width="36px" height="36px" viewBox="0 0 36 36">
+    <div class="flt-progress-step">
+        <div class="flt-progress-step__number-wrapp">
+            <svg class="flt-progress-step__circle" width="36px" height="36px" viewBox="0 0 36 36">
                 <circle cx="18" cy="18" r="16" fill="transparent" stroke-width="4" />
                 <path
                     d={forFirstPathD}
@@ -15,8 +15,8 @@
                     stroke-linecap="round"
                     fill="transparent"></path>
             </svg>
-            <div class="progress-step__number-propotion">{current}/{total}</div>
+            <div class="flt-progress-step__number-propotion">{current}/{total}</div>
         </div>
-        <div class="progress-step__current-title">{title}</div>
+        <div class="flt-progress-step__current-title">{title}</div>
     </div>
 </template>

package/frontend/components/flt/progressStep/progressStep.scss

@@ -8,7 +8,7 @@ $FLT_STEP_POSITION_NUMBER_COLOR: var(--flt-step-position-number-color, #111827);
 $FLT_STEP_POSITION_CIRCLE_COLOR: var(--flt-step-position-circle-color, #0a7db8);
 $FLT_STEP_POSITION_CIRCLE_BACKGROUND: var(--flt-step-position-circle-background, #bbe6fb);
 
-.progress-step {
+.flt-progress-step {
     position: relative;
     display: flex;
     gap: 16px;
@@ -41,9 +41,8 @@ $FLT_STEP_POSITION_CIRCLE_BACKGROUND: var(--flt-step-position-circle-background,
 
     &__number-propotion {
         font-size: 12px;
-        line-height: 16;
+        line-height: 16px;
         font-weight: $FLT_STEP_POSITION_NUMBER_PROPOTION_FONT_WEIGHT;
-        letter-spacing: 1px;
         color: $FLT_STEP_POSITION_NUMBER_COLOR;
     }
 

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.0",
+    "version": "3.5.2",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",