oa-componentbook 0.17.13 → 0.17.14

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/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, _propTypes.default.null]))).isRequired,
+  closingClaimReasons: _propTypes.default.arrayOf(_propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.null]))).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-keyValueDataView/KeyValueDataView.js

@@ -4,13 +4,24 @@ 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 _styledComponents = _interopRequireDefault(require("styled-components"));
 var _styles = require("./styles");
+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) } })); }
 // Import the styles
-
+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"])));
+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"])));
+const emailCheckFunc = field => {
+  const emailRegex = /^[A-Za-z0-9_!#$%&'*+/=?`{|}~^.-]+@[A-Za-z0-9.-]+$/gm;
+  return emailRegex.test(field);
+};
+emailCheckFunc();
 function KeyValueDataView(_ref) {
   let {
     data,
@@ -23,11 +34,12 @@ function KeyValueDataView(_ref) {
     actualColumnLayout = columnLayout;
   }
   let entryIdx = 0;
-  return /*#__PURE__*/_react.default.createElement(_styles.KeyValueGroups, {
-    columns: actualColumnLayout.length
+  return /*#__PURE__*/_react.default.createElement(KeyValueGroups, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(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 +48,16 @@ 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("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,9 +8,9 @@ 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);
+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.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"])));
 exports.KeyValueGroup = KeyValueGroup;
 const StyledBold = _styledComponents.default.b(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  color: var(--color-primarygrey-text);\n  font-weight: 400;\n"])));
 exports.StyledBold = StyledBold;

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

@@ -35,17 +35,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, {
+      children: /*#__PURE__*/_react.default.createElement(_styles.SubStageContainer, {
+        className: className
+      }, data.subStages.map(subStage => /*#__PURE__*/_react.default.createElement(_styles.SubStage, {
         key: subStage,
         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 +63,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.14",
   "private": false,
   "description": "Reusable components",
   "main": "build/index.js",