fleetcor-lwc 1.0.0

package/README.md

@@ -0,0 +1,8 @@
+# Fleetcor LWC
+
+- v.1.0.0 
+    + Setup project
+    + Added Component `flt-button`
+
+-----------------------------------------
+

package/frontend/common/mixins_amber.scss

@@ -0,0 +1,13 @@
+// BUTTON ->
+$FLT_BUTTON_PRIMARY_BG_COLOR: var(--flt-button-primary-bg-color, #f2d400);
+$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_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);
+$FLT_BUTTON_BASE_DISABLED_COLOR: var(--flt-button-base-disabled-color, #6b7280);
+$FLT_BUTTON_BASE_DISABLED_BG_COLOR: var(--flt-button-base-disabled-bg-color, #f3f4f6);
+$FLT_BUTTON_BASE_DISABLED_BORDER_COLOR: var(--flt-button-base-disabled-border-color, #6b7280);
+// <- BUTTON

package/frontend/common/mixins_aquamarine.scss

@@ -0,0 +1,13 @@
+// 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);
+$FLT_BUTTON_PRIMARY_DISABLED_BG_COLOR: var(--flt-button-primary-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);
+$FLT_BUTTON_BASE_DISABLED_COLOR: var(--flt-button-base-disabled-color, #6b7280);
+$FLT_BUTTON_BASE_DISABLED_BG_COLOR: var(--flt-button-base-disabled-bg-color, #f3f4f6);
+$FLT_BUTTON_BASE_DISABLED_BORDER_COLOR: var(--flt-button-base-disabled-border-color, #6b7280);
+// <- BUTTON

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

@@ -0,0 +1,33 @@
+import { createElement } from 'lwc'
+import Button from 'flt/button'
+
+describe('ui-button', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('displays greeting', () => {
+        // Create element
+        const element_1 = createElement('flt-button', {
+            is: Button
+        })
+        element_1.type = 'primary'
+        element_1.label = 'Add'
+        document.body.appendChild(element_1)
+        expect(element_1.firstChild.classList.contains('flt-button_primary')).toBeTruthy()
+
+        const element_2 = createElement('flt-button', {
+            is: Button
+        })
+        element_2.type = 'base'
+        element_2.disabled = true
+        element_2.label = 'Add'
+        document.body.appendChild(element_2)
+
+        expect(element_2.firstChild.classList.contains('flt-button_base')).toBeTruthy()
+        expect(element_2.firstChild.classList.contains('flt-button_disabled')).toBeTruthy()
+    })
+})

package/frontend/components/flt/button/button.html

@@ -0,0 +1,7 @@
+<template lwc:render-mode="light">
+    <button class={cssClass} disabled={disabled}>
+        <flt-icon class="flt-button__icon-left" if:true={iconLeft} icon={iconLeft}></flt-icon>
+        {label}
+        <flt-icon class="flt-button__icon-right" if:true={iconRight} icon={iconRight}></flt-icon>
+    </button>
+</template>

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

@@ -0,0 +1,30 @@
+import './button.scss'
+import { LightningElement, api } from 'lwc'
+
+const PRIMARY = 'primary'
+const BASE = 'base'
+export default class Button extends LightningElement {
+    static renderMode = 'light'
+
+    @api type = PRIMARY
+    @api label
+    @api disabled
+    @api iconLeft
+    @api iconRight
+
+    get cssClass() {
+        let result = 'flt-button'
+
+        if (this.disabled) {
+            result += ' flt-button_disabled'
+        }
+
+        if (this.type === PRIMARY) {
+            result += ' flt-button_primary'
+        } else if (this.type === BASE) {
+            result += ' flt-button_base'
+        }
+
+        return result
+    }
+}

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

@@ -0,0 +1,96 @@
+@import './../../../common/mixins_aquamarine';
+/* mixins */
+
+button {
+    display: inline-block;
+    background: none repeat scroll 0 0 transparent;
+    border: medium none;
+    border-spacing: 0;
+    font-size: 16px;
+    list-style: none outside none;
+    margin: 0;
+    padding: 0;
+    text-decoration: none;
+    text-indent: 0;
+
+    &::-moz-focus-inner {
+        border: 0;
+        padding: 0;
+    }
+
+    &[disabled] {
+        color: initial;
+    }
+}
+
+@mixin flt-icon-path($stroke) {
+    .flt-icon__path {
+        stroke: $stroke;
+    }
+}
+
+@mixin flt-button-hover() {
+    &:hover {
+        box-shadow: 0px 4px 6px -1px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.1);
+    }
+}
+
+.flt-button {
+    cursor: pointer;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 18px;
+    font-family: inherit;
+    border-radius: 32px;
+    box-sizing: border-box;
+    padding: 0.75rem 2rem;
+
+    &_primary[disabled] {
+        cursor: not-allowed;
+        color: $FLT_BUTTON_PRIMARY_DISABLED_COLOR;
+        background-color: $FLT_BUTTON_PRIMARY_DISABLED_BG_COLOR;
+
+        @include flt-icon-path($FLT_BUTTON_PRIMARY_DISABLED_COLOR);
+    }
+
+    &_primary:not([disabled]) {
+        color: $FLT_BUTTON_PRIMARY_COLOR;
+        background-color: $FLT_BUTTON_PRIMARY_BG_COLOR;
+        transition: all 0.3s;
+
+        @include flt-button-hover();
+        @include flt-icon-path($FLT_BUTTON_PRIMARY_COLOR);
+    }
+
+    &_base:not([disabled]) {
+        color: $FLT_BUTTON_BASE_COLOR;
+        background-color: $FLT_BUTTON_BASE_BG_COLOR;
+        border: 1px solid $FLT_BUTTON_BASE_BORDER_COLOR;
+        transition: all 0.3s;
+
+        @include flt-button-hover();
+        @include flt-icon-path($FLT_BUTTON_BASE_COLOR);
+    }
+
+    &_base[disabled] {
+        cursor: not-allowed;
+        color: $FLT_BUTTON_BASE_DISABLED_COLOR;
+        background-color: $FLT_BUTTON_BASE_DISABLED_BG_COLOR;
+        border: 1px solid $FLT_BUTTON_BASE_DISABLED_BORDER_COLOR;
+
+        @include flt-icon-path($FLT_BUTTON_BASE_DISABLED_COLOR);
+    }
+
+    &__icon-left {
+        display: flex;
+        margin-right: 1rem;
+    }
+
+    &__icon-right {
+        display: flex;
+        margin-left: 1rem;
+    }
+}

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

@@ -0,0 +1,30 @@
+import { createElement } from 'lwc'
+import Icon from 'flt/icon'
+
+describe('flt-icon', () => {
+    afterEach(() => {
+        // The jsdom instance is shared across test cases in a single file so reset the DOM
+        while (document.body.firstChild) {
+            document.body.removeChild(document.body.firstChild)
+        }
+    })
+
+    it('displays greeting', () => {
+        // Create element
+        const element_1 = createElement('flt-icon', {
+            is: Icon
+        })
+        element_1.icon = 'arrow-right'
+        document.body.appendChild(element_1)
+
+        expect(element_1.firstChild.classList.contains('flt-icon__arrow-right')).toBeTruthy()
+
+        const element_2 = createElement('flt-icon', {
+            is: Icon
+        })
+        element_2.icon = 'arrow-left'
+        document.body.appendChild(element_2)
+
+        expect(element_2.firstChild.classList.contains('flt-icon__arrow-left')).toBeTruthy()
+    })
+})

package/frontend/components/flt/icon/arrow-left.html

@@ -0,0 +1,15 @@
+<template lwc:render-mode="light">
+    <svg
+        class="flt-icon flt-icon__arrow-left"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            class="flt-icon__path"
+            d="M3 12H21M10 19L3 12L10 19ZM3 12L10 5L3 12Z"
+            stroke-linecap="round"
+            stroke-linejoin="round"></path>
+    </svg>
+</template>

package/frontend/components/flt/icon/arrow-right.html

@@ -0,0 +1,15 @@
+<template lwc:render-mode="light">
+    <svg
+        class="flt-icon flt-icon__arrow-right"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg">
+        <path
+            class="flt-icon__path"
+            d="M21 12H3M14 5L21 12L14 5ZM21 12L14 19L21 12Z"
+            stroke-linecap="round"
+            stroke-linejoin="round"></path>
+    </svg>
+</template>

package/frontend/components/flt/icon/icon.js

@@ -0,0 +1,21 @@
+import './icon.scss'
+import { LightningElement, api } from 'lwc'
+import TMPL_ARROW_RIGHT from './arrow-right.html'
+import TMPL_ARROW_LEFT from './arrow-left.html'
+
+const I_ARROW_RIGHT = 'arrow-right'
+const I_ARROW_LEFT = 'arrow-left'
+
+export default class Icon extends LightningElement {
+    static renderMode = 'light'
+
+    @api icon
+
+    render() {
+        let result = TMPL_ARROW_RIGHT
+        if (this.icon === I_ARROW_LEFT) {
+            result = TMPL_ARROW_LEFT
+        }
+        return result
+    }
+}

package/frontend/components/flt/icon/icon.scss

@@ -0,0 +1,9 @@
+.flt-icon {
+    width: 24px;
+    height: 24px;
+    display: inline-flex;
+
+    &__path {
+        stroke: #000;
+    }
+}

package/loader/index.js

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

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "fleetcor-lwc",
+  "version": "1.0.0",
+  "description": "LWC framework by Fleetcor",
+  "repository": {
+    "type": "git",
+    "url": "https://git.fleetcor.com/Aleksandr.Zanko/fleetcor-lwc.git"
+  },
+  "author": "Fleetcor team",
+  "license": "ISC",
+  "files": [
+    "frontend/components/flt",
+    "frontend/common",
+    "loader"
+  ],
+  "lwc": {
+    "modules": [
+      {
+        "dir": "frontend/components"
+      }
+    ],
+    "expose": [
+      "flt/button"
+    ]
+  },
+  "keywords": [
+    "lwc"
+  ],
+  "scripts": {
+    "watch": "webpack serve --open --port 8080",
+    "test:unit": "sfdx-lwc-jest",
+    "test:unit:watch": "sfdx-lwc-jest --watch",
+    "test:unit:debug": "sfdx-lwc-jest --debug",
+    "test:unit:coverage": "sfdx-lwc-jest --coverage",
+    "prettier": "prettier --config .prettierrc --write ./"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
+    "@babel/plugin-transform-runtime": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@salesforce/sfdx-lwc-jest": "^1.2.1",
+    "babel-loader": "^8.1.0",
+    "prettier": "^2.3.2",
+    "css-loader": "^6.2.0",
+    "html-loader": "^2.1.2",
+    "html-webpack-plugin": "^5.3.2",
+    "lwc": "^2.3.0",
+    "lwc-webpack-plugin": "^2.0.1",
+    "mini-css-extract-plugin": "^2.2.0",
+    "identity-obj-proxy": "^3.0.0",
+    "node-sass": "^7.0.1",
+    "postcss-loader": "^6.1.1",
+    "pug-html-loader": "^1.1.5",
+    "pug-loader": "^2.4.0",
+    "resolve-url-loader": "^4.0.0",
+    "sass": "^1.37.5",
+    "sass-loader": "^12.1.0",
+    "style-loader": "^3.2.1",
+    "webpack": "^5.48.0",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^3.11.2",
+    "d": "^1.0.1",
+    "loader-utils": "^2.0.0"
+  }
+}