fleetcor-lwc 2.1.1 → 2.2.2

package/README.md

@@ -50,6 +50,21 @@ 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:
 
@@ -153,10 +168,48 @@ $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
 ```
 
 ## Release Notes:
 
+- v.2.2.2
+  - Bug fix checkbox link underline text
+
+---
+
+- 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`

package/frontend/common/mixins_amber.scss

@@ -42,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

@@ -44,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/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,98 @@
+@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;
+            text-decoration: underline;
+        }
+    }
+
+    &__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/package.json

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