oa-componentbook 0.17.61 → 0.17.63

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.
@@ -29,9 +29,10 @@ function CustomButton(_ref) {
29
29
  'data-test': dataTest
30
30
  } = _ref,
31
31
  domProps = _objectWithoutProperties(_ref, _excluded);
32
- const buttonTypo = (0, _styles.getButtonTypography)(size);
32
+ const buttonTypography = (0, _styles.getButtonTypography)(size);
33
+ const iconSize = (0, _styles.getIconSize)(size);
33
34
  return /*#__PURE__*/_react.default.createElement(_styles.ColoredStyledButton, _extends({
34
- className: "".concat(disabled ? "".concat(type.replace('danger-', ''), "-disabled") : type, " ").concat(type.replace('danger-', '') === 'text-only' ? 'text-only-size' : size, " ").concat(className),
35
+ className: "".concat(disabled ? "".concat(type.replace('danger-', ''), "-disabled") : type, " ").concat(type.replace('danger-', '') === 'text-only' ? "".concat(size, "-text-only") : size, " ").concat(className),
35
36
  disabled: disabled,
36
37
  onClick: disabled ? null : onClick,
37
38
  type: htmlType,
@@ -39,9 +40,13 @@ function CustomButton(_ref) {
39
40
  "data-test": dataTest
40
41
  }, domProps), /*#__PURE__*/_react.default.createElement("div", {
41
42
  className: "text-container"
42
- }, iconConfig.position === 'left' && iconConfig.icon, label && /*#__PURE__*/_react.default.createElement(_Typography.default, {
43
- typography: buttonTypo
44
- }, label), iconConfig.position === 'right' && iconConfig.icon));
43
+ }, iconConfig.position === 'left' && /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
44
+ size: iconSize
45
+ }), label && /*#__PURE__*/_react.default.createElement(_Typography.default, {
46
+ typography: buttonTypography
47
+ }, label), iconConfig.position === 'right' && /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
48
+ size: iconSize
49
+ })));
45
50
  }
46
51
  CustomButton.propTypes = {
47
52
  className: _propTypes.default.string,
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = exports.ColoredStyledButton = void 0;
7
7
  exports.getButtonTypography = getButtonTypography;
8
+ exports.getIconSize = getIconSize;
8
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
10
  var _templateObject, _templateObject2;
10
11
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -12,7 +13,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
12
13
  var _default = {};
13
14
  exports.default = _default;
14
15
  const StyledButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-radius: 4px;\n cursor: pointer;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n .text-container {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px; \n text-align: left;\n }\n"])));
15
- const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 2.25rem;\n min-width: 100px;\n padding: 0.625rem 1rem;\n\n &.small {\n height: 30px;\n min-width: 80px;\n padding: 10px 16px;\n }\n\n &.medium {\n height: 36px;\n min-width: 100px;\n padding: 10px 16px;\n }\n\n &.large {\n height: 48px;\n min-width: 136px;\n padding: 10px 24px;\n }\n\n &.text-only-size {\n height: auto;\n padding: 0;\n }\n\n &.primary {\n background: var(--color-primary);\n border: 1px solid var(--color-primary);\n color: var(--color-primary-background);\n }\n &.primary:hover {\n background: var(--color-primary-hover);\n border: 1px solid var(--color-primary-hover);\n }\n\n &.primary-disabled {\n background: var(--color-disabled-button);\n cursor: not-allowed;\n color: var(--color-primary-background);\n border: 1px solid var(--color-disabled-button);\n }\n\n &.secondary {\n background: transparent;\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n }\n &.secondary:hover {\n border: 1px solid var(--color-primary-hover);\n color: var(--color-primary-hover);\n }\n\n &.secondary-disabled {\n background: var(--color-primary-background);\n border: 1px solid var(--color-disabled-button);\n color: var(--color-disabled-button);\n cursor: not-allowed;\n }\n \n &.text-only {\n border: none;\n background: transparent;\n color: var(--color-primary);\n }\n &.text-only:hover {\n color: var(--color-primary-hover);\n }\n\n &.text-only-disabled {\n border: none;\n background: transparent;\n color: var(--color-disabled-button);\n cursor: not-allowed;\n }\n \n &.danger-primary {\n background: var(--color-negative);\n color: var(--color-primary-background);\n border: 1px solid var(--color-negative);\n }\n &.danger-primary:hover {\n background: var(--color-hover-negative);\n color: var(--color-primary-background);\n border: 1px solid var(--color-hover-negative);\n }\n\n &.danger-secondary {\n color: var(--color-negative);\n border: 1px solid var(--color-negative);\n background: var(--color-primary-background);\n }\n &.danger-secondary:hover {\n color: var(--color-hover-negative);\n border: 1px solid var(--color-hover-negative);\n background: var(--color-primary-background);\n }\n\n &.danger-text-only {\n border: none;\n color: var(--color-negative);\n background: transparent;\n }\n &.danger-text-only:hover {\n border: none;\n color: var(--color-hover-negative);\n background: transparent;\n }\n"])));
16
+ const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n height: 2.25rem;\n min-width: 100px;\n padding: 0.625rem 1rem;\n\n &.small {\n height: 30px;\n min-width: 80px;\n padding: 10px 16px;\n }\n\n &.medium {\n height: 36px;\n min-width: 100px;\n padding: 10px 16px;\n }\n\n &.large {\n height: 48px;\n min-width: 136px;\n padding: 10px 24px;\n }\n\n &.medium-text-only,\n &.small-text-only {\n min-width: auto;\n height: auto;\n padding: 4px 0;\n }\n\n &.large-text-only {\n min-width: auto;\n height: auto;\n padding: 8px 0;\n }\n\n &.primary {\n background: var(--color-primary);\n border: 1px solid var(--color-primary);\n color: var(--color-primary-background);\n }\n &.primary:hover {\n background: var(--color-primary-hover);\n border: 1px solid var(--color-primary-hover);\n }\n\n &.primary-disabled {\n background: var(--color-disabled-button);\n cursor: not-allowed;\n color: var(--color-primary-background);\n border: 1px solid var(--color-disabled-button);\n }\n\n &.secondary {\n background: transparent;\n border: 1px solid var(--color-primary);\n color: var(--color-primary);\n }\n &.secondary:hover {\n background: transparent;\n border: 1px solid var(--color-primary-hover);\n color: var(--color-primary-hover);\n }\n\n &.secondary-disabled {\n background: transparent;\n border: 1px solid var(--color-disabled-button);\n color: var(--color-disabled-button);\n cursor: not-allowed;\n }\n \n &.text-only {\n border: none;\n background: transparent;\n color: var(--color-primary);\n }\n &.text-only:hover {\n color: var(--color-primary-hover);\n }\n\n &.text-only-disabled {\n border: none;\n background: transparent;\n color: var(--color-disabled-button);\n cursor: not-allowed;\n }\n \n &.danger-primary {\n background: var(--color-negative);\n color: var(--color-primary-background);\n border: 1px solid var(--color-negative);\n }\n &.danger-primary:hover {\n background: var(--color-hover-negative);\n color: var(--color-primary-background);\n border: 1px solid var(--color-hover-negative);\n }\n\n &.danger-secondary {\n background: transparent;\n border: 1px solid var(--color-negative);\n color: var(--color-negative);\n }\n &.danger-secondary:hover {\n background: transparent;\n border: 1px solid var(--color-hover-negative);\n color: var(--color-hover-negative);\n }\n\n &.danger-text-only {\n border: none;\n color: var(--color-negative);\n background: transparent;\n }\n &.danger-text-only:hover {\n border: none;\n color: var(--color-hover-negative);\n background: transparent;\n }\n"])));
16
17
  exports.ColoredStyledButton = ColoredStyledButton;
17
18
  function getButtonTypography(size) {
18
19
  switch (size) {
@@ -25,4 +26,16 @@ function getButtonTypography(size) {
25
26
  default:
26
27
  return 'type-button-500';
27
28
  }
29
+ }
30
+ function getIconSize(size) {
31
+ switch (size) {
32
+ case 'large':
33
+ return 24;
34
+ case 'small':
35
+ return 16;
36
+ case 'medium':
37
+ return 20;
38
+ default:
39
+ return 20;
40
+ }
28
41
  }
@@ -23,7 +23,8 @@ const getCheckboxTheme = () => ({
23
23
  colorPrimary: _ColorVariablesMap.default['--color-primary'],
24
24
  colorBgContainerDisabled: _ColorVariablesMap.default['--color-secondary-background'],
25
25
  colorBorder: _ColorVariablesMap.default['--color-disabled-button'],
26
- borderRadiusSM: '2px'
26
+ borderRadiusSM: '2px',
27
+ paddingXS: '12px'
27
28
  }
28
29
  });
29
30
  exports.getCheckboxTheme = getCheckboxTheme;
@@ -13,7 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
13
13
  var _icons = _interopRequireDefault(require("@ant-design/icons"));
14
14
  var _delete = _interopRequireDefault(require("../../images/delete.svg"));
15
15
  var _caution = _interopRequireDefault(require("../../images/caution.svg"));
16
- const _excluded = ["component", "componentProps", "size", "style"];
16
+ var _SizedSvg = _interopRequireDefault(require("./SizedSvg"));
17
+ const _excluded = ["alt", "color", "hoverColor", "size", "src", "style"];
17
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
19
  function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
19
20
  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); }
@@ -24,74 +25,58 @@ function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typ
24
25
  function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
25
26
  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; }
26
27
  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; }
27
- function SizedSvg(_ref) {
28
+ function CustomIcon(_ref) {
28
29
  let {
29
- alt,
30
- size,
31
- src
32
- } = _ref;
33
- return /*#__PURE__*/_react.default.createElement("img", {
34
- src: src,
35
- alt: alt,
36
- height: "".concat(size, "px"),
37
- width: "".concat(size, "px")
38
- });
39
- }
40
- SizedSvg.propTypes = {
41
- alt: _propTypes.default.string,
42
- size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
43
- src: _propTypes.default.string.isRequired
44
- };
45
- SizedSvg.defaultProps = {
46
- alt: 'random icon',
47
- size: '20'
48
- };
49
- function CustomIcon(_ref2) {
50
- let {
51
- component: _component,
52
- componentProps,
30
+ alt,
31
+ color,
32
+ hoverColor,
53
33
  size,
34
+ src,
54
35
  style
55
- } = _ref2,
56
- props = _objectWithoutProperties(_ref2, _excluded);
36
+ } = _ref,
37
+ props = _objectWithoutProperties(_ref, _excluded);
57
38
  return /*#__PURE__*/_react.default.createElement(_icons.default, _extends({
58
39
  style: _objectSpread({
59
40
  height: "".concat(size, "px"),
60
41
  width: "".concat(size, "px")
61
42
  }, style),
62
- component: () => _component(_objectSpread({
63
- size
64
- }, componentProps))
43
+ component:
44
+ // We need to give an uninstantiated component
45
+ () => (0, _SizedSvg.default)({
46
+ alt,
47
+ color,
48
+ hoverColor,
49
+ size,
50
+ src
51
+ })
65
52
  }, props));
66
53
  }
67
54
  CustomIcon.propTypes = {
68
- component: _propTypes.default.node.isRequired,
69
- componentProps: _propTypes.default.object,
55
+ alt: _propTypes.default.string,
56
+ color: _propTypes.default.string,
57
+ hoverColor: _propTypes.default.string,
70
58
  size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
59
+ src: _propTypes.default.string.isRequired,
71
60
  style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]))
72
61
  };
73
62
  CustomIcon.defaultProps = {
74
- componentProps: {},
63
+ alt: '',
64
+ color: null,
65
+ hoverColor: null,
75
66
  size: '20',
76
67
  style: {}
77
68
  };
78
- function DeleteIcon(_ref3) {
79
- let props = Object.assign({}, (_objectDestructuringEmpty(_ref3), _ref3));
69
+ function DeleteIcon(_ref2) {
70
+ let props = Object.assign({}, (_objectDestructuringEmpty(_ref2), _ref2));
80
71
  return /*#__PURE__*/_react.default.createElement(CustomIcon, _extends({
81
- component: SizedSvg,
82
- componentProps: {
83
- alt: 'Delete icon.',
84
- src: _delete.default
85
- }
72
+ alt: "Delete icon.",
73
+ src: _delete.default
86
74
  }, props));
87
75
  }
88
- function WarningIcon(_ref4) {
89
- let props = Object.assign({}, (_objectDestructuringEmpty(_ref4), _ref4));
76
+ function WarningIcon(_ref3) {
77
+ let props = Object.assign({}, (_objectDestructuringEmpty(_ref3), _ref3));
90
78
  return /*#__PURE__*/_react.default.createElement(CustomIcon, _extends({
91
- component: SizedSvg,
92
- componentProps: {
93
- alt: 'Warning icon.',
94
- src: _caution.default
95
- }
79
+ alt: "Warning icon.",
80
+ src: _caution.default
96
81
  }, props));
97
82
  }
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = SizedSvg;
7
+ var _react = _interopRequireDefault(require("react"));
8
+ var _propTypes = _interopRequireDefault(require("prop-types"));
9
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
+ var _templateObject;
11
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
12
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
13
+ function SizedSvg(_ref) {
14
+ var _ref2;
15
+ let {
16
+ alt,
17
+ color,
18
+ hoverColor,
19
+ size,
20
+ src
21
+ } = _ref;
22
+ const Img = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n /* color: ", ";\n fill: currentColor;\n\n &:hover {\n color: ", ";\n fill: currentColor;\n } */\n "])), color !== null && color !== void 0 ? color : 'inherit', (_ref2 = hoverColor !== null && hoverColor !== void 0 ? hoverColor : color) !== null && _ref2 !== void 0 ? _ref2 : 'inherit');
23
+ return /*#__PURE__*/_react.default.createElement(Img, {
24
+ alt: alt,
25
+ src: src,
26
+ height: "".concat(size, "px"),
27
+ width: "".concat(size, "px")
28
+ });
29
+ }
30
+ SizedSvg.propTypes = {
31
+ alt: _propTypes.default.string,
32
+ color: _propTypes.default.string,
33
+ hoverColor: _propTypes.default.string,
34
+ size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
35
+ src: _propTypes.default.string.isRequired
36
+ };
37
+ SizedSvg.defaultProps = {
38
+ alt: 'random icon',
39
+ color: null,
40
+ hoverColor: null,
41
+ size: '20'
42
+ };
@@ -21,7 +21,7 @@ function CustomInfo(_ref) {
21
21
  } = _ref;
22
22
  return /*#__PURE__*/_react.default.createElement(_styles.InfoContainer, {
23
23
  $color: color
24
- }, iconConfig.position === 'left' && (!title ? /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
24
+ }, /*#__PURE__*/_react.default.createElement(_styles.RowFlex, null, iconConfig.position === 'left' && (!title ? /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
25
25
  size: 20,
26
26
  style: {
27
27
  alignSelf: 'start'
@@ -42,10 +42,11 @@ function CustomInfo(_ref) {
42
42
  }
43
43
  }) : /*#__PURE__*/_react.default.isValidElement(iconConfig.icon) && /*#__PURE__*/_react.default.cloneElement(iconConfig.icon, {
44
44
  size: 24,
45
+ color: 'red',
45
46
  style: {
46
47
  alignSelf: 'start'
47
48
  }
48
- })), (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.label) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, buttonConfig));
49
+ }))), (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.label) && /*#__PURE__*/_react.default.createElement(_CustomButton.default, buttonConfig));
49
50
  }
50
51
  CustomInfo.propTypes = {
51
52
  buttonConfig: _propTypes.default.shape({
@@ -59,7 +60,7 @@ CustomInfo.propTypes = {
59
60
  onClick: _propTypes.default.func,
60
61
  type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only'])
61
62
  }),
62
- color: _propTypes.default.oneOf([['primary', 'background-dark', 'background-info', 'primary-hover', 'positive', 'background-positive', 'warning', 'background-warning', 'negative', 'background-negative', 'primary-content', 'secondary-content', 'placeholder-text', 'disabled-button', 'divider', 'secondary-background', 'primary-background', 'background-overlay', 'tags']]),
63
+ color: _propTypes.default.oneOf(['primary', 'background-dark', 'background-info', 'primary-hover', 'positive', 'background-positive', 'warning', 'background-warning', 'negative', 'background-negative', 'primary-content', 'secondary-content', 'placeholder-text', 'disabled-button', 'divider', 'secondary-background', 'primary-background', 'background-overlay', 'tags']),
63
64
  description: _propTypes.default.string,
64
65
  iconConfig: _propTypes.default.shape({
65
66
  icon: _propTypes.default.node,
@@ -14,5 +14,5 @@ const ColFlex = _styledComponents.default.div(_templateObject2 || (_templateObje
14
14
  exports.ColFlex = ColFlex;
15
15
  const InfoContainer = (0, _styledComponents.default)(RowFlex).attrs({
16
16
  as: 'section'
17
- })(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 8px;\n align-items: center;\n border-radius: 8px;\n gap: 8px;\n background-color: var(--color-", ");\n\n button {\n margin-left: 8px;\n };\n"])), props => props.$color);
17
+ })(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 8px;\n align-items: center;\n border-radius: 8px;\n background-color: var(--color-", ");\n \n button {\n margin-left: 8px;\n };\n"])), props => props.$color);
18
18
  exports.InfoContainer = InfoContainer;
@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
11
11
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
12
12
  var _default = {};
13
13
  exports.default = _default;
14
- const RadioContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-radio-wrapper-disabled p{\n color: var(--color-disabled-button);\n}\n.ant-radio-disabled {\n color: var(--color-disabled-button);\n}\n.ant-radio-wrapper-disabled {\n color: var(--color-disabled-button);\n}\n"])));
14
+ const RadioContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.ant-radio-wrapper-disabled p{\n color: var(--color-disabled-button);\n}\n.ant-radio-disabled {\n color: var(--color-disabled-button);\n}\n.ant-radio-wrapper-disabled {\n color: var(--color-disabled-button);\n}\n.ant-radio-wrapper span.ant-radio+*{\n padding-inline-start: 12px;\n}\n"])));
15
15
  exports.RadioContainer = RadioContainer;
16
16
  const StyledRadio = (0, _styledComponents.default)(_antd.Radio)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n p{\n color: var(--color-primary-content);\n }\n .ant-radio-checked .ant-radio-inner {\n background: var(--color-primary-background);\n border:1px solid var(--color-primary);\n }\n\n .ant-radio-inner::after {\n background: var(--color-primary);\n }\n\n .ant-radio-inner:hover {\n color: var(--color-primary);\n } \n \n .ant-radio-inner {\n border-color: var(--color-secondary-content);\n }\n"])));
17
17
  exports.StyledRadio = StyledRadio;
@@ -9,10 +9,11 @@ exports.default = void 0;
9
9
  var _react = _interopRequireDefault(require("react"));
10
10
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
  var _antd = require("antd");
12
+ var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
12
13
  require("antd/dist/reset.css");
13
14
  var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
14
15
  var _utils = require("../../utils");
15
- const _excluded = ["columns", "dataSource", "pagination", "rowKey"],
16
+ const _excluded = ["columns", "dataSource", "pagination", "rowKey", "size"],
16
17
  _excluded2 = ["title"];
17
18
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
18
19
  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); }
@@ -28,7 +29,8 @@ function CustomTable(_ref) {
28
29
  columns,
29
30
  dataSource,
30
31
  pagination,
31
- rowKey
32
+ rowKey,
33
+ size
32
34
  } = _ref,
33
35
  antDesignProps = _objectWithoutProperties(_ref, _excluded);
34
36
  const uppercaseColumns = columns.map(column => {
@@ -38,7 +40,9 @@ function CustomTable(_ref) {
38
40
  otherColumnProperties = _objectWithoutProperties(column, _excluded2);
39
41
  if ((0, _utils.isString)(title)) {
40
42
  return _objectSpread({
41
- title: title.toUpperCase()
43
+ title: /*#__PURE__*/_react.default.createElement(_Typography.default, {
44
+ typography: "type-sl1-700"
45
+ }, title)
42
46
  }, otherColumnProperties);
43
47
  }
44
48
  return column;
@@ -74,7 +78,8 @@ function CustomTable(_ref) {
74
78
  columns: uppercaseColumns,
75
79
  dataSource: dataSource,
76
80
  pagination: pagination,
77
- rowKey: rowKey
81
+ rowKey: rowKey,
82
+ size: size
78
83
  // This allows for all ant design props to be supported.
79
84
  }, antDesignProps)));
80
85
  }
@@ -82,13 +87,15 @@ CustomTable.propTypes = {
82
87
  columns: _propTypes.default.array,
83
88
  dataSource: _propTypes.default.array,
84
89
  pagination: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.object]),
85
- rowKey: _propTypes.default.string
90
+ rowKey: _propTypes.default.string,
91
+ size: _propTypes.default.oneOf(['small', 'middle', 'large'])
86
92
  };
87
93
  CustomTable.defaultProps = {
88
94
  dataSource: [],
89
95
  columns: [],
90
96
  pagination: false,
91
- rowKey: ''
97
+ rowKey: '',
98
+ size: 'middle'
92
99
  };
93
100
  var _default = CustomTable;
94
101
  exports.default = _default;
@@ -1,3 +1,3 @@
1
- <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M20.137 10.1349C19.8746 9.58714 19.4973 9.13231 19.0428 8.81608C18.5884 8.49985 18.0729 8.33337 17.5482 8.33337C17.0234 8.33337 16.508 8.49985 16.0535 8.81608C15.5991 9.13231 15.2217 9.58714 14.9593 10.1349L6.88688 26.9882C6.62454 27.536 6.48644 28.1574 6.48645 28.7898C6.48646 29.4223 6.6246 30.0436 6.88696 30.5914C7.14933 31.1391 7.52668 31.594 7.98111 31.9102C8.43553 32.2265 8.951 32.393 9.47573 32.393H25.6206C26.1454 32.393 26.6608 32.2265 27.1153 31.9102C27.5697 31.594 27.947 31.1391 28.2094 30.5914C28.4718 30.0436 28.6099 29.4223 28.6099 28.7898C28.6099 28.1574 28.4718 27.536 28.2095 26.9882L20.137 10.1349ZM17.5482 29.4747C17.3201 29.4747 17.0972 29.3932 16.9076 29.2405C16.7179 29.0877 16.5701 28.8707 16.4829 28.6167C16.3956 28.3627 16.3728 28.0833 16.4173 27.8137C16.4618 27.5441 16.5716 27.2964 16.7328 27.102C16.8941 26.9077 17.0996 26.7753 17.3232 26.7217C17.5469 26.668 17.7788 26.6956 17.9895 26.8008C18.2001 26.9059 18.3802 27.0841 18.5069 27.3127C18.6336 27.5412 18.7013 27.8099 18.7013 28.0848C18.7013 28.2674 18.6714 28.4481 18.6135 28.6167C18.5555 28.7853 18.4706 28.9386 18.3635 29.0676C18.2565 29.1967 18.1293 29.2991 17.9894 29.3689C17.8495 29.4387 17.6996 29.4747 17.5482 29.4747ZM19.1762 15.5289L18.7689 23.8742C18.7506 24.2495 18.614 24.6021 18.3871 24.8601C18.1602 25.118 17.86 25.2616 17.5481 25.2616C17.2362 25.2616 16.9361 25.118 16.7092 24.8601C16.4822 24.6021 16.3456 24.2495 16.3273 23.8742L15.9201 15.5289C15.907 15.2615 15.9394 14.9937 16.0154 14.7419C16.0913 14.4902 16.2091 14.2598 16.3615 14.0649C16.514 13.87 16.6979 13.7147 16.9019 13.6085C17.106 13.5024 17.3259 13.4477 17.5481 13.4477C17.7704 13.4477 17.9902 13.5024 18.1943 13.6085C18.3983 13.7147 18.5822 13.87 18.7347 14.0649C18.8872 14.2598 19.005 14.4902 19.0809 14.7419C19.1568 14.9937 19.1892 15.2615 19.1762 15.5289Z" fill="#FF991F"/>
1
+ <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M11.8723 4.0809C11.6825 3.75226 11.4096 3.47936 11.0809 3.28962C10.7523 3.09989 10.3795 3 10 3C9.62051 3 9.2477 3.09989 8.91905 3.28962C8.59039 3.47936 8.31747 3.75226 8.1277 4.0809L2.2896 14.1929C2.09987 14.5216 1.99999 14.8944 2 15.2739C2.00001 15.6534 2.09991 16.0262 2.28966 16.3548C2.4794 16.6835 2.75231 16.9564 3.08096 17.1461C3.4096 17.3359 3.7824 17.4358 4.16189 17.4358H15.8381C16.2176 17.4358 16.5904 17.3359 16.919 17.1461C17.2477 16.9564 17.5206 16.6835 17.7103 16.3548C17.9001 16.0262 18 15.6534 18 15.2739C18 14.8944 17.9001 14.5216 17.7104 14.1929L11.8723 4.0809ZM10 15.6848C9.83506 15.6848 9.67383 15.6359 9.5367 15.5443C9.39956 15.4526 9.29267 15.3224 9.22956 15.17C9.16644 15.0176 9.14993 14.8499 9.1821 14.6882C9.21428 14.5264 9.29371 14.3778 9.41033 14.2612C9.52696 14.1446 9.67555 14.0651 9.83732 14.033C9.99908 14.0008 10.1668 14.0173 10.3191 14.0804C10.4715 14.1435 10.6018 14.2504 10.6934 14.3876C10.785 14.5247 10.8339 14.6859 10.8339 14.8509C10.8339 14.9604 10.8124 15.0688 10.7704 15.17C10.7285 15.2712 10.6671 15.3631 10.5897 15.4405C10.5122 15.518 10.4203 15.5794 10.3191 15.6213C10.218 15.6632 10.1095 15.6848 10 15.6848ZM11.1774 7.31731L10.8829 12.3245C10.8696 12.5497 10.7708 12.7613 10.6067 12.916C10.4426 13.0708 10.2255 13.157 9.99997 13.157C9.77439 13.157 9.55734 13.0708 9.39322 12.916C9.2291 12.7613 9.13031 12.5497 9.11707 12.3245L8.82253 7.31731C8.81309 7.15686 8.83654 6.99618 8.89144 6.84513C8.94635 6.69407 9.03155 6.55583 9.14181 6.43889C9.25207 6.32196 9.38507 6.22879 9.53264 6.1651C9.68021 6.10142 9.83924 6.06858 9.99996 6.06858C10.1607 6.06858 10.3197 6.10142 10.4673 6.1651C10.6149 6.22879 10.7478 6.32196 10.8581 6.43889C10.9684 6.55583 11.0536 6.69407 11.1085 6.84513C11.1634 6.99618 11.1868 7.15686 11.1774 7.31731Z" fill="#FF991F"/>
3
3
  </svg>
@@ -11,5 +11,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
11
11
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
12
12
  var _default = {};
13
13
  exports.default = _default;
14
- const StyledForm = (0, _styledComponents.default)(_antd.Form)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ant-input-affix-wrapper-disabled {\n background: var(--color-divider);\n border: 1px solid var(--color-placeholder-text);\n }\n\n .ant-form-item-control-input{\n min-height: 30px;\n width: 120px;\n }\n"])));
14
+ const StyledForm = (0, _styledComponents.default)(_antd.Form)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .ant-input-affix-wrapper-disabled {\n background: var(--color-divider);\n border: 1px solid var(--color-placeholder-text);\n }\n\n .ant-form-item-control-input{\n min-height: 30px;\n width: 100%;\n max-width: 120px;\n }\n"])));
15
15
  exports.StyledForm = StyledForm;
@@ -18,8 +18,8 @@ var _CustomInfo = _interopRequireDefault(require("../../components/oa-component-
18
18
  var _templateObject, _templateObject2;
19
19
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20
20
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
21
- const FlexContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
22
- const CostBreakdown = _styledComponents.default.aside(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: var(--color-secondary-background);\n padding: 0 12px;\n ul{\n display: flex;\n margin: 0;\n border-bottom: 1px solid var(--color-divider);\n padding: 12px 0;\n }\n ul:last-child{\n border-bottom: none;\n }\n ul li{\n width: 100%;\n list-style: none;\n }\n ul li:first-child{\n color: var(--color-primary-content);\n font-style: normal;\n }\n ul li:last-child{\n font-style: normal;\n color: var(--color-secondary-content);\n }\n"])));
21
+ const FlexContainer = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n .text-only-size{\n justify-content: left;\n }\n"])));
22
+ const CostBreakdown = _styledComponents.default.aside(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: var(--color-secondary-background);\n padding: 0 12px;\n border-radius: 4px;\n ul{\n display: flex;\n margin: 0;\n border-bottom: 1px solid var(--color-divider);\n padding: 12px 0;\n }\n ul:last-child{\n border-bottom: none;\n }\n ul li{\n width: 100%;\n list-style: none;\n }\n ul li:first-child{\n color: var(--color-primary-content);\n font-style: normal;\n }\n ul li:last-child{\n font-style: normal;\n color: var(--color-secondary-content);\n }\n"])));
23
23
  // Mapping of how costs are covered
24
24
  const costCoveredBy = {
25
25
  costToCompany: 'Cost to Company',
@@ -29,15 +29,24 @@ const columns = [{
29
29
  }, {
30
30
  title: 'Uploaded On',
31
31
  dataIndex: 'dateUploaded',
32
- key: 'dateUploaded'
32
+ key: 'dateUploaded',
33
+ render: text => /*#__PURE__*/_react.default.createElement(_Typography.default, {
34
+ typography: "type-b2-400"
35
+ }, text)
33
36
  }, {
34
37
  title: 'Description',
35
38
  dataIndex: 'description',
36
- key: 'description'
39
+ key: 'description',
40
+ render: text => /*#__PURE__*/_react.default.createElement(_Typography.default, {
41
+ typography: "type-b2-400"
42
+ }, text)
37
43
  }, {
38
44
  title: 'Rejected By',
39
45
  dataIndex: 'rejectedBy',
40
- key: 'rejectedBy'
46
+ key: 'rejectedBy',
47
+ render: text => /*#__PURE__*/_react.default.createElement(_Typography.default, {
48
+ typography: "type-b2-400"
49
+ }, text)
41
50
  }];
42
51
  function ViewHistoryWidget(_ref) {
43
52
  var _currentDocument$docD, _currentDocument$docD2;
@@ -86,6 +95,7 @@ function ViewHistoryWidget(_ref) {
86
95
  columns: columns,
87
96
  dataSource: currentDocument !== null && currentDocument !== void 0 && (_currentDocument$docD = currentDocument.docDetails) !== null && _currentDocument$docD !== void 0 && (_currentDocument$docD = _currentDocument$docD.uploadedDocuments) !== null && _currentDocument$docD !== void 0 && (_currentDocument$docD = _currentDocument$docD[0]) !== null && _currentDocument$docD !== void 0 && _currentDocument$docD.name && currentDocument !== null && currentDocument !== void 0 && (_currentDocument$docD2 = currentDocument.docDetails) !== null && _currentDocument$docD2 !== void 0 && (_currentDocument$docD2 = _currentDocument$docD2.uploadedDocuments) !== null && _currentDocument$docD2 !== void 0 && (_currentDocument$docD2 = _currentDocument$docD2[0]) !== null && _currentDocument$docD2 !== void 0 && _currentDocument$docD2.onDownload ? [currentDocument] : [],
88
97
  rowKey: "key",
98
+ size: "middle",
89
99
  pagination: false
90
100
  })), /*#__PURE__*/_react.default.createElement(_styles.ViewHistoryPara, {
91
101
  className: "type-b1-400"
@@ -93,6 +103,7 @@ function ViewHistoryWidget(_ref) {
93
103
  columns: columns,
94
104
  dataSource: copyOfPreviousDocuments,
95
105
  rowKey: "key",
106
+ size: "middle",
96
107
  pagination: false
97
108
  })));
98
109
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.17.61",
3
+ "version": "0.17.63",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",