npm - contentoh-components-library - Versions diffs - 21.0.23 → 21.0.27 - Mend

contentoh-components-library 21.0.23 → 21.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/dist/components/molecules/VerificationCodeResetPasswordLogin/utils.js ADDED Viewed

@@ -0,0 +1,69 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.validateInput = exports.validate = void 0;
+/**
+ *
+ * @param {event} e event received triggered by verification code input
+ * @param {number} index index position from the verification code(VC) input array (i.e. digit 1,2,3 etc...)
+ * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to change focus on input change)
+ */
+var validateInput = function validateInput(e, index, inputsArray) {
+  var isValid = false;
+  var inputNotEmpty = e.target.value.length > 0;
+  if (inputNotEmpty) {
+    if (validateInputNumber(e) !== null) {
+      isValid = true;
+      nextInputFocus(inputsArray, index++);
+    }
+  }
+  return isValid ? e.target.value : "";
+};
+/**
+ *
+ * @param {event} e event received triggered by verification code input
+ * @returns {boolean} if digit is a number
+ */
+exports.validateInput = validateInput;
+var validateInputNumber = function validateInputNumber(e) {
+  return (e.target.value || String.fromCharCode(e.keyCode)).match(/[0-9]{1}/);
+};
+/**
+ *
+ * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to change focus on input change)
+ * @param {number} index index position from the verification code(VC) input array (i.e. digit 1,2,3 etc...)
+ * changes focus to next input if digit typed is a number and there wasn't any before
+ */
+var nextInputFocus = function nextInputFocus(inputsArray, index) {
+  var _inputsArray$index;
+  var button = document.getElementsByClassName("general-default-button");
+  inputsArray !== null && inputsArray !== void 0 && inputsArray.length && index === (inputsArray === null || inputsArray === void 0 ? void 0 : inputsArray.length) ? button[0].focus() : (_inputsArray$index = inputsArray[index]) === null || _inputsArray$index === void 0 ? void 0 : _inputsArray$index.focus();
+};
+/**
+ *
+ * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to check if there's any empty)
+ * @param {function} setEmptyVerificationCode function to update flag which handles if there's an empty char
+ * updates emptyVerificationFlag from father component
+ */
+var validate = function validate(inputsArray, setEmptyVerificationCode) {
+  var contInputEmpty = 0;
+  inputsArray.forEach(function (element) {
+    element.value === "" ? 0 : contInputEmpty++;
+  });
+  contInputEmpty === inputsArray.length ? setEmptyVerificationCode(false) : setEmptyVerificationCode(true);
+};
+exports.validate = validate;

package/dist/components/organisms/ChangePassword/ChangePassword.stories.js ADDED Viewed

@@ -0,0 +1,28 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ChangePasswordDefault = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+var _index = require("./index");
+var _jsxRuntime = require("react/jsx-runtime");
+var _default = {
+  title: "Components/organisms/ChangePassword",
+  component: _index.ChangePassword
+};
+exports.default = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.ChangePassword, (0, _objectSpread2.default)({}, args));
+};
+var ChangePasswordDefault = Template.bind({});
+exports.ChangePasswordDefault = ChangePasswordDefault;
+ChangePasswordDefault.args = {};

package/dist/components/organisms/ChangePassword/index.js ADDED Viewed

@@ -0,0 +1,113 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChangePassword = void 0;
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _styles = require("./styles");
+var _LoginPasswordStrength = require("../../molecules/LoginPasswordStrength");
+var _react = require("react");
+var _GeneralButton = require("../../atoms/GeneralButton");
+var _LogoImage = require("../../atoms/LogoImage");
+var _ScreenHeader = require("../../atoms/ScreenHeader");
+var _variables = require("../../../global-files/variables");
+var _GradientPanel = require("../../atoms/GradientPanel");
+var _jsxRuntime = require("react/jsx-runtime");
+var ChangePassword = function ChangePassword() {
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      emptyPassword = _useState2[0],
+      setEmptyPassword = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      emptyConfirmPassword = _useState4[0],
+      setEmptyConfirmPassword = _useState4[1];
+  var _useState5 = (0, _react.useState)(true),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      matchPasswords = _useState6[0],
+      setMatchPasswords = _useState6[1];
+  var validate = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var password, confirmPassword;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              e.preventDefault();
+              password = document.querySelector("#newPasswordInput").value;
+              password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
+              confirmPassword = document.querySelector("#confirmPasswordInput").value;
+              confirmPassword === "" ? setEmptyConfirmPassword(true) : setEmptyConfirmPassword(false);
+              if (password === confirmPassword) {
+                setMatchPasswords(true);
+              } else {
+                setMatchPasswords(false);
+              }
+            case 6:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+    return function validate(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var loginRight = [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LogoImage.LogoImage, {}, "1"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "credenciales",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
+      fontFamily: _variables.FontFamily.AvenirNext,
+      color: _variables.GlobalColors.s5,
+      text: "Ingresa tus credenciales"
+    })
+  }, "2"), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LoginPasswordStrength.LoginPasswordStrength, {
+    emptyPassword: emptyPassword,
+    emptyConfirmPassword: emptyConfirmPassword,
+    matchPasswords: matchPasswords,
+    textTittle: "Ingresa tus credenciales"
+  }, "3"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "button-center",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GeneralButton.Button, {
+      buttonType: "general-default-button",
+      label: "Enviar",
+      onClick: function onClick(e) {
+        return validate(e);
+      }
+    })
+  }, "4")];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GradientPanel.GradientPanel, {
+      panelColor: _variables.GlobalColors.white,
+      componentsArray: loginRight,
+      panelType: "home-login"
+    })
+  });
+};
+exports.ChangePassword = ChangePassword;

package/dist/components/organisms/ChangePassword/styles.js ADDED Viewed

@@ -0,0 +1,18 @@
+"use strict";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\n  height: 100vh;\n  .button-center {\n    text-align: center;\n    position: absolute;\n    bottom: 5%;\n    left: calc(75% - 80px);\n    .general-default-button {\n      width: 160px;\n    }\n  }\n"])));
+exports.Container = Container;

package/dist/index.js CHANGED Viewed

@@ -160,7 +160,7 @@ Object.keys(_index12).forEach(function (key) {
   });
 });
-var _index13 = require("./components/atoms/PriorityFlag/index");
+var _index13 = require("./components/atoms/Loading/index");
 Object.keys(_index13).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -173,7 +173,7 @@ Object.keys(_index13).forEach(function (key) {
   });
 });
-var _index14 = require("./components/atoms/ProductImage/index");
+var _index14 = require("./components/atoms/PriorityFlag/index");
 Object.keys(_index14).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -186,7 +186,7 @@ Object.keys(_index14).forEach(function (key) {
   });
 });
-var _index15 = require("./components/atoms/ProgressBar/index");
+var _index15 = require("./components/atoms/ProductImage/index");
 Object.keys(_index15).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -199,7 +199,7 @@ Object.keys(_index15).forEach(function (key) {
   });
 });
-var _index16 = require("./components/atoms/ScreenHeader/index");
+var _index16 = require("./components/atoms/ProgressBar/index");
 Object.keys(_index16).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -212,7 +212,7 @@ Object.keys(_index16).forEach(function (key) {
   });
 });
-var _index17 = require("./components/atoms/SideMenuButton/index");
+var _index17 = require("./components/atoms/ScreenHeader/index");
 Object.keys(_index17).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -225,7 +225,7 @@ Object.keys(_index17).forEach(function (key) {
   });
 });
-var _index18 = require("./components/atoms/StatusTag/index");
+var _index18 = require("./components/atoms/SideMenuButton/index");
 Object.keys(_index18).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -238,7 +238,7 @@ Object.keys(_index18).forEach(function (key) {
   });
 });
-var _index19 = require("./components/atoms/TabSection/index");
+var _index19 = require("./components/atoms/StatusTag/index");
 Object.keys(_index19).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -251,7 +251,7 @@ Object.keys(_index19).forEach(function (key) {
   });
 });
-var _index20 = require("./components/atoms/ValidationPanel/index");
+var _index20 = require("./components/atoms/TabSection/index");
 Object.keys(_index20).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -264,7 +264,7 @@ Object.keys(_index20).forEach(function (key) {
   });
 });
-var _index21 = require("./components/molecules/AvatarAndValidation/index");
+var _index21 = require("./components/atoms/ValidationPanel/index");
 Object.keys(_index21).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -277,33 +277,33 @@ Object.keys(_index21).forEach(function (key) {
   });
 });
-var _CarouselImagesLogin = require("./components/molecules/CarouselImagesLogin");
+var _index22 = require("./components/molecules/AvatarAndValidation/index");
-Object.keys(_CarouselImagesLogin).forEach(function (key) {
+Object.keys(_index22).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _CarouselImagesLogin[key]) return;
+  if (key in exports && exports[key] === _index22[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _CarouselImagesLogin[key];
+      return _index22[key];
     }
   });
 });
-var _index22 = require("./components/molecules/EditionActiveImage/index");
+var _CarouselImagesLogin = require("./components/molecules/CarouselImagesLogin");
-Object.keys(_index22).forEach(function (key) {
+Object.keys(_CarouselImagesLogin).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _index22[key]) return;
+  if (key in exports && exports[key] === _CarouselImagesLogin[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _index22[key];
+      return _CarouselImagesLogin[key];
     }
   });
 });
-var _index23 = require("./components/molecules/FeaturesBar/index");
+var _index23 = require("./components/molecules/EditionActiveImage/index");
 Object.keys(_index23).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -316,7 +316,7 @@ Object.keys(_index23).forEach(function (key) {
   });
 });
-var _index24 = require("./components/molecules/GalleryElement/index");
+var _index24 = require("./components/molecules/EmailResetPasswordLogin/index");
 Object.keys(_index24).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -329,7 +329,7 @@ Object.keys(_index24).forEach(function (key) {
   });
 });
-var _index25 = require("./components/molecules/HeaderTop/index");
+var _index25 = require("./components/molecules/FeaturesBar/index");
 Object.keys(_index25).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -342,7 +342,7 @@ Object.keys(_index25).forEach(function (key) {
   });
 });
-var _index26 = require("./components/molecules/ImageSelector/index");
+var _index26 = require("./components/molecules/GalleryElement/index");
 Object.keys(_index26).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -355,46 +355,46 @@ Object.keys(_index26).forEach(function (key) {
   });
 });
-var _LoginPasswordStrength = require("./components/molecules/LoginPasswordStrength");
+var _index27 = require("./components/molecules/HeaderTop/index");
-Object.keys(_LoginPasswordStrength).forEach(function (key) {
+Object.keys(_index27).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _LoginPasswordStrength[key]) return;
+  if (key in exports && exports[key] === _index27[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _LoginPasswordStrength[key];
+      return _index27[key];
     }
   });
 });
-var _index27 = require("./components/molecules/PlanSelection/index");
+var _index28 = require("./components/molecules/ImageSelector/index");
-Object.keys(_index27).forEach(function (key) {
+Object.keys(_index28).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _index27[key]) return;
+  if (key in exports && exports[key] === _index28[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _index27[key];
+      return _index28[key];
     }
   });
 });
-var _index28 = require("./components/molecules/ProductNameHeader/index");
+var _LoginPasswordStrength = require("./components/molecules/LoginPasswordStrength");
-Object.keys(_index28).forEach(function (key) {
+Object.keys(_LoginPasswordStrength).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _index28[key]) return;
+  if (key in exports && exports[key] === _LoginPasswordStrength[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _index28[key];
+      return _LoginPasswordStrength[key];
     }
   });
 });
-var _index29 = require("./components/molecules/StatusAsignationInfo/index");
+var _index29 = require("./components/molecules/PlanSelection/index");
 Object.keys(_index29).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -407,7 +407,7 @@ Object.keys(_index29).forEach(function (key) {
   });
 });
-var _index30 = require("./components/molecules/TableHeader/index");
+var _index30 = require("./components/molecules/ProductNameHeader/index");
 Object.keys(_index30).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -420,7 +420,7 @@ Object.keys(_index30).forEach(function (key) {
   });
 });
-var _index31 = require("./components/molecules/TableRow/index");
+var _index31 = require("./components/molecules/RegistrationFirstStep/index");
 Object.keys(_index31).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -433,7 +433,7 @@ Object.keys(_index31).forEach(function (key) {
   });
 });
-var _index32 = require("./components/molecules/TabsMenu/index");
+var _index32 = require("./components/molecules/RegistrationSecondStep/index");
 Object.keys(_index32).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -446,7 +446,7 @@ Object.keys(_index32).forEach(function (key) {
   });
 });
-var _index33 = require("./components/molecules/TagAndInput/index");
+var _index33 = require("./components/molecules/RegistrationThirdStep/index");
 Object.keys(_index33).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -459,7 +459,7 @@ Object.keys(_index33).forEach(function (key) {
   });
 });
-var _index34 = require("./components/organisms/Fullplan/index");
+var _index34 = require("./components/molecules/SignInLogin/index");
 Object.keys(_index34).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -472,7 +472,7 @@ Object.keys(_index34).forEach(function (key) {
   });
 });
-var _index35 = require("./components/organisms/FullProductNameHeader/index");
+var _index35 = require("./components/molecules/StatusAsignationInfo/index");
 Object.keys(_index35).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -485,7 +485,7 @@ Object.keys(_index35).forEach(function (key) {
   });
 });
-var _index36 = require("./components/organisms/FullTabsMenu/index");
+var _index36 = require("./components/molecules/TableHeader/index");
 Object.keys(_index36).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -498,7 +498,7 @@ Object.keys(_index36).forEach(function (key) {
   });
 });
-var _index37 = require("./components/organisms/ImageDataTable/index");
+var _index37 = require("./components/molecules/TableRow/index");
 Object.keys(_index37).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -511,7 +511,7 @@ Object.keys(_index37).forEach(function (key) {
   });
 });
-var _index38 = require("./components/organisms/ImagePreviewer/index");
+var _index38 = require("./components/molecules/TabsMenu/index");
 Object.keys(_index38).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -524,7 +524,7 @@ Object.keys(_index38).forEach(function (key) {
   });
 });
-var _index39 = require("./components/organisms/ImagesGroup/index");
+var _index39 = require("./components/molecules/TagAndInput/index");
 Object.keys(_index39).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -537,7 +537,7 @@ Object.keys(_index39).forEach(function (key) {
   });
 });
-var _index40 = require("./components/organisms/InputGroup/index");
+var _index40 = require("./components/molecules/VerificationCodeResetPasswordLogin/index");
 Object.keys(_index40).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -550,7 +550,7 @@ Object.keys(_index40).forEach(function (key) {
   });
 });
-var _index41 = require("./components/organisms/ProductImageModal/index");
+var _index41 = require("./components/organisms/ChangePassword/index");
 Object.keys(_index41).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -563,6 +563,110 @@ Object.keys(_index41).forEach(function (key) {
   });
 });
+var _index42 = require("./components/organisms/Fullplan/index");
+Object.keys(_index42).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index42[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index42[key];
+    }
+  });
+});
+var _index43 = require("./components/organisms/FullProductNameHeader/index");
+Object.keys(_index43).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index43[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index43[key];
+    }
+  });
+});
+var _index44 = require("./components/organisms/FullTabsMenu/index");
+Object.keys(_index44).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index44[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index44[key];
+    }
+  });
+});
+var _index45 = require("./components/organisms/ImageDataTable/index");
+Object.keys(_index45).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index45[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index45[key];
+    }
+  });
+});
+var _index46 = require("./components/organisms/ImagePreviewer/index");
+Object.keys(_index46).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index46[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index46[key];
+    }
+  });
+});
+var _index47 = require("./components/organisms/ImagesGroup/index");
+Object.keys(_index47).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index47[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index47[key];
+    }
+  });
+});
+var _index48 = require("./components/organisms/InputGroup/index");
+Object.keys(_index48).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index48[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index48[key];
+    }
+  });
+});
+var _index49 = require("./components/organisms/ProductImageModal/index");
+Object.keys(_index49).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index49[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index49[key];
+    }
+  });
+});
 var _ChangePasswordLogin = require("./components/pages/ChangePasswordLogin");
 Object.keys(_ChangePasswordLogin).forEach(function (key) {

package/package.json CHANGED Viewed

@@ -1,12 +1,13 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.23",
+  "version": "21.0.27",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@storybook/addon-postcss": "^2.0.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "auth": "^0.0.9",
     "axios": "^0.25.0",
     "babel-preset-react-app": "^10.0.1",
     "chart.js": "^3.7.1",
@@ -16,6 +17,7 @@
     "react-chartjs-2": "^4.1.0",
     "react-dom": "^17.0.2",
     "react-image-fallback": "^8.0.0",
+    "react-router-dom": "^6.3.0",
     "styled-components": "^5.3.3",
     "web-vitals": "^1.0.1"
   },
@@ -70,7 +72,7 @@
     "auto": "^10.36.5",
     "babel-loader": "^8.2.3",
     "chromatic": "^6.3.3",
-    "contentoh-components-library": "^21.0.21",
+    "contentoh-components-library": "^21.0.26",
     "cross-env": "^7.0.3",
     "storybook-css-modules-preset": "^1.1.1"
   },