oa-componentbook 0.18.149 → 0.18.150
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/oa-component-accordion/styles.js +1 -1
- package/build/components/oa-component-datepicker/CustomDatePicker.js +1 -1
- package/build/components/oa-component-drawer/styles.js +2 -2
- package/build/components/oa-component-timepicker/CustomTimePicker.js +1 -1
- package/build/global-css/GridLayout.js +1 -1
- package/build/widgets/oa-widget-membershipcard/MembershipCard.js +5 -5
- package/package.json +1 -1
|
@@ -10,4 +10,4 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
10
10
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
11
11
|
var _default = exports.default = {};
|
|
12
12
|
const SmallText = exports.SmallText = _styledComponents.default.small(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n font-size: 18px;\n color: #E21616;\n margin: 0 0 0 4px;\n"])));
|
|
13
|
-
const CollapseStyle = exports.CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-collapse .ant-collapse-item-disabled{\n background: var(--color-disabled-button);\n}\n /* .ant-collapse-item-active .ant-collapse-expand-icon{\n transform: rotate(180deg);\n } */\n /* .ant-collapse-expand-icon{\n padding-inline-start: 0 !important;\n } */\n .ant-collapse-header-text{\n color: var(--color-primary-content);\n }\n /* .ant-collapse-arrow{\n color: var(--color-secondary-content) !important;\n } */\n .ant-collapse>.ant-collapse-item:last-child,.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header,.ant-collapse .ant-collapse-item:last-child >.ant-collapse-content {\n border-radius: 0 0 4px 4px;\n }\n .ant-collapse>.ant-collapse-item {\n border: none;\n }\n .ant-collapse{\n border: 1px solid var(--color-divider);\n border-radius: 4px;\n }\n \n .ant-collapse>.ant-collapse-item >.ant-collapse-header{\n padding: 12px 24px;\n }\n"])));
|
|
13
|
+
const CollapseStyle = exports.CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-collapse .ant-collapse-item-disabled{\n background: var(--color-disabled-button);\n}\n /* .ant-collapse-item-active .ant-collapse-expand-icon{\n transform: rotate(180deg);\n } */\n /* .ant-collapse-expand-icon{\n padding-inline-start: 0 !important;\n } */\n .ant-collapse-header-text{\n color: var(--color-primary-content);\n }\n /* .ant-collapse-arrow{\n color: var(--color-secondary-content) !important;\n } */\n .ant-collapse>.ant-collapse-item:last-child,.ant-collapse>.ant-collapse-item:last-child>.ant-collapse-header,.ant-collapse .ant-collapse-item:last-child >.ant-collapse-content {\n border-radius: 0 0 4px 4px;\n }\n .ant-collapse>.ant-collapse-item {\n border: none;\n }\n .ant-collapse{\n border: 1px solid var(--color-divider);\n border-radius: 4px;\n overflow: hidden;\n }\n \n .ant-collapse>.ant-collapse-item >.ant-collapse-header{\n padding: 12px 24px;\n }\n @media only screen and (max-width: 600px) {\n .ant-collapse .ant-collapse-content>.ant-collapse-content-box {\n padding: 16px;\n }\n .ant-collapse>.ant-collapse-item>.ant-collapse-header {\n padding: 12px 16px;\n }\n }\n"])));
|
|
@@ -92,7 +92,7 @@ function CustomDatePicker(_ref) {
|
|
|
92
92
|
}
|
|
93
93
|
}
|
|
94
94
|
}, /*#__PURE__*/_react.default.createElement(FullWidthDatePicker, _extends({
|
|
95
|
-
allowClear:
|
|
95
|
+
allowClear: true // Discussed with UX team
|
|
96
96
|
,
|
|
97
97
|
suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
98
98
|
icon: _CalendarTodayRounded.default,
|
|
@@ -10,7 +10,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
|
|
|
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 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
|
|
13
|
+
const ParentStyleDrawer = exports.ParentStyleDrawer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n.ant-drawer-body{\n background: red;\n}\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 \n"])));
|
|
15
15
|
const BaseDrawerTitle = exports.BaseDrawerTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n"])));
|
|
16
16
|
const LayeredDrawerTitle = exports.LayeredDrawerTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n display: flex;\n gap: 12px;\n\n align-items: center;\n"])));
|
|
@@ -73,7 +73,7 @@ function CustomTimePicker(_ref) {
|
|
|
73
73
|
}
|
|
74
74
|
}
|
|
75
75
|
}, /*#__PURE__*/_react.default.createElement(FullWidthTimePicker, _extends({
|
|
76
|
-
allowClear:
|
|
76
|
+
allowClear: true // Discussed with UX team
|
|
77
77
|
,
|
|
78
78
|
format: "HH:mm",
|
|
79
79
|
suffixIcon: /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
@@ -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.ant-modal .ant-modal-content {\n padding: 24px 24px 32px;\n border-radius: 12px;\n }\n @media (max-width: 372px) {\n .ant-picker-date-panel .ant-picker-body{\n padding: 8px !important;\n }\n }\n@media (max-width: 600px) {\n .ant-picker-dropdown .ant-picker-date-panel{\n width: 100%;\n }\n .ant-picker-dropdown .ant-picker-time-panel-column {\n overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n width: 2px;\n }\n\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: -8px;\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: calc(90vh - 126px);\n overflow: auto;\n padding-right: 24px;\n }\n .ant-modal .ant-modal-content{\n padding-right: 0;\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\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.ant-modal .ant-modal-content {\n padding: 24px 24px 32px;\n border-radius: 12px;\n }\n @media (max-width: 372px) {\n .ant-picker-date-panel .ant-picker-body{\n padding: 8px !important;\n }\n }\n@media (max-width: 600px) {\n .ant-drawer .ant-drawer-header,.ant-drawer .ant-drawer-body{\n padding: 16px !important;\n }\n .ant-drawer .ant-drawer-footer {\n padding: 12px 16px;\n }\n .ant-picker-dropdown .ant-picker-date-panel{\n width: 100%;\n }\n .ant-picker-dropdown .ant-picker-time-panel-column {\n overflow-y: auto;\n}\n.ant-picker-dropdown .ant-picker-time-panel-column::-webkit-scrollbar {\n width: 2px;\n }\n\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: -8px;\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: calc(90vh - 126px);\n overflow: auto;\n padding-right: 24px;\n }\n .ant-modal .ant-modal-content{\n padding-right: 0;\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.ant-picker .ant-picker-clear{\n font-size: 20px;\n}\n"])));
|
|
25
25
|
var _default = exports.default = GridLayout;
|
|
@@ -112,7 +112,10 @@ function MembershipCard(_ref) {
|
|
|
112
112
|
}, /*#__PURE__*/_react.default.createElement("label", null, ' ', /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
113
113
|
color: primaryInfo.type === 'success' ? 'positive' : 'negative',
|
|
114
114
|
className: "type-t2-700"
|
|
115
|
-
}, primaryInfo.label)))
|
|
115
|
+
}, primaryInfo.label))), tag && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_CustomTag.default, {
|
|
116
|
+
label: tag.text,
|
|
117
|
+
type: tag.type
|
|
118
|
+
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
116
119
|
className: "imgBg"
|
|
117
120
|
}, /*#__PURE__*/_react.default.createElement(_CustomIcon.default, {
|
|
118
121
|
alt: "phone img",
|
|
@@ -123,10 +126,7 @@ function MembershipCard(_ref) {
|
|
|
123
126
|
}, itemsToShow.join(', '), remainingItems.length > 0 && /*#__PURE__*/_react.default.createElement("span", {
|
|
124
127
|
role: "button",
|
|
125
128
|
tabIndex: 0
|
|
126
|
-
}, "...+".concat(remainingItems.length, " more")))),
|
|
127
|
-
label: tag.text,
|
|
128
|
-
type: tag.type
|
|
129
|
-
})), primaryPanel && /*#__PURE__*/_react.default.createElement("div", {
|
|
129
|
+
}, "...+".concat(remainingItems.length, " more")))), primaryPanel && /*#__PURE__*/_react.default.createElement("div", {
|
|
130
130
|
onClick: primaryPanel.name,
|
|
131
131
|
onKeyDown: e => {
|
|
132
132
|
if (e.key === 'Enter') primaryPanel.name();
|