fleetcor-lwc 3.18.0 → 3.20.0

package/README.md

@@ -220,6 +220,82 @@ Add / update `lwc.config.json` file in your project
 
 ---
 
+### Btn
+
+```html
+<flt-btn icon-left="arrow-next" icon-right="arrow-back" disabled label="Next">
+  <!-- Any html element -->
+</flt-btn>
+```
+
+<details>
+<summary>Details</summary>
+
+#### Btn variables
+
+| @api variables | type   | values            | required | description                     |
+| -------------- | ------ | ----------------- | -------- | ------------------------------- |
+| icon-left      | string | `arrow-next, ...` | -        | any value from `Icon` component |
+| icon-right     | string | `arrow-back, ...` | -        | any value from `Icon` component |
+| label          | string |                   | -        |                                 |
+| disabled       | bool   |                   | -        |                                 |
+
+#### Btn slot
+
+| slot      | description                                    |
+| --------- | ---------------------------------------------- |
+| default   | any html element can be there                  |
+| iconLeft  | any html element can override left icon place  |
+| iconRight | any html element can override right icon place |
+
+#### Btn Css
+
+```css
+/* this is aquamarine variables */
+
+:root {
+  /* btn */
+  --flt-btn-fw: 700;
+  --flt-btn-border-radius: 32px;
+  --flt-btn-border: 1px solid #3782c8;
+  --flt-btn-padding: 0 24px;
+  --flt-btn-gap: 16px;
+  --flt-btn-color: #f9fafb;
+  --flt-btn-bg-color: #3782c8;
+  --flt-btn-box-shadow: none;
+  --flt-btn-transition: all 0.3s;
+  --flt-btn-height: 52px;
+  --flt-btn-font-size: 14px;
+  --flt-btn-text-transform: initial;
+  /* btn hover */
+  --flt-btn-hover-color: #f9fafb;
+  --flt-btn-hover-bg-color: #3782c8;
+  --flt-btn-hover-border: 1px solid #3782c8;
+  --flt-btn-hover-box-shadow: 0 4px 6px -1px rgba(16, 24, 40, 0.1), 0 2px
+      4px -2px rgba(16, 24, 40, 0.1);
+  /* btn disabled */
+  --flt-btn-disabled-color: #6b7280;
+  --flt-btn-disabled-bg-color: #f3f4f6;
+  --flt-btn-disabled-border: 1px solid #f3f4f6;
+  --flt-btndisabled-border-box-shadow: none;
+  /* btn disabled hover */
+  --flt-btn-disabled-hover-color: #6b7280;
+  --flt-btn-disabled-hover-bg-color: #f3f4f6;
+  --flt-btn-disabled-hover-border: 1px solid #f3f4f6;
+  --flt-btn-disabled-hover-box-shadow: none;
+  /* btn label */
+  --flt-btn-label-padding: 0;
+  --flt-btn-label-display: flex;
+  --flt-btn-label-align-items: center;
+  --flt-btn-label-justify-content: center;
+  --flt-btn-label-gap: 16px;
+}
+```
+
+</details>
+
+---
+
 ### Icon
 
 ```html
@@ -231,9 +307,9 @@ Add / update `lwc.config.json` file in your project
 
 #### Icon variables
 
-| @api variables | type   | values                                                                                                                                                                                                                                                                                                                                                                                                                                     | required | description |
-| -------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |
-| icon           | string | `arrow-left, ev, carwash, car, van, unleaded, fuel, driver, vehicle, both, shared-card, ev-and-fuel, oil, key, blocked, multiple-users,arrow-right, diesel, hydrogen, signature, plus, plus-small, document, close, hgv, eye, sign, check, discount, pin-drop, credit-card, receipt, gear-wheel, app-shortcut, drug-indicator, sell, parking-sign, headset-mic, gas-station, directions-car, local-shipping, public, place, info, warning` | -        |             |
+| @api variables | type   | values                                                                                                                                                                                                                                                                                                                                                                                                                                                             | required | description |
+| -------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |
+| icon           | string | `arrow-left, ev, carwash, car, van, unleaded, fuel, driver, vehicle, both, shared-card, ev-and-fuel, oil, key, blocked, multiple-users,arrow-right, diesel, hydrogen, signature, plus, plus-small, document, close, hgv, eye, sign, check, discount, pin-drop, credit-card, receipt, gear-wheel, app-shortcut, drug-indicator, sell, parking-sign, headset-mic, gas-station, directions-car, local-shipping, public, place, info, warning, arrow-back, arrow-next` | -        |             |
 
 </details>
 
@@ -385,6 +461,34 @@ Add / update `lwc.config.json` file in your project
 | title   | any html element can be there instead of title   |
 | content | any html element can be there instead of content |
 
+#### Alert Info Css
+
+```css
+/* this is aquamarine variables */
+
+:root {
+  /* alert info */
+  --flt-alert-info-padding: 16px;
+  --flt-alert-info-border-radius: 8px;
+  --flt-alert-info-border: initial;
+  --flt-alert-info-gap: 16px;
+  --flt-alert-info-background: #d6e7fc;
+
+  /* alert info title */
+  --flt-alert-info-title-font-size: 16px;
+  --flt-alert-info-title-line-height: 24px;
+  --flt-alert-info-title-margin-bottom: 8px;
+  --flt-alert-info-title-font-weight: 700;
+  --flt-alert-info-title-color: #1a1a1a;
+
+  /* alert info content */
+  --flt-alert-info-content-font-size: 12px;
+  --flt-alert-info-content-line-height: 16px;
+  --flt-alert-info-content-font-weight: 400;
+  --flt-alert-info-content-color: #1a1a1a;
+}
+```
+
 </details>
 
 ---
@@ -786,6 +890,7 @@ You can override them as you wish by global css variables as priority.
   --flt-tooltip-bg-color: #374151;
   --flt-tooltip-color: #f9fafb;
   --flt-icon-color: #111827;
+  --flt-icon-size: 24px;
   --flt-button-primary-bg-color: #3782c8;
   --flt-button-primary-color: #f9fafb;
   --flt-button-primary-disabled-color: #6b7280;
@@ -901,22 +1006,6 @@ You can override them as you wish by global css variables as priority.
   --flt-input-phone-border-color-error: #ed123d;
   --flt-input-with-picklist-border-color-success: #59eb9c;
   --flt-input-with-picklist-border-color-error: #ed123d;
-  --flt-alert-info-padding: 16px;
-  --flt-alert-info-border-radius: 8px;
-  --flt-alert-info-border: initial;
-  --flt-alert-info-background: #d6e7fc;
-  --flt-alert-info-warning-background: #f8d8d8;
-  --flt-alert-info-title-font-size: 16px;
-  --flt-alert-info-title-line-height: 24px;
-  --flt-alert-info-title-margin-bottom: 8px;
-  --flt-alert-info-title-font-weight: 700;
-  --flt-alert-info-title-color: #1a1a1a;
-  --flt-alert-info-content-font-size: 12px;
-  --flt-alert-info-content-line-height: 16px;
-  --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;
@@ -952,6 +1041,20 @@ You can override them as you wish by global css variables as priority.
 <details>
 <summary>Click to expand/collapse</summary>
 
+v.3.20.0
+
+- Added Btn component
+- Updated `flt-icon`
+- Updated `alert-info`
+
+---
+
+v.3.19.0
+
+- Added 2 new icons `arrow-back` and `arrow-next`
+
+---
+
 v.3.18.0
 
 - Bug fix `flt-picklist` component
@@ -966,7 +1069,7 @@ v.3.17.0
 
 v.3.16.0
 
-- Update `flt-input-text` -  it's become more powerfull with type number 
+- Update `flt-input-text` - it's become more powerfull with type number
 
 ---
 

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

@@ -16,13 +16,13 @@ describe('flt-alert-info', () => {
 
     it('flt alert info base', () => {
         const alertInfoEl = createElement('flt-alert-info', { is: AlertInfo })
-        document.body.appendChild(alertInfoEl)
-        expect(alertInfoEl.firstChild.classList).toContain('flt-alert-info')
         alertInfoEl.title = 'Test'
         alertInfoEl.content = 'Hello world!'
-        alertInfoEl.icon = 'warning'
-        return Promise.resolve().then(async () => {
-            expect(alertInfoEl.firstChild.classList).toContain('flt-alert-info_warning')
-        })
+        document.body.appendChild(alertInfoEl)
+
+        const alertInfo = alertInfoEl.firstChild
+        expect(alertInfo.classList).toContain('flt-alert-info')
+        expect(alertInfo.textContent).toContain('Test')
+        expect(alertInfo.textContent).toContain('Hello world!')
     })
 })

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

@@ -1,5 +1,5 @@
 <template lwc:render-mode="light">
-    <div class={alertClass}>
+    <div class="flt-alert-info">
         <div class="flt-alert-info__icon">
             <slot name="icon">
                 <flt-icon icon={icon}></flt-icon>

package/frontend/components/flt/alertInfo/alertInfo.js

@@ -11,11 +11,4 @@ export default class AlertInfo extends BaseElement {
     @api title
     @api content
     @api icon = 'info'
-
-    get alertClass() {
-        return this.generateClassNameList({
-            'flt-alert-info': true,
-            'flt-alert-info_warning': this.icon === 'warning'
-        })
-    }
 }

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

@@ -6,10 +6,6 @@
     gap: var(--flt-alert-info-gap, 16px);
     background: var(--flt-alert-info-background, #d6e7fc);
 
-    &_warning {
-        background: var(--flt-alert-info-warning-background, #f8d8d8);
-    }
-
     &__title {
         font-size: var(--flt-alert-info-title-font-size, 16px);
         line-height: var(--flt-alert-info-title-line-height, 24px);
@@ -27,12 +23,7 @@
 
     &__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);
+        display: inline-flex;
+        --flt-icon-size: 20px;
     }
 }

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

@@ -0,0 +1,33 @@
+import { createElement } from 'lwc'
+import Btn from 'flt/btn'
+
+describe('flt-btn', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('Btn base', () => {
+        const button = createElement('flt-btn', { is: Btn })
+        button.label = 'Default'
+        document.body.appendChild(button)
+        const buttonEl = button.firstChild
+
+        expect(buttonEl.classList).toContain('flt-btn')
+        expect(buttonEl.hasAttribute('disabled')).toBeFalsy()
+        expect(buttonEl.textContent).toContain('Default')
+    })
+
+    it('Btn disabled', () => {
+        const button = createElement('flt-btn', { is: Btn })
+        button.label = 'Default'
+        button.disabled = true
+        document.body.appendChild(button)
+        const buttonEl = button.firstChild
+
+        expect(buttonEl.classList).toContain('flt-btn')
+        expect(buttonEl.hasAttribute('disabled')).toBeTruthy()
+        expect(buttonEl.textContent).toContain('Default')
+    })
+})

package/frontend/components/flt/btn/btn.html

@@ -0,0 +1,17 @@
+<template lwc:render-mode="light">
+    <button class="flt-btn" disabled={disabled}>
+        <slot name="iconLeft">
+            <flt-icon
+                lwc:if={iconLeft}
+                class="flt-btn__icon flt-btn__icon_left"
+                icon={iconLeft}></flt-icon>
+        </slot>
+        <span class="flt-btn__label">{label}<slot></slot></span>
+        <slot name="iconRight">
+            <flt-icon
+                lwc:if={iconRight}
+                class="flt-btn__icon flt-btn__icon_right"
+                icon={iconRight}></flt-icon>
+        </slot>
+    </button>
+</template>

package/frontend/components/flt/btn/btn.js

@@ -0,0 +1,15 @@
+import './btn.scss'
+import { api } from 'lwc'
+import { BaseElement } from 'fleetcor-lwc'
+
+/**
+ * @class Btn
+ * @extends BaseElement
+ * @description Flt btn component
+ */
+export default class Btn extends BaseElement {
+    @api label
+    @api disabled
+    @api iconLeft
+    @api iconRight
+}

package/frontend/components/flt/btn/btn.scss

@@ -0,0 +1,85 @@
+flt-btn {
+    display: inline-flex;
+}
+
+.flt-btn {
+    cursor: pointer;
+    text-decoration: none;
+    list-style: none outside none;
+    background: none repeat scroll 0 0 transparent;
+    border-spacing: 0;
+    text-indent: 0;
+    margin: 0;
+    display: flex;
+    align-items: center;
+    font-family: inherit;
+    box-sizing: border-box;
+    font-weight: var(--flt-btn-fw, 700);
+    border-radius: var(--flt-btn-border-radius, 32px);
+    border: var(--flt-btn-border, 1px solid #3782c8);
+    padding: var(--flt-btn-padding, 0 24px);
+    gap: var(--flt-btn-gap, 16px);
+    color: var(--flt-btn-color, #f9fafb);
+    background-color: var(--flt-btn-bg-color, #3782c8);
+    box-shadow: var(--flt-btn-box-shadow, none);
+    transition: var(--flt-btn-transition, all 0.3s);
+    height: var(--flt-btn-height, 52px);
+    font-size: var(--flt-btn-font-size, 14px);
+    text-transform: var(--flt-btn-text-transform, initial);
+
+    --flt-icon-color: var(--flt-btn-color, #f9fafb);
+
+    &:hover {
+        color: var(--flt-btn-hover-color, #f9fafb);
+        background-color: var(--flt-btn-hover-bg-color, #3782c8);
+        border: var(--flt-btn-hover-border, 1px solid #3782c8);
+        box-shadow: var(
+            --flt-btn-hover-box-shadow,
+            0 4px 6px -1px rgba(16, 24, 40, 0.1),
+            0 2px 4px -2px rgba(16, 24, 40, 0.1)
+        );
+
+        --flt-icon-color: var(--flt-btn-hover-color, #f9fafb);
+    }
+
+    &[disabled] {
+        cursor: not-allowed;
+        color: var(--flt-btn-disabled-color, #6b7280);
+        background-color: var(--flt-btn-disabled-bg-color, #f3f4f6);
+        border: var(--flt-btn-disabled-border, 1px solid #f3f4f6);
+        box-shadow: var(--flt-btn-disabled-border-box-shadow, none);
+
+        --flt-icon-color: var(--flt-btn-disabled-color, #6b7280);
+    }
+
+    &[disabled]:hover {
+        color: var(--flt-btn-disabled-hover-color, #6b7280);
+        background-color: var(--flt-btn-disabled-hover-bg-color, #f3f4f6);
+        border: var(--flt-btn-disabled-hover-border, 1px solid #f3f4f6);
+        box-shadow: var(--flt-btn-disabled-hover-box-shadow, none);
+
+        --flt-icon-color: var(--flt-btn-disabled-hover-color, #6b7280);
+    }
+
+    &::-moz-focus-inner {
+        border: 0;
+        padding: 0;
+    }
+
+    &__icon {
+        display: flex;
+        flex-shrink: 0;
+    }
+
+    &__label {
+        padding: var(--flt-btn-label-padding, 0);
+        display: var(--flt-btn-label-display, flex);
+        align-items: var(--flt-btn-label-align-items, center);
+        justify-content: var(--flt-btn-label-justify-content, center);
+        gap: var(--flt-btn-label-gap, 16px);
+
+        &:empty {
+            display: none;
+        }
+    }
+}

package/frontend/components/flt/icon/icon.js

@@ -54,6 +54,8 @@ import TMPL_PLACE from './icons/tmpl-place.html'
 import TMPL_WARNING from './icons/tmpl-warning.html'
 import TMPL_INFO from './icons/tmpl-info.html'
 import TMPL_QUESTION from './icons/tmpl-question.html'
+import TMPL_ARROW_BACK from './icons/tmpl-arrow-back.html'
+import TMPL_ARROW_NEXT from './icons/tmpl-arrow-next.html'
 
 /**
  * @class Icon
@@ -76,6 +78,8 @@ export default class Icon extends LightningDomElement {
 
 const ICONS = {
     search: TMPL_SEARCH,
+    'arrow-back': TMPL_ARROW_BACK,
+    'arrow-next': TMPL_ARROW_NEXT,
     plus: TMPL_PLUS,
     'plus-small': TMPL_SMALL_PLUS,
     document: TMPL_DOCUMENT,
@@ -123,7 +127,7 @@ const ICONS = {
     place: TMPL_PLACE,
     warning: TMPL_WARNING,
     info: TMPL_INFO,
-    question: TMPL_QUESTION,
+    question: TMPL_QUESTION
 }
 
 export const ICONS_LIST = Object.keys(ICONS)

package/frontend/components/flt/icon/icon.scss

@@ -1,6 +1,6 @@
 .flt-icon {
-    width: 24px;
-    height: 24px;
+    width: var(--flt-icon-size, 24px);
+    height: var(--flt-icon-size, 24px);
     display: inline-flex;
 
     &__prop-stroke {

package/frontend/components/flt/icon/icons/tmpl-arrow-back.html

@@ -0,0 +1,7 @@
+<template lwc:render-mode="light">
+    <svg class="flt-icon flt-icon__arrow-back" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M15.6599 9.17148H6.35156L10.4182 5.10482C10.7432 4.77982 10.7432 4.24648 10.4182 3.92148C10.0932 3.59648 9.56823 3.59648 9.24323 3.92148L3.75156 9.41315C3.42656 9.73815 3.42656 10.2632 3.75156 10.5882L9.24323 16.0798C9.56823 16.4048 10.0932 16.4048 10.4182 16.0798C10.7432 15.7548 10.7432 15.2298 10.4182 14.9048L6.35156 10.8382H15.6599C16.1182 10.8382 16.4932 10.4632 16.4932 10.0048C16.4932 9.54648 16.1182 9.17148 15.6599 9.17148Z"
+            class="flt-icon__prop-fill" />
+    </svg>
+</template>

package/frontend/components/flt/icon/icons/tmpl-arrow-next.html

@@ -0,0 +1,13 @@
+<template lwc:render-mode="light">
+    <svg
+        class="flt-icon flt-icon__arrow-next"
+        width="20"
+        height="20"
+        viewBox="0 0 20 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M4.34115 10.8342H13.6495L9.58281 14.9009C9.25781 15.2259 9.25781 15.7592 9.58281 16.0842C9.90781 16.4092 10.4328 16.4092 10.7578 16.0842L16.2495 10.5926C16.5745 10.2676 16.5745 9.74258 16.2495 9.41758L10.7661 3.91758C10.4411 3.59258 9.91615 3.59258 9.59115 3.91758C9.26615 4.24258 9.26615 4.76758 9.59115 5.09258L13.6495 9.16758H4.34115C3.88281 9.16758 3.50781 9.54258 3.50781 10.0009C3.50781 10.4592 3.88281 10.8342 4.34115 10.8342Z"
+            class="flt-icon__prop-fill" />
+    </svg>
+</template>

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

@@ -3,11 +3,6 @@
         <div class="flt-loader__circle">
             <div class="flt-loader__inner-circle"></div>
         </div>
-        <template lwc:if={tempMessage}>
-            <p>{tempMessage}</p>
-        </template>
-        <template lwc:else>
-            <slot></slot>
-        </template>
+        <slot></slot>
     </div>
 </template>

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.18.0",
+    "version": "3.20.0",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -27,6 +27,7 @@
         "expose": [
             "flt/alertInfo",
             "flt/button",
+            "flt/btn",
             "flt/checkbox",
             "flt/card",
             "flt/loader",