trepur_components 0.1.43 → 0.2.2

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import Row from './index'
+
+export default {
+    title: 'Trepur Components/Atoms/Row',
+    component: Row,
+    parameters: {},
+    argTypes: {},
+    args: {
+        bordered: true,
+        children: <div className='h-16'></div>
+    }
+}
+
+const Template = (args) => <Row {...args} />;
+
+export const _Row = Template.bind({});
+_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,22 @@
+import React from 'react'
+import StarRating from './index'
+import './index.css'
+import { starOptions } from '../../../utils/controls'
+
+export default {
+    title: 'Trepur Components/Atoms/Star Rating',
+    components: StarRating,
+    parameters: {},
+    argTypes: {
+        ...starOptions
+    },
+    args: {
+        size: 1,
+        stars: 3
+    }
+}
+
+const Template = (args) => <StarRating {...args} />;
+
+export const _StarRating = Template.bind({});
+_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,53 @@
+import React from 'react'
+import TextAndTitle from './index'
+
+export default {
+    title: 'Trepur Components/Atoms/Text and Title',
+    components: TextAndTitle,
+    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'
+    }
+}
+
+const Template = (args) => <TextAndTitle {...args} />;
+
+export const _TextAndTitle = Template.bind({});
+_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,49 @@
+import React from 'react'
+import Tubestops from './index'
+
+export default {
+    title: 'Trepur Components/Atoms/Tube Stops',
+    component: Tubestops,
+    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
+    }
+}
+
+
+const Template = (args) => <Tubestops {...args} />;
+
+export const _Tubestops = Template.bind({});
+_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;

package/dist/components/Atoms/Tubestops/styles.css

@@ -0,0 +1,92 @@
+/* Vertical */
+.tubestop.flex-col.none-reverse .status-flow-item:not(:first-child):before {
+  @apply absolute;
+  @apply block;
+  @apply bg-brand-border;
+  content: "";
+  width: 1px;
+  height: 100%;
+  left: 7px;
+  top: -100%;
+}
+
+.tubestop.flex-col.none-reverse .status-flow-item:not(:last-child):after {
+  @apply absolute;
+  @apply block;
+  @apply bg-brand-border;
+  content: "";
+  width: 1px;
+  height: 100%;
+  left: 7px;
+  top: 40%;
+}
+
+/* reverse */
+.tubestop.flex-col.reverse .status-flow-item:not(:first-child):before {
+  @apply absolute;
+  @apply block;
+  @apply bg-brand-border;
+  content: "";
+  width: 1px;
+  height: 100%;
+  right: 7px;
+  top: -100%;
+}
+
+.tubestop.flex-col.reverse .status-flow-item:not(:last-child):after {
+  @apply absolute;
+  @apply block;
+  @apply bg-brand-border;
+  content: "";
+  width: 1px;
+  height: 100%;
+  right: 7px;
+  top: 40%;
+}
+
+/* Horizontal */
+.tubestop.flex-row.none-reverse .status-flow-item:not(:first-child):after {
+  @apply absolute;
+  @apply block;
+  @apply bg-brand-border;
+  content: "";
+  width: 100%;
+  height: 1px;
+  left: -50%;
+  bottom: 7px;
+}
+
+.tubestop.flex-row-reverse.none-reverse
+  .status-flow-item:not(:first-child):after {
+  @apply absolute;
+  @apply block;
+  @apply bg-brand-border;
+  content: "";
+  width: 100%;
+  height: 1px;
+  right: -50%;
+  top: 7px;
+}
+
+/*reverse*/
+.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
+  @apply absolute;
+  @apply block;
+  @apply bg-brand-border;
+  content: "";
+  width: 100%;
+  height: 1px;
+  left: -50%;
+  bottom: 7px;
+}
+
+.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
+  @apply absolute;
+  @apply block;
+  @apply bg-brand-border;
+  content: "";
+  width: 100%;
+  height: 1px;
+  right: -50%;
+  top: 7px;
+}

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

@@ -0,0 +1,29 @@
+import React from 'react'
+import Video from './index'
+import mp4 from '../../../Assets/Videos/example.mp4'
+import ogv from '../../../Assets/Videos/example.ogv'
+import logo from '../../../Assets/Images/logoBlue.png'
+import { videoOptions } from '../../../utils/controls'
+
+export default {
+    title: 'Trepur Components/Atoms/Video',
+    components: Video,
+    parameters: {},
+    argTypes: {
+        ...videoOptions
+    },
+    args: {
+        mp4File: mp4,
+        ogvFile: ogv,
+        poster: logo,
+        withControls: true,
+        withPoster: false,
+        autoPlay: true,
+        muted: true
+    }
+}
+
+const Template = (args) => <Video {...args} />;
+
+export const _Video = Template.bind({});
+_Video.args = {};

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

@@ -0,0 +1,57 @@
+"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 Video = _ref => {
+  let {
+    id,
+    classes,
+    autoPlay,
+    muted,
+    poster,
+    mp4File,
+    webmFile,
+    ogvFile,
+    height,
+    width,
+    withControls,
+    withPoster
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("video", _extends({
+    id: id,
+    className: classes
+  }, withPoster && {
+    poster: poster
+  }, {
+    width: width,
+    height: height,
+    controls: withControls,
+    autoPlay: autoPlay,
+    muted: muted
+  }), /*#__PURE__*/_react.default.createElement("source", {
+    src: mp4File,
+    type: "video/mp4"
+  }), webmFile && /*#__PURE__*/_react.default.createElement("source", {
+    src: webmFile,
+    type: "video/webm"
+  }), ogvFile && /*#__PURE__*/_react.default.createElement("source", {
+    src: ogvFile,
+    type: "video/ogg"
+  }));
+};
+
+var _default = Video;
+exports.default = _default;

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

@@ -0,0 +1,99 @@
+import React from 'react'
+import Accordion from './index'
+
+const items = [
+    {
+        title: 'This is title 1',
+        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
+        icon: 'calendar',
+        showTopBorder: true,
+        showBottomBorder: true,
+        bgColor: '#31A3DD',
+        hoverBgColor: 'blue',
+        textColor: 'white',
+        hoverTextColor: 'white',
+        borderTop: true,
+    },
+    {
+        title: 'This is title 2',
+        subtitle: 'This is subtitle 2',
+        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
+        icon: 'star',
+        bgColor: 'white',
+        textColor: 'black',
+        hoverBgColor: 'grey',
+        hoverTextColor: 'white',
+        borderTop: true,
+    },
+    {
+        title: 'This is title 3',
+        subtitle: 'This is subtitle 3',
+        icon: 'star',
+        iconSize: 2,
+        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
+        bgColor: 'white',
+        textColor: 'black',
+        hoverBgColor: 'grey',
+        hoverTextColor: 'white',
+        borderTop: true,
+    },
+    {
+        title: 'This is title 4',
+        subtitle: 'This is subtitle 4',
+        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
+        bgColor: 'white',
+        textColor: 'black',
+        hoverBgColor: 'grey',
+        hoverTextColor: 'white',
+        borderTop: true,
+    },
+    {
+        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
+        icon: 'th',
+        bgColor: 'white',
+        textColor: 'black',
+        hoverBgColor: 'grey',
+        hoverTextColor: 'white',
+        borderTop: true,
+    },
+    {
+        title: 'This is title 6',
+        content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper in neque in venenatis. Mauris scelerisque orci magna, et ultricies nulla lobortis ac. Aliquam vitae faucibus nisl. Nunc in tellus libero. Donec ut augue consequat, convallis risus in, pulvinar nibh. Duis mi nibh, posuere molestie pharetra cursus, viverra ut dolor. Vivamus eget arcu dui. Donec ullamcorper ornare justo sed feugiat. Curabitur aliquam lectus sed quam pharetra scelerisque. Integer vitae eleifend dolor. Duis luctus metus ipsum, et commodo magna bibendum quis. Quisque gravida leo sodales quam feugiat, id vulputate arcu pulvinar. Duis dictum gravida risus, et bibendum nunc condimentum eu.',
+        bgColor: 'white',
+        textColor: 'black',
+        hoverBgColor: 'grey',
+        hoverTextColor: 'white',
+        borderTop: true,
+        borderBottom: true
+    }
+]
+
+
+export default {
+    title: 'Trepur Components/Organisms/Accordion',
+    component: Accordion,
+    parameters: {
+        docs: {
+            description: {
+                component: '',
+            },
+        },
+    },
+    argTypes: {
+        items: {
+            description: '',
+            control: 'array',
+            table: {
+                category: ''
+            }
+        },
+    },
+    args: {
+        items: items
+    }
+}
+
+const Template = (args) => <Accordion {...args} />;
+
+export const _Accordion = Template.bind({});
+_Accordion.args = {};

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Collapsible = _interopRequireDefault(require("../../Atoms/Collapsible"));
+
+require("../../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Accordion = _ref => {
+  let {
+    items
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", null, items && items.map(item => {
+    return /*#__PURE__*/_react.default.createElement(_Collapsible.default, {
+      title: item.title,
+      subtitle: item.subtitle,
+      content: item.content,
+      icon: item.icon,
+      borderTop: item.showTopBorder,
+      borderBottom: item.showBottomBorder,
+      bgColor: item.bgColor,
+      hoverBgColor: item.hoverBgColor,
+      textColor: item.textColor,
+      hoverTextColor: item.hoverTextColor,
+      contentBgColor: item.expandedBgColor,
+      contentTextColor: item.expandedTextColor,
+      dropdownHeight: item.dropdownHeight,
+      boldTitle: item.boldTitle,
+      showBottomLine: item.showBottomLine,
+      borderTop: item.borderTop,
+      borderBottom: item.borderBottom,
+      iconSize: item.iconSize,
+      isDropdown: true
+    });
+  }));
+};
+
+var _default = Accordion;
+exports.default = _default;