trepur_components 0.1.43 → 0.2.2

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("../../Atoms/Button"));
+
+require("../../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ImageLink = _ref => {
+  let {
+    image,
+    altText,
+    title,
+    ctaText,
+    ctaLink,
+    classes,
+    rounded
+  } = _ref;
+  const classList = 'cursor-pointer lg:mx-3 md:mx-1 mx-1 lg:mb-5 md:mb-2 mb-2 hover:opacity-50 overflow-hidden text-center ' + classes;
+  let roundedClass = rounded ? 'rounded-full' : '';
+  return /*#__PURE__*/_react.default.createElement("a", {
+    href: ctaLink
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: roundedClass + ' ' + classList + ' relative overflow-hidden'
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: image,
+    alt: altText,
+    className: "object-cover w-full h-full"
+  }), title && /*#__PURE__*/_react.default.createElement("h1", {
+    className: "absolute bg-black text-white py-2 mt-4 top-0 inset-x-0 text-center"
+  }, title), ctaText && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "absolute mx-8 mb-4 bottom-0 inset-x-0 text-center",
+    ctaText: ctaText
+  })));
+};
+
+var _default = ImageLink;
+exports.default = _default;

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

@@ -0,0 +1,35 @@
+import React from 'react'
+import ImageLinkList from './index'
+
+const getLinks = () => {
+    return new Array(16).fill(null).map(() => {
+        return {
+            image: "https://picsum.photos/400/400",
+            title: 'Hi',
+            ctaText: 'button'
+        }
+    })
+}
+
+export default {
+    title: 'Trepur Components/Organisms/Image Link List',
+    components: ImageLinkList,
+    parameters: {},
+    argTypes: {
+        list: {
+            description: '',
+            control: 'array',
+            table: {
+                category: '',
+            },
+        },
+    },
+    args: {
+        items: getLinks()
+    }
+}
+
+const Template = (args) => <ImageLinkList {...args} />;
+
+export const _ImageLinkList = Template.bind({});
+_ImageLinkList.args = {};

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,42 @@
+import React from 'react'
+import Jumbotron from './index'
+
+export default {
+    title: 'Trepur Components/Organisms/Jumbotron',
+    component: Jumbotron,
+    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'
+    }
+}
+
+const Template = (args) => <Jumbotron {...args} />;
+
+export const _Jumbotron = Template.bind({});
+_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,103 @@
+import React from 'react'
+import Nav from './index'
+import logo from '../../../Assets/Images/logoWhite.png'
+import {
+    navRowOneOfTwo,
+    navRowTwoOfTwo,
+    navThirdRow,
+    navMobileItems
+} from '../../../utils/controls'
+
+export default {
+    title: 'Trepur Components/Organisms/Nav',
+    component: Nav,
+    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: navRowOneOfTwo,
+        secondRow: navRowTwoOfTwo,
+        thirdRow: navThirdRow,
+        mobileItems: navMobileItems,
+        bgColor: '#38B6FF',
+        logo: logo,
+        mobileLogo: logo,
+        dropdownNavHeight: '450',
+        sideBarWidth: '250'
+    },
+}
+
+const Template = (args) => <Nav {...args} />;
+
+export const _Nav = Template.bind({});
+_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,56 @@
+import React from 'react'
+import NewsCard from './index';
+
+export default {
+    title: 'Trepur Components/Organisms/News Card',
+    components: NewsCard,
+    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'
+    },
+}
+
+const Template = (args) => <NewsCard {...args} />;
+
+export const _NewsCard = Template.bind({});
+_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,85 @@
+import React from 'react'
+import Profile from './index'
+import userImage from '../../../Assets/Images/user.jpeg'
+
+const links = [
+    {
+        link: '#', 
+        name: 'Link 1'
+    },
+    {
+        link: '#', 
+        name: 'Link 2'
+    },
+    {
+        link: '#', 
+        name: 'Link 3'
+    },
+]
+
+export default {
+    title: 'Trepur Components/Organisms/Profile',
+    components: Profile,
+    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: userImage
+    }
+}
+
+const Template = (args) => <Profile {...args} />;
+
+export const _Profile = Template.bind({});
+_Profile.args = {};