fleetcor-lwc 3.0.0 → 3.3.0

package/README.md

@@ -191,7 +191,7 @@ Add / update `lwc.config.json` file in your project
 
 | slot      | description                                    |
 | --------- | ---------------------------------------------- |
-| defalt    | any html element can be there                  |
+| 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 |
 
@@ -227,9 +227,25 @@ Add / update `lwc.config.json` file in your project
 
 #### Tooltip slot
 
-| slot   | description                   |
-| ------ | ----------------------------- |
-| defalt | any html element can be there |
+| slot    | description                   |
+| ------- | ----------------------------- |
+| default | any html element can be there |
+
+### Modal
+
+```html
+<flt-modal>
+  <flt-icon icon="arrow-left"></flt-icon>
+</flt-modal>
+
+...
+```
+
+#### Modal slot
+
+| slot    | description                   |
+| ------- | ----------------------------- |
+| default | any html element can be there |
 
 ### Progress Step
 
@@ -289,6 +305,113 @@ Add / update `lwc.config.json` file in your project
 | ------ | ------------ | ------ | ------------------------------------- |
 | change | event.detail | object | Return full data of component's state |
 
+### Input Text
+
+```html
+<flt-input-text
+  name="FirstName"
+  label="First Name"
+  value="Jos"
+  error-message="Error! Required field"
+  required
+  reg-exp="^[a-zA-Z]*$"
+  placeholder="First Name"
+  max-length="16"
+  type="text"
+  placeholde-visible
+></flt-input-text>
+
+<flt-input-text
+  name="Currency"
+  label="Currency"
+  value="100"
+  error-message="Error! Required field"
+  required
+  prefix="$"
+  reg-exp="^[0-9]$"
+  placeholder="Currency"
+  max-length="7"
+  min-value="100"
+  max-value="1000000"
+  type="text"
+  placeholde-visible
+></flt-input-text>
+...
+```
+
+#### Input Text variables
+
+| @api variables     | type   | values       | required | description |
+| ------------------ | ------ | ------------ | -------- | ----------- |
+| name               | string |              | +        |             |
+| label              | string |              | -        |             |
+| value              | string |              | -        |             |
+| error-message      | string |              | -        |             |
+| required           | bool   |              | -        |             |
+| disabled           | bool   |              | -        |             |
+| placeholde-visible | bool   |              | -        |             |
+| prefix             | string |              | -        |             |
+| reg-exp            | string |              | -        |             |
+| placeholder        | string |              | -        |             |
+| max-length         | int    |              | -        |             |
+| min-value          | int    |              | -        |             |
+| max-value          | int    |              | -        |             |
+| type               | string | `text`,`tel` | -        |             |
+
+#### Input Text methods
+
+| @api     | params      | return type | description                                                                                                             |
+| -------- | ----------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- |
+| validate |             | void        | Check component validation and show error message to user                                                               |
+| isValid  |             | bool        | Return `true` or `false`                                                                                                |
+| getData  | silent:bool | object      | Return full data of component's state. If `silent` true - return value will be without any errors displaying for client |
+
+#### Input Text events
+
+| name          | handle       | return | description                           |
+| ------------- | ------------ | ------ | ------------------------------------- |
+| focus_happend | event        | object | Return common Event object            |
+| blur_happend  | event        | object | Return common Event object            |
+| change        | event.detail | object | Return full data of component's state |
+
+### Input Email
+This component fully extends from `Input Text`
+
+```html
+<flt-input-email
+  name="Email"
+  label="Email"
+  value="example@example.com"
+  error-message="Error! Required field"
+  required
+  placeholder="Email"
+  type="email"
+  placeholde-visible
+></flt-input-email>
+...
+```
+
+## Interfaces
+
+#### ModalViewer
+
+- `ModalViewer.showModalWithComponent(element)` - to show modal window with element inside
+- `ModalViewer.hideModals()` - remove all modals
+
+```js
+import { ModalViewer } from "fleetcor-lwc";
+import { createElement } from "lwc";
+import Button from "flt/button";
+
+const btn = createElement("flt-button", { is: Button });
+btn.label = "Close";
+btn.onclick = () => {
+  ModalViewer.hideModals();
+};
+
+ModalViewer.showModalWithComponent(btn);
+```
+
 ## Override styles
 
 You can override them as you wish by global css variables as priority.
@@ -328,6 +451,7 @@ You can override them as you wish by global css variables as priority.
   --flt-button-label-padding: 0;
   --flt-button-border-radius: 32px;
   --flt-button-padding: 0 24px;
+  --flt-button-gap: 16px;
   --flt-checkbox-border-color: #6b7280;
   --flt-checkbox-bg-color: #ffffff;
   --flt-checkbox-agree-color: #59eb9c;
@@ -353,11 +477,29 @@ You can override them as you wish by global css variables as priority.
   --flt-radio-group-circle-selected-color: #59eb9c;
   --flt-radio-group-circle-disabled-selected-color: #d1d5db;
   --flt-radio-group-circle-disabled-selected-bg-color: #ffffff;
+  --flt-modal-glass-bgc: rgba(0, 0, 0, 0.4);
+  --flt-input-text-color: #111827;
+  --flt-input-text-font-weight: 400;
+  --flt-input-border-color-active: #6b7280;
+  --flt-input-border-color-success: #59eb9c;
+  --flt-input-border-radius: 12px;
 }
 ```
 
 ## Release Notes:
 
+- v.3.3.0
+  - Added components `flt-input-text`, `flt-input-email`, `flt-modal`
+  - For modal added new interface `ModalViewer` for dynamically creation modals
+  - Update button styles `gap` as variable
+
+---
+
+- v.3.0.1
+  - Bug fix with firstChild for tooltip component
+
+---
+
 - v.3.0.0
   - Added `flt-progress-step` and `flt-radio-group-chips` components
   - Update .css overriding of styles

package/frontend/components/flt/button/button.scss

@@ -36,6 +36,7 @@ $FLT_BUTTON_LABEL_PADDING: var(--flt-button-label-padding, 0);
 $FLT_BUTTON_BORDER_RADIUS: var(--flt-button-border-radius, 32px);
 
 $FLT_BUTTON_PADDING: var(--flt-button-padding, 0 24px);
+$FLT_BUTTON_GAP: var(--flt-button-gap, 16px);
 
 button {
     display: inline-block;
@@ -90,7 +91,7 @@ button {
     border-radius: $FLT_BUTTON_BORDER_RADIUS;
     box-sizing: border-box;
     padding: $FLT_BUTTON_PADDING;
-    gap: 16px;
+    gap: $FLT_BUTTON_GAP;
 
     &_primary[disabled] {
         cursor: not-allowed;

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

@@ -0,0 +1,39 @@
+import { createElement } from 'lwc'
+import InputEmail from 'flt/inputEmail'
+
+describe('flt-input-email', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('flt-input-email general', async () => {
+        const inputEmailElement = createElement('flt-input-email', { is: InputEmail })
+        inputEmailElement.name = 'Email'
+        inputEmailElement.label = 'Email'
+        inputEmailElement.errorMessage = 'Error message of email'
+        document.body.appendChild(inputEmailElement)
+
+        await expect(inputEmailElement.firstChild.classList).toContain('flt-input-text')
+
+        inputEmailElement.value = 'example'
+        inputEmailElement.validate()
+        inputEmailElement.dispatchEvent(new CustomEvent('change'))
+
+        return Promise.resolve().then(async () => {
+            await expect(inputEmailElement.firstChild.classList).toContain('flt-input-text_error')
+            const data = inputEmailElement.getData()
+            expect(data.value).toBe('example')
+            expect(inputEmailElement.isValid()).toBeFalsy()
+            inputEmailElement.value = 'example@example.com'
+            inputEmailElement.dispatchEvent(new CustomEvent('change'))
+
+            return Promise.resolve().then(() => {
+                const data = inputEmailElement.getData()
+                expect(data.value).toBe('example@example.com')
+                expect(inputEmailElement.isValid()).toBeTruthy()
+            })
+        })
+    })
+})

package/frontend/components/flt/inputEmail/inputEmail.js

@@ -0,0 +1,8 @@
+import InputText from 'flt/inputText'
+import { api } from 'lwc'
+
+export default class InputEmail extends InputText {
+    required = true
+    regExp = '^\\w+([.-]\\w+)*@\\w+([.-]\\w+)*(\\.\\w{2,7})+$'
+    @api type = 'email'
+}

package/frontend/components/flt/inputPhone/__test__/radioItem.test.js

@@ -0,0 +1,56 @@
+import { createElement } from 'lwc'
+
+import RadioItem from 'flt/radioItem'
+
+describe('flt-radio-item', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('Generate active radio item', async () => {
+        const radioItemDefault = createElement('flt-radio-item', { is: RadioItem })
+        radioItemDefault.option = {
+            label: 'Label 1',
+            value: 'value 1',
+            selected: true,
+            disabled: false
+        }
+        document.body.appendChild(radioItemDefault)
+
+        await expect(radioItemDefault.firstChild.classList).toContain('flt-radio-item_selected')
+    })
+
+    it('Generate default radio item', async () => {
+        const radioItemDefault = createElement('flt-radio-item', { is: RadioItem })
+        radioItemDefault.option = {
+            label: 'Label 1',
+            value: 'value 1',
+            selected: false,
+            disabled: false
+        }
+        document.body.appendChild(radioItemDefault)
+
+        await expect(radioItemDefault.firstChild.classList).toContain('flt-radio-item')
+        await expect(radioItemDefault.firstChild.classList).toContain('flt-radio-item_size_s')
+        await expect(radioItemDefault.firstChild.classList).not.toContain('flt-radio-item_disabled')
+        await expect(radioItemDefault.firstChild.classList).not.toContain('flt-radio-item_selected')
+
+        await radioItemDefault.firstChild.click()
+    })
+
+    it('Generate disabled radio item', async () => {
+        const radioItemDefault = createElement('flt-radio-item', { is: RadioItem })
+        radioItemDefault.option = {
+            label: 'Label 1',
+            value: 'value 1',
+            selected: false,
+            disabled: true
+        }
+
+        document.body.appendChild(radioItemDefault)
+
+        await expect(radioItemDefault.firstChild.classList).toContain('flt-radio-item_disabled')
+    })
+})

package/frontend/components/flt/inputPhone/arrow.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.2762 8.65164C6.6345 8.30713 7.20424 8.3183 7.54875 8.67659L12 13.4019L16.4513 8.67659C16.7958 8.3183 17.3655 8.30713 17.7238 8.65164C18.0821 8.99616 18.0933 9.5659 17.7487 9.92419L12.6488 15.3242C12.4791 15.5007 12.2448 15.6004 12 15.6004C11.7552 15.6004 11.5209 15.5007 11.3513 15.3242L6.25125 9.92419C5.90674 9.5659 5.91791 8.99616 6.2762 8.65164Z" fill="#111827"/>
+</svg>

package/frontend/components/flt/inputPhone/close-button.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.46967 5.46967C5.76256 5.17678 6.23744 5.17678 6.53033 5.46967L12 10.9393L17.4697 5.46967C17.7626 5.17678 18.2374 5.17678 18.5303 5.46967C18.8232 5.76256 18.8232 6.23744 18.5303 6.53033L13.0607 12L18.5303 17.4697C18.8232 17.7626 18.8232 18.2374 18.5303 18.5303C18.2374 18.8232 17.7626 18.8232 17.4697 18.5303L12 13.0607L6.53033 18.5303C6.23744 18.8232 5.76256 18.8232 5.46967 18.5303C5.17678 18.2374 5.17678 17.7626 5.46967 17.4697L10.9393 12L5.46967 6.53033C5.17678 6.23744 5.17678 5.76256 5.46967 5.46967Z" fill="black"/>
+</svg>

package/frontend/components/flt/inputPhone/inputPhone.html

@@ -0,0 +1,109 @@
+<template lwc:render-mode="light">
+    <div class={inputStyle} tabindex="0">
+        <div class="flt-input-phone__block">
+            <div class="flt-input-phone__flag-wrapper">
+                <div class="flt-input-phone__flag-block" onclick={handleFlagActivate}>
+                    <div class="flt-input-phone__flag-container">
+                        <div class="flt-input-phone__flag-selected-value">
+                            <img
+                                class="flt-input-phone__flag-selected-icon"
+                                src={selectedFlag}
+                                alt="Flag" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <label onclick={handleLabelClick} class="flt-input-phone__wrapp" for={name}>
+                <div class="flt-input-phone__placeholder">{placeholder}</div>
+                <div class="flt-input-phone__number">
+                    <span class="flt-input-phone__code">{selectedFlagOption.label}</span>
+                    <input
+                        id={name}
+                        onfocus={handleFocused}
+                        onblur={handleBlur}
+                        oninput={handleInput}
+                        class="flt-input-phone__input"
+                        maxlength={maxLength}
+                        type="tel"
+                        name={name} />
+                </div>
+            </label>
+        </div>
+
+        <template if:true={picklistInsideModalView}>
+            <div class={computedModalClass}>
+                <div class="flt-input-phone__modal-glass" onclick={handleFlagActivate}></div>
+                <div class="flt-input-phone__modal-container">
+                    <div class="flt-input-phone__modal-header">
+                        <span class="flt-input-phone__modal-header-title"
+                            >Select country code:</span
+                        >
+                        <a
+                            href="javascript:void(0);"
+                            onclick={handleFlagActivate}
+                            class="flt-input-phone__modal-close-button">
+                            <img
+                                src={closeButton}
+                                class="flt-input-phone__modal-close-button-icon"
+                                alt="close button" />
+                        </a>
+                    </div>
+                    <ul class="flt-input-phone__flag-list">
+                        <template for:each={flagOptions} for:item="item">
+                            <li
+                                if:true={item.selected}
+                                key={item.key}
+                                onclick={handleSelectFlag}
+                                data-value={item.value}
+                                class="flt-input-phone__flag-list-item flt-input-phone__flag-list-item_selected">
+                                <img
+                                    class="flt-input-phone__flag-icon"
+                                    src={item.icon}
+                                    alt={item.value} />
+                                <span class="flt-input-phone__flag-icon-label">{item.label}</span>
+                            </li>
+                            <li
+                                if:false={item.selected}
+                                key={item.key}
+                                onclick={handleSelectFlag}
+                                data-value={item.value}
+                                class="flt-input-phone__flag-list-item">
+                                <img
+                                    class="flt-input-phone__flag-icon"
+                                    src={item.icon}
+                                    alt={item.value} />
+                                <span class="flt-input-phone__flag-icon-label">{item.label}</span>
+                            </li>
+                        </template>
+                    </ul>
+                </div>
+            </div>
+        </template>
+        <template if:false={picklistInsideModalView}>
+            <ul class="flt-input-phone__flag-list">
+                <template for:each={flagOptions} for:item="item">
+                    <li
+                        if:true={item.selected}
+                        key={item.key}
+                        onclick={handleSelectFlag}
+                        data-value={item.value}
+                        class="flt-input-phone__flag-list-item flt-input-phone__flag-list-item_selected">
+                        <img class="flt-input-phone__flag-icon" src={item.icon} alt={item.value} />
+                        <span class="flt-input-phone__flag-icon-label">{item.label}</span>
+                    </li>
+                    <li
+                        if:false={item.selected}
+                        key={item.key}
+                        onclick={handleSelectFlag}
+                        data-value={item.value}
+                        class="flt-input-phone__flag-list-item">
+                        <img class="flt-input-phone__flag-icon" src={item.icon} alt={item.value} />
+                        <span class="flt-input-phone__flag-icon-label">{item.label}</span>
+                    </li>
+                </template>
+            </ul>
+        </template>
+
+        <div class="flt-input-phone__error">{errorMessage}</div>
+    </div>
+</template>