trepur_components 0.3.0 → 0.3.3

package/dist/components/CardWithTopImage/index.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _index = _interopRequireDefault(require("../Image/index"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("../index.css");
 
 require("./index.css");
@@ -23,42 +25,37 @@ const CardWithTopImage = _ref => {
   let {
     id,
     contentId,
-    imageId,
     classes,
     imageWrapperClasses,
-    imageClasses,
     contentClasses,
-    image,
-    altText,
-    roundedCard,
-    roundedImage,
     bordered,
-    shadow,
-    children
+    children,
+    imageProps
   } = _ref;
-  let classList = 'w-full px-4 ';
-  classList += classes ? classes : '';
-  let imageWrapperClassList = imageWrapperClasses && imageWrapperClasses;
-  let imageClassList = 'flex mx-auto w-24 bg-white p-4 ';
-  imageClassList += roundedImage ? 'rounded-full ' : '';
-  imageClassList += imageClasses;
-  let contentClassList = 'pt-12 px-4 h-auto pb-16 -mt-12 bg-white ';
-  contentClassList += shadow ? ' ' : '';
-  contentClassList += roundedCard ? 'rounded-2xl ' : '';
-  contentClassList += bordered ? 'border border-grey border-opacity-100 ' : '';
-  contentClassList += contentClasses ? contentClasses : '';
+  const classList = (0, _classnames.default)({
+    [classes]: classes
+  }, 'w-full px-4');
+  const imageWrapperClassList = (0, _classnames.default)({
+    [imageWrapperClasses]: imageWrapperClasses
+  });
+  const imageClassList = (0, _classnames.default)({
+    [imageProps.classes]: imageProps.classes
+  }, 'flex mx-auto w-24 bg-white p-4');
+  const contentClassList = (0, _classnames.default)({
+    'border border-grey border-opacity-100': bordered,
+    [contentClasses]: contentClasses
+  }, 'pt-12 px-4 h-auto pb-16 -mt-12 bg-white');
+  imageProps.classes = imageProps.classes + ' ' + imageClassList;
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {
     className: classList
-  }), /*#__PURE__*/_react.default.createElement("div", _extends({}, imageId && {
-    id: imageId + '_imageId'
+  }), /*#__PURE__*/_react.default.createElement("div", _extends({}, imageProps.id && {
+    id: imageProps.id + '_imageId'
   }, {
     className: imageWrapperClassList
   }), /*#__PURE__*/_react.default.createElement(_index.default, {
-    altText: altText,
-    image: image,
-    classes: imageClassList
+    imageProps: imageProps
   })), /*#__PURE__*/_react.default.createElement("div", _extends({}, contentId && {
     id: contentId + '_content'
   }, {

package/dist/components/Carousel/index.js

@@ -95,8 +95,10 @@ const Carousel = _ref => {
         return slider === null || slider === void 0 ? void 0 : (_slider$current = slider.current) === null || _slider$current === void 0 ? void 0 : _slider$current.slickNext();
       }
     }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      type: nextArrowIcon,
-      size: nextArrowIconSize
+      iconProps: {
+        type: nextArrowIcon,
+        size: nextArrowIconSize
+      }
     }));
   };
 
@@ -111,8 +113,10 @@ const Carousel = _ref => {
         return slider === null || slider === void 0 ? void 0 : (_slider$current2 = slider.current) === null || _slider$current2 === void 0 ? void 0 : _slider$current2.slickPrev();
       }
     }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      type: previousArrowIcon,
-      size: previousArrowIconSize
+      iconProps: {
+        type: previousArrowIcon,
+        size: previousArrowIconSize
+      }
     }));
   };
 

package/dist/components/CarouselV2/index.js

@@ -65,7 +65,7 @@ const CarouselV2 = _ref => {
     dots
   } = _ref;
   const classList = "".concat(classes);
-  const dotClasses = "w-4 h-4 cursor-pointer focus:".concat(dots.activeColours, " rounded-full mx-1 ");
+  const dotClasses = "w-4 h-4 cursor-pointer focus:".concat(dots === null || dots === void 0 ? void 0 : dots.activeColours, " rounded-full mx-1 ");
   const [currentSlide, setCurrentSlide] = (0, _react.useState)(0);
   const [loaded, setLoaded] = (0, _react.useState)(false);
   const [sliderRef, instanceRef] = (0, _react2.useKeenSlider)({
@@ -121,7 +121,7 @@ const CarouselV2 = _ref => {
   }), /*#__PURE__*/_react.default.createElement("div", {
     ref: sliderRef,
     className: "keen-slider"
-  }, slides && slides), arrows.visible && loaded && instanceRef.current && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Arrow, {
+  }, slides && slides), (arrows === null || arrows === void 0 ? void 0 : arrows.visible) && loaded && instanceRef.current && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Arrow, {
     left: true,
     onClick: e => {
       var _instanceRef$current;
@@ -138,7 +138,7 @@ const CarouselV2 = _ref => {
     },
     disabled: currentSlide === instanceRef.current.track.details.slides.length - 1,
     arrows: arrows
-  }))), dots.visible && loaded && instanceRef.current && /*#__PURE__*/_react.default.createElement("div", {
+  }))), (dots === null || dots === void 0 ? void 0 : dots.visible) && loaded && instanceRef.current && /*#__PURE__*/_react.default.createElement("div", {
     className: "flex py-4 justify-center"
   }, [...Array(instanceRef.current.track.details.slides.length).keys()].map(idx => {
     return /*#__PURE__*/_react.default.createElement("button", {
@@ -148,23 +148,25 @@ const CarouselV2 = _ref => {
 
         (_instanceRef$current3 = instanceRef.current) === null || _instanceRef$current3 === void 0 ? void 0 : _instanceRef$current3.moveToIdx(idx);
       },
-      className: dotClasses + (currentSlide === idx ? " active ".concat(dots.activeColours) : " ".concat(dots.colours))
+      className: dotClasses + (currentSlide === idx ? " active ".concat(dots === null || dots === void 0 ? void 0 : dots.activeColours) : " ".concat(dots === null || dots === void 0 ? void 0 : dots.colours))
     });
   })));
 };
 
 function Arrow(props) {
-  const disabeld = props.disabled ? " arrow--disabled ".concat(props.arrows.disabledColours) : "";
+  var _props$arrows, _props$arrows2, _props$arrows3;
+
+  const disabeld = props.disabled ? " arrow--disabled ".concat(props === null || props === void 0 ? void 0 : (_props$arrows = props.arrows) === null || _props$arrows === void 0 ? void 0 : _props$arrows.disabledColours) : "";
   return /*#__PURE__*/_react.default.createElement("svg", {
-    onClick: props.onClick,
+    onClick: props === null || props === void 0 ? void 0 : props.onClick,
     className: "arrow w-12 translate-y-2/4 h-12 absolute cursor-pointer  top-1/2 ".concat(props.left ? "arrow--left left-1.5" : "arrow--right left-auto right-1.5", " ").concat(disabeld),
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24"
-  }, props.left && /*#__PURE__*/_react.default.createElement("path", {
-    className: "".concat(props.arrows.colours),
+  }, (props === null || props === void 0 ? void 0 : props.left) && /*#__PURE__*/_react.default.createElement("path", {
+    className: "".concat(props === null || props === void 0 ? void 0 : (_props$arrows2 = props.arrows) === null || _props$arrows2 === void 0 ? void 0 : _props$arrows2.colours),
     d: "M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"
-  }), !props.left && /*#__PURE__*/_react.default.createElement("path", {
-    className: "".concat(props.arrows.colours),
+  }), !(props !== null && props !== void 0 && props.left) && /*#__PURE__*/_react.default.createElement("path", {
+    className: "".concat(props === null || props === void 0 ? void 0 : (_props$arrows3 = props.arrows) === null || _props$arrows3 === void 0 ? void 0 : _props$arrows3.colours),
     d: "M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"
   }));
 }

package/dist/components/Collapsible/index.js

@@ -5,7 +5,7 @@ require("core-js/modules/es.object.assign.js");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.collapsibleProps = void 0;
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
@@ -13,6 +13,10 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _index = _interopRequireDefault(require("../Icon/index"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -21,93 +25,100 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 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 collapsibleProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  title: _propTypes.default.string,
+  subtitle: _propTypes.default.string,
+  isDropdown: _propTypes.default.bool,
+  textColor: _propTypes.default.string,
+  bgColor: _propTypes.default.string,
+  hoverTextColor: _propTypes.default.string,
+  hoverBgColor: _propTypes.default.string,
+  boldTitle: _propTypes.default.bool,
+  borderTop: _propTypes.default.bool,
+  borderBottom: _propTypes.default.bool,
+  contentBgColor: _propTypes.default.string,
+  contentTextColor: _propTypes.default.string,
+  showBottomLine: _propTypes.default.bool,
+  iconProps: _propTypes.default.object,
+  children: _propTypes.default.any
+};
+exports.collapsibleProps = collapsibleProps;
+
 const Collapsible = _ref => {
   let {
-    id,
-    classes,
-    title,
-    subtitle,
-    isDropdown,
-    textColor,
-    bgColor,
-    hoverTextColor,
-    hoverBgColor,
-    icon,
-    boldTitle,
-    borderTop,
-    borderBottom,
-    contentBgColor,
-    contentTextColor,
-    showBottomLine,
-    iconSize,
-    children
+    collapsibleProps
   } = _ref;
   const [expanded, setExpanded] = (0, _react.useState)(false);
-  const [styles, setStyles] = (0, _react.useState)({
-    'backgroundColor': bgColor ? bgColor : 'grey',
-    color: textColor ? textColor : 'white'
+  if (collapsibleProps == undefined) return;
+  const titleBold = collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.boldTitle ? 'text-bold' : '';
+  const padding = (0, _classnames.default)({
+    'pt-7': (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.title) && (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.subtitle),
+    'pt-4': (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.title) && !(collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.subtitle)
   });
-  const [contentStyles, setContentStyles] = (0, _react.useState)({
-    'backgroundColor': contentBgColor ? contentBgColor : 'white',
-    color: contentTextColor ? contentTextColor : 'black'
+  const textSubstitutePadding = (0, _classnames.default)({
+    'pb-4': !(collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.title) && !(collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.subtitle)
   });
-
-  const toggleExpanded = () => {
-    setExpanded(!expanded);
-  };
-
-  const setHoverState = isHovering => {
-    if (isHovering) {
-      setStyles({
-        'backgroundColor': hoverBgColor ? hoverBgColor : 'black',
-        color: hoverTextColor ? hoverTextColor : 'white'
-      });
-    } else {
-      setStyles({
-        'backgroundColor': bgColor ? bgColor : 'grey',
-        color: textColor ? textColor : 'white'
-      });
-    }
-  };
-
-  const padding = title && subtitle ? 'pt-7' : 'pt-4';
-  const sizeIcon = iconSize ? iconSize : '1';
-  const textSubstitutePadding = !title && !subtitle ? 'pb-4' : '';
-  let borders = '';
-  borders += borderBottom ? 'border-b ' : '';
-  borders += borderTop ? 'border-t ' : '';
-  let contentWrapperClasses = 'expandable w-auto ';
-  contentWrapperClasses += showBottomLine ? 'border-b' : '';
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
-    id: id
+  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.bgColor]: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.bgColor,
+    'text-white': !(collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.textColor),
+    'bg-light-grey': !collapsibleProps.bgColor,
+    [collapsibleProps.hoverTextColor]: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.hoverTextColor,
+    [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');
+  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');
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.id) && {
+    id: collapsibleProps.id
   }, {
-    className: classes
+    className: collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.classes
   }), /*#__PURE__*/_react.default.createElement("div", {
-    style: styles,
-    onMouseOver: () => setHoverState(true),
-    onMouseOut: () => setHoverState(false),
-    onClick: () => toggleExpanded(),
-    className: 'w-auto flex text-center ' + borders
-  }, icon && /*#__PURE__*/_react.default.createElement("div", {
-    className: 'pl-4 text-left ' + padding + ' ' + textSubstitutePadding
-  }, /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_index.default, {
-    type: icon,
-    size: sizeIcon
-  }))), title || subtitle ? /*#__PURE__*/_react.default.createElement("div", {
+    onClick: () => setExpanded(!expanded),
+    className: borders
+  }, (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
+  })), collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.title || collapsibleProps !== null && collapsibleProps !== void 0 && collapsibleProps.subtitle ? /*#__PURE__*/_react.default.createElement("div", {
     className: "w-full pl-4 py-4 text-left"
-  }, title && boldTitle ? /*#__PURE__*/_react.default.createElement("h1", null, /*#__PURE__*/_react.default.createElement("b", null, title)) : /*#__PURE__*/_react.default.createElement("h1", null, title), subtitle && /*#__PURE__*/_react.default.createElement("h2", null, /*#__PURE__*/_react.default.createElement("small", null, subtitle))) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: 'w-full pr-8 text-right ' + padding
-  }, isDropdown && expanded ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_index.default, {
-    type: "arrow-up"
+  }, (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.title) && /*#__PURE__*/_react.default.createElement("h4", {
+    className: titleBold
+  }, collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.title), (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.subtitle) && /*#__PURE__*/_react.default.createElement("h5", null, /*#__PURE__*/_react.default.createElement("small", null, collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.subtitle))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null), (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.isDropdown) && /*#__PURE__*/_react.default.createElement("div", {
+    className: "w-full pr-8 text-right ".concat(padding)
+  }, expanded ? /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_index.default, {
+    iconProps: {
+      type: 'chevron-up'
+    }
   })) : /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_index.default, {
-    type: "arrow-down"
-  })))), expanded ? /*#__PURE__*/_react.default.createElement("div", {
-    style: contentStyles,
+    iconProps: {
+      type: 'chevron-down'
+    }
+  })))), (collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.isDropdown) && expanded && /*#__PURE__*/_react.default.createElement("div", {
     className: contentWrapperClasses
-  }, children) : null);
+  }, collapsibleProps === null || collapsibleProps === void 0 ? void 0 : collapsibleProps.children));
 };
 
+Collapsible.propTypes = {
+  collapsibleProps: _propTypes.default.shape(_objectSpread({}, collapsibleProps))
+};
 var _default = Collapsible;
 exports.default = _default;

package/dist/components/Column/index.js

@@ -3,28 +3,43 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.columnProps = void 0;
 
 require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireDefault(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 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 columnProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  sm: _propTypes.default.number,
+  md: _propTypes.default.number,
+  lg: _propTypes.default.number,
+  xl: _propTypes.default.number,
+  children: _propTypes.default.any
+};
+exports.columnProps = columnProps;
+
 const Column = _ref => {
   let {
-    id,
-    classes,
-    sm,
-    md,
-    lg,
-    xl,
+    columnProps,
     children
   } = _ref;
+  if (columnProps == undefined) return;
   const widthOptions = {
     1: 'w-1/12',
     2: 'w-2/12',
@@ -52,38 +67,41 @@ const Column = _ref => {
     return width;
   };
 
-  let classList = classes ? classes : '';
+  let classList = columnProps !== null && columnProps !== void 0 && columnProps.classes ? columnProps === null || columnProps === void 0 ? void 0 : columnProps.classes : '';
 
-  if (sm) {
+  if (columnProps !== null && columnProps !== void 0 && columnProps.sm) {
     let smClass;
-    smClass = calculateWidth(sm);
+    smClass = calculateWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.sm);
     classList += ' ' + smClass + ' ';
   }
 
-  if (md) {
+  if (columnProps !== null && columnProps !== void 0 && columnProps.md) {
     let mdClass;
-    mdClass = 'md:' + calculateWidth(md);
+    mdClass = 'md:' + calculateWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.md);
     classList += ' ' + mdClass + ' ';
   }
 
-  if (lg) {
+  if (columnProps !== null && columnProps !== void 0 && columnProps.lg) {
     let lgClass;
-    lgClass = 'lg:' + calculateWidth(lg);
+    lgClass = 'lg:' + calculateWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.lg);
     classList += ' ' + lgClass + ' ';
   }
 
-  if (xl) {
+  if (columnProps !== null && columnProps !== void 0 && columnProps.xl) {
     let xlClass;
-    xlClass = 'xl:' + calculateWidth(xl);
+    xlClass = 'xl:' + calculateWidth(columnProps === null || columnProps === void 0 ? void 0 : columnProps.xl);
     classList += ' ' + xlClass + ' ';
   }
 
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
-    id: id
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, (columnProps === null || columnProps === void 0 ? void 0 : columnProps.id) && {
+    id: columnProps === null || columnProps === void 0 ? void 0 : columnProps.id
   }, {
     className: classList
   }), children);
 };
 
+Column.propTypes = {
+  columnProps: _propTypes.default.shape(_objectSpread({}, columnProps))
+};
 var _default = Column;
 exports.default = _default;

package/dist/components/FyreCard/index.js

@@ -22,19 +22,10 @@ const FyreCard = _ref => {
     id,
     classes,
     image,
-    ctaText,
     imageClass,
     altText,
-    buttonType,
     bordered,
-    url,
-    buttonDesign,
-    buttonBgColor,
-    buttonTextColor,
-    buttonBorderColor,
-    hoverButtonBgColor,
-    hoverButtonTextColor,
-    hoverButtonBorderColor
+    buttonProps
   } = _ref;
   let border = bordered && ' border border-grey border-opacity-100 ';
   let classList = 'flex flex-col ';
@@ -56,19 +47,9 @@ const FyreCard = _ref => {
     alt: altText
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "flex justify-end"
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    buttonText: ctaText,
-    buttonType: buttonType,
-    buttonUrl: url,
-    buttonBgColor: buttonBgColor,
-    buttonTextColor: buttonTextColor,
-    borderColor: buttonBorderColor,
-    buttonHoverBgColor: hoverButtonBgColor,
-    buttonHoverTextColor: hoverButtonTextColor,
-    buttonHoverBorderColor: hoverButtonBorderColor
-  }, buttonDesign && {
-    buttonDesign: buttonDesign
-  })))));
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    buttonProps: buttonProps
+  }))));
 };
 
 var _default = FyreCard;

package/dist/components/Icon/index.js

@@ -1,53 +1,93 @@
 "use strict";
 
-require("core-js/modules/es.object.assign.js");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.iconProps = exports.default = void 0;
 
-require("core-js/modules/es.array.reverse.js");
+require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
 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 iconProps = {
+  id: _propTypes.default.string,
+  classes: _propTypes.default.string,
+  type: _propTypes.default.string,
+  size: _propTypes.default.number,
+  onClick: _propTypes.default.func,
+  style: _propTypes.default.string,
+  animation: _propTypes.default.string,
+  reverseSpin: _propTypes.default.bool,
+  hollow: _propTypes.default.bool,
+  colour: _propTypes.default.string,
+  bgColour: _propTypes.default.string,
+  rounded: _propTypes.default.bool,
+  brand: _propTypes.default.bool
+};
+exports.iconProps = iconProps;
+
 const Icon = _ref => {
   let {
-    id,
-    classes,
-    type,
-    size,
-    onClick,
-    style,
-    animation,
-    reverse,
-    hollow
+    iconProps
   } = _ref;
-  if (!type) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
-  let classList = "fa fa-".concat(type, " ");
-  classList += size ? "fa-".concat(size, "x ") : '';
-  classList += animation ? "fa-".concat(animation, " ") : '';
-  classList += reverse ? ' fa-spin-reverse ' : '';
-  classList += hollow ? ' fa-regular ' : '';
-  classList += classes ? classes : '';
-  return /*#__PURE__*/_react.default.createElement("span", _extends({}, id && {
-    id: id
+  if (iconProps == undefined) return;
+  if ((iconProps === null || iconProps === void 0 ? void 0 : iconProps.size) == undefined) iconProps.size = 1;
+  const wrapperClassList = (0, _classnames.default)({
+    'w-6 h-6': iconProps.size === 1,
+    'w-10 h-10': iconProps.size === 2,
+    'w-14 h-14': iconProps.size === 3,
+    'w-20 h-20': iconProps.size === 4,
+    'w-24 h-24': iconProps.size === 5,
+    'w-28 h-28': iconProps.size === 6,
+    'w-32 h-32': iconProps.size === 7,
+    'w-36 h-36': iconProps.size === 8,
+    'w-40 h-40': iconProps.size === 9,
+    'w-44 h-44': iconProps.size === 10,
+    [iconProps.classes]: iconProps === null || iconProps === void 0 ? void 0 : iconProps.classes,
+    [iconProps.colour]: iconProps === null || iconProps === void 0 ? void 0 : iconProps.colour,
+    [iconProps.bgColour]: iconProps === null || iconProps === void 0 ? void 0 : iconProps.bgColour,
+    'rounded-full': iconProps === null || iconProps === void 0 ? void 0 : iconProps.rounded
+  }, 'flex');
+  const classList = (0, _classnames.default)({
+    'fa-brands': iconProps === null || iconProps === void 0 ? void 0 : iconProps.brand,
+    ["fa-".concat(iconProps.size, "x")]: iconProps === null || iconProps === void 0 ? void 0 : iconProps.size,
+    ["fa-".concat(iconProps.animation)]: iconProps === null || iconProps === void 0 ? void 0 : iconProps.animation,
+    'fa-spin-reverse': iconProps === null || iconProps === void 0 ? void 0 : iconProps.reverseSpin,
+    'fa-regular': iconProps === null || iconProps === void 0 ? void 0 : iconProps.hollow
+  }, "fa fa-".concat(iconProps.type, " mx-auto my-auto"));
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, (iconProps === null || iconProps === void 0 ? void 0 : iconProps.id) && {
+    id: iconProps.id
   }, {
+    className: wrapperClassList
+  }, (iconProps === null || iconProps === void 0 ? void 0 : iconProps.onClick) && {
+    onClick: iconProps.onClick
+  }), /*#__PURE__*/_react.default.createElement("span", {
     className: classList,
-    style: style,
+    style: iconProps === null || iconProps === void 0 ? void 0 : iconProps.style,
     role: "img",
     "aria-hidden": "true",
-    "aria-label": type
-  }, onClick && {
-    onClick: onClick
+    "aria-label": iconProps === null || iconProps === void 0 ? void 0 : iconProps.type
   }));
 };
 
+Icon.propTypes = {
+  iconProps: _propTypes.default.shape(_objectSpread({}, iconProps))
+};
 var _default = Icon;
 exports.default = _default;