oa-componentbook 0.17.18 → 0.17.19

package/build/components/Accordians.js

@@ -31,7 +31,7 @@ function Accordians(_ref) {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
     className: "collapseHead",
-    expandIconPosition: "right",
+    expandIconPosition: "end",
     defaultActiveKey: defaultActiveKey
   }, /*#__PURE__*/_react.default.createElement(_antd.Collapse.Panel, {
     key: "1",

package/build/components/oa-component-elevation/Elevation.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styles = require("./styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function Elevation(_ref) {
+  let {
+    type
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.StyledElevation, {
+    className: type
+  }, "test"));
+}
+Elevation.propTypes = {
+  type: _propTypes.default.oneOf(['Elevation-white-level1', 'Elevation-above-white-level1', 'Elevation-white-level2', 'Elevation-above-white-level2', 'Elevation-white-level3', 'Elevation-dark-level1', 'Elevation-dark-level2', 'Elevation-dark-level3']).isRequired
+};
+var _default = Elevation;
+exports.default = _default;

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledElevation = void 0;
+var _react = _interopRequireDefault(require("react"));
+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 StyledElevation = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n&.Elevation-white-level1{\n    border-radius: 12px;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.14);\n  }   \n\n  &.Elevation-above-white-level1 {\n    border-radius: 12px;\n    box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.14);\n  }\n  &.Elevation-white-level2 {\n    border-radius: 12px;\n    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.14);\n  }\n  &.Elevation-above-white-level2 {\n    border-radius: 12px;\n    box-shadow: 0px -4px 12px 0px rgba(0, 0, 0, 0.14);\n  }\n  &.Elevation-white-level3 {\n    border-radius: 12px;\n    box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.14);\n  }\n  &.Elevation-dark-level1{\n    border-radius: 12px;\n    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.34);\n  }\n  &.Elevation-dark-level2 {\n    border-radius: 12px;\n    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.34);\n  }\n  &.Elevation-dark-level3{\n    border-radius: 12px;\n    box-shadow: 0px 4px 32px 0px rgba(0, 0, 0, 0.34);\n  }\n"])));
+exports.StyledElevation = StyledElevation;

package/build/index.js

@@ -125,6 +125,12 @@ Object.defineProperty(exports, "CustomToggle", {
     return _CustomToggle.default;
   }
 });
+Object.defineProperty(exports, "Elevation", {
+  enumerable: true,
+  get: function get() {
+    return _Elevation.default;
+  }
+});
 Object.defineProperty(exports, "GridLayout", {
   enumerable: true,
   get: function get() {
@@ -227,6 +233,7 @@ var _CustomTag = _interopRequireDefault(require("./components/oa-component-tag/C
 var _CustomTimeline = _interopRequireDefault(require("./components/oa-component-timeline/CustomTimeline"));
 var _CustomToggle = _interopRequireDefault(require("./components/oa-component-toggle/CustomToggle"));
 var _TrackShipment = _interopRequireDefault(require("./widgets/oa-widget-track-shipment/TrackShipment"));
+var _Elevation = _interopRequireDefault(require("./components/oa-component-elevation/Elevation"));
 var _Typography = _interopRequireWildcard(require("./components/oa-component-typography/Typography"));
 var _BorderRadius = _interopRequireDefault(require("./BorderRadius"));
 var _ColorVariables = _interopRequireDefault(require("./ColorVariables"));

package/build/widgets/oa-widget-approval/ApprovalWidget.js

@@ -9,17 +9,14 @@ require("core-js/modules/es.symbol.description.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _antd = require("antd");
-var _icons = require("@ant-design/icons");
 var _UploadDownloadDocument = _interopRequireDefault(require("../oa-widget-document/UploadDownloadDocument"));
-var _templateObject;
-/* eslint-disable react/prop-types */
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const StyledAside = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .ant-typography{\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 20px; \n      color: #212121;\n      padding: 0 0 10px;\n      display: block;\n    }\n    .ant-typography strong{\n      font-weight: 400;\n    }\n    a{\n      color: #014FC5 !important;\n      padding:10px 0 0 !important;\n      font-weight: 500 !important;\n      display: block;\n    }\n    .ant-typography-secondary{\n      color: #717171;\n      padding: 0 !important;\n    }\n    .ant-radio-group-outline{\n      display: flex;\n      justify-content: space-between;\n    }\n    section{\n      padding: 16px 0 0;\n    }\n    section span{\n      padding: 0 0 4px !important;\n      display: block;\n    }\n    textarea{\n      padding: 12px;\n      min-height: 88px;\n      resize: none;\n      border-radius: 4px;\n    }\n    radiofield label{\n      white-space: nowrap;\n    }\n    docdetailstag a{\n          white-space: nowrap;\n    }\n    .container {\n      max-width: 1120px;\n      margin: 0 auto;\n      padding: 0 16px;\n    }\n    .container-fluid{\n        width: 100%;\n        padding: 0 16px;\n    }\n    .row {\n        display: flex;\n        flex-direction: column;\n    }\n    .gutter{\n        margin: 0 24px 0 0;\n    }\n    .row::after {\n        content: \"\";\n        clear: both;\n        display: table;\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    @media (min-width: 768px) {\n        .row {\n        flex-direction: row;\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      .col-sm-7 {\n        width: 58.33333%;\n      }\n      .col-sm-8 {\n        width: 66.66667%;\n      }\n      .col-sm-9 {\n        width: 75%;\n      }\n      .col-sm-10 {\n        width: 83.33333%;\n      }\n      .col-sm-11 {\n        width: 91.66667%;\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      .col-md-2 {\n        width: 16.66667%;\n      }\n      .col-md-3 {\n        width: 25%;\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      .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            margin: 0 24px 0 0;\n        }\n      .col-lg-1 {\n        width: 8.33333%;\n      }\n      .col-lg-2 {\n        width: 16.66667%;\n      }\n      .col-lg-3 {\n        width: 25%;\n        float: left;\n      }\n      .col-lg-4 {\n        width: 33.33333%;\n        float: left;\n      }\n      .col-lg-5 {\n        width: 41.66667%;\n      }\n      .col-lg-6 {\n        width: 50%;\n      }\n      .col-lg-7 {\n        width: 58.33333%;\n      }\n      .col-lg-8 {\n        width: 66.66667%;\n      }\n      .col-lg-9 {\n        width: 75%;\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            margin: 0 32px 0 0;\n        }\n      .col-xl-1 {\n        width: 8.33333%;\n      }\n      \n    }\n    \n"])));
+/* eslint-disable react/prop-types */
+
 const isUndefined = () => typeof testVar === 'undefined';
 function ApprovalWidget(_ref) {
   let {
@@ -36,7 +33,7 @@ function ApprovalWidget(_ref) {
   } = _ref;
   const [drawer, setDrawer] = (0, _react.useState)(false);
   const isDivider = isUndefined(divider) ? true : divider;
-  return /*#__PURE__*/_react.default.createElement(StyledAside, {
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledAside, {
     key: key
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "container"

package/build/widgets/oa-widget-approval/styles.js

@@ -1 +1,14 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledAside = void 0;
+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 StyledAside = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    .ant-typography{\n      font-size: 14px;\n      font-style: normal;\n      font-weight: 400;\n      line-height: 20px; \n      color: #212121;\n      padding: 0 0 10px;\n      display: block;\n    }\n    .ant-typography strong{\n      font-weight: 400;\n    }\n    a{\n      color: #014FC5 !important;\n      padding:10px 0 0 !important;\n      font-weight: 500 !important;\n      display: block;\n    }\n    .ant-typography-secondary{\n      color: #717171;\n      padding: 0 !important;\n    }\n    .ant-radio-group-outline{\n      display: flex;\n      justify-content: space-between;\n    }\n    section{\n      padding: 16px 0 0;\n    }\n    section span{\n      padding: 0 0 4px !important;\n      display: block;\n    }\n    textarea{\n      padding: 12px;\n      min-height: 88px;\n      resize: none;\n      border-radius: 4px;\n    }\n    radiofield label{\n      white-space: nowrap;\n    }\n    docdetailstag a{\n          white-space: nowrap;\n    }\n    .container {\n      max-width: 1120px;\n      margin: 0 auto;\n      padding: 0 16px;\n    }\n    .container-fluid{\n        width: 100%;\n        padding: 0 16px;\n    }\n    .row {\n        display: flex;\n        flex-direction: column;\n    }\n    .gutter{\n        margin: 0 24px 0 0;\n    }\n    .row::after {\n        content: \"\";\n        clear: both;\n        display: table;\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    @media (min-width: 768px) {\n        .row {\n        flex-direction: row;\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      .col-sm-7 {\n        width: 58.33333%;\n      }\n      .col-sm-8 {\n        width: 66.66667%;\n      }\n      .col-sm-9 {\n        width: 75%;\n      }\n      .col-sm-10 {\n        width: 83.33333%;\n      }\n      .col-sm-11 {\n        width: 91.66667%;\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      .col-md-2 {\n        width: 16.66667%;\n      }\n      .col-md-3 {\n        width: 25%;\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      .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            margin: 0 24px 0 0;\n        }\n      .col-lg-1 {\n        width: 8.33333%;\n      }\n      .col-lg-2 {\n        width: 16.66667%;\n      }\n      .col-lg-3 {\n        width: 25%;\n        float: left;\n      }\n      .col-lg-4 {\n        width: 33.33333%;\n        float: left;\n      }\n      .col-lg-5 {\n        width: 41.66667%;\n      }\n      .col-lg-6 {\n        width: 50%;\n      }\n      .col-lg-7 {\n        width: 58.33333%;\n      }\n      .col-lg-8 {\n        width: 66.66667%;\n      }\n      .col-lg-9 {\n        width: 75%;\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            margin: 0 32px 0 0;\n        }\n      .col-xl-1 {\n        width: 8.33333%;\n      }\n      \n    }\n"])));
+exports.StyledAside = StyledAside;

package/build/widgets/oa-widget-close-claim/CloseClaim.js

@@ -65,7 +65,7 @@ function CloseClaim(_ref) {
     }, {
       disabled: !submittable,
       callback: handleConfirm,
-      label: 'Done',
+      label: 'Close Claim',
       type: 'primary'
     }],
     open: visible,

package/build/widgets/oa-widget-notes/NotesWidget.js

@@ -9,14 +9,11 @@ require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _antd = require("antd");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _CustomTable = _interopRequireDefault(require("../../components/oa-component-table/CustomTable"));
-var _templateObject;
+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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-const StyledAside = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-table-thead > tr > th {\n    padding: 4px 16px;\n  }\n  .ant-table-tbody > tr > td {\n    padding: 8px 16px;\n  }\n  input {\n    height: 30px;\n  }\n"])));
 function NotesWidget(_ref) {
   let {
     disabled,
@@ -63,7 +60,7 @@ function NotesWidget(_ref) {
     title: 'USER',
     dataIndex: 'user'
   }];
-  return /*#__PURE__*/_react.default.createElement(StyledAside, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, {
+  return /*#__PURE__*/_react.default.createElement(_styles.StyledAside, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, {
     columns: columns,
     dataSource: mutatedRecords,
     size: "small",

package/build/widgets/oa-widget-notes/styles.js

@@ -1 +1,14 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.StyledAside = void 0;
+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 StyledAside = _styledComponents.default.aside(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .ant-table-thead > tr > th {\n    padding: 4px 16px;\n  }\n  .ant-table-tbody > tr > td {\n    padding: 8px 16px;\n  }\n  input {\n    height: 30px;\n  }\n"])));
+exports.StyledAside = StyledAside;

package/build/widgets/oa-widget-send-payment-link/SendPaymentLink.js

@@ -110,11 +110,19 @@ function SendPaymentLink(_ref) {
     label: /*#__PURE__*/_react.default.createElement(_Typography.default, null, "Mobile Number"),
     name: "mobileNum"
   }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    style: {
+      height: '48px',
+      borderRadius: '4px'
+    },
     disabled: options[selectedRadio].data.mobileNum
   })), /*#__PURE__*/_react.default.createElement(_antd.Form.Item, {
     label: /*#__PURE__*/_react.default.createElement(_Typography.default, null, "Email ID"),
     name: "email"
   }, /*#__PURE__*/_react.default.createElement(_antd.Input, {
+    style: {
+      height: '48px',
+      borderRadius: '4px'
+    },
     disabled: options[selectedRadio].data.email
   }))));
 }
@@ -138,7 +146,7 @@ SendPaymentLink.propTypes = {
 SendPaymentLink.defaultProps = {
   onClose: () => {},
   onSubmit: () => {},
-  open: false,
+  open: true,
   heading: '',
   height: 'auto',
   width: '480',

package/build/widgets/oa-widget-stage-timeline/StageTimeline.js

@@ -96,12 +96,12 @@ function StageTimelineChild(_ref) {
 StageTimelineChild.propTypes = {
   isActive: _propTypes.default.bool,
   onClick: _propTypes.default.func,
-  stageId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+  stageId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
   stageName: _propTypes.default.string.isRequired,
   // null and Not-Started result in the same behavior for a state.
   status: _propTypes.default.oneOf(['Not-Started', 'In-Progress', 'completed']),
   subStages: _propTypes.default.arrayOf(_propTypes.default.shape({
-    stageId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
+    stageId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
     stageName: _propTypes.default.string.isRequired,
     isDisabled: _propTypes.default.bool,
     isActive: _propTypes.default.bool,
@@ -111,6 +111,7 @@ StageTimelineChild.propTypes = {
 StageTimelineChild.defaultProps = {
   isActive: false,
   onClick: () => {},
+  stageId: null,
   status: null,
   subStages: []
 };

package/build/widgets/oa-widget-stage-timeline/styles.js

@@ -10,9 +10,9 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 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 CheckIcon = (0, _styledComponents.default)(_icons.CheckOutlined)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: var(--color-green-success);\n"])));
+const CheckIcon = (0, _styledComponents.default)(_icons.CheckOutlined)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  color: var(--color-green-success) !important;\n"])));
 exports.CheckIcon = CheckIcon;
-const CollapsibleStage = (0, _styledComponents.default)(_antd.Collapse)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  \n  /* Removes default ant design font */\n  font-family: inherit;\n\n  border-radius: 28px 28px 0px 0px !important;\n\n\n  & .ant-collapse-header * {\n    color: var(--color-grey2-disabled);\n  }\n\n  &.inprogress--active .ant-collapse-header * {\n    color: var(--color-blue-CTA);\n  }\n\n  // This is for the arrow\n  &.completed .ant-collapse-header *, \n  &.inprogress .ant-collapse-header * {\n    color: var(--color-secondarygrey-text);\n  }\n\n  & .ant-collapse-header {\n    /* !important needed to override pre-existing ant design styles */\n    padding: 12px 24px 12px 24px !important;\n    border-radius: 28px !important;\n    border: 1px solid transparent;\n  }  \n\n  &.inprogress .ant-collapse-header, \n  &.completed .ant-collapse-header {\n    border: 1px solid var(--color-secondarygrey-text);\n    background: var(--color-white-background);\n  }\n\n  &.inprogress--active .ant-collapse-header {\n    background: var(--color-lightblue-background);\n    border: 1px solid var(--color-lightblue-background);\n  }\n"])));
+const CollapsibleStage = (0, _styledComponents.default)(_antd.Collapse)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  \n  /* Removes default ant design font */\n  font-family: inherit;\n\n  border-radius: 28px 28px 0px 0px !important;\n\n    \n\n  &.notstarted .ant-collapse-header .ant-collapse-arrow {\n    color: var(--color-grey2-disabled);\n  }\n  \n  &.inprogress--active .ant-collapse-header .ant-collapse-arrow {\n    color: var(--color-blue-CTA);\n  }\n\n  // This is for the arrow\n  &.completed .ant-collapse-header .ant-collapse-arrow, \n  &.inprogress .ant-collapse-header .ant-collapse-arrow, \n  &.completed--active .ant-collapse-header .ant-collapse-arrow {\n    color: var(--color-secondarygrey-text);\n  }\n\n  & .ant-collapse-header {\n    /* !important needed to override pre-existing ant design styles */\n    padding: 12px 24px 12px 24px !important;\n    border-radius: 28px !important;\n    border: 1px solid transparent;\n    cursor: pointer;\n  }  \n\n  &.notstarted .ant-collapse-header {\n    cursor: not-allowed;\n  }\n\n  &.inprogress .ant-collapse-header, \n  &.completed .ant-collapse-header {\n    border: 1px solid var(--color-secondarygrey-text);\n    background: var(--color-white-background);\n  }\n\n\n  &.inprogress--active .ant-collapse-header, \n  &.completed--active .ant-collapse-header {\n    background: var(--color-lightblue-background);\n    border: 1px solid var(--color-lightblue-background);\n  }\n"])));
 exports.CollapsibleStage = CollapsibleStage;
 const DotIcon = _styledComponents.default.span(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  width: 12px;\n  height: 12px;\n  \n  /* Space between the icon and the stage name. */\n  margin: 0 12px 0 0;\n  \n  border-radius: 50px;\n\n  display: flex;\n\n  background: ", ";\n"])), props => {
   switch (props.className) {
@@ -27,9 +27,9 @@ const DotIcon = _styledComponents.default.span(_templateObject3 || (_templateObj
   }
 });
 exports.DotIcon = DotIcon;
-const StageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  \n  &.notstarted {\n    cursor: not-allowed;\n    color: var(--color-grey2-disabled);\n  }\n\n  &.inprogress--active {\n    color: var(--color-blue-CTA);\n  }\n\n  &.completed, &.inprogress {\n    color: var(--color-secondarygrey-text);\n  }\n"])));
+const StageDetails = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  \n  &.notstarted {\n    color: var(--color-grey2-disabled);\n  }\n\n  &.inprogress--active {\n    color: var(--color-blue-CTA);\n  }\n\n  &.completed, &.inprogress, &.completed--active {\n    color: var(--color-secondarygrey-text);\n  }\n"])));
 exports.StageDetails = StageDetails;
-const StaticStage = _styledComponents.default.a(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  \n  padding: 12px 24px 12px 24px;\n  \n  cursor: pointer;\n\n  border: 1px solid transparent;\n  color: var(--color-grey2-disabled);\n  \n  text-decoration: none;\n  border-radius: 28px;\n\n  &.notstarted {\n    cursor: not-allowed;\n  }\n \n  &.completed, &.inprogress {\n    border-color: var(--color-secondarygrey-text);\n    background: var(--color-white-background);\n  }\n  \n  &.completed--active {\n    color: var(--color-secondarygrey-text);\n    background: var(--color-lightblue-background);\n    border-color: var(--color-lightblue-background);\n  }\n\n  &.inprogress--active {\n    color: var(--color-blue-CTA);\n    background: var(--color-lightblue-background);\n    border-color: var(--color-lightblue-background);\n  }\n"])));
+const StaticStage = _styledComponents.default.a(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  \n  padding: 12px 24px 12px 24px;\n  \n  cursor: pointer;\n\n  border: 1px solid transparent;\n  color: var(--color-grey2-disabled);\n  \n  text-decoration: none;\n  border-radius: 28px;\n\n  \n \n  &.completed, &.inprogress {\n    border-color: var(--color-secondarygrey-text);\n    background: var(--color-white-background);\n  }\n  \n  &.completed--active {\n    color: var(--color-secondarygrey-text);\n    background: var(--color-lightblue-background);\n    border-color: var(--color-lightblue-background);\n  }\n\n  &.inprogress--active {\n    color: var(--color-blue-CTA);\n    background: var(--color-lightblue-background);\n    border-color: var(--color-lightblue-background);\n  }\n"])));
 exports.StaticStage = StaticStage;
 const StagesList = _styledComponents.default.ul(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  list-style-type: none;\n  \n  /* Since width is 100%, it'll take up all of its container */\n  /* width: 100%; */\n"])));
 exports.StagesList = StagesList;

package/package.json

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