fleetcor-lwc 3.4.2 → 3.5.0
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.
package/README.md
CHANGED
|
@@ -207,6 +207,18 @@ Add / update `lwc.config.json` file in your project
|
|
|
207
207
|
| -------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ----------- |
|
|
208
208
|
| 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, eye, sign, check` | - | |
|
|
209
209
|
|
|
210
|
+
### Card
|
|
211
|
+
|
|
212
|
+
```html
|
|
213
|
+
<flt-card></flt-card>
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
#### Card slot
|
|
217
|
+
|
|
218
|
+
| slot | description |
|
|
219
|
+
| ------- | ----------------------------- |
|
|
220
|
+
| default | any html element can be there |
|
|
221
|
+
|
|
210
222
|
### Tooltip
|
|
211
223
|
|
|
212
224
|
```html
|
|
@@ -484,15 +496,29 @@ You can override them as you wish by global css variables as priority.
|
|
|
484
496
|
--flt-input-border-color-active: #6b7280;
|
|
485
497
|
--flt-input-border-color-success: #59eb9c;
|
|
486
498
|
--flt-input-border-radius: 12px;
|
|
499
|
+
--flt-card-bgc: #fff;
|
|
500
|
+
--flt-card-padding-xs: 24px;
|
|
501
|
+
--flt-card-border-radius-xs: 20px;
|
|
502
|
+
--flt-card-box-shadow: (
|
|
503
|
+
0px 2px 3px 0px #0000004d,
|
|
504
|
+
0px 6px 10px 4px #00000026
|
|
505
|
+
);
|
|
506
|
+
--flt-card-border-radius-lg: 24px;
|
|
487
507
|
}
|
|
488
508
|
```
|
|
489
509
|
|
|
490
510
|
## Release Notes:
|
|
491
511
|
|
|
512
|
+
- v.3.5.0
|
|
513
|
+
|
|
514
|
+
- Added new component `flt-card`
|
|
515
|
+
|
|
492
516
|
- v.3.4.2
|
|
517
|
+
|
|
493
518
|
- Bug fix with modal component
|
|
494
519
|
|
|
495
520
|
- v.3.4.1
|
|
521
|
+
|
|
496
522
|
- Bug fix with modal component
|
|
497
523
|
|
|
498
524
|
- v.3.4.0
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { createElement } from 'lwc'
|
|
2
|
+
|
|
3
|
+
import Card from 'flt/card'
|
|
4
|
+
|
|
5
|
+
describe('flt-card', () => {
|
|
6
|
+
afterEach(() => {
|
|
7
|
+
while (document.body.firstChild) {
|
|
8
|
+
document.body.removeChild(document.body.firstChild)
|
|
9
|
+
}
|
|
10
|
+
})
|
|
11
|
+
|
|
12
|
+
it('flt card base', () => {
|
|
13
|
+
const buttonDefault = createElement('flt-card', { is: Card })
|
|
14
|
+
document.body.appendChild(buttonDefault)
|
|
15
|
+
expect(buttonDefault.firstChild.classList).toContain('flt-card')
|
|
16
|
+
})
|
|
17
|
+
})
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
.flt-card {
|
|
2
|
+
background-color: var(--flt-card-bgc, #fff);
|
|
3
|
+
padding: var(--flt-card-padding-xs, 24px);
|
|
4
|
+
border-radius: var(--flt-card-border-radius-xs, 20px);
|
|
5
|
+
box-shadow: var(--flt-card-box-shadow, (0px 2px 3px 0px #0000004d, 0px 6px 10px 4px #00000026));
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@media (min-width: 1280px) {
|
|
9
|
+
.flt-card {
|
|
10
|
+
padding: var(--flt-card-padding-lg, 24px);
|
|
11
|
+
border-radius: var(--flt-card-border-radius-lg, 24px);
|
|
12
|
+
}
|
|
13
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "fleetcor-lwc",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.5.0",
|
|
4
4
|
"description": "LWC framework by Fleetcor",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
"expose": [
|
|
28
28
|
"flt/button",
|
|
29
29
|
"flt/checkbox",
|
|
30
|
+
"flt/card",
|
|
30
31
|
"flt/icon",
|
|
31
32
|
"flt/inputText",
|
|
32
33
|
"flt/inputEmail",
|