trepur_components 0.1.43 → 0.2.2

package/dist/components/{Profile → Organisms/Profile}/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; }
@@ -16,21 +18,22 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const Profile = _ref => {
   let {
     profileLinks,
-    alignRight,
-    alignLeft,
+    alignment,
     userImage,
     imageHeight,
     imageWidth,
     classNames,
-    rounded
+    rounded,
+    bordered
   } = _ref;
-  let profileAlignment = alignRight ? ' float-right ' : alignLeft ? ' float-left ' : '';
-  let dropdownAlignement = alignRight ? ' mt-16 -mr-16 ' : alignLeft ? ' mt-16 -ml-16 ' : '';
-  let dropdownTextAlignement = alignRight ? '  ' : alignLeft ? '  ' : 'text-center';
+  let profileAlignment = alignment === 'right' ? ' float-right ' : alignment === 'left' ? ' float-left ' : '';
+  let dropdownAlignement = alignment === 'right' ? ' mt-16 -mr-16 ' : alignment === 'left' ? ' mt-16 -ml-16 ' : '';
+  let dropdownTextAlignement = alignment === 'right' ? '  ' : alignment === 'left' ? '  ' : 'text-center';
   const height = imageHeight && 'h-' + imageHeight;
   const width = imageWidth && 'w-' + imageWidth;
   const round = rounded ? 'rounded-full' : '';
-  const classes = width + ' ' + height + ' ' + round;
+  const border = bordered ? 'border' : '';
+  const classes = 'object-cover ' + width + ' ' + height + ' ' + round + ' ' + border;
   const [profileState, setProfileState] = (0, _react.useState)(false);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: 'text-center ' + classNames

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

@@ -0,0 +1,44 @@
+import React from 'react'
+import Search from './index'
+
+export default {
+    title: 'Trepur Components/Organisms/Search',
+    component: Search,
+    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: {}
+}
+
+const Template = (args) => <Search {...args} />;
+
+export const _Search = Template.bind({});
+_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,103 @@
+import React from 'react'
+import Testimonial from './index'
+
+export default {
+    title: 'Trepur Components/Organisms/Testimonial',
+    component: Testimonial,
+    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'
+    }
+}
+
+const Template = (args) => <Testimonial {...args} />;
+
+export const _Testimonial = Template.bind({});
+_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,73 @@
+import React from 'react'
+import Timeline from './index'
+
+export default {
+    title: 'Trepur Components/Organisms/Timeline',
+    component: Timeline,
+    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
+    }
+}
+
+
+const Template = (args) => <Timeline {...args} />;
+
+export const _Timeline = Template.bind({});
+_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,41 @@
+import React from 'react'
+import UserIcon from './index'
+import userImage from '../../../Assets/Images/user.jpeg'
+
+export default {
+    title: 'Trepur Components/Organisms/User Icon',
+    components: UserIcon,
+    argTypes: {
+        icon: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        name: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        },
+        description: {
+            description: '',
+            control: 'text',
+            table: {
+                category: ''
+            }
+        }
+    },
+    args: {
+        icon: userImage,
+        name: 'Someones name',
+        description: 'someone info'
+    }
+}
+
+const Template = (args) => <UserIcon {...args} />;
+
+export const _UserIcon = Template.bind({});
+_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 => {