intelicoreact 1.4.48 → 1.4.49

package/dist/Atomic/UI/WizardStepper/constructor.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mockData = exports.WIZARD_STEP_VARIANTS = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Status = _interopRequireDefault(require("../Status/Status"));
+const WIZARD_STEP_VARIANTS = exports.WIZARD_STEP_VARIANTS = Object.freeze({
+  DEFAULT: 'default',
+  DONE: 'done',
+  ACTIVE: 'active'
+});
+const JSXMockComponent = () => {
+  const arr = [{
+    title: 'Requested Amont',
+    value: '$15,000'
+  }, {
+    title: 'Repayment Amount',
+    value: '$15,001'
+  }, {
+    title: 'Repayment Date',
+    value: '12/12/2021'
+  }];
+  const textStyles = {
+    fontSize: '14px',
+    fontWeight: 400,
+    lineHeight: '20px',
+    letterSpacing: '0.2px'
+  };
+  return arr.map(row => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        maxWidth: '250px'
+      }
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      style: textStyles
+    }, row.title), /*#__PURE__*/_react.default.createElement("span", {
+      style: textStyles
+    }, row.value));
+  });
+};
+const mockData = exports.mockData = [{
+  key: 'businessInfo',
+  label: 'Provide Business Info',
+  description: 'This information will help us to evaluate your application',
+  isFinished: true
+}, {
+  key: 'principal',
+  label: 'Add Principal Information',
+  description: 'A principal is essentially another name for a company owner. At some corporations, the principal is also the founder, CEO, or even the chief investor',
+  isFinished: true,
+  isOptional: true
+}, {
+  key: 'coOwners',
+  label: 'Add Co-Owners',
+  description: '{merchantName} will receive that amount from {lenderNmae}',
+  isActive: true,
+  titleSlot: /*#__PURE__*/_react.default.createElement("span", {
+    className: "custom-title-slot"
+  }, "$15,001"),
+  contentSlot: /*#__PURE__*/_react.default.createElement(JSXMockComponent, null)
+}, {
+  key: 'bankAccount',
+  label: 'Add a Bank Account',
+  description: 'Your bank account information will be used to securely and automatically transfer the funds',
+  titleSlot: /*#__PURE__*/_react.default.createElement(_Status.default, {
+    label: "Some JSX",
+    status: "draft"
+  })
+}, {
+  key: 'documents',
+  label: 'Upload Documents',
+  description: 'Please upload the required documents'
+}, {
+  key: 'review',
+  label: 'Review & Submit',
+  description: 'Please review the information and submit your application'
+}, {
+  key: 'success',
+  label: 'Success',
+  description: 'Your application has been submitted successfully'
+}, {
+  key: 'failure',
+  label: 'Failure',
+  description: 'Your application has been failed'
+}, {
+  key: 'pending',
+  label: 'Pending',
+  description: 'Your application is under review'
+}];

package/dist/Atomic/UI/WizardStepper/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _ui = _interopRequireDefault(require("./ui"));
+var _default = exports.default = _ui.default;

package/dist/Atomic/UI/WizardStepper/ui/StateIcon/StateIcon.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StateIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./StateIcon.scss");
+var _constructor = require("../../constructor");
+const DefaultPoint = () => {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "8",
+    cy: "8",
+    r: "4"
+  }));
+};
+const DonePoint = () => {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none"
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    d: "M12.5 5L7 10.5L4 7.5",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+const RC = 'state-icon';
+const {
+  ACTIVE,
+  DEFAULT,
+  DONE
+} = _constructor.WIZARD_STEP_VARIANTS;
+const StateIcon = _ref => {
+  let {
+    variant = DEFAULT,
+    className
+  } = _ref;
+  const computedState = variant === ACTIVE || variant === DONE ? variant : DEFAULT;
+  const Inner = {
+    [DEFAULT]: /*#__PURE__*/_react.default.createElement(DefaultPoint, null),
+    [ACTIVE]: /*#__PURE__*/_react.default.createElement(DefaultPoint, null),
+    // with styles bg
+    [DONE]: /*#__PURE__*/_react.default.createElement(DonePoint, null)
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(RC, "".concat(RC, "--").concat(computedState), className)
+  }, Inner[computedState]);
+};
+exports.StateIcon = StateIcon;

package/dist/Atomic/UI/WizardStepper/ui/StateIcon/StateIcon.scss

@@ -0,0 +1,33 @@
+.state-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 20px;
+  height: 20px;
+  border-radius: 16px;
+
+  svg {
+    stroke: #656E7A;
+    fill:  #656E7A;
+  }
+
+  &--done,
+  &--active {
+    background-color: #EAF2FF;
+  }
+
+  &--done {
+    svg {
+      stroke: #1F7499;
+      fill:  none;
+    }
+  }
+
+  &--active {
+    svg {
+      stroke: #000;
+      fill:  #000;
+    }
+  }
+}

package/dist/Atomic/UI/WizardStepper/ui/StateIcon/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _StateIcon = require("./StateIcon");
+var _default = exports.default = _StateIcon.StateIcon;

package/dist/Atomic/UI/WizardStepper/ui/StepRow/StepRow.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _StateIcon = _interopRequireDefault(require("../StateIcon"));
+require("./StepRow.scss");
+var _constructor = require("../../constructor");
+var _Status = _interopRequireDefault(require("../../../Status/Status"));
+// import Status from '../../../../../../Components/Atomic/Status/Status';
+
+const RC = 'step-row';
+const {
+  DEFAULT,
+  ACTIVE,
+  DONE
+} = _constructor.WIZARD_STEP_VARIANTS;
+const StepRow = _ref => {
+  let {
+    label,
+    description,
+    className,
+    isOptional,
+    isFinished,
+    isActive,
+    titleSlot,
+    contentSlot,
+    customIcons
+  } = _ref;
+  const title = label;
+  const rowVariant = (() => {
+    if (isActive) return ACTIVE;
+    if (isFinished) return DONE;
+    return DEFAULT;
+  })();
+  const alternaviteIconFromProps = (() => {
+    if (isActive) return customIcons === null || customIcons === void 0 ? void 0 : customIcons.activeIcon;
+    if (isFinished) return customIcons === null || customIcons === void 0 ? void 0 : customIcons.doneIcon;
+    return customIcons === null || customIcons === void 0 ? void 0 : customIcons.defaultIcon;
+  })();
+  const CorrectIcon = () => {
+    var _Object$values;
+    return !customIcons || Object !== null && Object !== void 0 && (_Object$values = Object.values(customIcons)) !== null && _Object$values !== void 0 && _Object$values.every(icon => !icon) ? /*#__PURE__*/_react.default.createElement(_StateIcon.default, {
+      variant: rowVariant
+    }) : alternaviteIconFromProps;
+  };
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(RC, "".concat(RC, "--").concat(rowVariant))
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__state-point ").concat(RC, "__state-point--").concat(rowVariant))
+  }, /*#__PURE__*/_react.default.createElement(CorrectIcon, null)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(RC, "__content")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(RC, "__title")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(RC, "__title-left")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__title-text"), {
+      'text-muted': rowVariant === DEFAULT
+    })
+  }, title), isOptional && /*#__PURE__*/_react.default.createElement(_Status.default, {
+    label: 'Optional',
+    status: "draft"
+  })), titleSlot && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(RC, "__title-right")
+  }, titleSlot)), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(RC, "__description")
+  }, description), contentSlot && /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(RC, "__body")
+  }, contentSlot)));
+};
+var _default = exports.default = StepRow;

package/dist/Atomic/UI/WizardStepper/ui/StepRow/StepRow.scss

@@ -0,0 +1,75 @@
+$line-color: #E1E4EB;
+
+.step-row {
+  position: relative;
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  padding-left: 26px;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: -1px;
+    width: 2px;
+    height: calc(100% + 16px);
+    background-color: $line-color;
+  }
+
+
+  &__state-point {
+    position: absolute;
+    z-index: 2;
+    left: -10px;
+  }
+
+  &__content {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    row-gap: 4px;
+  }
+
+  &__title {
+    display: flex;
+    justify-content: space-between;
+    &-left {
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+    }
+
+    &-text {
+      font-family: inherit;
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 20px;
+      letter-spacing: 0.2px;
+    }
+  }
+
+  &__description {
+    font-family: inherit;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0.2px;
+    color: #656E7A;
+  }
+}
+
+.step-row:first-child {
+  &::after {
+    height: 100%;
+    bottom: -50%;
+  }
+}
+
+.step-row:last-child {
+  &::after {
+    height: 100%;
+    bottom: 50%;
+  }
+}

package/dist/Atomic/UI/WizardStepper/ui/StepRow/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _StepRow = _interopRequireDefault(require("./StepRow"));
+var _default = exports.default = _StepRow.default;

package/dist/Atomic/UI/WizardStepper/ui/StepWrapper/StepWrapper.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _StepRow = _interopRequireDefault(require("../StepRow/StepRow"));
+require("./StepWrapper.scss");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Box = _interopRequireDefault(require("../../../Box/Box"));
+var _icons = require("../icons");
+const StepWrapper = _ref => {
+  let {
+    steps,
+    customIcons,
+    variant = 'default',
+    className
+  } = _ref;
+  if (!(steps !== null && steps !== void 0 && steps.length)) throw new Error('No steps provided');
+  switch (variant) {
+    case 'ghost':
+      return /*#__PURE__*/_react.default.createElement(_Box.default, {
+        className: (0, _classnames.default)('step-wrapper', 'step-wrapper-ghost', className)
+      }, steps === null || steps === void 0 ? void 0 : steps.map(step => /*#__PURE__*/_react.default.createElement(_StepRow.default, (0, _extends2.default)({
+        key: step.key
+      }, step, {
+        customIcons: _icons.alternativeIconSet
+      }))), ' ');
+    case 'cardActive':
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('step-wrapper', 'step-wrapper-card-active', className)
+      }, steps === null || steps === void 0 ? void 0 : steps.map(step => /*#__PURE__*/_react.default.createElement(_StepRow.default, (0, _extends2.default)({
+        key: step.key
+      }, step, {
+        customIcons: _icons.alternativeIconSet
+      }))));
+    default:
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)('step-wrapper', className)
+      }, steps === null || steps === void 0 ? void 0 : steps.map(step => /*#__PURE__*/_react.default.createElement(_StepRow.default, (0, _extends2.default)({
+        key: step.key
+      }, step, {
+        customIcons: customIcons
+      }))));
+  }
+};
+var _default = exports.default = StepWrapper;

package/dist/Atomic/UI/WizardStepper/ui/StepWrapper/StepWrapper.scss

@@ -0,0 +1,69 @@
+
+// VARIANT: 'default'
+.step-wrapper {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+
+  .status--draft {
+    color: var(--color-text-muted, #757f8c);
+    background-color: #f0f1f4;
+  }
+}
+
+// VARIANT: 'ghost' - частично наследованный от дефолтного.
+.step-wrapper.step-wrapper-ghost,
+.step-wrapper.step-wrapper-card-active {
+  &:has(.step-row--active) {
+      .step-row::after {
+        height: calc(100% + 30px);
+    }
+  }
+  padding: 24px 16px;
+
+  .step-row.step-row--active:has(.custom-title-slot) {
+    .step-row__content {
+      row-gap: 8px;
+  }
+    .step-row__title {
+      row-gap: 4px;
+    }
+
+    .custom-title-slot {
+      color: var(--color-text-success, #69A457);
+        text-align: right;
+        font-family: inherit;
+        font-size: 18px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 28px;
+        letter-spacing: 0.1px;
+    }
+  }
+
+  .step-row--active {
+    --icon-width: 20px;
+    --content-padding: 20px;
+    --negative-offset: -20px;
+    display: flex;
+    padding: 16px 20px 16px 10.5px;
+    align-items: center;
+    gap: 24px;
+    align-self: stretch;
+    border-radius: 6px;
+    background: var(--white, #FFF);
+    box-shadow: 0px 2px 8px 0px rgba(39, 73, 113, 0.15);
+    margin-left: var(--negative-offset);
+    margin-right: var(--negative-offset);
+
+    .step-row__state-point {
+      position: static;
+      display: flex;
+    }
+    &::after {
+      content: none;
+    }
+  }
+}

package/dist/Atomic/UI/WizardStepper/ui/StepWrapper/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _StepWrapper = _interopRequireDefault(require("./StepWrapper"));
+var _default = exports.default = _StepWrapper.default;

package/dist/Atomic/UI/WizardStepper/ui/icons.js

@@ -0,0 +1,111 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.alternativeIconSet = void 0;
+var _react = _interopRequireDefault(require("react"));
+const DoneIcon = props => /*#__PURE__*/_react.default.createElement("svg", {
+  width: "20",
+  height: "20",
+  viewBox: "0 0 20 20",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/_react.default.createElement("rect", {
+  width: "20",
+  height: "20",
+  rx: "10",
+  fill: "#69A457"
+}), /*#__PURE__*/_react.default.createElement("mask", {
+  id: "mask0_54394_4001",
+  style: {
+    maskType: 'alpha'
+  },
+  maskUnits: "userSpaceOnUse",
+  x: "2",
+  y: "2",
+  width: "16",
+  height: "16"
+}, /*#__PURE__*/_react.default.createElement("path", {
+  d: "M14.5 7L9 12.5L6 9.5",
+  stroke: "black",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+})), /*#__PURE__*/_react.default.createElement("g", {
+  mask: "url(#mask0_54394_4001)"
+}, /*#__PURE__*/_react.default.createElement("rect", {
+  x: "2",
+  y: "2",
+  width: "16",
+  height: "16",
+  fill: "white"
+})));
+const TodoIcon = () => {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    clipPath: "url(#clip0_54394_4448)"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "10",
+    cy: "10",
+    r: "7",
+    fill: "white",
+    stroke: "#B3B8CB",
+    strokeWidth: "2"
+  })), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("clipPath", {
+    id: "clip0_54394_4448"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    width: "16",
+    height: "16",
+    fill: "white",
+    transform: "translate(2 2)"
+  }))));
+};
+const ActiveIcon = () => {
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    width: "20",
+    height: "20",
+    rx: "10",
+    fill: "#E8F9E5"
+  }), "ii", /*#__PURE__*/_react.default.createElement("mask", {
+    id: "mask0_54394_1459",
+    style: {
+      maskType: 'alpha'
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "2",
+    y: "2",
+    width: "16",
+    height: "16"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "10",
+    cy: "10",
+    r: "4",
+    fill: "#171D33"
+  })), /*#__PURE__*/_react.default.createElement("g", {
+    mask: "url(#mask0_54394_1459)"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    x: "2",
+    y: "2",
+    width: "16",
+    height: "16",
+    fill: "#171D33"
+  })));
+};
+const alternativeIconSet = exports.alternativeIconSet = {
+  defaultIcon: /*#__PURE__*/_react.default.createElement(TodoIcon, null),
+  doneIcon: /*#__PURE__*/_react.default.createElement(DoneIcon, null),
+  activeIcon: /*#__PURE__*/_react.default.createElement(ActiveIcon, null)
+};

package/dist/Atomic/UI/WizardStepper/ui/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _StepWrapper = _interopRequireDefault(require("./StepWrapper"));
+var _default = exports.default = _StepWrapper.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "1.4.48",
+  "version": "1.4.49",
   "description": "",
   "main": "dist/index.js",
   "files": [