oa-componentbook 0.17.72 → 0.17.73

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 (4) hide show
  1. package/build/components/oa-component-datepicker/CustomDatePicker.js +50 -26
  2. package/build/components/oa-component-select/CustomSelect.js +5 -5
  3. package/build/components/oa-component-timepicker/CustomTimePicker.js +14 -28
  4. package/package.json +2 -1
package/build/components/oa-component-datepicker/CustomDatePicker.js CHANGED
@@ -7,18 +7,16 @@ Object.defineProperty(exports, "__esModule", {
7
7
  exports.default = CustomDatePicker;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _propTypes = _interopRequireDefault(require("prop-types"));
10
- var _styledComponents = _interopRequireDefault(require("styled-components"));
11
10
  var _antd = require("antd");
11
+ var _CalendarTodayRounded = _interopRequireDefault(require("@material-ui/icons/CalendarTodayRounded"));
12
12
  var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
13
13
  require("antd/dist/reset.css");
14
+ var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
14
15
  const _excluded = ["data-test"];
15
- var _templateObject;
16
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
17
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
18
18
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
19
19
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
20
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
21
- const StyledDatepicker = (0, _styledComponents.default)(_antd.DatePicker)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ant-datepicker-selection-item {\n display: flex;\n align-items: center;\n }\n"])));
22
20
  function CustomDatePicker(_ref) {
23
21
  let {
24
22
  'data-test': dataTest
@@ -26,38 +24,64 @@ function CustomDatePicker(_ref) {
26
24
  props = _objectWithoutProperties(_ref, _excluded);
27
25
  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
28
26
  theme: {
27
+ components: {
28
+ DatePicker: {
29
+ lineHeight: 20 / 14,
30
+ paddingInline: 16,
31
+ // This works for middle sized datepicker
32
+ paddingInlineSM: 12,
33
+ /*
34
+ For small size:
35
+ 20 (line height)
36
+ + 2 * 5 (padding)
37
+ + 2 * 1 (border)
38
+ */
39
+ paddingBlockSM: 5,
40
+ /*
41
+ For default size:
42
+ 20 (line height)
43
+ + 2 * 13 (padding)
44
+ + 2 * 1 (border)
45
+ */
46
+ paddingBlock: 13
47
+ }
48
+ },
29
49
  token: {
30
- colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
31
- lineHeight: '20px',
32
- // Same as type-b2-400
33
- colorPrimary: _ColorVariablesMap.default['--color-primary'],
34
- // for active color of select
35
- colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
36
- // for hover color of select
37
- borderRadius: '4px',
38
- // For border radius of select text field.
39
- borderRadiusLG: '4px',
40
- // For border radius of dropdown
50
+ paddingXS: 32,
51
+ // Used to control margin of calendar icon
52
+ controlPaddingHorizontal: 16,
53
+ controlPaddingHorizontalSM: 13,
41
54
  controlHeight: 48,
42
55
  // height of text field (tag height is half of this, i.e. 24px)
43
56
  controlHeightSM: 32,
44
57
  // height of small text field
45
- controlItemBgHover: _ColorVariablesMap.default['--color-background-info'],
46
- // hover color of items
47
- colorBgElevated: _ColorVariablesMap.default['--color-primary-background'],
48
- // multipleItemHeight: 100,
58
+ // controlHeightLG: 64,
59
+ borderRadius: 4,
60
+ colorPrimary: _ColorVariablesMap.default['--color-primary'],
61
+ // for active color of input
62
+ colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
63
+ // for hover color of input
49
64
  colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
50
- // background color of disabled select
51
65
  colorBorder: _ColorVariablesMap.default['--color-placeholder-text'],
52
- colorFillSecondary: _ColorVariablesMap.default['--color-secondary-background'],
53
- // background color for tags
66
+ // border color of input text field
67
+ colorTextDisabled: _ColorVariablesMap.default['--color-secondary-content'],
68
+ // Color of disabled text.
69
+ colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
70
+ // Color of placeholder text
71
+ colorTextQuaternary: _ColorVariablesMap.default['--color-secondary-content'],
72
+ // color of disabled calendar icon
54
73
  colorText: _ColorVariablesMap.default['--color-primary-content'],
55
- // Text color of unselected options in dropdown
56
- colorIcon: _ColorVariablesMap.default['--color-primary-content'] // Color of cross icon
74
+ // Text color
75
+ colorError: _ColorVariablesMap.default['--color-negative'],
76
+ // Error color
77
+ colorErrorBorderHover: _ColorVariablesMap.default['--color-negative'] // Hover error color should be same as error color
57
78
  }
58
79
  }
59
- }, /*#__PURE__*/_react.default.createElement(StyledDatepicker, _extends({
60
- "data-test": dataTest
80
+ }, /*#__PURE__*/_react.default.createElement(_antd.DatePicker, _extends({
81
+ suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
82
+ icon: _CalendarTodayRounded.default,
83
+ size: 20
84
+ })
61
85
  }, props)));
62
86
  }
63
87
  CustomDatePicker.propTypes = {
package/build/components/oa-component-select/CustomSelect.js CHANGED
@@ -60,7 +60,7 @@ function CustomSelect(_ref) {
60
60
  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
61
61
  theme: {
62
62
  components: {
63
- AutoComplete: {
63
+ Select: {
64
64
  optionHeight: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? '36px' : '52px',
65
65
  optionSelectedBg: _ColorVariablesMap.default['--color-primary-background'],
66
66
  optionSelectedColor: _ColorVariablesMap.default['--color-primary']
@@ -71,7 +71,7 @@ function CustomSelect(_ref) {
71
71
  },
72
72
 
73
73
  token: {
74
- // controlOutline: '4px 4px 4px 4px red', // an attempt at applying box shadow
74
+ // // controlOutline: '4px 4px 4px 4px red', // an attempt at applying box shadow
75
75
  colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
76
76
  // Color of placeholder text
77
77
  colorPrimary: _ColorVariablesMap.default['--color-primary'],
@@ -82,12 +82,12 @@ function CustomSelect(_ref) {
82
82
  // For border radius of select text field.
83
83
  borderRadiusLG: '4px',
84
84
  // For border radius of dropdown
85
- controlHeight: 48,
85
+ controlHeight: '48px',
86
86
  // height of text field (tag height is half of this, i.e. 24px)
87
- controlHeightSM: 32,
87
+ controlHeightSM: '32px',
88
88
  // height of small text field
89
89
 
90
- // This controls padding of larger text box
90
+ // // This controls padding of larger text box
91
91
  controlPaddingHorizontalSM: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? 13 : 17,
92
92
  // 1 extra so that it shows 12px and 16px in browser console.
93
93
  paddingSM: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? 13 : 17,
package/build/components/oa-component-timepicker/CustomTimePicker.js CHANGED
@@ -1,6 +1,5 @@
1
1
  "use strict";
2
2
 
3
- require("core-js/modules/es.object.assign.js");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
@@ -12,13 +11,9 @@ var _antd = require("antd");
12
11
  var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
13
12
  require("antd/dist/reset.css");
14
13
  const _excluded = ["data-test"];
15
- var _templateObject;
16
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
- function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
18
15
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
19
16
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
20
- function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
21
- const StyledDatepicker = (0, _styledComponents.default)(_antd.DatePicker)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ant-timepicker-selection-item {\n display: flex;\n align-items: center;\n }\n"])));
22
17
  function CustomTimePicker(_ref) {
23
18
  let {
24
19
  'data-test': dataTest
@@ -27,38 +22,29 @@ function CustomTimePicker(_ref) {
27
22
  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
28
23
  theme: {
29
24
  token: {
30
- colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
31
- lineHeight: '20px',
32
- // Same as type-b2-400
33
- colorPrimary: _ColorVariablesMap.default['--color-primary'],
34
- // for active color of select
35
- colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
36
- // for hover color of select
37
- borderRadius: '4px',
38
- // For border radius of select text field.
39
- borderRadiusLG: '4px',
40
- // For border radius of dropdown
25
+ controlPaddingHorizontal: 16,
26
+ controlPaddingHorizontalSM: 12,
41
27
  controlHeight: 48,
42
28
  // height of text field (tag height is half of this, i.e. 24px)
43
29
  controlHeightSM: 32,
44
30
  // height of small text field
45
- controlItemBgHover: _ColorVariablesMap.default['--color-background-info'],
46
- // hover color of items
47
- colorBgElevated: _ColorVariablesMap.default['--color-primary-background'],
48
- // multipleItemHeight: 100,
31
+ controlHeightLG: 64,
32
+ borderRadius: 4,
33
+ colorPrimary: _ColorVariablesMap.default['--color-primary'],
34
+ // for active color of input
35
+ colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
36
+ // for hover color of input
49
37
  colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
50
- // background color of disabled select
51
38
  colorBorder: _ColorVariablesMap.default['--color-placeholder-text'],
52
- colorFillSecondary: _ColorVariablesMap.default['--color-secondary-background'],
53
- // background color for tags
39
+ // border color of input text field
54
40
  colorText: _ColorVariablesMap.default['--color-primary-content'],
55
- // Text color of unselected options in dropdown
56
- colorIcon: _ColorVariablesMap.default['--color-primary-content'] // Color of cross icon
41
+ // Text color
42
+ colorError: _ColorVariablesMap.default['--color-negative'],
43
+ // Error color
44
+ colorErrorBorderHover: _ColorVariablesMap.default['--color-negative'] // Hover error color should be same as error color
57
45
  }
58
46
  }
59
- }, /*#__PURE__*/_react.default.createElement(StyledDatepicker, _extends({
60
- "data-test": dataTest
61
- }, props)));
47
+ }, /*#__PURE__*/_react.default.createElement(_antd.TimePicker, props));
62
48
  }
63
49
  CustomTimePicker.propTypes = {
64
50
  'data-test': _propTypes.default.string,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.17.72",
3
+ "version": "0.17.73",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",
@@ -52,6 +52,7 @@
52
52
  "scripts": {
53
53
  "start": "react-scripts start",
54
54
  "prepublishOnly": "(npm version patch --save) && (npm run build)",
55
+ "prebuild": "npm run lint-fix -- --quiet",
55
56
  "build": "rm -rf build && NODE_ENV=production babel src/lib --out-dir build --copy-files",
56
57
  "storybook": "storybook dev -p 6006",
57
58
  "build-storybook": "storybook build",