fleetcor-lwc 2.7.0 → 2.7.2

package/README.md

@@ -415,6 +415,16 @@ $FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_BG_COLOR: var(
 
 ## Release Notes:
 
+- v.2.7.2
+  - Added variant for the RadioGroupIcon: 'hide-checkbox'
+
+---
+
+- v.2.7.1
+  - Added icons: 'world', 'map-pin'
+
+---
+
 - v.2.7.0
   - Added size `medium` for checkbox component
 

package/frontend/components/flt/icon/icon.js

@@ -30,6 +30,8 @@ import TMPL_SMALL_PLUS from './icons/tmpl-small-plus.html'
 import TMPL_DOCUMENT from './icons/tmpl-document.html'
 import TMPL_CLOSE from './icons/tmpl-close.html'
 import TMPL_HGV from './icons/tmpl-hgv.html'
+import TMPL_WORLD from './icons/tmpl-world.html'
+import TMPL_MAP_PIN from './icons/tmpl-map-pin.html'
 
 /**
  * @class Icon
@@ -37,43 +39,47 @@ import TMPL_HGV from './icons/tmpl-hgv.html'
  * @description Flt icon component
  */
 export default class Icon extends LightningDomElement {
-    @api icon
+    @api icon;
 
-    connectedCallback() {
+    connectedCallback () {
         if (!ICONS[this.icon]) {
-            console.error(`FltError: Icon '${this.icon}' is not available!`)
+            console.error(`FltError: Icon '${this.icon}' is not available!`);
         }
     }
 
-    render() {
-        return ICONS[this.icon] || TMPL_EMPTY
+    render () {
+        return ICONS[this.icon] || TMPL_EMPTY;
     }
 }
 
 const ICONS = {
-    plus: TMPL_PLUS,
+    'plus': TMPL_PLUS,
     'plus-small': TMPL_SMALL_PLUS,
-    document: TMPL_DOCUMENT,
-    close: TMPL_CLOSE,
-    ev: TMPL_EV,
-    carwash: TMPL_CARWASH,
-    car: TMPL_CAR,
-    van: TMPL_VAN,
-    unleaded: TMPL_UNLIDEAD,
-    diesel: TMPL_DIESEL,
-    hydrogen: TMPL_HYDROGEN,
-    signature: TMPL_SIGNATURE,
-    fuel: TMPL_FUEL,
-    driver: TMPL_DRIVER,
-    vehicle: TMPL_VEHICLE,
-    both: TMPL_BOTH,
+    'document': TMPL_DOCUMENT,
+    'close': TMPL_CLOSE,
+    'ev': TMPL_EV,
+    'carwash': TMPL_CARWASH,
+    'car': TMPL_CAR,
+    'van': TMPL_VAN,
+    'unleaded': TMPL_UNLIDEAD,
+    'diesel': TMPL_DIESEL,
+    'hydrogen': TMPL_HYDROGEN,
+    'signature': TMPL_SIGNATURE,
+    'fuel': TMPL_FUEL,
+    'driver': TMPL_DRIVER,
+    'vehicle': TMPL_VEHICLE,
+    'both': TMPL_BOTH,
     'shared-card': TMPL_SHARED_CARD,
     'ev-and-fuel': TMPL_EV_AND_FUEL,
-    oil: TMPL_OIL,
-    key: TMPL_KEY,
-    blocked: TMPL_BLOCKED,
+    'oil': TMPL_OIL,
+    'key': TMPL_KEY,
+    'blocked': TMPL_BLOCKED,
     'arrow-left': TMPL_ARROW_LEFT,
     'multiple-users': TMPL_MULTIPLE_USERS,
     'arrow-right': TMPL_ARROW_RIGHT,
-    hgv: TMPL_HGV,
+    'hgv': TMPL_HGV,
+    'world': TMPL_WORLD,
+    'map-pin': TMPL_MAP_PIN,
 }
+
+export const ICONS_LIST = Object.keys(ICONS);

package/frontend/components/flt/icon/icons/tmpl-map-pin.html

@@ -0,0 +1,6 @@
+<template lwc:render-mode="light">
+    <svg class="flt-icon flt-icon__map-pin" width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path class="flt-icon__path" d="M12.5 9.31982C12.5 10.7005 11.3807 11.8198 10 11.8198C8.61929 11.8198 7.5 10.7005 7.5 9.31982C7.5 7.93911 8.61929 6.81982 10 6.81982C11.3807 6.81982 12.5 7.93911 12.5 9.31982Z" stroke="#2E3036" stroke-linecap="round" stroke-linejoin="round"></path>
+        <path class="flt-icon__path" d="M16.25 9.31982C16.25 15.2716 10 18.6948 10 18.6948C10 18.6948 3.75 15.2716 3.75 9.31982C3.75 5.86804 6.54822 3.06982 10 3.06982C13.4518 3.06982 16.25 5.86804 16.25 9.31982Z" stroke="#2E3036" stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>
+</template>

package/frontend/components/flt/icon/icons/tmpl-world.html

@@ -0,0 +1,12 @@
+<template lwc:render-mode="light">
+    <svg 
+            class="flt-icon flt-icon__world"
+            width="20"
+            height="21" 
+            viewBox="0 0 20 21" 
+            fill="none" 
+            xmlns="http://www.w3.org/2000/svg"
+    >
+        <path class="flt-icon__path" d="M17.4107 11.7305L16.4652 10.785C16.3226 10.6425 16.2041 10.4779 16.1139 10.2977L15.2139 8.49758C15.1087 8.28714 14.8282 8.24163 14.6618 8.40799C14.4848 8.58503 14.2257 8.65217 13.985 8.58339L12.9242 8.28032C12.5214 8.16522 12.1033 8.40669 12.0017 8.81315C11.9257 9.117 12.049 9.43579 12.3095 9.60952L12.7985 9.93549C13.2907 10.2637 13.3597 10.9601 12.9414 11.3784L12.7746 11.5452C12.5988 11.7211 12.5 11.9595 12.5 12.2081V12.5505C12.5 12.8903 12.4076 13.2238 12.2328 13.5152L11.1373 15.341C10.8195 15.8707 10.247 16.1948 9.6293 16.1948C9.14368 16.1948 8.75 15.8011 8.75 15.3155V14.3393C8.75 13.5726 8.28322 12.8831 7.57136 12.5984L7.02624 12.3803C6.20812 12.0531 5.72825 11.2003 5.87311 10.3312L5.87897 10.296C5.91765 10.064 5.99964 9.84127 6.12066 9.63955L6.19517 9.51537C6.60286 8.83589 7.39368 8.48606 8.17069 8.64146L9.15223 8.83777C9.63113 8.93355 10.1033 8.64562 10.2375 8.17603L10.4113 7.56794C10.5352 7.13416 10.3326 6.67362 9.92909 6.47187L9.375 6.19482L9.29917 6.27065C8.94754 6.62228 8.47063 6.81982 7.97335 6.81982H7.82258C7.61603 6.81982 7.41746 6.90236 7.27141 7.04841C7.03519 7.28464 6.67345 7.34405 6.37465 7.19465C5.97027 6.99246 5.82361 6.48881 6.05622 6.10113L7.2328 4.14016C7.3502 3.9445 7.43041 3.72988 7.47044 3.50711M17.4107 11.7305C17.4695 11.3523 17.5 10.9646 17.5 10.5698C17.5 6.42769 14.1421 3.06982 10 3.06982C9.11236 3.06982 8.26073 3.22403 7.47044 3.50711M17.4107 11.7305C16.8528 15.3215 13.7474 18.0698 10 18.0698C5.85786 18.0698 2.5 14.712 2.5 10.5698C2.5 7.31533 4.57291 4.545 7.47044 3.50711" stroke="#2E3036" stroke-linecap="round" stroke-linejoin="round"></path>
+    </svg>
+</template>

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

@@ -2,11 +2,13 @@
     <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>
+                    key={option.key}
+                    class="flt-radio-group-icon__item"
+                    size={size}
+                    option={option}
+                    variant={variant}
+                    onchange={handleChange}
+            ></flt-radio-item-icon>
         </template>
     </div>
     <div class={computedErrorMessage}>{errorMessage}</div>

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

@@ -3,6 +3,15 @@ import './radioGroupIcon.scss'
 import { api } from 'lwc'
 import { SelectElement } from 'fleetcor-lwc'
 
+const VARIANTS = {
+    DEFAULT: 'default',
+    HIDE_CHECKBOX: 'hide-checkbox',
+};
+
+const SIZES = {
+    SMALL: 's'
+}
+
 /**
  * @class RadioGroupIcon
  * @extends SelectElement
@@ -11,21 +20,18 @@ import { SelectElement } from 'fleetcor-lwc'
 export default class RadioGroupIcon extends SelectElement {
     error
 
-    @api size = SIZES.SMALL
-    @api errorMessage
+    @api variant = VARIANTS.DEFAULT;
+    @api size = SIZES.SMALL;
+    @api errorMessage;
 
     @api validate() {
-        this.error = !this.isValid()
+        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
+            'flt-radio-group-icon__error-message_active': this.error,
         })
     }
-}
-
-const SIZES = {
-    SMALL: 's'
-}
+}

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

@@ -1,6 +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} />
+        <img class="flt-radio-item-icon__icon" src={option.icon} alt={option.label}/>
     </div>
 </template>

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

@@ -3,18 +3,29 @@ import './radioItemIcon.scss'
 import { api } from 'lwc'
 import { BaseElement } from 'fleetcor-lwc'
 
+const VARIANTS = {
+    DEFAULT: 'default',
+    HIDE_CHECKBOX: 'hide-checkbox',
+};
+
+const SIZES = {
+    SMALL: 's'
+}
+
 /**
  * @class RadioItemIcon
  * @extends BaseElement
  * @description Flt Radio Item Icon component
  */
 export default class RadioItemIcon extends BaseElement {
-    @api option
-    @api size = SIZES.SMALL
+    @api option;
+    @api size = SIZES.SMALL;
+    @api variant = VARIANTS.DEFAULT;
 
     get styleClass() {
         return this.generateClassNameList({
             'flt-radio-item-icon': true,
+            'flt-radio-item-icon_hide-checkbox': this.variant === VARIANTS.HIDE_CHECKBOX,
             [`flt-radio-item-icon_size_${this.size}`]: true,
             'flt-radio-item-icon_selected': this.option.selected,
             'flt-radio-item-icon_disabled': this.option.disabled
@@ -23,11 +34,7 @@ export default class RadioItemIcon extends BaseElement {
 
     handleClick() {
         if (!this.option.disabled || !this.option.selected) {
-            this.dispatchEvent(new CustomEvent('change', { detail: { ...this.option } }))
+            this.dispatchEvent(new CustomEvent('change', { detail: { ...this.option } }));
         }
     }
-}
-
-const SIZES = {
-    SMALL: 's'
-}
+}

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

@@ -18,14 +18,25 @@
         border: 5px solid $FLT_RADIO_GROUP_CIRCLE_SELECTED_COLOR;
     }
 
+    &_hide-checkbox &__circle{
+        display: none;
+    }
+
+    &_hide-checkbox &__icon{
+        border: 1px solid $FLT_RADIO_GROUP_CIRCLE_COLOR;
+        border-radius: 6px;
+        padding: 3px 5px;
+        transition: border-color 0.3s;
+    }
+
+    &_hide-checkbox.flt-radio-item-icon_selected &__icon{
+        border: 1px 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;
@@ -36,12 +47,6 @@
         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;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "fleetcor-lwc",
-    "version": "2.7.0",
+    "version": "2.7.2",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",
@@ -76,4 +76,4 @@
         "d": "^1.0.1",
         "loader-utils": "^2.0.0"
     }
-}
+}