fleetcor-lwc 2.3.2 → 2.4.0

package/README.md

@@ -50,6 +50,22 @@ const pathConstants = 'frontend/common/mixins.scss';
 
 ## Components
 
+```html
+Radio Group:
+
+<flt-radio-group
+  size="s"
+  name="city"
+  disabled="true"
+  required="true"
+  group="main"
+  options="[{label:'London', value:'London'}, {label:'Leon', value:'Leon'}]"
+  value="London"
+  label="City"
+></flt-radio-group>
+...
+```
+
 ```html
 Checkbox:
 
@@ -166,7 +182,6 @@ $FLT_BUTTON_LARGE_HEIGHT: var(--flt-button-large-height, 56px);
 $FLT_BUTTON_LARGE_FONT_SIZE: var(--flt-button-large-font-size, 15px);
 
 $FLT_BUTTON_LABEL_PADDING: var(--flt-button-label-padding, 0);
-
 // <- BUTTON
 
 // CHECKBOX ->
@@ -194,14 +209,60 @@ $FLT_CHECKBOX_HOVER_BG_COLOR: var(--flt-checkbox-hover-bg-color, #f9fafb);
 $FLT_CHECKBOX_LABEL_HREF_COLOR: var(--flt-checkbox-color, #3782c8);
 $FLT_CHECKBOX_LABEL_HREF_HOVER_COLOR: var(--flt-checkbox-color, #67cdda);
 // <- CHECKBOX
+
+// RADIO GROUP ->
+$FLT_RADIO_GROUP_COLOR: var(--flt-radio-group-color, #111827);
+$FLT_RADIO_GROUP_DISABLED_COLOR: var(--flt-radio-group-disabled-color, #6b7280);
+$FLT_RADIO_GROUP_ERROR_COLOR: var(--flt-radio-group-error-color, #ed123d);
+
+$FLT_RADIO_GROUP_CIRCLE_COLOR: var(--flt-radio-group-circle-color, #6b7280);
+$FLT_RADIO_GROUP_CIRCLE_BG_COLOR: var(
+  --flt-radio-group-circle-bg-color,
+  #ffffff
+);
+$FLT_RADIO_GROUP_CIRCLE_HOVER_COLOR: var(
+  --flt-radio-group-circle-hover-color,
+  #111827
+);
+$FLT_RADIO_GROUP_CIRCLE_DISABLED_COLOR: var(
+  --flt-radio-group-circle-disabled-color,
+  #9ca3af
+);
+$FLT_RADIO_GROUP_CIRCLE_DISABLED_BG_COLOR: var(
+  --flt-radio-group-circle-disabled-bg-color,
+  #e5e7eb
+);
+$FLT_RADIO_GROUP_CIRCLE_SELECTED_HOVER_COLOR: var(
+  --flt-radio-group-circle-selected-hover-color,
+  #59eb9c
+);
+$FLT_RADIO_GROUP_CIRCLE_SELECTED_COLOR: var(
+  --flt-radio-group-circle-selected-color,
+  #52d990
+);
+$FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_COLOR: var(
+  --flt-radio-group-circle-disabled-selected-color,
+  #d1d5db
+);
+$FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_BG_COLOR: var(
+  --flt-radio-group-circle-disabled-selected-bg-color,
+  #ffffff
+);
+// <- RADIO GROUP
 ```
 
 ## Release Notes:
 
+- v.2.4.0
+  - Added Component `flt-radio-group`
+
+---
+
 - v.2.3.2
-  - Change icon style at checkbox 
+  - Change icon style at checkbox
 
 ---
+
 - v.2.3.1
   - Change links at checkbox's label
 

package/frontend/common/mixins_amber.scss

@@ -63,3 +63,28 @@ $FLT_CHECKBOX_HOVER_BG_COLOR: var(--flt-checkbox-hover-bg-color, #f9fafb);
 $FLT_CHECKBOX_LABEL_HREF_COLOR: var(--flt-checkbox-color, #ffcd00);
 $FLT_CHECKBOX_LABEL_HREF_HOVER_COLOR: var(--flt-checkbox-color, #ecc300);
 // <- CHECKBOX
+
+// RADIO GROUP ->
+$FLT_RADIO_GROUP_COLOR: var(--flt-radio-group-color, #111827);
+$FLT_RADIO_GROUP_DISABLED_COLOR: var(--flt-radio-group-disabled-color, #6b7280);
+$FLT_RADIO_GROUP_ERROR_COLOR: var(--flt-radio-group-error-color, #ed123d);
+
+$FLT_RADIO_GROUP_CIRCLE_COLOR: var(--flt-radio-group-circle-color, #6b7280);
+$FLT_RADIO_GROUP_CIRCLE_BG_COLOR: var(--flt-radio-group-circle-bg-color, #ffffff);
+$FLT_RADIO_GROUP_CIRCLE_HOVER_COLOR: var(--flt-radio-group-circle-hover-color, #111827);
+$FLT_RADIO_GROUP_CIRCLE_DISABLED_COLOR: var(--flt-radio-group-circle-disabled-color, #9ca3af);
+$FLT_RADIO_GROUP_CIRCLE_DISABLED_BG_COLOR: var(--flt-radio-group-circle-disabled-bg-color, #e5e7eb);
+$FLT_RADIO_GROUP_CIRCLE_SELECTED_HOVER_COLOR: var(
+    --flt-radio-group-circle-selected-hover-color,
+    #59eb9c
+);
+$FLT_RADIO_GROUP_CIRCLE_SELECTED_COLOR: var(--flt-radio-group-circle-selected-color, #52d990);
+$FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_COLOR: var(
+    --flt-radio-group-circle-disabled-selected-color,
+    #d1d5db
+);
+$FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_BG_COLOR: var(
+    --flt-radio-group-circle-disabled-selected-bg-color,
+    #ffffff
+);
+// <- RADIO GROUP

package/frontend/common/mixins_aquamarine.scss

@@ -64,3 +64,28 @@ $FLT_CHECKBOX_HOVER_BG_COLOR: var(--flt-checkbox-hover-bg-color, #f9fafb);
 $FLT_CHECKBOX_LABEL_HREF_COLOR: var(--flt-checkbox-color, #3782c8);
 $FLT_CHECKBOX_LABEL_HREF_HOVER_COLOR: var(--flt-checkbox-color, #67cdda);
 // <- CHECKBOX
+
+// RADIO GROUP ->
+$FLT_RADIO_GROUP_COLOR: var(--flt-radio-group-color, #111827);
+$FLT_RADIO_GROUP_DISABLED_COLOR: var(--flt-radio-group-disabled-color, #6b7280);
+$FLT_RADIO_GROUP_ERROR_COLOR: var(--flt-radio-group-error-color, #ed123d);
+
+$FLT_RADIO_GROUP_CIRCLE_COLOR: var(--flt-radio-group-circle-color, #6b7280);
+$FLT_RADIO_GROUP_CIRCLE_BG_COLOR: var(--flt-radio-group-circle-bg-color, #ffffff);
+$FLT_RADIO_GROUP_CIRCLE_HOVER_COLOR: var(--flt-radio-group-circle-hover-color, #111827);
+$FLT_RADIO_GROUP_CIRCLE_DISABLED_COLOR: var(--flt-radio-group-circle-disabled-color, #9ca3af);
+$FLT_RADIO_GROUP_CIRCLE_DISABLED_BG_COLOR: var(--flt-radio-group-circle-disabled-bg-color, #e5e7eb);
+$FLT_RADIO_GROUP_CIRCLE_SELECTED_HOVER_COLOR: var(
+    --flt-radio-group-circle-selected-hover-color,
+    #59eb9c
+);
+$FLT_RADIO_GROUP_CIRCLE_SELECTED_COLOR: var(--flt-radio-group-circle-selected-color, #52d990);
+$FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_COLOR: var(
+    --flt-radio-group-circle-disabled-selected-color,
+    #d1d5db
+);
+$FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_BG_COLOR: var(
+    --flt-radio-group-circle-disabled-selected-bg-color,
+    #ffffff
+);
+// <- RADIO GROUP

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

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

package/frontend/components/flt/radioGroup/radioGroup.html

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

package/frontend/components/flt/radioGroup/radioGroup.js

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

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

@@ -0,0 +1,55 @@
+@import './../../../common/mixins_aquamarine';
+/* mixins */
+
+.flt-radio-group {
+    @media (min-width: 768px) {
+        display: flex;
+    }
+
+    &__title {
+        font-weight: 600;
+        color: $FLT_RADIO_GROUP_COLOR;
+        font-size: 15px;
+        line-height: 20px;
+        margin-bottom: 0.25rem;
+
+        @media (min-width: 768px) {
+            margin-bottom: 0;
+            flex-shrink: 0;
+            margin-right: 2rem;
+        }
+    }
+
+    &__items {
+        display: flex;
+        flex-direction: column;
+
+        @media (min-width: 768px) {
+            flex-direction: row;
+            flex-wrap: wrap;
+        }
+    }
+
+    &__item {
+        display: inline-block;
+        margin: 0.5rem 0;
+        margin-right: 2.5rem;
+
+        @media (min-width: 768px) {
+            margin-top: 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/__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/radioItem/radioItem.html

@@ -0,0 +1,6 @@
+<template lwc:render-mode="light">
+    <div onclick={handleClick} class={styleClass} autotests-value={option.value}>
+        <span class="flt-radio-item__circle"></span>
+        <span class="flt-radio-item__label">{option.label}</span>
+    </div>
+</template>

package/frontend/components/flt/radioItem/radioItem.js

@@ -0,0 +1,33 @@
+import './radioItem.scss'
+
+import { api } from 'lwc'
+import { BaseElement } from 'fleetcor-lwc'
+
+/**
+ * @class RadioItem
+ * @extends BaseElement
+ * @description Flt Radio Item component
+ */
+export default class RadioItem extends BaseElement {
+    @api option
+    @api size = SIZES.SMALL
+
+    get styleClass() {
+        return this.generateClassNameList({
+            'flt-radio-item': true,
+            [`flt-radio-item_size_${this.size}`]: true,
+            'flt-radio-item_selected': this.option.selected,
+            'flt-radio-item_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/radioItem/radioItem.scss

@@ -0,0 +1,55 @@
+@import './../../../common/mixins_aquamarine';
+/* mixins */
+
+.flt-radio-item {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+
+    &:hover:not(.flt-radio-item_disabled) &__circle {
+        border-color: $FLT_RADIO_GROUP_CIRCLE_HOVER_COLOR;
+    }
+
+    &:hover:not(.flt-radio-item_disabled).flt-radio-item_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_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%;
+    }
+}

package/frontend/core/index.js

@@ -4,6 +4,7 @@ export { default as BaseElement } from './interface/BaseElement'
 export { default as UserDataManager } from './interface/UserDataManager'
 export { default as UserDataValidator } from './interface/UserDataValidator'
 export { default as CheckboxElement } from './interface/CheckboxElement'
+export { default as SelectElement } from './interface/SelectElement'
 
 // ERROR
 export * from './error/errors'

package/frontend/core/interface/SelectElement.js

@@ -0,0 +1,45 @@
+import { api } from 'lwc'
+import { UserDataValidator } from 'fleetcor-lwc'
+
+/**
+ * @abstract
+ * @class SelectElement
+ * @extends UserDataValidator
+ * @description This class is used to select item
+ */
+export default class SelectElement extends UserDataValidator {
+    @api options
+
+    @api isValid() {
+        return this.required ? !!this.value : true
+    }
+
+    get optionsToDisplay() {
+        let result = []
+
+        if (this.options?.length) {
+            result = this.options.map((item) => {
+                return {
+                    label: item.label,
+                    key: `${this.name}_${item.value}`,
+                    disabled: this.disabled,
+                    value: item.value,
+                    selected: this.value === item.value
+                }
+            })
+        }
+        return result
+    }
+
+    handleChange(event) {
+        event.stopPropagation()
+        if (!this.disabled) {
+            this.value = event.detail.value
+            this.dispatchEvent(
+                new CustomEvent('change', {
+                    detail: this.getData()
+                })
+            )
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "2.3.2",
+    "version": "2.4.0",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -28,9 +28,10 @@
             }
         ],
         "expose": [
-            "flt/checkbox",
             "flt/button",
+            "flt/checkbox",
             "flt/icon",
+            "flt/radioGroup",
             "flt/tooltip"
         ]
     },