trepur_components 0.1.39 → 0.1.43

package/dist/components/Column/index.js

@@ -24,7 +24,7 @@ const Column = _ref => {
     let width;
 
     if (size === 12) {
-      width = 'full';
+      width = 'w-full';
     } else {
       width = 'w-' + size + '/12';
     }

package/dist/components/Image/Image.stories.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Image = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("../../../index.css");
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _logoWhite = _interopRequireDefault(require("../../Assets/Images/logoWhite.png"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/Image',
+  argTypes: {
+    width: {
+      name: 'Type',
+      description: 'The name of the icon you wish to use',
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'search'
+    },
+    height: {
+      name: 'Size',
+      description: 'an integer between 1 and 5 to dictage the magnification of the icon',
+      control: {
+        type: 'number'
+      },
+      defaultValue: 1
+    }
+  },
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      content: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _Image = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    altText: "logo",
+    image: _logoWhite.default,
+    height: "32",
+    width: "32"
+  });
+};
+
+exports._Image = _Image;

package/dist/components/Image/README.md

@@ -0,0 +1,12 @@
+# Icon
+
+A simple icon that can be used on its own or as a visual on any other component
+
+## Example
+
+```
+<Icon type='thumbs-up' size='4'/>
+```
+
+## Parameters
+`type={string} (default=null)`

package/dist/components/Image/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Image = _ref => {
+  let {
+    image,
+    altText,
+    height,
+    width,
+    classNames
+  } = _ref;
+  const imgWidth = width && 'w-' + width;
+  const imgHeight = height && 'h-' + height;
+  const classes = imgWidth + ' ' + imgHeight + ' ' + classNames;
+  return /*#__PURE__*/_react.default.createElement("img", {
+    className: classes,
+    src: image,
+    alt: altText
+  });
+};
+
+var _default = Image;
+exports.default = _default;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports._NavWithColors = exports._Nav = exports.NavWithSearchAndProfile = exports.NavWithSearch = exports.NavWithProfile = exports.NavAlignedWithSearchAndProfile = exports.NavAlignedWithSearch = exports.NavAlignedWithProfile = exports.NavAligned = void 0;
+exports.default = exports._NavWithTwoRows = exports._NavWithThreeRows = exports._NavWithOneRow = exports._Nav = exports.WithTwoRowsAsSideBar = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,12 +11,22 @@ var _README = _interopRequireDefault(require("./README.md"));
 
 var _index = _interopRequireDefault(require("./index"));
 
-require("../../../index.css");
-
 var _user = _interopRequireDefault(require("../../Assets/Images/user.jpeg"));
 
 var _logoWhite = _interopRequireDefault(require("../../Assets/Images/logoWhite.png"));
 
+var _Image = _interopRequireDefault(require("../Image"));
+
+var _Profile = _interopRequireDefault(require("../Profile"));
+
+var _TextAndTitle = _interopRequireDefault(require("../TextAndTitle"));
+
+var _Search = _interopRequireDefault(require("../Search"));
+
+var _NavItem = _interopRequireDefault(require("../NavItem"));
+
+require("../../../index.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const links = [{
@@ -32,6 +42,211 @@ const links = [{
   name: 'link n',
   reference: '/'
 }];
+const rowOneOfOne = [{
+  classNames: 'mx-auto h-full flex-none',
+  xsColumnWidth: 3,
+  smColumnWidth: 2,
+  mdColumnWidth: 1,
+  lgColumnWidth: 1,
+  component: /*#__PURE__*/_react.default.createElement(_Image.default, {
+    classNames: "mx-auto",
+    height: "full",
+    width: "auto",
+    image: _logoWhite.default,
+    altText: "Logo"
+  })
+}, {
+  columnClasses: 'hidden lg:inline-flex',
+  classNames: '',
+  mdColumnWidth: 3,
+  lgColumnWidth: 2,
+  component: null
+}, {
+  classNames: 'pt-5 ',
+  xsColumnWidth: 9,
+  smColumnWidth: 10,
+  mdColumnWidth: 4,
+  lgColumnWidth: 5,
+  component: /*#__PURE__*/_react.default.createElement("ul", {
+    id: "nav-list",
+    className: "flex justify-center items-center"
+  }, links && links.map(link => {
+    return /*#__PURE__*/_react.default.createElement(_NavItem.default, {
+      name: link.name,
+      url: link.reference,
+      borderColor: "black",
+      textColor: "black",
+      bgColor: "",
+      hoverBorderColor: "blue",
+      hoverTextColor: "blue",
+      hoverBgColor: "white",
+      bordered: true,
+      rounded: true
+    });
+  }))
+}, {
+  columnClasses: 'hidden lg:inline-flex',
+  classNames: 'pt-2 mx-auto',
+  smColumnWidth: 1,
+  mdColumnWidth: 3,
+  lgColumnWidth: 4,
+  component: /*#__PURE__*/_react.default.createElement(_TextAndTitle.default, {
+    classNames: "md:pr-4 text-white",
+    title: "irupertbennett@gmail.com"
+  })
+}];
+const firstRowClasses = 'py-2';
+const secondRowClasses = '';
+const thirdRowClasses = 'py-2';
+const rowOneOfTwo = [{
+  columnClasses: 'xs:hidden md:inline-flex',
+  classNames: 'pt-2 mx-auto',
+  smColumnWidth: 5,
+  mdColumnWidth: 5,
+  lgColumnWidth: 5,
+  component: null
+}, {
+  classNames: 'mx-auto h-full',
+  smColumnWidth: 2,
+  mdColumnWidth: 2,
+  lgColumnWidth: 2,
+  component: /*#__PURE__*/_react.default.createElement(_Image.default, {
+    classNames: "mx-auto",
+    height: "full",
+    width: "auto",
+    image: _logoWhite.default,
+    altText: "Logo"
+  })
+}, {
+  columnClasses: 'lg:inline-flex hidden',
+  classNames: '',
+  mdColumnWidth: 1,
+  lgColumnWidth: 2,
+  component: null
+}, {
+  classNames: 'pt-3',
+  smColumnWidth: 3,
+  mdColumnWidth: 3,
+  lgColumnWidth: 2,
+  component: /*#__PURE__*/_react.default.createElement(_Search.default, {
+    placeholder: "search"
+  })
+}, {
+  classNames: 'h-full pt-2 mx-auto pr-4 ',
+  smColumnWidth: 2,
+  mdColumnWidth: 1,
+  lgColumnWidth: 1,
+  component: /*#__PURE__*/_react.default.createElement(_Profile.default, {
+    imageHeight: "12",
+    imageWidth: "auto",
+    profileLinks: links,
+    userImage: _user.default,
+    rounded: true
+  })
+}];
+const rowTwoOfTwo = [{
+  columnClasses: 'hidden',
+  classNames: '',
+  component: null
+}, {
+  classNames: '',
+  smColumnWidth: 12,
+  mdColumnWidth: 12,
+  lgColumnWidth: 12,
+  component: /*#__PURE__*/_react.default.createElement("ul", {
+    id: "nav-list",
+    className: "flex justify-center items-center pt-5"
+  }, links && links.map(link => {
+    return /*#__PURE__*/_react.default.createElement(_NavItem.default, {
+      name: link.name,
+      url: link.reference,
+      borderColor: "black",
+      textColor: "black",
+      bgColor: "",
+      hoverBorderColor: "blue",
+      hoverTextColor: "blue",
+      hoverBgColor: "white",
+      bordered: true,
+      rounded: true
+    });
+  }))
+}, {
+  columnClasses: 'hidden',
+  classNames: '',
+  component: null
+}];
+const mobileItems = [{
+  classNames: 'pt-3',
+  component: /*#__PURE__*/_react.default.createElement(_Search.default, {
+    placeholder: "search"
+  })
+}, {
+  classNames: '',
+  component: /*#__PURE__*/_react.default.createElement(_Profile.default, {
+    imageHeight: "12",
+    imageWidth: "auto",
+    profileLinks: links,
+    userImage: _user.default,
+    rounded: true
+  })
+}, {
+  classNames: '',
+  component: /*#__PURE__*/_react.default.createElement("ul", {
+    id: "nav-list",
+    className: ""
+  }, links && links.map(link => {
+    return /*#__PURE__*/_react.default.createElement(_NavItem.default, {
+      name: link.name,
+      url: link.reference,
+      bgColor: "#38B6FF",
+      textColor: "white",
+      hoverTextColor: "#38B6FF",
+      hoverBgColor: "white",
+      rounded: true
+    });
+  }))
+}];
+const thirdRow = [{
+  smColumnWidth: 6,
+  mdColumnWidth: 4,
+  lgColumnWidth: 4,
+  component: /*#__PURE__*/_react.default.createElement(_Image.default, {
+    classNames: "mx-auto h-full",
+    height: "32",
+    width: "auto",
+    image: _logoWhite.default,
+    altText: "Logo"
+  })
+}, {
+  smColumnWidth: 0,
+  mdColumnWidth: 4,
+  lgColumnWidth: 4,
+  component: null
+}, {
+  smColumnWidth: 6,
+  mdColumnWidth: 4,
+  lgColumnWidth: 4,
+  component: /*#__PURE__*/_react.default.createElement(_Image.default, {
+    classNames: "mx-auto h-full",
+    height: "32",
+    width: "auto",
+    image: _logoWhite.default,
+    altText: "Logo"
+  })
+}];
+const profileLinks = [{
+  name: 'PROFILE ITEM 1',
+  reference: '/'
+}, {
+  name: 'PROFILE ITEM 2',
+  reference: '/'
+}, {
+  name: 'PROFILE ITEM 3',
+  reference: '/'
+}, {
+  name: 'PROFILE ITEM 4',
+  reference: '/'
+}];
 var _default = {
   title: 'Components/Nav',
   argTypes: {},
@@ -46,153 +261,62 @@ exports.default = _default;
 
 const _Nav = args => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
-    links: links,
-    navPosition: "1",
-    logoImage: _logoWhite.default,
-    icon: _user.default,
-    navItemRounded: false
+    firstRow: rowOneOfTwo,
+    secondRow: rowTwoOfTwo,
+    thirdRow: thirdRow,
+    mobileItems: mobileItems
   });
 };
 
 exports._Nav = _Nav;
 
-const _NavWithColors = args => {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    links: links,
-    navPosition: "1" //center
-    ,
-    navClass: "py-4",
-    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: false,
-    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",
-    navLinkClass: "px-2 py-2 rounded-lg flex-1 hover:text-white hover:bg-black",
-    logoClass: "py-4",
-    showSearch: true,
-    logoImage: _logoWhite.default
-  });
-};
-
-exports.NavWithSearch = NavWithSearch;
-
-const NavWithProfile = () => {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    links: links,
-    navPosition: "1",
-    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,
-    logoImage: _logoWhite.default
-  });
-};
-
-exports.NavWithProfile = NavWithProfile;
-
-const NavWithSearchAndProfile = () => {
+const _NavWithOneRow = args => {
   return /*#__PURE__*/_react.default.createElement(_index.default, {
-    links: links,
-    navPosition: "1",
-    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,
-    icon: _user.default
+    firstRow: rowOneOfOne,
+    firstRowClasses: firstRowClasses,
+    mobileItems: mobileItems
   });
 };
 
-exports.NavWithSearchAndProfile = NavWithSearchAndProfile;
+exports._NavWithOneRow = _NavWithOneRow;
 
-const NavAligned = () => {
+const _NavWithTwoRows = args => {
   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
+    firstRow: rowOneOfTwo,
+    firstRowClasses: firstRowClasses,
+    secondRow: rowTwoOfTwo,
+    secondRowClasses: secondRowClasses,
+    mobileItems: mobileItems
   });
 };
 
-exports.NavAligned = NavAligned;
+exports._NavWithTwoRows = _NavWithTwoRows;
 
-const NavAlignedWithSearch = () => {
+const _NavWithThreeRows = args => {
   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
+    firstRow: rowOneOfTwo,
+    firstRowClasses: firstRowClasses,
+    secondRow: rowTwoOfTwo,
+    secondRowClasses: secondRowClasses,
+    thirdRow: thirdRow,
+    thirdRowClasses: thirdRowClasses,
+    mobileItems: mobileItems
   });
 };
 
-exports.NavAlignedWithSearch = NavAlignedWithSearch;
+exports._NavWithThreeRows = _NavWithThreeRows;
 
-const NavAlignedWithProfile = () => {
+const WithTwoRowsAsSideBar = args => {
   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
+    firstRow: rowOneOfTwo,
+    firstRowClasses: firstRowClasses,
+    secondRow: rowTwoOfTwo,
+    secondRowClasses: secondRowClasses,
+    mobileItems: mobileItems,
+    asSideBar: true,
+    bgColor: "#38B6FF",
+    logo: _logoWhite.default
   });
 };
 
-exports.NavAlignedWithSearchAndProfile = NavAlignedWithSearchAndProfile;
+exports.WithTwoRowsAsSideBar = WithTwoRowsAsSideBar;

package/dist/components/Nav/README.md

@@ -14,32 +14,17 @@ A personalisable naviagtion bar, suitable for desktop and mobile
 ```
 
 ## Parameters
-`links={string} (default=null)`
-`navPosition={string} (default=null)`
-`alignNavAndLogo={boolean} (default=null)`
-`navClass={string} (default=null)`
-`navLinkClass={string} (default=null)`
-`logoClass={string} (default=null)`
-`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)`
+`firstRow={array} (default=null)`
+`firstRowClasses={string} (default=null)`
+`secondRow={array} (default=null)`
+`secondRowClasses={string} (default=null)`
+`thirdRow={array} (default=null)`
+`thirdRowClass={string} (default=null)`
+`mobileItems={array} (default=null)`
 `mobileNavButtonBgColor={string} (default=null)`
 `mobileNavButtonColor={string} (default=null)`
 `hoverMobileNavButtonBgColor={string} (default=null)`
-`hoverMobileNavButtonColor={string} (default=null)`
+`hoverMobileNavButtonColor={string} (default=null)`
+`bgColor={string} (default=null)`
+`logo={string} (default=null)`
+`asSideBar={boolean} (default=null)`

package/dist/components/Nav/index.js

@@ -7,19 +7,11 @@ exports.default = void 0;
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
-require("core-js/modules/es.regexp.exec.js");
-
-require("core-js/modules/es.string.split.js");
-
-require("core-js/modules/es.string.replace.js");
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _index = _interopRequireDefault(require("../Profile/index"));
-
-var _index2 = _interopRequireDefault(require("../Search/index"));
+var _Column = _interopRequireDefault(require("../Column"));
 
-var _index3 = _interopRequireDefault(require("../NavItem/index"));
+var _Icon = _interopRequireDefault(require("../Icon"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,84 +19,24 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 Header = _ref => {
+const Nav = _ref => {
   let {
-    links,
-    navPosition,
-    alignNavAndLogo,
-    navClass,
-    navLinkClass,
-    logoClass,
-    showSearch,
-    showProfile,
-    icon,
-    logoImage,
-    navItemBorderColor,
-    navItemTextColor,
-    navItemBgColor,
-    hoverNavItemBorderColor,
-    hoverNavItemTextColor,
-    hoverNavItemBgColor,
+    firstRow,
+    firstRowClasses,
+    secondRow,
+    secondRowClasses,
+    thirdRow,
+    thirdRowClasses,
+    mobileItems,
     bgColor,
-    navItemBordered,
-    navItemRounded,
-    navItemClassNames,
-    navItemLinkClassNames,
-    mobileNavItemBordered,
-    mobileNavItemRounded,
-    mobileNavItemClassNames,
-    mobileNavItemLinkClassNames,
     mobileNavButtonBgColor,
     mobileNavButtonColor,
     hoverMobileNavButtonBgColor,
     hoverMobileNavButtonColor,
-    margin
+    asSideBar,
+    logo
   } = _ref;
-  const user = icon ? icon : '';
-  const [mobileMenuState, setmobileMenuState] = (0, _react.useState)(false);
-  const profileLinks = [{
-    name: 'PROFILE ITEM 1',
-    reference: '/'
-  }, {
-    name: 'PROFILE ITEM 2',
-    reference: '/'
-  }, {
-    name: 'PROFILE ITEM 3',
-    reference: '/'
-  }, {
-    name: 'PROFILE ITEM 4',
-    reference: '/'
-  }];
-  const pathArray = window.location.pathname.split('/');
-  let slug = pathArray[pathArray.length - 1];
-  let containerClass = margin ? ' container mx-auto' : '';
-  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 ';
-  let logoHeight = 16;
-
-  if (!alignNavAndLogo) {
-    combinedLogoClass += ' flex justify-center ';
-  } else {
-    navItemTopPadding = containsSearchOrProfile ? '' : 'pt-' + logoHeight / 4;
-  }
-
-  if (navPosition === '0') {
-    linkContainerClass += 'sm:justify-start';
-  }
-
-  if (navPosition === '1') {
-    linkContainerClass += 'sm:justify-center';
-  }
-
-  if (navPosition === '2') {
-    linkContainerClass += 'sm:justify-end';
-  } //---------- Styling ---------------
-
+  const [mobileMenuState, setmobileMenuState] = (0, _react.useState)(false); //---------- Styling ---------------
 
   const [styles, setStyles] = (0, _react.useState)({
     'background-color': mobileNavButtonBgColor ? mobileNavButtonBgColor : 'white',
@@ -123,26 +55,46 @@ const Header = _ref => {
         color: mobileNavButtonColor ? mobileNavButtonColor : 'black'
       });
     }
+  };
+
+  const [sideNavWidth, setSideNavWidth] = (0, _react.useState)({
+    'width': '0px',
+    'background-color': bgColor
+  });
+
+  const openSideNav = () => {
+    setSideNavWidth({
+      'width': '200px',
+      'background-color': bgColor,
+      'border-right': '3px solid black',
+      'padding-right': '10px'
+    });
+  };
+
+  const closeNav = () => {
+    setSideNavWidth({
+      'width': '0px',
+      'background-color': bgColor
+    });
   }; //-----------------------------------
 
 
   return /*#__PURE__*/_react.default.createElement("nav", {
     style: {
-      'background-color': backgroundColor
+      'background-color': bgColor
     },
-    id: "nav",
-    className: navClass
+    id: "nav"
   }, /*#__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"
+    className: "relative flex items-center lg:hidden py-2"
   }, /*#__PURE__*/_react.default.createElement("div", {
     id: "nav-collapse-btn-wrapper",
-    className: "absolute inset-y-0 left-0 flex items-center"
+    className: "absolute inset-y-0 left-2 flex items-center"
   }, /*#__PURE__*/_react.default.createElement("button", {
     style: styles,
     onMouseOver: () => setHoverState(true),
     onMouseOut: () => setHoverState(false),
-    onClick: () => setmobileMenuState(!mobileMenuState),
+    onClick: asSideBar ? () => openSideNav() : () => setmobileMenuState(!mobileMenuState),
     type: "button",
     className: "inline-flex items-center justify-center p-2 rounded-md focus:ring-2 focus:ring-inset focus:ring-white",
     "aria-controls": "mobile-menu",
@@ -167,107 +119,64 @@ const Header = _ref => {
     d: "M6 18L18 6M6 6l12 12"
   })))), /*#__PURE__*/_react.default.createElement("div", {
     id: "logo",
-    className: combinedMobileLogoClass
+    className: "mx-auto"
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: "h-16 w-auto",
-    src: logoImage,
+    src: logo,
     alt: " Logo "
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'hidden sm:block items-center justify-between sm:items-stretch text-center ' + containerClass
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: alignNavAndLogo ? 'flex' : ''
+    className: 'hidden lg:block items-center justify-between sm:items-stretch text-center '
   }, /*#__PURE__*/_react.default.createElement("div", {
-    id: "logo",
-    className: combinedLogoClass
-  }, /*#__PURE__*/_react.default.createElement("img", {
-    className: "h-" + logoHeight,
-    src: logoImage,
-    alt: " Logo "
+    className: 'flex ' + firstRowClasses
+  }, firstRow && firstRow.map(rowItem => {
+    return /*#__PURE__*/_react.default.createElement(_Column.default, {
+      className: 'h-16 ' + rowItem.columnClasses,
+      xs: rowItem.xsColumnWidth,
+      sm: rowItem.smColumnWidth,
+      md: rowItem.columnWidth,
+      lg: rowItem.lgColumnWidth
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: rowItem.classNames
+    }, rowItem.component));
   })), /*#__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,
-    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"
-  }, /*#__PURE__*/_react.default.createElement("ul", {
-    id: "nav-list",
-    className: 'flex ' + navItemTopPadding
-  }, links && links.map(link => {
-    const slugReference = link.reference.replace('/', '');
-    return /*#__PURE__*/_react.default.createElement(_index3.default, {
-      name: link.name,
-      url: link.reference,
-      borderColor: slug === slugReference ? hoverNavItemBorderColor : navItemBorderColor,
-      textColor: slug === slugReference ? hoverNavItemTextColor : navItemTextColor,
-      bgColor: slug === slugReference ? hoverNavItemBgColor : navItemBgColor,
-      hoverBorderColor: hoverNavItemBorderColor,
-      hoverTextColor: hoverNavItemTextColor,
-      hoverBgColor: hoverNavItemBgColor,
-      bordered: navItemBordered,
-      rounded: navItemRounded,
-      classNames: navItemClassNames,
-      linkClassNames: navItemLinkClassNames
-    });
-  })))))))), mobileMenuState && /*#__PURE__*/_react.default.createElement("div", {
-    className: "sm:hidden",
+    className: 'flex ' + secondRowClasses
+  }, secondRow && secondRow.map(rowItem => {
+    return /*#__PURE__*/_react.default.createElement(_Column.default, {
+      className: "h-16 ",
+      xs: rowItem.xsColumnWidth,
+      sm: rowItem.smColumnWidth,
+      md: rowItem.columnWidth
+    }, rowItem.component);
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: 'flex ' + thirdRowClasses
+  }, thirdRow && thirdRow.map(rowItem => {
+    return /*#__PURE__*/_react.default.createElement(_Column.default, {
+      className: "h-16",
+      xs: rowItem.xsColumnWidth,
+      sm: rowItem.smColumnWidth,
+      md: rowItem.columnWidth
+    }, rowItem.component);
+  })))), asSideBar ? /*#__PURE__*/_react.default.createElement("div", {
+    style: sideNavWidth,
+    className: "lg:hidden pt-12 fixed top-0 left-0 z-1 overflow-hidden h-full w-0 duration-500"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    className: "text-white absolute top-1 right-3",
+    onClick: () => closeNav(),
+    type: "times",
+    size: "2"
+  }), mobileItems && mobileItems.map(item => {
+    return /*#__PURE__*/_react.default.createElement("div", null, item.component);
+  })) :
+  /* dropdown */
+  mobileMenuState && /*#__PURE__*/_react.default.createElement("div", {
+    className: "lg:hidden py-2",
     id: "mobile-menu"
-  }, 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: ""
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "px-2 pt-2 pb-3 space-y-1"
-  }, links && links.map(link => {
-    const slugReference = link.reference.replace('/', '');
-    return /*#__PURE__*/_react.default.createElement(_index3.default, {
-      name: link.name,
-      url: link.reference,
-      borderColor: slug === slugReference ? hoverNavItemBorderColor : navItemBorderColor,
-      textColor: slug === slugReference ? hoverNavItemTextColor : navItemTextColor,
-      bgColor: slug === slugReference ? hoverNavItemBgColor : 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 => {
-    const slugReference = link.reference.replace('/', '');
-    return /*#__PURE__*/_react.default.createElement(_index3.default, {
-      name: link.name,
-      url: link.reference,
-      borderColor: slug === slugReference ? hoverNavItemBorderColor : navItemBorderColor,
-      textColor: slug === slugReference ? hoverNavItemTextColor : navItemTextColor,
-      bgColor: slug === slugReference ? hoverNavItemBgColor : navItemBgColor,
-      hoverBorderColor: hoverNavItemBorderColor,
-      hoverTextColor: hoverNavItemTextColor,
-      hoverBgColor: hoverNavItemBgColor,
-      bordered: mobileNavItemBordered,
-      rounded: mobileNavItemRounded,
-      classNames: mobileNavItemClassNames,
-      linkClassNames: mobileNavItemLinkClassNames
-    });
+  }, mobileItems && mobileItems.map(item => {
+    return /*#__PURE__*/_react.default.createElement("div", null, item.component);
   }))));
 };
 
-var _default = Header;
+var _default = Nav;
 exports.default = _default;

package/dist/components/Profile/index.js

@@ -19,11 +19,18 @@ const Profile = _ref => {
     alignRight,
     alignLeft,
     userImage,
-    classNames
+    imageHeight,
+    imageWidth,
+    classNames,
+    rounded
   } = _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 height = imageHeight && 'h-' + imageHeight;
+  const width = imageWidth && 'w-' + imageWidth;
+  const round = rounded ? 'rounded-full' : '';
+  const classes = width + ' ' + height + ' ' + round;
   const [profileState, setProfileState] = (0, _react.useState)(false);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: 'text-center ' + classNames
@@ -34,13 +41,13 @@ const Profile = _ref => {
     type: "button",
     className: "bg-gray-800 flex rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
   }, /*#__PURE__*/_react.default.createElement("img", {
-    className: "h-10 w-10 rounded-full",
+    className: classes,
     src: userImage,
     alt: ""
   })))), profileState && /*#__PURE__*/_react.default.createElement("div", {
     className: dropdownTextAlignement
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "w-48 sm:inline-block shadow-lg " + profileAlignment + dropdownAlignement
+    className: "w-48 sm:inline-block shadow-lg bg-brand-highlight text-white z-10 hover:bg-brand-border-light hover:text-black " + profileAlignment + dropdownAlignement
   }, profileLinks && profileLinks.map((link, i) => {
     return /*#__PURE__*/_react.default.createElement("a", {
       href: link.link,

package/dist/components/Search/Search.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports._Search = exports.SearchWithRightIcon = exports.SearchWithLeftIcon = exports.SearchWithLabel = exports.SearchWithBothIcons = void 0;
+exports.default = exports._Search = exports.SearchWithRightIcon = exports.SearchWithLeftIcon = exports.SearchWithLabel = exports.SearchWithBothIconsAndLabel = exports.SearchWithBothIcons = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -108,4 +108,15 @@ const SearchWithBothIcons = args => {
   });
 };
 
-exports.SearchWithBothIcons = SearchWithBothIcons;
+exports.SearchWithBothIcons = SearchWithBothIcons;
+
+const SearchWithBothIconsAndLabel = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    placeholder: args.placeholder,
+    leftIcon: args.leftIcon,
+    rightIcon: args.rightIcon,
+    text: "Search"
+  });
+};
+
+exports.SearchWithBothIconsAndLabel = SearchWithBothIconsAndLabel;

package/dist/components/Search/index.js

@@ -34,11 +34,11 @@ const Search = _ref => {
   }, text && /*#__PURE__*/_react.default.createElement("h2", {
     className: "font-base-lg pt-2"
   }, text), /*#__PURE__*/_react.default.createElement("div", {
-    className: "relative block"
+    className: "relative block w-full"
   }, leftIcon && /*#__PURE__*/_react.default.createElement("span", {
     className: "absolute inset-y-0 left-5 flex items-center pl-2"
   }, iconLeft), /*#__PURE__*/_react.default.createElement("input", {
-    className: "ml-4 pr-32 border-2 border-gray-300 h-10 px-5 placeholder:italic placeholder:text-gray-400 rounded-md py-2 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 " + leftPadding,
+    className: "w-full border-2 border-gray-300 placeholder:italic placeholder:text-gray-400 rounded-md py-1 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 " + leftPadding,
     onChange: e => _onChange(e.target.value),
     placeholder: placeholder,
     type: "text",

package/dist/components/TextAndTitle/index.js

@@ -15,8 +15,12 @@ const TextAndTitle = _ref => {
     text,
     title,
     bgColor,
-    textColor
+    textColor,
+    titleClass,
+    textClass
   } = _ref;
+  const titleClasses = titleClass + ' text-2xl';
+  const textClasses = textClass + '';
   const classes = classNames + ' text-center'; //---------- Styling ---------------
 
   const styles = {
@@ -28,8 +32,10 @@ const TextAndTitle = _ref => {
     style: styles,
     className: classes
   }, /*#__PURE__*/_react.default.createElement("p", {
-    className: "text-2xl"
-  }, title), /*#__PURE__*/_react.default.createElement("p", null, text));
+    className: titleClasses
+  }, title), /*#__PURE__*/_react.default.createElement("p", {
+    className: textClasses
+  }, text));
 };
 
 var _default = TextAndTitle;

package/dist/index.js

@@ -87,6 +87,12 @@ Object.defineProperty(exports, "Icon", {
     return _Icon.default;
   }
 });
+Object.defineProperty(exports, "Image", {
+  enumerable: true,
+  get: function get() {
+    return _Image.default;
+  }
+});
 Object.defineProperty(exports, "InformationIcon", {
   enumerable: true,
   get: function get() {
@@ -194,6 +200,8 @@ var _Form = _interopRequireDefault(require("./components/Form"));
 
 var _Icon = _interopRequireDefault(require("./components/Icon"));
 
+var _Image = _interopRequireDefault(require("./components/Image"));
+
 var _InformationIcon = _interopRequireDefault(require("./components/InformationIcon"));
 
 var _Input = _interopRequireDefault(require("./components/Input"));

package/package.json

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