@desynova-digital/components 8.18.3 → 8.18.5
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.
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.StyledCheckboxOption = exports.StyledCheckbox = undefined;
|
|
7
7
|
|
|
8
8
|
var _templateObject = _taggedTemplateLiteral([""], [""]),
|
|
9
|
-
_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n cursor: pointer;\n padding:
|
|
9
|
+
_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n cursor: pointer;\n padding: ", ";\n ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n vertical-align: middle;\n pointer-events: ", ";\n input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n }\n ", " {\n opacity: ", ";\n font-family: \"SFUIText-Regular\";\n color: ", ";\n margin-left: 25px;\n }\n ", " {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n height: 22px;\n width: 22px;\n background-color: ", ";\n border: 1px solid\n ", ";\n box-shadow: inset 0 1px 2px 0\n ", ";\n border-radius: ", ";\n cursor: pointer;\n transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n &:hover input ~ ", " {\n box-shadow: inset 0 1px 4px 0 ", ";\n }\n input ~ ", " {\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n &:hover {\n background: ", ";\n color: ", ";\n }\n }\n }\n input:checked ~ ", " {\n &.disabled {\n &:hover {\n background: ", ";\n }\n }\n }\n\n input:readonly ~ ", ", input:readonly:checked ~ ", " {\n cursor: text;\n opacity: 5;\n }\n\n input:checked ~ ", " {\n background-color: ", ";\n border: 1px solid ", ";\n opacity: ", ";\n }\n input:checked ~ ", " {\n background-color: ", ";\n color: ", ";\n }\n ", ":after {\n content: \"\";\n position: absolute;\n display: none;\n }\n input:checked ~ ", ":after {\n display: block;\n }\n ", ":after {\n top: 55%;\n left: 35%;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg) translate(-50%, -50%);\n animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n }\n\n @keyframes checkbox-check {\n 0% {\n width: 0;\n height: 0;\n border-color: #fff;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 33% {\n width: 4px;\n height: 0;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 100% {\n width: 4px;\n height: 9px;\n border-color: #fff;\n transform: translate3d(0, -0.5em, 0) rotate(45deg);\n }\n }\n\n &.switch {\n display: flex;\n width: 100px;\n }\n"], ["\n position: relative;\n cursor: pointer;\n padding: ", ";\n ", ";\n -webkit-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n vertical-align: middle;\n pointer-events: ", ";\n input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n }\n ", " {\n opacity: ", ";\n font-family: \"SFUIText-Regular\";\n color: ", ";\n margin-left: 25px;\n }\n ", " {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n height: 22px;\n width: 22px;\n background-color: ", ";\n border: 1px solid\n ", ";\n box-shadow: inset 0 1px 2px 0\n ", ";\n border-radius: ", ";\n cursor: pointer;\n transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n &:hover input ~ ", " {\n box-shadow: inset 0 1px 4px 0 ", ";\n }\n input ~ ", " {\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n &:hover {\n background: ", ";\n color: ", ";\n }\n }\n }\n input:checked ~ ", " {\n &.disabled {\n &:hover {\n background: ", ";\n }\n }\n }\n\n input:readonly ~ ", ", input:readonly:checked ~ ", " {\n cursor: text;\n opacity: 5;\n }\n\n input:checked ~ ", " {\n background-color: ", ";\n border: 1px solid ", ";\n opacity: ", ";\n }\n input:checked ~ ", " {\n background-color: ", ";\n color: ", ";\n }\n ", ":after {\n content: \"\";\n position: absolute;\n display: none;\n }\n input:checked ~ ", ":after {\n display: block;\n }\n ", ":after {\n top: 55%;\n left: 35%;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg) translate(-50%, -50%);\n animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n }\n\n @keyframes checkbox-check {\n 0% {\n width: 0;\n height: 0;\n border-color: #fff;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 33% {\n width: 4px;\n height: 0;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 100% {\n width: 4px;\n height: 9px;\n border-color: #fff;\n transform: translate3d(0, -0.5em, 0) rotate(45deg);\n }\n }\n\n &.switch {\n display: flex;\n width: 100px;\n }\n"]),
|
|
10
10
|
_templateObject3 = _taggedTemplateLiteral(["\n ", " {\n display: ", ";\n ", ";\n &:last-child {\n margin: 0;\n }\n }\n"], ["\n ", " {\n display: ", ";\n ", ";\n &:last-child {\n margin: 0;\n }\n }\n"]);
|
|
11
11
|
|
|
12
12
|
var _react = require("react");
|
|
@@ -45,6 +45,10 @@ var Label = _styledComponents2.default.span(_templateObject);
|
|
|
45
45
|
var StyledTag = (0, _styledComponents2.default)(_tag2.default)(_templateObject);
|
|
46
46
|
|
|
47
47
|
var StyledCheckboxOption = _styledComponents2.default.label(_templateObject2, function (props) {
|
|
48
|
+
return props.seperationType === 'line' ? '15px' : '5px';
|
|
49
|
+
}, function (props) {
|
|
50
|
+
return props.seperationType === 'line' && "\n width: 100%;\n border-bottom: 1px solid #303F51;\n ";
|
|
51
|
+
}, function (props) {
|
|
48
52
|
return props.readOnly ? "none" : null;
|
|
49
53
|
}, Label, function (props) {
|
|
50
54
|
return props.readOnly ? 0.5 : null;
|
|
@@ -56,6 +60,8 @@ var StyledCheckboxOption = _styledComponents2.default.label(_templateObject2, fu
|
|
|
56
60
|
return props.readOnly ? _tokens.colors[props.theme].radio.borderDisabled : _tokens.colors[props.theme].radio.border;
|
|
57
61
|
}, function (props) {
|
|
58
62
|
return props.readOnly ? _tokens.colors[props.theme].radio.shadowDisabled : _tokens.colors[props.theme].radio.shadow;
|
|
63
|
+
}, function (props) {
|
|
64
|
+
return props.shape === 'square' ? "3px" : "100%";
|
|
59
65
|
}, CheckMark, function (props) {
|
|
60
66
|
return _tokens.colors[props.theme].radio.shadow;
|
|
61
67
|
}, StyledTag, function (props) {
|
|
@@ -93,7 +99,9 @@ var Checkbox = function Checkbox(props) {
|
|
|
93
99
|
{
|
|
94
100
|
theme: props.theme,
|
|
95
101
|
readOnly: props.readOnly,
|
|
96
|
-
className: props.type
|
|
102
|
+
className: props.type,
|
|
103
|
+
shape: props.shape,
|
|
104
|
+
seperationType: props.seperationType
|
|
97
105
|
},
|
|
98
106
|
_react2.default.createElement("input", {
|
|
99
107
|
type: "checkbox",
|
|
@@ -167,7 +175,9 @@ var CheckboxGroup = function CheckboxGroup(props) {
|
|
|
167
175
|
theme: props.theme,
|
|
168
176
|
type: props.type,
|
|
169
177
|
fillRule: props.fillRule || '',
|
|
170
|
-
access: child.props.access
|
|
178
|
+
access: child.props.access,
|
|
179
|
+
shape: props.shape,
|
|
180
|
+
seperationType: props.seperationType
|
|
171
181
|
}) : null;
|
|
172
182
|
})
|
|
173
183
|
);
|
|
@@ -195,7 +205,9 @@ Checkbox.defaultProps = {
|
|
|
195
205
|
};
|
|
196
206
|
|
|
197
207
|
CheckboxGroup.defaultProps = {
|
|
198
|
-
theme: "light"
|
|
208
|
+
theme: "light",
|
|
209
|
+
shape: _propTypes2.default.oneOf(["square", "default"]),
|
|
210
|
+
seperationType: _propTypes2.default.oneOf(["line", "default"])
|
|
199
211
|
};
|
|
200
212
|
|
|
201
213
|
Checkbox.Group = CheckboxGroup;
|
|
@@ -512,7 +512,7 @@ var DatePicker = function (_Component) {
|
|
|
512
512
|
return _this4.show(0);
|
|
513
513
|
}
|
|
514
514
|
},
|
|
515
|
-
this.props.label
|
|
515
|
+
this.props.label
|
|
516
516
|
) : _react2.default.createElement(
|
|
517
517
|
"div",
|
|
518
518
|
{ className: "form-input" },
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "8.18.
|
|
3
|
+
"version": "8.18.5",
|
|
4
4
|
"description": "Components for Desynova Digital",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "desynova-digital",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": "desynova-digital",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@desynova-digital/tokens": "8.18.
|
|
10
|
+
"@desynova-digital/tokens": "8.18.5",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|