2.7.3 • Published 1 month ago

fleetcor-lwc v2.7.3

Weekly downloads
-
License
ISC
Repository
-
Last release
1 month ago

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

@apitypevaluesrequireddescription
namestring+
optionsarray+Array of available items which have icon with path of icon and value as unique string
sizestrings-
valuestring-Current value from options items value
disabledbool-
requiredbool-
groupstring-
error-messagestring-

Radio Group Icon methods

@apiparamsreturn typedescription
validatevoidCheck component validation and show error message to user
isValidboolReturn true or false
getDatasilent:boolobjectReturn full data of component's state. If silent true - return value will be without any errors displaying for client

Radio Group Icon events

namehandlereturndescription
changeevent.detailobjectReturn 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 variablestypevaluesrequireddescription
namestring+
optionsarray+Array of available items which have label with any string and value as unique string
sizestrings-
valuestring-Current value from options items value
labelstring-It is main label for items value
disabledbool-
requiredbool-
groupstring-
error-messagestring-

Radio Group methods

@apiparamsreturn typedescription
validatevoidCheck component validation and show error message to user
isValidboolReturn true or false
getDatasilent:boolobjectReturn full data of component's state. If silent true - return value will be without any errors displaying for client

Radio Group events

namehandlereturndescription
changeevent.detailobjectReturn 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 variablestypevaluesrequireddescription
namestring+
sizestringsmall or medium-
valuebool-
labelhtml-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
disabledbool-
requiredbool-
groupstring-
error-messagestring-

Checkbox methods

@apiparamsreturn typedescription
validatevoidCheck component validation and show error message to user
isValidboolReturn true or false
getDatasilent:boolobjectReturn full data of component's state. If silent true - return value will be without any errors displaying for client

Checkbox events

namehandlereturndescription
changeevent.detailobjectReturn 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 variablestypevaluesrequireddescription
typestringbase, primary, secondary, link-
sizestringxs, small, medium, large-
icon-leftstringarrow-left, ...-any value from Icon component
icon-rightstringarrow-right, ...-any value from Icon component
labelstring-
disabledbool-

Icon

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

Icon variables

@api variablestypevaluesrequireddescription
iconstringarrow-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 variablestypevaluesrequireddescription
contenthtml+
cornerint-change corner radius of container

Tooltip slot

slotdescription
defaltany 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
lwc
@everything-registry/sub-chunk-1680
2.7.2

2 months ago

2.7.3

1 month ago

2.7.1

2 months ago

2.7.0

7 months ago

2.6.2

7 months ago

2.5.0

9 months ago

2.4.1

9 months ago

2.6.1

9 months ago

2.6.0

9 months ago

2.4.2

9 months ago

2.3.0

10 months ago

2.2.1

10 months ago

2.3.2

10 months ago

2.4.0

9 months ago

2.3.1

10 months ago

2.2.2

10 months ago

2.1.1

12 months ago

1.7.0

1 year ago

1.6.0

1 year ago

2.0.1

1 year ago

2.0.0

1 year ago

1.5.0

1 year ago

1.4.7

1 year ago

1.4.6

1 year ago

1.4.5

1 year ago

1.4.4

1 year ago

1.4.3

1 year ago

1.4.2

1 year ago

1.4.1

1 year ago

1.4.0

1 year ago

1.3.0

1 year ago

1.2.1

1 year ago

1.1.0

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago