fleetcor-lwc 2.9.0 → 2.10.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.
Files changed (8) hide show
  1. package/README.md +32 -12
  2. package/frontend/components/flt/checkbox/checkbox.html +19 -22
  3. package/frontend/components/flt/radioGroup/radioGroup.html +1 -1
  4. package/frontend/components/flt/radioGroup/radioGroup.js +13 -0
  5. package/frontend/components/flt/radioGroup/radioGroup.scss +9 -0
  6. package/frontend/components/flt/radioItem/radioItem.html +1 -1
  7. package/frontend/components/flt/radioItem/radioItem.js +7 -0
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -135,6 +135,7 @@ const pathConstants = 'frontend/common/mixins.scss';
135
135
  name="city"
136
136
  disabled
137
137
  required
138
+ direction="column"
138
139
  group="main"
139
140
  options="[{label:'London', value:'London'}, {label:'Leon', value:'Leon'}]"
140
141
  value="London"
@@ -145,17 +146,18 @@ const pathConstants = 'frontend/common/mixins.scss';
145
146
 
146
147
  #### Radio Group variables
147
148
 
148
- | @api variables | type | values | required | description |
149
- | -------------- | ------ | ------ | -------- | ---------------------------------------------------------------------------------------- |
150
- | name | string | | + | |
151
- | options | array | | + | Array of available items which have `label` with any string and `value` as unique string |
152
- | size | string | `s` | - | |
153
- | value | string | | - | Current value from options items value |
154
- | label | string | | - | It is main label for items value |
155
- | disabled | bool | | - | |
156
- | required | bool | | - | |
157
- | group | string | | - | |
158
- | error-message | string | | - | |
149
+ | @api variables | type | values | required | description |
150
+ | -------------- | ------ | ----------------- | -------- | ------------------------------------------------------------------------------------------- |
151
+ | name | string | | + | |
152
+ | options | array | | + | Array of available items which have `label` with any html text and `value` as unique string |
153
+ | size | string | `s` | - | |
154
+ | value | string | | - | Current value from options items value |
155
+ | label | string | | - | It is main label for items value |
156
+ | disabled | bool | | - | |
157
+ | required | bool | | - | |
158
+ | direction | string | `row` or `column` | - | |
159
+ | group | string | | - | |
160
+ | error-message | string | | - | |
159
161
 
160
162
  #### Radio Group methods
161
163
 
@@ -419,24 +421,42 @@ $FLT_RADIO_GROUP_CIRCLE_DISABLED_SELECTED_BG_COLOR: var(
419
421
 
420
422
  ## Release Notes:
421
423
 
424
+ - v.2.10.0
425
+ - Added to `direction` for `Radio Group` component with values `row` or `column`
426
+ - Update to `label` type in `options` to html text
427
+
428
+ ---
429
+
430
+ - v.2.9.1
431
+ - Checkbox label rendared bug fix
432
+
433
+ ---
434
+
422
435
  - v.2.9.0
423
436
  - Added css variable for button padding value
424
-
437
+
438
+ ---
439
+
425
440
  - v.2.8.0
426
441
  - Added css variable for button border radius value
427
442
 
443
+ ---
444
+
428
445
  - v.2.7.6
429
446
  - Tooltip bug fix with render content
430
447
 
431
448
  ---
449
+
432
450
  - v.2.7.5
433
451
  - Tooltip bug fix with render content
434
452
 
435
453
  ---
454
+
436
455
  - v.2.7.4
437
456
  - Tooltip bug fix with render content
438
457
 
439
458
  ---
459
+
440
460
  - v.2.7.3
441
461
  - Added required class marker for the checkbox component
442
462
 
package/frontend/components/flt/checkbox/checkbox.html CHANGED
@@ -1,34 +1,31 @@
1
1
  <template lwc:render-mode="light">
2
2
  <label class={computedLabelClass}>
3
3
  <input
4
- class="flt-checkbox__input"
5
- type="checkbox"
6
- checked={value}
7
- disabled={disabled}
8
- onchange={handleChange}
9
- />
4
+ class="flt-checkbox__input"
5
+ type="checkbox"
6
+ checked={value}
7
+ disabled={disabled}
8
+ onchange={handleChange} />
10
9
 
11
10
  <span class={computedSpanClass}>
12
11
  <svg
13
- if:true={value}
14
- class="flt-checkbox__icon-agree"
15
- width="20"
16
- height="20"
17
- viewBox="0 0 20 20"
18
- fill="none"
19
- xmlns="http://www.w3.org/2000/svg"
20
- >
12
+ if:true={value}
13
+ class="flt-checkbox__icon-agree"
14
+ width="20"
15
+ height="20"
16
+ viewBox="0 0 20 20"
17
+ fill="none"
18
+ xmlns="http://www.w3.org/2000/svg">
21
19
  <path
22
- class="flt-checkbox__icon-agree-path"
23
- d="M3.75 10.625L8.75 15.625L16.25 4.375"
24
- stroke-width="2"
25
- stroke-linecap="round"
26
- stroke-linejoin="round"
27
- ></path>
20
+ class="flt-checkbox__icon-agree-path"
21
+ d="M3.75 10.625L8.75 15.625L16.25 4.375"
22
+ stroke-width="2"
23
+ stroke-linecap="round"
24
+ stroke-linejoin="round"></path>
28
25
  </svg>
29
26
  </span>
30
-
31
- <div class="flt-checkbox__label"></div>
27
+
28
+ <div class="flt-checkbox__label" data-label={label}></div>
32
29
  </label>
33
30
  <div class={computedErrorMessage}>{errorMessage}</div>
34
31
  </template>
package/frontend/components/flt/radioGroup/radioGroup.html CHANGED
@@ -1,7 +1,7 @@
1
1
  <template lwc:render-mode="light">
2
2
  <div class="flt-radio-group">
3
3
  <div class="flt-radio-group__label">{label}</div>
4
- <div class="flt-radio-group__items">
4
+ <div class={itemsCss}>
5
5
  <template for:each={optionsToDisplay} for:item="option">
6
6
  <flt-radio-item
7
7
  key={option.key}
package/frontend/components/flt/radioGroup/radioGroup.js CHANGED
@@ -12,12 +12,20 @@ export default class RadioGroup extends SelectElement {
12
12
  error
13
13
 
14
14
  @api size = SIZES.SMALL
15
+ @api direction = DIRECTION.ROW
15
16
  @api errorMessage
16
17
 
17
18
  @api validate() {
18
19
  this.error = !this.isValid()
19
20
  }
20
21
 
22
+ get itemsCss() {
23
+ return this.generateClassNameList({
24
+ 'flt-radio-group__items': true,
25
+ 'flt-radio-group__items_column': this.direction === DIRECTION.COLUMN
26
+ })
27
+ }
28
+
21
29
  get computedErrorMessage() {
22
30
  return this.generateClassNameList({
23
31
  'flt-radio-group__error-message': true,
@@ -29,3 +37,8 @@ export default class RadioGroup extends SelectElement {
29
37
  const SIZES = {
30
38
  SMALL: 's'
31
39
  }
40
+
41
+ const DIRECTION = {
42
+ ROW: 'row',
43
+ COLUMN: 'column'
44
+ }
package/frontend/components/flt/radioGroup/radioGroup.scss CHANGED
@@ -23,6 +23,15 @@
23
23
  &__items {
24
24
  display: flex;
25
25
  flex-wrap: wrap;
26
+
27
+ &_column {
28
+ flex-direction: column;
29
+ gap: 16px;
30
+
31
+ .flt-radio-group__item {
32
+ margin: 0;
33
+ }
34
+ }
26
35
  }
27
36
 
28
37
  &__item {
package/frontend/components/flt/radioItem/radioItem.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <template lwc:render-mode="light">
2
2
  <div onclick={handleClick} class={styleClass} autotests-value={option.value}>
3
3
  <span class="flt-radio-item__circle"></span>
4
- <span class="flt-radio-item__label">{option.label}</span>
4
+ <span class="flt-radio-item__label"></span>
5
5
  </div>
6
6
  </template>
package/frontend/components/flt/radioItem/radioItem.js CHANGED
@@ -21,6 +21,13 @@ export default class RadioItem extends BaseElement {
21
21
  })
22
22
  }
23
23
 
24
+ renderedCallback() {
25
+ const labelEl = this.querySelector('.flt-radio-item__label')
26
+ if (labelEl) {
27
+ labelEl.innerHTML = this.option.label
28
+ }
29
+ }
30
+
24
31
  handleClick() {
25
32
  if (!this.option.disabled || !this.option.selected) {
26
33
  this.dispatchEvent(new CustomEvent('change', { detail: { ...this.option } }))
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fleetcor-lwc",
3
- "version": "2.9.0",
3
+ "version": "2.10.0",
4
4
  "description": "LWC framework by Fleetcor",
5
5
  "repository": {
6
6
  "type": "git",