fleetcor-lwc 2.7.1 → 2.7.2

package/README.md

@@ -415,6 +415,11 @@ $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'
 

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.1",
+    "version": "2.7.2",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",