trepur_components 0.1.43 → 0.2.0

package/dist/components/Organisms/Search/Search.stories.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Search = 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/Organisms/Search',
+  component: _index.default,
+  parameters: {},
+  argTypes: {
+    leftIcon: {
+      description: 'An optional param to display an icon to the left of the search bar',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    rightIcon: {
+      description: 'An optional param to display an icon to the right of the search bar',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    placeholder: {
+      description: 'An optional param to display a placeholder inside the search box',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    text: {
+      description: 'An optional param to display a label on the left of the search bar',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {}
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Search = Template.bind({});
+
+exports._Search = _Search;
+_Search.args = {};

package/dist/components/{Search → Organisms/Search}/index.js

@@ -7,45 +7,54 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _index = _interopRequireDefault(require("../Icon/index"));
+var _Icon = _interopRequireDefault(require("../../Atoms/Icon"));
+
+var _Column = _interopRequireDefault(require("../../Atoms/Column"));
+
+require("../../../../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Search = _ref => {
   let {
     className,
-    onChange: _onChange,
+    onChange,
     placeholder,
     text,
     leftIcon,
     rightIcon
   } = _ref;
-  let classes = className + ' flex';
-  let iconLeft = leftIcon ? /*#__PURE__*/_react.default.createElement(_index.default, {
+  let classes = className ? className + ' flex' : 'flex';
+  let iconLeft = leftIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
     type: leftIcon
   }) : null;
   let leftPadding = leftIcon ? 'pl-9' : 'pl-2';
-  let iconRight = rightIcon ? /*#__PURE__*/_react.default.createElement(_index.default, {
+  let iconRight = rightIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
     type: rightIcon
   }) : null;
+  const onChangeFunc = onChange ? e => onChange(e.target.value) : null;
   return /*#__PURE__*/_react.default.createElement("div", {
     id: "search",
     className: classes
+  }, /*#__PURE__*/_react.default.createElement(_Column.default, {
+    md: 2
   }, text && /*#__PURE__*/_react.default.createElement("h2", {
-    className: "font-base-lg pt-2"
-  }, text), /*#__PURE__*/_react.default.createElement("div", {
-    className: "relative block w-full"
+    className: "font-base-lg py-2 pr-4"
+  }, text)), /*#__PURE__*/_react.default.createElement(_Column.default, {
+    md: 10
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "relative w-full flex"
   }, leftIcon && /*#__PURE__*/_react.default.createElement("span", {
-    className: "absolute inset-y-0 left-5 flex items-center pl-2"
+    className: "absolute py-4 left-3 flex items-center"
   }, iconLeft), /*#__PURE__*/_react.default.createElement("input", {
-    className: "w-full border-2 border-gray-300 placeholder:italic placeholder:text-gray-400 rounded-md py-1 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 " + leftPadding,
-    onChange: e => _onChange(e.target.value),
+    className: "w-full border-2 border-gray-300 placeholder:text-gray-400 rounded-md py-2 pr-9 focus:outline-none focus:border-sky-500 focus:ring-sky-500 focus:ring-1 " + leftPadding,
+    onChange: onChangeFunc,
     placeholder: placeholder,
     type: "text",
     name: "search"
   }), rightIcon && /*#__PURE__*/_react.default.createElement("span", {
-    className: "absolute inset-y-0 right-3 flex items-center pl-2"
-  }, iconRight)));
+    className: "absolute py-4 right-3 flex items-center"
+  }, iconRight))));
 };
 
 var _default = Search;

package/dist/components/Organisms/Testimonial/Testimonial.stories.js

@@ -0,0 +1,116 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Testimonial = 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/Organisms/Testimonial',
+  component: _index.default,
+  parameters: {},
+  argTypes: {
+    text: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    companyName: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    positionStartDate: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    positionEndDate: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    position: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    date: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    authorsName: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    authorsPosition: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    bgColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    textColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    image: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    image: 'https://picsum.photos/100/100',
+    authorsName: 'Authors Name',
+    authorsPosition: 'Authors Position',
+    position: 'Position',
+    positionEndDate: 'End Date',
+    positionStartDate: 'Start Date',
+    date: 'Date',
+    companyName: 'Company Name',
+    text: 'This is some text'
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Testimonial = Template.bind({});
+
+exports._Testimonial = _Testimonial;
+_Testimonial.args = {};

package/dist/components/{Testimonial → Organisms/Testimonial}/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 Testimonial = _ref => {

package/dist/components/Organisms/Timeline/Timeline.stories.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Timeline = 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/Organisms/Timeline',
+  component: _index.default,
+  parameters: {},
+  argTypes: {
+    isHorizontal: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    useImages: {
+      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'
+    }, {
+      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'
+    }, {
+      title: 'This is a title',
+      subtitle: 'This is a subtitle'
+    }],
+    textCenter: true,
+    useImages: false
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Timeline = Template.bind({});
+
+exports._Timeline = _Timeline;
+_Timeline.args = {};

package/dist/components/Organisms/Timeline/index.js

@@ -0,0 +1,127 @@
+"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"));
+
+var _logoBlue = _interopRequireDefault(require("../../../Assets/Images/logoBlue.png"));
+
+var _CardWithTopImage = _interopRequireDefault(require("../CardWithTopImage"));
+
+var _Column = _interopRequireDefault(require("../../Atoms/Column"));
+
+var _Image = _interopRequireDefault(require("../../Atoms/Image"));
+
+var _Row = _interopRequireDefault(require("../../Atoms/Row"));
+
+require("../../../../index.css");
+
+require("./styles.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Timeline = _ref => {
+  let {
+    isHorizontal,
+    items,
+    reverse,
+    textCenter,
+    useImages
+  } = _ref;
+  const wrapperClasses = 'w-full list-none overflow-x-auto pb-4';
+  let ulClasses = 'timeline status-flow relative list-none pl-0 flex ';
+  let liClasses = 'my-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 justify-between' : 'flex-row none-reverse' : isHorizontal ? 'items-center flex-col-reverse' : ' flex-row-reverse';
+  let padding;
+  padding = !reverse ? isHorizontal ? 'pb-2' : 'pl-4' : isHorizontal ? 'pt-2' : 'pr-4';
+  let circle = 'w-4 h-4 my-16 text-center mx-auto rounded-full border bg-black ';
+  circle += isHorizontal ? 'horizontal' : 'vertical';
+  return /*#__PURE__*/_react.default.createElement(_Column.default, {
+    sm: 12,
+    id: "timeline_container",
+    className: wrapperClasses
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: ulClasses
+  }, items && items.map((item, i) => {
+    let before;
+    if (i % 2 === 0) before = true;else before = false;
+    let a = isHorizontal ? '' : i === 0 ? '' : ' ';
+    let circlePos;
+
+    if (items.length - 1 > 0) {
+      if (i === 0) circlePos = 'first-circle';else if (i === items.length - 1) circlePos = 'last-circle';else circlePos = "circle";
+    }
+
+    if (isHorizontal) {
+      return /*#__PURE__*/_react.default.createElement(_Column.default, {
+        id: "timeline-item",
+        className: liClasses + ' py-4 ' + a
+      }, /*#__PURE__*/_react.default.createElement(_Row.default, {
+        className: "h-96"
+      }, before && /*#__PURE__*/_react.default.createElement(_CardWithTopImage.default, {
+        classNames: reverse ? 'w-96 -mt-8' : 'w-96',
+        image: _logoBlue.default,
+        roundedImage: true
+      }, /*#__PURE__*/_react.default.createElement("p", null, item.title + i), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("small", null, item.subtitle)))), /*#__PURE__*/_react.default.createElement(_Row.default, null, useImages ? /*#__PURE__*/_react.default.createElement("div", {
+        id: circlePos,
+        className: isHorizontal ? 'horizontal py-0 my-0' : 'vertical'
+      }, /*#__PURE__*/_react.default.createElement(_Image.default, {
+        classNames: circle,
+        image: _logoBlue.default,
+        width: 20,
+        height: 20
+      })) : /*#__PURE__*/_react.default.createElement("p", {
+        id: circlePos,
+        className: circle
+      })), /*#__PURE__*/_react.default.createElement(_Row.default, {
+        className: "h-96"
+      }, !before && /*#__PURE__*/_react.default.createElement(_CardWithTopImage.default, {
+        classNames: reverse ? 'w-96' : 'w-96 -mt-8',
+        image: _logoBlue.default,
+        roundedImage: true
+      }, /*#__PURE__*/_react.default.createElement("p", null, item.title + i), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("small", null, item.subtitle)))));
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_Row.default, {
+        id: "timeline-item",
+        className: liClasses + ' py-4 ' + a
+      }, /*#__PURE__*/_react.default.createElement(_Column.default, {
+        sm: 5,
+        className: "text-center my-auto"
+      }, before && /*#__PURE__*/_react.default.createElement(_CardWithTopImage.default, {
+        image: _logoBlue.default,
+        roundedImage: true
+      }, /*#__PURE__*/_react.default.createElement("p", null, item.title + i), /*#__PURE__*/_react.default.createElement("p", null, /*#__PURE__*/_react.default.createElement("small", null, item.subtitle)))), /*#__PURE__*/_react.default.createElement(_Column.default, {
+        id: "circle-wrapper",
+        sm: 2,
+        className: "my-auto"
+      }, useImages ? /*#__PURE__*/_react.default.createElement("div", {
+        id: circlePos,
+        className: isHorizontal ? 'horizontal' : 'vertical'
+      }, /*#__PURE__*/_react.default.createElement(_Image.default, {
+        classNames: circle,
+        image: _logoBlue.default,
+        width: 20,
+        height: 20
+      })) : /*#__PURE__*/_react.default.createElement("p", {
+        id: circlePos,
+        className: circle
+      })), /*#__PURE__*/_react.default.createElement(_Column.default, {
+        sm: 5,
+        className: "text-center my-auto"
+      }, !before && /*#__PURE__*/_react.default.createElement(_CardWithTopImage.default, {
+        image: _logoBlue.default,
+        roundedImage: true
+      }, /*#__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 = Timeline;
+exports.default = _default;

package/dist/components/Organisms/Timeline/styles.css

@@ -0,0 +1,89 @@
+/* Vertical */
+#circle.vertical:before {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  top: 0%;
+  left: 49.9%;
+  z-index: -1;
+}
+
+#circle.vertical:after {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  bottom: 0%;
+  left: 49.9%;
+  z-index: -1;
+}
+
+#first-circle.vertical:after {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  bottom: 0%;
+  left: 49.9%;
+  z-index: -1;
+}
+
+#last-circle.vertical:before {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  top: 0%;
+  left: 49.9%;
+  z-index: -1;
+}
+
+/* Horizontal */
+#circle.horizontal:before {
+  position: absolute;
+  display: block;
+  border-top: 1px solid #31a3dd;
+  content: "";
+  width: 70%;
+  top: 50%;
+  left: -8%;
+  z-index: -1;
+}
+
+#circle.horizontal:after {
+  position: absolute;
+  display: block;
+  border-top: 1px solid #31a3dd;
+  content: "";
+  width: 70%;
+  top: 50%;
+  right: -12%;
+  z-index: -1;
+}
+
+#first-circle.horizontal:after {
+  position: absolute;
+  display: block;
+  border-top: 1px solid #31a3dd;
+  content: "";
+  width: 60%;
+  top: 50%;
+  right: -12%;
+  z-index: -1;
+}
+
+#last-circle.horizontal:before {
+  position: absolute;
+  display: block;
+  border-top: 1px solid #31a3dd;
+  content: "";
+  width: 55%;
+  top: 50%;
+  left: -8%;
+  z-index: -1;
+}

package/dist/components/Organisms/UserIcon/UserIcon.stories.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._UserIcon = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _user = _interopRequireDefault(require("../../../Assets/Images/user.jpeg"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Organisms/User Icon',
+  components: _index.default,
+  argTypes: {
+    icon: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    name: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    description: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    icon: _user.default,
+    name: 'Someones name',
+    description: 'someone info'
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _UserIcon = Template.bind({});
+
+exports._UserIcon = _UserIcon;
+_UserIcon.args = {};

package/dist/components/{UserIcon → Organisms/UserIcon}/index.js

@@ -9,6 +9,8 @@ require("core-js/modules/es.symbol.description.js");
 
 var _react = _interopRequireDefault(require("react"));
 
+require("../../../../index.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const UserIcon = _ref => {