fleetcor-lwc 3.5.2 → 3.6.0

package/README.md

@@ -243,6 +243,21 @@ 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
@@ -503,18 +518,30 @@ 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`

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/package.json

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