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

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

@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

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);
// <- 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.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

fleetcor-lwc

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:

Readme

Keywords

Package Sidebar

Install

Repository

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

fleetcor-lwc

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:

Readme

Keywords

Package Sidebar

Install

Repository

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads