oa-componentbook 0.6.0 → 0.8.0
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/build/components/ColorVariables.js +25 -0
- package/build/components/oa-component-button/CustomButton.js +60 -0
- package/build/components/oa-component-button/styles.js +37 -0
- package/build/components/{Wallet Service Details/basicQuestions.js → oa-component-checkbox/CustomCheckBox.js} +28 -22
- package/build/components/oa-component-colorUsage/ColorUsage.js +27 -0
- package/build/components/oa-component-colorUsage/styles.js +13 -0
- package/build/components/oa-component-cornerRadius/CornerRadius.js +25 -0
- package/build/components/oa-component-cornerRadius/styles.js +35 -0
- package/build/components/{Drawer.js → oa-component-drawer/CustomDrawer.js} +31 -30
- package/build/components/oa-component-notification/CustomNotification.js +89 -0
- package/build/components/oa-component-notification/styles.js +13 -0
- package/build/components/oa-component-radio/CustomRadio.jsx.js +46 -0
- package/build/components/oa-component-spacingScales/SpacingScales.js +27 -0
- package/build/components/oa-component-spacingScales/styles.js +49 -0
- package/build/components/{Table.js → oa-component-table/CustomTable.js} +18 -17
- package/build/components/{Button.js → oa-component-tabs/CustomTabs.js} +41 -27
- package/build/components/oa-component-toggle/CustomToggle.js +49 -0
- package/build/components/oa-component-toggle/styles.js +16 -0
- package/build/components/oa-component-typography/Typography.js +34 -0
- package/build/components/oa-component-typography/styles.js +13 -0
- package/build/index.js +52 -55
- package/build/widgets/oa-widget-approval.js +134 -0
- package/build/widgets/oa-widget-keyValueDataView/KeyValueDataView.js +67 -0
- package/build/widgets/oa-widget-keyValueDataView/styles.js +16 -0
- package/build/widgets/oa-widget-stagesTimeline/StageTimeline.js +49 -0
- package/build/widgets/oa-widget-stagesTimeline/styles.js +22 -0
- package/package.json +17 -6
- package/build/components/KeyValueDataView.js +0 -37
- package/build/components/Login.js +0 -80
- package/build/components/QuesAnsView.js +0 -35
- package/build/components/Tabs.js +0 -58
- package/build/components/Wallet Service Details/complaintDetail.js +0 -65
- package/build/components/Wallet Service Details/serviceDetailsTabView.js +0 -169
- package/build/components/Wallet Service Details/styles/styles.css +0 -99
- package/build/components/Wallet Service Details/viewMoreDetailsDrawer.js +0 -83
- package/build/components/Wallet Service Details/walletServiceDetails.js +0 -71
- package/build/components/peclaim-components/CloseClaim.js +0 -212
- package/build/components/peclaim-components/ComplaintsTable.js +0 -78
- package/build/components/peclaim-components/WorkflowSummaryNotesModal.js +0 -50
- package/build/components/peclaim-components/WorkflowSummaryTable.js +0 -75
- package/build/components/peclaim-components/compMain.js +0 -54
- package/build/components/peclaim-components/wf Main.js +0 -192
- package/build/components/style/css/Button.module.css +0 -38
- package/build/components/style/css/login.css +0 -335
- package/build/components/styles.js +0 -155
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _styledComponents = require("styled-components");
|
|
8
|
+
var _templateObject;
|
|
9
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
10
|
+
/*
|
|
11
|
+
? Keep this at the top level of the app using any of these components.
|
|
12
|
+
* Do not add any children to it because this element does NOT render any of its children
|
|
13
|
+
|
|
14
|
+
* Instead, follow a syntax similar to this:
|
|
15
|
+
<>
|
|
16
|
+
<ColorVariables />
|
|
17
|
+
<App />
|
|
18
|
+
</>
|
|
19
|
+
*/
|
|
20
|
+
|
|
21
|
+
// TODO: Figure out a way to make this work with storybook.
|
|
22
|
+
// Can be used to wrap the entire application, to make these styles available to every component
|
|
23
|
+
const ColorVariables = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n:root {\n --color-blue-CTA: #014FC5;\n --color-blue-hover: #82A9E2;\n --color-darkblue-background: #003264;\n --color-lightblue-background: #DEF1FB;\n --color-green-success: #00875A;\n --color-lightgreen-success: #CCE7DE;\n --color-yellow-warning: #FF991F;\n --color-lightyellow-warning: #FFEBD2;\n --color-red-error: #DE350B;\n --color-red-hover: #E87254;\n --color-lightred-error: #F8D7CE;\n --color-primarygrey-text: #212121;\n --color-secondarygrey-text: #717171;\n --color-grey1-placeholder: #959595;\n --color-grey2-disabled: #BFBFBF;\n --color-grey3-disabled_divider: #E0E0E0;\n --color-grey4-background: #F6F6F6;\n --color-white-background: #FFFFFF;\n --color-grey5-overlay: rgba(0, 0, 0, 0.7);\n --color-sunyellow-tags: #F5C82D;\n} \n"])));
|
|
24
|
+
var _default = ColorVariables;
|
|
25
|
+
exports.default = _default;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.weak-map.js");
|
|
4
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
require("core-js/modules/es.regexp.exec.js");
|
|
10
|
+
require("core-js/modules/es.string.replace.js");
|
|
11
|
+
var _react = _interopRequireDefault(require("react"));
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
var _icons = require("@ant-design/icons");
|
|
14
|
+
var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
|
|
15
|
+
var _styles = _interopRequireDefault(require("./styles"));
|
|
16
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
18
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
+
function CustomButton(_ref) {
|
|
20
|
+
let {
|
|
21
|
+
className,
|
|
22
|
+
disabled,
|
|
23
|
+
onClick,
|
|
24
|
+
iconPosition,
|
|
25
|
+
size,
|
|
26
|
+
label,
|
|
27
|
+
type,
|
|
28
|
+
typography
|
|
29
|
+
} = _ref;
|
|
30
|
+
return /*#__PURE__*/_react.default.createElement(_styles.default, {
|
|
31
|
+
className: "\n ".concat(disabled ? "".concat(type.replace('danger-', ''), "-disabled") : type, " \n ").concat(className, "\n "),
|
|
32
|
+
disabled: disabled,
|
|
33
|
+
onClick: disabled ? null : onClick,
|
|
34
|
+
type: "button"
|
|
35
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
36
|
+
className: "text-container"
|
|
37
|
+
}, iconPosition === 'left' && /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null), /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
38
|
+
typography: typography
|
|
39
|
+
}, label), iconPosition === 'right' && /*#__PURE__*/_react.default.createElement(_icons.SearchOutlined, null)));
|
|
40
|
+
}
|
|
41
|
+
CustomButton.propTypes = {
|
|
42
|
+
className: _propTypes.default.string,
|
|
43
|
+
disabled: _propTypes.default.bool,
|
|
44
|
+
onClick: _propTypes.default.func.isRequired,
|
|
45
|
+
size: _propTypes.default.oneOf(['small', 'medium', 'large']),
|
|
46
|
+
iconPosition: _propTypes.default.oneOf(['left', 'right', 'none']),
|
|
47
|
+
label: _propTypes.default.string.isRequired,
|
|
48
|
+
type: _propTypes.default.oneOf(['primary', 'secondary', 'text-only', 'danger-primary', 'danger-secondary', 'danger-text-only']),
|
|
49
|
+
typography: _propTypes.default.oneOf(_Typography.typographyOptions)
|
|
50
|
+
};
|
|
51
|
+
CustomButton.defaultProps = {
|
|
52
|
+
className: '',
|
|
53
|
+
disabled: false,
|
|
54
|
+
size: 'medium',
|
|
55
|
+
iconPosition: 'none',
|
|
56
|
+
type: 'primary',
|
|
57
|
+
typography: 'type-button-500'
|
|
58
|
+
};
|
|
59
|
+
var _default = CustomButton;
|
|
60
|
+
exports.default = _default;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.weak-map.js");
|
|
4
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
10
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
11
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
12
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
13
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
14
|
+
const getSizeStyles = size => {
|
|
15
|
+
switch (size) {
|
|
16
|
+
case 'small':
|
|
17
|
+
{
|
|
18
|
+
return (0, _styledComponents.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n min-width: 80px;\n padding: 10px 16px;\n "])));
|
|
19
|
+
}
|
|
20
|
+
case 'medium':
|
|
21
|
+
{
|
|
22
|
+
return (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n min-width: 100px;\n padding: 10px 16px; \n "])));
|
|
23
|
+
}
|
|
24
|
+
case 'large':
|
|
25
|
+
{
|
|
26
|
+
return (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n min-width: 136px;\n padding: 10px 24px;\n "])));
|
|
27
|
+
}
|
|
28
|
+
default:
|
|
29
|
+
{
|
|
30
|
+
return (0, _styledComponents.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n min-width: 100px;\n padding: 10px 16px; \n "])));
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
const StyledButton = _styledComponents.default.button(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-radius: 4px;\n cursor: pointer;\n\n .text-container {\n display: flex;\n align-items: center;\n justify-content: center;\n \n }\n\n .anticon-search {\n margin: 0 8px 0 0;\n }\n"])));
|
|
35
|
+
const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n\n ", "\n\n &.primary {\n background: var(--color-blue-CTA);\n border: 1px solid var(--color-blue-CTA);\n color: var(--color-white-background);\n }\n &.primary:hover {\n background: var(--color-blue-hover);\n }\n\n &.primary-disabled {\n background: var(--color-grey2-disabled);\n cursor: not-allowed;\n color: var(--color-white-background);\n }\n\n &.secondary {\n background: var(--color-white-background);\n border: 1px solid var(--color-blue-CTA);\n color: var(--color-blue-CTA);\n }\n &.secondary:hover {\n border: 1px solid var(--color-blue-hover);\n color: var(--color-blue-hover);\n }\n\n &.secondary-disabled {\n background: var(--color-white-background);\n border: 1px solid var(--color-grey2-disabled);\n color: var(--color-grey2-disabled);\n cursor: not-allowed;\n }\n\n &.text-only {\n border: none;\n background: var(--color-white-background);\n color: var(--color-blue-CTA);\n }\n &.text-only:hover {\n color: var(--color-blue-hover);\n }\n\n &.text-only-disabled {\n border: none;\n background: var(--color-white-background);\n color: var(--color-grey2-disabled);\n cursor: not-allowed;\n }\n \n &.danger-primary {\n background: var(--color-red-error);\n color: var(--color-white-background);\n border: 1px solid var(--color-red-error);\n }\n &.danger-primary:hover {\n background: var(--color-red-hover);\n color: var(--color-white-background);\n border: 1px solid var(--color-red-hover);\n }\n\n &.danger-secondary {\n color: var(--color-red-error);\n border: 1px solid var(--color-red-error);\n background: var(--color-white-background);\n }\n &.danger-secondary:hover {\n color: var(--color-red-hover);\n border: 1px solid var(--color-red-hover);\n background: var(--color-white-background);\n }\n\n &.danger-text-only {\n border: none;\n color: var(--color-red-error);\n background: var(--color-white-background);\n }\n &.danger-text-only:hover {\n border: none;\n color: var(--color-red-hover);\n background: var(--color-white-background);\n }\n"])), props => getSizeStyles(props.size));
|
|
36
|
+
var _default = ColoredStyledButton;
|
|
37
|
+
exports.default = _default;
|
|
@@ -6,30 +6,36 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
|
-
var _react =
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
10
11
|
var _antd = require("antd");
|
|
11
|
-
require("
|
|
12
|
-
var _QuesAnsView = _interopRequireDefault(require("../QuesAnsView"));
|
|
13
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
|
|
14
13
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
14
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
+
function CustomCheckBox(_ref) {
|
|
17
|
+
let {
|
|
18
|
+
disabled,
|
|
19
|
+
onChange,
|
|
20
|
+
label,
|
|
21
|
+
typography
|
|
22
|
+
} = _ref;
|
|
23
|
+
return /*#__PURE__*/_react.default.createElement(_antd.Checkbox, {
|
|
24
|
+
disabled: disabled,
|
|
25
|
+
onChange: disabled ? null : onChange
|
|
26
|
+
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
27
|
+
typography: typography
|
|
28
|
+
}, label));
|
|
29
|
+
}
|
|
30
|
+
CustomCheckBox.propTypes = {
|
|
31
|
+
disabled: _propTypes.default.bool,
|
|
32
|
+
onChange: _propTypes.default.func.isRequired,
|
|
33
|
+
label: _propTypes.default.string.isRequired,
|
|
34
|
+
typography: _propTypes.default.oneOf(_Typography.typographyOptions)
|
|
35
|
+
};
|
|
36
|
+
CustomCheckBox.defaultProps = {
|
|
37
|
+
disabled: false,
|
|
38
|
+
typography: 'type-b2-400'
|
|
33
39
|
};
|
|
34
|
-
var _default =
|
|
40
|
+
var _default = CustomCheckBox;
|
|
35
41
|
exports.default = _default;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.colorOptions = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _styles = _interopRequireDefault(require("./styles"));
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
// Import the styles from the separate file
|
|
12
|
+
|
|
13
|
+
const colorOptions = ['blue-CTA', 'darkblue-background', 'lightblue-background', 'blue-hover', 'green-success', 'lightgreen-success', 'yellow-warning', 'lightyellow-warning', 'red-error', 'red-hover', 'lightred-error', 'primarygrey-text', 'secondarygrey-text', 'grey1-placeholder', 'grey2-disabled', 'grey3-disabled_divider', 'grey4-background', 'white-background', 'grey5-overlay', 'sunyellow-tags'];
|
|
14
|
+
exports.colorOptions = colorOptions;
|
|
15
|
+
function ColorUsage(_ref) {
|
|
16
|
+
let {
|
|
17
|
+
color
|
|
18
|
+
} = _ref;
|
|
19
|
+
return /*#__PURE__*/_react.default.createElement(_styles.default, {
|
|
20
|
+
color: color
|
|
21
|
+
}, "--color-".concat(color));
|
|
22
|
+
}
|
|
23
|
+
ColorUsage.propTypes = {
|
|
24
|
+
color: _propTypes.default.oneOf(colorOptions).isRequired
|
|
25
|
+
};
|
|
26
|
+
var _default = ColorUsage;
|
|
27
|
+
exports.default = _default;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _templateObject;
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
+
const StyledColorUsage = _styledComponents.default.h1(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: var(--color-", ");\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100px;\n width: 450px;\n"])), props => props.color);
|
|
12
|
+
var _default = StyledColorUsage;
|
|
13
|
+
exports.default = _default;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _styles = require("./styles");
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
// Import the styles from the separate file
|
|
12
|
+
|
|
13
|
+
function CornerRadius(_ref) {
|
|
14
|
+
let {
|
|
15
|
+
type
|
|
16
|
+
} = _ref;
|
|
17
|
+
return /*#__PURE__*/_react.default.createElement(_styles.StyledCornerComponent, {
|
|
18
|
+
type: type
|
|
19
|
+
}, type);
|
|
20
|
+
}
|
|
21
|
+
CornerRadius.propTypes = {
|
|
22
|
+
type: _propTypes.default.oneOf(['border-radius-xlarge', 'border-radius-large', 'border-radius-medium', 'border-radius-small', 'border-radius-xsmall', 'border-radius-none', 'border-radius-full']).isRequired
|
|
23
|
+
};
|
|
24
|
+
var _default = CornerRadius;
|
|
25
|
+
exports.default = _default;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getBorderSize = exports.StyledCornerComponent = void 0;
|
|
7
|
+
require("core-js/modules/es.regexp.exec.js");
|
|
8
|
+
require("core-js/modules/es.string.replace.js");
|
|
9
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
10
|
+
var _templateObject; // CornerRadiusStyles.js
|
|
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
|
+
const getBorderSize = type => {
|
|
14
|
+
switch (type.replace('border-radius-', '')) {
|
|
15
|
+
case 'full':
|
|
16
|
+
return 9999;
|
|
17
|
+
case 'xlarge':
|
|
18
|
+
return 16;
|
|
19
|
+
case 'large':
|
|
20
|
+
return 12;
|
|
21
|
+
case 'medium':
|
|
22
|
+
return 8;
|
|
23
|
+
case 'small':
|
|
24
|
+
return 4;
|
|
25
|
+
case 'xsmall':
|
|
26
|
+
return 2;
|
|
27
|
+
case 'none':
|
|
28
|
+
return 0;
|
|
29
|
+
default:
|
|
30
|
+
return 0;
|
|
31
|
+
}
|
|
32
|
+
};
|
|
33
|
+
exports.getBorderSize = getBorderSize;
|
|
34
|
+
const StyledCornerComponent = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 200px;\n width: 200px;\n background-color: blue;\n border-radius: ", "px; // Pass the 'type' prop to getBorderSize\n"])), props => getBorderSize(props.type));
|
|
35
|
+
exports.StyledCornerComponent = StyledCornerComponent;
|
|
@@ -7,47 +7,48 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = void 0;
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
-
var _antd = require("antd");
|
|
11
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
var _antd = require("antd");
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
13
13
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
14
14
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
title,
|
|
18
|
-
placement,
|
|
15
|
+
function CustomDrawer(_ref) {
|
|
16
|
+
let {
|
|
19
17
|
closable,
|
|
20
|
-
visible,
|
|
21
18
|
data,
|
|
19
|
+
height,
|
|
22
20
|
onClose,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
title: title,
|
|
30
|
-
placement: placement,
|
|
21
|
+
open,
|
|
22
|
+
placement,
|
|
23
|
+
title,
|
|
24
|
+
width
|
|
25
|
+
} = _ref;
|
|
26
|
+
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Drawer, {
|
|
31
27
|
closable: closable,
|
|
32
28
|
onClose: onClose,
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
29
|
+
open: open,
|
|
30
|
+
placement: placement,
|
|
31
|
+
title: title,
|
|
32
|
+
height: height,
|
|
33
|
+
width: width
|
|
36
34
|
}, data));
|
|
35
|
+
}
|
|
36
|
+
CustomDrawer.propTypes = {
|
|
37
|
+
closable: _propTypes.default.bool,
|
|
38
|
+
data: _propTypes.default.node.isRequired,
|
|
39
|
+
onClose: _propTypes.default.func,
|
|
40
|
+
open: _propTypes.default.bool,
|
|
41
|
+
placement: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
|
|
42
|
+
title: _propTypes.default.string,
|
|
43
|
+
height: _propTypes.default.number.isRequired,
|
|
44
|
+
width: _propTypes.default.number.isRequired
|
|
37
45
|
};
|
|
38
|
-
|
|
39
|
-
tabPosition: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
|
|
40
|
-
type: _propTypes.default.oneOf(['line', 'card', 'editable-card']),
|
|
41
|
-
defaultActiveKey: _propTypes.default.string,
|
|
42
|
-
width: _propTypes.default.number,
|
|
43
|
-
height: _propTypes.default.number
|
|
44
|
-
};
|
|
45
|
-
DrawerDesign.defaultProps = {
|
|
46
|
-
placement: 'right',
|
|
47
|
-
title: '',
|
|
46
|
+
CustomDrawer.defaultProps = {
|
|
48
47
|
closable: false,
|
|
49
|
-
|
|
50
|
-
|
|
48
|
+
onClose: null,
|
|
49
|
+
open: true,
|
|
50
|
+
placement: 'right',
|
|
51
|
+
title: ''
|
|
51
52
|
};
|
|
52
|
-
var _default =
|
|
53
|
+
var _default = CustomDrawer;
|
|
53
54
|
exports.default = _default;
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.weak-map.js");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.notificationOptions = exports.default = void 0;
|
|
8
|
+
require("core-js/modules/es.symbol.description.js");
|
|
9
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
+
var _antd = require("antd");
|
|
13
|
+
var _icons = require("@ant-design/icons");
|
|
14
|
+
var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
|
|
15
|
+
var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
|
|
16
|
+
var _styles = _interopRequireDefault(require("./styles"));
|
|
17
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
18
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
19
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
20
|
+
// Import the styles from the separate file
|
|
21
|
+
|
|
22
|
+
const notificationOptions = ['green-success', 'red-error'];
|
|
23
|
+
exports.notificationOptions = notificationOptions;
|
|
24
|
+
function Notification(_ref) {
|
|
25
|
+
let {
|
|
26
|
+
description,
|
|
27
|
+
onChange,
|
|
28
|
+
placement,
|
|
29
|
+
title,
|
|
30
|
+
type,
|
|
31
|
+
typographies
|
|
32
|
+
} = _ref;
|
|
33
|
+
const [api, contextHolder] = _antd.notification.useNotification();
|
|
34
|
+
const openNotification = () => {
|
|
35
|
+
const titleColor = type === 'success' ? 'green-success' : 'red-error';
|
|
36
|
+
const descriptionColor = type === 'success' ? 'type-b3-400' : 'primarygrey-text';
|
|
37
|
+
const borderColor = type === 'success' ? 'var(--color-green-success)' : 'var(--color-red-error)';
|
|
38
|
+
const customNotification = /*#__PURE__*/_react.default.createElement(_styles.default, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
39
|
+
typography: typographies.title,
|
|
40
|
+
color: titleColor
|
|
41
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, title)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
42
|
+
color: descriptionColor,
|
|
43
|
+
typography: typographies.description
|
|
44
|
+
}, description)), /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, {
|
|
45
|
+
onClick: api.destroy('string')
|
|
46
|
+
}));
|
|
47
|
+
api.open({
|
|
48
|
+
message: customNotification,
|
|
49
|
+
closeIcon: false,
|
|
50
|
+
duration: 2000,
|
|
51
|
+
style: {
|
|
52
|
+
padding: '8px 16px 8px 16px',
|
|
53
|
+
borderRadius: '4px',
|
|
54
|
+
borderLeft: "4px solid ".concat(borderColor),
|
|
55
|
+
boxShadow: '0px 2px 8px 0px rgba(0, 0, 0, 0.12)'
|
|
56
|
+
},
|
|
57
|
+
placement
|
|
58
|
+
});
|
|
59
|
+
};
|
|
60
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, contextHolder, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
61
|
+
typography: typographies.button,
|
|
62
|
+
label: "Trigger Notification",
|
|
63
|
+
onClick: openNotification,
|
|
64
|
+
size: "small",
|
|
65
|
+
type: "primary"
|
|
66
|
+
}));
|
|
67
|
+
}
|
|
68
|
+
Notification.propTypes = {
|
|
69
|
+
description: _propTypes.default.string.isRequired,
|
|
70
|
+
onChange: _propTypes.default.func.isRequired,
|
|
71
|
+
placement: _propTypes.default.oneOf(['topLeft', 'topRight', 'bottomLeft', 'bottomRight']),
|
|
72
|
+
title: _propTypes.default.string.isRequired,
|
|
73
|
+
type: _propTypes.default.oneOf(['success', 'failure']).isRequired,
|
|
74
|
+
typographies: _propTypes.default.shape({
|
|
75
|
+
button: _propTypes.default.oneOf(_Typography.typographyOptions),
|
|
76
|
+
description: _propTypes.default.oneOf(_Typography.typographyOptions),
|
|
77
|
+
title: _propTypes.default.oneOf(_Typography.typographyOptions)
|
|
78
|
+
})
|
|
79
|
+
};
|
|
80
|
+
Notification.defaultProps = {
|
|
81
|
+
placement: 'topRight',
|
|
82
|
+
typographies: {
|
|
83
|
+
button: 'type-button-500',
|
|
84
|
+
description: 'type-b3-400',
|
|
85
|
+
title: 'type-b2-400'
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
var _default = Notification;
|
|
89
|
+
exports.default = _default;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _templateObject; // NotificationStyles.js
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
+
const StyledNotification = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n .anticon-close {\n cursor: pointer; \n margin: 0 0 0 8px;\n }\n"])));
|
|
12
|
+
var _default = StyledNotification;
|
|
13
|
+
exports.default = _default;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
require("core-js/modules/es.weak-map.js");
|
|
4
|
+
require("core-js/modules/web.dom-collections.iterator.js");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
var _antd = require("antd");
|
|
12
|
+
var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
|
|
13
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
14
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
+
function CustomRadio(_ref) {
|
|
17
|
+
let {
|
|
18
|
+
disabled,
|
|
19
|
+
onChange,
|
|
20
|
+
size,
|
|
21
|
+
label,
|
|
22
|
+
typography
|
|
23
|
+
} = _ref;
|
|
24
|
+
return /*#__PURE__*/_react.default.createElement(_antd.Radio, {
|
|
25
|
+
disabled: disabled,
|
|
26
|
+
onChange: disabled ? null : onChange,
|
|
27
|
+
size: size,
|
|
28
|
+
type: "radio1"
|
|
29
|
+
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
30
|
+
typography: typography
|
|
31
|
+
}, label));
|
|
32
|
+
}
|
|
33
|
+
CustomRadio.propTypes = {
|
|
34
|
+
disabled: _propTypes.default.bool,
|
|
35
|
+
onChange: _propTypes.default.func.isRequired,
|
|
36
|
+
size: _propTypes.default.oneOf(['small', 'middle', 'large']),
|
|
37
|
+
label: _propTypes.default.string.isRequired,
|
|
38
|
+
typography: _propTypes.default.oneOf(_Typography.typographyOptions)
|
|
39
|
+
};
|
|
40
|
+
CustomRadio.defaultProps = {
|
|
41
|
+
disabled: false,
|
|
42
|
+
size: 'middle',
|
|
43
|
+
typography: 'type-b1-400'
|
|
44
|
+
};
|
|
45
|
+
var _default = CustomRadio;
|
|
46
|
+
exports.default = _default;
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
var _styles = _interopRequireDefault(require("./styles"));
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
// SpacingScales.js
|
|
12
|
+
|
|
13
|
+
// Import the styled component
|
|
14
|
+
|
|
15
|
+
function SpacingScales(_ref) {
|
|
16
|
+
let {
|
|
17
|
+
type
|
|
18
|
+
} = _ref;
|
|
19
|
+
return /*#__PURE__*/_react.default.createElement(_styles.default, {
|
|
20
|
+
type: type
|
|
21
|
+
}, ' `', type, "` on all sides");
|
|
22
|
+
}
|
|
23
|
+
SpacingScales.propTypes = {
|
|
24
|
+
type: _propTypes.default.oneOf(['spacing-4', 'spacing-8', 'spacing-12', 'spacing-16', 'spacing-24', 'spacing-32', 'spacing-40', 'spacing-48', 'spacing-56', 'spacing-64', 'spacing-72', 'spacing-80', 'spacing-96', 'spacing-108']).isRequired
|
|
25
|
+
};
|
|
26
|
+
var _default = SpacingScales;
|
|
27
|
+
exports.default = _default;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
+
var _templateObject; // SpacingScalesStyles.js
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
+
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
|
+
const SpacingScalesContainer = _styledComponents.default.h1(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: center;\n align-items: center;\n background-color: red;\n ", ""])), _ref => {
|
|
12
|
+
let {
|
|
13
|
+
type
|
|
14
|
+
} = _ref;
|
|
15
|
+
switch (type) {
|
|
16
|
+
case 'spacing-4':
|
|
17
|
+
return 'padding: 4px; margin: 0;';
|
|
18
|
+
case 'spacing-8':
|
|
19
|
+
return 'padding: 8px; margin: 0;';
|
|
20
|
+
case 'spacing-12':
|
|
21
|
+
return 'padding: 12px; margin: 0;';
|
|
22
|
+
case 'spacing-16':
|
|
23
|
+
return 'padding: 16px; margin: 0;';
|
|
24
|
+
case 'spacing-24':
|
|
25
|
+
return 'padding: 24px; margin: 0;';
|
|
26
|
+
case 'spacing-32':
|
|
27
|
+
return 'padding: 32px; margin: 0;';
|
|
28
|
+
case 'spacing-40':
|
|
29
|
+
return 'padding: 40px; margin: 0;';
|
|
30
|
+
case 'spacing-48':
|
|
31
|
+
return 'padding: 48px; margin: 0;';
|
|
32
|
+
case 'spacing-56':
|
|
33
|
+
return 'padding: 56px; margin: 0;';
|
|
34
|
+
case 'spacing-64':
|
|
35
|
+
return 'padding: 64px; margin: 0;';
|
|
36
|
+
case 'spacing-72':
|
|
37
|
+
return 'padding: 72px; margin: 0;';
|
|
38
|
+
case 'spacing-80':
|
|
39
|
+
return 'padding: 80px; margin: 0;';
|
|
40
|
+
case 'spacing-96':
|
|
41
|
+
return 'padding: 96px; margin: 0;';
|
|
42
|
+
case 'spacing-108':
|
|
43
|
+
return 'padding: 108px; margin: 0;';
|
|
44
|
+
default:
|
|
45
|
+
return 'padding: 0; margin: 0;';
|
|
46
|
+
}
|
|
47
|
+
});
|
|
48
|
+
var _default = SpacingScalesContainer;
|
|
49
|
+
exports.default = _default;
|