fleetcor-lwc 2.0.1 → 2.2.1

package/README.md

@@ -50,11 +50,27 @@ const pathConstants = 'frontend/common/mixins.scss';
 
 ## Components
 
+```html
+Checkbox:
+
+<flt-checkbox
+  size="s"
+  name="agreement"
+  disabled="true"
+  required="true"
+  group="main"
+  value="true"
+  label="Next"
+></flt-checkbox>
+...
+```
+
 ```html
 Button:
 
 <flt-button
-  type="base|primary|link"
+  type="base|primary|secondary|link"
+  size="xs|small|medium|large"
   icon-left="arrow-left|arrow-right|..."
   icon-right="arrow-left|arrow-right|..."
   disabled
@@ -93,13 +109,13 @@ $FLT_TOOLTIP_BG_COLOR: var(--flt-tooltip-bg-color, #374151);
 $FLT_TOOLTIP_COLOR: var(--flt-tooltip-bg-color, #f9fafb);
 // <- TOOLTIP
 
-/* ICON START */
+// ICON ->
 $FLT_ICON_COLOR: var(--flt-icon-color, #111827);
-/* ICON END */
+// <- ICON
 
-/* BUTTON START */
-$FLT_BUTTON_PRIMARY_BG_COLOR: var(--flt-button-primary-bg-color, #f2d400);
-$FLT_BUTTON_PRIMARY_COLOR: var(--flt-button-primary-color, #111827);
+// BUTTON ->
+$FLT_BUTTON_PRIMARY_BG_COLOR: var(--flt-button-primary-bg-color, #3782c8);
+$FLT_BUTTON_PRIMARY_COLOR: var(--flt-button-primary-color, #f9fafb);
 $FLT_BUTTON_PRIMARY_DISABLED_COLOR: var(
   --flt-button-primary-disabled-color,
   #6b7280
@@ -109,6 +125,17 @@ $FLT_BUTTON_PRIMARY_DISABLED_BG_COLOR: var(
   #f3f4f6
 );
 
+$FLT_BUTTON_SECONDARY_BG_COLOR: var(--flt-button-secondary-bg-color, #f2d400);
+$FLT_BUTTON_SECONDARY_COLOR: var(--flt-button-secondary-color, #111827);
+$FLT_BUTTON_SECONDARY_DISABLED_COLOR: var(
+  --flt-button-secondary-disabled-color,
+  #6b7280
+);
+$FLT_BUTTON_SECONDARY_DISABLED_BG_COLOR: var(
+  --flt-button-secondary-disabled-bg-color,
+  #f3f4f6
+);
+
 $FLT_BUTTON_BASE_BG_COLOR: var(--flt-button-base-bg-color, #ffffff);
 $FLT_BUTTON_BASE_COLOR: var(--flt-button-base-color, #111827);
 $FLT_BUTTON_BASE_BORDER_COLOR: var(--flt-button-base-border-color, #111827);
@@ -126,6 +153,9 @@ $FLT_BUTTON_LINK_COLOR: var(--flt-button-link-color, #111827);
 $FLT_BUTTON_LINK_DISABLED_COLOR: var(--flt-button-link-disabled-color, #9ca3af);
 $FLT_BUTTON_LINK_HOVER_COLOR: var(--flt-button-link-hover-color, #6b7280);
 
+$FLT_BUTTON_X_SMALL_HEIGHT: var(--flt-button-x-small-height, 40px);
+$FLT_BUTTON_X_SMALL_FONT_SIZE: var(--flt-button-x-small-font-size, 14px);
+
 $FLT_BUTTON_SMALL_HEIGHT: var(--flt-button-small-height, 44px);
 $FLT_BUTTON_SMALL_FONT_SIZE: var(--flt-button-small-font-size, 14px);
 
@@ -137,11 +167,51 @@ $FLT_BUTTON_LARGE_FONT_SIZE: var(--flt-button-large-font-size, 15px);
 
 $FLT_BUTTON_LABEL_PADDING: var(--flt-button-label-padding, 0);
 
-/* BUTTON END */
+// <- BUTTON
+
+// CHECKBOX ->
+$FLT_CHECKBOX_BORDER_COLOR: var(--flt-checkbox-border-color, #6b7280);
+$FLT_CHECKBOX_BG_COLOR: var(--flt-checkbox-bg-color, #ffffff);
+
+$FLT_CHECKBOX_AGREE_COLOR: var(--flt-checkbox-agree-color, #59eb9c);
+$FLT_CHECKBOX_COLOR: var(--flt-checkbox-color, #111827);
+$FLT_CHECKBOX_ERROR_COLOR: var(--flt-checkbox-error-color, #ed123d);
+
+$FLT_CHECKBOX_DISABLED_COLOR: var(--flt-checkbox-disabled-color, #6b7280);
+$FLT_CHECKBOX_DISABLED_BORDER_COLOR: var(
+  --flt-checkbox-disabled-border-color,
+  #6b7280
+);
+$FLT_CHECKBOX_DISABLED_BG_COLOR: var(--flt-checkbox-disabled-bg-color, #e5e7eb);
+$FLT_CHECKBOX_DISABLED_AGREE_COLOR: var(--flt-checkbox-agree-color, #9ca3af);
+
+$FLT_CHECKBOX_HOVER_BORDER_COLOR: var(
+  --flt-checkbox-hover-border-color,
+  #111827
+);
+$FLT_CHECKBOX_HOVER_BG_COLOR: var(--flt-checkbox-hover-bg-color, #f9fafb);
+// <- CHECKBOX
 ```
 
 ## Release Notes:
 
+- v.2.2.1
+  - Bug fix expose flt/checkbox
+
+---
+
+- v.2.2.0
+  - Added Component `flt-checkbox`
+
+---
+
+- v.2.1.1
+  - Added to `Button` new type `secondary`
+  - Added to `Button` new size `xs`
+  - Bug fix `loader`, now you can override available theme with mixins
+
+---
+
 - v.2.0.1
   - Bug fix export loader
 
@@ -163,6 +233,7 @@ $FLT_BUTTON_LABEL_PADDING: var(--flt-button-label-padding, 0);
   - Small refactoring in all components
 
 ---
+
 - v.1.6.0
   - Added new extendable components: `BaseElement` and `LightningDomElement`
 

package/frontend/common/mixins_amber.scss

@@ -8,11 +8,16 @@ $FLT_ICON_COLOR: var(--flt-icon-color, #111827);
 // <- ICON
 
 // BUTTON ->
-$FLT_BUTTON_PRIMARY_BG_COLOR: var(--flt-button-primary-bg-color, #f2d400);
+$FLT_BUTTON_PRIMARY_BG_COLOR: var(--flt-button-primary-bg-color, #59eb9c);
 $FLT_BUTTON_PRIMARY_COLOR: var(--flt-button-primary-color, #111827);
 $FLT_BUTTON_PRIMARY_DISABLED_COLOR: var(--flt-button-primary-disabled-color, #6b7280);
 $FLT_BUTTON_PRIMARY_DISABLED_BG_COLOR: var(--flt-button-primary-disabled-bg-color, #f3f4f6);
 
+$FLT_BUTTON_SECONDARY_BG_COLOR: var(--flt-button-secondary-bg-color, #f2d400);
+$FLT_BUTTON_SECONDARY_COLOR: var(--flt-button-secondary-color, #111827);
+$FLT_BUTTON_SECONDARY_DISABLED_COLOR: var(--flt-button-secondary-disabled-color, #6b7280);
+$FLT_BUTTON_SECONDARY_DISABLED_BG_COLOR: var(--flt-button-secondary-disabled-bg-color, #f3f4f6);
+
 $FLT_BUTTON_BASE_BG_COLOR: var(--flt-button-base-bg-color, #ffffff);
 $FLT_BUTTON_BASE_COLOR: var(--flt-button-base-color, #111827);
 $FLT_BUTTON_BASE_BORDER_COLOR: var(--flt-button-base-border-color, #111827);
@@ -24,6 +29,9 @@ $FLT_BUTTON_LINK_COLOR: var(--flt-button-link-color, #111827);
 $FLT_BUTTON_LINK_DISABLED_COLOR: var(--flt-button-link-disabled-color, #9ca3af);
 $FLT_BUTTON_LINK_HOVER_COLOR: var(--flt-button-link-hover-color, #6b7280);
 
+$FLT_BUTTON_X_SMALL_HEIGHT: var(--flt-button-x-small-height, 40px);
+$FLT_BUTTON_X_SMALL_FONT_SIZE: var(--flt-button-x-small-font-size, 14px);
+
 $FLT_BUTTON_SMALL_HEIGHT: var(--flt-button-small-height, 44px);
 $FLT_BUTTON_SMALL_FONT_SIZE: var(--flt-button-small-font-size, 14px);
 
@@ -34,5 +42,21 @@ $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 ->
+$FLT_CHECKBOX_BORDER_COLOR: var(--flt-checkbox-border-color, #6b7280);
+$FLT_CHECKBOX_BG_COLOR: var(--flt-checkbox-bg-color, #ffffff);
+
+$FLT_CHECKBOX_AGREE_COLOR: var(--flt-checkbox-agree-color, #59eb9c);
+$FLT_CHECKBOX_COLOR: var(--flt-checkbox-color, #111827);
+$FLT_CHECKBOX_ERROR_COLOR: var(--flt-checkbox-error-color, #ed123d);
+
+$FLT_CHECKBOX_DISABLED_COLOR: var(--flt-checkbox-disabled-color, #6b7280);
+$FLT_CHECKBOX_DISABLED_BORDER_COLOR: var(--flt-checkbox-disabled-border-color, #6b7280);
+$FLT_CHECKBOX_DISABLED_BG_COLOR: var(--flt-checkbox-disabled-bg-color, #e5e7eb);
+$FLT_CHECKBOX_DISABLED_AGREE_COLOR: var(--flt-checkbox-agree-color, #9ca3af);
+
+$FLT_CHECKBOX_HOVER_BORDER_COLOR: var(--flt-checkbox-hover-border-color, #111827);
+$FLT_CHECKBOX_HOVER_BG_COLOR: var(--flt-checkbox-hover-bg-color, #f9fafb);
+// <- CHECKBOX

package/frontend/common/mixins_aquamarine.scss

@@ -13,6 +13,11 @@ $FLT_BUTTON_PRIMARY_COLOR: var(--flt-button-primary-color, #f9fafb);
 $FLT_BUTTON_PRIMARY_DISABLED_COLOR: var(--flt-button-primary-disabled-color, #6b7280);
 $FLT_BUTTON_PRIMARY_DISABLED_BG_COLOR: var(--flt-button-primary-disabled-bg-color, #f3f4f6);
 
+$FLT_BUTTON_SECONDARY_BG_COLOR: var(--flt-button-secondary-bg-color, #f2d400);
+$FLT_BUTTON_SECONDARY_COLOR: var(--flt-button-secondary-color, #111827);
+$FLT_BUTTON_SECONDARY_DISABLED_COLOR: var(--flt-button-secondary-disabled-color, #6b7280);
+$FLT_BUTTON_SECONDARY_DISABLED_BG_COLOR: var(--flt-button-secondary-disabled-bg-color, #f3f4f6);
+
 $FLT_BUTTON_BASE_BG_COLOR: var(--flt-button-base-bg-color, #ffffff);
 $FLT_BUTTON_BASE_COLOR: var(--flt-button-base-color, #111827);
 $FLT_BUTTON_BASE_BORDER_COLOR: var(--flt-button-base-border-color, #111827);
@@ -24,6 +29,9 @@ $FLT_BUTTON_LINK_COLOR: var(--flt-button-link-color, #111827);
 $FLT_BUTTON_LINK_DISABLED_COLOR: var(--flt-button-link-disabled-color, #9ca3af);
 $FLT_BUTTON_LINK_HOVER_COLOR: var(--flt-button-link-hover-color, #6b7280);
 
+$FLT_BUTTON_X_SMALL_HEIGHT: var(--flt-button-x-small-height, 40px);
+$FLT_BUTTON_X_SMALL_FONT_SIZE: var(--flt-button-x-small-font-size, 14px);
+
 $FLT_BUTTON_SMALL_HEIGHT: var(--flt-button-small-height, 44px);
 $FLT_BUTTON_SMALL_FONT_SIZE: var(--flt-button-small-font-size, 14px);
 
@@ -36,3 +44,20 @@ $FLT_BUTTON_LARGE_FONT_SIZE: var(--flt-button-large-font-size, 15px);
 $FLT_BUTTON_LABEL_PADDING: var(--flt-button-label-padding, 0);
 
 // <- BUTTON
+
+// CHECKBOX ->
+$FLT_CHECKBOX_BORDER_COLOR: var(--flt-checkbox-border-color, #6b7280);
+$FLT_CHECKBOX_BG_COLOR: var(--flt-checkbox-bg-color, #ffffff);
+
+$FLT_CHECKBOX_AGREE_COLOR: var(--flt-checkbox-agree-color, #59eb9c);
+$FLT_CHECKBOX_COLOR: var(--flt-checkbox-color, #111827);
+$FLT_CHECKBOX_ERROR_COLOR: var(--flt-checkbox-error-color, #ed123d);
+
+$FLT_CHECKBOX_DISABLED_COLOR: var(--flt-checkbox-disabled-color, #6b7280);
+$FLT_CHECKBOX_DISABLED_BORDER_COLOR: var(--flt-checkbox-disabled-border-color, #6b7280);
+$FLT_CHECKBOX_DISABLED_BG_COLOR: var(--flt-checkbox-disabled-bg-color, #e5e7eb);
+$FLT_CHECKBOX_DISABLED_AGREE_COLOR: var(--flt-checkbox-agree-color, #9ca3af);
+
+$FLT_CHECKBOX_HOVER_BORDER_COLOR: var(--flt-checkbox-hover-border-color, #111827);
+$FLT_CHECKBOX_HOVER_BG_COLOR: var(--flt-checkbox-hover-bg-color, #f9fafb);
+// <- CHECKBOX

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

@@ -30,6 +30,17 @@ describe('flt-button', () => {
         expect(buttonSmallPrimary.firstChild.classList).toContain('flt-button_small')
         expect(buttonSmallPrimary.firstChild.classList).not.toContain('flt-button_disabled')
 
+        const buttonXSmallSecondary = createElement('flt-button', { is: Button })
+        buttonXSmallSecondary.label = 'Small Primary'
+        buttonXSmallSecondary.type = 'secondary'
+        buttonXSmallSecondary.size = 'xs'
+        document.body.appendChild(buttonXSmallSecondary)
+
+        expect(buttonXSmallSecondary.firstChild.classList).toContain('flt-button')
+        expect(buttonXSmallSecondary.firstChild.classList).toContain('flt-button_secondary')
+        expect(buttonXSmallSecondary.firstChild.classList).toContain('flt-button_x-small')
+        expect(buttonXSmallSecondary.firstChild.classList).not.toContain('flt-button_disabled')
+
         const buttonMediumBaseDisabled = createElement('flt-button', { is: Button })
         buttonMediumBaseDisabled.label = 'Medium Base Disabled'
         buttonMediumBaseDisabled.type = 'base'

package/frontend/components/flt/button/button.js

@@ -30,6 +30,7 @@ export default class Button extends BaseElement {
 }
 
 const SIZES = {
+    xs: 'x-small',
     small: 'small',
     medium: 'medium',
     large: 'large'
@@ -37,6 +38,7 @@ const SIZES = {
 
 const TYPES = {
     primary: 'primary',
+    secondary: 'secondary',
     base: 'base',
     link: 'link'
 }

package/frontend/components/flt/button/button.scss

@@ -72,6 +72,23 @@ button {
         @include flt-icon-path($FLT_BUTTON_PRIMARY_COLOR);
     }
 
+    &_secondary[disabled] {
+        cursor: not-allowed;
+        color: $FLT_BUTTON_SECONDARY_DISABLED_COLOR;
+        background-color: $FLT_BUTTON_SECONDARY_DISABLED_BG_COLOR;
+
+        @include flt-icon-path($FLT_BUTTON_PRIMARY_DISABLED_COLOR);
+    }
+
+    &_secondary:not([disabled]) {
+        color: $FLT_BUTTON_SECONDARY_COLOR;
+        background-color: $FLT_BUTTON_SECONDARY_BG_COLOR;
+        transition: all 0.3s;
+
+        @include flt-button-hover();
+        @include flt-icon-path($FLT_BUTTON_SECONDARY_COLOR);
+    }
+
     &_base:not([disabled]) {
         color: $FLT_BUTTON_BASE_COLOR;
         background-color: $FLT_BUTTON_BASE_BG_COLOR;
@@ -111,6 +128,11 @@ button {
         @include flt-icon-path($FLT_BUTTON_LINK_COLOR);
     }
 
+    &_x-small {
+        height: $FLT_BUTTON_X_SMALL_HEIGHT;
+        font-size: $FLT_BUTTON_X_SMALL_FONT_SIZE;
+    }
+
     &_small {
         height: $FLT_BUTTON_SMALL_HEIGHT;
         font-size: $FLT_BUTTON_SMALL_FONT_SIZE;

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

@@ -0,0 +1,76 @@
+import { createElement } from 'lwc'
+
+import Checkbox from 'flt/checkbox'
+
+describe('flt-checkbox', () => {
+    afterEach(() => {
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('Generate default checkbox', async () => {
+        const checkboxDefault = createElement('flt-checkbox', { is: Checkbox })
+        checkboxDefault.label = 'Hello world'
+        checkboxDefault.name = 'agree'
+        document.body.appendChild(checkboxDefault)
+
+        await expect(checkboxDefault.firstChild.classList).toContain('flt-checkbox')
+        await expect(checkboxDefault.firstChild.classList).toContain('flt-checkbox_size_s')
+        await expect(checkboxDefault.firstChild.classList).not.toContain('flt-checkbox_disabled')
+
+        const valid = checkboxDefault.isValid()
+        await expect(valid).toBeTruthy()
+        let data = checkboxDefault.getData()
+        await expect(data.value).toBeFalsy()
+        await checkboxDefault.firstChild.click()
+        data = checkboxDefault.getData()
+        await expect(data.value).toBeTruthy()
+        await expect(checkboxDefault.firstChild.classList).toContain('flt-checkbox_active')
+    })
+
+    it('Generate requie checkbox', async () => {
+        const checkboxRequie = createElement('flt-checkbox', { is: Checkbox })
+        checkboxRequie.label = 'Hello world'
+        checkboxRequie.name = 'agree'
+        checkboxRequie.required = true
+        document.body.appendChild(checkboxRequie)
+
+        const valid = checkboxRequie.isValid()
+        await expect(valid).toBeFalsy()
+        let data = checkboxRequie.getData()
+        await expect(data.value).toBeFalsy()
+
+        const checkboxRequieErrorElement = document.querySelector('.flt-checkbox__error-message')
+        await expect(checkboxRequieErrorElement.classList).toContain('flt-checkbox__error-message_active')
+
+        await checkboxRequie.firstChild.click()
+        data = checkboxRequie.getData()
+        await expect(data.value).toBeTruthy()
+        await expect(checkboxRequie.firstChild.classList).not.toContain('flt-checkbox_error')
+        await expect(checkboxRequieErrorElement.classList).not.toContain(
+            'flt-checkbox__error-message_active'
+        )
+    })
+
+    it('Generate disbled checkbox', async () => {
+        const checkboxDisabled = createElement('flt-checkbox', { is: Checkbox })
+        checkboxDisabled.label = 'Hello world'
+        checkboxDisabled.name = 'agree'
+        checkboxDisabled.disabled = true
+        document.body.appendChild(checkboxDisabled)
+
+        await expect(checkboxDisabled.firstChild.classList).toContain('flt-checkbox')
+        await expect(checkboxDisabled.firstChild.classList).toContain('flt-checkbox_size_s')
+        await expect(checkboxDisabled.firstChild.classList).toContain('flt-checkbox_disabled')
+
+        const valid = checkboxDisabled.isValid()
+        await expect(valid).toBeTruthy()
+        let data = checkboxDisabled.getData()
+        await expect(data.value).toBeFalsy()
+        await checkboxDisabled.firstChild.click()
+        data = checkboxDisabled.getData()
+        await expect(data.value).toBeFalsy()
+        await expect(checkboxDisabled.firstChild.classList).not.toContain('flt-checkbox_active')
+    })
+})

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

@@ -0,0 +1,29 @@
+<template lwc:render-mode="light">
+    <label class={computedLabelClass}>
+        <input
+            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">
+                <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>
+</template>

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

@@ -0,0 +1,51 @@
+import './checkbox.scss'
+
+import { api } from 'lwc'
+import { CheckboxElement } from 'fleetcor-lwc'
+
+/**
+ * @class Checkbox
+ * @extends CheckboxElement
+ * @description Flt checkbox component
+ */
+export default class Checkbox extends CheckboxElement {
+    error
+    
+    @api errorMessage
+    @api size = SIZES.SMALL
+
+    @api validate() {
+        this.error = !this.isValid()
+    }
+
+    get computedErrorMessage() {
+        return this.generateClassNameList({
+            'flt-checkbox__error-message': true,
+            'flt-checkbox__error-message_active': this.error
+        })
+    }
+    get computedSpanClass() {
+        return this.generateClassNameList({
+            'flt-checkbox__icon': true,
+            'flt-checkbox__icon_active': this.value
+        })
+    }
+    get computedLabelClass() {
+        return this.generateClassNameList({
+            'flt-checkbox': true,
+            'flt-checkbox_active': this.value,
+            'flt-checkbox_disabled': this.disabled,
+            'flt-checkbox_error': this.error,
+            [`flt-checkbox_size_${this.size}`]: true
+        })
+    }
+
+    renderedCallback() {
+        super.renderedCallback()
+        this.querySelector('.flt-checkbox__label').innerHTML = this.label
+    }
+}
+
+const SIZES = {
+    SMALL: 's'
+}

package/frontend/components/flt/checkbox/checkbox.scss

@@ -0,0 +1,97 @@
+@import './../../../common/mixins_aquamarine';
+/* mixins */
+
+.flt-checkbox {
+    display: flex;
+    cursor: pointer;
+
+    &:hover:not(.flt-checkbox_disabled, .flt-checkbox_error) {
+        .flt-checkbox__icon {
+            border-color: $FLT_CHECKBOX_HOVER_BORDER_COLOR;
+            background-color: $FLT_CHECKBOX_HOVER_BG_COLOR;
+        }
+    }
+
+    &_disabled {
+        cursor: not-allowed;
+
+        .flt-checkbox__icon {
+            border-color: $FLT_CHECKBOX_DISABLED_BORDER_COLOR;
+            background-color: $FLT_CHECKBOX_DISABLED_BG_COLOR;
+        }
+
+        .flt-checkbox__label {
+            color: $FLT_CHECKBOX_DISABLED_COLOR;
+        }
+
+        .flt-checkbox__icon-agree-path {
+            stroke: $FLT_CHECKBOX_DISABLED_AGREE_COLOR;
+        }
+    }
+
+    &_error {
+        .flt-checkbox__icon {
+            border-color: $FLT_CHECKBOX_ERROR_COLOR;
+        }
+    }
+
+    &_size_s {
+        font-size: 14px;
+        line-height: 1.5;
+
+        & + .flt-checkbox__error-message {
+            font-size: 12px;
+        }
+
+        .flt-checkbox__icon {
+            width: 1.25rem;
+            height: 1.25rem;
+        }
+    }
+
+    &__input {
+        display: none;
+    }
+
+    &__icon {
+        display: flex;
+        border: 1px solid $FLT_CHECKBOX_BORDER_COLOR;
+        background-color: $FLT_CHECKBOX_BG_COLOR;
+        border-radius: 6px;
+        box-sizing: border-box;
+        margin-right: 1rem;
+        flex-shrink: 0;
+        transition: all 0.3s;
+    }
+
+    &__icon-agree {
+        display: inline-block;
+        width: 100%;
+        height: 100%;
+    }
+
+    &__icon-agree-path {
+        stroke: $FLT_CHECKBOX_AGREE_COLOR;
+    }
+
+    &__label {
+        color: $FLT_CHECKBOX_COLOR;
+
+        a {
+            color: inherit;
+        }
+    }
+
+    &__error-message {
+        color: $FLT_CHECKBOX_ERROR_COLOR;
+        margin-left: 36px;
+        opacity: 0;
+        line-height: 0;
+        transition: all 0.3s;
+
+        &_active {
+            opacity: 1;
+            line-height: 1.5;
+        }
+    }
+}

package/frontend/core/interface/CheckboxElement.js

@@ -1,3 +1,4 @@
+import { api } from 'lwc'
 import { UserDataValidator } from 'fleetcor-lwc'
 
 /**
@@ -6,4 +7,20 @@ import { UserDataValidator } from 'fleetcor-lwc'
  * @extends UserDataValidator
  * @description This class is used to mark a component as a checkbox element
  */
-export default class CheckboxElement extends UserDataValidator {}
+export default class CheckboxElement extends UserDataValidator {
+    @api isValid() {
+        return this.required ? !!this.value : true
+    }
+
+    handleChange(event) {
+        event.stopPropagation()
+        if (!this.disabled) {
+            this.value = !this.value
+            this.dispatchEvent(
+                new CustomEvent('change', {
+                    detail: this.getData()
+                })
+            )
+        }
+    }
+}

package/frontend/core/interface/UserDataManager.js

@@ -12,11 +12,17 @@ export default class UserDataManager extends BaseElement {
     @api name
     @api value
     @api group
+    @api disabled
+    @api required
+    @api label
 
     @api getData() {
         return {
             name: this.name,
+            disabled: this.disabled,
             value: this.value,
+            required: this.required,
+            label: this.label,
             group: this.group
         }
     }

package/loader/index.js

@@ -5,7 +5,16 @@ const path = require('path')
 module.exports = function (source) {
     const options = loaderUtils.getOptions(this)
     let content = ''
-    if (options && options.mixins) {
+    if (options && options.mixins && options.theme) {
+        const pathMixin = path.resolve(options.mixins)
+        this.addDependency(pathMixin)
+        content = fs.readFileSync(pathMixin).toString()
+        source = source.replace(
+            `@import './../../../common/mixins_aquamarine';`,
+            `@import './../../../common/mixins_${options.theme}';`
+        )
+        source = source.replace('/* mixins */', content)
+    } else if (options && options.mixins) {
         const pathMixin = path.resolve(options.mixins)
         this.addDependency(pathMixin)
         content = fs.readFileSync(pathMixin).toString()

package/package.json

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