trepur_components 0.1.43 → 0.2.0

package/dist/components/Organisms/ImageLinkList/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("../ImageLink/index"));
+
+require("../../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ImageLinkList = _ref => {
+  let {
+    items
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "grid md:grid-cols-4 sm:grid-cols-2"
+  }, items && items.map((item, i) => {
+    return /*#__PURE__*/_react.default.createElement(_index.default, {
+      altText: "image",
+      image: item.image,
+      title: item.title,
+      ctaText: item.ctaText
+    });
+  }));
+};
+
+var _default = ImageLinkList;
+exports.default = _default;

package/dist/components/Organisms/Jumbotron/Jumbotron.stories.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Jumbotron = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Organisms/Jumbotron',
+  component: _index.default,
+  parameters: {},
+  argTypes: {
+    text: {
+      description: 'The text the appears as an overlay on the Jumbotron',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    ctaText: {
+      description: 'The text of the first/left button',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    ctaText2: {
+      description: 'The text on the second/last button',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    text: 'This is some text',
+    ctaText: 'Button 1',
+    ctaText2: 'Button 2',
+    image: 'https://picsum.photos/1500/400'
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Jumbotron = Template.bind({});
+
+exports._Jumbotron = _Jumbotron;
+_Jumbotron.args = {};

package/dist/components/{Jumbotron → Organisms/Jumbotron}/index.js

@@ -7,7 +7,9 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _index = _interopRequireDefault(require("../Button/index"));
+var _Button = _interopRequireDefault(require("../../Atoms/Button"));
+
+require("../../../../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -27,16 +29,16 @@ const Jumbotron = _ref => {
     src: image,
     alt: altText
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "absolute top-10 lg:top-20"
+    className: "w-auto absolute top-10"
   }, /*#__PURE__*/_react.default.createElement("h1", {
-    className: "text-white text-4xl"
+    className: "text-4xl"
   }, text), /*#__PURE__*/_react.default.createElement("div", {
-    className: "pt-2 lg:pt-8 text-white"
-  }, ctaText && /*#__PURE__*/_react.default.createElement(_index.default, {
+    className: "pt-2 lg:pt-8"
+  }, ctaText && /*#__PURE__*/_react.default.createElement(_Button.default, {
     className: "mx-2",
     ctaText: ctaText,
     onClick: ctaLink
-  }), ctaText2 && /*#__PURE__*/_react.default.createElement(_index.default, {
+  }), ctaText2 && /*#__PURE__*/_react.default.createElement(_Button.default, {
     className: "mx-2",
     ctaText: ctaText2,
     onClick: ctaLink2

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

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Nav = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _logoWhite = _interopRequireDefault(require("../../../Assets/Images/logoWhite.png"));
+
+var _controls = require("../../../utils/controls");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Organisms/Nav',
+  component: _index.default,
+  parameters: {},
+  argTypes: {
+    firstRow: {
+      description: '',
+      control: 'array',
+      table: {
+        category: ''
+      }
+    },
+    secondRow: {
+      description: '',
+      control: 'array',
+      table: {
+        category: ''
+      }
+    },
+    thirdRow: {
+      description: '',
+      control: 'array',
+      table: {
+        category: ''
+      }
+    },
+    mobileItems: {
+      description: '',
+      control: 'array',
+      table: {
+        category: ''
+      }
+    },
+    bgColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    logo: {
+      description: '',
+      control: 'string',
+      table: {
+        category: ''
+      }
+    },
+    mobileLogo: {
+      description: '',
+      control: 'string',
+      table: {
+        category: ''
+      }
+    },
+    dropdownNavHeight: {
+      description: '',
+      control: 'number',
+      table: {
+        category: ''
+      }
+    },
+    asSideBar: {
+      description: 'requires sideBarWidth val',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    sideBarWidth: {
+      description: '',
+      control: 'number',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    firstRow: _controls.navRowOneOfTwo,
+    secondRow: _controls.navRowTwoOfTwo,
+    thirdRow: _controls.navThirdRow,
+    mobileItems: _controls.navMobileItems,
+    bgColor: '#38B6FF',
+    logo: _logoWhite.default,
+    mobileLogo: _logoWhite.default,
+    dropdownNavHeight: '450',
+    sideBarWidth: '250'
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Nav = Template.bind({});
+
+exports._Nav = _Nav;
+_Nav.args = {};

package/dist/components/{Nav → Organisms/Nav}/index.js

@@ -9,9 +9,11 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Column = _interopRequireDefault(require("../Column"));
+var _Column = _interopRequireDefault(require("../../Atoms/Column"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+var _Icon = _interopRequireDefault(require("../../Atoms/Icon"));
+
+require("../../../../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -29,15 +31,20 @@ const Nav = _ref => {
     thirdRowClasses,
     mobileItems,
     bgColor,
+    mobileBgColor,
     mobileNavButtonBgColor,
     mobileNavButtonColor,
     hoverMobileNavButtonBgColor,
     hoverMobileNavButtonColor,
     asSideBar,
-    logo
+    logo,
+    mobileNavCloseColor,
+    sideBarWidth,
+    dropdownNavHeight,
+    mobileLogo,
+    mobileLogoBannerClasses
   } = _ref;
-  const [mobileMenuState, setmobileMenuState] = (0, _react.useState)(false); //---------- Styling ---------------
-
+  //---------- Styling ---------------
   const [styles, setStyles] = (0, _react.useState)({
     'background-color': mobileNavButtonBgColor ? mobileNavButtonBgColor : 'white',
     color: mobileNavButtonColor ? mobileNavButtonColor : 'black'
@@ -59,23 +66,53 @@ const Nav = _ref => {
 
   const [sideNavWidth, setSideNavWidth] = (0, _react.useState)({
     'width': '0px',
-    'background-color': bgColor
+    'background-color': mobileBgColor ? mobileBgColor : bgColor
   });
 
   const openSideNav = () => {
     setSideNavWidth({
-      'width': '200px',
-      'background-color': bgColor,
-      'border-right': '3px solid black',
+      'width': "".concat(sideBarWidth, "px"),
+      'background-color': mobileBgColor ? mobileBgColor : bgColor,
       'padding-right': '10px'
     });
   };
 
-  const closeNav = () => {
+  const closeSideNav = () => {
     setSideNavWidth({
       'width': '0px',
-      'background-color': bgColor
+      'background-color': mobileBgColor ? mobileBgColor : bgColor
+    });
+  };
+
+  const [navDropdownNavHeight, setDropdownNavHeight] = (0, _react.useState)({
+    'heigth': '0px',
+    'background-color': mobileBgColor ? mobileBgColor : bgColor
+  });
+
+  const openDropdownNav = () => {
+    setDropdownNavHeight({
+      'height': "".concat(dropdownNavHeight, "px"),
+      'background-color': mobileBgColor ? mobileBgColor : bgColor
+    });
+  };
+
+  const closeDropdownNav = () => {
+    setDropdownNavHeight({
+      'height': '0px',
+      'background-color': mobileBgColor ? mobileBgColor : bgColor
     });
+  };
+
+  const [mobileMenuState, setmobileMenuState] = (0, _react.useState)(false);
+
+  const toggleDropdownNav = () => {
+    if (mobileMenuState) {
+      closeDropdownNav();
+    } else {
+      openDropdownNav();
+    }
+
+    setmobileMenuState(!mobileMenuState);
   }; //-----------------------------------
 
 
@@ -94,7 +131,7 @@ const Nav = _ref => {
     style: styles,
     onMouseOver: () => setHoverState(true),
     onMouseOut: () => setHoverState(false),
-    onClick: asSideBar ? () => openSideNav() : () => setmobileMenuState(!mobileMenuState),
+    onClick: asSideBar ? () => openSideNav() : () => toggleDropdownNav(),
     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",
@@ -121,8 +158,8 @@ const Nav = _ref => {
     id: "logo",
     className: "mx-auto"
   }, /*#__PURE__*/_react.default.createElement("img", {
-    className: "h-16 w-auto",
-    src: logo,
+    className: "h-16 w-auto " + mobileLogoBannerClasses,
+    src: mobileLogo,
     alt: " Logo "
   }))), /*#__PURE__*/_react.default.createElement("div", {
     className: 'hidden lg:block items-center justify-between sm:items-stretch text-center '
@@ -158,18 +195,26 @@ const Nav = _ref => {
     }, 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"
+    className: "shadow-inner shaddow-lg lg:hidden pt-20 fixed top-0 left-0 z-1 overflow-hidden h-full w-0 duration-700"
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    className: "text-white absolute top-1 right-3",
-    onClick: () => closeNav(),
+    style: {
+      'color': mobileNavCloseColor
+    },
+    className: "absolute top-7 left-7",
+    onClick: () => closeSideNav(),
     type: "times",
     size: "2"
   }), mobileItems && mobileItems.map(item => {
-    return /*#__PURE__*/_react.default.createElement("div", null, item.component);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "pb-5"
+    }, item.component);
   })) :
+  /*#__PURE__*/
+
   /* dropdown */
-  mobileMenuState && /*#__PURE__*/_react.default.createElement("div", {
-    className: "lg:hidden py-2",
+  _react.default.createElement("div", {
+    style: navDropdownNavHeight,
+    className: "lg:hidden duration-500 overflow-hidden h-0",
     id: "mobile-menu"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "px-2 pt-2 pb-3 space-y-1"

package/dist/components/Organisms/NewsCard/NewsCard.stories.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._NewsCard = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Organisms/News Card',
+  components: _index.default,
+  parameters: {},
+  argTypes: {
+    title: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    content: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    boldTitle: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    rounded: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    ctaText: {
+      description: 'Remove text to remove button',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    title: 'This is a title',
+    content: 'This is some content that will only be displayed if the collapsible item is expanded and will dissappear when the collapsible item is collapsed.',
+    image: 'https://picsum.photos/400/200',
+    ctaText: 'Button 1'
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _NewsCard = Template.bind({});
+
+exports._NewsCard = _NewsCard;
+_NewsCard.args = {};

package/dist/components/Organisms/NewsCard/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.object.assign.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Image = _interopRequireDefault(require("../../Atoms/Image"));
+
+var _Column = _interopRequireDefault(require("../../Atoms/Column"));
+
+var _Button = _interopRequireDefault(require("../../Atoms/Button"));
+
+require("../../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const NewsCard = _ref => {
+  let {
+    title,
+    content,
+    image,
+    ctaText,
+    buttonType,
+    url,
+    buttonBgColor,
+    buttonTextColor,
+    buttonBorderColor,
+    hoverButtonBgColor,
+    hoverButtonTextColor,
+    hoverButtonBorderColor,
+    buttonDesign,
+    rounded,
+    boldTitle
+  } = _ref;
+  const roundedClasses = rounded ? 'rounded-lg' : '';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'border flex p-2 ' + roundedClasses
+  }, /*#__PURE__*/_react.default.createElement(_Column.default, {
+    sm: 4,
+    md: 2
+  }, /*#__PURE__*/_react.default.createElement(_Image.default, {
+    classNames: roundedClasses,
+    image: image
+  })), /*#__PURE__*/_react.default.createElement(_Column.default, {
+    sm: 1
+  }), /*#__PURE__*/_react.default.createElement(_Column.default, {
+    sm: 6,
+    className: "expandable w-auto text-center "
+  }, boldTitle ? /*#__PURE__*/_react.default.createElement("b", null, /*#__PURE__*/_react.default.createElement("p", null, title)) : /*#__PURE__*/_react.default.createElement("p", null, title), /*#__PURE__*/_react.default.createElement("p", null, content), ctaText && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+    className: "w-full",
+    ctaText: ctaText,
+    buttonType: buttonType,
+    url: url,
+    bgColor: buttonBgColor,
+    textColor: buttonTextColor,
+    borderColor: buttonBorderColor,
+    hoverBgColor: hoverButtonBgColor,
+    hoverTextColor: hoverButtonTextColor,
+    hoverBorderColor: hoverButtonBorderColor
+  }, buttonDesign && {
+    buttonDesign: buttonDesign
+  })))));
+};
+
+var _default = NewsCard;
+exports.default = _default;

package/dist/components/Organisms/Profile/Profile.stories.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Profile = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _user = _interopRequireDefault(require("../../../Assets/Images/user.jpeg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const links = [{
+  link: '#',
+  name: 'Link 1'
+}, {
+  link: '#',
+  name: 'Link 2'
+}, {
+  link: '#',
+  name: 'Link 3'
+}];
+var _default = {
+  title: 'Trepur Components/Organisms/Profile',
+  components: _index.default,
+  parameters: {},
+  argTypes: {
+    imageWidth: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    imageHeight: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    alignment: {
+      description: '',
+      control: 'select',
+      options: ['left', 'center', 'right'],
+      table: {
+        category: ''
+      }
+    },
+    rounded: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    bordered: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    userImage: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    profileLinks: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    profileLinks: links,
+    userImage: _user.default
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Profile = Template.bind({});
+
+exports._Profile = _Profile;
+_Profile.args = {};

package/dist/components/{Profile → Organisms/Profile}/index.js

@@ -9,6 +9,8 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
+require("../../../../index.css");
+
 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; }
@@ -16,21 +18,22 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const Profile = _ref => {
   let {
     profileLinks,
-    alignRight,
-    alignLeft,
+    alignment,
     userImage,
     imageHeight,
     imageWidth,
     classNames,
-    rounded
+    rounded,
+    bordered
   } = _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';
+  let profileAlignment = alignment === 'right' ? ' float-right ' : alignment === 'left' ? ' float-left ' : '';
+  let dropdownAlignement = alignment === 'right' ? ' mt-16 -mr-16 ' : alignment === 'left' ? ' mt-16 -ml-16 ' : '';
+  let dropdownTextAlignement = alignment === 'right' ? '  ' : alignment === 'left' ? '  ' : 'text-center';
   const height = imageHeight && 'h-' + imageHeight;
   const width = imageWidth && 'w-' + imageWidth;
   const round = rounded ? 'rounded-full' : '';
-  const classes = width + ' ' + height + ' ' + round;
+  const border = bordered ? 'border' : '';
+  const classes = 'object-cover ' + width + ' ' + height + ' ' + round + ' ' + border;
   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