@coorpacademy/components 11.32.48-alpha.78 → 11.32.48-testCLXP-193.75
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/es/molecule/banner/index.d.ts.map +1 -1
- package/es/molecule/banner/index.js +21 -13
- package/es/molecule/banner/index.js.map +1 -1
- package/es/molecule/banner/style.css +16 -3
- package/lib/molecule/banner/index.d.ts.map +1 -1
- package/lib/molecule/banner/index.js +23 -13
- package/lib/molecule/banner/index.js.map +1 -1
- package/lib/molecule/banner/style.css +16 -3
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/banner/index.js"],"names":[],"mappings":";AA0BA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/banner/index.js"],"names":[],"mappings":";AA0BA,iDAmFC"}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _size from "lodash/fp/size";
|
|
1
2
|
import _map from "lodash/fp/map";
|
|
2
3
|
import _isEmpty from "lodash/fp/isEmpty";
|
|
3
4
|
import _noop from "lodash/fp/noop";
|
|
@@ -41,42 +42,45 @@ const Banner = props => {
|
|
|
41
42
|
const ButtonSeparator = /*#__PURE__*/React.createElement("div", {
|
|
42
43
|
className: classnames(style.buttonsBar, STYLES[type])
|
|
43
44
|
});
|
|
45
|
+
const handleSwitchToggle = useCallback(action => e => {
|
|
46
|
+
const newSwitchValue = !switchValue;
|
|
47
|
+
setSwitchValue(newSwitchValue);
|
|
48
|
+
action(newSwitchValue);
|
|
49
|
+
}, [switchValue]);
|
|
44
50
|
|
|
45
51
|
const buildButton = ({
|
|
46
52
|
type: buttonType = 'button',
|
|
47
53
|
label,
|
|
48
54
|
action = _noop
|
|
49
55
|
}) => {
|
|
50
|
-
const
|
|
51
|
-
console.log('handleSwitchToggle new test 2');
|
|
52
|
-
const newSwitchValue = !switchValue;
|
|
53
|
-
setSwitchValue(newSwitchValue);
|
|
54
|
-
action(newSwitchValue);
|
|
55
|
-
}, [switchValue, setSwitchValue]);
|
|
56
|
+
const commonStyle = classnames(style.button, STYLES[type]);
|
|
56
57
|
|
|
57
58
|
switch (buttonType) {
|
|
58
59
|
case 'switch':
|
|
59
60
|
return /*#__PURE__*/React.createElement("div", {
|
|
60
|
-
className:
|
|
61
|
+
className: commonStyle
|
|
61
62
|
}, /*#__PURE__*/React.createElement(InputSwitch, {
|
|
62
63
|
id: "show-microlearning-switch",
|
|
63
64
|
theme: "coorpmanager",
|
|
64
65
|
title: label,
|
|
65
66
|
value: switchValue,
|
|
66
|
-
onChange: handleSwitchToggle,
|
|
67
|
+
onChange: handleSwitchToggle(action),
|
|
67
68
|
"data-name": `banner-switch-cta`,
|
|
68
69
|
"aria-label": label
|
|
69
70
|
}));
|
|
70
71
|
|
|
71
72
|
default:
|
|
72
73
|
return /*#__PURE__*/React.createElement("div", {
|
|
73
|
-
className:
|
|
74
|
+
className: commonStyle
|
|
74
75
|
}, /*#__PURE__*/React.createElement(ButtonLink, {
|
|
75
76
|
"data-name": "banner-button-cta",
|
|
76
77
|
"aria-label": label,
|
|
77
78
|
label: label,
|
|
78
79
|
onClick: action,
|
|
79
|
-
type: "text"
|
|
80
|
+
type: "text",
|
|
81
|
+
customStyle: {
|
|
82
|
+
padding: 0
|
|
83
|
+
}
|
|
80
84
|
}));
|
|
81
85
|
}
|
|
82
86
|
};
|
|
@@ -84,9 +88,10 @@ const Banner = props => {
|
|
|
84
88
|
const buildCta = ctaOptions => {
|
|
85
89
|
return uncappedMap((options, i) => {
|
|
86
90
|
if (_isEmpty(options)) return null;
|
|
87
|
-
return /*#__PURE__*/React.createElement(
|
|
91
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
92
|
+
className: style.ctaWrapper,
|
|
88
93
|
key: i
|
|
89
|
-
}, i > 0 ? ButtonSeparator : null, buildButton(options));
|
|
94
|
+
}, i > 0 && i <= _size(options) ? ButtonSeparator : null, buildButton(options));
|
|
90
95
|
}, ctaOptions);
|
|
91
96
|
};
|
|
92
97
|
|
|
@@ -102,7 +107,10 @@ const Banner = props => {
|
|
|
102
107
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
103
108
|
iconName: iconName,
|
|
104
109
|
iconColor: iconColor,
|
|
105
|
-
className: classnames(style.icon, temporary && style.temporaryIcon)
|
|
110
|
+
className: classnames(style.icon, temporary && style.temporaryIcon),
|
|
111
|
+
customStyle: {
|
|
112
|
+
padding: 0
|
|
113
|
+
}
|
|
106
114
|
}), message), buildCta(cta));
|
|
107
115
|
};
|
|
108
116
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useState","useCallback","PropTypes","classnames","COLORS","ButtonLink","Icon","InputSwitch","style","uncappedMap","convert","cap","TYPES","success","cm_positive_200","error","cm_negative_200","warning","cm_yellow_400","info","cm_grey_500","STYLES","Banner","props","type","message","cta","temporary","bannerKey","onEnd","switchValue","setSwitchValue","ButtonSeparator","buttonsBar","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useState","useCallback","PropTypes","classnames","COLORS","ButtonLink","Icon","InputSwitch","style","uncappedMap","convert","cap","TYPES","success","cm_positive_200","error","cm_negative_200","warning","cm_yellow_400","info","cm_grey_500","STYLES","Banner","props","type","message","cta","temporary","bannerKey","onEnd","switchValue","setSwitchValue","ButtonSeparator","buttonsBar","handleSwitchToggle","action","e","newSwitchValue","buildButton","buttonType","label","commonStyle","button","padding","buildCta","ctaOptions","options","i","ctaWrapper","iconName","iconColor","banner","temporaryBanner","icon","temporaryIcon","ctaPropTypes","shape","string","oneOf","func","propTypes","isRequired","arrayOf","bool"],"sources":["../../../src/molecule/banner/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys, noop, isEmpty, map, size} from 'lodash/fp';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst TYPES = {\n success: ['circle-check', COLORS.cm_positive_200],\n error: ['triangle-exclamation', COLORS.cm_negative_200],\n warning: ['circle-exclamation', COLORS.cm_yellow_400],\n info: ['circle-info', COLORS.cm_grey_500]\n};\n\nconst STYLES = {\n success: style.success,\n error: style.error,\n warning: style.warning,\n info: style.info\n};\n\nconst Banner = props => {\n const {type, message, cta = [], temporary, bannerKey, onEnd} = props;\n const [switchValue, setSwitchValue] = useState(false);\n\n const ButtonSeparator = <div className={classnames(style.buttonsBar, STYLES[type])} />;\n\n const handleSwitchToggle = useCallback(\n action => e => {\n const newSwitchValue = !switchValue;\n setSwitchValue(newSwitchValue);\n action(newSwitchValue);\n },\n [switchValue]\n );\n\n const buildButton = ({type: buttonType = 'button', label, action = noop}) => {\n const commonStyle = classnames(style.button, STYLES[type]);\n\n switch (buttonType) {\n case 'switch':\n return (\n <div className={commonStyle}>\n <InputSwitch\n id=\"show-microlearning-switch\"\n theme=\"coorpmanager\"\n title={label}\n value={switchValue}\n onChange={handleSwitchToggle(action)}\n data-name={`banner-switch-cta`}\n aria-label={label}\n />\n </div>\n );\n default:\n return (\n <div className={commonStyle}>\n <ButtonLink\n data-name=\"banner-button-cta\"\n aria-label={label}\n label={label}\n onClick={action}\n type=\"text\"\n customStyle={{padding: 0}}\n />\n </div>\n );\n }\n };\n\n const buildCta = ctaOptions => {\n return uncappedMap((options, i) => {\n if (isEmpty(options)) return null;\n\n return (\n <div className={style.ctaWrapper} key={i}>\n {i > 0 && i <= size(options) ? ButtonSeparator : null}\n {buildButton(options)}\n </div>\n );\n }, ctaOptions);\n };\n\n const [iconName, iconColor] = TYPES[type];\n\n return (\n <div\n key={bannerKey}\n className={classnames(style.banner, STYLES[type], temporary && style.temporaryBanner)}\n onAnimationEnd={onEnd}\n title={message}\n >\n <div data-name={`${type}-banner-message`} className={style.message}>\n <Icon\n iconName={iconName}\n iconColor={iconColor}\n className={classnames(style.icon, temporary && style.temporaryIcon)}\n customStyle={{padding: 0}}\n />\n {message}\n </div>\n {buildCta(cta)}\n </div>\n );\n};\n\nconst ctaPropTypes = PropTypes.shape({\n label: PropTypes.string,\n type: PropTypes.oneOf(['button', 'switch']),\n action: PropTypes.func\n});\n\nBanner.propTypes = {\n bannerKey: PropTypes.string,\n type: PropTypes.oneOf(keys(TYPES)),\n message: PropTypes.string.isRequired,\n cta: PropTypes.arrayOf(ctaPropTypes),\n temporary: PropTypes.bool,\n onEnd: PropTypes.func\n};\n\nexport default Banner;\n"],"mappings":"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"}
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
.banner {
|
|
36
36
|
display: flex;
|
|
37
37
|
flex-direction: row;
|
|
38
|
-
justify-content: flex-start;
|
|
39
|
-
align-items: center;
|
|
38
|
+
justify-content: flex-start;
|
|
39
|
+
align-items: center;
|
|
40
40
|
gap: 8px;
|
|
41
|
-
padding:
|
|
41
|
+
padding: 16px;
|
|
42
42
|
border-radius: 12px;
|
|
43
43
|
}
|
|
44
44
|
|
|
@@ -81,6 +81,11 @@
|
|
|
81
81
|
transform: translateX(-50%);
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
+
.ctaWrapper {
|
|
85
|
+
display: flex;
|
|
86
|
+
gap: 4px;
|
|
87
|
+
}
|
|
88
|
+
|
|
84
89
|
.button{
|
|
85
90
|
background-color: transparent;
|
|
86
91
|
white-space: nowrap;
|
|
@@ -156,4 +161,12 @@
|
|
|
156
161
|
display: flex;
|
|
157
162
|
align-content: center;
|
|
158
163
|
align-items: center;
|
|
164
|
+
gap: 16px;
|
|
159
165
|
}
|
|
166
|
+
|
|
167
|
+
@media mobile {
|
|
168
|
+
.banner {
|
|
169
|
+
flex-wrap: wrap;
|
|
170
|
+
gap: 24px;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/banner/index.js"],"names":[],"mappings":";AA0BA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/banner/index.js"],"names":[],"mappings":";AA0BA,iDAmFC"}
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.default = void 0;
|
|
5
5
|
|
|
6
|
+
var _size2 = _interopRequireDefault(require("lodash/fp/size"));
|
|
7
|
+
|
|
6
8
|
var _map2 = _interopRequireDefault(require("lodash/fp/map"));
|
|
7
9
|
|
|
8
10
|
var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
|
|
@@ -65,41 +67,45 @@ const Banner = props => {
|
|
|
65
67
|
className: (0, _classnames.default)(_style.default.buttonsBar, STYLES[type])
|
|
66
68
|
});
|
|
67
69
|
|
|
70
|
+
const handleSwitchToggle = (0, _react.useCallback)(action => e => {
|
|
71
|
+
const newSwitchValue = !switchValue;
|
|
72
|
+
setSwitchValue(newSwitchValue);
|
|
73
|
+
action(newSwitchValue);
|
|
74
|
+
}, [switchValue]);
|
|
75
|
+
|
|
68
76
|
const buildButton = ({
|
|
69
77
|
type: buttonType = 'button',
|
|
70
78
|
label,
|
|
71
79
|
action = _noop2.default
|
|
72
80
|
}) => {
|
|
73
|
-
const
|
|
74
|
-
console.log('handleSwitchToggle new test 2');
|
|
75
|
-
const newSwitchValue = !switchValue;
|
|
76
|
-
setSwitchValue(newSwitchValue);
|
|
77
|
-
action(newSwitchValue);
|
|
78
|
-
}, [switchValue, setSwitchValue]);
|
|
81
|
+
const commonStyle = (0, _classnames.default)(_style.default.button, STYLES[type]);
|
|
79
82
|
|
|
80
83
|
switch (buttonType) {
|
|
81
84
|
case 'switch':
|
|
82
85
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
83
|
-
className:
|
|
86
|
+
className: commonStyle
|
|
84
87
|
}, /*#__PURE__*/_react.default.createElement(_inputSwitch.default, {
|
|
85
88
|
id: "show-microlearning-switch",
|
|
86
89
|
theme: "coorpmanager",
|
|
87
90
|
title: label,
|
|
88
91
|
value: switchValue,
|
|
89
|
-
onChange: handleSwitchToggle,
|
|
92
|
+
onChange: handleSwitchToggle(action),
|
|
90
93
|
"data-name": `banner-switch-cta`,
|
|
91
94
|
"aria-label": label
|
|
92
95
|
}));
|
|
93
96
|
|
|
94
97
|
default:
|
|
95
98
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
96
|
-
className:
|
|
99
|
+
className: commonStyle
|
|
97
100
|
}, /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
|
|
98
101
|
"data-name": "banner-button-cta",
|
|
99
102
|
"aria-label": label,
|
|
100
103
|
label: label,
|
|
101
104
|
onClick: action,
|
|
102
|
-
type: "text"
|
|
105
|
+
type: "text",
|
|
106
|
+
customStyle: {
|
|
107
|
+
padding: 0
|
|
108
|
+
}
|
|
103
109
|
}));
|
|
104
110
|
}
|
|
105
111
|
};
|
|
@@ -107,9 +113,10 @@ const Banner = props => {
|
|
|
107
113
|
const buildCta = ctaOptions => {
|
|
108
114
|
return uncappedMap((options, i) => {
|
|
109
115
|
if ((0, _isEmpty2.default)(options)) return null;
|
|
110
|
-
return /*#__PURE__*/_react.default.createElement(
|
|
116
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
117
|
+
className: _style.default.ctaWrapper,
|
|
111
118
|
key: i
|
|
112
|
-
}, i > 0 ? ButtonSeparator : null, buildButton(options));
|
|
119
|
+
}, i > 0 && i <= (0, _size2.default)(options) ? ButtonSeparator : null, buildButton(options));
|
|
113
120
|
}, ctaOptions);
|
|
114
121
|
};
|
|
115
122
|
|
|
@@ -125,7 +132,10 @@ const Banner = props => {
|
|
|
125
132
|
}, /*#__PURE__*/_react.default.createElement(_icon.default, {
|
|
126
133
|
iconName: iconName,
|
|
127
134
|
iconColor: iconColor,
|
|
128
|
-
className: (0, _classnames.default)(_style.default.icon, temporary && _style.default.temporaryIcon)
|
|
135
|
+
className: (0, _classnames.default)(_style.default.icon, temporary && _style.default.temporaryIcon),
|
|
136
|
+
customStyle: {
|
|
137
|
+
padding: 0
|
|
138
|
+
}
|
|
129
139
|
}), message), buildCta(cta));
|
|
130
140
|
};
|
|
131
141
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["uncappedMap","convert","cap","TYPES","success","COLORS","cm_positive_200","error","cm_negative_200","warning","cm_yellow_400","info","cm_grey_500","STYLES","style","Banner","props","type","message","cta","temporary","bannerKey","onEnd","switchValue","setSwitchValue","useState","ButtonSeparator","classnames","buttonsBar","
|
|
1
|
+
{"version":3,"file":"index.js","names":["uncappedMap","convert","cap","TYPES","success","COLORS","cm_positive_200","error","cm_negative_200","warning","cm_yellow_400","info","cm_grey_500","STYLES","style","Banner","props","type","message","cta","temporary","bannerKey","onEnd","switchValue","setSwitchValue","useState","ButtonSeparator","classnames","buttonsBar","handleSwitchToggle","useCallback","action","e","newSwitchValue","buildButton","buttonType","label","commonStyle","button","padding","buildCta","ctaOptions","options","i","ctaWrapper","iconName","iconColor","banner","temporaryBanner","icon","temporaryIcon","ctaPropTypes","PropTypes","shape","string","oneOf","func","propTypes","isRequired","arrayOf","bool"],"sources":["../../../src/molecule/banner/index.js"],"sourcesContent":["import React, {useState, useCallback} from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {keys, noop, isEmpty, map, size} from 'lodash/fp';\nimport {COLORS} from '../../variables/colors';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport InputSwitch from '../../atom/input-switch';\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst TYPES = {\n success: ['circle-check', COLORS.cm_positive_200],\n error: ['triangle-exclamation', COLORS.cm_negative_200],\n warning: ['circle-exclamation', COLORS.cm_yellow_400],\n info: ['circle-info', COLORS.cm_grey_500]\n};\n\nconst STYLES = {\n success: style.success,\n error: style.error,\n warning: style.warning,\n info: style.info\n};\n\nconst Banner = props => {\n const {type, message, cta = [], temporary, bannerKey, onEnd} = props;\n const [switchValue, setSwitchValue] = useState(false);\n\n const ButtonSeparator = <div className={classnames(style.buttonsBar, STYLES[type])} />;\n\n const handleSwitchToggle = useCallback(\n action => e => {\n const newSwitchValue = !switchValue;\n setSwitchValue(newSwitchValue);\n action(newSwitchValue);\n },\n [switchValue]\n );\n\n const buildButton = ({type: buttonType = 'button', label, action = noop}) => {\n const commonStyle = classnames(style.button, STYLES[type]);\n\n switch (buttonType) {\n case 'switch':\n return (\n <div className={commonStyle}>\n <InputSwitch\n id=\"show-microlearning-switch\"\n theme=\"coorpmanager\"\n title={label}\n value={switchValue}\n onChange={handleSwitchToggle(action)}\n data-name={`banner-switch-cta`}\n aria-label={label}\n />\n </div>\n );\n default:\n return (\n <div className={commonStyle}>\n <ButtonLink\n data-name=\"banner-button-cta\"\n aria-label={label}\n label={label}\n onClick={action}\n type=\"text\"\n customStyle={{padding: 0}}\n />\n </div>\n );\n }\n };\n\n const buildCta = ctaOptions => {\n return uncappedMap((options, i) => {\n if (isEmpty(options)) return null;\n\n return (\n <div className={style.ctaWrapper} key={i}>\n {i > 0 && i <= size(options) ? ButtonSeparator : null}\n {buildButton(options)}\n </div>\n );\n }, ctaOptions);\n };\n\n const [iconName, iconColor] = TYPES[type];\n\n return (\n <div\n key={bannerKey}\n className={classnames(style.banner, STYLES[type], temporary && style.temporaryBanner)}\n onAnimationEnd={onEnd}\n title={message}\n >\n <div data-name={`${type}-banner-message`} className={style.message}>\n <Icon\n iconName={iconName}\n iconColor={iconColor}\n className={classnames(style.icon, temporary && style.temporaryIcon)}\n customStyle={{padding: 0}}\n />\n {message}\n </div>\n {buildCta(cta)}\n </div>\n );\n};\n\nconst ctaPropTypes = PropTypes.shape({\n label: PropTypes.string,\n type: PropTypes.oneOf(['button', 'switch']),\n action: PropTypes.func\n});\n\nBanner.propTypes = {\n bannerKey: PropTypes.string,\n type: PropTypes.oneOf(keys(TYPES)),\n message: PropTypes.string.isRequired,\n cta: PropTypes.arrayOf(ctaPropTypes),\n temporary: PropTypes.bool,\n onEnd: PropTypes.func\n};\n\nexport default Banner;\n"],"mappings":"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"}
|
|
@@ -35,10 +35,10 @@
|
|
|
35
35
|
.banner {
|
|
36
36
|
display: flex;
|
|
37
37
|
flex-direction: row;
|
|
38
|
-
justify-content: flex-start;
|
|
39
|
-
align-items: center;
|
|
38
|
+
justify-content: flex-start;
|
|
39
|
+
align-items: center;
|
|
40
40
|
gap: 8px;
|
|
41
|
-
padding:
|
|
41
|
+
padding: 16px;
|
|
42
42
|
border-radius: 12px;
|
|
43
43
|
}
|
|
44
44
|
|
|
@@ -81,6 +81,11 @@
|
|
|
81
81
|
transform: translateX(-50%);
|
|
82
82
|
}
|
|
83
83
|
|
|
84
|
+
.ctaWrapper {
|
|
85
|
+
display: flex;
|
|
86
|
+
gap: 4px;
|
|
87
|
+
}
|
|
88
|
+
|
|
84
89
|
.button{
|
|
85
90
|
background-color: transparent;
|
|
86
91
|
white-space: nowrap;
|
|
@@ -156,4 +161,12 @@
|
|
|
156
161
|
display: flex;
|
|
157
162
|
align-content: center;
|
|
158
163
|
align-items: center;
|
|
164
|
+
gap: 16px;
|
|
159
165
|
}
|
|
166
|
+
|
|
167
|
+
@media mobile {
|
|
168
|
+
.banner {
|
|
169
|
+
flex-wrap: wrap;
|
|
170
|
+
gap: 24px;
|
|
171
|
+
}
|
|
172
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "11.32.48-
|
|
3
|
+
"version": "11.32.48-testCLXP-193.75+008e1f9d0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -178,5 +178,5 @@
|
|
|
178
178
|
"last 2 versions",
|
|
179
179
|
"IE 11"
|
|
180
180
|
],
|
|
181
|
-
"gitHead": "
|
|
181
|
+
"gitHead": "008e1f9d032ebf0debee0d474a7aed33ae6b0726"
|
|
182
182
|
}
|