contentoh-components-library 21.2.30 → 21.2.32

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 (11) hide show
  1. package/dist/components/atoms/VerticalSideMenuMainPage/VerticalSideMenuMainPage.stories.js +1 -3
  2. package/dist/components/atoms/VerticalSideMenuMainPage/index.js +53 -46
  3. package/dist/components/atoms/VerticalSideMenuMainPage/styles.js +27 -18
  4. package/dist/components/molecules/CustomSelect/index.js +1 -1
  5. package/dist/index.js +22 -9
  6. package/package.json +1 -1
  7. package/src/components/atoms/VerticalSideMenuMainPage/VerticalSideMenuMainPage.stories.js +3 -4
  8. package/src/components/atoms/VerticalSideMenuMainPage/index.js +54 -37
  9. package/src/components/atoms/VerticalSideMenuMainPage/styles.js +137 -69
  10. package/src/components/molecules/CustomSelect/index.js +1 -1
  11. package/src/index.js +1 -0
package/dist/components/atoms/VerticalSideMenuMainPage/VerticalSideMenuMainPage.stories.js CHANGED
@@ -15,8 +15,6 @@ var _iconProduct = _interopRequireDefault(require("../../../assets/images/vertic
15
15
 
16
16
  var _iconGroup = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconGroup.svg"));
17
17
 
18
- var _iconLogo = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconLogo.svg"));
19
-
20
18
  var _iconSpeedometer = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconSpeedometer.svg"));
21
19
 
22
20
  var _iconTask = _interopRequireDefault(require("../../../assets/images/verticalSideMenuMainPage/iconTask.svg"));
@@ -58,6 +56,6 @@ VerticalSideMenuMainPageDefault.args = {
58
56
  }, {
59
57
  icon: _iconTask.default,
60
58
  path: "/tasks",
61
- title: "Tareas"
59
+ title: "Content Oh!"
62
60
  }]
63
61
  };
package/dist/components/atoms/VerticalSideMenuMainPage/index.js CHANGED
@@ -24,61 +24,68 @@ var _reactRouterDom = require("react-router-dom");
24
24
  var _jsxRuntime = require("react/jsx-runtime");
25
25
 
26
26
  var VerticalSideMenuMainPage = function VerticalSideMenuMainPage(_ref) {
27
- var menuoption = _ref.menuoption;
27
+ var _ref$menuoption = _ref.menuoption,
28
+ menuoption = _ref$menuoption === void 0 ? [] : _ref$menuoption,
29
+ containerdash = _ref.containerdash;
28
30
 
29
31
  var _useState = (0, _react.useState)(),
30
32
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
31
33
  trueBar = _useState2[0],
32
34
  setTrueBar = _useState2[1];
33
35
 
34
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
35
- className: trueBar,
36
- bar: trueBar,
37
- onMouseOver: function onMouseOver() {
38
- return setTrueBar(true);
39
- },
40
- onMouseOut: function onMouseOut() {
41
- return setTrueBar(false);
42
- },
43
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
44
- className: "navbar-top",
45
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
46
- src: trueBar ? _iconLogoContentoh.default : _iconLogo.default,
47
- alt: "Logo",
48
- className: "logo"
49
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
50
- className: "option",
51
- children: menuoption.map(function (item, index) {
52
- var _item$suboption;
36
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.BrowserRouter, {
37
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.ContainerPrincipal, {
38
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
39
+ bar: trueBar,
40
+ onMouseOver: function onMouseOver() {
41
+ return setTrueBar(true);
42
+ },
43
+ onMouseOut: function onMouseOut() {
44
+ return setTrueBar(false);
45
+ },
46
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
47
+ className: "navbar-top",
48
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
49
+ src: trueBar ? _iconLogoContentoh.default : _iconLogo.default,
50
+ alt: "Logo",
51
+ className: "logo"
52
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
53
+ className: "option",
54
+ children: menuoption.map(function (item, index) {
55
+ var _item$suboption;
53
56
 
54
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
55
- children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactRouterDom.NavLink, {
56
- to: item.path,
57
- className: "option-link",
58
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
59
- src: item.icon,
60
- alt: item.title
61
- }), trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
62
- children: item.title
63
- })]
64
- }), item.suboption !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
65
- children: item === null || item === void 0 ? void 0 : (_item$suboption = item.suboption) === null || _item$suboption === void 0 ? void 0 : _item$suboption.map(function (subitem) {
66
- return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
67
- className: "sub-option",
68
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.NavLink, {
69
- to: subitem.path,
70
- className: "sub-option-link",
71
- children: trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
72
- children: subitem.title
73
- })
57
+ return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
58
+ bar: trueBar,
59
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.NavLinkOption, {
60
+ to: item.path,
61
+ bar: trueBar,
62
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
63
+ src: item.icon,
64
+ alt: item.title
65
+ }), trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
66
+ children: item.title
67
+ })]
68
+ }), item.suboption !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
69
+ children: item === null || item === void 0 ? void 0 : (_item$suboption = item.suboption) === null || _item$suboption === void 0 ? void 0 : _item$suboption.map(function (subitem) {
70
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
71
+ className: "sub-option",
72
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.NavLinkOption, {
73
+ to: subitem.path,
74
+ className: "sub-option-link",
75
+ bar: trueBar,
76
+ children: trueBar && /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
77
+ children: subitem.title
78
+ })
79
+ })
80
+ });
74
81
  })
75
- });
76
- })
77
- })]
78
- }, index);
82
+ })]
83
+ }, index);
84
+ })
85
+ })]
79
86
  })
80
- })]
81
- })
87
+ }), containerdash]
88
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GlobalStyle, {})]
82
89
  });
83
90
  };
84
91
 
package/dist/components/atoms/VerticalSideMenuMainPage/styles.js CHANGED
@@ -2,50 +2,59 @@
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
4
4
 
5
+ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
6
+
5
7
  Object.defineProperty(exports, "__esModule", {
6
8
  value: true
7
9
  });
8
- exports.Container = void 0;
10
+ exports.NavLinkOption = exports.GlobalStyle = exports.ContainerPrincipal = exports.Container = void 0;
9
11
 
10
12
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
11
13
 
12
- var _styledComponents = _interopRequireDefault(require("styled-components"));
14
+ var _styledComponents = _interopRequireWildcard(require("styled-components"));
15
+
16
+ var _reactRouterDom = require("react-router-dom");
13
17
 
14
- var _templateObject;
18
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
15
19
 
16
- 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: auto;\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 a {\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 letter-spacing: -0.015em;\n color: #fafafa;\n text-decoration: none;\n &.option-link {\n cursor: pointer;\n width: ", "px;\n margin: 5px 0;\n padding-left: ", "px;\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 }\n .option-link:hover {\n background: #e33aa9;\n }\n .sub-option {\n display: flex;\n flex-direction: column;\n padding-left: ", "px;\n height: auto;\n width: auto;\n a {\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 padding-left: 12px;\n height: 25px;\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;\n &::before {\n background-color: #e33aa9;\n }\n }\n }\n }\n }\n }\n"])), function (_ref) {
20
+ 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) {
17
21
  var bar = _ref.bar;
18
- return bar ? 270 : 58;
22
+ return bar ? 260 : 58;
19
23
  }, function (_ref2) {
20
24
  var bar = _ref2.bar;
21
25
  return bar ? 20 : 50;
22
26
  }, function (_ref3) {
23
27
  var bar = _ref3.bar;
24
- return bar === "" ? 145 : 50;
28
+ return bar === "" ? 145 : 40;
25
29
  }, function (_ref4) {
26
30
  var bar = _ref4.bar;
27
- return bar ? 5 : 0;
31
+ return bar ? 10 : 0;
28
32
  }, function (_ref5) {
29
33
  var bar = _ref5.bar;
30
- return bar ? 32 : 38;
31
- }, function (_ref6) {
34
+ return bar ? 28 : 20;
35
+ });
36
+
37
+ exports.Container = Container;
38
+ 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) {
32
39
  var bar = _ref6.bar;
33
- return bar ? "flex-start" : "center";
40
+ return bar ? 32 : 38;
34
41
  }, function (_ref7) {
35
42
  var bar = _ref7.bar;
36
- return bar ? 18 : 100;
43
+ return bar ? "flex-start" : "center";
37
44
  }, function (_ref8) {
38
45
  var bar = _ref8.bar;
39
- return bar ? "160" : "38";
46
+ return bar ? 18 : 100;
40
47
  }, function (_ref9) {
41
48
  var bar = _ref9.bar;
42
- return bar ? 15 : 0;
49
+ return bar ? "163" : "38";
43
50
  }, function (_ref10) {
44
51
  var bar = _ref10.bar;
45
- return bar ? 28 : 20;
46
- }, function (_ref11) {
47
- var bar = _ref11.bar;
48
- return bar ? -4 : -34;
52
+ return bar ? -4 : -16;
49
53
  });
54
+ exports.NavLinkOption = NavLinkOption;
55
+
56
+ var ContainerPrincipal = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n display: flex;\n height: 100vh;\n"])));
50
57
 
51
- exports.Container = Container;
58
+ exports.ContainerPrincipal = ContainerPrincipal;
59
+ var GlobalStyle = (0, _styledComponents.createGlobalStyle)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n@font-face {\n font-family: 'Avenir Next';\n font-style: normal;\n font-weight: normal;\n src:\n url('../../assets/fonts/AvenirNextLTPro-Bold.otf') format('otf'),\n url('../../assets/fonts/AvenirNextLTPro-Regular.otf') format('otf');\n}\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, font, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, figure, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td {\n margin: 0;\n padding: 0;\n border: 0;\n outline: 0;\n font-size: 100%;\n vertical-align: baseline;\n background: transparent;\n}\nbody {\n line-height: 1;\n}\nol, ul {\n list-style: none;\n}\nblockquote, q {\n quotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n content: '';\n content: none;\n}\n:focus {\n outline: 0;\n}\nins {\n text-decoration: none;\n}\ndel {\n text-decoration: line-through;\n}\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\n"])));
60
+ exports.GlobalStyle = GlobalStyle;
package/dist/components/molecules/CustomSelect/index.js CHANGED
@@ -116,7 +116,7 @@ var CustomSelect = function CustomSelect(_ref) {
116
116
  children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
117
117
  className: "button-list",
118
118
  onClick: function onClick() {
119
- return setShowList(true);
119
+ return setShowList(!showList);
120
120
  },
121
121
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
122
122
  children: selectLabel
package/dist/index.js CHANGED
@@ -615,7 +615,7 @@ Object.keys(_index46).forEach(function (key) {
615
615
  });
616
616
  });
617
617
 
618
- var _index47 = require("./components/organisms/ChangePassword/index");
618
+ var _index47 = require("./components/molecules/CustomSelect/index");
619
619
 
620
620
  Object.keys(_index47).forEach(function (key) {
621
621
  if (key === "default" || key === "__esModule") return;
@@ -628,7 +628,7 @@ Object.keys(_index47).forEach(function (key) {
628
628
  });
629
629
  });
630
630
 
631
- var _index48 = require("./components/organisms/Fullplan/index");
631
+ var _index48 = require("./components/organisms/ChangePassword/index");
632
632
 
633
633
  Object.keys(_index48).forEach(function (key) {
634
634
  if (key === "default" || key === "__esModule") return;
@@ -641,7 +641,7 @@ Object.keys(_index48).forEach(function (key) {
641
641
  });
642
642
  });
643
643
 
644
- var _index49 = require("./components/organisms/FullProductNameHeader/index");
644
+ var _index49 = require("./components/organisms/Fullplan/index");
645
645
 
646
646
  Object.keys(_index49).forEach(function (key) {
647
647
  if (key === "default" || key === "__esModule") return;
@@ -654,7 +654,7 @@ Object.keys(_index49).forEach(function (key) {
654
654
  });
655
655
  });
656
656
 
657
- var _index50 = require("./components/organisms/FullTabsMenu/index");
657
+ var _index50 = require("./components/organisms/FullProductNameHeader/index");
658
658
 
659
659
  Object.keys(_index50).forEach(function (key) {
660
660
  if (key === "default" || key === "__esModule") return;
@@ -667,7 +667,7 @@ Object.keys(_index50).forEach(function (key) {
667
667
  });
668
668
  });
669
669
 
670
- var _index51 = require("./components/organisms/ImageDataTable/index");
670
+ var _index51 = require("./components/organisms/FullTabsMenu/index");
671
671
 
672
672
  Object.keys(_index51).forEach(function (key) {
673
673
  if (key === "default" || key === "__esModule") return;
@@ -680,7 +680,7 @@ Object.keys(_index51).forEach(function (key) {
680
680
  });
681
681
  });
682
682
 
683
- var _index52 = require("./components/organisms/ImagePreviewer/index");
683
+ var _index52 = require("./components/organisms/ImageDataTable/index");
684
684
 
685
685
  Object.keys(_index52).forEach(function (key) {
686
686
  if (key === "default" || key === "__esModule") return;
@@ -693,7 +693,7 @@ Object.keys(_index52).forEach(function (key) {
693
693
  });
694
694
  });
695
695
 
696
- var _index53 = require("./components/organisms/ImagesGroup/index");
696
+ var _index53 = require("./components/organisms/ImagePreviewer/index");
697
697
 
698
698
  Object.keys(_index53).forEach(function (key) {
699
699
  if (key === "default" || key === "__esModule") return;
@@ -706,7 +706,7 @@ Object.keys(_index53).forEach(function (key) {
706
706
  });
707
707
  });
708
708
 
709
- var _index54 = require("./components/organisms/InputGroup/index");
709
+ var _index54 = require("./components/organisms/ImagesGroup/index");
710
710
 
711
711
  Object.keys(_index54).forEach(function (key) {
712
712
  if (key === "default" || key === "__esModule") return;
@@ -719,7 +719,7 @@ Object.keys(_index54).forEach(function (key) {
719
719
  });
720
720
  });
721
721
 
722
- var _index55 = require("./components/organisms/ProductImageModal/index");
722
+ var _index55 = require("./components/organisms/InputGroup/index");
723
723
 
724
724
  Object.keys(_index55).forEach(function (key) {
725
725
  if (key === "default" || key === "__esModule") return;
@@ -732,6 +732,19 @@ Object.keys(_index55).forEach(function (key) {
732
732
  });
733
733
  });
734
734
 
735
+ var _index56 = require("./components/organisms/ProductImageModal/index");
736
+
737
+ Object.keys(_index56).forEach(function (key) {
738
+ if (key === "default" || key === "__esModule") return;
739
+ if (key in exports && exports[key] === _index56[key]) return;
740
+ Object.defineProperty(exports, key, {
741
+ enumerable: true,
742
+ get: function get() {
743
+ return _index56[key];
744
+ }
745
+ });
746
+ });
747
+
735
748
  var _ChangePasswordLogin = require("./components/pages/ChangePasswordLogin");
736
749
 
737
750
  Object.keys(_ChangePasswordLogin).forEach(function (key) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "contentoh-components-library",
3
- "version": "21.2.30",
3
+ "version": "21.2.32",
4
4
  "dependencies": {
5
5
  "@aws-amplify/auth": "^4.5.3",
6
6
  "@aws-amplify/datastore": "^3.11.0",
package/src/components/atoms/VerticalSideMenuMainPage/VerticalSideMenuMainPage.stories.js CHANGED
@@ -1,7 +1,6 @@
1
1
  import { VerticalSideMenuMainPage } from "./index";
2
2
  import iconProduct from "../../../assets/images/verticalSideMenuMainPage/iconProduct.svg";
3
3
  import iconGroup from "../../../assets/images/verticalSideMenuMainPage/iconGroup.svg";
4
- import iconLogo from "../../../assets/images/verticalSideMenuMainPage/iconLogo.svg";
5
4
  import iconSpeedometer from "../../../assets/images/verticalSideMenuMainPage/iconSpeedometer.svg";
6
5
  import iconTask from "../../../assets/images/verticalSideMenuMainPage/iconTask.svg";
7
6
 
@@ -15,7 +14,7 @@ const Template = (args) => <VerticalSideMenuMainPage {...args} />;
15
14
  export const VerticalSideMenuMainPageDefault = Template.bind({});
16
15
 
17
16
  VerticalSideMenuMainPageDefault.args = {
18
- menuoption : [
17
+ menuoption: [
19
18
  { icon: iconSpeedometer, path: "/Dashboard", title: "Dashboard" },
20
19
  {
21
20
  icon: iconGroup,
@@ -34,7 +33,7 @@ VerticalSideMenuMainPageDefault.args = {
34
33
  {
35
34
  icon: iconTask,
36
35
  path: "/tasks",
37
- title: "Tareas",
36
+ title: "Content Oh!",
38
37
  },
39
- ]
38
+ ],
40
39
  };
package/src/components/atoms/VerticalSideMenuMainPage/index.js CHANGED
@@ -1,46 +1,63 @@
1
- import { Container } from "./styles";
1
+ import {
2
+ Container,
3
+ NavLinkOption,
4
+ ContainerPrincipal,
5
+ GlobalStyle,
6
+ } from "./styles";
2
7
  import iconLogoContentoh from "../../../assets/images/verticalSideMenuMainPage/iconLogoContentoh.svg";
3
8
  import iconLogo from "../../../assets/images/verticalSideMenuMainPage/iconLogo.svg";
4
9
  import React, { useState } from "react";
5
- import { NavLink } from "react-router-dom";
10
+ import { BrowserRouter as Router } from "react-router-dom";
6
11
 
7
- export const VerticalSideMenuMainPage = ({ menuoption }) => {
12
+ export const VerticalSideMenuMainPage = ({
13
+ menuoption = [],
14
+ containerdash,
15
+ }) => {
8
16
  const [trueBar, setTrueBar] = useState();
9
17
  return (
10
- <Container
11
- className={trueBar}
12
- bar={trueBar}
13
- onMouseOver={() => setTrueBar(true)}
14
- onMouseOut={() => setTrueBar(false)}
15
- >
16
- <div className="navbar-top">
17
- <img
18
- src={trueBar ? iconLogoContentoh : iconLogo}
19
- alt="Logo"
20
- className="logo"
21
- ></img>
22
- <div className="option">
23
- {menuoption.map((item, index) => (
24
- <div key={index}>
25
- <NavLink to={item.path} className="option-link">
26
- <img src={item.icon} alt={item.title}></img>
27
- {trueBar && <p>{item.title}</p>}
28
- </NavLink>
29
- {item.suboption !== undefined && (
30
- <>
31
- {item?.suboption?.map((subitem) => (
32
- <div className="sub-option">
33
- <NavLink to={subitem.path} className="sub-option-link">
34
- {trueBar && <p>{subitem.title}</p>}
35
- </NavLink>
36
- </div>
37
- ))}
38
- </>
39
- )}
18
+ <Router>
19
+ <ContainerPrincipal>
20
+ <Container
21
+ bar={trueBar}
22
+ onMouseOver={() => setTrueBar(true)}
23
+ onMouseOut={() => setTrueBar(false)}
24
+ >
25
+ <div className="navbar-top">
26
+ <img
27
+ src={trueBar ? iconLogoContentoh : iconLogo}
28
+ alt="Logo"
29
+ className="logo"
30
+ ></img>
31
+ <div className="option">
32
+ {menuoption.map((item, index) => (
33
+ <div key={index} bar={trueBar}>
34
+ <NavLinkOption to={item.path} bar={trueBar}>
35
+ <img src={item.icon} alt={item.title}></img>
36
+ {trueBar && <p>{item.title}</p>}
37
+ </NavLinkOption>
38
+ {item.suboption !== undefined && (
39
+ <>
40
+ {item?.suboption?.map((subitem) => (
41
+ <div className="sub-option">
42
+ <NavLinkOption
43
+ to={subitem.path}
44
+ className="sub-option-link"
45
+ bar={trueBar}
46
+ >
47
+ {trueBar && <p>{subitem.title}</p>}
48
+ </NavLinkOption>
49
+ </div>
50
+ ))}
51
+ </>
52
+ )}
53
+ </div>
54
+ ))}
40
55
  </div>
41
- ))}
42
- </div>
43
- </div>
44
- </Container>
56
+ </div>
57
+ </Container>
58
+ {containerdash}
59
+ </ContainerPrincipal>
60
+ <GlobalStyle />
61
+ </Router>
45
62
  );
46
63
  };
package/src/components/atoms/VerticalSideMenuMainPage/styles.js CHANGED
@@ -1,4 +1,6 @@
1
1
  import styled from "styled-components";
2
+ import { BrowserRouter as Router, NavLink } from "react-router-dom";
3
+ import { createGlobalStyle } from "styled-components";
2
4
 
3
5
  export const Container = styled.div`
4
6
  height: 98%;
@@ -6,8 +8,8 @@ export const Container = styled.div`
6
8
  padding: 23px 10px 70px 10px;
7
9
  flex-direction: column;
8
10
  justify-content: space-between;
9
- overflow: auto;
10
- width: ${({ bar }) => (bar ? 270 : 58)}px;
11
+ overflow: none;
12
+ width: ${({ bar }) => (bar ? 260 : 58)}px;
11
13
  border-radius: ${({ bar }) => (bar ? 20 : 50)}px;
12
14
  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
13
15
  scrollbar-width: none;
@@ -24,86 +26,152 @@ export const Container = styled.div`
24
26
  display: flex;
25
27
  flex-direction: column;
26
28
  align-items: flex-start;
27
- margin-top: ${({ bar }) => (bar === "" ? 145 : 50)}%;
28
- padding-left: ${({ bar }) => (bar ? 5 : 0)}px;
29
+ margin-top: ${({ bar }) => (bar === "" ? 145 : 40)}%;
30
+ padding-left: ${({ bar }) => (bar ? 10 : 0)}px;
29
31
  .active {
30
32
  background: #e33aa9;
31
33
  }
32
34
  & + div {
33
35
  margin-top: 5px;
34
36
  }
35
- a {
36
- height: ${({ bar }) => (bar ? 32 : 38)}px;
37
- display: flex;
38
- justify-content: ${({ bar }) => (bar ? "flex-start" : "center")};
39
- border-radius: ${({ bar }) => (bar ? 18 : 100)}px;
40
- align-items: center;
41
- font-family: sans-serif;
42
- font-style: normal;
43
- font-weight: 400;
44
- font-size: 18px;
45
- line-height: 21px;
46
- letter-spacing: -0.015em;
47
- color: #fafafa;
48
- text-decoration: none;
49
- &.option-link {
50
- cursor: pointer;
51
- width: ${({ bar }) => (bar ? "160" : "38")}px;
52
- margin: 5px 0;
53
- padding-left: ${({ bar }) => (bar ? 15 : 0)}px;
54
- }
55
- p {
56
- cursor: pointer;
57
- margin: 0%;
58
- pointer-events: none;
59
- }
60
- img {
61
- width: 22px;
62
- & + * {
63
- margin-left: 12px;
64
- }
65
- }
66
- }
67
- .option-link:hover {
68
- background: #e33aa9;
69
- }
70
37
  .sub-option {
71
38
  display: flex;
72
39
  flex-direction: column;
73
40
  padding-left: ${({ bar }) => (bar ? 28 : 20)}px;
74
41
  height: auto;
75
42
  width: auto;
76
- a {
77
- display: flex;
78
- justify-content: flex-start;
79
- text-decoration: none;
80
- position: relative;
81
- font-size: 13px;
82
- border-left: 1px solid #f0eef2;
83
- border-radius: 0;
84
- color: #f0eef2;
85
- padding-top: 14px;
86
- padding-left: 12px;
87
- height: 25px;
88
- &::before {
89
- border-left: 1px solid #e33aa9;
90
- width: 10px;
91
- content: "";
92
- border-radius: 50%;
93
- height: 10px;
94
- background-color: white;
95
- position: absolute;
96
- bottom: 0;
97
- left: ${({ bar }) => (bar ? -4 : -34)}%;
98
- }
99
- &.active {
100
- background: none;
101
- &::before {
102
- background-color: #e33aa9;
103
- }
104
- }
105
- }
106
43
  }
107
44
  }
108
45
  }
109
46
  `;
47
+
48
+ export const NavLinkOption = styled(NavLink)`
49
+ height: ${({ bar }) => (bar ? 32 : 38)}px;
50
+ display: flex;
51
+ justify-content: ${({ bar }) => (bar ? "flex-start" : "center")};
52
+ border-radius: ${({ bar }) => (bar ? 18 : 100)}px;
53
+ align-items: center;
54
+ font-family: sans-serif;
55
+ font-style: normal;
56
+ font-weight: 400;
57
+ font-size: 18px;
58
+ line-height: 21px;
59
+ margin: 5px 0;
60
+ letter-spacing: -0.015em;
61
+ color: #fafafa;
62
+ text-decoration: none;
63
+ cursor: pointer;
64
+ width: ${({ bar }) => (bar ? "163" : "38")}px;
65
+ padding: 0 17px;
66
+ &:hover {
67
+ background: #e33aa9;
68
+ }
69
+ p {
70
+ cursor: pointer;
71
+ margin: 0%;
72
+ pointer-events: none;
73
+ }
74
+ img {
75
+ width: 22px;
76
+ & + * {
77
+ margin-left: 12px;
78
+ }
79
+ }
80
+ &.sub-option-link {
81
+ display: flex;
82
+ justify-content: flex-start;
83
+ text-decoration: none;
84
+ position: relative;
85
+ font-size: 13px;
86
+ border-left: 1px solid #f0eef2;
87
+ border-radius: 0;
88
+ color: #f0eef2;
89
+ padding-top: 14px;
90
+ height: 25px;
91
+ margin: 0;
92
+ padding-left: 12px;
93
+ &::before {
94
+ border-left: 1px solid #e33aa9;
95
+ width: 10px;
96
+ content: "";
97
+ border-radius: 50%;
98
+ height: 10px;
99
+ background-color: white;
100
+ position: absolute;
101
+ bottom: 0;
102
+ left: ${({ bar }) => (bar ? -4 : -16)}%;
103
+ }
104
+ &.active {
105
+ background: none !important;
106
+ &::before {
107
+ background-color: #e33aa9;
108
+ }
109
+ }
110
+ &:hover {
111
+ background: none;
112
+ }
113
+ }
114
+ `;
115
+
116
+ export const ContainerPrincipal = styled.div`
117
+ width: 100%;
118
+ display: flex;
119
+ height: 100vh;
120
+ `;
121
+
122
+ export const GlobalStyle = createGlobalStyle`
123
+ @font-face {
124
+ font-family: 'Avenir Next';
125
+ font-style: normal;
126
+ font-weight: normal;
127
+ src:
128
+ url('../../assets/fonts/AvenirNextLTPro-Bold.otf') format('otf'),
129
+ url('../../assets/fonts/AvenirNextLTPro-Regular.otf') format('otf');
130
+ }
131
+
132
+ html, body, div, span, applet, object, iframe,
133
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
134
+ a, abbr, acronym, address, big, cite, code,
135
+ del, dfn, em, font, img, ins, kbd, q, s, samp,
136
+ small, strike, strong, sub, sup, tt, var,
137
+ b, u, i, center,
138
+ dl, dt, dd, ol, ul, li,
139
+ fieldset, figure, form, label, legend,
140
+ table, caption, tbody, tfoot, thead, tr, th, td {
141
+ margin: 0;
142
+ padding: 0;
143
+ border: 0;
144
+ outline: 0;
145
+ font-size: 100%;
146
+ vertical-align: baseline;
147
+ background: transparent;
148
+ }
149
+ body {
150
+ line-height: 1;
151
+ }
152
+ ol, ul {
153
+ list-style: none;
154
+ }
155
+ blockquote, q {
156
+ quotes: none;
157
+ }
158
+ blockquote:before, blockquote:after,
159
+ q:before, q:after {
160
+ content: '';
161
+ content: none;
162
+ }
163
+ :focus {
164
+ outline: 0;
165
+ }
166
+ ins {
167
+ text-decoration: none;
168
+ }
169
+ del {
170
+ text-decoration: line-through;
171
+ }
172
+ table {
173
+ border-collapse: collapse;
174
+ border-spacing: 0;
175
+ }
176
+
177
+ `;
package/src/components/molecules/CustomSelect/index.js CHANGED
@@ -65,7 +65,7 @@ export const CustomSelect = ({
65
65
 
66
66
  return (
67
67
  <Container id={customSelectId}>
68
- <div className="button-list" onClick={() => setShowList(true)}>
68
+ <div className="button-list" onClick={() => setShowList(!showList)}>
69
69
  <p>{selectLabel}</p>
70
70
  <div className="arrow-item">&#9664;</div>
71
71
  </div>
package/src/index.js CHANGED
@@ -48,6 +48,7 @@ export * from "./components/molecules/TabsMenu/index";
48
48
  export * from "./components/molecules/TagAndInput/index";
49
49
  export * from "./components/molecules/VerificationCodeResetPasswordLogin/index";
50
50
  export * from "./components/molecules/RetailerSelector/index";
51
+ export * from "./components/molecules/CustomSelect/index";
51
52
 
52
53
  //organisms
53
54
  export * from "./components/organisms/ChangePassword/index";