trepur_components 0.1.43 → 0.2.0

package/dist/components/Atoms/Input/Input.stories.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Input = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Atoms/Input',
+  component: _index.default,
+  parameters: {},
+  argTypes: {
+    label: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    placeholder: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    inputType: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    bold: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    label: 'This is a label',
+    placeholder: 'This is a placeholder'
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Input = Template.bind({});
+
+exports._Input = _Input;
+_Input.args = {};

package/dist/components/Atoms/Input/index.js

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

package/dist/components/Atoms/NavItem/NavItem.stories.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._NavItem = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Column = _interopRequireDefault(require("../Column"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Atoms/Nav Item',
+  component: _index.default,
+  parameters: {},
+  argTypes: {
+    name: {
+      description: '',
+      control: 'text',
+      table: {
+        category: 'Standard',
+        subcategory: 'Content'
+      }
+    },
+    url: {
+      description: '',
+      control: 'text',
+      table: {
+        category: 'Standard',
+        subcategory: 'Content'
+      }
+    },
+    bgColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Standard',
+        subcategory: 'Colors'
+      }
+    },
+    textColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Standard',
+        subcategory: 'Colors'
+      }
+    },
+    borderColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Standard',
+        subcategory: 'Colors'
+      }
+    },
+    hoverBgColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Hover',
+        subcategory: 'Colors'
+      }
+    },
+    hoverTextColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Hover',
+        subcategory: 'Colors'
+      }
+    },
+    hoverBorderColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Hover',
+        subcategory: 'Colors'
+      }
+    },
+    rounded: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    bordered: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    name: 'Home',
+    bordered: true,
+    rounded: true
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_Column.default, {
+  sm: 1
+}, /*#__PURE__*/_react.default.createElement(_index.default, args));
+
+const _NavItem = Template.bind({});
+
+exports._NavItem = _NavItem;
+_NavItem.args = {};

package/dist/components/{NavItem → Atoms/NavItem}/index.js

@@ -9,6 +9,8 @@ require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
+require("../../../../index.css");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -27,27 +29,26 @@ const NavItem = _ref => {
     hoverTextColor,
     hoverBgColor,
     bordered,
-    rounded
+    rounded,
+    underlineOnHover
   } = _ref;
-  let linkClasses = linkClassNames ? linkClassNames : ''; //---------- Styling ---------------
+  let linkClasses = linkClassNames ? linkClassNames : '';
+  const underline = underlineOnHover ? ' hover:underline' : ''; //---------- Styling ---------------
 
   const [styles, setStyles] = (0, _react.useState)({
     'backgroundColor': bgColor ? bgColor : 'white',
     color: textColor ? textColor : 'black',
     'borderColor': borderColor ? borderColor : 'black'
   });
-  const [hovering, setHovering] = (0, _react.useState)(false);
 
   const setHoverState = isHovering => {
     if (isHovering) {
-      setHovering(true);
       setStyles({
         'backgroundColor': hoverBgColor ? hoverBgColor : 'black',
         color: hoverTextColor ? hoverTextColor : 'white',
         'borderColor': hoverBorderColor ? hoverBorderColor : 'black'
       });
     } else {
-      setHovering(false);
       setStyles({
         'backgroundColor': bgColor ? bgColor : 'white',
         color: textColor ? textColor : 'black',
@@ -68,7 +69,7 @@ const NavItem = _ref => {
     onMouseOver: () => setHoverState(true),
     onMouseOut: () => setHoverState(false),
     key: name,
-    className: "px-4 mx-2 " + linkClasses + borderClass + round,
+    className: "px-4 mx-2 mb-4 text-center " + linkClasses + borderClass + round + underline,
     onClick: onClick
   }, name)));
 };

package/dist/components/Atoms/Row/Row.stories.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Row = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Atoms/Row',
+  component: _index.default,
+  parameters: {},
+  argTypes: {},
+  args: {
+    bordered: true,
+    children: /*#__PURE__*/_react.default.createElement("div", {
+      className: "h-16"
+    })
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Row = Template.bind({});
+
+exports._Row = _Row;
+_Row.args = {};

package/dist/components/Atoms/Row/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.object.assign.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+require("../../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Row = _ref => {
+  let {
+    className,
+    children,
+    id,
+    bordered
+  } = _ref;
+  let classes = 'flex flex-wrap ' + className;
+  classes += bordered ? ' border' : '';
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: classes
+  }, id && {
+    id: id
+  }), children);
+};
+
+var _default = Row;
+exports.default = _default;

package/dist/components/Atoms/StarRating/StarRating.stories.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._StarRating = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("./index.css");
+
+var _controls = require("../../../utils/controls");
+
+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; }
+
+var _default = {
+  title: 'Trepur Components/Atoms/Star Rating',
+  components: _index.default,
+  parameters: {},
+  argTypes: _objectSpread({}, _controls.starOptions),
+  args: {
+    size: 1,
+    stars: 3
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _StarRating = Template.bind({});
+
+exports._StarRating = _StarRating;
+_StarRating.args = {};

package/dist/components/Atoms/StarRating/index.css

@@ -0,0 +1,8 @@
+.checked {
+  color: orange;
+}
+
+.unchecked {
+  color: orange;
+  opacity: 0.3;
+}

package/dist/components/{StarRating → Atoms/StarRating}/index.js

@@ -13,7 +13,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _Icon = _interopRequireDefault(require("../Icon"));
 
-require("./index.css");
+require("../../../../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -58,7 +58,7 @@ const StarRating = _ref => {
   };
 
   const getAllStars = () => {
-    const starArray = [...getStarsChecked(), ...getStars()];
+    const starArray = [...getStars(), ...getStarsChecked()];
     return starArray;
   };
 

package/dist/components/Atoms/TextAndTitle/TextAndTitle.stories.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._TextAndTitle = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Atoms/Text and Title',
+  components: _index.default,
+  argTypes: {
+    title: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    text: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    textColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    titleColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    bgColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    }
+  },
+  args: {
+    title: 'This is a title',
+    text: 'This is some text'
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _TextAndTitle = Template.bind({});
+
+exports._TextAndTitle = _TextAndTitle;
+_TextAndTitle.args = {};

package/dist/components/{TextAndTitle → Atoms/TextAndTitle}/index.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+require("../../../../index.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const TextAndTitle = _ref => {
@@ -16,6 +18,7 @@ const TextAndTitle = _ref => {
     title,
     bgColor,
     textColor,
+    titleColor,
     titleClass,
     textClass
   } = _ref;
@@ -23,17 +26,22 @@ const TextAndTitle = _ref => {
   const textClasses = textClass + '';
   const classes = classNames + ' text-center'; //---------- Styling ---------------
 
-  const styles = {
+  const textStyles = {
     'background-color': bgColor,
     'color': textColor
+  };
+  const titleStyles = {
+    'background-color': bgColor,
+    'color': titleColor
   }; //-----------------------------------
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    style: styles,
     className: classes
   }, /*#__PURE__*/_react.default.createElement("p", {
+    style: titleStyles,
     className: titleClasses
   }, title), /*#__PURE__*/_react.default.createElement("p", {
+    style: textStyles,
     className: textClasses
   }, text));
 };

package/dist/components/Atoms/Tubestops/Tubestops.stories.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Tubestops = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Atoms/Tube Stops',
+  component: _index.default,
+  parameters: {},
+  argTypes: {
+    isHorizontal: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    items: {
+      description: '',
+      control: 'array',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    isHorizontal: false,
+    reverse: false,
+    items: [{
+      title: 'This is a title',
+      subtitle: 'This is a subtitle'
+    }, {
+      title: 'This is a title',
+      subtitle: 'This is a subtitle'
+    }, {
+      title: 'This is a title',
+      subtitle: 'This is a subtitle'
+    }],
+    textCenter: true
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Tubestops = Template.bind({});
+
+exports._Tubestops = _Tubestops;
+_Tubestops.args = {};

package/dist/components/Atoms/Tubestops/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.array.reverse.js");
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./styles.css");
+
+require("../../../../index.css");
+
+var _logoBlue = _interopRequireDefault(require("../../../Assets/Images/logoBlue.png"));
+
+var _CardWithTopImage = _interopRequireDefault(require("../../Organisms/CardWithTopImage"));
+
+var _Column = _interopRequireDefault(require("../Column"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Tubestops = _ref => {
+  let {
+    isHorizontal,
+    items,
+    reverse,
+    textCenter
+  } = _ref;
+  const wrapperClasses = 'w-full list-none';
+  let ulClasses = 'tubestop status-flow relative list-none pl-0 flex ';
+  let liClasses = 'mb-0 status-flow-item relative flex flex-auto flex-row leading-tight ';
+  liClasses += textCenter ? 'text-center ' : '';
+  ulClasses += !reverse ? isHorizontal ? 'flex-row none-reverse justify-between' : 'flex-col none-reverse' : isHorizontal ? 'flex-row reverse justify-between' : 'flex-col reverse';
+  liClasses += !reverse ? isHorizontal ? 'items-center flex-col-reverse justify-between' : 'flex-row none-reverse' : isHorizontal ? 'items-center flex-col' : ' flex-row-reverse';
+  let padding;
+  padding = !reverse ? isHorizontal ? 'pb-2' : 'pl-4' : isHorizontal ? 'pt-2' : 'pr-4';
+  const circle = 'w-4 h-4 rounded-full bg-black z-10';
+  return /*#__PURE__*/_react.default.createElement(_Column.default, {
+    md: 4,
+    id: "timeline_container",
+    className: wrapperClasses
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: ulClasses
+  }, items && items.map((item, i) => {
+    let a = isHorizontal ? i === 0 ? '' : '' : i === 0 ? '' : 'my-12';
+    return /*#__PURE__*/_react.default.createElement("li", {
+      className: liClasses + ' ' + a
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: circle
+    }), /*#__PURE__*/_react.default.createElement("div", {
+      className: padding
+    }, /*#__PURE__*/_react.default.createElement("p", null, item.title + i), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("small", null, item.subtitle))));
+  })));
+};
+
+var _default = Tubestops;
+exports.default = _default;