trepur_components 0.2.73 → 0.3.1

package/dist/components/SocialBlock/index.js

@@ -71,51 +71,67 @@ const SocialBlock = _ref => {
   });
   const socialButtons = [{
     classes: 'mx-2 w-16 py-4 border border-1',
-    buttonBgColor: "#3b5999",
-    buttonCenterIcon: "facebook-f",
-    buttonTextColor: "white",
-    buttonBorderColor: "#3b5999",
-    buttonType: "social",
-    hoverButtonBgColor: "white",
-    hoverButtonBorderColor: "#3b5999",
-    hoverButtonTextColor: "#3b5999",
-    iconBrand: true,
-    url: "https://www.facebook.com/rupert.bennett"
+    bgColor: "bg-social-facebook",
+    textColor: "text-white",
+    borderColor: "border-social-facebook",
+    type: "social",
+    hoverBgColor: "hover:bg-white",
+    hoverBorderColor: "hover:border-social-facebook",
+    hoverTextColor: "hover:text-social-facebook",
+    url: "https://www.facebook.com/rupert.bennett",
+    iconProps: {
+      type: "facebook-f",
+      brand: true,
+      size: 2,
+      classes: 'mx-auto'
+    }
   }, {
     classes: 'mx-2 w-16 py-4 border border-1',
-    buttonBgColor: "#0e76a8",
-    buttonCenterIcon: "linkedin-in",
-    buttonTextColor: "white",
-    buttonBorderColor: "#0e76a8",
-    buttonType: "social",
-    hoverButtonBgColor: "white",
-    hoverButtonBorderColor: "#0e76a8",
-    hoverButtonTextColor: "#0e76a8",
-    iconBrand: true,
-    url: "https://www.linkedin.com/in/rupert-bennett"
+    bgColor: "bg-social-linkedin",
+    textColor: "text-white",
+    borderColor: "border-social-linkedin",
+    type: "social",
+    hoverBgColor: "hover:bg-white",
+    hoverBorderColor: "hover:border-social-linkedin",
+    hoverTextColor: "hover:text-social-linkedin",
+    url: "https://www.linkedin.com/in/rupert-bennett",
+    iconProps: {
+      brand: true,
+      type: "linkedin-in",
+      size: 2,
+      classes: 'mx-auto'
+    }
   }, {
     classes: 'mx-2 w-16 py-4 border border-1',
-    buttonBgColor: "#000000",
-    buttonCenterIcon: "github",
-    buttonTextColor: "white",
-    buttonBorderColor: "#000000",
-    buttonType: "social",
-    hoverButtonBgColor: "white",
-    hoverButtonBorderColor: "black",
-    hoverButtonTextColor: "#000000",
-    iconBrand: true,
-    url: "https://github.com/irupertbennett"
+    bgColor: "bg-black",
+    textColor: "text-white",
+    borderColor: "border-black",
+    type: "social",
+    hoverBgColor: "hover:bg-white",
+    hoverBorderColor: "hover:border-black",
+    hoverTextColor: "hover:text-black",
+    url: "https://github.com/irupertbennett",
+    iconProps: {
+      brand: true,
+      type: "github",
+      size: 2,
+      classes: 'mx-auto'
+    }
   }, {
     classes: 'mx-2 w-16 py-4 border border-1',
-    buttonBgColor: "#dc143c",
-    buttonCenterIcon: "envelope",
-    buttonTextColor: "white",
-    buttonBorderColor: "#dc143c",
-    buttonType: "social",
-    hoverButtonBgColor: "white",
-    hoverButtonBorderColor: "#dc143c",
-    hoverButtonTextColor: "#dc143c",
-    url: "mailto:irupertbennett@gmail.com?subject=rupertbennett.com-&body=Referred from rupertbennett.com"
+    bgColor: "bg-brand-error",
+    textColor: "text-white",
+    borderColor: "border-brand-error",
+    type: "social",
+    hoverBgColor: "hover:bg-white",
+    hoverBorderColor: "hover:border-brand-error",
+    hoverTextColor: "hover:text-brand-error",
+    url: "mailto:irupertbennett@gmail.com?subject=rupertbennett.com-&body=Referred from rupertbennett.com",
+    iconProps: {
+      type: "envelope",
+      size: 2,
+      classes: 'mx-auto'
+    }
   }];
 
   const toggleEditState = () => {
@@ -162,40 +178,48 @@ const SocialBlock = _ref => {
   }, {
     className: classList
   }), withLiveUpdates && isInEditingMode ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Input.default, {
-    id: "title",
-    classes: editTitleClasses,
-    inputClasses: editInputClasses,
-    autoFocus: true,
-    value: componentData.title.text,
-    onChange: e => handleChange(e),
-    type: "text"
+    inputProps: {
+      id: 'title',
+      classes: editTitleClasses,
+      inputClasses: editInputClasses,
+      autoFocus: true,
+      value: componentData.title.text,
+      onChange: e => handleChange(e),
+      type: "text"
+    }
   }), /*#__PURE__*/_react.default.createElement(_Input.default, {
-    id: "text",
-    classes: editTextClasses,
-    inputClasses: editInputClasses,
-    value: componentData.text.text,
-    onChange: e => handleChange(e),
-    type: "text"
+    inputProps: {
+      id: 'text',
+      classes: editTextClasses,
+      inputClasses: editInputClasses,
+      value: componentData.text.text,
+      onChange: e => handleChange(e),
+      type: "text"
+    }
   }), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    buttonClasses: "mt-4",
-    buttonText: "Save",
-    buttonOnClick: handleButtonSave,
-    buttonBgColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.bgColor,
-    buttonBorderColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.borderColor,
-    buttonTextColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.textColor,
-    buttonHoverTextColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.hoverTextColor,
-    buttonHoverBorderColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.hoverBorderColor,
-    buttonHoverBgColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.hoverBgColor
+    buttonProps: {
+      classes: 'mt-4',
+      text: 'Save',
+      onClick: handleButtonSave,
+      bgColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.bgColor,
+      borderColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.borderColor,
+      textColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.textColor,
+      hoverTextColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.hoverTextColor,
+      hoverBorderColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.hoverBorderColor,
+      hoverBgColor: saveButtonProps === null || saveButtonProps === void 0 ? void 0 : saveButtonProps.hoverBgColor
+    }
   }), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    buttonClasses: "mt-4 ml-4",
-    buttonText: "Cancel",
-    buttonOnClick: handleButtonCancel,
-    buttonBgColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.bgColor,
-    buttonBorderColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.borderColor,
-    buttonTextColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.textColor,
-    buttonHoverTextColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.hoverTextColor,
-    buttonHoverBorderColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.hoverBorderColor,
-    buttonHoverBgColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.hoverBgColor
+    buttonProps: {
+      classes: 'mt-4 ml-4',
+      text: 'Cancel',
+      onClick: handleButtonCancel,
+      bgColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.bgColor,
+      borderColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.borderColor,
+      textColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.textColor,
+      hoverTextColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.hoverTextColor,
+      hoverBorderColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.hoverBorderColor,
+      hoverBgColor: cancelButtonProps === null || cancelButtonProps === void 0 ? void 0 : cancelButtonProps.hoverBgColor
+    }
   })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     onMouseOver: () => toggleHoverState(),
     onMouseOut: () => toggleHoverState(),
@@ -210,20 +234,20 @@ const SocialBlock = _ref => {
   }, socialButtons && socialButtons.map((button, i) => {
     return /*#__PURE__*/_react.default.createElement(_Button.default, {
       key: "".concat(i, "_button"),
-      buttonClasses: button.classes,
-      buttonBgColor: button.buttonBgColor,
-      buttonCenterIcon: button.buttonCenterIcon,
-      buttonTextColor: button.buttonTextColor,
-      buttonBorderColor: button.buttonBorderColor,
-      buttonType: button.buttonType,
-      buttonHoverBgColor: button.hoverButtonBgColor,
-      buttonHoverBorderColor: button.hoverButtonBorderColor,
-      buttonHoverTextColor: button.hoverButtonTextColor,
-      buttonOnClick: button.onClick,
-      buttonUrl: button.url,
-      buttonBorder: true,
-      buttonIconBrand: button.iconBrand,
-      iconSize: 2
+      buttonProps: {
+        classes: button.classes,
+        bgColor: button.bgColor,
+        textColor: button.textColor,
+        borderColor: button.borderColor,
+        type: button.type,
+        hoverBgColor: button.hoverBgColor,
+        hoverBorderColor: button.hoverBorderColor,
+        hoverTextColor: button.hoverTextColor,
+        onClick: button.onClick,
+        url: button.url,
+        border: true,
+        centerIcon: button.iconProps
+      }
     });
   }))));
 };

package/dist/components/StarRating/index.js

@@ -1,50 +1,73 @@
 "use strict";
 
+require("core-js/modules/es.object.assign.js");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.starRatingProps = exports.default = void 0;
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
-require("core-js/modules/es.object.assign.js");
-
 var _react = _interopRequireDefault(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-require("../index.css");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
 
 require("./index.css");
 
+require("../index.css");
+
 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 || 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 starRatingProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  stars: _propTypes.default.number,
+  iconProps: _propTypes.default.object
+};
+exports.starRatingProps = starRatingProps;
+
 const StarRating = _ref => {
+  var _starRatingProps$icon;
+
   let {
-    id,
-    classes,
-    stars,
-    size,
-    iconClasses
+    starRatingProps
   } = _ref;
-  let classList = 'flex ';
-  classList += classes ? classes : '';
-  let iconClassList = iconClasses ? iconClasses : '';
+  if (starRatingProps == undefined) return;
+  const classList = (0, _classnames.default)({
+    [starRatingProps.classes]: starRatingProps === null || starRatingProps === void 0 ? void 0 : starRatingProps.classes
+  }, 'flex');
+  const iconClassList = (0, _classnames.default)({
+    [starRatingProps.iconProps.classes]: starRatingProps === null || starRatingProps === void 0 ? void 0 : (_starRatingProps$icon = starRatingProps.iconProps) === null || _starRatingProps$icon === void 0 ? void 0 : _starRatingProps$icon.classes
+  });
 
   const getStars = () => {
     const starsArr = [];
 
-    for (var i = 0; i < stars; i++) {
-      starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
-        key: "unchecked_star_".concat(i + 0),
-        id: "checked-".concat(i),
-        classes: "".concat(iconClassList, " checked"),
-        type: "star"
-      }, size && {
-        size: size
-      })));
+    for (var i = 0; i < (starRatingProps === null || starRatingProps === void 0 ? void 0 : starRatingProps.stars); i++) {
+      var _starRatingProps$icon2;
+
+      starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        iconProps: {
+          id: "unchecked-".concat(i),
+          key: "unchecked_star_".concat(i + 0),
+          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
+        }
+      }));
     }
 
     return starsArr;
@@ -53,14 +76,18 @@ const StarRating = _ref => {
   const getStarsChecked = () => {
     const starsArr = [];
 
-    for (var i = 0; i < 5 - stars; i++) {
-      starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, _extends({
-        key: "checked_star_".concat(i + 0),
-        classes: "".concat(iconClassList, " unchecked"),
-        type: "star"
-      }, size && {
-        size: size
-      })));
+    for (var i = 0; i < 5 - (starRatingProps === null || starRatingProps === void 0 ? void 0 : starRatingProps.stars); i++) {
+      var _starRatingProps$icon3;
+
+      starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        iconProps: {
+          id: "checked-".concat(i),
+          key: "checked_star_".concat(i + 0),
+          classes: "".concat(iconClassList, " unchecked"),
+          type: 'star',
+          size: starRatingProps === null || starRatingProps === void 0 ? void 0 : (_starRatingProps$icon3 = starRatingProps.iconProps) === null || _starRatingProps$icon3 === void 0 ? void 0 : _starRatingProps$icon3.size
+        }
+      }));
     }
 
     return starsArr;
@@ -71,12 +98,15 @@ const StarRating = _ref => {
     return starArray;
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
-    id: id
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, (starRatingProps === null || starRatingProps === void 0 ? void 0 : starRatingProps.id) && {
+    id: starRatingProps === null || starRatingProps === void 0 ? void 0 : starRatingProps.id
   }, {
     className: classList
   }), getAllStars());
 };
 
+StarRating.propTypes = {
+  starRatingProps: _propTypes.default.shape(_objectSpread({}, starRatingProps))
+};
 var _default = StarRating;
 exports.default = _default;

package/dist/components/Testimonial/index.js

@@ -9,6 +9,10 @@ require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Image = _interopRequireDefault(require("../Image"));
+
 require("../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,9 +24,8 @@ const Testimonial = _ref => {
     id,
     classes,
     imageClasses,
-    image,
-    altText,
     text,
+    imageProps,
     companyName,
     position,
     date,
@@ -31,32 +34,33 @@ const Testimonial = _ref => {
     authorsName,
     authorsPosition,
     bgColor,
-    textColor
+    textColor,
+    authorTextColor
   } = _ref;
-  const classList = classes + ' text-center';
-  const imageClassList = imageClasses + ' mx-auto rounded-full w-32 h-32'; //---------- Styling ---------------
-
-  const styles = {
-    'backgroundColor': bgColor,
-    'color': textColor
-  }; //-----------------------------------
-
+  const classList = (0, _classnames.default)({
+    [classes]: classes,
+    [bgColor]: bgColor,
+    'bg-white': !bgColor,
+    [textColor]: textColor,
+    'text-black': !textColor
+  }, 'text-center');
+  const imageClassList = (0, _classnames.default)({
+    [imageClasses]: imageClasses
+  }, 'mx-auto rounded-full w-32 h-32');
+  imageProps.classes += imageClassList;
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {
-    style: styles,
     className: classList
-  }), /*#__PURE__*/_react.default.createElement("img", {
-    className: imageClassList,
-    src: image,
-    alt: altText
+  }), /*#__PURE__*/_react.default.createElement(_Image.default, {
+    imageProps: imageProps
   }), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h2", {
     className: "text-md md:text-lg"
   }, companyName, " "), /*#__PURE__*/_react.default.createElement("p", {
     className: "text-md md:text-lg"
   }, position), /*#__PURE__*/_react.default.createElement("p", null, positionStartDate, " - ", positionEndDate), /*#__PURE__*/_react.default.createElement("p", null, text), /*#__PURE__*/_react.default.createElement("p", {
-    className: "text-grey"
-  }, authorsName, " - ", authorsPosition, ":  ", date)));
+    className: authorTextColor
+  }, authorsName, " - ", authorsPosition, ": ", date)));
 };
 
 var _default = Testimonial;