fleetcor-lwc 3.19.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
@@ -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,14 @@ 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`

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

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.19.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",