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.
In your project open terminal and install fleetcor-lwc
Add / update lwc.config.json
file in your project
...
{
"modules": [
...
{
"npm": "fleetcor-lwc"
}
]
}
...
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
}
}
]
}
...
<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>
...
@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 |
|
- |
|
@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 |
name |
handle |
return |
description |
change |
event.detail |
object |
Return full data of component's state |
<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>
...
@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 |
|
- |
|
@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 |
name |
handle |
return |
description |
change |
event.detail |
object |
Return full data of component's state |
<flt-checkbox
size="small"
name="agreement"
disabled
required
group="main"
value="true"
label="Next"
></flt-checkbox>
...
@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 |
|
- |
|
@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 |
name |
handle |
return |
description |
change |
event.detail |
object |
Return full data of component's state |
<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>
...
@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 |
|
- |
|
<flt-icon icon="arrow-left"></flt-icon>
@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 |
- |
|
<flt-tooltip content="Text description info" corner="12">
<!-- Any html element -->
<flt-icon icon="arrow-left"></flt-icon>
</flt-tooltip>
...
@api variables |
type |
values |
required |
description |
content |
html |
|
+ |
|
corner |
int |
|
- |
change corner radius of container |
slot |
description |
defalt |
any html element can be there |
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);
// <- 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
- v.2.7.0
- Added size
medium
for checkbox component
- 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.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.2.1
- Update button 'link' type ui
- Bug fix. Button constants
- v.1.1.0
- Added new button type 'link'
- v.1.0.1
- Bug fix. Update shrink for button's icons
- v.1.0.0
- Setup project
- Added Component
flt-button