contentoh-components-library 21.2.31 → 21.2.33

package/dist/components/atoms/VerticalSideMenuMainPage/index.js

@@ -56,6 +56,7 @@ var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
 
               return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 bar: trueBar,
+                className: "option-div",
                 children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.NavLinkOption, {
                   to: item.path,
                   bar: trueBar,

package/dist/components/atoms/VerticalSideMenuMainPage/styles.js

@@ -17,7 +17,7 @@ var _reactRouterDom = require("react-router-dom");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 98%;\n  box-sizing: border-box;\n  padding: 23px 10px 70px 10px;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: none;\n  width: ", "px;\n  border-radius: ", "px;\n  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n  scrollbar-width: none;\n  display: flex;\n  text-align: center;\n  transition: width 0.3s linear;\n  margin: 10px 0 10px 20px;\n  & + * {\n    margin-left: 30px;\n  }\n  .navbar-top {\n    transition: all 0.3s linear;\n    .option {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      margin-top: ", "%;\n      padding-left: ", "px;\n      .active {\n        background: #e33aa9;\n      }\n      & + div {\n        margin-top: 5px;\n      }\n      .sub-option {\n        display: flex;\n        flex-direction: column;\n        padding-left: ", "px;\n        height: auto;\n        width: auto;\n      }\n    }\n  }\n"])), function (_ref) {
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: 98%;\n  box-sizing: border-box;\n  padding: 23px 10px 70px 10px;\n  flex-direction: column;\n  justify-content: space-between;\n  overflow: none;\n  width: ", "px;\n  border-radius: ", "px;\n  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);\n  scrollbar-width: none;\n  display: flex;\n  text-align: center;\n  transition: width 0.3s linear;\n  margin: 10px 0 10px 20px;\n  & + * {\n    margin-left: 30px;\n  }\n  .navbar-top {\n    transition: all 0.3s linear;\n    .option {\n      .option-div {\n        & + div {\n          margin-top: 10px;\n        }\n      }\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      margin-top: ", "%;\n      padding-left: ", "px;\n      .active {\n        background: #e33aa9;\n        color: #fafafa;\n        text-decoration: none;\n        transition: all 0.3s linear;\n      }\n      .sub-option {\n        display: flex;\n        flex-direction: column;\n        padding-left: ", "px;\n        height: auto;\n        width: auto;\n      }\n    }\n  }\n"])), function (_ref) {
   var bar = _ref.bar;
   return bar ? 260 : 58;
 }, function (_ref2) {
@@ -35,7 +35,7 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
 });
 
 exports.Container = Container;
-var NavLinkOption = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  display: flex;\n  justify-content: ", ";\n  border-radius: ", "px;\n  align-items: center;\n  font-family: sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 18px;\n  line-height: 21px;\n  margin: 5px 0;\n  letter-spacing: -0.015em;\n  color: #fafafa;\n  text-decoration: none;\n  cursor: pointer;\n  width: ", "px;\n  padding: 0 17px;\n  &:hover {\n    background: #e33aa9;\n  }\n  p {\n    cursor: pointer;\n    margin: 0%;\n    pointer-events: none;\n  }\n  img {\n    width: 22px;\n    & + * {\n      margin-left: 12px;\n    }\n  }\n  &.sub-option-link {\n    display: flex;\n    justify-content: flex-start;\n    text-decoration: none;\n    position: relative;\n    font-size: 13px;\n    border-left: 1px solid #f0eef2;\n    border-radius: 0;\n    color: #f0eef2;\n    padding-top: 14px;\n    height: 25px;\n    margin: 0;\n    padding-left: 12px;\n    &::before {\n      border-left: 1px solid #e33aa9;\n      width: 10px;\n      content: \"\";\n      border-radius: 50%;\n      height: 10px;\n      background-color: white;\n      position: absolute;\n      bottom: 0;\n      left: ", "%;\n    }\n    &.active {\n      background: none !important;\n      &::before {\n        background-color: #e33aa9;\n      }\n    }\n    &:hover {\n      background: none;\n    }\n  }\n"])), function (_ref6) {
+var NavLinkOption = (0, _styledComponents.default)(_reactRouterDom.NavLink)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  display: flex;\n  justify-content: ", ";\n  border-radius: ", "px;\n  align-items: center;\n  font-family: sans-serif;\n  font-style: normal;\n  font-weight: 400;\n  font-size: 18px;\n  line-height: 21px;\n  //margin: 5px 0;\n  letter-spacing: -0.015em;\n  color: #fafafa;\n  text-decoration: none;\n  cursor: pointer;\n  width: ", "px;\n  padding: 0 17px;\n  &:hover {\n    background: #e33aa9;\n  }\n  p {\n    cursor: pointer;\n    margin: 0%;\n    pointer-events: none;\n  }\n  img {\n    width: 22px;\n    & + * {\n      margin-left: 12px;\n    }\n  }\n  &.sub-option-link {\n    display: flex;\n    justify-content: flex-start;\n    text-decoration: none;\n    position: relative;\n    font-size: 13px;\n    border-left: 1px solid #f0eef2;\n    border-radius: 0;\n    color: #f0eef2;\n    padding-top: 14px;\n    height: 25px;\n    margin: 0;\n    padding-left: 12px;\n    &::before {\n      border-left: 1px solid #e33aa9;\n      width: 10px;\n      content: \"\";\n      border-radius: 50%;\n      height: 10px;\n      background-color: white;\n      position: absolute;\n      bottom: 0;\n      left: ", "%;\n    }\n    &.active {\n      background: none !important;\n      color: #fafafa;\n      text-decoration: none;\n      transition: all 0.3s linear;\n      &::before {\n        background-color: #e33aa9;\n      }\n    }\n    &:hover {\n      background: none;\n    }\n  }\n"])), function (_ref6) {
   var bar = _ref6.bar;
   return bar ? 32 : 38;
 }, function (_ref7) {

package/dist/components/molecules/CustomSelect/index.js

@@ -116,7 +116,7 @@ var CustomSelect = function CustomSelect(_ref) {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "button-list",
       onClick: function onClick() {
-        return setShowList(true);
+        return setShowList(!showList);
       },
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
         children: selectLabel

package/dist/index.js

@@ -615,7 +615,7 @@ Object.keys(_index46).forEach(function (key) {
   });
 });
 
-var _index47 = require("./components/organisms/ChangePassword/index");
+var _index47 = require("./components/molecules/CustomSelect/index");
 
 Object.keys(_index47).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -628,7 +628,7 @@ Object.keys(_index47).forEach(function (key) {
   });
 });
 
-var _index48 = require("./components/organisms/Fullplan/index");
+var _index48 = require("./components/organisms/ChangePassword/index");
 
 Object.keys(_index48).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -641,7 +641,7 @@ Object.keys(_index48).forEach(function (key) {
   });
 });
 
-var _index49 = require("./components/organisms/FullProductNameHeader/index");
+var _index49 = require("./components/organisms/Fullplan/index");
 
 Object.keys(_index49).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -654,7 +654,7 @@ Object.keys(_index49).forEach(function (key) {
   });
 });
 
-var _index50 = require("./components/organisms/FullTabsMenu/index");
+var _index50 = require("./components/organisms/FullProductNameHeader/index");
 
 Object.keys(_index50).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -667,7 +667,7 @@ Object.keys(_index50).forEach(function (key) {
   });
 });
 
-var _index51 = require("./components/organisms/ImageDataTable/index");
+var _index51 = require("./components/organisms/FullTabsMenu/index");
 
 Object.keys(_index51).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -680,7 +680,7 @@ Object.keys(_index51).forEach(function (key) {
   });
 });
 
-var _index52 = require("./components/organisms/ImagePreviewer/index");
+var _index52 = require("./components/organisms/ImageDataTable/index");
 
 Object.keys(_index52).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -693,7 +693,7 @@ Object.keys(_index52).forEach(function (key) {
   });
 });
 
-var _index53 = require("./components/organisms/ImagesGroup/index");
+var _index53 = require("./components/organisms/ImagePreviewer/index");
 
 Object.keys(_index53).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -706,7 +706,7 @@ Object.keys(_index53).forEach(function (key) {
   });
 });
 
-var _index54 = require("./components/organisms/InputGroup/index");
+var _index54 = require("./components/organisms/ImagesGroup/index");
 
 Object.keys(_index54).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -719,7 +719,7 @@ Object.keys(_index54).forEach(function (key) {
   });
 });
 
-var _index55 = require("./components/organisms/ProductImageModal/index");
+var _index55 = require("./components/organisms/InputGroup/index");
 
 Object.keys(_index55).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -732,6 +732,19 @@ Object.keys(_index55).forEach(function (key) {
   });
 });
 
+var _index56 = require("./components/organisms/ProductImageModal/index");
+
+Object.keys(_index56).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _index56[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _index56[key];
+    }
+  });
+});
+
 var _ChangePasswordLogin = require("./components/pages/ChangePasswordLogin");
 
 Object.keys(_ChangePasswordLogin).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.2.31",
+  "version": "21.2.33",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/VerticalSideMenuMainPage/index.js

@@ -30,7 +30,7 @@ export const VerticalSideMenuMainPage = ({
             ></img>
             <div className="option">
               {menuoption.map((item, index) => (
-                <div key={index} bar={trueBar}>
+                <div key={index} bar={trueBar} className="option-div">
                   <NavLinkOption to={item.path} bar={trueBar}>
                     <img src={item.icon} alt={item.title}></img>
                     {trueBar && <p>{item.title}</p>}

package/src/components/atoms/VerticalSideMenuMainPage/styles.js

@@ -23,6 +23,11 @@ export const Container = styled.div`
   .navbar-top {
     transition: all 0.3s linear;
     .option {
+      .option-div {
+        & + div {
+          margin-top: 10px;
+        }
+      }
       display: flex;
       flex-direction: column;
       align-items: flex-start;
@@ -30,9 +35,9 @@ export const Container = styled.div`
       padding-left: ${({ bar }) => (bar ? 10 : 0)}px;
       .active {
         background: #e33aa9;
-      }
-      & + div {
-        margin-top: 5px;
+        color: #fafafa;
+        text-decoration: none;
+        transition: all 0.3s linear;
       }
       .sub-option {
         display: flex;
@@ -56,7 +61,7 @@ export const NavLinkOption = styled(NavLink)`
   font-weight: 400;
   font-size: 18px;
   line-height: 21px;
-  margin: 5px 0;
+  //margin: 5px 0;
   letter-spacing: -0.015em;
   color: #fafafa;
   text-decoration: none;
@@ -103,6 +108,9 @@ export const NavLinkOption = styled(NavLink)`
     }
     &.active {
       background: none !important;
+      color: #fafafa;
+      text-decoration: none;
+      transition: all 0.3s linear;
       &::before {
         background-color: #e33aa9;
       }

package/src/components/molecules/CustomSelect/index.js

@@ -65,7 +65,7 @@ export const CustomSelect = ({
 
   return (
     <Container id={customSelectId}>
-      <div className="button-list" onClick={() => setShowList(true)}>
+      <div className="button-list" onClick={() => setShowList(!showList)}>
         <p>{selectLabel}</p>
         <div className="arrow-item">&#9664;</div>
       </div>

package/src/index.js

@@ -48,6 +48,7 @@ export * from "./components/molecules/TabsMenu/index";
 export * from "./components/molecules/TagAndInput/index";
 export * from "./components/molecules/VerificationCodeResetPasswordLogin/index";
 export * from "./components/molecules/RetailerSelector/index";
+export * from "./components/molecules/CustomSelect/index";
 
 //organisms
 export * from "./components/organisms/ChangePassword/index";