fleetcor-lwc

v2.9.1

Published

3 months ago

LWC framework by Fleetcor

Downloads

207

0High
0Medium
0Low

lwc.fleetcor

lwc

Fleetcor LWC

About

The Fleetcor LWC framework is a set of popular LWC components for use in any client-side web development projects.

It will help you speed up the process of building any web application.

How to install

In your project open terminal and install fleetcor-lwc

npm i fleetcor-lwc

Add / update lwc.config.json file in your project

...
{
    "modules": [
        ...
        {
            "npm": "fleetcor-lwc"
        }
    ]
}
...

Use Webpack fleetcor-lwc-loader

There are available style themes: amber and aquamarine Customize with mixins: path to .scss file

Add fleetcor-lwc-loader to webpack.config.json, by default we use aquamarine style theme. You can change theme with loader options theme

...
{
    test: /\.scss$/i,
    use: [
        "style-loader",
        "css-loader",
        {
            loader: "sass-loader"
        },
        {
            loader: 'fleetcor-lwc/loader',
            options: {
                theme: 'amber', // amber | aquamarine
            }
        }
    ]
}
...

You can ovverride theme styles with your own styles values stored in file with extantion .scss

...
const pathConstants = 'frontend/common/mixins.scss';
...
{
    test: /\.scss$/i,
    use: [
        "style-loader",
        "css-loader",
        {
            loader: "sass-loader"
        },
        {
            loader: 'fleetcor-lwc/loader',
            options: {
                theme: 'aquamarine',
                mixins: pathWithConstants
            }
        }
    ]
}
...

Components

Radio Group Icon

<flt-radio-group-icon
  size="s"
  name="city"
  disabled
  required
  group="main"
  options="[{icon:'///icon-path', value:'London'}, {icon:'///icon-path', value:'Leon'}]"
  value="London"
></flt-radio-group-icon>
...

Radio Group Icon variables

| @api | type | values | required | description | | ------------- | ------ | ------ | -------- | ----------------------------------------------------------------------------------------- | | name | string | | + | | | options | array | | + | Array of available items which have icon with path of icon and value as unique string | | size | string | s | - | | | value | string | | - | Current value from options items value | | disabled | bool | | - | | | required | bool | | - | | | group | string | | - | | | error-message | string | | - | |

Radio Group Icon methods

| @api | params | return type | description | | -------- | ----------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- | | validate | | void | Check component validation and show error message to user | | isValid | | bool | Return true or false | | getData | silent:bool | object | Return full data of component's state. If silent true - return value will be without any errors displaying for client |

Radio Group Icon events

| name | handle | return | description | | ------ | ------------ | ------ | ------------------------------------- | | change | event.detail | object | Return full data of component's state |

Radio Group

<flt-radio-group
  size="s"
  name="city"
  disabled
  required
  group="main"
  options="[{label:'London', value:'London'}, {label:'Leon', value:'Leon'}]"
  value="London"
  label="City"
></flt-radio-group>
...

Radio Group variables

| @api variables | type | values | required | description | | -------------- | ------ | ------ | -------- | ---------------------------------------------------------------------------------------- | | name | string | | + | | | options | array | | + | Array of available items which have label with any string and value as unique string | | size | string | s | - | | | value | string | | - | Current value from options items value | | label | string | | - | It is main label for items value | | disabled | bool | | - | | | required | bool | | - | | | group | string | | - | | | error-message | string | | - | |

Radio Group methods

Radio Group events

| name | handle | return | description | | ------ | ------------ | ------ | ------------------------------------- | | change | event.detail | object | Return full data of component's state |

Checkbox

<flt-checkbox
  size="small"
  name="agreement"
  disabled
  required
  group="main"
  value="true"
  label="Next"
></flt-checkbox>
...

Checkbox variables

| @api variables | type | values | required | description | | -------------- | ------ | ------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- | | name | string | | + | | | size | string | small or medium | - | | | value | bool | | - | | | label | html | | - | Label set to template as HTML content. You can user tag a with attribute view-modal to catch viewmodal Custom Event by click on it | | disabled | bool | | - | | | required | bool | | - | | | group | string | | - | | | error-message | string | | - | |

Checkbox methods

Checkbox events

| name | handle | return | description | | ------ | ------------ | ------ | ------------------------------------- | | change | event.detail | object | Return full data of component's state |

Button

<flt-button
  type="base|primary|secondary|link"
  size="xs|small|medium|large"
  icon-left="arrow-left"
  icon-right="arrow-left"
  disabled
  label="Next"
></flt-button>
...

Button variables

| @api variables | type | values | required | description | | -------------- | ------ | -------------------------------- | -------- | ------------------------------- | | type | string | base, primary, secondary, link | - | | | size | string | xs, small, medium, large | - | | | icon-left | string | arrow-left, ... | - | any value from Icon component | | icon-right | string | arrow-right, ... | - | any value from Icon component | | label | string | | - | | | disabled | bool | | - | |

Icon

<flt-icon icon="arrow-left"></flt-icon>

Icon variables

| @api variables | type | values | required | description | | -------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ----------- | | icon | string | arrow-left, ev, carwash, car, van, unleaded, fuel, driver, vehicle, both, shared-card, ev-and-fuel, oil, key, blocked, multiple-users,arrow-right, diesel, hydrogen, signature, plus, plus-small, document, close, hgv | - | |

Tooltip

<flt-tooltip content="Text description info" corner="12">
  <!-- Any html element -->
  <flt-icon icon="arrow-left"></flt-icon>
</flt-tooltip>

...

Tooltip variables

| @api variables | type | values | required | description | | -------------- | ---- | ------ | -------- | --------------------------------- | | content | html | | + | | | corner | int | | - | change corner radius of container |

Tooltip slot

| slot | description | | ------ | ----------------------------- | | defalt | any html element can be there |

Override styles

You can copy any variables from this list and override them as you wish. For that you have to use fleetcor-lwc-loader with .scss file. Also you can use global css variables as priority.

/* this is aquamarine mixins.scss */

// TOOLTIP ->
$FLT_TOOLTIP_BG_COLOR: var(--flt-tooltip-bg-color, #374151);
$FLT_TOOLTIP_COLOR: var(--flt-tooltip-bg-color, #f9fafb);
// <- TOOLTIP

// ICON ->
$FLT_ICON_COLOR: var(--flt-icon-color, #111827);
// <- ICON

// 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_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);
$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
);

$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);

$FLT_BUTTON_MEDIUM_HEIGHT: var(--flt-button-medium-height, 52px);
$FLT_BUTTON_MEDIUM_FONT_SIZE: var(--flt-button-medium-font-size, 15px);

$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);

$FLT_BUTTON_BORDER_RADIUS: var(--flt-button-border-radius, 32px);

$FLT_BUTTON_PADDING: var(--flt-button-padding, 0 24px);
// <- 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);

$FLT_CHECKBOX_LABEL_HREF_COLOR: var(--flt-checkbox-color, #3782c8);
$FLT_CHECKBOX_LABEL_HREF_HOVER_COLOR: var(--flt-checkbox-color, #67cdda);
// <- CHECKBOX

// RADIO GROUP, RADIO GROUP ICON ->
$FLT_RADIO_GROUP_COLOR: var(--flt-radio-group-color, #111827);
$FLT_RADIO_GROUP_DISABLED_COLOR: var(--flt-radio-group-disabled-color, #6b7280);
$FLT_RADIO_GROUP_ERROR_COLOR: var(--flt-radio-group-error-color, #ed123d);

$FLT_RADIO_GROUP_CIRCLE_COLOR: var(--flt-radio-group-circle-color, #6b7280);
$FLT_RADIO_GROUP_CIRCLE_BG_COLOR: var(
  --flt-radio-group-circle-bg-color,
  #ffffff
);
$FLT_RADIO_GROUP_CIRCLE_HOVER_COLOR: var(
  --flt-radio-group-circle-hover-color,
  #111827
);
$FLT_RADIO_GROUP_CIRCLE_DISABLED_COLOR: var(
  --flt-radio-group-circle-disabled-color,
  #9ca3af
);
$FLT_RADIO_GROUP_CIRCLE_DISABLED_BG_COLOR: var(
  --flt-radio-group-circle-disabled-bg-color,
  #e5e7eb
);
$FLT_RADIO_GROUP_CIRCLE_SELECTED_HOVER_COLOR: var(
  --flt-radio-group-circle-selected-hover-color,
  #52d990
);
$FLT_RADIO_GROUP_CIRCLE_SELECTED_COLOR: var(
  --flt-radio-group-circle-selected-color,
  #59eb9c
);
$FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_COLOR: var(
  --flt-radio-group-circle-disabled-selected-color,
  #d1d5db
);
$FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_BG_COLOR: var(
  --flt-radio-group-circle-disabled-selected-bg-color,
  #ffffff
);
// <- RADIO GROUP, RADIO GROUP ICON

Release Notes:

v.2.9.1
- Checkbox label rendared bug fix
v.2.9.0
- Added css variable for button padding value
v.2.8.0
- Added css variable for button border radius value
v.2.7.6
- Tooltip bug fix with render content

v.2.7.5
- Tooltip bug fix with render content

v.2.7.4
- Tooltip bug fix with render content

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'

v.2.7.0
- Added size medium for checkbox component

v.2.6.2
- Updated close icon

v.2.6.1
- Update documentation

v.2.6.0
- Added new component flt-radio-group-icon (don't use flt-radio-group with icons)

v.2.5.0
- Available icons for flt-radio-group

v.2.4.2
- Bug fix at flt-radio-group

v.2.4.1
- Change margin for items at flt-radio-group

v.2.4.0
- Added Component flt-radio-group

v.2.3.2
- Change icon style at checkbox

v.2.3.1
- Change links at checkbox's label

v.2.3.0
- Added label fire events to checkbox

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
- Bug fix loader, now you can override available theme with mixins

v.2.0.1
- Bug fix export loader

v.2.0.0
- Update core extendable components, changed import strategy
- Added UserDataManager class
- Added UserDataValidator class
- Added errors module
- Added CheckboxElement class
- Added hgv icon
- Added $FLT_BUTTON_LABEL_PADDING constant

v.1.7.0
- Updated Button component: Added @api size parameter
- Small refactoring in all components

v.1.6.0
- Added new extendable components: BaseElement and LightningDomElement

v.1.5.0
- Added new icons: plus, plus-small, document, close

v.1.4.7
- Added new icons: diesel, hydrogen, signature

v.1.4.6
- Bug fix at mobile Safari tooltip

v.1.4.5
- Tooltip text align centred

v.1.4.4
- Bug fix tooltip mobile positions

v.1.4.3
- Bug fix at tooltip corner attribute

v.1.4.2
- Bug fix selectors conflicts

v.1.4.1
- Bug fix with empty content and svg max width

v.1.4.0
- Added Component flt-tooltip

v.1.3.0
- Added Component flt-icon

v.1.2.1
- Update button 'link' type ui
- Bug fix. Button constants

v.1.1.0
- Added new button type 'link'

v.1.0.2
- Bug fix. Update loader

v.1.0.1
- Bug fix. Update shrink for button's icons

v.1.0.0
- Setup project
- Added Component flt-button

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Fleetcor LWC

About

How to install

Use Webpack fleetcor-lwc-loader

Components

Radio Group Icon

Radio Group Icon variables

Radio Group Icon methods

Radio Group Icon events

Radio Group

Radio Group variables

Radio Group methods

Radio Group events

Checkbox

Checkbox variables

Checkbox methods

Checkbox events

Button

Button variables

Icon

Icon variables

Tooltip

Tooltip variables

Tooltip slot

Override styles

Release Notes: