oa-componentbook 0.18.46 → 0.18.47

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 (10) hide show
  1. package/build/components/oa-component-datepicker/CustomDatePicker.js +2 -2
  2. package/build/components/oa-component-drawer/CustomDrawer.js +3 -3
  3. package/build/components/oa-component-drawer/styles.js +6 -5
  4. package/build/components/oa-component-dropdown/CustomDropdown.js +6 -7
  5. package/build/components/oa-component-modal/CustomModal.js +1 -1
  6. package/build/components/oa-component-modal/styles.js +1 -1
  7. package/build/components/oa-component-notification/CustomNotification.js +1 -1
  8. package/build/components/oa-component-timepicker/CustomTimePicker.js +1 -0
  9. package/build/global-css/GridLayout.js +1 -1
  10. package/package.json +1 -1
package/build/components/oa-component-datepicker/CustomDatePicker.js CHANGED
@@ -58,9 +58,9 @@ function CustomDatePicker(_ref) {
58
58
  // Used to control margin of calendar icon
59
59
  // controlPaddingHorizontal: 161,
60
60
  // controlPaddingHorizontalSM: 12,
61
- controlHeight: 48,
61
+ controlHeight: 32,
62
62
  // height of text field (tag height is half of this, i.e. 24px)
63
- controlHeightSM: 32,
63
+ controlHeightSM: 24,
64
64
  // height of small text field
65
65
  // controlHeightLG: 64,
66
66
  borderRadius: 4,
package/build/components/oa-component-drawer/CustomDrawer.js CHANGED
@@ -65,7 +65,7 @@ function CustomDrawer(_ref) {
65
65
  }
66
66
  }
67
67
  }
68
- }, /*#__PURE__*/_react.default.createElement(_styles.CustomStyledDrawer, _extends({
68
+ }, /*#__PURE__*/_react.default.createElement(_styles.ParentStyleDrawer, null, /*#__PURE__*/_react.default.createElement(_styles.CustomStyledDrawer, _extends({
69
69
  classNames: {
70
70
  footer: 'elevation-above-white-1'
71
71
  },
@@ -104,7 +104,7 @@ function CustomDrawer(_ref) {
104
104
  type: button.type,
105
105
  "data-test": button['data-test']
106
106
  }))) : antDesignProps.footer
107
- }, antDesignProps), children));
107
+ }, antDesignProps), children)));
108
108
  }
109
109
  CustomDrawer.propTypes = {
110
110
  // Array of button configurations
@@ -136,7 +136,7 @@ CustomDrawer.defaultProps = {
136
136
  'data-test': null,
137
137
  isBaseDrawer: true,
138
138
  onClose: () => {},
139
- open: false,
139
+ open: true,
140
140
  placement: 'right',
141
141
  title: null,
142
142
  height: 'auto',
package/build/components/oa-component-drawer/styles.js CHANGED
@@ -3,13 +3,14 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.LayeredDrawerTitle = exports.DrawerFooter = exports.CustomStyledDrawer = exports.BaseDrawerTitle = void 0;
6
+ exports.ParentStyleDrawer = exports.LayeredDrawerTitle = exports.DrawerFooter = exports.CustomStyledDrawer = exports.BaseDrawerTitle = void 0;
7
7
  var _antd = require("antd");
8
8
  var _styledComponents = _interopRequireDefault(require("styled-components"));
9
- var _templateObject, _templateObject2, _templateObject3, _templateObject4;
9
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
10
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
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
  const DrawerFooter = exports.DrawerFooter = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n justify-content: flex-end;\n gap: 12px;\n"])));
13
- const CustomStyledDrawer = exports.CustomStyledDrawer = (0, _styledComponents.default)(_antd.Drawer)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n .ant-drawer-header {\n background: var(--color-secondary-background);\n }\n .ant-drawer-footer{\n background: var(--color-secondary-background);\n }\n"])));
14
- const BaseDrawerTitle = exports.BaseDrawerTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n"])));
15
- const LayeredDrawerTitle = exports.LayeredDrawerTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n gap: 12px;\n\n align-items: center;\n"])));
13
+ const ParentStyleDrawer = exports.ParentStyleDrawer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-drawer-body{\n background: red;\n}\n"])));
14
+ const CustomStyledDrawer = exports.CustomStyledDrawer = (0, _styledComponents.default)(_antd.Drawer)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n .ant-drawer-header {\n background: var(--color-secondary-background);\n }\n .ant-drawer-footer{\n background: var(--color-secondary-background);\n }\n @media (max-width: 768px) {\n \n }\n"])));
15
+ const BaseDrawerTitle = exports.BaseDrawerTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n"])));
16
+ const LayeredDrawerTitle = exports.LayeredDrawerTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n gap: 12px;\n\n align-items: center;\n"])));
package/build/components/oa-component-dropdown/CustomDropdown.js CHANGED
@@ -9,19 +9,20 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
9
9
  var _icons = require("@ant-design/icons");
10
10
  var _antd = require("antd");
11
11
  var _KeyboardArrowDownOutlined = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowDownOutlined"));
12
+ var _reactRouterDom = require("react-router-dom");
12
13
  var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
13
14
  var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
14
15
  var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
15
16
  var _styles = _interopRequireDefault(require("./styles"));
16
17
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
18
  const items = [{
18
- label: /*#__PURE__*/_react.default.createElement("button", {
19
- type: "button"
19
+ label: /*#__PURE__*/_react.default.createElement("a", {
20
+ href: "https://ant.design/components/dropdown"
20
21
  }, "1st menu item"),
21
22
  key: '0'
22
23
  }, {
23
- label: /*#__PURE__*/_react.default.createElement("button", {
24
- type: "button"
24
+ label: /*#__PURE__*/_react.default.createElement("a", {
25
+ href: "https://ant.design/components/dropdown"
25
26
  }, "2nd menu item"),
26
27
  key: '1'
27
28
  }, {
@@ -56,9 +57,7 @@ function CustomDropdown(_ref) {
56
57
  },
57
58
  trigger: ['click'],
58
59
  placement: "bottomRight"
59
- }, /*#__PURE__*/_react.default.createElement("button", {
60
- type: "button"
61
- }, /*#__PURE__*/_react.default.createElement(_antd.Space, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
60
+ }, /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement(_antd.Space, null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
62
61
  color: "primary-content",
63
62
  typography: "type-t2-700"
64
63
  }, displayText), /*#__PURE__*/_react.default.createElement(_Typography.default, {
package/build/components/oa-component-modal/CustomModal.js CHANGED
@@ -60,7 +60,7 @@ function CustomModal(_ref) {
60
60
  title: (title || imgSrc) && /*#__PURE__*/_react.default.createElement(_styles.TitleContainer, null, imgSrc && /*#__PURE__*/_react.default.createElement("img", {
61
61
  src: imgSrc,
62
62
  alt: ""
63
- }), /*#__PURE__*/_react.default.isValidElement(title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
63
+ }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
64
64
  typography: typographies.title
65
65
  }, title)),
66
66
  width: width
package/build/components/oa-component-modal/styles.js CHANGED
@@ -8,6 +8,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
8
8
  var _templateObject, _templateObject2, _templateObject3;
9
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
10
10
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
11
- const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n gap: 16px;\n justify-content: flex-end;\n margin: 24px 0 0;\n"])));
11
+ const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n gap: 16px;\n justify-content: flex-end;\n margin: 24px 0 0;\n @media (max-width: 768px) {\n justify-content: space-between;\n button{\n width: 100%;\n }\n }\n"])));
12
12
  const DescriptionContainer = exports.DescriptionContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n padding: 12px 0 0;\n"])));
13
13
  const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n gap: 16px;\n flex-direction: column;\n margin: 0 0 16px;\n\n img {\n height: 36px;\n width: 36px;\n }\n"])));
package/build/components/oa-component-notification/CustomNotification.js CHANGED
@@ -48,7 +48,7 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
48
48
  otherConfig = _objectWithoutProperties(_ref2, _excluded);
49
49
  // type can be success or failure
50
50
  const titleColor = type === 'success' ? 'positive' : 'negative';
51
- const descriptionColor = type === 'success' ? 'primary-content' : 'primary-content';
51
+ const descriptionColor = type === 'success' ? 'secondary-content' : 'secondary-content';
52
52
  const borderColor = type === 'success' ? 'var(--color-positive)' : 'var(--color-negative)';
53
53
  const customNotification = /*#__PURE__*/_react.default.createElement(_styles.StyledNotification, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
54
54
  color: titleColor,
package/build/components/oa-component-timepicker/CustomTimePicker.js CHANGED
@@ -75,6 +75,7 @@ function CustomTimePicker(_ref) {
75
75
  }, /*#__PURE__*/_react.default.createElement(FullWidthTimePicker, _extends({
76
76
  allowClear: false // Discussed with UX team
77
77
  ,
78
+ format: "HH:mm",
78
79
  suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
79
80
  icon: _AccessTimeRounded.default,
80
81
  size: 20
package/build/global-css/GridLayout.js CHANGED
@@ -21,5 +21,5 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
21
21
  // TODO: Figure out a way to make this work with storybook.
22
22
  // Can be used to wrap the entire application, to make these styles available to every component
23
23
 
24
- const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n max-width: 1154px;\n margin: 0 auto;\n padding: 0 16px;\n}\n\n.container-fluid {\n width: 100%;\n padding: 0 16px;\n}\n\n.row {\n display: flex;\n flex-direction: column;\n}\n\n.gutter {\n padding: 0 24px 0 0;\n}\n\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n }\n\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n\n .col-sm-7 {\n width: 58.33333%;\n }\n\n .col-sm-8 {\n width: 66.66667%;\n }\n\n .col-sm-9 {\n width: 75%;\n }\n\n .col-sm-10 {\n width: 83.33333%;\n }\n\n .col-sm-11 {\n width: 91.66667%;\n }\n\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n\n .col-md-2 {\n width: 16.66667%;\n }\n\n .col-md-3 {\n width: 25%;\n }\n\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter {\n padding: 0 24px 0 0;\n }\n\n .col-lg-1 {\n width: 8.33333%;\n }\n\n .col-lg-2 {\n width: 16.66667%;\n }\n\n .col-lg-3 {\n width: 25%;\n }\n\n .col-lg-4 {\n width: 33.33333%;\n }\n\n .col-lg-5 {\n width: 41.66667%;\n }\n\n .col-lg-6 {\n width: 50%;\n }\n\n .col-lg-7 {\n width: 58.33333%;\n }\n\n .col-lg-8 {\n width: 66.66667%;\n }\n\n .col-lg-9 {\n width: 75%;\n }\n\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 1200px) {\n .gutter {\n padding: 0 32px 0 0;\n }\n\n .col-xl-1 {\n width: 8.33333%;\n }\n \n .col-xl-2 {\n width: 16.66667%;\n }\n\n .col-xl-3 {\n width: 25%;\n }\n\n .col-xl-4 {\n width: 33.33333%;\n }\n\n .col-xl-5 {\n width: 41.66667%;\n }\n\n .col-xl-6 {\n width: 50%;\n }\n\n .col-xl-7 {\n width: 58.33333%;\n }\n\n .col-xl-8 {\n width: 66.66667%;\n }\n\n .col-xl-9 {\n width: 75%;\n }\n\n .col-xl-10 {\n width: 83.33333%;\n }\n\n .col-xl-11 {\n width: 91.66667%;\n }\n\n .col-xl-12 {\n width: 100%;\n }\n \n}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n padding: 12px 24px;\n}\n.ant-dropdown-menu{\n min-width: 256px;\n top: 4px;\n}\n.ant-space-item span{\n line-height: 0 !important;\n display: flex;\n}\n"])));
24
+ const GridLayout = (0, _styledComponents.createGlobalStyle)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n.container {\n max-width: 1154px;\n margin: 0 auto;\n padding: 0 16px;\n}\n\n.container-fluid {\n width: 100%;\n padding: 0 16px;\n}\n\n.row {\n display: flex;\n flex-direction: column;\n}\n\n.gutter {\n padding: 0 24px 0 0;\n}\n\n.row::after {\n content: \"\";\n clear: both;\n display: table;\n}\n\n.col-xs-1 {\n width: 8.33333%;\n}\n\n.col-xs-2 {\n width: 16.66667%;\n}\n\n.col-xs-3 {\n width: 25%;\n}\n\n.col-xs-4 {\n width: 33.33333%;\n}\n\n.col-xs-5 {\n width: 41.66667%;\n}\n\n.col-xs-6 {\n width: 50%;\n}\n\n.col-xs-7 {\n width: 58.33333%;\n}\n\n.col-xs-8 {\n width: 66.66667%;\n}\n\n.col-xs-9 {\n width: 75%;\n}\n\n.col-xs-10 {\n width: 83.33333%;\n}\n\n.col-xs-11 {\n width: 91.66667%;\n}\n\n.col-xs-12 {\n width: 100%;\n}\n\n@media (min-width: 768px) {\n .row {\n flex-direction: row;\n }\n\n .col-sm-1 {\n width: 8.33333%;\n }\n\n .col-sm-2 {\n width: 16.66667%;\n }\n\n .col-sm-3 {\n width: 25%;\n }\n\n .col-sm-4 {\n width: 33.33333%;\n }\n\n .col-sm-5 {\n width: 41.66667%;\n }\n\n .col-sm-6 {\n width: 50%;\n }\n\n .col-sm-7 {\n width: 58.33333%;\n }\n\n .col-sm-8 {\n width: 66.66667%;\n }\n\n .col-sm-9 {\n width: 75%;\n }\n\n .col-sm-10 {\n width: 83.33333%;\n }\n\n .col-sm-11 {\n width: 91.66667%;\n }\n\n .col-sm-12 {\n width: 100%;\n }\n}\n\n@media (min-width: 768px) {\n .col-md-1 {\n width: 8.33333%;\n }\n\n .col-md-2 {\n width: 16.66667%;\n }\n\n .col-md-3 {\n width: 25%;\n }\n\n .col-md-4 {\n width: 33.33333%;\n float: left;\n }\n\n .col-md-5 {\n width: 41.66667%;\n }\n\n .col-md-6 {\n width: 50%;\n }\n\n .col-md-7 {\n width: 58.33333%;\n }\n\n .col-md-8 {\n width: 66.66667%;\n }\n\n .col-md-9 {\n width: 75%;\n }\n\n .col-md-10 {\n width: 83.33333%;\n }\n\n .col-md-11 {\n width: 91.66667%;\n }\n\n .col-md-12 {\n width: 100%;\n }\n}\n\n/* Large Devices (desktops) */\n@media (min-width: 992px) {\n .gutter {\n padding: 0 24px 0 0;\n }\n\n .col-lg-1 {\n width: 8.33333%;\n }\n\n .col-lg-2 {\n width: 16.66667%;\n }\n\n .col-lg-3 {\n width: 25%;\n }\n\n .col-lg-4 {\n width: 33.33333%;\n }\n\n .col-lg-5 {\n width: 41.66667%;\n }\n\n .col-lg-6 {\n width: 50%;\n }\n\n .col-lg-7 {\n width: 58.33333%;\n }\n\n .col-lg-8 {\n width: 66.66667%;\n }\n\n .col-lg-9 {\n width: 75%;\n }\n\n .col-lg-10 {\n width: 83.33333%;\n }\n\n .col-lg-11 {\n width: 91.66667%;\n }\n\n .col-lg-12 {\n width: 100%;\n }\n}\n\n@media (max-width: 600px) {\n .ant-modal-root .ant-modal-wrap {\n position: fixed;\n overflow: inherit;\n }\n .ant-modal-root .ant-modal-centered .ant-modal{\n vertical-align: middle;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100% !important;\n max-width: 100%!important;\n // transform-origin: bottom !important;\n //animation-duration: 0s !important;\n animation-name: slideUp;\n animation-duration: 0.2s;\n transition: .3s ease-in-out;\n animation-timing-function: ease-in;\n }\n @keyframes slideUp {\n 0%,\n 50% {\n transform: translateY(100%);\n opacity: 0;\n }\n \n 60%,\n 100% {\n transform: translateY(0);\n opacity: 1;\n \n }\n }\n .ant-modal .ant-modal-content {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n }\n .ant-modal .ant-modal-body{\n max-height: 300px;\n overflow: auto;\n }\n}\n@media (min-width: 1200px) {\n .gutter {\n padding: 0 32px 0 0;\n }\n\n .col-xl-1 {\n width: 8.33333%;\n }\n \n .col-xl-2 {\n width: 16.66667%;\n }\n\n .col-xl-3 {\n width: 25%;\n }\n\n .col-xl-4 {\n width: 33.33333%;\n }\n\n .col-xl-5 {\n width: 41.66667%;\n }\n\n .col-xl-6 {\n width: 50%;\n }\n\n .col-xl-7 {\n width: 58.33333%;\n }\n\n .col-xl-8 {\n width: 66.66667%;\n }\n\n .col-xl-9 {\n width: 75%;\n }\n\n .col-xl-10 {\n width: 83.33333%;\n }\n\n .col-xl-11 {\n width: 91.66667%;\n }\n\n .col-xl-12 {\n width: 100%;\n }\n \n}\n.ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item{\n padding: 12px 24px;\n}\n.ant-dropdown-menu{\n min-width: 256px;\n top: 4px;\n}\n.ant-space-item span{\n line-height: 0 !important;\n display: flex;\n}\n"])));
25
25
  var _default = exports.default = GridLayout;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oa-componentbook",
3
- "version": "0.18.46",
3
+ "version": "0.18.47",
4
4
  "private": false,
5
5
  "description": "Reusable components",
6
6
  "main": "build/index.js",