@synerise/ds-card-select 0.4.58 → 0.5.3
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/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,38 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [0.5.3](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@0.5.2...@synerise/ds-card-select@0.5.3) (2022-01-17)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-card-select
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## [0.5.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@0.5.1...@synerise/ds-card-select@0.5.2) (2021-11-22)
|
|
15
|
+
|
|
16
|
+
**Note:** Version bump only for package @synerise/ds-card-select
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## [0.5.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@0.4.58...@synerise/ds-card-select@0.5.1) (2021-11-09)
|
|
23
|
+
|
|
24
|
+
**Note:** Version bump only for package @synerise/ds-card-select
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
# [0.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@0.4.58...@synerise/ds-card-select@0.5.0) (2021-11-09)
|
|
31
|
+
|
|
32
|
+
**Note:** Version bump only for package @synerise/ds-card-select
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
|
|
6
38
|
## [0.4.58](https://github.com/Synerise/synerise-design/compare/@synerise/ds-card-select@0.4.56...@synerise/ds-card-select@0.4.58) (2021-10-26)
|
|
7
39
|
|
|
8
40
|
**Note:** Version bump only for package @synerise/ds-card-select
|
package/dist/CardSelect.js
CHANGED
|
@@ -1,19 +1,6 @@
|
|
|
1
|
-
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
2
|
-
|
|
3
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
4
|
-
|
|
5
|
-
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(n); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
6
|
-
|
|
7
|
-
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
|
|
8
|
-
|
|
9
|
-
function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
|
|
10
|
-
|
|
11
|
-
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
12
|
-
|
|
13
1
|
import * as React from 'react';
|
|
14
2
|
import { withTheme } from 'styled-components';
|
|
15
|
-
import Icon from '@synerise/ds-icon';
|
|
16
|
-
import Check3M from '@synerise/ds-icon/dist/icons/Check3M';
|
|
3
|
+
import Icon, { Check3M } from '@synerise/ds-icon';
|
|
17
4
|
import { useOnClickOutside } from '@synerise/ds-utils';
|
|
18
5
|
import * as S from './CardSelect.styles';
|
|
19
6
|
|
|
@@ -40,9 +27,8 @@ var CardSelect = function CardSelect(_ref) {
|
|
|
40
27
|
error = _ref.error;
|
|
41
28
|
|
|
42
29
|
var _React$useState = React.useState(false),
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
setPressed = _React$useState2[1];
|
|
30
|
+
pressed = _React$useState[0],
|
|
31
|
+
setPressed = _React$useState[1];
|
|
46
32
|
|
|
47
33
|
var wrapperRef = React.useRef(null);
|
|
48
34
|
var tickIconRef = React.useRef(null);
|
|
@@ -70,10 +56,10 @@ var CardSelect = function CardSelect(_ref) {
|
|
|
70
56
|
useOnClickOutside(wrapperRef, function () {
|
|
71
57
|
pressed && setPressed(false);
|
|
72
58
|
});
|
|
73
|
-
return React.createElement(S.CardWrapper, {
|
|
59
|
+
return /*#__PURE__*/React.createElement(S.CardWrapper, {
|
|
74
60
|
disabled: disabled,
|
|
75
61
|
stretchToFit: stretchToFit
|
|
76
|
-
}, React.createElement(S.Container, {
|
|
62
|
+
}, /*#__PURE__*/React.createElement(S.Container, {
|
|
77
63
|
error: !!error,
|
|
78
64
|
ref: wrapperRef,
|
|
79
65
|
pressed: pressed,
|
|
@@ -82,42 +68,42 @@ var CardSelect = function CardSelect(_ref) {
|
|
|
82
68
|
value: value,
|
|
83
69
|
size: size,
|
|
84
70
|
onClick: handleClick,
|
|
85
|
-
className: "ds-card-select "
|
|
71
|
+
className: "ds-card-select " + (className || ''),
|
|
86
72
|
elementsPosition: elementsPosition,
|
|
87
73
|
stretchToFit: stretchToFit
|
|
88
|
-
}, React.createElement(S.Aside, {
|
|
74
|
+
}, /*#__PURE__*/React.createElement(S.Aside, {
|
|
89
75
|
size: size,
|
|
90
76
|
tabIndex: disabled ? undefined : 0,
|
|
91
77
|
ref: tickIconRef
|
|
92
|
-
}, tickVisible && React.createElement(S.TickIcon, {
|
|
78
|
+
}, tickVisible && /*#__PURE__*/React.createElement(S.TickIcon, {
|
|
93
79
|
className: "ds-card-select-tick",
|
|
94
80
|
disabled: disabled,
|
|
95
81
|
elementsPosition: elementsPosition,
|
|
96
82
|
selected: value && !disabled,
|
|
97
83
|
size: size
|
|
98
|
-
}, value ? React.createElement(Icon, {
|
|
84
|
+
}, value ? /*#__PURE__*/React.createElement(Icon, {
|
|
99
85
|
size: realTickSize,
|
|
100
86
|
color: value ? theme.palette['green-600'] : theme.palette['grey-400'],
|
|
101
|
-
component: React.createElement(Check3M, null)
|
|
102
|
-
}) : React.createElement(S.RadioShape, {
|
|
87
|
+
component: /*#__PURE__*/React.createElement(Check3M, null)
|
|
88
|
+
}) : /*#__PURE__*/React.createElement(S.RadioShape, {
|
|
103
89
|
size: size
|
|
104
|
-
}))), React.createElement(S.Main, {
|
|
90
|
+
}))), /*#__PURE__*/React.createElement(S.Main, {
|
|
105
91
|
size: size,
|
|
106
92
|
disabled: disabled,
|
|
107
93
|
hasTick: tickVisible || customTickVisible
|
|
108
|
-
}, icon && React.createElement(S.IconWrapper, {
|
|
94
|
+
}, icon && /*#__PURE__*/React.createElement(S.IconWrapper, {
|
|
109
95
|
size: size
|
|
110
|
-
}, React.createElement(Icon, {
|
|
96
|
+
}, /*#__PURE__*/React.createElement(Icon, {
|
|
111
97
|
component: icon,
|
|
112
98
|
size: realIconSize
|
|
113
|
-
})), title ? React.createElement(S.Title, {
|
|
99
|
+
})), title ? /*#__PURE__*/React.createElement(S.Title, {
|
|
114
100
|
size: size,
|
|
115
101
|
hasIcon: !!icon
|
|
116
|
-
}, title) : null, description && size !== 'small' ? React.createElement(S.Description, {
|
|
102
|
+
}, title) : null, description && size !== 'small' ? /*#__PURE__*/React.createElement(S.Description, {
|
|
117
103
|
size: size,
|
|
118
104
|
hasTitle: !!title,
|
|
119
105
|
hasIcon: !!icon
|
|
120
|
-
}, description) : null), React.createElement(S.Aside, {
|
|
106
|
+
}, description) : null), /*#__PURE__*/React.createElement(S.Aside, {
|
|
121
107
|
size: size
|
|
122
108
|
}, customTickVisible && customTickVisibleComponent)));
|
|
123
109
|
};
|
|
@@ -1,204 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
var data = _taggedTemplateLiteral(["\n height: 100%;\n "]);
|
|
1
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
return data;
|
|
6
|
-
};
|
|
7
|
-
|
|
8
|
-
return data;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
function _templateObject19() {
|
|
12
|
-
var data = _taggedTemplateLiteral(["\n cursor:not-allowed;\n "]);
|
|
13
|
-
|
|
14
|
-
_templateObject19 = function _templateObject19() {
|
|
15
|
-
return data;
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
return data;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
function _templateObject18() {
|
|
22
|
-
var data = _taggedTemplateLiteral(["\n ", " {\n cursor: pointer;\n }\n "]);
|
|
23
|
-
|
|
24
|
-
_templateObject18 = function _templateObject18() {
|
|
25
|
-
return data;
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
return data;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
function _templateObject17() {
|
|
32
|
-
var data = _taggedTemplateLiteral(["\n ", " {\n background-color: ", ";\n border-color: ", ";\n }\n "]);
|
|
33
|
-
|
|
34
|
-
_templateObject17 = function _templateObject17() {
|
|
35
|
-
return data;
|
|
36
|
-
};
|
|
37
|
-
|
|
38
|
-
return data;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
function _templateObject16() {
|
|
42
|
-
var data = _taggedTemplateLiteral(["\n transform: ", "; \n "]);
|
|
43
|
-
|
|
44
|
-
_templateObject16 = function _templateObject16() {
|
|
45
|
-
return data;
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
return data;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
function _templateObject15() {
|
|
52
|
-
var data = _taggedTemplateLiteral(["\n box-shadow: 0px 0px 0px 1px ", ";\n "]);
|
|
53
|
-
|
|
54
|
-
_templateObject15 = function _templateObject15() {
|
|
55
|
-
return data;
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
return data;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
function _templateObject14() {
|
|
62
|
-
var data = _taggedTemplateLiteral(["\n\n ", "\n "]);
|
|
63
|
-
|
|
64
|
-
_templateObject14 = function _templateObject14() {
|
|
65
|
-
return data;
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
return data;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
function _templateObject13() {
|
|
72
|
-
var data = _taggedTemplateLiteral(["\n opacity: 0.4;\n pointer-events:none;\n\n ", "\n \n "]);
|
|
73
|
-
|
|
74
|
-
_templateObject13 = function _templateObject13() {
|
|
75
|
-
return data;
|
|
76
|
-
};
|
|
77
|
-
|
|
78
|
-
return data;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
function _templateObject12() {
|
|
82
|
-
var data = _taggedTemplateLiteral(["\n box-shadow: ", ";\n \n &:hover, &:active {\n box-shadow: ", ";\n }\n "]);
|
|
83
|
-
|
|
84
|
-
_templateObject12 = function _templateObject12() {
|
|
85
|
-
return data;
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
return data;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
function _templateObject11() {
|
|
92
|
-
var data = _taggedTemplateLiteral(["\n ", "\n \n "]);
|
|
93
|
-
|
|
94
|
-
_templateObject11 = function _templateObject11() {
|
|
95
|
-
return data;
|
|
96
|
-
};
|
|
97
|
-
|
|
98
|
-
return data;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
function _templateObject10() {
|
|
102
|
-
var data = _taggedTemplateLiteral(["\n box-shadow: 0px 0px 0px 1px ", ";\n \n &:hover, &:active {\n box-shadow: 0px 0px 0px 1px ", ";\n }\n "]);
|
|
103
|
-
|
|
104
|
-
_templateObject10 = function _templateObject10() {
|
|
105
|
-
return data;
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
return data;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
function _templateObject9() {
|
|
112
|
-
var data = _taggedTemplateLiteral(["\n ", ";\n "]);
|
|
113
|
-
|
|
114
|
-
_templateObject9 = function _templateObject9() {
|
|
115
|
-
return data;
|
|
116
|
-
};
|
|
117
|
-
|
|
118
|
-
return data;
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
function _templateObject8() {
|
|
122
|
-
var data = _taggedTemplateLiteral(["\n \n\n &:hover {\n ", " {\n border-color: ", ";\n }\n }\n\n ", ";\n \n ", "\n "]);
|
|
123
|
-
|
|
124
|
-
_templateObject8 = function _templateObject8() {
|
|
125
|
-
return data;
|
|
126
|
-
};
|
|
127
|
-
|
|
128
|
-
return data;
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
function _templateObject7() {
|
|
132
|
-
var data = _taggedTemplateLiteral([" box-shadow: 0px 0px 0px 2px ", ";"]);
|
|
133
|
-
|
|
134
|
-
_templateObject7 = function _templateObject7() {
|
|
135
|
-
return data;
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
return data;
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
function _templateObject6() {
|
|
142
|
-
var data = _taggedTemplateLiteral(["\n box-shadow: 0px 0px 0px 2px ", ";\n "]);
|
|
143
|
-
|
|
144
|
-
_templateObject6 = function _templateObject6() {
|
|
145
|
-
return data;
|
|
146
|
-
};
|
|
147
|
-
|
|
148
|
-
return data;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
function _templateObject5() {
|
|
152
|
-
var data = _taggedTemplateLiteral([" box-shadow: 0px 0px 0px 2px ", ";"]);
|
|
153
|
-
|
|
154
|
-
_templateObject5 = function _templateObject5() {
|
|
155
|
-
return data;
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
return data;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
function _templateObject4() {
|
|
162
|
-
var data = _taggedTemplateLiteral(["\n box-shadow: 0px 0px 0px 2px ", ";\n "]);
|
|
163
|
-
|
|
164
|
-
_templateObject4 = function _templateObject4() {
|
|
165
|
-
return data;
|
|
166
|
-
};
|
|
167
|
-
|
|
168
|
-
return data;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
function _templateObject3() {
|
|
172
|
-
var data = _taggedTemplateLiteral(["box-shadow: 0px 0px 0px 1px ", ";"]);
|
|
173
|
-
|
|
174
|
-
_templateObject3 = function _templateObject3() {
|
|
175
|
-
return data;
|
|
176
|
-
};
|
|
177
|
-
|
|
178
|
-
return data;
|
|
179
|
-
}
|
|
180
|
-
|
|
181
|
-
function _templateObject2() {
|
|
182
|
-
var data = _taggedTemplateLiteral(["\n &&, &&:hover {\n box-shadow: 0px 0px 0px 2px ", ";\n }\n "]);
|
|
183
|
-
|
|
184
|
-
_templateObject2 = function _templateObject2() {
|
|
185
|
-
return data;
|
|
186
|
-
};
|
|
187
|
-
|
|
188
|
-
return data;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
function _templateObject() {
|
|
192
|
-
var data = _taggedTemplateLiteral(["\n height: 100%;\n "]);
|
|
193
|
-
|
|
194
|
-
_templateObject = function _templateObject() {
|
|
195
|
-
return data;
|
|
196
|
-
};
|
|
197
|
-
|
|
198
|
-
return data;
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
3
|
+
function _taggedTemplateLiteralLoose(strings, raw) { if (!raw) { raw = strings.slice(0); } strings.raw = raw; return strings; }
|
|
202
4
|
|
|
203
5
|
import styled, { css } from 'styled-components';
|
|
204
6
|
import is, { isNot } from 'styled-is';
|
|
@@ -274,13 +76,13 @@ export var Aside = styled.div.withConfig({
|
|
|
274
76
|
export var Container = styled.div.withConfig({
|
|
275
77
|
displayName: "CardSelectstyles__Container",
|
|
276
78
|
componentId: "tfmgtj-5"
|
|
277
|
-
})(["", " ", ";background-color:", ";border-radius:", ";", " display:flex;flex:1;justify-content:", ";border-color:", ";position:relative;padding:", ";cursor:pointer;&&:focus-within{box-shadow:0px 0px 0px 2px ", ";}", " ", " ", " ", " ", " ", ",", ",", "{text-align:", ";}", "{", ":", ";}", "{margin-left:", ";margin-right:", ";}", " ", ";"], is('stretchToFit')(_templateObject()), transition, getVar('white'), function (props) {
|
|
79
|
+
})(["", " ", ";background-color:", ";border-radius:", ";", " display:flex;flex:1;justify-content:", ";border-color:", ";position:relative;padding:", ";cursor:pointer;&&:focus-within{box-shadow:0px 0px 0px 2px ", ";}", " ", " ", " ", " ", " ", ",", ",", "{text-align:", ";}", "{", ":", ";}", "{margin-left:", ";margin-right:", ";}", " ", ";"], is('stretchToFit')(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n height: 100%;\n "]))), transition, getVar('white'), function (props) {
|
|
278
80
|
return props.theme.variable('@border-radius-base');
|
|
279
|
-
}, is('error')(_templateObject2(), getVar('red-500')), function (props) {
|
|
81
|
+
}, is('error')(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n &&, &&:hover {\n box-shadow: 0px 0px 0px 2px ", ";\n }\n "])), getVar('red-500')), function (props) {
|
|
280
82
|
return mapElementsPosition[props.elementsPosition];
|
|
281
83
|
}, getVar('white'), function (props) {
|
|
282
84
|
return props.size === 'small' ? '24px 16px 12px' : '24px';
|
|
283
|
-
}, getVar('blue-600'), isNot('pressed') && isNot('value')(_templateObject3(), getVar('grey-300')), is('value')(_templateObject4(), getVar('blue-600')), is('value') && is('pressed')(_templateObject5(), getVar('blue-600')), is('value') && is('raised')(_templateObject6(), getVar('blue-600')), is('value') && is('pressed')(_templateObject7(), getVar('blue-600')), Title, Description, IconWrapper, function (props) {
|
|
85
|
+
}, getVar('blue-600'), isNot('pressed') && isNot('value')(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["box-shadow: 0px 0px 0px 1px ", ";"])), getVar('grey-300')), is('value')(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 0px 0px 2px ", ";\n "])), getVar('blue-600')), is('value') && is('pressed')(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([" box-shadow: 0px 0px 0px 2px ", ";"])), getVar('blue-600')), is('value') && is('raised')(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 0px 0px 2px ", ";\n "])), getVar('blue-600')), is('value') && is('pressed')(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose([" box-shadow: 0px 0px 0px 2px ", ";"])), getVar('blue-600')), Title, Description, IconWrapper, function (props) {
|
|
284
86
|
return props.elementsPosition;
|
|
285
87
|
}, Aside, function (props) {
|
|
286
88
|
return props.elementsPosition === 'left' ? 'right' : 'left';
|
|
@@ -290,11 +92,11 @@ export var Container = styled.div.withConfig({
|
|
|
290
92
|
return props.elementsPosition === 'left' ? '-18px' : '0px';
|
|
291
93
|
}, function (props) {
|
|
292
94
|
return props.elementsPosition === 'right' ? '-18px' : '0px';
|
|
293
|
-
}, isNot('disabled')(_templateObject8(), RadioShape, getVar('grey-400'), isNot('raised')(_templateObject9(), isNot('value')(_templateObject10(), getVar('grey-300'), getVar('grey-400'))), is('raised')(_templateObject11(), isNot('value')(_templateObject12(), function (props) {
|
|
95
|
+
}, isNot('disabled')(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n \n\n &:hover {\n ", " {\n border-color: ", ";\n }\n }\n\n ", ";\n \n ", "\n "])), RadioShape, getVar('grey-400'), isNot('raised')(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n ", ";\n "])), isNot('value')(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 0px 0px 1px ", ";\n \n &:hover, &:active {\n box-shadow: 0px 0px 0px 1px ", ";\n }\n "])), getVar('grey-300'), getVar('grey-400'))), is('raised')(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n ", "\n \n "])), isNot('value')(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n box-shadow: ", ";\n \n &:hover, &:active {\n box-shadow: ", ";\n }\n "])), function (props) {
|
|
294
96
|
return props.theme.variable('@box-shadow-base') || 'none';
|
|
295
97
|
}, function (props) {
|
|
296
98
|
return props.theme.variable('@box-shadow-active') || 'none';
|
|
297
|
-
}))), is('disabled')(_templateObject13(), isNot('raised')(_templateObject14(), isNot('value')(_templateObject15(), getVar('grey-200')))));
|
|
99
|
+
}))), is('disabled')(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n opacity: 0.4;\n pointer-events:none;\n\n ", "\n \n "])), isNot('raised')(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n\n ", "\n "])), isNot('value')(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n box-shadow: 0px 0px 0px 1px ", ";\n "])), getVar('grey-200')))));
|
|
298
100
|
export var Main = styled.div.withConfig({
|
|
299
101
|
displayName: "CardSelectstyles__Main",
|
|
300
102
|
componentId: "tfmgtj-6"
|
|
@@ -302,10 +104,10 @@ export var Main = styled.div.withConfig({
|
|
|
302
104
|
export var TickIcon = styled.div.withConfig({
|
|
303
105
|
displayName: "CardSelectstyles__TickIcon",
|
|
304
106
|
componentId: "tfmgtj-7"
|
|
305
|
-
})(["", " ", " ", ""], is('selected')(_templateObject16(), function (props) {
|
|
107
|
+
})(["", " ", " ", ""], is('selected')(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n transform: ", "; \n "])), function (props) {
|
|
306
108
|
return getTransformValues(props);
|
|
307
|
-
}), is('disabled')(_templateObject17(), RadioShape, getVar('grey-050'), getVar('grey-200')), isNot('disabled')(_templateObject18(), RadioShape));
|
|
109
|
+
}), is('disabled')(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n ", " {\n background-color: ", ";\n border-color: ", ";\n }\n "])), RadioShape, getVar('grey-050'), getVar('grey-200')), isNot('disabled')(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n ", " {\n cursor: pointer;\n }\n "])), RadioShape));
|
|
308
110
|
export var CardWrapper = styled.div.withConfig({
|
|
309
111
|
displayName: "CardSelectstyles__CardWrapper",
|
|
310
112
|
componentId: "tfmgtj-8"
|
|
311
|
-
})(["", " ", ""], is('disabled')(_templateObject19()), is('stretchToFit')(_templateObject20()));
|
|
113
|
+
})(["", " ", ""], is('disabled')(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n cursor:not-allowed;\n "]))), is('stretchToFit')(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n height: 100%;\n "]))));
|
package/dist/CardSelect.types.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -8,7 +8,7 @@ var CardSelectGroup = function CardSelectGroup(_ref) {
|
|
|
8
8
|
width = _ref$width === void 0 ? 'large' : _ref$width,
|
|
9
9
|
_ref$columns = _ref.columns,
|
|
10
10
|
columns = _ref$columns === void 0 ? 2 : _ref$columns;
|
|
11
|
-
return React.createElement(S.CardGroup, {
|
|
11
|
+
return /*#__PURE__*/React.createElement(S.CardGroup, {
|
|
12
12
|
className: className,
|
|
13
13
|
width: width,
|
|
14
14
|
columns: columns
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-card-select",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.5.3",
|
|
4
4
|
"description": "Card-Select UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
],
|
|
33
33
|
"types": "dist/index.d.ts",
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@synerise/ds-icon": "^0.
|
|
35
|
+
"@synerise/ds-icon": "^0.47.0",
|
|
36
36
|
"react-sortablejs": "^1.5.1",
|
|
37
37
|
"sortablejs": "^1.10.0",
|
|
38
38
|
"styled-is": "^1.3.0"
|
|
@@ -45,5 +45,5 @@
|
|
|
45
45
|
"devDependencies": {
|
|
46
46
|
"@synerise/ds-utils": "^0.19.0"
|
|
47
47
|
},
|
|
48
|
-
"gitHead": "
|
|
48
|
+
"gitHead": "56c08eca6e2a1e41b8a39e28a9ec657ac1bdec83"
|
|
49
49
|
}
|