trepur_components 0.1.42 → 0.2.1

package/dist/{components/Column → Column}/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+require("../../../../index.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Column = _ref => {
@@ -17,8 +19,23 @@ const Column = _ref => {
     md,
     lg,
     xl,
-    children
+    children,
+    id
   } = _ref;
+  const widthOptions = {
+    1: 'w-1/12',
+    2: 'w-2/12',
+    3: 'w-3/12',
+    4: 'w-4/12',
+    5: 'w-5/12',
+    6: 'w-6/12',
+    7: 'w-7/12',
+    8: 'w-8/12',
+    9: 'w-9/12',
+    10: 'w-10/12',
+    11: 'w-11/12',
+    12: 'w-12/12'
+  };
 
   const calculateWidth = size => {
     let width;
@@ -26,13 +43,13 @@ const Column = _ref => {
     if (size === 12) {
       width = 'w-full';
     } else {
-      width = 'w-' + size + '/12';
+      width = widthOptions[size];
     }
 
     return width;
   };
 
-  let classes = className + ' ';
+  let classes = className ? className + ' ' : '';
 
   if (xs) {
     let xsClass;
@@ -42,7 +59,7 @@ const Column = _ref => {
 
   if (sm) {
     let smClass;
-    smClass = 'sm:' + calculateWidth(sm);
+    smClass = calculateWidth(sm);
     classes += smClass + ' ';
   }
 
@@ -65,6 +82,7 @@ const Column = _ref => {
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
     className: classes
   }, children);
 };

package/dist/{components/Form → Form}/index.js

@@ -9,9 +9,11 @@ require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Button = _interopRequireDefault(require("../Button"));
+var _Button = _interopRequireDefault(require("../../Atoms/Button"));
 
-var _Input = _interopRequireDefault(require("../Input"));
+var _Input = _interopRequireDefault(require("../../Atoms/Input"));
+
+require("../../../../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -35,7 +37,7 @@ const Form = _ref => {
     className: "w-auto"
   }, /*#__PURE__*/_react.default.createElement("h1", {
     className: "text-center"
-  }, /*#__PURE__*/_react.default.createElement("b", null, title)), components && components.map((component, i) => {
+  }, /*#__PURE__*/_react.default.createElement("b", null, title)), components && components.map(component => {
     if (component.type === 'Input') {
       return /*#__PURE__*/_react.default.createElement(_Input.default, {
         classNames: "py-4",
@@ -57,7 +59,7 @@ const Form = _ref => {
         buttonType: buttonType,
         buttonDesign: buttonDesign
       }));
-    }
+    } else return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   }));
 };
 

package/dist/{components/Input → FyreCard}/index.js

@@ -9,61 +9,65 @@ require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Button = _interopRequireDefault(require("../Button/"));
+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 Input = _ref => {
+const FyreCard = _ref => {
   let {
     id,
-    label,
-    hideLabel,
-    placeholder,
-    type,
+    image,
     ctaText,
+    imageClass,
     classNames,
+    altText,
+    buttonType,
+    bordered,
+    url,
     buttonDesign,
     buttonBgColor,
     buttonTextColor,
     buttonBorderColor,
     hoverButtonBgColor,
     hoverButtonTextColor,
-    hoverButtonBorderColor,
-    buttonType,
-    onClick
+    hoverButtonBorderColor
   } = _ref;
-  let hidden = +hideLabel ? ' hidden ' : '';
-  let classes = 'flex flex-col w-96 ' + classNames;
-  let labelClasses = 'w-auto ' + hidden;
-  let inputClasses = 'border h-12 pl-2';
+  let classList = 'flex flex-col ';
+  let border = bordered ? ' border border-grey border-opacity-100 ' : '';
+  let classes = classNames ? classNames : '';
+  let imageClassList = ' w-full ';
+  classList += border + classes;
+  imageClassList += imageClass;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: classes
-  }, /*#__PURE__*/_react.default.createElement("label", {
-    className: labelClasses,
-    htmlFor: id
-  }, /*#__PURE__*/_react.default.createElement("b", null, label)), /*#__PURE__*/_react.default.createElement("input", {
-    className: inputClasses,
-    type: type,
+    key: id,
     id: id,
-    placeholder: placeholder
-  }), ctaText && /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    className: "mt-8",
+    className: classList
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "card-content flex flex-1 flex-col"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
+    className: imageClassList,
+    src: image,
+    alt: altText
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex justify-end"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
     ctaText: ctaText,
+    buttonType: buttonType,
+    url: url,
     bgColor: buttonBgColor,
     textColor: buttonTextColor,
     borderColor: buttonBorderColor,
-    hoverTextColor: hoverButtonTextColor,
     hoverBgColor: hoverButtonBgColor,
+    hoverTextColor: hoverButtonTextColor,
     hoverBorderColor: hoverButtonBorderColor
-  }, onClick && {
-    onClick: onClick
-  }, {
-    buttonType: buttonType,
+  }, buttonDesign && {
     buttonDesign: buttonDesign
-  })));
+  })))));
 };
 
-var _default = Input;
+var _default = FyreCard;
 exports.default = _default;

package/dist/{components/Icon → Icon}/index.js

@@ -9,6 +9,8 @@ require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireDefault(require("react"));
 
+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); }

package/dist/Image/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("../../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Image = _ref => {
+  let {
+    id,
+    image,
+    altText,
+    height,
+    width,
+    classNames
+  } = _ref;
+  const widthOptions = {
+    2: 'w-2',
+    4: 'w-4',
+    8: 'w-8',
+    12: 'w-12',
+    16: 'w-16',
+    20: 'w-20',
+    24: 'w-24',
+    28: 'w-28',
+    32: 'w-32'
+  };
+  const heightOptions = {
+    2: 'h-2',
+    4: 'h-4',
+    8: 'h-8',
+    12: 'h-12',
+    16: 'h-16',
+    20: 'h-20',
+    24: 'h-24',
+    28: 'h-28',
+    32: 'h-32'
+  };
+
+  const getWidth = width => {
+    return widthOptions[width];
+  };
+
+  const getHeight = height => {
+    return heightOptions[height];
+  };
+
+  const imgWidth = width && getWidth(width);
+  const imgHeight = height && getHeight(height);
+  const classes = imgWidth + ' ' + imgHeight + ' ' + classNames;
+  return /*#__PURE__*/_react.default.createElement("img", {
+    id: id,
+    className: classes,
+    src: image,
+    alt: altText
+  });
+};
+
+var _default = Image;
+exports.default = _default;

package/dist/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/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/InformationIcon → InformationIcon}/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; }
@@ -59,13 +61,12 @@ const Icon = _ref => {
   }; //-----------------------------------
 
 
-  if (!type) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: styles,
     className: classes,
     onMouseOver: () => setHoverState(true),
     onMouseOut: () => setHoverState(false)
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, type && /*#__PURE__*/_react.default.createElement("span", {
     className: classList,
     role: "img",
     "aria-hidden": "true",

package/dist/Input/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("../../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Input = _ref => {
+  let {
+    id,
+    label,
+    placeholder,
+    inputType,
+    bold,
+    classNames
+  } = _ref;
+  let classes = 'flex flex-col w-96 ' + classNames;
+  let labelClasses = bold ? 'font-bold w-auto' : 'w-auto';
+  let inputClasses = 'border h-12 pl-2';
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes
+  }, label && /*#__PURE__*/_react.default.createElement("label", {
+    className: labelClasses,
+    htmlFor: id
+  }, /*#__PURE__*/_react.default.createElement("b", null, label)), /*#__PURE__*/_react.default.createElement("input", {
+    className: inputClasses,
+    type: inputType,
+    id: id,
+    placeholder: placeholder
+  }));
+};
+
+var _default = Input;
+exports.default = _default;

package/dist/{components/Jumbotron → 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/Nav → Nav}/index.js

@@ -9,11 +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 _logoWhite = _interopRequireDefault(require("../../Assets/Images/logoWhite.png"));
+var _Icon = _interopRequireDefault(require("../../Atoms/Icon"));
 
-var _Icon = _interopRequireDefault(require("../Icon"));
+require("../../../../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -30,29 +30,21 @@ const Nav = _ref => {
     thirdRow,
     thirdRowClasses,
     mobileItems,
-    navItemBorderColor,
-    navItemTextColor,
-    navItemBgColor,
-    hoverNavItemBorderColor,
-    hoverNavItemTextColor,
-    hoverNavItemBgColor,
     bgColor,
-    navItemBordered,
-    navItemRounded,
-    navItemClassNames,
-    navItemLinkClassNames,
-    mobileNavItemBordered,
-    mobileNavItemRounded,
-    mobileNavItemClassNames,
-    mobileNavItemLinkClassNames,
+    mobileBgColor,
     mobileNavButtonBgColor,
     mobileNavButtonColor,
     hoverMobileNavButtonBgColor,
     hoverMobileNavButtonColor,
-    asSideBar
+    asSideBar,
+    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'
@@ -70,33 +62,68 @@ const Nav = _ref => {
         color: mobileNavButtonColor ? mobileNavButtonColor : 'black'
       });
     }
-  }; //-----------------------------------
-
+  };
 
   const [sideNavWidth, setSideNavWidth] = (0, _react.useState)({
-    'width': '0px'
+    'width': '0px',
+    'background-color': mobileBgColor ? mobileBgColor : bgColor
   });
 
   const openSideNav = () => {
     setSideNavWidth({
-      'width': '200px',
-      'border-right': '3px solid black',
+      'width': "".concat(sideBarWidth, "px"),
+      'background-color': mobileBgColor ? mobileBgColor : bgColor,
       'padding-right': '10px'
     });
   };
 
-  const closeNav = () => {
+  const closeSideNav = () => {
     setSideNavWidth({
-      'width': '0px'
+      'width': '0px',
+      '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);
+  }; //-----------------------------------
+
+
   return /*#__PURE__*/_react.default.createElement("nav", {
-    id: "nav",
-    className: "bg-brand-primary"
+    style: {
+      'background-color': bgColor
+    },
+    id: "nav"
   }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
     id: "sm-nav",
-    className: "relative flex items-center sm:hidden py-2"
+    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-2 flex items-center"
@@ -104,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",
@@ -131,11 +158,11 @@ const Nav = _ref => {
     id: "logo",
     className: "mx-auto"
   }, /*#__PURE__*/_react.default.createElement("img", {
-    className: "h-16 w-auto",
-    src: _logoWhite.default,
+    className: "h-16 w-auto " + mobileLogoBannerClasses,
+    src: mobileLogo,
     alt: " Logo "
   }))), /*#__PURE__*/_react.default.createElement("div", {
-    className: 'hidden sm:block items-center justify-between sm:items-stretch text-center '
+    className: 'hidden lg:block items-center justify-between sm:items-stretch text-center '
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: 'flex ' + firstRowClasses
   }, firstRow && firstRow.map(rowItem => {
@@ -168,18 +195,26 @@ const Nav = _ref => {
     }, rowItem.component);
   })))), asSideBar ? /*#__PURE__*/_react.default.createElement("div", {
     style: sideNavWidth,
-    className: "pt-12 bg-brand-primary fixed top-0 left-0 z-1 overflow-hidden h-full w-0 duration-500"
-  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    className: "text-white absolute top-1 right-3",
-    onClick: () => closeNav(),
+    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, {
+    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);
+  }), mobileItems && mobileItems.map(item => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "pb-5"
+    }, item.component);
   })) :
+  /*#__PURE__*/
+
   /* dropdown */
-  mobileMenuState && /*#__PURE__*/_react.default.createElement("div", {
-    className: "sm: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"