fleetcor-lwc 2.4.2 → 2.5.0

package/README.md

@@ -253,6 +253,9 @@ $FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_BG_COLOR: var(
 
 ## Release Notes:
 
+- v.2.5.0
+  - Available icons for `flt-radio-group`
+
 - v.2.4.2
   - Bug fix 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/radioItem/radioItem.html

@@ -1,6 +1,11 @@
 <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>
+        <template if:true={option.icon}>
+            <img class="flt-radio-item__icon" src={option.icon} alt={option.label} />
+        </template>
+        <template if:false={option.icon}>
+            <span class="flt-radio-item__label">{option.label}</span>
+        </template>
     </div>
 </template>

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/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.5.0",
     "description": "LWC framework by Fleetcor",
     "repository": {
         "type": "git",