fleetcor-lwc 3.6.2 → 3.7.0

package/README.md

@@ -338,6 +338,52 @@ Add / update `lwc.config.json` file in your project
 | ------ | ------------ | ------ | ------------------------------------- |
 | change | event.detail | object | Return full data of component's state |
 
+### Picklist Chips
+
+```html
+<flt-picklist
+  name="city"
+  required
+  show-dropdown-as-modal
+  placeholder="City"
+  error-message="Error! Empty field"
+  required
+  value="London"
+  options="[{label:'London', value:'London'}, {label:'Leon', value:'Leon'}]"
+>
+</flt-picklist>
+...
+```
+
+#### Picklist variables
+
+| @api variables      | type   | values   | required | description                                                                                   |
+| ------------------- | ------ | -------- | -------- | --------------------------------------------------------------------------------------------- |
+| name                | string |          | +        |                                                                                               |
+| options             | array  |          | +        | Array of available items with `label` and `value` as unique string                            |
+| size                | string | `medium` | -        | Size of buttons (button sizes)                                                                |
+| showDropdownAsModal | bool   |          | -        | Show modal with selected options                                                              |
+| modalDimentionStart | int    | 1280     | -        | If showDropdownAsModal is true, by default modal become visible window width less then 1280px |
+| value               | string |          | -        | Current value from options items value                                                        |
+| disabled            | bool   |          | -        |                                                                                               |
+| required            | bool   |          | -        |                                                                                               |
+| group               | string |          | -        |                                                                                               |
+| error-message       | string |          | -        |                                                                                               |
+
+#### Picklist 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 |
+
+#### Picklist events
+
+| name   | handle       | return | description                           |
+| ------ | ------------ | ------ | ------------------------------------- |
+| change | event.detail | object | Return full data of component's state |
+
 ### Input Text
 
 ```html
@@ -486,6 +532,7 @@ You can override them as you wish by global css variables as priority.
   --flt-button-border-radius: 32px;
   --flt-button-padding: 0 24px;
   --flt-button-gap: 16px;
+  --flt-button-fw: 700;
   --flt-checkbox-border-color: #6b7280;
   --flt-checkbox-bg-color: #ffffff;
   --flt-checkbox-agree-color: #59eb9c;
@@ -541,11 +588,43 @@ You can override them as you wish by global css variables as priority.
   --flt-radio-group-chips-label-mb: 4px;
   --flt-radio-group-chips-error-color: #ed123d;
   --flt-radio-group-chips-error-fz: 12px;
+  --flt-picklist-view-border-color-selected: #59eb9c;
+  --flt-picklist-placeholder-activate-fz: 12px;
+  --flt-picklist-placeholder-activate-lh: 16px;
+  --flt-picklist-bgc: #ffffff;
+  --flt-picklist-border: 1px solid #6b7280;
+  --flt-picklist-border-radius: 12px;
+  --flt-picklist-wrapper-height: 44px;
+  --flt-picklist-wrapper-padding: 0 16px;
+  --flt-picklist-error-color: #ed123d;
+  --flt-picklist-error-fz: 12px;
+  --flt-picklist-placeholder-color: #111827;
+  --flt-picklist-placeholder-fz: 16px;
+  --flt-picklist-placeholder-lh: 20px;
+  --flt-picklist-view-arrow-path-stroke: #4c4c4c;
+  --flt-picklist-dropdown-border: none;
+  --flt-picklist-dropdown-bgc: #ffffff;
+  --flt-picklist-option-padding: 12px 16px;
+  --flt-picklist-option-color: #4c4c4c;
+  --flt-picklist-dropdown-option-border-bottom-color: #eeeeee;
+  --flt-picklist-option-selected-color: #4c4c4c;
+  --flt-picklist-dropdown-option-bgc: #f2d400;
+  --flt-picklist-option-first-child-padding: 32px 16px 12px;
+  --flt-picklist-option-padding: 12px 16px;
+  --flt-picklist-dropdown-modal-header-bgc: #f3f4f6;
 }
 ```
 
 ## Release Notes:
 
+- v.3.7.0
+
+  - Added new component `flt-picklist`
+
+- v.3.6.3
+
+  - Updated `flt-button` componentm styles
+
 - v.3.6.2
 
   - Updated `flt-radio-group-chips` componentm styles

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

@@ -87,7 +87,7 @@ button {
     display: flex;
     align-items: center;
     font-family: inherit;
-    font-weight: 700;
+    font-weight: var(--flt-button-fw, 700);
     border-radius: $FLT_BUTTON_BORDER_RADIUS;
     box-sizing: border-box;
     padding: $FLT_BUTTON_PADDING;

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

@@ -0,0 +1,135 @@
+import { createElement } from 'lwc'
+import Picklist from 'flt/picklist'
+
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => ({
+        matches: false
+        // media: query,
+        // onchange: null,
+        // addListener: jest.fn(), // Deprecated
+        // removeListener: jest.fn(), // Deprecated
+        // addEventListener: jest.fn(),
+        // removeEventListener: jest.fn(),
+        // dispatchEvent: jest.fn()
+    }))
+})
+
+describe('flt-picklist', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('base test', async () => {
+        const picklistEl = createElement('flt-picklist', { is: Picklist })
+        picklistEl.errorMessage = 'Error message'
+        picklistEl.required = true
+        picklistEl.options = [
+            {
+                label: 'Man',
+                value: 'man'
+            },
+            {
+                label: 'Woman',
+                value: 'woman'
+            }
+        ]
+        picklistEl.name = 'sex'
+        document.body.appendChild(picklistEl)
+        await expect(picklistEl.firstChild.classList).toContain('flt-picklist')
+        picklistEl.firstChild.focus()
+
+        return Promise.resolve().then(async () => {
+            const dropDownEl = picklistEl.querySelector('.flt-picklist__dropdown')
+            await expect(dropDownEl).toBeTruthy()
+            dropDownEl.querySelector('.flt-picklist__option').click()
+
+            return Promise.resolve().then(async () => {
+                const data = picklistEl.getData()
+                await expect(data.value).toBe('man')
+            })
+        })
+    })
+
+    it('disabled test', async () => {
+        const picklistEl = createElement('flt-picklist', { is: Picklist })
+        picklistEl.errorMessage = 'Error message'
+        picklistEl.required = true
+        picklistEl.disabled = true
+        picklistEl.options = [
+            {
+                label: 'Man',
+                value: 'man'
+            },
+            {
+                label: 'Woman',
+                value: 'woman'
+            }
+        ]
+        picklistEl.name = 'sex'
+        document.body.appendChild(picklistEl)
+        await expect(picklistEl.firstChild.classList).toContain('flt-picklist')
+        picklistEl.firstChild.focus()
+
+        return Promise.resolve().then(async () => {
+            const dropDownEl = picklistEl.querySelector('.flt-picklist__dropdown')
+            await expect(dropDownEl).toBeFalsy()
+        })
+    })
+
+    it('modal test', async () => {
+        const picklistEl = createElement('flt-picklist', { is: Picklist })
+        picklistEl.errorMessage = 'Error message'
+        picklistEl.placeholder = 'Sex'
+        picklistEl.required = true
+        picklistEl.showDropdownAsModal = true
+        picklistEl.options = [
+            {
+                label: 'Man',
+                value: 'man'
+            },
+            {
+                label: 'Woman',
+                value: 'woman'
+            }
+        ]
+        picklistEl.name = 'sex'
+        document.body.appendChild(picklistEl)
+        await expect(picklistEl.firstChild.classList).toContain('flt-picklist')
+        picklistEl.firstChild.focus()
+
+        return Promise.resolve().then(async () => {
+            const dropDownEl = picklistEl.querySelector('.flt-picklist__dropdown')
+            await expect(dropDownEl).toBeTruthy()
+            dropDownEl.querySelector('.flt-picklist__option').click()
+            picklistEl.firstChild.blur()
+
+            return Promise.resolve().then(async () => {
+                const data = picklistEl.getData()
+                await expect(data.value).toBe('man')
+                picklistEl.firstChild.focus()
+                return Promise.resolve().then(async () => {
+                    await expect(picklistEl.firstChild.classList).toContain('flt-picklist_modal')
+                    const modalEl = document.body.querySelector('flt-modal')
+                    await expect(modalEl).toBeTruthy()
+                    const closeButtonEl = modalEl.querySelector(
+                        '.flt-picklist__modal-header-close-button'
+                    )
+                    const clickEvent = new MouseEvent('click', {
+                        bubbles: true,
+                        cancelable: true,
+                        view: window
+                    })
+
+                    closeButtonEl.dispatchEvent(clickEvent)
+                    return Promise.resolve().then(async () => {
+                        const modalEl = picklistEl.querySelector('flt-modal')
+                        await expect(modalEl).toBeFalsy()
+                    })
+                })
+            })
+        })
+    })
+})

package/frontend/components/flt/picklist/picklist.html

@@ -0,0 +1,47 @@
+<template lwc:render-mode="light">
+    <div class={computedStyles} tabindex="0" onfocus={handleShowView} onblur={handleHideView}>
+        <div class="flt-picklist__wrapp">
+            <div class="flt-picklist__wrapp-text">
+                <div class="flt-picklist__placeholder">{placeholder}</div>
+                <div class="flt-picklist__value">{displayLabel}</div>
+            </div>
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                class="flt-picklist__view-arrow">
+                <path
+                    d="M19 9L12 16L5 9"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="flt-picklist__view-arrow-path"></path>
+            </svg>
+        </div>
+        <div class="flt-picklist__dropdown-container">
+            <div lwc:if={showOptions} class="flt-picklist__dropdown">
+                <template for:each={optionsToDisplay} for:item="option">
+                    <div
+                        lwc:if={option.selected}
+                        key={option.value}
+                        onclick={handleChange}
+                        data-value={option.value}
+                        class="flt-picklist__option flt-picklist__option_selected">
+                        {option.label}
+                    </div>
+                    <div
+                        lwc:else
+                        onclick={handleChange}
+                        key={option.value}
+                        data-value={option.value}
+                        class="flt-picklist__option">
+                        {option.label}
+                    </div>
+                </template>
+            </div>
+        </div>
+
+        <div class={computedErrorMessage}>{errorMessage}</div>
+    </div>
+</template>

package/frontend/components/flt/picklist/picklist.js

@@ -0,0 +1,98 @@
+import { api } from 'lwc'
+import { SelectElement } from 'fleetcor-lwc'
+import './picklist.scss'
+import picklistModal from './picklistModal.html'
+import picklist from './picklist.html'
+
+export default class Picklist extends SelectElement {
+    error
+    showOptions
+    isDesktop
+
+    @api errorMessage
+    @api placeholder
+    @api prefix
+    @api showDropdownAsModal
+    @api modalDimentionStart = 1280
+
+    render() {
+        let result = picklist
+        if (this.showDropdownAsModal && !this.isDesktop) {
+            result = picklistModal
+        }
+        return result
+    }
+
+    @api validate() {
+        this.error = !this.isValid()
+    }
+
+    get displayLabel() {
+        return this.optionsToDisplay.find((item) => item.selected)?.label
+    }
+
+    connectedCallback() {
+        if (this.showDropdownAsModal) {
+            this.handleResize()
+            window.addEventListener('resize', this.handleResize.bind(this))
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.showDropdownAsModal) {
+            window.removeEventListener('resize', this.handleResize.bind(this))
+        }
+    }
+
+    handleResize() {
+        this.isDesktop = window.matchMedia(`(min-width: ${this.modalDimentionStart}px)`).matches
+    }
+
+    handleHideView(event) {
+        event.stopPropagation()
+        if (!this.disabled) {
+            this.showOptions = false
+        }
+    }
+
+    handleCloseModal() {
+        this.querySelector('.flt-picklist').blur()
+    }
+
+    handleShowView(event) {
+        event.stopPropagation()
+        if (!this.disabled) {
+            this.showOptions = true
+        }
+    }
+
+    handleChange(event) {
+        event.stopPropagation()
+        if (!this.disabled) {
+            this.value = event.target.dataset.value
+            this.dispatchEvent(
+                new CustomEvent('change', {
+                    detail: this.getData()
+                })
+            )
+
+            this.querySelector('.flt-picklist').blur()
+        }
+    }
+
+    get computedStyles() {
+        return this.generateClassNameList({
+            'flt-picklist': true,
+            'flt-picklist_active': this.showOptions,
+            'flt-picklist_selected': this.value,
+            'flt-picklist_modal': this.showDropdownAsModal && this.showOptions && !this.isDesktop
+        })
+    }
+
+    get computedErrorMessage() {
+        return this.generateClassNameList({
+            'flt-picklist__error-message': true,
+            'flt-picklist__error-message_active': this.error
+        })
+    }
+}

package/frontend/components/flt/picklist/picklist.scss

@@ -0,0 +1,172 @@
+.flt-picklist {
+    outline: none;
+
+    &_active {
+        position: relative;
+        z-index: 10000;
+        .flt-picklist__view-arrow {
+            transform: scale(-1);
+        }
+    }
+
+    &_selected {
+        .flt-picklist__wrapp {
+            border-color: var(--flt-picklist-view-border-color-selected, #59eb9c);
+        }
+
+        .flt-picklist__placeholder {
+            font-size: var(--flt-picklist-placeholder-activate-fz, 12px);
+            line-height: var(--flt-picklist-placeholder-activate-lh, 16px);
+        }
+    }
+
+    &_modal {
+        position: initial;
+        z-index: initial;
+
+        .flt-picklist__wrapp {
+            position: initial;
+            z-index: initial;
+        }
+    }
+
+    &__wrapp {
+        background-color: var(--flt-picklist-bgc, #ffffff);
+        border: var(--flt-picklist-border, 1px solid #6b7280);
+        border-radius: var(--flt-picklist-border-radius, 12px);
+        overflow: hidden;
+        height: var(--flt-picklist-wrapper-height, 44px);
+        display: flex;
+        justify-content: space-between;
+        gap: 12px;
+        align-items: center;
+        padding: var(--flt-picklist-wrapper-padding, 0 16px);
+        transition: all 0.3s;
+        cursor: pointer;
+        position: relative;
+        z-index: 1;
+    }
+
+    &__error-message {
+        color: var(--flt-picklist-error-color, #ed123d);
+        opacity: 0;
+        line-height: 0;
+        transition: all 0.3s;
+        font-size: var(--flt-picklist-error-fz, 12px);
+
+        &_active {
+            opacity: 1;
+            line-height: 1.5;
+        }
+    }
+
+    &__placeholder {
+        transition: all 0.3s;
+        color: var(--flt-picklist-placeholder-color, #111827);
+        font-size: var(--flt-picklist-placeholder-fz, 16px);
+        line-height: var(--flt-picklist-placeholder-lh, 20px);
+    }
+
+    &__view-arrow-path {
+        stroke: var(--flt-picklist-view-arrow-path-stroke, #4c4c4c);
+    }
+
+    &__view-arrow {
+        transition: all 0.3s;
+        flex-shrink: 0;
+    }
+
+    &__dropdown-container {
+        position: relative;
+    }
+
+    &__dropdown {
+        position: absolute;
+        width: 100%;
+        top: -20px;
+        left: 0;
+        max-height: 240px;
+        border: var(--flt-picklist-dropdown-border, none);
+        overflow: auto;
+        background: var(--flt-picklist-dropdown-bgc, #ffffff);
+        box-shadow: 0px 30px 40px rgba(33, 46, 53, 0.3);
+        cursor: pointer;
+        border-bottom-left-radius: var(--flt-picklist-border-radius, 12px);
+        border-bottom-right-radius: var(--flt-picklist-border-radius, 12px);
+        animation: fadeIn 0.3s ease-in-out;
+    }
+
+    &__option {
+        display: block;
+        padding: var(--flt-picklist-option-padding, 12px 16px);
+        color: var(--flt-picklist-option-color, #4c4c4c);
+        user-select: none;
+        box-sizing: border-box;
+        border-bottom: 1px solid var(--flt-picklist-dropdown-option-border-bottom-color, #eeeeee);
+        position: relative;
+        line-height: 18px;
+
+        &:hover,
+        &_selected {
+            color: var(--flt-picklist-option-selected-color, #4c4c4c);
+            background: var(--flt-picklist-dropdown-option-bgc, #f2d400);
+        }
+
+        &:first-child {
+            padding: var(--flt-picklist-option-first-child-padding, 32px 16px 12px);
+        }
+
+        &:last-child {
+            border-bottom: none;
+            border-bottom-left-radius: var(--flt-picklist-border-radius, 12px);
+            border-bottom-right-radius: var(--flt-picklist-border-radius, 12px);
+        }
+    }
+
+    &__modal {
+        background-color: #fff;
+        overflow: hidden;
+        border-radius: var(--flt-picklist-border-radius, 12px);
+        width: 90vw;
+
+        .flt-picklist__dropdown {
+            position: relative;
+            top: initial;
+            left: initial;
+            animation: initial;
+            max-height: calc(100vh - 100px);
+        }
+
+        .flt-picklist__option {
+            &:first-child {
+                padding: var(--flt-picklist-option-padding, 12px 16px);
+            }
+        }
+    }
+
+    &__modal-header-close-button {
+        padding: 4px;
+        width: 16px;
+        height: 16px;
+    }
+
+    &__modal-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 700;
+        padding: 12px 16px;
+        background-color: var(--flt-picklist-dropdown-modal-header-bgc, #f3f4f6);
+        border-top-left-radius: var(--flt-picklist-border-radius, 12px);
+        border-top-right-radius: var(--flt-picklist-border-radius, 12px);
+    }
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 100%;
+    }
+}

package/frontend/components/flt/picklist/picklistModal.html

@@ -0,0 +1,70 @@
+<template lwc:render-mode="light">
+    <div class={computedStyles} tabindex="0" onfocus={handleShowView} onblur={handleHideView}>
+        <div class="flt-picklist__wrapp">
+            <div class="flt-picklist__wrapp-text">
+                <div class="flt-picklist__placeholder">{placeholder}</div>
+                <div class="flt-picklist__value">{displayLabel}</div>
+            </div>
+            <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                class="flt-picklist__view-arrow">
+                <path
+                    d="M19 9L12 16L5 9"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    class="flt-picklist__view-arrow-path"></path>
+            </svg>
+        </div>
+        <div class="flt-picklist__dropdown-container">
+            <flt-modal lwc:if={showOptions} deactive-glass>
+                <div class="flt-picklist__modal">
+                    <div class="flt-picklist__modal-header">
+                        <div class="flt-picklist__modal-header-placeholder">{placeholder}:</div>
+                        <svg
+                            onclick={handleCloseModal}
+                            class="flt-picklist__modal-header-close-button"
+                            x="0px"
+                            y="0px"
+                            width="32px"
+                            height="32px"
+                            viewBox="0 0 612 612"
+                            style="enable-background: new 0 0 612 612"
+                            xml:space="preserve">
+                            <polygon
+                                points="612,36.004 576.521,0.603 306,270.608 35.478,0.603 0,36.004 270.522,306.011 0,575.997 35.478,611.397      306,341.411 576.521,611.397 612,575.997 341.459,306.011    "
+                                data-original="#000000"
+                                class="active-path"
+                                data-old_color="#000000"
+                                fill="#111827"></polygon>
+                        </svg>
+                    </div>
+                    <div class="flt-picklist__dropdown">
+                        <template for:each={optionsToDisplay} for:item="option">
+                            <div
+                                lwc:if={option.selected}
+                                key={option.value}
+                                onclick={handleChange}
+                                data-value={option.value}
+                                class="flt-picklist__option flt-picklist__option_selected">
+                                {option.label}
+                            </div>
+                            <div
+                                lwc:else
+                                onclick={handleChange}
+                                key={option.value}
+                                data-value={option.value}
+                                class="flt-picklist__option">
+                                {option.label}
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </flt-modal>
+        </div>
+        <div class={computedErrorMessage}>{errorMessage}</div>
+    </div>
+</template>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "3.6.2",
+    "version": "3.7.0",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -32,6 +32,7 @@
             "flt/icon",
             "flt/inputText",
             "flt/inputEmail",
+            "flt/picklist",
             "flt/modal",
             "flt/radioGroup",
             "flt/radioGroupIcon",