sag_components 1.0.671 → 1.0.673
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/dist/stories/components/BannerEventBox.js +1 -1
- package/dist/stories/components/BannerEventBoxList.js +64 -0
- package/dist/stories/components/BannerEventBoxList.style.js +11 -0
- package/dist/stories/components/BarChartTwoRows.js +203 -0
- package/dist/stories/components/BarChartTwoRows.style.js +19 -0
- package/dist/stories/components/DropdownMultiNew.js +4 -6
- package/dist/stories/components/DropdownMultiNew.style.js +5 -5
- package/dist/stories/components/DropdownSingleNew.js +2 -4
- package/dist/stories/components/DropdownSingleNew.style.js +3 -3
- package/dist/stories/components/FilterButton.js +10 -4
- package/dist/stories/components/FilterButton.style.js +1 -1
- package/dist/stories/components/FilterPanel.js +161 -138
- package/dist/stories/components/Input.js +6 -26
- package/dist/stories/components/Input.style.js +6 -6
- package/dist/stories/components/TwoBarCharts.js +216 -0
- package/dist/stories/components/TwoBarCharts.style.js +19 -0
- package/dist/stories/utils/IconsHandler.js +10 -30
- package/dist/stories/utils/IconsHandler.style.js +1 -1
- package/package.json +1 -1
- package/dist/stories/components/EventInfo.js +0 -92
- package/dist/stories/components/EventInfo.style.js +0 -20
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _BannerEventBoxList = require("./BannerEventBoxList.style");
|
|
10
|
+
var _BannerEventBox = _interopRequireDefault(require("./BannerEventBox"));
|
|
11
|
+
const BannerEventBoxList = props => {
|
|
12
|
+
const {
|
|
13
|
+
width,
|
|
14
|
+
height,
|
|
15
|
+
data
|
|
16
|
+
} = props;
|
|
17
|
+
return /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.MainContainer, {
|
|
18
|
+
width: width,
|
|
19
|
+
height: height
|
|
20
|
+
}, data.map(item => /*#__PURE__*/_react.default.createElement(_BannerEventBox.default, {
|
|
21
|
+
height: "100%",
|
|
22
|
+
width: "100%",
|
|
23
|
+
banner: item.banner,
|
|
24
|
+
description: item.description,
|
|
25
|
+
dates: item.dates,
|
|
26
|
+
data: item.data
|
|
27
|
+
})));
|
|
28
|
+
};
|
|
29
|
+
BannerEventBoxList.defaultProps = {
|
|
30
|
+
width: 'auto',
|
|
31
|
+
height: 'auto',
|
|
32
|
+
data: [{
|
|
33
|
+
banner: 'Stop&Shop',
|
|
34
|
+
description: 'description',
|
|
35
|
+
dates: ['01/01/2024', '14/01/2024'],
|
|
36
|
+
data: [{
|
|
37
|
+
name: 'Product Line',
|
|
38
|
+
items: ['cola', 'spring']
|
|
39
|
+
}, {
|
|
40
|
+
name: 'Supplier',
|
|
41
|
+
items: ['coca', 'cola', 'spring']
|
|
42
|
+
}, {
|
|
43
|
+
name: 'Brands',
|
|
44
|
+
items: ['coca', 'mentos', 'spring', 'cola']
|
|
45
|
+
}]
|
|
46
|
+
}, {
|
|
47
|
+
banner: 'Hannaford',
|
|
48
|
+
description: 'description',
|
|
49
|
+
dates: ['01/01/2024', '14/01/2024'],
|
|
50
|
+
data: [{
|
|
51
|
+
name: 'Supplier',
|
|
52
|
+
items: ['coca', 'cola', 'spring']
|
|
53
|
+
}]
|
|
54
|
+
}, {
|
|
55
|
+
banner: 'Giant Food',
|
|
56
|
+
description: 'description',
|
|
57
|
+
dates: ['01/01/2024', '14/01/2024'],
|
|
58
|
+
data: [{
|
|
59
|
+
name: 'Brands',
|
|
60
|
+
items: ['coca', 'mentos', 'spring', 'cola']
|
|
61
|
+
}]
|
|
62
|
+
}]
|
|
63
|
+
};
|
|
64
|
+
var _default = exports.default = BannerEventBoxList;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.MainContainer = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _templateObject;
|
|
11
|
+
const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n width: ", ";\n height: ", ";\n display: flex;\n gap: 20px;\n"])), props => props.width, props => props.height);
|
|
@@ -0,0 +1,203 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = exports.BarChartTwoRows = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _recharts = require("recharts");
|
|
11
|
+
var _CommonFunctions = require("./CommonFunctions");
|
|
12
|
+
var _BarChartTwoRows = require("./BarChartTwoRows.style");
|
|
13
|
+
var _PerformanceAnalyticsLegend = _interopRequireDefault(require("./PerformanceAnalyticsLegend"));
|
|
14
|
+
/* eslint-disable react/prop-types */
|
|
15
|
+
/* eslint-disable no-shadow */
|
|
16
|
+
/* eslint-disable react/no-unstable-nested-components */
|
|
17
|
+
/* eslint-disable no-nested-ternary */
|
|
18
|
+
|
|
19
|
+
const ICON_TYPE_SQUARE = 'Square';
|
|
20
|
+
/* BarChartsByWeeks */
|
|
21
|
+
const BarChartTwoRows = props => {
|
|
22
|
+
const {
|
|
23
|
+
className,
|
|
24
|
+
title,
|
|
25
|
+
barChartData,
|
|
26
|
+
barSize,
|
|
27
|
+
isDollar,
|
|
28
|
+
width,
|
|
29
|
+
height,
|
|
30
|
+
barChartColorFirst,
|
|
31
|
+
barChartColorSecond,
|
|
32
|
+
showLegend,
|
|
33
|
+
legendData,
|
|
34
|
+
lowerValueLabel,
|
|
35
|
+
highValueLabel
|
|
36
|
+
} = props;
|
|
37
|
+
const controlsContainerRef = (0, _react.useRef)();
|
|
38
|
+
const displayFormattedValue = value => {
|
|
39
|
+
if (!value) return '';
|
|
40
|
+
let formattedValue = '';
|
|
41
|
+
formattedValue = !isDollar ? ''.concat('X', value.toFixed(1)) : ''.concat('$', (0, _CommonFunctions.getFormattedValue)(value), (0, _CommonFunctions.getFormattedUnits)(value));
|
|
42
|
+
return formattedValue;
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
// eslint-disable-next-line react/no-unstable-nested-components
|
|
46
|
+
const CustomTooltip = tooltipData => {
|
|
47
|
+
var _payload$0$payload, _payload$0$payload2, _payload$0$payload3, _payload$0$payload4;
|
|
48
|
+
const {
|
|
49
|
+
active,
|
|
50
|
+
payload,
|
|
51
|
+
label
|
|
52
|
+
} = tooltipData;
|
|
53
|
+
if (!active || !payload || (payload === null || payload === void 0 ? void 0 : payload.length) === 0) return null;
|
|
54
|
+
let currentTooltipLowerValue = 0;
|
|
55
|
+
let currentTooltipHighValue = 0;
|
|
56
|
+
if ((_payload$0$payload = payload[0].payload) !== null && _payload$0$payload !== void 0 && _payload$0$payload.lowerValue) currentTooltipLowerValue = (_payload$0$payload2 = payload[0].payload) === null || _payload$0$payload2 === void 0 ? void 0 : _payload$0$payload2.lowerValue;
|
|
57
|
+
if ((_payload$0$payload3 = payload[0].payload) !== null && _payload$0$payload3 !== void 0 && _payload$0$payload3.highValue) currentTooltipHighValue = (_payload$0$payload4 = payload[0].payload) === null || _payload$0$payload4 === void 0 ? void 0 : _payload$0$payload4.highValue;
|
|
58
|
+
return /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.TooltipDiv, null, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.TooltipTitle, null, "".concat(label)), /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.TooltipLabel, null, "".concat(lowerValueLabel, " ").concat(displayFormattedValue(currentTooltipLowerValue))), /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.TooltipLabel, null, "".concat(highValueLabel, " ").concat(displayFormattedValue(currentTooltipHighValue))));
|
|
59
|
+
};
|
|
60
|
+
const CustomizedTickBarChart = props => {
|
|
61
|
+
const {
|
|
62
|
+
x,
|
|
63
|
+
y,
|
|
64
|
+
payload
|
|
65
|
+
} = props;
|
|
66
|
+
if (barChartData && barChartData.length > 0 && payload) {
|
|
67
|
+
const retailerData = barChartData.filter(item => item.title === payload.value);
|
|
68
|
+
if (retailerData && retailerData.length > 0) {
|
|
69
|
+
return /*#__PURE__*/_react.default.createElement("g", {
|
|
70
|
+
transform: "translate(".concat(x, ",").concat(y, ")")
|
|
71
|
+
// onMouseEnter={() => handleMouseEnter(offerType)}
|
|
72
|
+
// onMouseLeave={handleMouseLeave}
|
|
73
|
+
}, /*#__PURE__*/_react.default.createElement("text", {
|
|
74
|
+
x: 0,
|
|
75
|
+
y: 0,
|
|
76
|
+
dy: 16,
|
|
77
|
+
fill: "#212121"
|
|
78
|
+
}, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.LabelBoldText, {
|
|
79
|
+
textAnchor: "middle",
|
|
80
|
+
x: "0",
|
|
81
|
+
dy: "50",
|
|
82
|
+
fontSize: 16,
|
|
83
|
+
fontWeight: 600
|
|
84
|
+
}, payload.value), /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.LabelText, {
|
|
85
|
+
textAnchor: "middle",
|
|
86
|
+
x: "0",
|
|
87
|
+
dy: "30",
|
|
88
|
+
fontSize: 14,
|
|
89
|
+
fontWeight: 400
|
|
90
|
+
}, retailerData[0].date)));
|
|
91
|
+
}
|
|
92
|
+
return null;
|
|
93
|
+
}
|
|
94
|
+
return null;
|
|
95
|
+
};
|
|
96
|
+
const CustomizedLabel = props => {
|
|
97
|
+
const {
|
|
98
|
+
x,
|
|
99
|
+
y,
|
|
100
|
+
stroke,
|
|
101
|
+
value
|
|
102
|
+
} = props;
|
|
103
|
+
return /*#__PURE__*/_react.default.createElement("text", {
|
|
104
|
+
x: x,
|
|
105
|
+
y: y,
|
|
106
|
+
dy: -8,
|
|
107
|
+
fill: stroke,
|
|
108
|
+
fontSize: 14
|
|
109
|
+
}, displayFormattedValue(value));
|
|
110
|
+
};
|
|
111
|
+
return /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.ControlsContainer, {
|
|
112
|
+
className: className,
|
|
113
|
+
id: "ControlsContainer",
|
|
114
|
+
height: height,
|
|
115
|
+
width: width,
|
|
116
|
+
ref: controlsContainerRef
|
|
117
|
+
}, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.Controls, {
|
|
118
|
+
id: "Controls"
|
|
119
|
+
}, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.TitleAndValueContainer, {
|
|
120
|
+
id: "TitleAndValueContainer"
|
|
121
|
+
}, /*#__PURE__*/_react.default.createElement(_BarChartTwoRows.Title, {
|
|
122
|
+
id: "Title"
|
|
123
|
+
}, title)), /*#__PURE__*/_react.default.createElement(_recharts.ResponsiveContainer, {
|
|
124
|
+
id: "ResponsiveContainer",
|
|
125
|
+
width: "100%",
|
|
126
|
+
height: showLegend ? '80%' : '86%'
|
|
127
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
|
|
128
|
+
width: width,
|
|
129
|
+
height: height,
|
|
130
|
+
data: barChartData,
|
|
131
|
+
margin: {
|
|
132
|
+
top: 20,
|
|
133
|
+
right: 0,
|
|
134
|
+
bottom: -25,
|
|
135
|
+
left: -5
|
|
136
|
+
}
|
|
137
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.XAxis, {
|
|
138
|
+
dataKey: "title",
|
|
139
|
+
tick: CustomizedTickBarChart,
|
|
140
|
+
tickLine: false,
|
|
141
|
+
height: 120,
|
|
142
|
+
stroke: "#D0D0D0"
|
|
143
|
+
}), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, {
|
|
144
|
+
content: /*#__PURE__*/_react.default.createElement(CustomTooltip, null)
|
|
145
|
+
}), /*#__PURE__*/_react.default.createElement(_recharts.Tooltip, null), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
|
|
146
|
+
dataKey: "lowerValue",
|
|
147
|
+
fill: barChartColorFirst,
|
|
148
|
+
minPointSize: 5,
|
|
149
|
+
barSize: barSize !== null && barSize !== void 0 ? barSize : 60,
|
|
150
|
+
radius: [5, 5, 0, 0],
|
|
151
|
+
stackId: "a"
|
|
152
|
+
}), /*#__PURE__*/_react.default.createElement(_recharts.Bar, {
|
|
153
|
+
dataKey: "highValue",
|
|
154
|
+
fill: barChartColorSecond,
|
|
155
|
+
stackId: "a",
|
|
156
|
+
radius: [5, 5, 0, 0]
|
|
157
|
+
}, /*#__PURE__*/_react.default.createElement(_recharts.LabelList, {
|
|
158
|
+
dataKey: "value",
|
|
159
|
+
content: CustomizedLabel
|
|
160
|
+
})))), showLegend && /*#__PURE__*/_react.default.createElement(_PerformanceAnalyticsLegend.default, {
|
|
161
|
+
legendData: legendData
|
|
162
|
+
})));
|
|
163
|
+
};
|
|
164
|
+
exports.BarChartTwoRows = BarChartTwoRows;
|
|
165
|
+
var _default = exports.default = BarChartTwoRows;
|
|
166
|
+
BarChartTwoRows.defaultProps = {
|
|
167
|
+
title: 'String',
|
|
168
|
+
barChartData: [{
|
|
169
|
+
title: 'Food Lion',
|
|
170
|
+
date: '15.01.24-31.01.24',
|
|
171
|
+
value: 542366
|
|
172
|
+
}, {
|
|
173
|
+
title: 'Hannaford',
|
|
174
|
+
date: '15.01.24-31.01.24',
|
|
175
|
+
value: 699511
|
|
176
|
+
}, {
|
|
177
|
+
title: 'The Giant Company',
|
|
178
|
+
date: '15.01.24-31.01.24',
|
|
179
|
+
value: 403092
|
|
180
|
+
}, {
|
|
181
|
+
title: 'Giant Food',
|
|
182
|
+
date: '15.01.24-31.01.24',
|
|
183
|
+
value: 396184
|
|
184
|
+
}, {
|
|
185
|
+
title: 'Stop&Shop',
|
|
186
|
+
date: '15.01.24-31.01.24',
|
|
187
|
+
value: 415317
|
|
188
|
+
}],
|
|
189
|
+
width: '100%',
|
|
190
|
+
height: '100%',
|
|
191
|
+
barSize: 60,
|
|
192
|
+
barChartColorFirst: '#BD9EFF',
|
|
193
|
+
barChartColorSecond: '#0b00aaF',
|
|
194
|
+
isDollar: true,
|
|
195
|
+
showLegend: true,
|
|
196
|
+
legendData: [{
|
|
197
|
+
title: 'Incremental Sales',
|
|
198
|
+
iconType: ICON_TYPE_SQUARE,
|
|
199
|
+
iconColor: '#BD9EFF'
|
|
200
|
+
}],
|
|
201
|
+
lowerValueLabel: 'Lower Value:',
|
|
202
|
+
highValueLabel: 'High Value:'
|
|
203
|
+
};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.TitleAndValueContainer = exports.Title = exports.LabelText = exports.LabelBoldText = exports.ControlsContainer = exports.Controls = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
|
|
11
|
+
const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n color: #212121;\n width: ", ";\n height: ", ";\n min-width: 250px;\n"])), props => props.width, props => props.height);
|
|
12
|
+
const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 100%;\n background: #ffffff;\n"])));
|
|
13
|
+
const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n border-radius: 5px;\n padding: 8px 12px;\n background: white;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);\n margin: 0;\n"])));
|
|
14
|
+
const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n line-height: normal;\n width: fit-content;\n"])));
|
|
15
|
+
const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n line-height: normal;\n"])));
|
|
16
|
+
const TitleAndValueContainer = exports.TitleAndValueContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 1rem;\n"])));
|
|
17
|
+
const Title = exports.Title = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n font-weight: 500;\n font-size: 18px;\n line-height: 20px;\n @media (max-width: 1536px) {\n font-size: 16px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n\n"])));
|
|
18
|
+
const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 12px;\n }\n"])));
|
|
19
|
+
const LabelText = exports.LabelText = _styledComponents.default.tspan(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n @media (max-width: 1536px) {\n font-size: 10px;\n }\n @media (max-width: 1366px) {\n font-size: 8px;\n }\n"])));
|
|
@@ -111,14 +111,11 @@ const DropdownMultiNew = _ref => {
|
|
|
111
111
|
var _inputRef$current2;
|
|
112
112
|
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus();
|
|
113
113
|
}
|
|
114
|
-
onChange({
|
|
115
|
-
newValue: []
|
|
116
|
-
});
|
|
117
114
|
};
|
|
118
115
|
const displaySelectedOptions = () => {
|
|
119
116
|
const content = /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.SelectedOptionsContainer, {
|
|
120
117
|
className: "SelectedOptionsContainer"
|
|
121
|
-
}, selectedOptions
|
|
118
|
+
}, selectedOptions.map((option, index) => {
|
|
122
119
|
var _option$label, _option$label2;
|
|
123
120
|
return index < 2 ? /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.SelectedOptionItem, {
|
|
124
121
|
className: "SelectedOptionItem",
|
|
@@ -131,7 +128,7 @@ const DropdownMultiNew = _ref => {
|
|
|
131
128
|
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.focus();
|
|
132
129
|
}
|
|
133
130
|
}
|
|
134
|
-
}, option.label && ((_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.length) > 10 ? "".concat((_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.substring(0, 10), "... ") :
|
|
131
|
+
}, option.label && ((_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.length) > 10 ? "".concat((_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.substring(0, 10), "... ") : option.label, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, {
|
|
135
132
|
width: "8px",
|
|
136
133
|
height: "8px",
|
|
137
134
|
fill: "#212121"
|
|
@@ -181,7 +178,8 @@ const DropdownMultiNew = _ref => {
|
|
|
181
178
|
onClick: handleLabelClick,
|
|
182
179
|
type: "search",
|
|
183
180
|
disabled: disabled,
|
|
184
|
-
placeholder: isFocused ? placeHolder || 'Type to search...' : ''
|
|
181
|
+
placeholder: placeHolder || 'Type to search...' // {isFocused ? placeHolder || 'Type to search...' : ''}
|
|
182
|
+
,
|
|
185
183
|
error: error,
|
|
186
184
|
isFocused: isFocused
|
|
187
185
|
}) : ' '), selectedOptions.length > 0 && /*#__PURE__*/_react.default.createElement(_DropdownMultiNew.IconContainer, {
|
|
@@ -10,20 +10,20 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
10
10
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
11
11
|
/* eslint-disable no-nested-ternary */
|
|
12
12
|
const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n align-items: flex-start;\n width: ", "; \n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 10px;\n"])), props => props.width || '300px');
|
|
13
|
-
const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px;\n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n gap: 4px;\n &:
|
|
14
|
-
const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff
|
|
13
|
+
const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px;\n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n gap: 4px;\n &:focus {\n border-radius: 12px 12px 0 0 ;\n }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor, props => props.isFocused || props.hasValue ? '0px' : '27px', props => props.isFocused || props.hasValue ? '23px' : '10px');
|
|
14
|
+
const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff;\n // border: ", " solid ", ";\n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.isFocused ? '2px' : '1px', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor, props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
|
|
15
15
|
const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: column;\n flex-wrap: nowrap; \n align-content: center; \n align-items: flex-start;\n justify-content: center;\n white-space: pre-wrap;\n overflow: hidden;\n padding: 10px 4px 10px 10px;\n width: 100%;\n height: 100%;\n min-height: 53px;\n box-sizing: border-box;\n background-color: #fff; \n border-radius: 12px;\n outline: none;\n color: ", "; \n"])), props => props.disabled ? '#888' : '#212121');
|
|
16
16
|
const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: calc(100% - 20px);\n height: 25px;\n font-family: Poppins;\n font-weight: 400;\n font-size: 14px;\n outline: none; \n color: ", "; \n border: none; \n"])), props => props.disabled ? '#888' : '#212121');
|
|
17
|
-
const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0; \n top: 100%; \n left: 0;\n z-index: 10;\n width: 100%;\n height: 8px;\n background-color: #fff; \n display: ", "; \n
|
|
17
|
+
const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0; \n top: 100%; \n left: 0;\n z-index: 10;\n width: 100%;\n height: 8px;\n background-color: #fff; \n display: ", "; \n"])), props => {
|
|
18
18
|
var _props$filteredoption;
|
|
19
19
|
return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? 'block' : 'none';
|
|
20
20
|
});
|
|
21
|
-
const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n font-weight: 400;\n margin: 0;\n padding: 8px 12px;\n position: absolute;\n top: 100%;\n left: 0;\n z-index:
|
|
21
|
+
const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n font-weight: 400;\n margin: 0;\n padding: 8px 12px;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 10;\n width: calc(100% - 23px);\n font-family: Poppins; \n border-radius: 4px; \n background-color: #fff; \n display: ", ";\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n"])), props => {
|
|
22
22
|
var _props$filteredoption2;
|
|
23
23
|
return props.showoptions && ((_props$filteredoption2 = props.filteredoptions) === null || _props$filteredoption2 === void 0 ? void 0 : _props$filteredoption2.length) > 0 ? 'block' : 'none';
|
|
24
24
|
});
|
|
25
25
|
const OptionItem = exports.OptionItem = _styledComponents.default.li(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)([" \n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n align-items: center;\n gap: 8px;\n padding: 10px;\n cursor: pointer;\n color: #212121;\n font-family: Poppins;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n transition: background-color 0.3s;\n\n &:hover {\n background-color: #EDF6FF;\n }\n"])));
|
|
26
26
|
const ErrorMessage = exports.ErrorMessage = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n color: red;\n margin-top: 5px;\n"])));
|
|
27
|
-
const SelectedOptionsContainer = exports.SelectedOptionsContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n align-items: center;\n white-space: pre-wrap;\n overflow: hidden;\n padding: 0;\n font-weight: 400;\n border-top: none;\n border-radius: 4px; \n background-color: #fff; \n gap: 4px;
|
|
27
|
+
const SelectedOptionsContainer = exports.SelectedOptionsContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n align-items: center;\n white-space: pre-wrap;\n overflow: hidden;\n padding: 0;\n font-weight: 400;\n border-top: none;\n border-radius: 4px; \n background-color: #fff; \n gap: 4px; \n"])));
|
|
28
28
|
const SelectedOptionItem = exports.SelectedOptionItem = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)([" \n display: flex; \n margin: 0;\n flex-wrap: nowrap; \n white-space: pre-wrap;\n overflow: hidden;\n cursor: pointer;\n color: #212121;\n background-color: #E3E4E5;\n border-radius: 4px; \n align-items: center;\n padding: 4px 6px;\n font-size: 12px;\n"])));
|
|
29
29
|
const IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)([" \n display: flex; \n padding: 2px;\n cursor: pointer; \n"])));
|
|
@@ -105,9 +105,6 @@ const DropdownSingleNew = _ref => {
|
|
|
105
105
|
var _inputRef$current5;
|
|
106
106
|
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.focus();
|
|
107
107
|
}
|
|
108
|
-
onChange({
|
|
109
|
-
newValue: []
|
|
110
|
-
});
|
|
111
108
|
};
|
|
112
109
|
return /*#__PURE__*/_react.default.createElement(_DropdownSingleNew.DropdownWrapper, {
|
|
113
110
|
className: "DropdownWrapper",
|
|
@@ -151,7 +148,8 @@ const DropdownSingleNew = _ref => {
|
|
|
151
148
|
// type="search"
|
|
152
149
|
,
|
|
153
150
|
disabled: disabled,
|
|
154
|
-
placeholder: isFocused ? placeHolder || 'Type to search...' : ''
|
|
151
|
+
placeholder: placeHolder || 'Type to search...' // {isFocused ? placeHolder || 'Type to search...' : ''}
|
|
152
|
+
,
|
|
155
153
|
error: error,
|
|
156
154
|
isFocused: isFocused
|
|
157
155
|
})), selectedOptions.length > 0 && /*#__PURE__*/_react.default.createElement(_DropdownSingleNew.IconContainer, {
|
|
@@ -10,15 +10,15 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
|
10
10
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
11
11
|
/* eslint-disable no-nested-ternary */
|
|
12
12
|
const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n align-items: flex-start;\n width: ", "; \n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 10px;\n"])), props => props.width || '300px');
|
|
13
|
-
const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px; \n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n gap: 4px;\n &:
|
|
14
|
-
const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff;\n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n
|
|
13
|
+
const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px; \n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n gap: 4px;\n &:focus {\n border-radius: 12px 12px 0 0 ;\n }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor, props => props.isFocused || props.hasValue ? '0px' : '28px', props => props.isFocused || props.hasValue ? '23px' : '10px');
|
|
14
|
+
const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: #fff;\n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
|
|
15
15
|
const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: column;\n flex-wrap: nowrap; \n align-content: center; \n align-items: flex-start;\n justify-content: center;\n white-space: pre-wrap;\n overflow: hidden;\n padding: 10px 4px 10px 10px;\n width: 100%;\n height: 100%;\n min-height: 53px;\n box-sizing: border-box;\n background-color: #fff; \n border-radius: 12px;\n outline: none;\n color: ", "; \n"])), props => props.disabled ? '#888' : '#212121');
|
|
16
16
|
const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: calc(100% - 10px);\n height: 20px;\n font-family: Poppins;\n font-weight: 400;\n font-size: 14px;\n outline: none; \n color: ", "; \n border: none;\n"])), props => props.disabled ? '#888' : '#212121');
|
|
17
17
|
const OptionsContainer = exports.OptionsContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)([" \n margin: 0; \n top: 100%; \n left: 0;\n z-index: 10;\n width: 100%;\n height: 8px;\n background-color: #fff; \n display: ", "; \n"])), props => {
|
|
18
18
|
var _props$filteredoption;
|
|
19
19
|
return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? 'block' : 'none';
|
|
20
20
|
});
|
|
21
|
-
const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n font-weight: 400;\n margin: 0;\n padding: 8px 12px;\n position: absolute;\n top: 100%;\n left: 0;\n z-index:
|
|
21
|
+
const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n font-weight: 400;\n margin: 0;\n padding: 8px 12px;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 10;\n width: calc(100% - 23px);\n font-family: Poppins; \n border-radius: 4px; \n background-color: #fff; \n display: ", ";\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n"])), props => {
|
|
22
22
|
var _props$filteredoption2;
|
|
23
23
|
return props.showoptions && ((_props$filteredoption2 = props.filteredoptions) === null || _props$filteredoption2 === void 0 ? void 0 : _props$filteredoption2.length) > 0 ? 'block' : 'none';
|
|
24
24
|
});
|
|
@@ -1,29 +1,33 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports.default = exports.FilterButton = void 0;
|
|
8
|
-
var _react =
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _FilterButton = require("./FilterButton.style");
|
|
10
10
|
var _FilterIcon = require("./icons/FilterIcon");
|
|
11
11
|
const FilterButton = props => {
|
|
12
12
|
const {
|
|
13
13
|
color,
|
|
14
|
+
activeColor,
|
|
14
15
|
height,
|
|
15
16
|
buttonText,
|
|
16
17
|
iconWidth,
|
|
17
18
|
iconHeight,
|
|
18
19
|
disabled,
|
|
20
|
+
openState,
|
|
19
21
|
onButtonClick
|
|
20
22
|
} = props;
|
|
23
|
+
const [activeState, setActiveState] = (0, _react.useState)(openState);
|
|
21
24
|
const onClickHandler = event => {
|
|
22
25
|
onButtonClick(event);
|
|
26
|
+
setActiveState(!activeState);
|
|
23
27
|
};
|
|
24
28
|
return /*#__PURE__*/_react.default.createElement(_FilterButton.FilterButtonWrapper, {
|
|
25
29
|
height: height,
|
|
26
|
-
color: color,
|
|
30
|
+
color: activeState ? activeColor : color,
|
|
27
31
|
disabled: disabled,
|
|
28
32
|
onClick: event => {
|
|
29
33
|
onClickHandler(event);
|
|
@@ -31,7 +35,7 @@ const FilterButton = props => {
|
|
|
31
35
|
}, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
|
|
32
36
|
width: iconWidth,
|
|
33
37
|
height: iconHeight,
|
|
34
|
-
color: color
|
|
38
|
+
color: activeState ? activeColor : color
|
|
35
39
|
}), /*#__PURE__*/_react.default.createElement(_FilterButton.SpanText, null, buttonText));
|
|
36
40
|
};
|
|
37
41
|
exports.FilterButton = FilterButton;
|
|
@@ -40,8 +44,10 @@ FilterButton.defaultProps = {
|
|
|
40
44
|
buttonText: 'Filter',
|
|
41
45
|
height: '40px',
|
|
42
46
|
color: '#212121',
|
|
47
|
+
activeColor: '#229E38',
|
|
43
48
|
iconHeight: 12,
|
|
44
49
|
iconWidth: 12,
|
|
50
|
+
openState: false,
|
|
45
51
|
disabled: false,
|
|
46
52
|
onButtonClick: () => {}
|
|
47
53
|
};
|
|
@@ -8,5 +8,5 @@ exports.SpanText = exports.FilterButtonWrapper = void 0;
|
|
|
8
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
|
|
9
9
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
10
|
var _templateObject, _templateObject2;
|
|
11
|
-
const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: center;\n padding: 8px 18px;\n color: ", ";\n border-radius: 8px;\n border: 1px solid
|
|
11
|
+
const FilterButtonWrapper = exports.FilterButtonWrapper = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n height: ", ";\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 8px;\n align-items: center;\n justify-content: center;\n padding: 8px 18px;\n color: ", ";\n border-radius: 8px;\n border: 1px solid ", ";\n background: transparent;\n transition: box-shadow 0.3s ease;\n &:hover, &:focus {\n cursor: pointer;\n box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n }\n"])), props => props.height, props => props.color, props => props.color);
|
|
12
12
|
const SpanText = exports.SpanText = _styledComponents.default.span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|