@skyscanner/backpack-web 34.15.0 → 34.15.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.
|
@@ -36,6 +36,7 @@ const BpkAccordionItem = props => {
|
|
|
36
36
|
const titleTextClassNames = [getClassName('bpk-accordion__title-text')];
|
|
37
37
|
const titleClassNames = [getClassName('bpk-accordion__title')];
|
|
38
38
|
const contentClassNames = [getClassName('bpk-accordion__content-container')];
|
|
39
|
+
const contentInnerClassNames = [getClassName('bpk-accordion__content-inner-container')];
|
|
39
40
|
const {
|
|
40
41
|
children,
|
|
41
42
|
expanded,
|
|
@@ -53,33 +54,29 @@ const BpkAccordionItem = props => {
|
|
|
53
54
|
// it, but the benefit of a better container api versus this was worth it
|
|
54
55
|
// $FlowFixMe[prop-missing] - see above
|
|
55
56
|
delete rest.initiallyExpanded;
|
|
57
|
+
if (divider) {
|
|
58
|
+
contentInnerClassNames.push(getClassName('bpk-accordion__content-inner-container--with-divider'));
|
|
59
|
+
if (onDark) {
|
|
60
|
+
itemClassNames.push(getClassName('bpk-accordion__item--with-divider-on-dark'));
|
|
61
|
+
} else {
|
|
62
|
+
itemClassNames.push(getClassName('bpk-accordion__item--with-divider'));
|
|
63
|
+
}
|
|
64
|
+
}
|
|
56
65
|
if (onDark) {
|
|
57
66
|
itemClassNames.push(getClassName('bpk-accordion__item--on-dark'));
|
|
58
67
|
}
|
|
59
68
|
if (expanded && !onDark) {
|
|
60
69
|
iconClassNames.push(getClassName('bpk-accordion__item-expand-icon--flipped'));
|
|
61
|
-
if (divider) {
|
|
62
|
-
contentClassNames.push(getClassName('bpk-accordion__content-container--expanded'));
|
|
63
|
-
}
|
|
64
70
|
}
|
|
65
71
|
if (expanded && onDark) {
|
|
66
72
|
iconClassNames.push(getClassName('bpk-accordion__item-expand-icon--flipped'));
|
|
67
73
|
iconClassNames.push(getClassName('bpk-accordion__item-expand-icon--on-dark'));
|
|
68
|
-
if (divider) {
|
|
69
|
-
contentClassNames.push(getClassName('bpk-accordion__content-container--expanded-on-dark'));
|
|
70
|
-
}
|
|
71
74
|
titleTextClassNames.push(getClassName('bpk-accordion__title-text--on-dark'));
|
|
72
75
|
}
|
|
73
76
|
if (!expanded && onDark) {
|
|
74
77
|
iconClassNames.push(getClassName('bpk-accordion__item-expand-icon--on-dark'));
|
|
75
|
-
if (divider) {
|
|
76
|
-
titleClassNames.push(getClassName('bpk-accordion__title--collapsed-on-dark'));
|
|
77
|
-
}
|
|
78
78
|
titleTextClassNames.push(getClassName('bpk-accordion__title-text--on-dark'));
|
|
79
79
|
}
|
|
80
|
-
if (!expanded && !onDark && divider) {
|
|
81
|
-
titleClassNames.push(getClassName('bpk-accordion__title--collapsed'));
|
|
82
|
-
}
|
|
83
80
|
const contentId = `${id}_content`;
|
|
84
81
|
const clonedIcon = icon ? /*#__PURE__*/cloneElement(icon, {
|
|
85
82
|
className: getClassName('bpk-accordion__leading-icon')
|
|
@@ -89,7 +86,7 @@ const BpkAccordionItem = props => {
|
|
|
89
86
|
// $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
|
|
90
87
|
_jsxs("div", {
|
|
91
88
|
id: id,
|
|
92
|
-
className:
|
|
89
|
+
className: itemClassNames.join(' '),
|
|
93
90
|
...rest,
|
|
94
91
|
children: [/*#__PURE__*/_jsx("div", {
|
|
95
92
|
className: titleClassNames.join(' '),
|
|
@@ -121,7 +118,7 @@ const BpkAccordionItem = props => {
|
|
|
121
118
|
duration: 200,
|
|
122
119
|
height: expanded ? 'auto' : 0,
|
|
123
120
|
children: /*#__PURE__*/_jsx("div", {
|
|
124
|
-
className:
|
|
121
|
+
className: contentInnerClassNames.join(' '),
|
|
125
122
|
children: children
|
|
126
123
|
})
|
|
127
124
|
})
|
|
@@ -15,4 +15,4 @@
|
|
|
15
15
|
* See the License for the specific language governing permissions and
|
|
16
16
|
* limitations under the License.
|
|
17
17
|
*/
|
|
18
|
-
.bpk-accordion__item{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__item-on-dark{box-shadow:0 -1px 0 0 rgba(255,255,255,.5) inset}.bpk-accordion__title{height:auto}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:left;cursor:pointer;appearance:none}html[dir=rtl] .bpk-accordion__toggle-button{text-align:right}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:inline-block}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-inner-container{padding-bottom:1rem}
|
|
18
|
+
.bpk-accordion__item--with-divider{box-shadow:0 -1px 0 0 #c1c7cf inset}.bpk-accordion__item--with-divider-on-dark{box-shadow:0 -1px 0 0 rgba(255,255,255,.5) inset}.bpk-accordion__title{height:auto}.bpk-accordion__toggle-button{width:100%;padding:0;border:0;background-color:rgba(0,0,0,0);color:#161616;text-align:left;cursor:pointer;appearance:none}html[dir=rtl] .bpk-accordion__toggle-button{text-align:right}.bpk-accordion__flex-container{display:inline-flex;width:100%;margin:1rem 0;flex-direction:row}.bpk-accordion__title-text{flex-grow:1}.bpk-accordion__title-text--on-dark{color:#fff}.bpk-accordion__icon-wrapper{display:inline-block}.bpk-accordion__leading-icon{margin-left:0;margin-right:.5rem}html[dir=rtl] .bpk-accordion__leading-icon{margin-left:.5rem;margin-right:0}.bpk-accordion__item-expand-icon{fill:#161616}.bpk-accordion__item-expand-icon--flipped{transform:scaleY(-1)}.bpk-accordion__item-expand-icon--on-dark{fill:#fff}.bpk-accordion__content-container{margin:0}.bpk-accordion__content-inner-container--with-divider{padding-bottom:1rem}
|