trepur_components 0.3.29 → 0.3.32

package/dist/components/AlertBar/index.js

@@ -2,16 +2,14 @@
 
 require("core-js/modules/es.object.assign.js");
 
-require("core-js/modules/web.dom-collections.iterator.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.alertBarProps = void 0;
 
-require("core-js/modules/es.array.includes.js");
+require("core-js/modules/web.dom-collections.iterator.js");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Icon = _interopRequireWildcard(require("../Icon"));
 
@@ -19,12 +17,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 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; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -53,17 +51,25 @@ const AlertBar = _ref => {
     alertBarProps
   } = _ref;
   if (alertBarProps == undefined) return;
+  const [alertBarStatus, setAlertBarStatus] = (0, _react.useState)({
+    status: 'open',
+    display: true
+  });
   const bgColor = (0, _classnames.default)({
-    'bg-brand-success': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'success',
-    'bg-brand-warning': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'warning',
-    'bg-brand-error': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'error',
-    'bg-brand-info-light': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'info',
-    'bg-brand-info-light': !['success', 'warning', 'error', 'info'].includes(alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type)
+    'bg-success': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'success',
+    'bg-warning': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'warning',
+    'bg-error': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'error',
+    'bg-info-light': (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.type) === 'info'
+  });
+  const alertBarState = (0, _classnames.default)({
+    'opacity-100': alertBarStatus.state === 'open',
+    'opacity-0': alertBarStatus.state === 'closed',
+    'hidden': alertBarStatus.display === false
   });
   const classList = (0, _classnames.default)({
     [bgColor]: bgColor,
     [alertBarProps.classes]: (alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.classes) !== undefined
-  }, 'w-parent flex rounded-md');
+  }, "w-parent flex py-2 transition-opactiy duration-700 ".concat(alertBarState));
   const textClassList = (0, _classnames.default)({
     'text-center': alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.textCenter,
     'pl-4': !(alertBarProps !== null && alertBarProps !== void 0 && alertBarProps.textCenter),
@@ -78,7 +84,14 @@ const AlertBar = _ref => {
   }, 'pt-3 pl-8');
 
   const closeAlertBar = () => {
-    document.getElementById(alertBarProps !== null && alertBarProps !== void 0 && alertBarProps.id ? alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.id : 'alertBar').classList.add('hidden'); // alertBarProps?.onDismissClick && alertBarProps?.onDismissClick
+    setAlertBarStatus({
+      state: 'closed',
+      display: alertBarStatus.display
+    });
+    setTimeout(() => setAlertBarStatus({
+      state: 'closed',
+      display: false
+    }), 700);
   };
 
   alertBarProps.dismissIcon = _objectSpread(_objectSpread({}, alertBarProps === null || alertBarProps === void 0 ? void 0 : alertBarProps.dismissIcon), {}, {

package/dist/components/Breadcrumbs/index.js

@@ -49,7 +49,7 @@ const Breadcrumbs = _ref => {
     }, link.name) : /*#__PURE__*/_react.default.createElement("p", {
       className: "px-1 py-1"
     }, /*#__PURE__*/_react.default.createElement("a", {
-      className: "text-social-facebook hover:underline",
+      className: "text-facebook hover:underline",
       href: link.href
     }, link.name)))), i + 1 < linksLength && /*#__PURE__*/_react.default.createElement("li", {
       className: "h-8"

package/dist/components/Collapsible/index.js

@@ -47,16 +47,32 @@ const collapsibleProps = {
   contentBgColor: _propTypes.default.string,
   contentTextColor: _propTypes.default.string,
   showBottomLine: _propTypes.default.bool,
-  iconProps: _propTypes.default.object,
-  children: _propTypes.default.any
+  iconProps: _propTypes.default.object
 };
 exports.collapsibleProps = collapsibleProps;
 
 const Collapsible = _ref => {
   let {
-    collapsibleProps
+    collapsibleProps,
+    children
   } = _ref;
   const [expanded, setExpanded] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    var coll = document.getElementsByClassName("collapsible");
+    var i;
+
+    for (i = 0; i < coll.length; i++) {
+      coll[i].addEventListener("click", function () {
+        var content = this.nextElementSibling;
+
+        if (content.style.maxHeight === '0px') {
+          content.style.maxHeight = content.scrollHeight + "px";
+        } else {
+          content.style.maxHeight = '0px';
+        }
+      });
+    }
+  });
   if (collapsibleProps == undefined) return;
   const titleBold = collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.boldTitle ? 'text-bold' : '';
   const padding = (0, _classnames.default)({
@@ -69,7 +85,7 @@ const Collapsible = _ref => {
   const borders = (0, _classnames.default)({
     'border-b': collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.borderBottom,
     'border-t': collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.borderTop,
-    [collapsibleProps.textColor]: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.textColor,
+    [collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.textColor]: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.textColor,
     [collapsibleProps.bgColor]: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.bgColor,
     'text-white': !(collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.textColor),
     'bg-light-grey': !collapsibleProps.bgColor,
@@ -77,22 +93,39 @@ const Collapsible = _ref => {
     [collapsibleProps.hoverBgColor]: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.hoverBgColor,
     'hover:text-white': !(collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.hoverTextColor),
     'hover:bg-light-grey': !collapsibleProps.hoverBgColor
-  }, 'w-auto flex text-center');
+  }, ' w-auto flex text-center collapsible');
   const contentWrapperClasses = (0, _classnames.default)({
     'border-b': collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.showBottomLine,
     [collapsibleProps.contentBgColor]: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.contentBgColor,
     'bg-light-grey': !(collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.contentBgColor),
     [collapsibleProps.contentTextColor]: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.contentTextColor,
-    'text-white': collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.contentTextColor
-  }, 'expandable w-auto');
+    'text-white': !(collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.contentTextColor),
+    'max-h-max my-2': expanded,
+    'max-h-0': !expanded
+  }, 'w-auto overflow-hidden px-4');
+
+  const expandItem = e => {
+    const content = e.currentTarget.nextElementSibling;
+
+    if (!expanded) {
+      content.style.maxHeight = "".concat(content.scrollHeight, "px");
+    } else {
+      content.style.maxHeight = '0px';
+    }
+
+    setExpanded(!expanded);
+  };
+
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.id) && {
     id: collapsibleProps.id
   }, {
     className: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.classes
-  }), /*#__PURE__*/_react.default.createElement("div", {
-    onClick: () => setExpanded(!expanded),
+  }), /*#__PURE__*/_react.default.createElement("div", _extends({}, (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.id) && {
+    id: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.id
+  }, {
+    onClick: e => expandItem(e),
     className: borders
-  }, (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.iconProps) && /*#__PURE__*/_react.default.createElement("div", {
+  }), (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.iconProps) && /*#__PURE__*/_react.default.createElement("div", {
     className: "pl-4 text-left ".concat(padding, " ").concat(textSubstitutePadding)
   }, /*#__PURE__*/_react.default.createElement(_index.default, {
     iconProps: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.iconProps
@@ -110,9 +143,12 @@ const Collapsible = _ref => {
     iconProps: {
       type: 'chevron-down'
     }
-  })))), (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.isDropdown) && expanded && /*#__PURE__*/_react.default.createElement("div", {
-    className: contentWrapperClasses
-  }, collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.children));
+  })))), (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.isDropdown) && /*#__PURE__*/_react.default.createElement("div", {
+    className: contentWrapperClasses,
+    style: {
+      'transition': 'max-height 0.2s ease-out'
+    }
+  }, children));
 };
 
 Collapsible.propTypes = {

package/dist/components/Greeting/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.parse-int.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 greetingProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  morningMessage: _propTypes.default.string,
+  afternoonMessage: _propTypes.default.string,
+  eveningMessage: _propTypes.default.string
+};
+
+const Greeting = _ref => {
+  let {
+    greetingProps
+  } = _ref;
+  const today = new Date();
+  const hours = ('0' + today.getHours()).slice(-2);
+  const minutes = ('0' + today.getMinutes()).slice(-2);
+  const seconds = ('0' + today.getSeconds()).slice(-2);
+  const time = parseInt("".concat(hours).concat(minutes).concat(seconds));
+  let message;
+
+  if (time < 120000) {
+    message = (greetingProps === null || greetingProps === void 0 ? void 0 : greetingProps.morningMessage) || 'Good morning';
+  } else if (time > 115959 && time < 170000) {
+    message = (greetingProps === null || greetingProps === void 0 ? void 0 : greetingProps.afternoonMessage) || 'Good afternoon';
+  } else if (time > 165959) {
+    message = (greetingProps === null || greetingProps === void 0 ? void 0 : greetingProps.afternoonMessage) || 'Good evening';
+  }
+
+  const classList = (0, _classnames.default)({
+    [greetingProps === null || greetingProps === void 0 ? void 0 : greetingProps.classes]: greetingProps === null || greetingProps === void 0 ? void 0 : greetingProps.classes
+  });
+  return /*#__PURE__*/_react.default.createElement("p", _extends({}, (greetingProps === null || greetingProps === void 0 ? void 0 : greetingProps.id) && {
+    id: greetingProps.id
+  }, {
+    className: classList
+  }), message);
+};
+
+Greeting.propTypes = {
+  greetingProps: _propTypes.default.shape(_objectSpread({}, greetingProps))
+};
+var _default = Greeting;
+exports.default = _default;

package/dist/components/Image/index.js

@@ -37,10 +37,36 @@ const Image = _ref => {
   let {
     imageProps
   } = _ref;
+  const widthClassList = (0, _classnames.default)({
+    'w-6': imageProps.width === 1,
+    'w-10': imageProps.width === 2,
+    'w-14': imageProps.width === 3,
+    'w-16': imageProps.width === 4,
+    'w-20': imageProps.width === 5,
+    'w-24': imageProps.width === 6,
+    'w-28': imageProps.width === 7,
+    'w-32': imageProps.width === 8,
+    'w-36': imageProps.width === 9,
+    'w-40': imageProps.width === 10,
+    'w-44': imageProps.width === 11
+  });
+  const heightClassList = (0, _classnames.default)({
+    'h-6': imageProps.height === 1,
+    'h-10': imageProps.height === 2,
+    'h-14': imageProps.height === 3,
+    'h-16': imageProps.height === 4,
+    'h-20': imageProps.height === 5,
+    'h-24': imageProps.height === 6,
+    'h-28': imageProps.height === 7,
+    'h-32': imageProps.height === 8,
+    'h-36': imageProps.height === 9,
+    'h-40': imageProps.height === 10,
+    'h-44': imageProps.height === 11
+  });
   const classList = (0, _classnames.default)({
     [imageProps === null || imageProps === void 0 ? void 0 : imageProps.classes]: imageProps === null || imageProps === void 0 ? void 0 : imageProps.classes,
     'rounded-full': imageProps === null || imageProps === void 0 ? void 0 : imageProps.rounded
-  });
+  }, widthClassList, heightClassList);
   return /*#__PURE__*/_react.default.createElement("img", _extends({}, (imageProps === null || imageProps === void 0 ? void 0 : imageProps.id) && {
     id: imageProps === null || imageProps === void 0 ? void 0 : imageProps.id
   }, {

package/dist/components/Nav/index.js

@@ -141,7 +141,7 @@ const Nav = _ref => {
     [bgColor]: bgColor,
     'bg-blue': !bgColor,
     [borderBottomColor]: borderBottomColor,
-    'border-b-social-facebook': !borderBottomColor
+    'border-b-facebook': !borderBottomColor
   });
   const desktopClassList = (0, _classnames.default)({
     'fixed w-full z-50 top-0 mt-0': fixedTop,

package/dist/components/StarRating/index.js

@@ -62,7 +62,7 @@ const StarRating = _ref => {
           classes: "".concat(iconClassList, " checked"),
           type: 'star',
           size: starRatingProps === null || starRatingProps === void 0 ? void 0 : (_starRatingProps$icon2 = starRatingProps.iconProps) === null || _starRatingProps$icon2 === void 0 ? void 0 : _starRatingProps$icon2.size,
-          colour: 'text-brand-gold'
+          colour: 'text-gold'
         }
       }));
     }
@@ -83,7 +83,7 @@ const StarRating = _ref => {
           classes: "".concat(iconClassList, " unchecked opacity-30 gold"),
           type: 'star',
           size: starRatingProps === null || starRatingProps === void 0 ? void 0 : (_starRatingProps$icon3 = starRatingProps.iconProps) === null || _starRatingProps$icon3 === void 0 ? void 0 : _starRatingProps$icon3.size,
-          colour: 'text-brand-gold'
+          colour: 'text-gold'
         }
       }));
     }

package/dist/components/TextAndTitle/index.js

@@ -181,10 +181,10 @@ const TextAndTitle = _ref => {
     'hover:border-black hover:border-dashed': (textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.withLiveUpdates) && !isInEditingMode
   }, 'border-2 border-transparent');
   const titleWrapperClassList = (0, _classnames.default)({
-    'md:w-1/2 md:text-center px-8': textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.isHorizontal
+    'md:w-1/2 md:text-center md:px-8': textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.isHorizontal
   });
   const textWrapperClassList = (0, _classnames.default)({
-    'md:w-1/2 md:text-center md:py-8 px-8': textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.isHorizontal
+    'md:w-1/2 md:text-center md:py-8 md:px-8': textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.isHorizontal
   });
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, (textAndTitleProps === null || textAndTitleProps === void 0 ? void 0 : textAndTitleProps.id) && {
     id: textAndTitleProps.id

package/dist/index.js

@@ -99,6 +99,12 @@ Object.defineProperty(exports, "FyreCard", {
     return _FyreCard.default;
   }
 });
+Object.defineProperty(exports, "Greeting", {
+  enumerable: true,
+  get: function get() {
+    return _Greeting.default;
+  }
+});
 Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function get() {
@@ -258,6 +264,8 @@ var _FooterBar = _interopRequireDefault(require("./components/FooterBar"));
 
 var _FyreCard = _interopRequireDefault(require("./components/FyreCard"));
 
+var _Greeting = _interopRequireDefault(require("./components/Greeting"));
+
 var _Icon = _interopRequireDefault(require("./components/Icon"));
 
 var _Image = _interopRequireDefault(require("./components/Image"));

package/package.json

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