trepur_components 0.1.24 → 0.1.25

package/dist/components/Nav/Nav.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports._Nav = exports.NavWithSearchAndProfile = exports.NavWithSearch = exports.NavWithProfile = exports.NavAligned = void 0;
+exports.default = exports._NavWithColors = exports._Nav = exports.NavWithSearchAndProfile = exports.NavWithSearch = exports.NavWithProfile = exports.NavAlignedWithSearchAndProfile = exports.NavAlignedWithSearch = exports.NavAlignedWithProfile = exports.NavAligned = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -35,9 +35,7 @@ const links = [{
 var _default = {
   title: 'Components/Nav',
   argTypes: {},
-  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-4"
-  }, story())],
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", null, story())],
   parameters: {
     readme: {
       sidebar: _README.default
@@ -50,20 +48,52 @@ const _Nav = args => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     links: links,
     navPosition: "1",
-    navClass: "bg-brand-primary pb-4 pt-2",
-    navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
-    logoClass: "py-4",
-    logoImage: _logoWhite.default
+    logoImage: _logoWhite.default,
+    icon: _user.default,
+    navItemRounded: false
   });
 };
 
 exports._Nav = _Nav;
 
+const _NavWithColors = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links,
+    navPosition: "1" //center
+    ,
+    logoImage: _logoWhite.default,
+    icon: _user.default,
+    navItemBorderColor: "white",
+    navItemTextColor: "white",
+    navItemBgColor: "#38B6FF",
+    hoverNavItemBorderColor: "#38B6FF",
+    hoverNavItemTextColor: "#38B6FF",
+    hoverNavItemBgColor: "white",
+    bgColor: "#38B6FF",
+    navItemBordered: true,
+    navItemRounded: true,
+    showProfile: false,
+    showSearch: false,
+    alignNavAndLogo: true,
+    navItemLinkClassNames: "py-1",
+    mobileNavItemBordered: false,
+    mobileNavItemRounded: true,
+    mobileNavItemLinkClassNames: "",
+    mobileNavItemClassNames: "",
+    mobileNavButtonBgColor: "#38B6FF",
+    mobileNavButtonColor: "white",
+    hoverMobileNavButtonBgColor: "white",
+    hoverMobileNavButtonColor: "#38B6FF"
+  });
+};
+
+exports._NavWithColors = _NavWithColors;
+
 const NavWithSearch = () => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     links: links,
     navPosition: "1",
-    navClass: "bg-brand-primary pb-4 pt-2",
+    navClass: "bg-brand-primary",
     navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
     logoClass: "py-4",
     showSearch: true,
@@ -77,7 +107,7 @@ const NavWithProfile = () => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     links: links,
     navPosition: "1",
-    navClass: "bg-brand-primary pb-4 pt-2",
+    navClass: "bg-brand-primary",
     navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
     logoClass: "py-4",
     showProfile: true,
@@ -92,12 +122,13 @@ const NavWithSearchAndProfile = () => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     links: links,
     navPosition: "1",
-    navClass: "bg-brand-primary pb-4 pt-2",
+    navClass: "bg-brand-primary",
     navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
     logoClass: "py-4",
     showProfile: true,
     showSearch: true,
-    logoImage: _logoWhite.default
+    logoImage: _logoWhite.default,
+    icon: _user.default
   });
 };
 
@@ -107,12 +138,60 @@ const NavAligned = () => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     links: links,
     navPosition: "1",
-    navClass: "bg-brand-primary pb-4 pt-2",
-    navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
-    logoClass: "py-4",
+    navClass: "bg-brand-primary",
+    navLinkClass: "hover:text-white hover:bg-black",
     alignNavAndLogo: true,
-    logoImage: _logoWhite.default
+    logoImage: _logoWhite.default,
+    icon: _user.default
+  });
+};
+
+exports.NavAligned = NavAligned;
+
+const NavAlignedWithSearch = () => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links,
+    navPosition: "1",
+    navClass: "bg-brand-primary",
+    navLinkClass: "hover:text-white hover:bg-black",
+    alignNavAndLogo: true,
+    logoImage: _logoWhite.default,
+    icon: _user.default,
+    showProfile: false,
+    showSearch: true
+  });
+};
+
+exports.NavAlignedWithSearch = NavAlignedWithSearch;
+
+const NavAlignedWithProfile = () => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links,
+    navPosition: "1",
+    navClass: "bg-brand-primary",
+    navLinkClass: "hover:text-white hover:bg-black",
+    alignNavAndLogo: true,
+    logoImage: _logoWhite.default,
+    icon: _user.default,
+    showProfile: true,
+    showSearch: false
+  });
+};
+
+exports.NavAlignedWithProfile = NavAlignedWithProfile;
+
+const NavAlignedWithSearchAndProfile = () => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    links: links,
+    navPosition: "1",
+    navClass: "bg-brand-primary",
+    navLinkClass: "hover:text-white hover:bg-black",
+    alignNavAndLogo: true,
+    logoImage: _logoWhite.default,
+    icon: _user.default,
+    showProfile: true,
+    showSearch: true
   });
 };
 
-exports.NavAligned = NavAligned;
+exports.NavAlignedWithSearchAndProfile = NavAlignedWithSearchAndProfile;

package/dist/components/Nav/README.md

@@ -23,3 +23,23 @@ A personalisable naviagtion bar, suitable for desktop and mobile
 `showSearch={boolean} (default=null)`
 `showProfile={boolean} (default=null)`
 `icon={string} (default=null)`
+`logoImage={string} (default=null)`
+`navItemBorderColor={string} (default=null)`
+`navItemTextColor={string} (default=null)`
+`navItemBgColor={string} (default=null)`
+`hoverNavItemBorderColor={string} (default=null)`
+`hoverNavItemTextColor={string} (default=null)`
+`hoverNavItemBgColor={string} (default=null)`
+`bgColor={string} (default=null)`
+`navItemBordered={string} (default=null)`
+`navItemRounded={string} (default=null)`
+`navItemClassNames={string} (default=null)`
+`navItemLinkClassNames={string} (default=null)`
+`mobileNavItemBordered={string} (default=null)`
+`mobileNavItemRounded={string} (default=null)`
+`mobileNavItemClassNames={string} (default=null)`
+`mobileNavItemLinkClassNames={string} (default=null)`
+`mobileNavButtonBgColor={string} (default=null)`
+`mobileNavButtonColor={string} (default=null)`
+`hoverMobileNavButtonBgColor={string} (default=null)`
+`hoverMobileNavButtonColor={string} (default=null)`

package/dist/components/Nav/index.js

@@ -13,6 +13,8 @@ var _index = _interopRequireDefault(require("../Profile/index"));
 
 var _index2 = _interopRequireDefault(require("../Search/index"));
 
+var _index3 = _interopRequireDefault(require("../NavItem/index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -30,7 +32,26 @@ const Header = _ref => {
     showSearch,
     showProfile,
     icon,
-    logoImage
+    logoImage,
+    navItemBorderColor,
+    navItemTextColor,
+    navItemBgColor,
+    hoverNavItemBorderColor,
+    hoverNavItemTextColor,
+    hoverNavItemBgColor,
+    bgColor,
+    navItemBordered,
+    navItemRounded,
+    navItemClassNames,
+    navItemLinkClassNames,
+    mobileNavItemBordered,
+    mobileNavItemRounded,
+    mobileNavItemClassNames,
+    mobileNavItemLinkClassNames,
+    mobileNavButtonBgColor,
+    mobileNavButtonColor,
+    hoverMobileNavButtonBgColor,
+    hoverMobileNavButtonColor
   } = _ref;
   const user = icon ? icon : '';
   const [mobileMenuState, setmobileMenuState] = (0, _react.useState)(false);
@@ -47,14 +68,19 @@ const Header = _ref => {
     name: 'PROFILE ITEM 4',
     reference: '/'
   }];
-  let combinedLogoClass = logoClass + ' hidden sm:inline-flex flex-1 flex items-center justify-center sm:items-stretch ';
+  let backgroundColor = bgColor ? bgColor : 'grey';
+  let containsSearchOrProfile = showSearch ? showSearch : showProfile;
+  let flexType = containsSearchOrProfile ? 'flex-col w-full' : 'flex-1 ';
+  let combinedLogoClass = logoClass;
+  let navItemTopPadding = 'pt-2';
   let combinedMobileLogoClass = logoClass + ' sm:hidden block flex-1 flex items-center justify-center sm:items-stretch ';
-  let linkContainerClass = 'flex-1 flex items-center justify-center sm:items-stretch ';
+  let linkContainerClass = 'flex-1 flex ';
+  let logoHeight = 16;
 
-  if (alignNavAndLogo) {
-    combinedLogoClass = ' hidden sm:inline-flex pl-16 pt-16 absolute inset-y-0 h-8 left-0 flex items-center';
+  if (!alignNavAndLogo) {
+    combinedLogoClass += ' flex justify-center ';
   } else {
-    combinedLogoClass += ' flex-1';
+    navItemTopPadding = containsSearchOrProfile ? '' : 'pt-' + logoHeight / 4;
   }
 
   if (navPosition === '0') {
@@ -67,23 +93,48 @@ const Header = _ref => {
 
   if (navPosition === '2') {
     linkContainerClass += 'sm:justify-end';
-  }
+  } //---------- Styling ---------------
+
+
+  const [styles, setStyles] = (0, _react.useState)({
+    'background-color': mobileNavButtonBgColor ? mobileNavButtonBgColor : 'white',
+    color: mobileNavButtonColor ? mobileNavButtonColor : 'black'
+  });
+
+  const setHoverState = isHovering => {
+    if (isHovering) {
+      setStyles({
+        'background-color': hoverMobileNavButtonBgColor ? hoverMobileNavButtonBgColor : 'black',
+        color: hoverMobileNavButtonColor ? hoverMobileNavButtonColor : 'white'
+      });
+    } else {
+      setStyles({
+        'background-color': mobileNavButtonBgColor ? mobileNavButtonBgColor : 'white',
+        color: mobileNavButtonColor ? mobileNavButtonColor : 'black'
+      });
+    }
+  }; //-----------------------------------
+
 
   return /*#__PURE__*/_react.default.createElement("nav", {
+    style: {
+      'background-color': backgroundColor
+    },
     id: "nav",
-    className: navClass
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "px-4"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: 'p-2 ' + navClass
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     id: "sm-nav",
     className: "relative flex items-center justify-between h-16 sm:hidden"
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "nav-collapse-btn-wrapper",
     className: "absolute inset-y-0 left-0 flex items-center"
   }, /*#__PURE__*/_react.default.createElement("button", {
+    style: styles,
+    onMouseOver: () => setHoverState(true),
+    onMouseOut: () => setHoverState(false),
     onClick: () => setmobileMenuState(!mobileMenuState),
     type: "button",
-    className: "inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white",
+    className: "inline-flex items-center justify-center p-2 rounded-md focus:ring-2 focus:ring-inset focus:ring-white",
     "aria-controls": "mobile-menu",
     "aria-expanded": "false"
   }, /*#__PURE__*/_react.default.createElement("svg", {
@@ -112,67 +163,96 @@ const Header = _ref => {
     src: logoImage,
     alt: " Logo "
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    clas: true,
-    Name: "hidden sm:block pt-2 items-center justify-between sm:items-stretch text-center"
+    className: "hidden sm:block items-center justify-between sm:items-stretch text-center"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex"
+    className: alignNavAndLogo ? 'flex' : ''
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "logo",
     className: combinedLogoClass
   }, /*#__PURE__*/_react.default.createElement("img", {
-    className: "h-16 w-auto",
+    className: "h-" + logoHeight,
     src: logoImage,
     alt: " Logo "
-  })), showSearch && /*#__PURE__*/_react.default.createElement(_index2.default, {
-    className: "hidden sm:inline-flex pl-4 pt-8 h-8 flex items-center"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'flex ' + flexType
+  }, containsSearchOrProfile && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex float-right"
+  }, showSearch && /*#__PURE__*/_react.default.createElement(_index2.default, {
+    placeholder: "search"
   }), showProfile && /*#__PURE__*/_react.default.createElement(_index.default, {
     profileLinks: profileLinks,
-    userImage: user
-  })), /*#__PURE__*/_react.default.createElement("div", {
-    id: "nav-container",
+    userImage: user,
+    classNames: "ml-2"
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    id: "nav-items-container",
     className: linkContainerClass
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "nav-block",
-    className: "hidden sm:inline-flex sm:ml-6"
+    className: "hidden sm:inline-flex"
   }, /*#__PURE__*/_react.default.createElement("ul", {
     id: "nav-list",
-    className: "list-none mx-auto flex flex-1"
+    className: 'flex ' + navItemTopPadding
   }, links && links.map(link => {
-    return /*#__PURE__*/_react.default.createElement("li", {
-      key: link.name,
-      className: "flex px-4",
-      onClick: link.onClick
-    }, /*#__PURE__*/_react.default.createElement("a", {
-      className: navLinkClass,
-      href: link.reference
-    }, link.name));
-  })))))), mobileMenuState && /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/_react.default.createElement(_index3.default, {
+      name: link.name,
+      url: link.reference,
+      borderColor: navItemBorderColor,
+      textColor: navItemTextColor,
+      bgColor: navItemBgColor,
+      hoverBorderColor: hoverNavItemBorderColor,
+      hoverTextColor: hoverNavItemTextColor,
+      hoverBgColor: hoverNavItemBgColor,
+      bordered: navItemBordered,
+      rounded: navItemRounded,
+      classNames: navItemClassNames,
+      linkClassNames: navItemLinkClassNames
+    });
+  })))))))), mobileMenuState && /*#__PURE__*/_react.default.createElement("div", {
     className: "sm:hidden",
     id: "mobile-menu"
-  }, showProfile && /*#__PURE__*/_react.default.createElement("img", {
-    className: "ml-3 h-8 w-8 rounded-full",
+  }, showSearch && /*#__PURE__*/_react.default.createElement(_index2.default, {
+    className: "ml-4 py-4 flex flex-1",
+    placeholder: 'Search'
+  }), showProfile && /*#__PURE__*/_react.default.createElement("img", {
+    className: "ml-8 h-8 w-8 rounded-full",
     src: user,
     alt: ""
-  }), showSearch && /*#__PURE__*/_react.default.createElement(_index2.default, {
-    className: "flex flex-1"
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "px-2 pt-2 pb-3 space-y-1"
   }, links && links.map(link => {
-    return /*#__PURE__*/_react.default.createElement("a", {
-      key: link.name,
-      href: link.reference,
-      className: "text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium",
-      "aria-current": "page"
-    }, link.name);
+    return /*#__PURE__*/_react.default.createElement(_index3.default, {
+      name: link.name,
+      url: link.reference,
+      borderColor: navItemBorderColor,
+      textColor: navItemTextColor,
+      bgColor: navItemBgColor,
+      hoverBorderColor: hoverNavItemBorderColor,
+      hoverTextColor: hoverNavItemTextColor,
+      hoverBgColor: hoverNavItemBgColor,
+      bordered: mobileNavItemBordered,
+      rounded: mobileNavItemRounded,
+      classNames: mobileNavItemClassNames,
+      linkClassNames: mobileNavItemLinkClassNames
+    });
+  }), /*#__PURE__*/_react.default.createElement("hr", {
+    style: {
+      'color': navItemTextColor
+    }
   }), showProfile && profileLinks && profileLinks.map(link => {
-    return /*#__PURE__*/_react.default.createElement("a", {
-      key: link.name,
-      href: link.reference,
-      className: "text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium",
-      role: "menuitem",
-      tabindex: "-1",
-      id: "user-menu-item-0"
-    }, link.name);
+    return /*#__PURE__*/_react.default.createElement(_index3.default, {
+      name: link.name,
+      url: link.reference,
+      borderColor: navItemBorderColor,
+      textColor: navItemTextColor,
+      bgColor: navItemBgColor,
+      hoverBorderColor: hoverNavItemBorderColor,
+      hoverTextColor: hoverNavItemTextColor,
+      hoverBgColor: hoverNavItemBgColor,
+      bordered: mobileNavItemBordered,
+      rounded: mobileNavItemRounded,
+      classNames: mobileNavItemClassNames,
+      linkClassNames: mobileNavItemLinkClassNames
+    });
   }))));
 };
 

package/dist/components/NavItem/NavItem.stories.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withStyles = exports.default = exports._NavItem = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/NavItem',
+  argTypes: {
+    name: {
+      name: 'item Text',
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'NavItem 1',
+      table: {
+        category: 'Standard',
+        subcategory: 'Content'
+      }
+    },
+    url: {
+      name: 'url reference',
+      control: {
+        type: 'text'
+      },
+      defaultValue: '/',
+      table: {
+        category: 'Standard',
+        subcategory: 'Content'
+      }
+    },
+    bgColor: {
+      name: 'Background Color',
+      control: {
+        type: 'color'
+      },
+      table: {
+        category: 'Standard',
+        subcategory: 'Colors'
+      }
+    },
+    textColor: {
+      name: 'Text Color',
+      control: {
+        type: 'color'
+      },
+      table: {
+        category: 'Standard',
+        subcategory: 'Colors'
+      }
+    },
+    borderColor: {
+      name: 'Border Color',
+      control: {
+        type: 'color'
+      },
+      table: {
+        category: 'Standard',
+        subcategory: 'Colors'
+      }
+    },
+    hoverBgColor: {
+      name: 'Background Color',
+      control: {
+        type: 'color'
+      },
+      table: {
+        category: 'Hover',
+        subcategory: 'Colors'
+      }
+    },
+    hoverTextColor: {
+      name: 'Text Color',
+      control: {
+        type: 'color'
+      },
+      table: {
+        category: 'Hover',
+        subcategory: 'Colors'
+      }
+    },
+    hoverBorderColor: {
+      name: 'Border Color',
+      control: {
+        type: 'color'
+      },
+      table: {
+        category: 'Hover',
+        subcategory: 'Colors'
+      }
+    }
+  },
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _NavItem = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    name: args.name,
+    url: args.url,
+    onClick: (0, _addonActions.action)('NavItem-click'),
+    bgColor: args.bgColor,
+    textColor: args.textColor,
+    borderColor: args.borderColor,
+    hoverTextColor: args.hoverTextColor,
+    hoverBgColor: args.hoverBgColor,
+    hoverBorderColor: args.hoverBorderColor,
+    bordered: true,
+    rounded: true,
+    linkClassNames: "py-1"
+  });
+};
+
+exports._NavItem = _NavItem;
+
+const withStyles = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    name: args.name,
+    url: args.url,
+    onClick: (0, _addonActions.action)('NavItem-click'),
+    bgColor: args.bgColor,
+    textColor: args.textColor,
+    borderColor: args.borderColor,
+    hoverTextColor: args.hoverTextColor,
+    hoverBgColor: args.hoverBgColor,
+    hoverBorderColor: args.hoverBorderColor
+  });
+};
+
+exports.withStyles = withStyles;

package/dist/components/NavItem/README.md

@@ -0,0 +1,36 @@
+# Button
+
+A basic button
+
+## Example
+
+```
+<Button 
+    ctaText={args.text} 
+    bgColor={args.bgColor}
+    textColor={args.textColor}
+    borderColor={args.borderColor}
+    hoverCtaText={args.hoverText}
+    hoverTextColor={args.hoverTextColor}
+    hoverBgColor={args.hoverBgColor}
+    hoverBorderColor={args.hoverBorderColor}
+    onClick={action('button-click')}
+/>
+```
+
+## Parameters
+`ctaText={string} (default=null)`
+`className={string} (default=null)`
+`onClick={func} (default=null)`
+`leftIcon={string} (default=null)`
+`rightIcon={string} (default=null)`
+`centerIcon={string} (default=null)`
+`bgColor={string} (default=null)`
+`textColor={string} (default=null)`
+`borderColor={string} (default=null)`
+`hoverBgColor={string} (default=null)`
+`hoverTextColor={string} (default=null)`
+`hoverBorderColor={string} (default=null)`
+`hoverCtaText={string} (default=null)`
+`url={string} (default=null)`
+`buttonType={string} (default=null)`

package/dist/components/NavItem/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const NavItem = _ref => {
+  let {
+    classNames,
+    linkClassNames,
+    name,
+    url,
+    onClick,
+    borderColor,
+    textColor,
+    bgColor,
+    hoverBorderColor,
+    hoverTextColor,
+    hoverBgColor,
+    bordered,
+    rounded
+  } = _ref;
+  let linkClasses = linkClassNames ? linkClassNames : ''; //---------- Styling ---------------
+
+  const [styles, setStyles] = (0, _react.useState)({
+    'backgroundColor': bgColor ? bgColor : 'white',
+    color: textColor ? textColor : 'black',
+    'borderColor': borderColor ? borderColor : 'black'
+  });
+  const [hovering, setHovering] = (0, _react.useState)(false);
+
+  const setHoverState = isHovering => {
+    if (isHovering) {
+      setHovering(true);
+      setStyles({
+        'backgroundColor': hoverBgColor ? hoverBgColor : 'black',
+        color: hoverTextColor ? hoverTextColor : 'white',
+        'borderColor': hoverBorderColor ? hoverBorderColor : 'black'
+      });
+    } else {
+      setHovering(false);
+      setStyles({
+        'backgroundColor': bgColor ? bgColor : 'white',
+        color: textColor ? textColor : 'black',
+        'borderColor': borderColor ? borderColor : 'black'
+      });
+    }
+  }; //-----------------------------------
+
+
+  let borderClass = bordered ? ' border ' : '';
+  let round = rounded ? ' rounded-lg ' : '';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'w-32 list-none ' + classNames
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: url
+  }, /*#__PURE__*/_react.default.createElement("li", {
+    style: styles,
+    onMouseOver: () => setHoverState(true),
+    onMouseOut: () => setHoverState(false),
+    key: name,
+    className: "px-4 mx-2 " + linkClasses + borderClass + round,
+    onClick: onClick
+  }, name)));
+};
+
+var _default = NavItem;
+exports.default = _default;

package/dist/components/Profile/index.js

@@ -18,14 +18,15 @@ const Profile = _ref => {
     profileLinks,
     alignRight,
     alignLeft,
-    userImage
+    userImage,
+    classNames
   } = _ref;
   let profileAlignment = alignRight ? ' float-right ' : alignLeft ? ' float-left ' : '';
   let dropdownAlignement = alignRight ? ' mt-16 -mr-16 ' : alignLeft ? ' mt-16 -ml-16 ' : '';
   let dropdownTextAlignement = alignRight ? '  ' : alignLeft ? '  ' : 'text-center';
   const [profileState, setProfileState] = (0, _react.useState)(false);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "text-center"
+    className: 'text-center ' + classNames
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "hidden sm:inline-flex  inset-y-0 " + profileAlignment
   }, /*#__PURE__*/_react.default.createElement("button", {

package/package.json

@@ -2,7 +2,7 @@
   "name": "trepur_components",
   "description": "component lib",
   "author": "trepur_ttenneb",
-  "version": "0.1.24",
+  "version": "0.1.25",
   "private": false,
   "keywords": [
     "react",