oa-componentbook 0.17.50 → 0.17.52

package/build/components/oa-component-button/styles.js

@@ -12,7 +12,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var _default = {};
 exports.default = _default;
 const StyledButton = _styledComponents.default.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  border-radius: 4px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  .text-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px; \n    text-align: left;\n  }\n"])));
-const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n\n  height: 2.25rem;\n  /* min-width: 100px; */\n  padding: 0.625rem 1rem;\n\n  &.small {\n    height: 1.875rem;\n    /* min-width: 80px; */\n    padding: 0.625rem 1rem;\n  }\n\n  &.medium {\n    height: 2.25rem;\n    /* min-width: 100px; */\n    padding: 0.625rem 1rem;\n  }\n\n  &.large {\n    height: 3rem;\n    /* min-width: 136px; */\n    padding: 0.625rem 1.5rem;\n  }\n\n  &.text-only-size {\n    height: auto;\n    padding: 0;\n  }\n\n  &.primary {\n    background: var(--color-primary);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary-background);\n  }\n  &.primary:hover {\n    background: var(--color-primary-hover);\n    border: 1px solid var(--color-primary-hover);\n  }\n\n  &.primary-disabled {\n    background: var(--color-disabled-button);\n    cursor: not-allowed;\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-disabled-button);\n  }\n\n  &.secondary {\n    background: var(--color-primary-background);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n  }\n  &.secondary:hover {\n    border: 1px solid var(--color-primary-hover);\n    color: var(--color-primary-hover);\n  }\n\n  &.secondary-disabled {\n    background: var(--color-primary-background);\n    border: 1px solid var(--color-disabled-button);\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.text-only {\n    border: none;\n    background: transparent;\n    color: var(--color-primary);\n  }\n  &.text-only:hover {\n    color: var(--color-primary-hover);\n  }\n\n  &.text-only-disabled {\n    border: none;\n    background: var(--color-primary-background);\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.danger-primary {\n    background: var(--color-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-negative);\n  }\n  &.danger-primary:hover {\n    background: var(--color-hover-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-hover-negative);\n  }\n\n  &.danger-secondary {\n    color: var(--color-negative);\n    border: 1px solid var(--color-negative);\n    background: var(--color-primary-background);\n  }\n  &.danger-secondary:hover {\n    color: var(--color-hover-negative);\n    border: 1px solid var(--color-hover-negative);\n    background: var(--color-primary-background);\n  }\n\n  &.danger-text-only {\n    border: none;\n    color: var(--color-negative);\n    background: var(--color-primary-background);\n  }\n  &.danger-text-only:hover {\n    border: none;\n    color: var(--color-hover-negative);\n    background: var(--color-primary-background);\n  }\n"])));
+const ColoredStyledButton = (0, _styledComponents.default)(StyledButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: 2.25rem;\n  min-width: 100px;\n  padding: 0.625rem 1rem;\n\n  &.small {\n    height: 1.875rem;\n    min-width: 80px;\n    padding: 0.625rem 1rem;\n  }\n\n  &.medium {\n    height: 2.25rem;\n    min-width: 100px;\n    padding: 0.625rem 1rem;\n  }\n\n  &.large {\n    height: 3rem;\n    min-width: 136px;\n    padding: 0.625rem 1.5rem;\n  }\n\n  &.text-only-size {\n    height: auto;\n    padding: 0;\n  }\n\n  &.primary {\n    background: var(--color-primary);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary-background);\n  }\n  &.primary:hover {\n    background: var(--color-primary-hover);\n    border: 1px solid var(--color-primary-hover);\n  }\n\n  &.primary-disabled {\n    background: var(--color-disabled-button);\n    cursor: not-allowed;\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-disabled-button);\n  }\n\n  &.secondary {\n    background: var(--color-primary-background);\n    border: 1px solid var(--color-primary);\n    color: var(--color-primary);\n  }\n  &.secondary:hover {\n    border: 1px solid var(--color-primary-hover);\n    color: var(--color-primary-hover);\n  }\n\n  &.secondary-disabled {\n    background: var(--color-primary-background);\n    border: 1px solid var(--color-disabled-button);\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.text-only {\n    border: none;\n    background: transparent;\n    color: var(--color-primary);\n  }\n  &.text-only:hover {\n    color: var(--color-primary-hover);\n  }\n\n  &.text-only-disabled {\n    border: none;\n    background: var(--color-primary-background);\n    color: var(--color-disabled-button);\n    cursor: not-allowed;\n  }\n  \n  &.danger-primary {\n    background: var(--color-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-negative);\n  }\n  &.danger-primary:hover {\n    background: var(--color-hover-negative);\n    color: var(--color-primary-background);\n    border: 1px solid var(--color-hover-negative);\n  }\n\n  &.danger-secondary {\n    color: var(--color-negative);\n    border: 1px solid var(--color-negative);\n    background: var(--color-primary-background);\n  }\n  &.danger-secondary:hover {\n    color: var(--color-hover-negative);\n    border: 1px solid var(--color-hover-negative);\n    background: var(--color-primary-background);\n  }\n\n  &.danger-text-only {\n    border: none;\n    color: var(--color-negative);\n    background: var(--color-primary-background);\n  }\n  &.danger-text-only:hover {\n    border: none;\n    color: var(--color-hover-negative);\n    background: var(--color-primary-background);\n  }\n"])));
 exports.ColoredStyledButton = ColoredStyledButton;
 function getButtonTypography(size) {
   switch (size) {

package/build/components/oa-component-checkbox/CustomCheckBox.js

@@ -7,15 +7,18 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _antd = require("antd");
-var _styles = require("./styles");
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
 var _utils = require("../../utils");
 const _excluded = ["data-test", "disabled", "label", "onChange", "size"];
+var _templateObject;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const StyledCheckbox = (0, _styledComponents.default)(_antd.Checkbox)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n \n  .ant-checkbox-checked .ant-checkbox-inner{\n    border: 1px solid #014FC5;\n    background-color: #014FC5;\n  }\n  .ant-radio-wrapper-disabled{\n    color: red !important;\n  }\n  .ant-checkbox:hover{\n    border: 1px solid #014FC5;\n  }\n  \n  \n"])));
 function CustomCheckBox(_ref) {
   let {
       'data-test': dataTest,
@@ -34,17 +37,16 @@ function CustomCheckBox(_ref) {
     // Call to `onChange` callback received from props.
     onChange(event);
   };
-  return /*#__PURE__*/_react.default.createElement(_styles.StyledCheckbox, _extends({
+  return /*#__PURE__*/_react.default.createElement(StyledCheckbox, _extends({
     disabled: disabled,
     onChange: handleChange
   }, antDesignProps),
   // The label is a string or a number
   ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    color: "primary-content",
     typography: size === 'large' ? 'type-b1-400' : 'type-b2-400'
   }, label) ||
   // The label is a node
-  /*#__PURE__*/_react.default.isValidElement(label) && label || undefined);
+  (0, _utils.isObject)(label) && label || undefined);
 }
 
 // This allows us referencing the Group container in our Checkbox component

package/build/components/oa-component-drawer/CustomDrawer.js

@@ -21,7 +21,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 function DrawerTitle(title) {
   return ((0, _utils.isString)(title) || (0, _utils.isNumber)(title)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     typography: "type-sl1-700"
-  }, title) || /*#__PURE__*/_react.default.isValidElement(title) && title || undefined;
+  }, title) || (0, _utils.isObject)(title) && title || undefined;
 }
 function CustomDrawer(_ref) {
   let {

package/build/components/oa-component-modal/CustomModal.js

@@ -6,19 +6,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("core-js/modules/es.object.assign.js");
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
-var _nanoid = require("nanoid");
 var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
 var _Typography = _interopRequireWildcard(require("../oa-component-typography/Typography"));
 var _utils = require("../../utils");
 var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 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; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function CustomModal(_ref) {
   let {
     buttonConfig,
@@ -44,21 +41,20 @@ function CustomModal(_ref) {
 
   return /*#__PURE__*/_react.default.createElement(_antd.Modal, {
     onCancel: handleCancel,
-    title: (title || imgSrc) && /*#__PURE__*/_react.default.createElement(_styles.TitleContainer, null, imgSrc && /*#__PURE__*/_react.default.createElement("img", {
+    title: /*#__PURE__*/_react.default.createElement(_styles.TitleContainer, null, imgSrc && /*#__PURE__*/_react.default.createElement("img", {
       src: imgSrc,
       alt: ""
-    }), /*#__PURE__*/_react.default.isValidElement(title) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
+    }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
       typography: typographies.title
     }, title)),
-    footer: (buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.length) > 0 && /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, buttonConfig === null || buttonConfig === void 0 ? void 0 : buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, _extends({
-      key: (0, _nanoid.nanoid)()
-    }, button, {
+    footer: /*#__PURE__*/_react.default.createElement(_styles.ButtonContainer, null, buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      key: button,
       iconConfig: button === null || button === void 0 ? void 0 : button.iconConfig,
       label: button.label,
       onClick: button.callback,
       size: "large",
       type: button.type
-    })))),
+    }))),
     open: open,
     width: width
   }, children && /*#__PURE__*/_react.default.createElement(_styles.DescriptionContainer, null,
@@ -72,30 +68,28 @@ CustomModal.propTypes = {
   // Array of button configurations
   buttonConfig: _propTypes.default.arrayOf(_propTypes.default.shape({
     callback: _propTypes.default.func.isRequired,
-    label: _propTypes.default.string,
+    label: _propTypes.default.string.isRequired,
     iconConfig: _propTypes.default.shape({
       icon: _propTypes.default.node,
       position: _propTypes.default.oneOf(['left', 'right']),
       style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
-    })
-  })),
+    }),
+    type: _propTypes.default.oneOf(['secondary', 'primary']).isRequired
+  })).isRequired,
   children: _propTypes.default.node,
-  title: _propTypes.default.string,
+  title: _propTypes.default.string.isRequired,
   typographies: _propTypes.default.shape({
     title: _propTypes.default.oneOf(_Typography.typographyOptions),
     children: _propTypes.default.oneOf(_Typography.typographyOptions)
   }),
-  imgSrc: _propTypes.default.string,
+  imgSrc: _propTypes.default.string.isRequired,
   onCancel: _propTypes.default.func.isRequired,
   open: _propTypes.default.bool,
   width: _propTypes.default.string || _propTypes.default.number
 };
 CustomModal.defaultProps = {
-  buttonConfig: [],
   children: null,
-  imgSrc: null,
   open: true,
-  title: null,
   typographies: {
     title: 'type-t1-500',
     children: 'type-b2-400'

package/build/components/oa-component-radio/CustomRadio.js

@@ -49,9 +49,8 @@ function CustomRadio(_ref) {
     value: value,
     "data-test": dataTest
   }, antDesignProps), ((0, _utils.isString)(label) || (0, _utils.isNumber)(label)) && /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    typography: size === 'large' ? 'type-b1-400' : 'type-b2-400',
-    color: "primary-content"
-  }, label) || /*#__PURE__*/_react.default.isValidElement(label) && label || undefined));
+    typography: size === 'large' ? 'type-b1-400' : 'type-b2-400'
+  }, label) || (0, _utils.isObject)(label) && label || undefined));
 }
 
 // This allows us referencing the Group container and Button component in our Checkbox component

package/build/components/oa-component-radio/styles.js

@@ -11,5 +11,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = {};
 exports.default = _default;
-const StyledRadio = (0, _styledComponents.default)(_antd.Radio)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-radio-checked .ant-radio-inner {\n    background: #fff;\n    border: 1px solid #1677ff;\n  }\n\n  .ant-radio-inner::after{\n    background: #1677ff;\n  }\n\n  & disabled {\n    color: rgba(0, 0, 0, 0.25);\n  }\n\n  .ant-radio-checked .ant-radio-inner {\n    background: #fff;\n    border:1px solid #014FC5;\n  }\n\n  .ant-radio-inner::after {\n    background: #014FC5;\n  }\n\n  .ant-radio-inner:hover {\n    color: #014FC5;\n  }  \n \n  .ant-radio-inner {\n    border-color: #717171;\n  }\n\n  .ant-radio-checked .ant-radio-inner {\n    background: #fff;\n    border:1px solid #014FC5;\n  }\n\n  .ant-radio-inner::after{\n    background: #014FC5;\n  }\n\n  .ant-radio-inner:hover{\n    color: #014FC5;\n  }\n\n  .ant-radio-inner{\n    border-color: #717171;\n  }\n"])));
+const StyledRadio = (0, _styledComponents.default)(_antd.Radio)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-radio-checked .ant-radio-inner{\n    background: #fff;\n    border:1px solid #1677ff;\n  }\n  .ant-radio-inner::after{\n    background: #1677ff;\n  }\n  .ant-radio-wrapper{\n    color: #212121;\n  }\n    \n  .ant-radio-checked .ant-radio-inner{\n    background: #fff;\n    border:1px solid #014FC5;\n  }\n  .ant-radio-inner::after{\n    background: #014FC5;\n  }\n  .ant-radio-inner:hover{\n    color: #014FC5;\n  }\n  \n \n  .ant-radio-inner{\n    border-color: #717171;\n  }\n  \n.ant-radio-checked .ant-radio-inner{\n  background: #fff;\n  border:1px solid #014FC5;\n}\n.ant-radio-inner::after{\n  background: #014FC5;\n}\n.ant-radio-inner:hover{\n  color: #014FC5;\n}\n\n\n.ant-radio-inner{\n  border-color: #717171;\n}\n\n"])));
 exports.StyledRadio = StyledRadio;

package/build/widgets/oa-widget-add-spare-part/styles.js

@@ -11,5 +11,5 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 var _default = {};
 exports.default = _default;
-const StyledForm = (0, _styledComponents.default)(_antd.Form)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  th.ant-table-cell {\n    vertical-align: text-top;\n    padding: 8px 16px !important;\n    font-size: 12px;\n  }\n  .ant-table-body table {\n    padding: 0 0 170px;\n  }\n  td.ant-table-cell {\n    padding: 20px 16px !important;\n  }\n  :where(.css-dev-only-do-not-override-sjvwvb).ant-table-wrapper .ant-table-thead >tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before, :where(.css-dev-only-do-not-override-sjvwvb).ant-table-wrapper .ant-table-thead >tr>td:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before { \n    width: 0;\n  }\n  .ant-form-item-control-input{\n    min-height: 30px;\n    width: 120px;\n  }\n"])));
+const StyledForm = (0, _styledComponents.default)(_antd.Form)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  th.ant-table-cell {\n    vertical-align: text-top;\n    padding: 8px 16px !important;\n    font-size: 12px;\n  }\n  th.ant-table-cell{\n    font-size: 12px;\n    font-weight: 700;\n    line-height: 16px; \n    letter-spacing: 0.24px;\n    text-transform: uppercase;\n  }\n  .ant-table-row:last-child .ant-table-cell{\n    border-bottom: none;\n  }\n  .ant-table-body table {\n    padding: 0 0 170px;\n  }\n  td.ant-table-cell {\n    padding: 20px 16px !important;\n  }\n  :where(.css-dev-only-do-not-override-sjvwvb).ant-table-wrapper .ant-table-thead >tr>th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before, :where(.css-dev-only-do-not-override-sjvwvb).ant-table-wrapper .ant-table-thead >tr>td:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before { \n    width: 0;\n  }\n  .ant-form-item-control-input{\n    min-height: 30px;\n    width: 120px;\n  }\n"])));
 exports.StyledForm = StyledForm;

package/build/widgets/oa-widget-spare-part/SparePartsWidget.js

@@ -10,7 +10,13 @@ var _antd = require("antd");
 var _icons = require("@ant-design/icons");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _nanoid = require("nanoid");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _CustomTable = _interopRequireDefault(require("../../components/oa-component-table/CustomTable"));
+var _templateObject, _templateObject2;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+const CoverPlanContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background: #FFF2E2;\n  padding: 12px;\n  margin: 0 0 16px;\n  font-size: 14px;\n  font-weight: 400;\n  line-height: 20px; \n  display: flex;\n  align-items: center;\n  img{\n    magin: 0 8px 0 0;\n  }\n"])));
+const CostBreakdown = _styledComponents.default.aside(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  background: var(--color-secondary-background);\n  padding: 0 12px;\n  margin: 16px 0 0;\n  ul{\n    display: flex;\n    margin: 0;\n    border-bottom: 1px solid var(--color-divider);\n    padding: 12px 0;\n  }\n  ul:last-child{\n    border-bottom: none;\n  }\n  ul li{\n    width: 100%;\n    list-style: none;\n  }\n  ul li:first-child{\n    color: var(--color-primary-content);\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px; \n  }\n  ul li:last-child{\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    color: var(--color-secondary-content);\n  }\n"])));
 // Mapping of how costs are covered
 const costCoveredBy = {
   costToCompany: 'Cost to Company',
@@ -85,18 +91,15 @@ function SparePartsWidget(_ref) {
   if (scopeDetails) {
     const unCoveredScope = scopeDetails.unCoveredScope || [];
     const coveredScope = scopeDetails.coveredScope || [];
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, scopeDetails.unCoveredScope.length > 0 && /*#__PURE__*/_react.default.createElement("div", null, "Multiple components need to be repaired which are not covered in this plan "), /*#__PURE__*/_react.default.createElement(_antd.Table, {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, scopeDetails.unCoveredScope.length > 0 && /*#__PURE__*/_react.default.createElement(CoverPlanContainer, null, "Multiple components need to be repaired which are not covered in this plan"), /*#__PURE__*/_react.default.createElement(_CustomTable.default, {
       columns: columns,
       dataSource: [...unCoveredScope, ...coveredScope],
       pagination: false
-    }), showCostBreakdown && /*#__PURE__*/_react.default.createElement("div", {
-      className: "cost-breakdown"
-    }, Object.keys(scopeDetails).map((key, index) => {
+    }), showCostBreakdown && /*#__PURE__*/_react.default.createElement(CostBreakdown, null, Object.keys(scopeDetails).map((key, index) => {
       if (costCoveredBy[key] && scopeDetails[key] != null && scopeDetails[key] !== undefined) {
-        return /*#__PURE__*/_react.default.createElement("div", {
-          key: (0, _nanoid.nanoid)(),
-          className: "row"
-        }, /*#__PURE__*/_react.default.createElement("span", null, costCoveredBy[key]), ' ', /*#__PURE__*/_react.default.createElement("span", null, renderCost(scopeDetails[key])));
+        return /*#__PURE__*/_react.default.createElement("ul", {
+          key: (0, _nanoid.nanoid)()
+        }, /*#__PURE__*/_react.default.createElement("li", null, costCoveredBy[key]), ' ', /*#__PURE__*/_react.default.createElement("li", null, renderCost(scopeDetails[key])));
       }
       return null; // To satisfy React key warning
     })));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.17.50",
+  "version": "0.17.52",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",

package/build/components/GridSystem.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = GridSystem;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-require("./grid-system.css");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-function GridSystem(_ref) {
-  let {
-    children,
-    isFluid
-  } = _ref;
-  const BasicGrid = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    display: grid;\n    /* \n    Small breakpoint: 4 columns.\n    */\n    grid-template-columns: repeat(4, 1fr);\n    gap: 16px;\n\n    /* \n    Medium breakpoint: 8 columns.\n    */\n    @media screen and (min-width: 768px) {\n        grid-template-columns: repeat(8, 1fr);\n        gap: 16px;\n    }\n\n    /* \n    Large breakpoint : 12 columns.\n    */\n    @media screen and (min-width: 992px) {\n        grid-template-columns: repeat(12, 1fr);\n        gap: 24px;\n    }\n\n    /* \n    Extra Large breakpoint: 12 columns.\n    */\n    @media screen and (min-width: 1200px) {\n        grid-template-columns: repeat(12, 1fr);\n        gap: 24px;\n    }\n  "])));
-  let FluidOrFixedGrid;
-  if (isFluid) {
-    FluidOrFixedGrid = (0, _styledComponents.default)(BasicGrid)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        width: 100%;\n    "])));
-  } else {
-    FluidOrFixedGrid = (0, _styledComponents.default)(BasicGrid)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        margin: 0 16px;\n\n        /* \n        Medium breakpoint: 8 columns.\n        */\n        @media screen and (min-width: 768px) {\n            margin: 0 32px;\n        }\n\n        /* \n        Large breakpoint : 12 columns.\n        */\n        @media screen and (min-width: 992px) {\n            margin: 0 32px;\n        }\n\n        /* \n        Extra Large breakpoint: 12 columns.\n        */\n        @media screen and (min-width: 1200px) {\n            width: 1128px;\n            margin: 0 auto;\n        }        \n    "])));
-  }
-  return /*#__PURE__*/_react.default.createElement(FluidOrFixedGrid, null, children);
-}
-GridSystem.propTypes = {
-  children: _propTypes.default.node.isRequired,
-  isFluid: _propTypes.default.bool
-};
-GridSystem.defaultProps = {
-  isFluid: false
-};

package/build/components/grid-system.css

@@ -1,205 +0,0 @@
-/* 
-Small breakpoint. 
-
-On small screens, there are only 4 columns, so an element can take 4 columns at max.
-*/
-.col-s-1 {
-    /* No start or end defined. Span 1 columns. */
-    grid-column: span 1 / auto;
-}
-
-.col-s-2 {
-    /* No start or end defined. Span 2 columns. */
-    grid-column: span 2 / auto;
-}
-
-.col-s-3 {
-/* No start or end defined. Span 3 columns. */
-    grid-column: span 3 / auto;
-}
-
-.col-s-4 {
-    /* No start or end defined. Span 4 columns. */
-    grid-column: span 4 / auto;
-}
-
-/* 
-Medium breakpoint.
-
-On medium screens, there are 8 columns, so an element can take 8 columns at max.
-*/
-@media screen and (min-width: 768px) {
-    .col-m-1 {
-    /* No start or end defined. Span 1 columns. */
-        grid-column: span 1 / auto;
-    }
-
-    .col-m-2 {
-        /* No start or end defined. Span 2 columns. */
-        grid-column: span 2 / auto;
-    }
-
-    .col-m-3 {
-        /* No start or end defined. Span 3 columns. */
-        grid-column: span 3 / auto;
-    }
-
-    .col-m-4 {
-        /* No start or end defined. Span 4 columns. */
-        grid-column: span 4 / auto;
-    }
-
-    .col-m-5 {
-        /* No start or end defined. Span 5 columns. */
-        grid-column: span 5 / auto;
-    }
-
-    .col-m-6 {
-        /* No start or end defined. Span 6 columns. */
-        grid-column: span 6 / auto;
-    }
-
-    .col-m-7 {
-        /* No start or end defined. Span 7 columns. */
-        grid-column: span 7 / auto;
-    }
-
-    .col-m-8 {
-        /* No start or end defined. Span 8 columns. */
-        grid-column: span 8 / auto;
-    }
-}
-
-/* 
-Large breakpoint. 
-
-On large screens, there are 12 columns, so an element can take 12 columns at max.
-*/
-@media screen and (min-width: 992px) {
-    .col-l-1 {
-    /* No start or end defined. Span 1 columns. */
-        grid-column: span 1 / auto;
-    }
-
-    .col-l-2 {
-        /* No start or end defined. Span 2 columns. */
-        grid-column: span 2 / auto;
-    }
-
-    .col-l-3 {
-        /* No start or end defined. Span 3 columns. */
-        grid-column: span 3 / auto;
-    }
-
-    .col-l-4 {
-        /* No start or end defined. Span 4 columns. */
-        grid-column: span 4 / auto;
-    }
-
-    .col-l-5 {
-        /* No start or end defined. Span 5 columns. */
-        grid-column: span 5 / auto;
-    }
-
-    .col-l-6 {
-    /* No start or end defined. Span 6 columns. */
-        grid-column: span 6 / auto;
-    }
-
-    .col-l-7 {
-        /* No start or end defined. Span 7 columns. */
-        grid-column: span 7 / auto;
-    }
-
-    .col-l-8 {
-        /* No start or end defined. Span 8 columns. */
-        grid-column: span 8 / auto;
-    }
-
-    .col-l-9 {
-        /* No start or end defined. Span 9 columns. */
-        grid-column: span 9 / auto;
-    }
-
-    .col-l-10 {
-        /* No start or end defined. Span 10 columns. */
-        grid-column: span 10 / auto;
-    }
-
-    .col-l-11 {
-        /* No start or end defined. Span 11 columns. */
-        grid-column: span 11 / auto;
-    }
-
-    .col-l-12 {
-        /* No start or end defined. Span 12 columns. */
-        grid-column: span 12 / auto;
-    }
-}
-
-/* 
-Extra Large breakpoint. 
-
-On extra large screens, there are 12 columns, so an element can take 12 columns at max.
-*/
-@media screen and (min-width: 1200px) {
-    .col-xl-1 {
-        /* No start or end defined. Span 1 columns. */
-        grid-column: span 1 / auto;
-    }
-
-    .col-xl-2 {
-        /* No start or end defined. Span 2 columns. */
-        grid-column: span 2 / auto;
-    }
-
-    .col-xl-3 {
-    /* No start or end defined. Span 3 columns. */
-        grid-column: span 3 / auto;
-    }
-
-    .col-xl-4 {
-        /* No start or end defined. Span 4 columns. */
-        grid-column: span 4 / auto;
-    }
-
-    .col-xl-5 {
-    /* No start or end defined. Span 5 columns. */
-        grid-column: span 5 / auto;
-    }
-
-    .col-xl-6 {
-        /* No start or end defined. Span 6 columns. */
-        grid-column: span 6 / auto;
-    }
-
-    .col-xl-7 {
-        /* No start or end defined. Span 7 columns. */
-        grid-column: span 7 / auto;
-    }
-
-    .col-xl-8 {
-        /* No start or end defined. Span 8 columns. */
-        grid-column: span 8 / auto;
-    }
-
-    .col-xl-9 {
-        /* No start or end defined. Span 9 columns. */
-        grid-column: span 9 / auto;
-    }
-
-    .col-xl-10 {
-        /* No start or end defined. Span 10 columns. */
-        grid-column: span 10 / auto;
-    }
-
-    .col-xl-11 {
-        /* No start or end defined. Span 11 columns. */
-        grid-column: span 11 / auto;
-    }
-
-    .col-xl-12 {
-        /* No start or end defined. Span 12 columns. */
-        grid-column: span 12 / auto;
-    }
-}

package/build/components/oa-component-checkbox/styles.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.StyledCheckbox = void 0;
-var _antd = require("antd");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-var _default = {};
-exports.default = _default;
-const StyledCheckbox = (0, _styledComponents.default)(_antd.Checkbox)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-checkbox-inner{\n    border: 1px solid #717171;\n  }\n  .ant-checkbox-checked .ant-checkbox-inner{\n    border: 1px solid #014FC5;\n    background-color: #014FC5;\n  }\n  .ant-checkbox:hover{\n    border: 1px solid #014FC5;\n  }\n"])));
-exports.StyledCheckbox = StyledCheckbox;