trepur_components 0.1.30 → 0.1.34

package/dist/components/BreadcrumbsBordered/index.js

@@ -23,7 +23,8 @@ const Breadcrumbs = _ref => {
     hoverBorderColor
   } = _ref;
   const linksLength = Object.keys(links).length;
-  let classes = 'flex py-2 px-8 ' + className;
+  let classProp = className ? className : '';
+  let classes = 'flex ' + classProp;
   return /*#__PURE__*/_react.default.createElement("ul", {
     className: classes
   }, links && links.map((link, i) => {

package/dist/components/Card/Card.stories.js

@@ -15,6 +15,8 @@ var _index = _interopRequireDefault(require("./index"));
 
 require("../../../index.css");
 
+var _index3 = _interopRequireDefault(require("../Column/index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = {
@@ -99,7 +101,8 @@ var _default = {
       defaultValue: true
     }
   },
-  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+  decorators: [story => /*#__PURE__*/_react.default.createElement(_index3.default, {
+    md: "4",
     className: "p-4"
   }, story())],
   parameters: {

package/dist/components/Card/index.js

@@ -13,8 +13,6 @@ var _react = _interopRequireDefault(require("react"));
 
 var _index = _interopRequireDefault(require("../Button/index"));
 
-var _index2 = _interopRequireDefault(require("../ButtonSlide/index"));
-
 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); }
@@ -51,22 +49,21 @@ const Card = _ref => {
     hoverButtonTextColor,
     hoverButtonBorderColor
   } = _ref;
-  let titleWrapperClass = imageBelowTitle ? ' order-1 p-3 ' : ' p-3 ';
-  let contentWrapperClass = imageBelowTitle ? ' order-3 px-3 ' : ' px-3 ';
-  let btnClass = imageBelowTitle ? ' order-4 w-full p-3 ' : ' w-full p-3 ';
-  let classList = ' flex flex-col bg-white w-auto max-w-md ';
+  let orderClass = imageBelowTitle ? ' order-first ' : '';
+  let titleWrapperClass = ' p-3 ' + orderClass;
+  let contentWrapperClass = ' px-3 ';
+  let btnClass = ' w-full p-3 ';
+  let classList = 'flex flex-col ';
   let border = bordered ? ' border border-grey border-opacity-100 ' : '';
   let titleFont = titleBold ? ' font-bold' : '';
   let titlePosition = titleLeft ? ' text-left ' : titleRight ? ' text-right ' : ' text-center ';
   let roundedImage = rounded ? ' rounded-t-2xl ' : '';
   let roundedCard = rounded ? ' rounded-2xl ' : '';
   let titleClasses = titlePosition + titleFont;
-  let imageWrapperClass = imageBelowTitle ? ' order-2 ' : '';
   let classes = classNames ? classNames : '';
   let imageClassList = ' w-full ';
   imageClassList += imageBelowTitle && imageBelowTitle ? '' : roundedImage;
   classList += border + classes;
-  imageWrapperClass += roundedImage;
   classList += roundedCard;
   imageClassList += imageClass;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -74,9 +71,9 @@ const Card = _ref => {
     id: id,
     className: classList
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "card-content flex-1"
+    className: "card-content flex flex-1 flex-col"
   }, image && /*#__PURE__*/_react.default.createElement("div", {
-    className: imageWrapperClass && imageWrapperClass
+    className: roundedImage
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: imageClassList,
     src: image,

package/dist/components/CardImageLink/CardImageLink.stories.js

@@ -13,6 +13,8 @@ var _index = _interopRequireDefault(require("./index"));
 
 require("../../../index.css");
 
+var _index3 = _interopRequireDefault(require("../Column/index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = {
@@ -40,7 +42,8 @@ var _default = {
       defaultValue: 'Button 2'
     }
   },
-  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+  decorators: [story => /*#__PURE__*/_react.default.createElement(_index3.default, {
+    md: "4",
     className: "p-4"
   }, story())],
   parameters: {

package/dist/components/Column/Column.stories.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Column = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("../../../index.css");
+
+var _index2 = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/Column',
+  argTypes: {
+    sm: {
+      name: 'SM',
+      control: {
+        type: 'text'
+      },
+      defaultValue: ''
+    },
+    md: {
+      name: 'MD',
+      control: {
+        type: 'text'
+      },
+      defaultValue: ''
+    },
+    lg: {
+      name: 'LG',
+      control: {
+        type: 'text'
+      },
+      defaultValue: ''
+    },
+    xl: {
+      name: 'XL',
+      control: {
+        type: 'text'
+      },
+      defaultValue: ''
+    }
+  },
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  addParameters: {
+    oprions: {
+      showNav: false
+    }
+  }
+};
+exports.default = _default;
+
+const _Column = args => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index2.default, {
+    sm: 1,
+    md: 1,
+    lg: 1,
+    xl: 1,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-center"
+  }, "Col width 1/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    sm: 2,
+    md: 2,
+    lg: 2,
+    xl: 2,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 2/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    sm: 3,
+    md: 3,
+    lg: 3,
+    xl: 3,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 3/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 4,
+    sm: 4,
+    md: 4,
+    lg: 4,
+    xl: 4,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 24/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 5,
+    sm: 5,
+    md: 5,
+    lg: 5,
+    xl: 5,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 5/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 6,
+    sm: 6,
+    md: 6,
+    lg: 6,
+    xl: 6,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 6/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 7,
+    sm: 7,
+    md: 7,
+    lg: 7,
+    xl: 7,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 7/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 8,
+    sm: 8,
+    md: 8,
+    lg: 8,
+    xl: 8,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 8/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 9,
+    sm: 9,
+    md: 9,
+    lg: 9,
+    xl: 9,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 9/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 10,
+    sm: 10,
+    md: 10,
+    lg: 10,
+    xl: 10,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 10/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 11,
+    sm: 11,
+    md: 11,
+    lg: 11,
+    xl: 11,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 11/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 12,
+    sm: 12,
+    md: 12,
+    lg: 12,
+    xl: 12,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 12/12")));
+};
+
+exports._Column = _Column;

package/dist/components/Column/README.md

@@ -0,0 +1,23 @@
+# Calumn
+
+
+
+## Example
+
+```
+<Column 
+    sm='2'
+    md='2'
+    lg='2'
+    xl='2'
+>
+{children}
+<Column/>
+
+```
+
+## Parameters
+`sm={string} (default=null)`
+`md={string} (default=null)`
+`lg={string} (default=null)`
+`xl={string} (default=null)`

package/dist/components/Column/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Column = _ref => {
+  let {
+    className,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    children
+  } = _ref;
+
+  const calculateWidth = size => {
+    let width;
+
+    if (size === 12) {
+      width = 'full';
+    } else {
+      width = 'w-' + size + '/12';
+    }
+
+    return width;
+  };
+
+  let classes = className + ' ';
+
+  if (xs) {
+    let xsClass;
+    xsClass = 'xs:' + calculateWidth(xs);
+    classes += xsClass + ' ';
+  }
+
+  if (sm) {
+    let smClass;
+    smClass = 'sm:' + calculateWidth(sm);
+    classes += smClass + ' ';
+  }
+
+  if (md) {
+    let mdClass;
+    mdClass = 'md:' + calculateWidth(md);
+    classes += mdClass + ' ';
+  }
+
+  if (lg) {
+    let lgClass;
+    lgClass = 'lg:' + calculateWidth(lg);
+    classes += lgClass + ' ';
+  }
+
+  if (xl) {
+    let xlClass;
+    xlClass = 'xl:' + calculateWidth(xl);
+    classes += xlClass + ' ';
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes
+  }, children);
+};
+
+var _default = Column;
+exports.default = _default;

package/dist/components/Form/index.js

@@ -5,18 +5,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.object.assign.js");
+
 var _react = _interopRequireDefault(require("react"));
 
-var _ButtonSlide = _interopRequireDefault(require("../ButtonSlide"));
+var _Button = _interopRequireDefault(require("../Button"));
 
 var _Input = _interopRequireDefault(require("../Input"));
 
 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 Form = _ref => {
   let {
     title,
-    components
+    components,
+    buttonDesign,
+    buttonBgColor,
+    buttonTextColor,
+    buttonBorderColor,
+    hoverButtonBgColor,
+    hoverButtonTextColor,
+    hoverButtonBorderColor,
+    buttonType,
+    onClick
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "w-auto"
@@ -30,9 +43,20 @@ const Form = _ref => {
         placeholder: component.placeholder
       });
     } else if (component.type === 'Button') {
-      return /*#__PURE__*/_react.default.createElement(_ButtonSlide.default, {
-        ctaText: component.ctaText
-      });
+      return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
+        ctaText: component.ctaText,
+        bgColor: buttonBgColor,
+        textColor: buttonTextColor,
+        borderColor: buttonBorderColor,
+        hoverTextColor: hoverButtonTextColor,
+        hoverBgColor: hoverButtonBgColor,
+        hoverBorderColor: hoverButtonBorderColor
+      }, onClick && {
+        onClick: onClick
+      }, {
+        buttonType: buttonType,
+        buttonDesign: buttonDesign
+      }));
     }
   }));
 };

package/dist/components/Icon/Icon.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports._Icon = void 0;
+exports.default = exports._Icon = exports.WithOnClick = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,6 +13,8 @@ var _index = _interopRequireDefault(require("./index"));
 
 require("../../../index.css");
 
+var _addonActions = require("@storybook/addon-actions");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = {
@@ -53,4 +55,14 @@ const _Icon = args => {
   });
 };
 
-exports._Icon = _Icon;
+exports._Icon = _Icon;
+
+const WithOnClick = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: args.type,
+    size: args.size,
+    onClick: (0, _addonActions.action)('icon-click')
+  });
+};
+
+exports.WithOnClick = WithOnClick;

package/dist/components/InformationIcon/InformationIcon.stories.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._InformationIcon = exports.WithRoundedBorder = exports.WithBorder = exports.AsNumberWithRoundedBorder = exports.AsNumber = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/InformationIcon',
+  argTypes: {
+    type: {
+      name: 'Type',
+      description: 'The name of the icon you wish to use',
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'search'
+    },
+    text: {
+      name: 'Text',
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'This is some information text'
+    },
+    number: {
+      name: 'Number',
+      control: {
+        type: 'number'
+      },
+      defaultValue: 14
+    },
+    size: {
+      name: 'Size',
+      description: 'an integer between 1 and 5 to dictage the magnification of the icon',
+      control: {
+        type: 'number'
+      },
+      defaultValue: 4
+    }
+  },
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      content: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _InformationIcon = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: args.type,
+    size: args.size,
+    text: args.text
+  });
+};
+
+exports._InformationIcon = _InformationIcon;
+
+const WithBorder = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: args.type,
+    size: args.size,
+    text: args.text,
+    bordered: true
+  });
+};
+
+exports.WithBorder = WithBorder;
+
+const WithRoundedBorder = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: args.type,
+    size: args.size,
+    text: args.text,
+    bordered: true,
+    rounded: true
+  });
+};
+
+exports.WithRoundedBorder = WithRoundedBorder;
+
+const AsNumber = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: args.type,
+    size: args.size,
+    number: args.number,
+    text: args.text
+  });
+};
+
+exports.AsNumber = AsNumber;
+
+const AsNumberWithRoundedBorder = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: args.type,
+    size: args.size,
+    number: args.number,
+    text: args.text,
+    bordered: true,
+    rounded: true,
+    classNames: "py-4",
+    imageClassNames: "pb-4",
+    bgColor: "#38B6FF",
+    textColor: "white"
+  });
+};
+
+exports.AsNumberWithRoundedBorder = AsNumberWithRoundedBorder;

package/dist/components/InformationIcon/README.md

@@ -0,0 +1,23 @@
+# Information Icon
+
+A simple icon that can be used on its own or as a visual on any other component
+
+## Example
+
+```
+<InformationIcon 
+    type={type} 
+    size={size} 
+    number={number} 
+    text={text} 
+    bordered 
+    rounded 
+    classNames='py-4' 
+    imageClassNames='pb-4'
+    bgColor='#38B6FF'
+    textColor='white'
+/>
+```
+
+## Parameters
+

package/dist/components/InformationIcon/index.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+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; }
+
+const Icon = _ref => {
+  let {
+    type,
+    size,
+    imageClassNames,
+    classNames,
+    text,
+    number = null,
+    bordered,
+    rounded,
+    bgColor,
+    textColor,
+    hoverTextColor,
+    hoverBgColor
+  } = _ref;
+  let classList = "fa fa-".concat(type, " fa-x mx-auto ");
+  classList += size ? "fa-".concat(size, "x ") : "";
+  classList += imageClassNames ? " ".concat(imageClassNames) : "";
+  let borderClass = bordered ? ' border ' : '';
+  let roundedClass = rounded ? ' rounded-2xl ' : '';
+  const classes = classNames + ' hover:scale-125 transform transition duration-500 flex flex-col w-64' + borderClass + roundedClass;
+  const numberClass = number !== null ? ' text-4xl' : '';
+  const numberClasses = 'text-center' + numberClass;
+  const textClass = number === null ? 'text-2xl' : '';
+  const textClasses = 'text-center px-2 ' + textClass; //---------- Styling ---------------
+
+  const [styles, setStyles] = (0, _react.useState)({
+    'background-color': bgColor ? bgColor : 'white',
+    color: textColor ? textColor : 'black'
+  });
+
+  const setHoverState = isHovering => {
+    if (isHovering) {
+      setStyles({
+        'background-color': hoverBgColor ? hoverBgColor : 'white',
+        color: hoverTextColor ? hoverTextColor : 'black'
+      });
+    } else {
+      setStyles({
+        'background-color': bgColor ? bgColor : 'white',
+        color: textColor ? textColor : 'black'
+      });
+    }
+  }; //-----------------------------------
+
+
+  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", {
+    className: classList,
+    role: "img",
+    "aria-hidden": "true",
+    "aria-label": type
+  }), number && /*#__PURE__*/_react.default.createElement("p", {
+    className: numberClasses
+  }, number), /*#__PURE__*/_react.default.createElement("p", {
+    className: textClasses
+  }, text));
+};
+
+var _default = Icon;
+exports.default = _default;