fleetcor-lwc 2.7.1 → 2.7.3

package/README.md

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

package/frontend/components/flt/checkbox/checkbox.html

@@ -1,28 +1,33 @@
 <template lwc:render-mode="light">
     <label class={computedLabelClass}>
         <input
-            class="flt-checkbox__input"
-            type="checkbox"
-            checked={value}
-            disabled={disabled}
-            onchange={handleChange} />
+                class="flt-checkbox__input"
+                type="checkbox"
+                checked={value}
+                disabled={disabled}
+                onchange={handleChange}
+        />
+
         <span class={computedSpanClass}>
             <svg
-                if:true={value}
-                class="flt-checkbox__icon-agree"
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg">
+                    if:true={value}
+                    class="flt-checkbox__icon-agree"
+                    width="20"
+                    height="20"
+                    viewBox="0 0 20 20"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+            >
                 <path
-                    class="flt-checkbox__icon-agree-path"
-                    d="M3.75 10.625L8.75 15.625L16.25 4.375"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"></path>
+                        class="flt-checkbox__icon-agree-path"
+                        d="M3.75 10.625L8.75 15.625L16.25 4.375"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                ></path>
             </svg>
         </span>
+        
         <div class="flt-checkbox__label"></div>
     </label>
     <div class={computedErrorMessage}>{errorMessage}</div>

package/frontend/components/flt/checkbox/checkbox.js

@@ -33,6 +33,7 @@ export default class Checkbox extends CheckboxElement {
     get computedLabelClass() {
         return this.generateClassNameList({
             'flt-checkbox': true,
+            'flt-checkbox_required': this.required,
             'flt-checkbox_active': this.value,
             'flt-checkbox_disabled': this.disabled,
             'flt-checkbox_error': this.error,

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