fleetcor-lwc 3.12.2 → 3.13.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 (7) hide show
  1. package/README.md +54 -10
  2. package/frontend/components/flt/alertInfo/alertInfo.scss +3 -0
  3. package/frontend/components/flt/collapsibleSection/__test__/collapsibleSection.test.js +40 -0
  4. package/frontend/components/flt/collapsibleSection/collapsibleSection.html +23 -6
  5. package/frontend/components/flt/collapsibleSection/collapsibleSection.js +11 -34
  6. package/frontend/components/flt/collapsibleSection/collapsibleSection.scss +45 -34
  7. package/package.json +4 -3
package/README.md CHANGED
@@ -700,10 +700,18 @@ This component fully extends from `Input Text`
700
700
  ### Collapsible Section
701
701
 
702
702
  ```html
703
- <flt-collapsible-section>
704
- <div slot="title">Collapsible Section Title</div>
705
- <div>
706
- <div>Any Content...</div>
703
+ <flt-collapsible-section title="Details">
704
+ <div class="collapsible-section__body-item">
705
+ <flt-icon icon="oil"></flt-icon>
706
+ <span>Oil</span>
707
+ </div>
708
+ <div class="collapsible-section__body-item">
709
+ <flt-icon icon="fuel"></flt-icon>
710
+ <span>Fuel</span>
711
+ </div>
712
+ <div class="collapsible-section__body-item">
713
+ <flt-icon icon="hgv"></flt-icon>
714
+ <span>Hgv</span>
707
715
  </div>
708
716
  </flt-collapsible-section>
709
717
  ```
@@ -713,17 +721,23 @@ This component fully extends from `Input Text`
713
721
 
714
722
  #### Collapsible Section variables
715
723
 
716
- | @api variables | type | values | required | description |
717
- | -------------- | ---- | ------ | -------- | ------------------------------------------------------------------------------ |
718
- | closed | bool | | - | To control section status `closed/opened` (default - false) |
719
- | styleOff | bool | | - | To be able to turn off default styles for named slot `title` (default - false) |
724
+ | @api variables | type | values | required | description |
725
+ | -------------- | ---- | ------ | -------- | ------------------------------------------------------------------- |
726
+ | opened | bool | | - | To control section status `closed` or `opened` (default - `closed`) |
727
+ | title | html | | - | Any html text |
728
+
729
+ #### Collapsible Section methods
730
+
731
+ | @api | params | return type | description |
732
+ | -------------------- | ------ | ----------- | -------------------- |
733
+ | handleToggleCollapse | | void | Toggle `opened` flag |
720
734
 
721
735
  #### Collapsible Section slots
722
736
 
723
737
  | slot | description |
724
738
  | ------- | ----------------------------- |
739
+ | header | any html element can be there |
725
740
  | default | any html element can be there |
726
- | title | any html element can be there |
727
741
 
728
742
  </details>
729
743
 
@@ -897,6 +911,29 @@ You can override them as you wish by global css variables as priority.
897
911
  --flt-alert-info-content-color: #1a1a1a;
898
912
  --flt-alert-info-icon-max-width: 20px;
899
913
  --flt-alert-info-gap: 16px;
914
+ --flt-collapsible-section-background: initial;
915
+ --flt-collapsible-section-padding: initial;
916
+ --flt-collapsible-section-border: initial;
917
+ --flt-collapsible-section-border-radius: initial;
918
+ --flt-collapsible-section-box-shadow: initial;
919
+ --flt-collapsible-section-opened-header-base-icon-transform: rotate(180deg) scale(
920
+ -1
921
+ );
922
+ --flt-collapsible-section-body-animation-duration: 0.5s;
923
+ --flt-collapsible-section-body-animation-type: ease;
924
+ --flt-collapsible-section-header-base-padding: initial;
925
+ --flt-collapsible-section-header-base-border: initial;
926
+ --flt-collapsible-section-header-base-border-radius: initial;
927
+ --flt-collapsible-section-header-base-background: initial;
928
+ --flt-collapsible-section-header-base-cursor: pointer;
929
+ --flt-collapsible-section-header-base-title-color: #1a1a1a;
930
+ --flt-collapsible-section-header-base-font-size: 16px;
931
+ --flt-collapsible-section-header-base-line-height: 24px;
932
+ --flt-collapsible-section-header-base-font-weight: 700;
933
+ --flt-collapsible-section-body-animation-duration: 0.5s;
934
+ --flt-collapsible-section-body-animation-type: ease;
935
+ --flt-collapsible-section-header-base-icon-transform: rotate(180deg);
936
+ --flt-collapsible-section-header-base-icon-fill: #1a1a1a;
900
937
  }
901
938
  ```
902
939
 
@@ -909,7 +946,14 @@ You can override them as you wish by global css variables as priority.
909
946
  <details>
910
947
  <summary>Click to expand/collapse</summary>
911
948
 
912
- v.3.12.1
949
+ v.3.13.0
950
+
951
+ - Update `flt-collapsible-section` component
952
+ - Update Demo page
953
+
954
+ ---
955
+
956
+ v.3.12.2
913
957
 
914
958
  - Bugfix `flt-alert-info`
915
959
 
package/frontend/components/flt/alertInfo/alertInfo.scss CHANGED
@@ -27,9 +27,12 @@
27
27
 
28
28
  &__icon {
29
29
  flex-shrink: 0;
30
+
30
31
  .flt-icon {
31
32
  max-width: var(--flt-alert-info-icon-max-width, 20px);
33
+ max-height: var(--flt-alert-info-icon-max-heigth, 20px);
32
34
  }
35
+ max-height: var(--flt-alert-info-icon-max-heigth, 20px);
33
36
  max-width: var(--flt-alert-info-icon-max-width, 20px);
34
37
  }
35
38
  }
package/frontend/components/flt/collapsibleSection/__test__/collapsibleSection.test.js ADDED
@@ -0,0 +1,40 @@
1
+ import { createElement, setHooks } from 'lwc'
2
+
3
+ setHooks({
4
+ sanitizeHtmlContent(content) {
5
+ return content
6
+ }
7
+ })
8
+
9
+ import CollapsibleSection from 'flt/collapsibleSection'
10
+
11
+ describe('flt-collapsible-section', () => {
12
+ afterEach(() => {
13
+ while (document.body.firstChild) {
14
+ document.body.removeChild(document.body.firstChild)
15
+ }
16
+ })
17
+
18
+ it('flt collapsible section base', () => {
19
+ const collapsibleSectionEl = createElement('flt-collapsible-section', {
20
+ is: CollapsibleSection
21
+ })
22
+ document.body.appendChild(collapsibleSectionEl)
23
+ expect(collapsibleSectionEl.firstChild.classList).toContain('flt-collapsible-section')
24
+
25
+ collapsibleSectionEl.opened = true
26
+
27
+ return Promise.resolve().then(async () => {
28
+ expect(collapsibleSectionEl.firstChild.classList).toContain(
29
+ 'flt-collapsible-section_opened'
30
+ )
31
+
32
+ collapsibleSectionEl.handleToggleCollapse()
33
+ return Promise.resolve().then(async () => {
34
+ expect(collapsibleSectionEl.firstChild.classList).not.toContain(
35
+ 'flt-collapsible-section_opened'
36
+ )
37
+ })
38
+ })
39
+ })
40
+ })
package/frontend/components/flt/collapsibleSection/collapsibleSection.html CHANGED
@@ -1,10 +1,27 @@
1
1
  <template lwc:render-mode="light">
2
- <div class={titleClass} onclick={handleToggleWrapper}>
3
- <slot name="title"><span class="title-empty-slot"></span></slot>
4
- </div>
5
- <div class={containerWrapperClass}>
6
- <div>
7
- <slot></slot>
2
+ <div class={collapsibleSectionStyles}>
3
+ <div class="flt-collapsible-section__header">
4
+ <slot name="header">
5
+ <div class="flt-collapsible-section__header-base" onclick={handleToggleCollapse}>
6
+ <div
7
+ class="flt-collapsible-section__header-base-title"
8
+ lwc:inner-html={title}></div>
9
+ <svg
10
+ class="flt-collapsible-section__header-base-icon"
11
+ width="24"
12
+ height="24"
13
+ viewBox="0 0 24 24"
14
+ fill="none">
15
+ <path
16
+ d="M5 14.7949L6.41 16.2049L12 10.6249L17.59 16.2049L19 14.7949L12 7.79492L5 14.7949Z"></path>
17
+ </svg>
18
+ </div>
19
+ </slot>
20
+ </div>
21
+ <div class="flt-collapsible-section__body">
22
+ <div class="flt-collapsible-section__content">
23
+ <slot></slot>
24
+ </div>
8
25
  </div>
9
26
  </div>
10
27
  </template>
package/frontend/components/flt/collapsibleSection/collapsibleSection.js CHANGED
@@ -1,43 +1,20 @@
1
- import { api } from 'lwc';
1
+ import { api } from 'lwc'
2
2
  import { BaseElement } from 'fleetcor-lwc'
3
- import './collapsibleSection.scss';
3
+ import './collapsibleSection.scss'
4
4
 
5
5
  export default class CollapsibleSection extends BaseElement {
6
- titleSlotNonEmpty;
6
+ @api opened
7
+ @api title = 'Section Title'
7
8
 
8
- @api closed = false;
9
- @api styleOff = false;
10
-
11
- get containerWrapperClass() {
12
- return this.generateClassNameList({
13
- 'collapsible-section__container-wrapper': true,
14
- 'collapsible-section__container-wrapper_expanded': !this.closed
15
- })
9
+ @api
10
+ handleToggleCollapse() {
11
+ this.opened = !this.opened
16
12
  }
17
13
 
18
- get titleClass() {
19
- if (this.styleOff) {
20
- return '';
21
- }
14
+ get collapsibleSectionStyles() {
22
15
  return this.generateClassNameList({
23
- 'collapsible-section__title': this.titleSlotNonEmpty,
24
- 'collapsible-section__title-active': !this.closed && this.titleSlotNonEmpty
25
- });
26
- }
27
-
28
-
29
- renderedCallback() {
30
- const titleEmptySlot = this.querySelector('.title-empty-slot');
31
- if (titleEmptySlot) {
32
- this.titleSlotNonEmpty = false;
33
- } else {
34
- this.titleSlotNonEmpty = true;
35
- }
36
- }
37
-
38
- handleToggleWrapper() {
39
- if (this.titleSlotNonEmpty) {
40
- this.closed = !this.closed;
41
- }
16
+ 'flt-collapsible-section': true,
17
+ 'flt-collapsible-section_opened': this.opened
18
+ })
42
19
  }
43
20
  }
package/frontend/components/flt/collapsibleSection/collapsibleSection.scss CHANGED
@@ -1,50 +1,61 @@
1
- .collapsible-section {
2
- &__container {
3
- animation: fadeOut 0.5s ease-in;
1
+ .flt-collapsible-section {
2
+ background: var(--flt-collapsible-section-background, initial);
3
+ padding: var(--flt-collapsible-section-padding, initial);
4
+ border: var(--flt-collapsible-section-border, initial);
5
+ border-radius: var(--flt-collapsible-section-border-radius, initial);
6
+ box-shadow: var(--flt-collapsible-section-box-shadow, initial);
7
+
8
+ &_opened {
9
+ .flt-collapsible-section__body {
10
+ grid-template-rows: 1fr;
11
+ }
12
+
13
+ .flt-collapsible-section__header-base-icon {
14
+ transform: var(
15
+ --flt-collapsible-section-opened-header-base-icon-transform,
16
+ rotate(180deg) scale(-1)
17
+ );
18
+ }
4
19
  }
5
20
 
6
- &__container-wrapper {
21
+ &__body {
7
22
  display: grid;
8
23
  grid-template-rows: 0fr;
9
- transition: grid-template-rows 500ms, margin-top 500ms;
10
-
11
- &_expanded {
12
- grid-template-rows: 1fr;
13
- }
24
+ transition: grid-template-rows var(--flt-collapsible-section-body-animation-duration, 0.5s)
25
+ var(--flt-collapsible-section-body-animation-type, ease);
14
26
  }
15
27
 
16
- &__container-wrapper > div {
28
+ &__content {
17
29
  overflow: hidden;
18
- margin-top: 0px;
30
+ min-height: 0;
19
31
  }
20
32
 
21
- &__title {
22
- font-size: 16px;
23
- font-weight: 700;
24
- padding-bottom: 12px;
25
- cursor: pointer;
33
+ &__header-base {
26
34
  display: flex;
27
- justify-content: space-between;
28
35
  align-items: center;
36
+ justify-content: space-between;
37
+ padding: var(--flt-collapsible-section-header-base-padding, initial);
38
+ border: var(--flt-collapsible-section-header-base-border, initial);
39
+ border-radius: var(--flt-collapsible-section-header-base-border-radius, initial);
40
+ background: var(--flt-collapsible-section-header-base-background, initial);
41
+ cursor: var(--flt-collapsible-section-header-base-cursor, pointer);
42
+ gap: 8px;
43
+ }
29
44
 
30
- &:after {
31
- content: '';
32
- display: inline-block;
33
- margin-left: 0.75rem;
34
- width: 10px;
35
- height: 10px;
36
- border-bottom: 2px solid #111827;
37
- border-left: 2px solid #111827;
38
- transform: rotate(-45deg);
39
- margin-top: -8px;
40
- transition: all 0.4s ease-out;
41
- }
45
+ &__header-base-title {
46
+ color: var(--flt-collapsible-section-header-base-title-color, #1a1a1a);
47
+ font-size: var(--flt-collapsible-section-header-base-font-size, 16px);
48
+ line-height: var(--flt-collapsible-section-header-base-line-height, 24px);
49
+ font-weight: var(--flt-collapsible-section-header-base-font-weight, 700);
50
+ }
42
51
 
43
- &_active {
44
- &:after {
45
- transform: rotate(135deg);
46
- margin-top: 2px;
47
- }
52
+ &__header-base-icon {
53
+ transition: transform var(--flt-collapsible-section-body-animation-duration, 0.5s)
54
+ var(--flt-collapsible-section-body-animation-type, ease);
55
+ transform: var(--flt-collapsible-section-header-base-icon-transform, rotate(180deg));
56
+ flex-shrink: 0;
57
+ path {
58
+ fill: var(--flt-collapsible-section-header-base-icon-fill, #1a1a1a);
48
59
  }
49
60
  }
50
61
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fleetcor-lwc",
3
- "version": "3.12.2",
3
+ "version": "3.13.0",
4
4
  "description": "LWC framework by Fleetcor",
5
5
  "repository": {
6
6
  "type": "git",
@@ -84,6 +84,7 @@
84
84
  "webpack-dev-server": "^5.2.3"
85
85
  },
86
86
  "dependencies": {
87
- "imask": "^7.6.1"
87
+ "imask": "^7.6.1",
88
+ "prismjs": "^1.30.0"
88
89
  }
89
- }
90
+ }