@desynova-digital/components 9.1.48 → 9.1.49

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.
Files changed (2) hide show
  1. package/atoms/checkbox/checkbox.js +78 -30
  2. package/package.json +2 -2
package/atoms/checkbox/checkbox.js CHANGED
@@ -9,33 +9,58 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
  var _styledComponents = _interopRequireDefault(require("styled-components"));
12
- var _tokens = require("@desynova-digital/tokens");
12
+ var _icon = _interopRequireDefault(require("../icon"));
13
+ var _inputText = _interopRequireDefault(require("../inputText"));
13
14
  var _tag = _interopRequireDefault(require("../tag"));
15
+ var _radio = _interopRequireDefault(require("../radio"));
14
16
  var _switch = _interopRequireDefault(require("../switch"));
15
- var _icon = _interopRequireDefault(require("../icon"));
17
+ var _tokens = require("@desynova-digital/tokens");
16
18
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
17
19
  var CheckMark = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
18
20
  var Label = _styledComponents["default"].span(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
19
21
  var StyledTag = (0, _styledComponents["default"])(_tag["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])([""])));
20
- var StyledCheckboxOption = exports.StyledCheckboxOption = _styledComponents["default"].label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\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"])), function (props) {
21
- return props.seperationType === 'line' ? '15px' : '5px';
22
+
23
+ // Size configurations
24
+ var sizeConfig = {
25
+ small: {
26
+ checkboxSize: "16px",
27
+ labelMargin: "20px",
28
+ checkMarkTop: "45%",
29
+ radioDotSize: "6px"
30
+ },
31
+ medium: {
32
+ checkboxSize: "22px",
33
+ labelMargin: "25px",
34
+ checkMarkTop: "55%",
35
+ radioDotSize: "8px"
36
+ }
37
+ };
38
+ var StyledCheckboxOption = exports.StyledCheckboxOption = _styledComponents["default"].label(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\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\n input {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n }\n\n ", " {\n opacity: ", ";\n font-family: \"SFUIText-Regular\";\n color: ", ";\n margin-left: ", ";\n font-size: ", ";\n }\n\n ", " {\n position: absolute;\n top: 50%;\n left: 0;\n transform: translateY(-50%);\n height: ", ";\n width: ", ";\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\n &:hover input ~ ", " {\n box-shadow: inset 0 1px 4px 0 ", ";\n }\n\n input ~ ", " {\n &.disabled {\n cursor: not-allowed;\n opacity: 0.5;\n &:hover {\n background: ", ";\n color: ", ";\n }\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\n input:checked ~ ", " {\n background-color: ", ";\n color: ", ";\n }\n\n ", ":after {\n content: \"\";\n position: absolute;\n display: none;\n }\n\n input:checked ~ ", ":after {\n display: block;\n }\n\n /* Radio style (circle) */\n ", ":after {\n ", "\n }\n\n // Small size keyframes for checkbox (tick)\n @keyframes smallCheckboxCheck {\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: 3px;\n height: 0;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 100% {\n width: 3px;\n height: 7px;\n border-color: #fff;\n transform: translate3d(0em, -0.3em, 0) rotate(45deg);\n }\n }\n\n // Medium size keyframes for checkbox (tick)\n @keyframes mediumCheckboxCheck {\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 // Small size keyframes for radio (circle)\n @keyframes smallRadioCheck {\n 0% {\n width: 0;\n height: 0;\n transform: translate3d(-50%, -50%, 0);\n }\n 50% {\n width: ", ";\n height: ", ";\n transform: translate3d(-50%, -50%, 0);\n }\n 100% {\n width: ", ";\n height: ", ";\n transform: translate3d(-50%, -50%, 0);\n }\n }\n\n // Medium size keyframes for radio (circle)\n @keyframes mediumRadioCheck {\n 0% {\n width: 0;\n height: 0;\n transform: translate3d(-50%, -50%, 0);\n }\n 50% {\n width: ", ";\n height: ", ";\n transform: translate3d(-50%, -50%, 0);\n }\n 100% {\n width: ", ";\n height: ", ";\n transform: translate3d(-50%, -50%, 0);\n }\n }\n\n &.switch {\n display: flex;\n width: 100px;\n }\n"])), function (props) {
39
+ return props.seperationType === "line" ? "15px" : "5px";
22
40
  }, function (props) {
23
- return props.seperationType === 'line' && "\n width: 100%;\n border-bottom: 1px solid #303F51;\n ";
41
+ return props.seperationType === "line" && "\n width: 100%;\n border-bottom: 1px solid #303F51;\n ";
24
42
  }, function (props) {
25
- return props.readOnly ? 'none' : null;
43
+ return props.readOnly ? "none" : null;
26
44
  }, Label, function (props) {
27
45
  return props.readOnly ? 0.5 : null;
28
46
  }, function (props) {
29
47
  return _tokens.colors[props.theme].radio.color;
48
+ }, function (props) {
49
+ return sizeConfig[props.size].labelMargin;
50
+ }, function (props) {
51
+ return props.size === "small" ? "13px" : "14px";
30
52
  }, CheckMark, function (props) {
31
- // return "red"
53
+ return sizeConfig[props.size].checkboxSize;
54
+ }, function (props) {
55
+ return sizeConfig[props.size].checkboxSize;
56
+ }, function (props) {
32
57
  return props.readOnly && props.checked ? _tokens.colors[props.theme].radio.backgroundDisabled : _tokens.colors[props.theme].radio.background;
33
58
  }, function (props) {
34
59
  return props.readOnly ? _tokens.colors[props.theme].radio.borderDisabled : _tokens.colors[props.theme].radio.border;
35
60
  }, function (props) {
36
61
  return props.readOnly ? _tokens.colors[props.theme].radio.shadowDisabled : _tokens.colors[props.theme].radio.shadow;
37
62
  }, function (props) {
38
- return props.shape === 'square' ? '3px' : '100%';
63
+ return props.shape === "square" && !props.radio ? "3px" : "100%";
39
64
  }, CheckMark, function (props) {
40
65
  return _tokens.colors[props.theme].radio.shadow;
41
66
  }, StyledTag, function (props) {
@@ -54,13 +79,15 @@ var StyledCheckboxOption = exports.StyledCheckboxOption = _styledComponents["def
54
79
  return _tokens.colors[props.theme].radio.backgroundSelected;
55
80
  }, function (props) {
56
81
  return _tokens.colors[props.theme].radio.selectedText;
57
- }, CheckMark, CheckMark, CheckMark);
82
+ }, CheckMark, CheckMark, CheckMark, function (props) {
83
+ return props.radio ? "\n top: 50%;\n left: 50%;\n width: ".concat(sizeConfig[props.size].radioDotSize, ";\n height: ").concat(sizeConfig[props.size].radioDotSize, ";\n border-radius: 50%;\n background-color:#00cec6;\n transform: translate(-50%, -50%);\n animation: ").concat(props.size === "small" ? "smallRadioCheck" : "mediumRadioCheck", " 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n ") : "\n top: ".concat(sizeConfig[props.size].checkMarkTop, ";\n left: 35%;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg) translate(-50%, -50%);\n animation: ").concat(props.size === "small" ? "smallCheckboxCheck" : "mediumCheckboxCheck", " 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n ");
84
+ }, sizeConfig.small.radioDotSize, sizeConfig.small.radioDotSize, sizeConfig.small.radioDotSize, sizeConfig.small.radioDotSize, sizeConfig.medium.radioDotSize, sizeConfig.medium.radioDotSize, sizeConfig.medium.radioDotSize, sizeConfig.medium.radioDotSize);
58
85
  var justifyContent = {
59
86
  horizontal: "margin-right: 5px;",
60
87
  vertical: "margin-bottom: 5px;"
61
88
  };
62
89
  function getDisplayValue(props) {
63
- return props.align === 'horizontal' ? 'inline-block' : props.className === 'display-flex' ? 'flex' : 'table';
90
+ return props.align === "horizontal" ? "inline-block" : props.className === "display-flex" ? "flex" : "table";
64
91
  }
65
92
  var StyledCheckbox = exports.StyledCheckbox = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n ", " {\n display: ", ";\n ", ";\n &:last-child {\n margin: 0;\n }\n }\n"])), StyledCheckboxOption, function (props) {
66
93
  return getDisplayValue(props);
@@ -73,7 +100,11 @@ var Checkbox = function Checkbox(props) {
73
100
  readOnly: props.readOnly,
74
101
  className: props.type,
75
102
  shape: props.shape,
76
- seperationType: props.seperationType
103
+ seperationType: props.seperationType,
104
+ size: props.size,
105
+ radio: props.radio // Pass radio prop to styled component
106
+ ,
107
+ checked: props.checked
77
108
  }, /*#__PURE__*/_react["default"].createElement("input", {
78
109
  type: "checkbox",
79
110
  name: props.name,
@@ -87,22 +118,21 @@ var Checkbox = function Checkbox(props) {
87
118
  },
88
119
  readOnly: props.readOnly,
89
120
  disabled: props.isDisabled ? true : false
90
- }), props.type === 'label' ? /*#__PURE__*/_react["default"].createElement(StyledTag, {
121
+ }), props.type === "label" ? /*#__PURE__*/_react["default"].createElement(StyledTag, {
91
122
  theme: props.theme,
92
123
  selected: props.defaultChecked,
93
- className: props.isDisabled && props.access !== 'read' ? 'disabled' : ''
94
- }, props.children) : null, props.type === 'default' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CheckMark, null), /*#__PURE__*/_react["default"].createElement(Label, null, props.children)) : null, props.type === 'switch' ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Label, null, props.children), /*#__PURE__*/_react["default"].createElement(_switch["default"], {
124
+ className: props.isDisabled && props.access !== "read" ? "disabled" : ""
125
+ }, props.children) : null, props.type === "default" ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(CheckMark, null), /*#__PURE__*/_react["default"].createElement(Label, null, props.children)) : null, props.type === "switch" ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Label, null, props.children), /*#__PURE__*/_react["default"].createElement(_switch["default"], {
95
126
  checked: props.checked,
96
127
  theme: props.theme,
97
128
  onChangeCheck: function onChangeCheck(value) {
98
129
  console.log(value);
99
130
  }
100
- })) : null, props.type === 'icon' && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
131
+ })) : null, props.type === "icon" && /*#__PURE__*/_react["default"].createElement(_icon["default"], {
101
132
  name: props.value,
102
133
  value: props.value,
103
134
  fillRule: props.fillRule,
104
- color: props.checked ? _tokens.colors[props.theme].radio.backgroundSelected : '#AFB2BA'
105
- // color={props.checked ? (props.theme=="nexc" ? "#60BEF8" : "#00CEC6") : "#AFB2BA"}
135
+ color: props.checked ? _tokens.colors[props.theme].radio.backgroundSelected : "#AFB2BA"
106
136
  }));
107
137
  };
108
138
  var CheckboxGroup = function CheckboxGroup(props) {
@@ -112,21 +142,23 @@ var CheckboxGroup = function CheckboxGroup(props) {
112
142
  isDisabled: child.props.isDisabled,
113
143
  defaultChecked: props.selected && props.selected.indexOf(child.props.value) > -1,
114
144
  checked: props.selected && props.selected.indexOf(child.props.value) > -1,
115
- //child.props.checked,
116
145
  readOnly: props.readOnly || child.props.readOnly,
117
146
  onChange: child.props.isDisabled ? props.onChange : function () {},
118
147
  theme: props.theme,
119
148
  type: props.type,
120
- fillRule: props.fillRule || '',
149
+ fillRule: props.fillRule || "",
121
150
  access: child.props.access,
122
151
  shape: props.shape,
123
- seperationType: props.seperationType
152
+ seperationType: props.seperationType,
153
+ size: props.size,
154
+ // Pass size prop to children
155
+ radio: props.radio // Pass radio prop to children
124
156
  }) : null;
125
157
  }));
126
158
  };
127
159
  Checkbox.propTypes = {
128
160
  /** The direction in which the options should be laid out */
129
- align: _propTypes["default"].oneOf(['horizontal', 'vertical']),
161
+ align: _propTypes["default"].oneOf(["horizontal", "vertical"]),
130
162
  /** The name of the checkbox */
131
163
  name: _propTypes["default"].string,
132
164
  /** The value of the currently-selected option */
@@ -135,23 +167,39 @@ Checkbox.propTypes = {
135
167
  readOnly: _propTypes["default"].bool,
136
168
  /** Callback function which is called when the user selects an option */
137
169
  onChange: _propTypes["default"].func,
138
- type: _propTypes["default"].oneOf(['default', 'label', 'switch']),
170
+ /** The type of checkbox */
171
+ type: _propTypes["default"].oneOf(["default", "label", "switch"]),
172
+ /** The size of the checkbox */
173
+ size: _propTypes["default"].oneOf(["small", "medium"]),
174
+ /** If true, displays as radio button with circle instead of tick */
175
+ radio: _propTypes["default"].bool,
139
176
  fillRule: _propTypes["default"].string,
140
177
  access: _propTypes["default"].string,
141
- theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc'])
178
+ theme: _propTypes["default"].oneOf(["light", "dark", "nexc"])
142
179
  };
143
180
  CheckboxGroup.propTypes = {
144
- theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc'])
181
+ theme: _propTypes["default"].oneOf(["light", "dark", "nexc"]),
182
+ /** The size of the checkbox */
183
+ size: _propTypes["default"].oneOf(["small", "medium"]),
184
+ /** If true, displays as radio button with circle instead of tick */
185
+ radio: _propTypes["default"].bool
145
186
  };
146
187
  Checkbox.defaultProps = {
147
- align: 'vertical',
148
- type: 'default',
149
- theme: 'light'
188
+ align: "vertical",
189
+ type: "default",
190
+ theme: "light",
191
+ size: "medium",
192
+ // Default size is medium
193
+ radio: false // Default to checkbox style
150
194
  };
151
195
  CheckboxGroup.defaultProps = {
152
- theme: 'light',
153
- shape: _propTypes["default"].oneOf(['square', 'default']),
154
- seperationType: _propTypes["default"].oneOf(['line', 'default'])
196
+ theme: "light",
197
+ size: "medium",
198
+ // Default size is medium
199
+ radio: false,
200
+ // Default to checkbox style
201
+ shape: _propTypes["default"].oneOf(["square", "default"]),
202
+ seperationType: _propTypes["default"].oneOf(["line", "default"])
155
203
  };
156
204
  Checkbox.Group = CheckboxGroup;
157
205
  var _default = exports["default"] = Checkbox;
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@desynova-digital/components",
3
- "version": "9.1.48",
3
+ "version": "9.1.49",
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": "9.1.48",
10
+ "@desynova-digital/tokens": "9.1.49",
11
11
  "prop-types": "^15.7.2",
12
12
  "styled-components": "^4.3.2"
13
13
  },