oa-componentbook 0.17.13 → 0.17.15

package/build/components/Accordians.js

@@ -20,6 +20,7 @@ const SmallText = _styledComponents.default.small(_templateObject || (_templateO
 exports.SmallText = SmallText;
 function Accordians(_ref) {
   let {
+    defaultActiveKey,
     disabled,
     onChange,
     headerText,
@@ -33,6 +34,7 @@ function Accordians(_ref) {
     expandIconPosition: "right"
   }, /*#__PURE__*/_react.default.createElement(_antd.Collapse.Panel, {
     key: "1",
+    defaultActiveKey: defaultActiveKey,
     header: /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Typography.default, {
       typography: typography
     }, headerText, smallText && /*#__PURE__*/_react.default.createElement(SmallText, null, smallText)))
@@ -47,6 +49,7 @@ Accordians.propTypes = {
   onChange: _propTypes.default.func.isRequired,
   headerText: _propTypes.default.string.isRequired,
   smallText: _propTypes.default.string,
+  defaultActiveKey: _propTypes.default.string,
   typography: _propTypes.default.oneOf(_Typography.typographyOptions)
 };
 Accordians.defaultProps = {
@@ -54,6 +57,7 @@ Accordians.defaultProps = {
   borderRadius: 'border-radius-xsmall',
   disabled: false,
   smallText: '',
+  defaultActiveKey: '1',
   typography: 'type-button-500'
 };
 var _default = Accordians;

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

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _nanoid = require("nanoid");
 var _icons = require("@ant-design/icons");
 var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
 var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
@@ -51,7 +52,7 @@ function CustomDrawer(_ref) {
     height: height,
     width: width,
     footer: buttonConfig && /*#__PURE__*/_react.default.createElement(_styles.DrawerFooter, null, buttonConfig.map(button => /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
-      key: button.label,
+      key: (0, _nanoid.nanoid)(),
       label: button.label,
       onClick: button.callback,
       size: "large",

package/build/components/oa-component-tabs/CustomTabs.js

@@ -47,12 +47,12 @@ function CustomTabs(_ref) {
 }
 CustomTabs.propTypes = {
   data: _propTypes.default.shape({
-    tabs: _propTypes.default.arrayOf({
+    tabs: _propTypes.default.arrayOf(_propTypes.default.shape({
       body: _propTypes.default.node.isRequired,
       disabled: _propTypes.default.bool,
       key: _propTypes.default.string.isRequired,
       label: _propTypes.default.string.isRequired
-    }).isRequired
+    })).isRequired
   }),
   defaultActiveKey: _propTypes.default.string,
   disabled: _propTypes.default.bool,

package/build/components/oa-component-timeline/CustomTimeline.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _nanoid = require("nanoid");
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function CustomTimeline(_ref) {
@@ -18,7 +19,7 @@ function CustomTimeline(_ref) {
     current: currentStep,
     direction: "horizontal"
   }, stepsData.map(step => /*#__PURE__*/_react.default.createElement(_styles.CustomStep, {
-    key: step,
+    key: (0, _nanoid.nanoid)(),
     title: /*#__PURE__*/_react.default.createElement("span", null, step.title)
   })));
 }

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

@@ -12,6 +12,7 @@ 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 */
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -70,11 +71,11 @@ function ApprovalWidget(_ref) {
     open: drawer
   }, view.description))), !isFaq && /*#__PURE__*/_react.default.createElement("div", {
     className: "col-sm-12 col-md-4 col-lg-4"
-  }, docDetails ? /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Typography.Link, {
-    level: 4,
-    strong: true,
-    onClick: docDetails.onClick
-  }, docDetails.name && /*#__PURE__*/_react.default.createElement(_icons.DownloadOutlined, null), ' ', docDetails.name)) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
+  }, docDetails ? /*#__PURE__*/_react.default.createElement(_UploadDownloadDocument.default, {
+    name: docDetails.name,
+    onClick: docDetails.onClick,
+    type: "download"
+  }) : /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_antd.Typography.Text, {
     level: 4
   }, "Not Uploaded"))))), /*#__PURE__*/_react.default.createElement("div", {
     className: "col-sm-12 col-md-5 col-lg-5"

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

@@ -155,10 +155,10 @@ CloseClaim.propTypes = {
   visible: _propTypes.default.bool.isRequired,
   onCancel: _propTypes.default.func.isRequired,
   onConfirm: _propTypes.default.func.isRequired,
-  fraudReasons: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.string || _propTypes.default.number || _propTypes.default.null)).isRequired,
-  closingClaimReasons: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.string || _propTypes.default.number || _propTypes.default.null)).isRequired,
+  fraudReasons: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))).isRequired,
+  closingClaimReasons: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))).isRequired,
   // Can't define object type in this because the data is highly dynamic
-  serviceRequestData: _propTypes.default.object.isRequired
+  serviceRequestData: _propTypes.default.array.isRequired
 };
 var _default = CloseClaim;
 exports.default = _default;

package/build/widgets/oa-widget-document/UploadDownloadDocument.js

@@ -17,7 +17,7 @@ const {
   Link
 } = _antd.Typography;
 const StyledUpload = (0, _styledComponents.default)(_antd.Upload)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\nbutton{\n  border: 1px solid #014FC5;\n  color: #014FC5;\n}  \n"])));
-const StyledAside = _styledComponents.default.aside(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\ndisplay: flex;\n .ant-btn-dangerous{\n  margin: 0 0 0 4px;\n }\n .ant-btn-link{\n  display: flex;\n  padding: 0!important;\n  height: auto !important;\n  align-items: center;\n }\n .ant-btn >.anticon+span{\n  margin-inline-start: 4px;\n }\n\n span{\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 102px;\n }\n//  span:hover{\n//   white-space: normal;\n//   overflow: visible;\n//   text-overflow: clip; \n// }\n"])));
+const StyledAside = _styledComponents.default.aside(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\ndisplay: flex;\n .ant-btn-dangerous{\n  margin: 0 0 0 4px;\n }\n .ant-btn-link{\n  display: flex;\n  padding: 0!important;\n  height: auto !important;\n  align-items: center;\n }\n .ant-btn >.anticon+span{\n  margin-inline-start: 4px;\n }\n\n span{\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  max-width: 102px;\n }\n"])));
 function UploadDownloadDocument(_ref) {
   let {
     type,
@@ -33,7 +33,9 @@ function UploadDownloadDocument(_ref) {
     type: "link",
     onClick: onClick,
     strong: true
-  }, /*#__PURE__*/_react.default.createElement(_icons.DownloadOutlined, null), ' ', /*#__PURE__*/_react.default.createElement("span", null, name)), deleteBtn && /*#__PURE__*/_react.default.createElement(_antd.Button, {
+  }, /*#__PURE__*/_react.default.createElement(_icons.DownloadOutlined, null), ' ', /*#__PURE__*/_react.default.createElement("span", {
+    title: name
+  }, name)), deleteBtn && /*#__PURE__*/_react.default.createElement(_antd.Button, {
     type: "link",
     onClick: deleteOnClick,
     danger: true,

package/build/widgets/oa-widget-keyValueDataView/KeyValueDataView.js

@@ -4,13 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
 require("core-js/modules/web.dom-collections.iterator.js");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _nanoid = require("nanoid");
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// Import the styles
-
+const emailCheckFunc = field => {
+  const emailRegex = /^[A-Za-z0-9_!#$%&'*+/=?`{|}~^.-]+@[A-Za-z0-9.-]+$/gm;
+  return emailRegex.test(field);
+};
 function KeyValueDataView(_ref) {
   let {
     data,
@@ -23,11 +28,12 @@ function KeyValueDataView(_ref) {
     actualColumnLayout = columnLayout;
   }
   let entryIdx = 0;
-  return /*#__PURE__*/_react.default.createElement(_styles.KeyValueGroups, {
-    columns: actualColumnLayout.length
+  return /*#__PURE__*/_react.default.createElement(_styles.KeyValueGroups, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_styles.KeyValueGroup, {
+    className: "row"
   }, actualColumnLayout.map((element, layoutIdx) => {
     entryIdx += layoutIdx - 1 >= 0 ? actualColumnLayout[layoutIdx - 1] : 0;
-    return /*#__PURE__*/_react.default.createElement(_styles.KeyValueGroup, {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "col-sm-12 col-md-4 col-lg-4 gutter",
       key: element
     }, Object.entries(data)
 
@@ -36,13 +42,18 @@ function KeyValueDataView(_ref) {
     resulting in no elements selected.
     */.splice(entryIdx, element).map(_ref2 => {
       let [key, value] = _ref2;
-      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_styles.StyledBold, null, key, ":"), /*#__PURE__*/_react.default.createElement(_styles.StyledSpan, null, value));
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+        key: (0, _nanoid.nanoid)()
+      }, /*#__PURE__*/_react.default.createElement("valuestyle", null, /*#__PURE__*/_react.default.createElement("b", null, key, ":"), /*#__PURE__*/_react.default.createElement("span", {
+        className: emailCheckFunc(value) ? 'emailText' : undefined,
+        title: emailCheckFunc(value) ? value : undefined
+      }, value)));
     }));
-  }));
+  }))));
 }
 KeyValueDataView.propTypes = {
   columnLayout: _propTypes.default.arrayOf(_propTypes.default.number),
-  data: _propTypes.default.objectOf(_propTypes.default.string).isRequired
+  data: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])).isRequired
 };
 KeyValueDataView.defaultProps = {
   columnLayout: []

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

@@ -8,10 +8,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4; // KeyValueDataViewStyles.js
 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 KeyValueGroups = _styledComponents.default.section(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  \n  display: flex;\n  gap: 32px;\n  grid-template-columns: repeat(", " ,1fr);\n"])), props => props.columns);
-exports.KeyValueGroups = KeyValueGroups;
-const KeyValueGroup = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 120px 1fr;\n  // This prevents the rows from taking up all the available space.\n  grid-auto-rows: min-content;\n  width: 33.33%;\n"])));
+const KeyValueGroup = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .col-md-4:last-child{\n  margin: 0;\n  }\n  valuestyle{\n    display: flex;\n    gap: 16px;\n    padding: 0 0 8px;\n  }\n  valuestyle span{\n    width: 60%;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    color: #717171;\n  }\n  valuestyle b{\n    width: 40%;\n    font-size: 14px;\n    font-style: normal;\n    font-weight: 400;\n    line-height: 20px;\n    color: #212121;\n\n  }\n  .emailText{\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])));
 exports.KeyValueGroup = KeyValueGroup;
+const KeyValueGroups = _styledComponents.default.section(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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@media (max-width: 767px) {\n  .gutter{\n      margin: 0;\n  }\n}\n"])));
+exports.KeyValueGroups = KeyValueGroups;
 const StyledBold = _styledComponents.default.b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: var(--color-primarygrey-text);\n  font-weight: 400;\n"])));
 exports.StyledBold = StyledBold;
 const StyledSpan = _styledComponents.default.span(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  /* vertical-align: bottom; */\n  color: var(--color-secondarygrey-text);\n  font-weight: 400;\n  word-break: break-word;\n"])));

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

@@ -19,14 +19,20 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 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,
     records,
     onBlur,
     resetSearch
   } = _ref;
   const [val, setVal] = (0, _react.useState)('');
-  records === null || records === void 0 || records.unshift({
-    key: 0
-  });
+
+  // Used a local variable to avoid mutating props.
+  const mutatedRecords = [...records];
+  if (!disabled) {
+    mutatedRecords === null || mutatedRecords === void 0 || mutatedRecords.unshift({
+      key: 0
+    });
+  }
   (0, _react.useEffect)(() => {
     if (resetSearch) {
       setVal('');
@@ -39,11 +45,11 @@ function NotesWidget(_ref) {
     title: 'NOTES',
     dataIndex: 'notes',
     render: (text, obj, index) => {
-      if (index === 0) {
+      if (!disabled && index === 0) {
         return /*#__PURE__*/_react.default.createElement(_antd.Input, {
           size: "small",
           value: val,
-          onChange: e => setVal(e.target.value),
+          onChange: event => setVal(event.target.value),
           onBlur: onBlur,
           placeholder: "Type here .."
         });
@@ -59,17 +65,19 @@ function NotesWidget(_ref) {
   }];
   return /*#__PURE__*/_react.default.createElement(StyledAside, null, /*#__PURE__*/_react.default.createElement(_CustomTable.default, {
     columns: columns,
-    dataSource: records,
+    dataSource: mutatedRecords,
     size: "small",
     pagination: false
   }));
 }
 NotesWidget.propTypes = {
+  disabled: _propTypes.default.bool,
   records: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.string)).isRequired,
   onBlur: _propTypes.default.func.isRequired,
   resetSearch: _propTypes.default.bool
 };
 NotesWidget.defaultProps = {
+  disabled: false,
   resetSearch: false
 };
 var _default = NotesWidget;

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

@@ -7,6 +7,7 @@ exports.StageTimeline = StageTimeline;
 exports.StageTimelineChild = StageTimelineChild;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _nanoid = require("nanoid");
 var _Typography = _interopRequireDefault(require("../../components/oa-component-typography/Typography"));
 var _styles = require("./styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -35,17 +36,19 @@ function StageTimelineChild(_ref) {
   , {
     onChange: data.onClick,
     className: className,
+    collapsible: className === 'notstarted' ? 'disabled' : undefined,
     expandIconPosition: "end",
     ghost: true,
     items: [{
       key: data.stageId,
       label: StageDetailsDisplay,
-      children: /*#__PURE__*/_react.default.createElement(_styles.SubStageContainer, null, data.subStages.map(subStage => /*#__PURE__*/_react.default.createElement(_styles.SubStage, {
-        key: subStage,
+      children: /*#__PURE__*/_react.default.createElement(_styles.SubStageContainer, {
+        className: className
+      }, data.subStages.map(subStage => /*#__PURE__*/_react.default.createElement(_styles.SubStage, {
+        key: (0, _nanoid.nanoid)(),
         className: subStage.status,
         onClick: subStage.onClick,
-        type: "button",
-        disabled: subStage.status === 'disabled'
+        type: "button"
       }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
         typography: subStage.status === 'active' ? 'type-button-500' : 'type-b2-400'
       }, subStage.stageName))))
@@ -61,7 +64,8 @@ StageTimelineChild.propTypes = {
     onClick: _propTypes.default.func,
     stageId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
     stageName: _propTypes.default.string.isRequired,
-    status: _propTypes.default.oneOf(['Not-Started', 'In-Progress', 'completed']).isRequired,
+    // null and Not-Started result in the same behavior for a state.
+    status: _propTypes.default.oneOf([null, 'Not-Started', 'In-Progress', 'completed']).isRequired,
     subStages: _propTypes.default.arrayOf(_propTypes.default.shape({
       stageId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired,
       stageName: _propTypes.default.string.isRequired,

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

@@ -25,13 +25,13 @@ 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    color: var(--color-grey2-disabled);\n  }\n\n  &.inprogress {\n    color: var(--color-blue-CTA);\n  }\n\n  &.completed {\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    cursor: not-allowed;\n    color: var(--color-grey2-disabled);\n  }\n\n  &.inprogress {\n    color: var(--color-blue-CTA);\n  }\n\n  &.completed {\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  &.inprogress {\n    color: var(--color-blue-CTA);\n    background: var(--color-lightblue-background);\n    border-color: var(--color-lightblue-background);\n  }\n\n  &.completed {\n    color: var(--color-secondarygrey-text);\n    border: 1px solid var(--color-secondarygrey-text);\n    background: #fff;\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  &.notstarted {\n    cursor: not-allowed;\n  }\n\n  &.inprogress {\n    color: var(--color-blue-CTA);\n    background: var(--color-lightblue-background);\n    border-color: var(--color-lightblue-background);\n  }\n\n  &.completed {\n    color: var(--color-secondarygrey-text);\n    border: 1px solid var(--color-secondarygrey-text);\n    background: #fff;\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;
 const SubStage = _styledComponents.default.button(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  width: 100%;\n  padding: 4px 1px 4px calc(12px + 12px + 10px);\n  \n  background: inherit;\n  border: none;\n  text-align: left;\n  \n  cursor: pointer;\n  \n  &.active {\n    color: var(--color-primarygrey-text);\n  } \n  \n  &.inactive {\n    color: var(--color-secondarygrey-text);\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    color: var(--color-grey2-disabled);\n  }\n  "])));
 exports.SubStage = SubStage;
-const SubStageContainer = _styledComponents.default.section(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 12px;\n"])));
+const SubStageContainer = _styledComponents.default.section(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 12px;\n\n  /* &.notstarted {\n    cursor: not-allowed;\n    pointer-events: none;\n  } */\n"])));
 exports.SubStageContainer = SubStageContainer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oa-componentbook",
-  "version": "0.17.13",
+  "version": "0.17.15",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",
@@ -19,6 +19,7 @@
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/cli": "^7.3.2",
     "antd": "^5.9.2",
+    "nanoid": "^5.0.1",
     "prop-types": "^15.8.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",