trepur_components 0.1.21 → 0.1.25

package/dist/components/Button/index.js

@@ -60,9 +60,9 @@ const Button = _ref => {
 
 
   const [styles, setStyles] = (0, _react.useState)({
-    'background-color': bgColor ? bgColor : 'white',
+    'backgroundColor': bgColor ? bgColor : 'white',
     color: textColor ? textColor : 'black',
-    'border-color': borderColor ? borderColor : 'black'
+    'borderColor': borderColor ? borderColor : 'black'
   });
   const [hovering, setHovering] = (0, _react.useState)(false);
 
@@ -70,16 +70,16 @@ const Button = _ref => {
     if (isHovering) {
       setHovering(true);
       setStyles({
-        'background-color': hoverBgColor ? hoverBgColor : 'black',
+        'backgroundColor': hoverBgColor ? hoverBgColor : 'black',
         color: hoverTextColor ? hoverTextColor : 'white',
-        'border-color': hoverBorderColor ? hoverBorderColor : 'black'
+        'borderColor': hoverBorderColor ? hoverBorderColor : 'black'
       });
     } else {
       setHovering(false);
       setStyles({
-        'background-color': bgColor ? bgColor : 'white',
+        'backgroundColor': bgColor ? bgColor : 'white',
         color: textColor ? textColor : 'black',
-        'border-color': borderColor ? borderColor : 'black'
+        'borderColor': borderColor ? borderColor : 'black'
       });
     }
   }; //-----------------------------------

package/dist/components/Card/Card.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports._Card = exports.ImageCard = exports.CardWithText = exports.CardWithSlideButton = exports.CardWithImageBelowTitle = exports.CardWithImage = exports.CardWithButton = exports.CardTitleRight = exports.CardTitleLeft = exports.CardTitleBold = exports.CardRounded = void 0;
+exports.lotsOfCards = exports.default = exports._Card = exports.ImageCard = exports.CardWithText = exports.CardWithSlideButton = exports.CardWithImageBelowTitle = exports.CardWithImage = exports.CardWithButton = exports.CardTitleRight = exports.CardTitleLeft = exports.CardTitleBold = exports.CardRounded = void 0;
 
 require("core-js/modules/es.symbol.description.js");
 
@@ -273,6 +273,40 @@ const CardRounded = args => {
 
 exports.CardRounded = CardRounded;
 
+const lotsOfCards = args => {
+  const options = ['300', '400', '500'];
+  let cards = [];
+  let width, height;
+
+  for (let i = 0; i < 8; i++) {
+    width = options[Math.floor(Math.random() * (2 + 0))];
+    height = options[Math.floor(Math.random() * (2 + 0))];
+    cards.push( /*#__PURE__*/_react.default.createElement(_index.default, {
+      id: 'card_' + i,
+      classNames: "m-2",
+      title: args.title,
+      titleClass: "text-center font-bold",
+      subTitle: args.subTitle,
+      extraText: args.extraText,
+      description: args.description,
+      image: 'https://picsum.photos/' + width + '/' + height,
+      hasCta: args.hasCta,
+      ctaText: args.ctaText,
+      imageBelowTitle: args.imageBelowTitle,
+      rounded: true,
+      bordered: true,
+      buttonType: "internal",
+      url: "/?path=/story/components-card--lots-of-cards"
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "grid grid-cols-4 grid-flow-row"
+  }, cards);
+};
+
+exports.lotsOfCards = lotsOfCards;
+
 const ImageCard = args => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     image: "https://picsum.photos/500/300",

package/dist/components/Card/index.js

@@ -53,14 +53,18 @@ const Card = _ref => {
   let titleClasses = titlePosition + titleFont;
   let imageWrapperClass = imageBelowTitle ? ' order-2 ' : '';
   let classes = classNames ? classNames : '';
-  let imageClassList = imageBelowTitle ? '' : roundedImage;
+  let imageClassList = ' w-full ';
+  imageClassList += imageBelowTitle && imageBelowTitle ? '' : roundedImage;
   classList += border + classes;
   imageWrapperClass += roundedImage;
   classList += roundedCard;
   imageClassList += imageClass;
   return /*#__PURE__*/_react.default.createElement("div", {
+    key: id,
     id: id,
     className: classList
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "card-content flex-1"
   }, image && /*#__PURE__*/_react.default.createElement("div", {
     className: imageWrapperClass && imageWrapperClass
   }, /*#__PURE__*/_react.default.createElement("img", {
@@ -79,7 +83,7 @@ const Card = _ref => {
     className: descriptionClass && descriptionClass
   }, description), extraText && /*#__PURE__*/_react.default.createElement("h2", {
     className: extraTextClass && extraTextClass
-  }, extraText)), hasCta && /*#__PURE__*/_react.default.createElement("div", {
+  }, extraText))), hasCta && /*#__PURE__*/_react.default.createElement("div", {
     className: btnClass
   }, buttonStyle === 'slide' ? /*#__PURE__*/_react.default.createElement(_index2.default, {
     className: "w-full",

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"));
 
@@ -15,6 +15,8 @@ require("../../../index.css");
 
 var _user = _interopRequireDefault(require("../../Assets/Images/user.jpeg"));
 
+var _logoWhite = _interopRequireDefault(require("../../Assets/Images/logoWhite.png"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const links = [{
@@ -33,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
@@ -48,22 +48,56 @@ const _Nav = args => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     links: links,
     navPosition: "1",
-    navClass: "bg-brand-light-grey 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,
+    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-light-grey 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
+    showSearch: true,
+    logoImage: _logoWhite.default
   });
 };
 
@@ -73,11 +107,12 @@ const NavWithProfile = () => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     links: links,
     navPosition: "1",
-    navClass: "bg-brand-light-grey 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,
-    icon: _user.default
+    icon: _user.default,
+    logoImage: _logoWhite.default
   });
 };
 
@@ -87,11 +122,13 @@ const NavWithSearchAndProfile = () => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     links: links,
     navPosition: "1",
-    navClass: "bg-brand-light-grey 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
+    showSearch: true,
+    logoImage: _logoWhite.default,
+    icon: _user.default
   });
 };
 
@@ -101,11 +138,60 @@ const NavAligned = () => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
     links: links,
     navPosition: "1",
-    navClass: "bg-brand-light-grey pb-4 pt-2",
-    navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
-    logoClass: "py-4",
-    alignNavAndLogo: true
+    navClass: "bg-brand-primary",
+    navLinkClass: "hover:text-white hover:bg-black",
+    alignNavAndLogo: true,
+    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); }
@@ -29,7 +31,27 @@ const Header = _ref => {
     logoClass,
     showSearch,
     showProfile,
-    icon
+    icon,
+    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);
@@ -46,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') {
@@ -66,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", {
@@ -107,71 +159,100 @@ const Header = _ref => {
     id: "logo",
     className: combinedMobileLogoClass
   }, /*#__PURE__*/_react.default.createElement("img", {
-    className: "h-8 w-auto",
-    src: "logo.png",
+    className: "h-16 w-auto",
+    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-8 w-auto",
-    src: "logo.png",
+    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/dist/index.js

@@ -51,12 +51,6 @@ Object.defineProperty(exports, "CardImageLinkList", {
     return _CardImageLinkList.default;
   }
 });
-Object.defineProperty(exports, "CardList", {
-  enumerable: true,
-  get: function get() {
-    return _CardList.default;
-  }
-});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function get() {
@@ -104,8 +98,6 @@ var _CardImageLink = _interopRequireDefault(require("./components/CardImageLink"
 
 var _CardImageLinkList = _interopRequireDefault(require("./components/CardImageLinkList"));
 
-var _CardList = _interopRequireDefault(require("./components/CardList"));
-
 var _Icon = _interopRequireDefault(require("./components/Icon"));
 
 var _Jumbotron = _interopRequireDefault(require("./components/Jumbotron"));

package/package.json

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

package/dist/components/CardList/CardList.stories.js

@@ -1,58 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports._Cardlist = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _README = _interopRequireDefault(require("./README.md"));
-
-var _index = _interopRequireDefault(require("./index"));
-
-var _index2 = _interopRequireDefault(require("../Card/index"));
-
-require("../../../index.css");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-let cards = [];
-
-for (let i = 0; i < 8; i++) {
-  cards.push( /*#__PURE__*/_react.default.createElement(_index2.default, {
-    id: "cardId",
-    title: "card Title",
-    titleClass: "text-center font-bold",
-    subTitle: "card subtitle",
-    extraText: "card extra text",
-    description: "card description",
-    image: "https://picsum.photos/500/300",
-    hasCta: true,
-    ctaText: "button 1",
-    rounded: true,
-    bordered: true
-  }));
-}
-
-var _default = {
-  title: 'Components/CardList',
-  argTypes: {},
-  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
-    className: "p-4"
-  }, story())],
-  parameters: {
-    readme: {
-      sidebar: _README.default
-    }
-  }
-};
-exports.default = _default;
-
-const _Cardlist = () => {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    list: cards
-  });
-};
-
-exports._Cardlist = _Cardlist;

package/dist/components/CardList/README.md

@@ -1,29 +0,0 @@
-# Card List
-
-A list of cards
-
-## Example
-
-```
-const list = [
-    <Card 
-        id='card' 
-        title='This is a title'
-        titleClass='font-bold'
-        subTitle='This is a subtitle' 
-        description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-    />,
-    <Card 
-        id='card' 
-        title='This is a title'
-        titleClass='font-bold'
-        subTitle='This is a subtitle' 
-        description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
-    />
-]
-
-<CardList list={list}></CardList>
-```
-
-## Parameters
-`links={array} (default=null)`

package/dist/components/CardList/index.js

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-require("core-js/modules/es.symbol.description.js");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _index = _interopRequireDefault(require("../Card/index"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const CardList = _ref => {
-  let {
-    list
-  } = _ref;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: "flex"
-  }, list && list.map(item => {
-    return /*#__PURE__*/_react.default.createElement(_index.default, {
-      id: "card",
-      title: item.title,
-      classNames: "mx-2",
-      titleClass: "text-center font-bold",
-      subTitle: item.subTitle,
-      extraText: item.extraText,
-      description: item.description,
-      image: "https://picsum.photos/500/300",
-      hasCta: item.hasCta,
-      ctaText: item.ctaText,
-      imageBelowTitle: item.imageBelowTitle,
-      rounded: item.rounded,
-      bordered: item.bordered
-    });
-  }));
-};
-
-var _default = CardList;
-exports.default = _default;