fleetcor-lwc 2.4.2 → 2.6.0

package/README.md

@@ -50,6 +50,20 @@ const pathConstants = 'frontend/common/mixins.scss';
 
 ## Components
 
+```html
+Radio Group Icon:
+<flt-radio-group-icon
+  size="s"
+  name="city"
+  disabled="true"
+  required="true"
+  group="main"
+  options="[{icon:'///icon-path', value:'London'}, {icon:'///icon-path', value:'Leon'}]"
+  value="London"
+></flt-radio-group-icon>
+...
+```
+
 ```html
 Radio Group:
 
@@ -253,10 +267,19 @@ $FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_BG_COLOR: var(
 
 ## Release Notes:
 
+- v.2.6.0
+
+  - Added new component `flt-radio-group-icon` (don't use `flt-radio-group` with icons)
+
+- v.2.5.0
+
+  - Available icons for `flt-radio-group`
+
 - v.2.4.2
   - Bug fix at `flt-radio-group`
 
 ---
+
 - v.2.4.1
   - Change margin for items at `flt-radio-group`
 

package/frontend/components/flt/radioGroup/radioGroup.scss

@@ -33,6 +33,13 @@
         @media (min-width: 768px) {
             margin-top: 0;
         }
+
+        &:last-child {
+            margin-right: 0;
+            .flt-radio-item__icon {
+                margin-right: 0;
+            }
+        }
     }
 
     &__error-message {

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

@@ -0,0 +1,67 @@
+import { createElement } from 'lwc'
+
+import RadioGroupIcon from 'flt/radioGroupIcon'
+
+describe('flt-radio-group-icon', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('Generate default radioGroup', async () => {
+        const radioGroupDefault = createElement('flt-radio-group-icon', { is: RadioGroupIcon })
+        radioGroupDefault.required = true
+        radioGroupDefault.options = [
+            {
+                icon: 'Man',
+                value: 'man'
+            },
+            {
+                icon: 'Woman',
+                value: 'woman'
+            }
+        ]
+        radioGroupDefault.name = 'sex'
+        document.body.appendChild(radioGroupDefault)
+        await expect(radioGroupDefault.firstChild.classList).toContain('flt-radio-group-icon')
+
+        const errorElement = document.body.querySelector('.flt-radio-group-icon__error-message')
+
+        await expect(errorElement.classList).not.toContain(
+            'flt-radio-group-icon__error-message_active'
+        )
+
+        let items = radioGroupDefault.firstChild.querySelectorAll('flt-radio-item-icon')
+        await expect(items.length).toBe(2)
+        let data = radioGroupDefault.getData()
+        await expect(data.value).toBeUndefined()
+        await expect(errorElement.classList).toContain('flt-radio-group-icon__error-message_active')
+        items[0].querySelector('.flt-radio-item-icon').click()
+        data = radioGroupDefault.getData()
+        await expect(data.value).toBe('man')
+        await expect(errorElement.classList).not.toContain(
+            'flt-radio-group-icon__error-message_active'
+        )
+    })
+
+    it('Generate default radioGroup', async () => {
+        const radioGroupDefault = createElement('flt-radio-group-icon', { is: RadioGroupIcon })
+        radioGroupDefault.disabled = true
+        radioGroupDefault.options = [
+            {
+                icon: 'Man',
+                value: 'man'
+            },
+            {
+                icon: 'Woman',
+                value: 'woman'
+            }
+        ]
+        radioGroupDefault.name = 'bank'
+        document.body.appendChild(radioGroupDefault)
+
+        const item = radioGroupDefault.firstChild.querySelector('flt-radio-item-icon')
+        await expect(item.option.disabled).toBeTruthy()
+    })
+})

package/frontend/components/flt/radioGroupIcon/radioGroupIcon.html

@@ -0,0 +1,13 @@
+<template lwc:render-mode="light">
+    <div class="flt-radio-group-icon">
+        <template for:each={optionsToDisplay} for:item="option">
+            <flt-radio-item-icon
+                key={option.key}
+                class="flt-radio-group-icon__item"
+                size={size}
+                option={option}
+                onchange={handleChange}></flt-radio-item-icon>
+        </template>
+    </div>
+    <div class={computedErrorMessage}>{errorMessage}</div>
+</template>

package/frontend/components/flt/radioGroupIcon/radioGroupIcon.js

@@ -0,0 +1,31 @@
+import './radioGroupIcon.scss'
+
+import { api } from 'lwc'
+import { SelectElement } from 'fleetcor-lwc'
+
+/**
+ * @class RadioGroupIcon
+ * @extends SelectElement
+ * @description Flt Radio Group component
+ */
+export default class RadioGroupIcon extends SelectElement {
+    error
+
+    @api size = SIZES.SMALL
+    @api errorMessage
+
+    @api validate() {
+        this.error = !this.isValid()
+    }
+
+    get computedErrorMessage() {
+        return this.generateClassNameList({
+            'flt-radio-group-icon__error-message': true,
+            'flt-radio-group-icon__error-message_active': this.error
+        })
+    }
+}
+
+const SIZES = {
+    SMALL: 's'
+}

package/frontend/components/flt/radioGroupIcon/radioGroupIcon.scss

@@ -0,0 +1,37 @@
+@import './../../../common/mixins_aquamarine';
+/* mixins */
+
+.flt-radio-group-icon {
+    display: flex;
+    flex-wrap: wrap;
+
+    &__item {
+        display: inline-block;
+        margin: 0.5rem 0;
+        margin-right: 1.5rem;
+
+        @media (min-width: 768px) {
+            margin-top: 0;
+        }
+
+        &:last-child {
+            margin-right: 0;
+            .flt-radio-item__icon {
+                margin-right: 0;
+            }
+        }
+    }
+
+    &__error-message {
+        color: $FLT_RADIO_GROUP_ERROR_COLOR;
+        opacity: 0;
+        line-height: 0;
+        transition: all 0.3s;
+        font-size: 12px;
+
+        &_active {
+            opacity: 1;
+            line-height: 1.5;
+        }
+    }
+}

package/frontend/components/flt/radioItem/radioItem.scss

@@ -52,4 +52,11 @@
         margin-right: 1rem;
         border-radius: 100%;
     }
+
+    &__icon {
+        width: 58px;
+        height: 40px;
+        object-fit: contain;
+        margin-right: 1rem;
+    }
 }

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

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

package/frontend/components/flt/radioItemIcon/radioItemIcon.html

@@ -0,0 +1,6 @@
+<template lwc:render-mode="light">
+    <div onclick={handleClick} class={styleClass} autotests-value={option.value}>
+        <span class="flt-radio-item-icon__circle"></span>
+        <img class="flt-radio-item-icon__icon" src={option.icon} alt={option.label} />
+    </div>
+</template>

package/frontend/components/flt/radioItemIcon/radioItemIcon.js

@@ -0,0 +1,33 @@
+import './radioItemIcon.scss'
+
+import { api } from 'lwc'
+import { BaseElement } from 'fleetcor-lwc'
+
+/**
+ * @class RadioItemIcon
+ * @extends BaseElement
+ * @description Flt Radio Item Icon component
+ */
+export default class RadioItemIcon extends BaseElement {
+    @api option
+    @api size = SIZES.SMALL
+
+    get styleClass() {
+        return this.generateClassNameList({
+            'flt-radio-item-icon': true,
+            [`flt-radio-item-icon_size_${this.size}`]: true,
+            'flt-radio-item-icon_selected': this.option.selected,
+            'flt-radio-item-icon_disabled': this.option.disabled
+        })
+    }
+
+    handleClick() {
+        if (!this.option.disabled || !this.option.selected) {
+            this.dispatchEvent(new CustomEvent('change', { detail: { ...this.option } }))
+        }
+    }
+}
+
+const SIZES = {
+    SMALL: 's'
+}

package/frontend/components/flt/radioItemIcon/radioItemIcon.scss

@@ -0,0 +1,62 @@
+@import './../../../common/mixins_aquamarine';
+/* mixins */
+
+.flt-radio-item-icon {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover:not(.flt-radio-item-icon_disabled) &__circle {
+        border-color: $FLT_RADIO_GROUP_CIRCLE_HOVER_COLOR;
+    }
+
+    &:hover:not(.flt-radio-item-icon_disabled).flt-radio-item-icon_selected &__circle {
+        border-color: $FLT_RADIO_GROUP_CIRCLE_SELECTED_HOVER_COLOR;
+    }
+
+    &_selected &__circle {
+        border: 5px solid $FLT_RADIO_GROUP_CIRCLE_SELECTED_COLOR;
+    }
+
+    &_disabled {
+        cursor: not-allowed;
+    }
+
+    // &_disabled &__label {
+    //     color: $FLT_RADIO_GROUP_DISABLED_COLOR;
+    // }
+
+    &_disabled &__circle {
+        border-color: $FLT_RADIO_GROUP_CIRCLE_DISABLED_COLOR;
+        background-color: $FLT_RADIO_GROUP_CIRCLE_DISABLED_BG_COLOR;
+    }
+
+    &_selected.flt-radio-item-icon_disabled &__circle {
+        border-color: $FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_COLOR;
+        background-color: $FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_BG_COLOR;
+    }
+
+    // &__label {
+    //     line-height: 20px;
+    //     font-size: 15px;
+    //     color: $FLT_RADIO_GROUP_COLOR;
+    // }
+
+    &__circle {
+        box-sizing: border-box;
+        border: 1px solid $FLT_RADIO_GROUP_CIRCLE_COLOR;
+        width: 20px;
+        height: 20px;
+        transition: all 0.3s;
+        background-color: #ffffff;
+        margin-right: 1rem;
+        border-radius: 100%;
+    }
+
+    &__icon {
+        width: 58px;
+        height: 40px;
+        object-fit: contain;
+        margin-right: 1rem;
+    }
+}

package/frontend/core/interface/SelectElement.js

@@ -21,6 +21,7 @@ export default class SelectElement extends UserDataValidator {
             result = this.options.map((item) => {
                 return {
                     label: item.label,
+                    icon: item.icon,
                     key: `${this.name}_${item.value}`,
                     disabled: this.disabled,
                     value: item.value,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "2.4.2",
+    "version": "2.6.0",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -32,6 +32,7 @@
             "flt/checkbox",
             "flt/icon",
             "flt/radioGroup",
+            "flt/radioGroupIcon",
             "flt/tooltip"
         ]
     },