oa-componentbook 0.18.273 → 0.18.274
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.
|
@@ -48,7 +48,7 @@ function CustomModal(_ref) {
|
|
|
48
48
|
colorBgMask: 'rgba(0, 0, 0, 0.7)'
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
|
-
}, /*#__PURE__*/_react.default.createElement(_antd.Modal, _extends({
|
|
51
|
+
}, open && /*#__PURE__*/_react.default.createElement(_antd.Modal, _extends({
|
|
52
52
|
closeIcon: /*#__PURE__*/_react.default.createElement(_icons.CloseCircleFilled, {
|
|
53
53
|
style: {
|
|
54
54
|
fontSize: '26px'
|
|
@@ -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 .ant-select-dropdown .ant-select-item{\n min-height: auto !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-message{\n margin-bottom: 0 !important;\n }\n .ant-notification .ant-notification-notice-wrapper{\n background: transparent;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-close{\n position: inherit !important;\n width: 24px !important;\n height: 24px !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-closable .ant-notification-notice-message {\n padding-inline-end: 0px !important;\n}\n .ant-notification-notice-close > button{\n width: 24px !important;\n height: 24px !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice {\n display: flex;\n align-items: center;\n gap: 12px;\n justify-content: space-between;\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: 16px;\n }\n .ant-modal-footer{\n padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n padding: 24px 16px 32px;\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\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n background: var(--color-primary-background) ;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n\n\n .ant-select-dropdown .ant-select-item { \n min-height: auto;\n padding: 12px 16px;\n color: var(--color-primary-content) ;\n line-height: 20px;\n border-radius: 0px;\n}\n\n.label-date-dropdown {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n position: relative;\n width: 100%;\n max-height: 300px;\n overflow-x: auto;\n}\n.overLayImg{\n background: rgb(0 0 0 / 40%);\n border-radius: 12px 12px 0px 0px;\n overflow: hidden;\n}\n.paddingBot .ant-drawer-body{\n padding-bottom: 100px !important;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n width: 100%;\n}\n.ascCollapse .ant-collapse-arrow{\n transform: rotate(90deg);\n color: var(--color-primary) !important;\n font-size: 14px !important;\n}\n.gappingIcons{\n display: flex;\n gap: 16px;\n}\n.imageZoom .ant-modal-body > div{\n height: 350px;\n overflow-y: scroll;\n margin: 20px 0px 0px;\n padding: 12px 8px 0 0;\n \n}\n/* width */\n.imageZoom ::-webkit-scrollbar {\n width: 8px;\n height: 100px;\n border-radius: 8px;\n}\n\n/* Track */\n.imageZoom ::-webkit-scrollbar-track {\n background: #f6f6f6; \n border-radius: 8px;\n}\n \n/* Handle */\n.imageZoom ::-webkit-scrollbar-thumb {\n background: #888; \n border-radius: 8px;\n height: 100px;\n}\n\n/* Handle on hover */\n.imageZoom ::-webkit-scrollbar-thumb:hover {\n background: #555; \n}\n.overflowScroll{\n position: relative;\n}\n.ascCollapse .ant-collapse-header{\n border-radius: 4px !important;\n background: var(--color-secondary-background);\n}\n.ascCollapse,.ant-collapse{\n overflow: hidden;\n}\n.ascCollapse .totalVal{\n display: flex;\n gap: 12px;\n}\n.ascCollapse.ant-collapse-item-active .ant-collapse-arrow{\n transform: rotate(180deg) !important;\n}.mobilesIcons li.ant-dropdown-menu-item > svg {\n display: none\n}\n .ant-notification-notice-close svg{\n font-size: 24px !important;\n height: auto;\n }\n@media only screen and (max-width: 600px) {\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\n .mobilesIcons li.ant-dropdown-menu-item > svg {\n display: block;\n}\n.imageZoom .ant-modal-body>div{\n height: auto;\n overflow-y: auto;\n}\n.imageZoom .ant-modal-footer{\n padding-right: 16px !important;\n}\n .fadeImg{\n max-height: auto;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n width: 24px; font-size: 12px; font-weight: bold; }\n\n .ant-picker-dropdown .ant-picker-content th {\n height: 24px;\n }\n .ant-picker-dropdown .ant-picker-content td {\n font-size: 12px;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n width: 100%;\n }\n\n}\n\n\n.ant-picker .ant-picker-clear{\n font-size: 20px;\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 .ant-select-dropdown .ant-select-item{\n min-height: auto !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-message{\n margin-bottom: 0 !important;\n }\n .ant-notification .ant-notification-notice-wrapper{\n background: transparent;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-close{\n position: inherit !important;\n width: 24px !important;\n height: 24px !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice-closable .ant-notification-notice-message {\n padding-inline-end: 0px !important;\n}\n .ant-notification-notice-close > button{\n width: 24px !important;\n height: 24px !important;\n }\n .ant-notification .ant-notification-notice-wrapper .ant-notification-notice {\n display: flex;\n align-items: center;\n gap: 12px;\n justify-content: space-between;\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: 16px;\n }\n .ant-modal-footer{\n padding-right: 16px !important;\n }\n .ant-modal .ant-modal-content{\n padding: 24px 16px 32px;\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\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\n.ant-select-dropdown{border-radius: 4px; padding:8px 0 !important;\n background: var(--color-primary-background) ;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);}\n\n\n\n .ant-select-dropdown .ant-select-item { \n min-height: auto;\n padding: 12px 16px;\n color: var(--color-primary-content) ;\n line-height: 20px;\n border-radius: 0px;\n}\n\n.label-date-dropdown {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n gap: 16px;\n}\n\n.ant-select-dropdown .ant-select-item-option-active span{ color: var(--color-primary) !important;}\n.ant-picker-range {opacity: 0;}\n.ant-picker-dropdown-range { padding: 0; }\n\n.fadeImg{\n position: relative;\n width: 100%;\n max-height: 300px;\n overflow-x: auto;\n}\n.overLayImg{\n background: rgb(0 0 0 / 40%);\n border-radius: 12px 12px 0px 0px;\n overflow: hidden;\n}\n.paddingBot .ant-drawer-body{\n padding-bottom: 100px !important;\n}\n.react-transform-component,.react-transform-wrapper,.react-transform-component > div{\n width: 100%;\n}\n.ascCollapse .ant-collapse-arrow{\n transform: rotate(90deg);\n color: var(--color-primary) !important;\n font-size: 14px !important;\n}\n.gappingIcons{\n display: flex;\n gap: 16px;\n}\n.imageZoom .ant-modal-body > div{\n height: 350px;\n overflow-y: scroll;\n margin: 20px 0px 0px;\n padding: 12px 8px 0 0;\n \n}\n/* width */\n.imageZoom ::-webkit-scrollbar {\n width: 8px;\n height: 100px;\n border-radius: 8px;\n}\n\n/* Track */\n.imageZoom ::-webkit-scrollbar-track {\n background: #f6f6f6; \n border-radius: 8px;\n}\n \n/* Handle */\n.imageZoom ::-webkit-scrollbar-thumb {\n background: #888; \n border-radius: 8px;\n height: 100px;\n}\n\n/* Handle on hover */\n.imageZoom ::-webkit-scrollbar-thumb:hover {\n background: #555; \n}\n.overflowScroll{\n position: relative;\n}\n.ascCollapse .ant-collapse-header{\n border-radius: 4px !important;\n background: var(--color-secondary-background);\n}\n.ascCollapse,.ant-collapse{\n overflow: hidden;\n}\n.ascCollapse .totalVal{\n display: flex;\n gap: 12px;\n}\n.ascCollapse.ant-collapse-item-active .ant-collapse-arrow{\n transform: rotate(180deg) !important;\n}.mobilesIcons li.ant-dropdown-menu-item > svg {\n display: none\n}\n .ant-notification-notice-close svg{\n font-size: 24px !important;\n height: auto;\n }\n@media only screen and (max-width: 600px) {\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-body {\n padding: 8px;\n }\n .mobilesIcons li.ant-dropdown-menu-item > svg {\n display: block;\n}\n.imageZoom .ant-modal-body>div{\n height: auto;\n overflow-y: auto;\n}\n.imageZoom .ant-modal-footer{\n padding-right: 16px !important;\n}\n .fadeImg{\n max-height: auto;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content th {\n width: 24px; font-size: 12px; font-weight: bold; }\n\n .ant-picker-dropdown .ant-picker-content th {\n height: 24px;\n }\n .ant-picker-dropdown .ant-picker-content td {\n font-size: 12px;\n }\n .ant-picker-dropdown .ant-picker-date-panel .ant-picker-content {\n width: 100%;\n }\n\n}\n\n\n.ant-picker .ant-picker-clear{\n font-size: 20px;\n}\n"])));
|
|
25
25
|
var _default = exports.default = GridLayout;
|
|
@@ -10,10 +10,12 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
|
|
12
12
|
var _FlashOn = _interopRequireDefault(require("@material-ui/icons/FlashOn"));
|
|
13
|
+
var _InfoOutlined = _interopRequireDefault(require("@material-ui/icons/InfoOutlined"));
|
|
13
14
|
var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
|
|
14
15
|
var _CustomModal = _interopRequireDefault(require("../../components/oa-component-modal/CustomModal"));
|
|
15
16
|
var _styles = require("./styles");
|
|
16
17
|
var _MaterialIcon = _interopRequireDefault(require("../../components/oa-component-icons/MaterialIcon"));
|
|
18
|
+
var _CustomTooltip = _interopRequireDefault(require("../../components/oa-component-tooltip/CustomTooltip"));
|
|
17
19
|
var _CustomButton = _interopRequireDefault(require("../../components/oa-component-button/CustomButton"));
|
|
18
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -45,49 +47,92 @@ function PlanCard(_ref) {
|
|
|
45
47
|
};
|
|
46
48
|
return /*#__PURE__*/_react.default.createElement(_styles.PlanCardStyle, {
|
|
47
49
|
"data-test": dataTest
|
|
50
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
51
|
+
className: "planCard"
|
|
48
52
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
49
53
|
className: "damage-protection-plan"
|
|
50
54
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
51
55
|
className: "plan-container"
|
|
52
56
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
53
|
-
className: "
|
|
54
|
-
}, (cardData === null || cardData === void 0 ? void 0 : cardData.heading1) && /*#__PURE__*/_react.default.createElement(
|
|
57
|
+
className: "planHeader"
|
|
58
|
+
}, (cardData === null || cardData === void 0 ? void 0 : cardData.heading1) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
59
|
+
className: "type-t1-500",
|
|
60
|
+
color: "primary-content"
|
|
61
|
+
}, cardData === null || cardData === void 0 ? void 0 : cardData.heading1), (cardData === null || cardData === void 0 ? void 0 : cardData.topRightText) && /*#__PURE__*/_react.default.createElement("span", {
|
|
55
62
|
className: "top-right-text"
|
|
56
63
|
}, cardData === null || cardData === void 0 ? void 0 : cardData.topRightText)), /*#__PURE__*/_react.default.createElement("div", {
|
|
57
|
-
className: "
|
|
58
|
-
},
|
|
64
|
+
className: "planContent"
|
|
65
|
+
}, /*#__PURE__*/_react.default.createElement("div", null, cardData.heading2 && /*#__PURE__*/_react.default.createElement("div", {
|
|
66
|
+
className: "padding-top-8"
|
|
67
|
+
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
68
|
+
className: "type-b1-400",
|
|
69
|
+
color: "primary-content"
|
|
70
|
+
}, cardData.heading2)), cardData.heading3 && /*#__PURE__*/_react.default.createElement("div", {
|
|
71
|
+
className: "padding-top-8 flexMin"
|
|
72
|
+
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
73
|
+
className: "type-b2-400",
|
|
74
|
+
color: "secondary-content"
|
|
75
|
+
}, cardData.heading3), /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
|
|
76
|
+
isDisplayed: true,
|
|
77
|
+
title: cardData.heading3
|
|
78
|
+
}, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
79
|
+
icon: _InfoOutlined.default,
|
|
80
|
+
color: "primary",
|
|
81
|
+
size: 20
|
|
82
|
+
})))), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
|
|
59
83
|
className: "price"
|
|
60
|
-
},
|
|
61
|
-
className: "
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
}, cardData.
|
|
84
|
+
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
85
|
+
className: "type-h3-500",
|
|
86
|
+
color: "primary-content"
|
|
87
|
+
}, cardData.text), ' ', cardData.strikethroughText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
88
|
+
className: "type-b2-400",
|
|
89
|
+
color: "placeholder-text"
|
|
90
|
+
}, /*#__PURE__*/_react.default.createElement("strike", null, cardData.strikethroughText)), ' ', cardData.inlineText && /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
91
|
+
color: "positive",
|
|
92
|
+
className: "type-button-500"
|
|
93
|
+
}, cardData.inlineText)), cardData.subText && /*#__PURE__*/_react.default.createElement("div", {
|
|
94
|
+
className: "padding-top-8"
|
|
95
|
+
}, /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
96
|
+
className: "type-b2-400",
|
|
97
|
+
color: "secondary-content"
|
|
98
|
+
}, cardData.subText))), /*#__PURE__*/_react.default.createElement("div", {
|
|
67
99
|
className: "benefits"
|
|
68
100
|
}, cardData.annotatedTexts.map((item, index) => /*#__PURE__*/_react.default.createElement("div", {
|
|
69
101
|
className: "benefit-item"
|
|
70
|
-
}, item.iconType === 'LIGHTNING' && /*#__PURE__*/_react.default.createElement("ul", null, item.texts.map((benefit, i) => /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}),
|
|
102
|
+
}, item.iconType === 'LIGHTNING' && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("ul", null, item.texts.map((benefit, i) => /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
103
|
+
icon: _FlashOn.default,
|
|
104
|
+
size: 20,
|
|
105
|
+
color: "tags"
|
|
106
|
+
}), /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
107
|
+
className: "type-b2-400",
|
|
108
|
+
color: "primary-content"
|
|
109
|
+
}, benefit))))), item.iconType === 'VERIFIED' && /*#__PURE__*/_react.default.createElement("ul", null, item.texts.map((benefit, i) => /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
110
|
+
icon: _CheckCircle.default,
|
|
111
|
+
size: 20,
|
|
112
|
+
color: "positive"
|
|
113
|
+
}), /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
114
|
+
className: "type-b2-400",
|
|
115
|
+
color: "primary-content"
|
|
116
|
+
}, benefit))))))), (cardData === null || cardData === void 0 || (_cardData$buttons = cardData.buttons) === null || _cardData$buttons === void 0 || (_cardData$buttons = _cardData$buttons[0]) === null || _cardData$buttons === void 0 || (_cardData$buttons = _cardData$buttons.value) === null || _cardData$buttons === void 0 ? void 0 : _cardData$buttons.text) && /*#__PURE__*/_react.default.createElement("div", {
|
|
117
|
+
className: "flexEnd"
|
|
118
|
+
}, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
|
|
75
119
|
label: cardData === null || cardData === void 0 || (_cardData$buttons2 = cardData.buttons) === null || _cardData$buttons2 === void 0 || (_cardData$buttons2 = _cardData$buttons2[0]) === null || _cardData$buttons2 === void 0 || (_cardData$buttons2 = _cardData$buttons2.value) === null || _cardData$buttons2 === void 0 ? void 0 : _cardData$buttons2.text,
|
|
76
120
|
className: "action-button",
|
|
77
|
-
onClick: showModal
|
|
78
|
-
|
|
121
|
+
onClick: showModal,
|
|
122
|
+
type: "secondary",
|
|
123
|
+
size: "large"
|
|
124
|
+
})))), /*#__PURE__*/_react.default.createElement(_styles.BenfitsModalStyle, null, /*#__PURE__*/_react.default.createElement(_CustomModal.default, {
|
|
79
125
|
title: "See All Benefits",
|
|
80
126
|
open: isModalVisible,
|
|
81
127
|
onCancel: handleCancel,
|
|
82
128
|
footer: null,
|
|
129
|
+
className: "seeAllBenefits",
|
|
83
130
|
centered: true
|
|
84
|
-
}, /*#__PURE__*/_react.default.createElement("ul", {
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
},
|
|
89
|
-
className: "icon"
|
|
90
|
-
}), item))) !== null && _cardData$buttons$0$i !== void 0 ? _cardData$buttons$0$i : 'No Benfits Found'))));
|
|
131
|
+
}, /*#__PURE__*/_react.default.createElement("ul", null, (_cardData$buttons$0$i = cardData === null || cardData === void 0 || (_cardData$buttons$ = cardData.buttons[0]) === null || _cardData$buttons$ === void 0 || (_cardData$buttons$ = _cardData$buttons$.infoPoints) === null || _cardData$buttons$ === void 0 ? void 0 : _cardData$buttons$.map((item, index) => /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
|
|
132
|
+
icon: _CheckCircle.default,
|
|
133
|
+
size: 20,
|
|
134
|
+
color: "positive"
|
|
135
|
+
}), item))) !== null && _cardData$buttons$0$i !== void 0 ? _cardData$buttons$0$i : 'No Benfits Found'))))));
|
|
91
136
|
}
|
|
92
137
|
PlanCard.propTypes = {
|
|
93
138
|
'data-test': _propTypes.default.string,
|
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.PlanCardStyle = void 0;
|
|
6
|
+
exports.default = exports.PlanCardStyle = exports.BenfitsModalStyle = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
|
-
var _templateObject;
|
|
8
|
+
var _templateObject, _templateObject2;
|
|
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
11
|
var _default = exports.default = {};
|
|
12
|
-
const PlanCardStyle = exports.PlanCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position:
|
|
12
|
+
const PlanCardStyle = exports.PlanCardStyle = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .planCard{\n border-radius: 12px;\n border: 1px solid var(--color-divider);\n background: #FFF;\n box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n padding: 32px 16px 24px;\n position: relative;\n overflow: hidden;\n }\n .top-right-text{\n border-radius: 4px;\n background: var(--color-positive);\n color: var(--color-primary-background);\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 20px; \n padding: 4px;\n position: absolute;\n right: 0;\n top: 0;\n }\n .flexMin{\n display: flex;\n gap: 4px;\n }\n .planContent{\n display: flex;\n flex-direction: column;\n gap: 16px;\n }\n .price{\n display: flex;\n gap: 8px;\n align-items: center;\n }\n ul{\n list-style: none;\n list-style-position: inside;\n padding: 0;\n margin: 0;\n }\n ul li{\n display: flex;\n align-items: flex-start;\n gap: 8px;\n padding: 0 0 8px;\n }\n .flexMin svg{\n cursor: pointer;\n } \n .flexEnd{\n display: flex;\n justify-content: end;\n }\n .benefits{\n display: flex;\n gap: 16px;\n flex-direction: column;\n }\n \n"])));
|
|
13
|
+
const BenfitsModalStyle = exports.BenfitsModalStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n}\n .seeAllBenefits ul li{\n display: flex !important;\n gap: 8px !important;\n padding: 0 0 16px !important;\n }\n .seeAllBenefits ul {\n list-style: none !important;\n list-style-position: inside !important;\n padding: 0 !important;\n }\n\n"])));
|