fleetcor-lwc 2.6.2 → 2.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +21 -11
  2. package/frontend/components/flt/checkbox/checkbox.js +2 -1
  3. package/frontend/components/flt/checkbox/checkbox.scss +23 -4
  4. package/frontend/components/flt/icon/icon.js +30 -24
  5. package/frontend/components/flt/icon/icons/tmpl-map-pin.html +6 -0
  6. package/frontend/components/flt/icon/icons/tmpl-world.html +12 -0
  7. package/package.json +2 -2
package/README.md CHANGED
@@ -175,7 +175,7 @@ const pathConstants = 'frontend/common/mixins.scss';
175
175
 
176
176
  ```html
177
177
  <flt-checkbox
178
- size="s"
178
+ size="small"
179
179
  name="agreement"
180
180
  disabled
181
181
  required
@@ -188,16 +188,16 @@ const pathConstants = 'frontend/common/mixins.scss';
188
188
 
189
189
  #### Checkbox variables
190
190
 
191
- | @api variables | type | values | required | description |
192
- | -------------- | ------ | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
193
- | name | string | | + | |
194
- | size | string | `s` | - | |
195
- | value | bool | | - | |
196
- | 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 |
197
- | disabled | bool | | - | |
198
- | required | bool | | - | |
199
- | group | string | | - | |
200
- | error-message | string | | - | |
191
+ | @api variables | type | values | required | description |
192
+ | -------------- | ------ | ------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
193
+ | name | string | | + | |
194
+ | size | string | `small` or `medium` | - | |
195
+ | value | bool | | - | |
196
+ | 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 |
197
+ | disabled | bool | | - | |
198
+ | required | bool | | - | |
199
+ | group | string | | - | |
200
+ | error-message | string | | - | |
201
201
 
202
202
  #### Checkbox methods
203
203
 
@@ -415,6 +415,16 @@ $FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_BG_COLOR: var(
415
415
 
416
416
  ## Release Notes:
417
417
 
418
+ - v.2.7.1
419
+ - Added icons: 'world', 'map-pin'
420
+
421
+ ---
422
+
423
+ - v.2.7.0
424
+ - Added size `medium` for checkbox component
425
+
426
+ ---
427
+
418
428
  - v.2.6.2
419
429
  - Updated close icon
420
430
 
package/frontend/components/flt/checkbox/checkbox.js CHANGED
@@ -63,5 +63,6 @@ export default class Checkbox extends CheckboxElement {
63
63
  }
64
64
 
65
65
  const SIZES = {
66
- SMALL: 's'
66
+ SMALL: 'small',
67
+ MD: 'medium'
67
68
  }
package/frontend/components/flt/checkbox/checkbox.scss CHANGED
@@ -35,7 +35,7 @@
35
35
  }
36
36
  }
37
37
 
38
- &_size_s {
38
+ &_size_small {
39
39
  font-size: 15px;
40
40
  line-height: 1.4;
41
41
 
@@ -49,6 +49,25 @@
49
49
  }
50
50
  }
51
51
 
52
+ &_size_medium {
53
+ font-size: 16px;
54
+ line-height: 20px;
55
+
56
+ & + .flt-checkbox__error-message {
57
+ font-size: 12px;
58
+ margin-left: 40px;
59
+ }
60
+
61
+ .flt-checkbox__label {
62
+ margin-top: 2px;
63
+ }
64
+
65
+ .flt-checkbox__icon {
66
+ width: 1.5rem;
67
+ height: 1.5rem;
68
+ }
69
+ }
70
+
52
71
  &__input {
53
72
  display: none;
54
73
  }
@@ -83,11 +102,11 @@
83
102
  cursor: pointer;
84
103
  display: inline-block;
85
104
  text-decoration: none;
86
- color: $FLT_CHECKBOX_LABEL_HREF_COLOR;
105
+ color: $FLT_CHECKBOX_LABEL_HREF_COLOR;
87
106
  transition: all 0.3s;
88
107
 
89
- &:hover{
90
- color: $FLT_CHECKBOX_LABEL_HREF_HOVER_COLOR;
108
+ &:hover {
109
+ color: $FLT_CHECKBOX_LABEL_HREF_HOVER_COLOR;
91
110
  }
92
111
  }
93
112
  }
package/frontend/components/flt/icon/icon.js CHANGED
@@ -30,6 +30,8 @@ import TMPL_SMALL_PLUS from './icons/tmpl-small-plus.html'
30
30
  import TMPL_DOCUMENT from './icons/tmpl-document.html'
31
31
  import TMPL_CLOSE from './icons/tmpl-close.html'
32
32
  import TMPL_HGV from './icons/tmpl-hgv.html'
33
+ import TMPL_WORLD from './icons/tmpl-world.html'
34
+ import TMPL_MAP_PIN from './icons/tmpl-map-pin.html'
33
35
 
34
36
  /**
35
37
  * @class Icon
@@ -37,43 +39,47 @@ import TMPL_HGV from './icons/tmpl-hgv.html'
37
39
  * @description Flt icon component
38
40
  */
39
41
  export default class Icon extends LightningDomElement {
40
- @api icon
42
+ @api icon;
41
43
 
42
- connectedCallback() {
44
+ connectedCallback () {
43
45
  if (!ICONS[this.icon]) {
44
- console.error(`FltError: Icon '${this.icon}' is not available!`)
46
+ console.error(`FltError: Icon '${this.icon}' is not available!`);
45
47
  }
46
48
  }
47
49
 
48
- render() {
49
- return ICONS[this.icon] || TMPL_EMPTY
50
+ render () {
51
+ return ICONS[this.icon] || TMPL_EMPTY;
50
52
  }
51
53
  }
52
54
 
53
55
  const ICONS = {
54
- plus: TMPL_PLUS,
56
+ 'plus': TMPL_PLUS,
55
57
  'plus-small': TMPL_SMALL_PLUS,
56
- document: TMPL_DOCUMENT,
57
- close: TMPL_CLOSE,
58
- ev: TMPL_EV,
59
- carwash: TMPL_CARWASH,
60
- car: TMPL_CAR,
61
- van: TMPL_VAN,
62
- unleaded: TMPL_UNLIDEAD,
63
- diesel: TMPL_DIESEL,
64
- hydrogen: TMPL_HYDROGEN,
65
- signature: TMPL_SIGNATURE,
66
- fuel: TMPL_FUEL,
67
- driver: TMPL_DRIVER,
68
- vehicle: TMPL_VEHICLE,
69
- both: TMPL_BOTH,
58
+ 'document': TMPL_DOCUMENT,
59
+ 'close': TMPL_CLOSE,
60
+ 'ev': TMPL_EV,
61
+ 'carwash': TMPL_CARWASH,
62
+ 'car': TMPL_CAR,
63
+ 'van': TMPL_VAN,
64
+ 'unleaded': TMPL_UNLIDEAD,
65
+ 'diesel': TMPL_DIESEL,
66
+ 'hydrogen': TMPL_HYDROGEN,
67
+ 'signature': TMPL_SIGNATURE,
68
+ 'fuel': TMPL_FUEL,
69
+ 'driver': TMPL_DRIVER,
70
+ 'vehicle': TMPL_VEHICLE,
71
+ 'both': TMPL_BOTH,
70
72
  'shared-card': TMPL_SHARED_CARD,
71
73
  'ev-and-fuel': TMPL_EV_AND_FUEL,
72
- oil: TMPL_OIL,
73
- key: TMPL_KEY,
74
- blocked: TMPL_BLOCKED,
74
+ 'oil': TMPL_OIL,
75
+ 'key': TMPL_KEY,
76
+ 'blocked': TMPL_BLOCKED,
75
77
  'arrow-left': TMPL_ARROW_LEFT,
76
78
  'multiple-users': TMPL_MULTIPLE_USERS,
77
79
  'arrow-right': TMPL_ARROW_RIGHT,
78
- hgv: TMPL_HGV,
80
+ 'hgv': TMPL_HGV,
81
+ 'world': TMPL_WORLD,
82
+ 'map-pin': TMPL_MAP_PIN,
79
83
  }
84
+
85
+ export const ICONS_LIST = Object.keys(ICONS);
package/frontend/components/flt/icon/icons/tmpl-map-pin.html ADDED
@@ -0,0 +1,6 @@
1
+ <template lwc:render-mode="light">
2
+ <svg class="flt-icon flt-icon__map-pin" width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
3
+ <path class="flt-icon__path" d="M12.5 9.31982C12.5 10.7005 11.3807 11.8198 10 11.8198C8.61929 11.8198 7.5 10.7005 7.5 9.31982C7.5 7.93911 8.61929 6.81982 10 6.81982C11.3807 6.81982 12.5 7.93911 12.5 9.31982Z" stroke="#2E3036" stroke-linecap="round" stroke-linejoin="round"></path>
4
+ <path class="flt-icon__path" d="M16.25 9.31982C16.25 15.2716 10 18.6948 10 18.6948C10 18.6948 3.75 15.2716 3.75 9.31982C3.75 5.86804 6.54822 3.06982 10 3.06982C13.4518 3.06982 16.25 5.86804 16.25 9.31982Z" stroke="#2E3036" stroke-linecap="round" stroke-linejoin="round"></path>
5
+ </svg>
6
+ </template>
package/frontend/components/flt/icon/icons/tmpl-world.html ADDED
@@ -0,0 +1,12 @@
1
+ <template lwc:render-mode="light">
2
+ <svg
3
+ class="flt-icon flt-icon__world"
4
+ width="20"
5
+ height="21"
6
+ viewBox="0 0 20 21"
7
+ fill="none"
8
+ xmlns="http://www.w3.org/2000/svg"
9
+ >
10
+ <path class="flt-icon__path" d="M17.4107 11.7305L16.4652 10.785C16.3226 10.6425 16.2041 10.4779 16.1139 10.2977L15.2139 8.49758C15.1087 8.28714 14.8282 8.24163 14.6618 8.40799C14.4848 8.58503 14.2257 8.65217 13.985 8.58339L12.9242 8.28032C12.5214 8.16522 12.1033 8.40669 12.0017 8.81315C11.9257 9.117 12.049 9.43579 12.3095 9.60952L12.7985 9.93549C13.2907 10.2637 13.3597 10.9601 12.9414 11.3784L12.7746 11.5452C12.5988 11.7211 12.5 11.9595 12.5 12.2081V12.5505C12.5 12.8903 12.4076 13.2238 12.2328 13.5152L11.1373 15.341C10.8195 15.8707 10.247 16.1948 9.6293 16.1948C9.14368 16.1948 8.75 15.8011 8.75 15.3155V14.3393C8.75 13.5726 8.28322 12.8831 7.57136 12.5984L7.02624 12.3803C6.20812 12.0531 5.72825 11.2003 5.87311 10.3312L5.87897 10.296C5.91765 10.064 5.99964 9.84127 6.12066 9.63955L6.19517 9.51537C6.60286 8.83589 7.39368 8.48606 8.17069 8.64146L9.15223 8.83777C9.63113 8.93355 10.1033 8.64562 10.2375 8.17603L10.4113 7.56794C10.5352 7.13416 10.3326 6.67362 9.92909 6.47187L9.375 6.19482L9.29917 6.27065C8.94754 6.62228 8.47063 6.81982 7.97335 6.81982H7.82258C7.61603 6.81982 7.41746 6.90236 7.27141 7.04841C7.03519 7.28464 6.67345 7.34405 6.37465 7.19465C5.97027 6.99246 5.82361 6.48881 6.05622 6.10113L7.2328 4.14016C7.3502 3.9445 7.43041 3.72988 7.47044 3.50711M17.4107 11.7305C17.4695 11.3523 17.5 10.9646 17.5 10.5698C17.5 6.42769 14.1421 3.06982 10 3.06982C9.11236 3.06982 8.26073 3.22403 7.47044 3.50711M17.4107 11.7305C16.8528 15.3215 13.7474 18.0698 10 18.0698C5.85786 18.0698 2.5 14.712 2.5 10.5698C2.5 7.31533 4.57291 4.545 7.47044 3.50711" stroke="#2E3036" stroke-linecap="round" stroke-linejoin="round"></path>
11
+ </svg>
12
+ </template>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fleetcor-lwc",
3
- "version": "2.6.2",
3
+ "version": "2.7.1",
4
4
  "description": "LWC framework by Fleetcor",
5
5
  "repository": {
6
6
  "type": "git",
@@ -76,4 +76,4 @@
76
76
  "d": "^1.0.1",
77
77
  "loader-utils": "^2.0.0"
78
78
  }
79
- }
79
+ }