trepur_components 0.1.43 → 0.2.0

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

@@ -13,12 +13,13 @@ require("slick-carousel/slick/slick.css");
 
 require("slick-carousel/slick/slick-theme.css");
 
+require("../../../../index.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 //https://react-slick.neostack.com/docs/api/
 const Carousel = _ref => {
   let {
-    classNames,
     slides,
     dots,
     infinite,
@@ -39,7 +40,9 @@ const Carousel = _ref => {
     autoplay: autoplay,
     autoplaySpeed: autoplaySpeed
   };
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactSlick.default, settings, slides && slides.forEach((slide, i) => {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "mx-8"
+  }, /*#__PURE__*/_react.default.createElement(_reactSlick.default, settings, slides && slides.map(slide => {
     return slide;
   })));
 };

package/dist/components/Organisms/Chevron Card/ChevronCard.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._ChevronCard = 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/Chevron Card',
+  component: _index.default,
+  parameters: {},
+  argTypes: {},
+  args: {}
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _ChevronCard = Template.bind({});
+
+exports._ChevronCard = _ChevronCard;
+_ChevronCard.args = {};

package/dist/components/Organisms/Chevron Card/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("../../../../index.css");
+
+require("./styles.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ChevronCard = _ref => {
+  let {
+    id,
+    imageClass,
+    classNames,
+    bordered
+  } = _ref;
+  let classList = 'border-l border-t border-b h-20 w-32 z-10 bg-white';
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: 'border-l border-t border-b h-20 w-32 z-10 bg-white'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "chevronLeft",
+    className: 'border h-14 w-14 -ml-7 mt-3 rotate-45'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex-col my-8"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: 'border-l border-t border-r h-32 w-20 z-20 bg-white'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: "chevronLeft",
+    className: 'border h-14 w-14 -mt-7 ml-3 rotate-45 z-0'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex-col my-16"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "chevronLeft",
+    className: 'border h-14 w-14 -mb-7 ml-3 rotate-45 z-0'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: 'border-l border-b border-r h-32 w-20 z-20 bg-white'
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "chevronLeft",
+    className: 'border h-14 w-14 -mr-7 mt-3 rotate-45'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    id: id,
+    className: 'border-r border-t border-b h-20 w-32 z-10 bg-white'
+  })));
+};
+
+var _default = ChevronCard;
+exports.default = _default;

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

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Form = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _controls = require("../../../utils/controls");
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Organisms/Form',
+  components: _index.default,
+  parameters: {},
+  argTypes: {
+    title: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    components: {
+      description: '',
+      control: 'array',
+      table: {
+        category: ''
+      }
+    },
+    buttonDesign: {
+      description: '',
+      control: 'select',
+      options: _controls.buttonDesignOptions,
+      table: {
+        category: ''
+      }
+    },
+    buttonBgColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    buttonTextColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    buttonBorderColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    hoverButtonBorderColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors',
+        subcategory: 'Hover'
+      }
+    },
+    hoverButtonBgColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors',
+        subcategory: 'Hover'
+      }
+    },
+    hoverButtonTextColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors',
+        subcategory: 'Hover'
+      }
+    },
+    buttonType: {
+      description: '',
+      control: 'select',
+      options: _controls.buttonTypeOptions,
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    title: 'This is a title',
+    components: [{
+      type: 'Input',
+      label: 'This is a label',
+      placeholder: 'This is a placeholder'
+    }, {
+      type: 'Input',
+      label: 'This is a label',
+      placeholder: 'This is a placeholder'
+    }, {
+      type: 'Input',
+      label: 'This is a label',
+      placeholder: 'This is a placeholder'
+    }, {
+      type: 'Button',
+      ctaText: 'Submit'
+    }]
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Form = Template.bind({});
+
+exports._Form = _Form;
+_Form.args = {};

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

@@ -9,9 +9,11 @@ require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Button = _interopRequireDefault(require("../Button"));
+var _Button = _interopRequireDefault(require("../../Atoms/Button"));
 
-var _Input = _interopRequireDefault(require("../Input"));
+var _Input = _interopRequireDefault(require("../../Atoms/Input"));
+
+require("../../../../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -35,7 +37,7 @@ const Form = _ref => {
     className: "w-auto"
   }, /*#__PURE__*/_react.default.createElement("h1", {
     className: "text-center"
-  }, /*#__PURE__*/_react.default.createElement("b", null, title)), components && components.map((component, i) => {
+  }, /*#__PURE__*/_react.default.createElement("b", null, title)), components && components.map(component => {
     if (component.type === 'Input') {
       return /*#__PURE__*/_react.default.createElement(_Input.default, {
         classNames: "py-4",
@@ -57,7 +59,7 @@ const Form = _ref => {
         buttonType: buttonType,
         buttonDesign: buttonDesign
       }));
-    }
+    } else return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
   }));
 };
 

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

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._FyreCard = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _controls = require("../../../utils/controls");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Organisms/Fyre Card',
+  components: _index.default,
+  parameters: {},
+  argTypes: {
+    ctaText: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    image: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    buttonDesign: {
+      description: '',
+      control: 'select',
+      options: _controls.buttonDesignOptions,
+      table: {
+        category: ''
+      }
+    },
+    buttonType: {
+      description: '',
+      control: 'select',
+      options: _controls.buttonTypeOptions,
+      table: {
+        category: ''
+      }
+    },
+    bordered: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    buttonBgColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    buttonTextColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    buttonBorderColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors'
+      }
+    },
+    hoverButtonBorderColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors',
+        subcategory: 'Hover'
+      }
+    },
+    hoverButtonBgColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors',
+        subcategory: 'Hover'
+      }
+    },
+    hoverButtonTextColor: {
+      description: '',
+      control: 'color',
+      table: {
+        category: 'Colors',
+        subcategory: 'Hover'
+      }
+    }
+  },
+  args: {
+    image: 'https://picsum.photos/500/300',
+    buttonDesign: 'slide',
+    buttonTextColor: 'white',
+    buttonBgColor: 'black',
+    bordered: true,
+    ctaText: 'Shop Now'
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _FyreCard = Template.bind({});
+
+exports._FyreCard = _FyreCard;
+_FyreCard.args = {}; // export const _Card = (args) => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title='title'
+//             titleClass='text-center font-bold'
+//             image='https://picsum.photos/500/300'
+//             ctaText='Book Now'
+//             url='/'
+//             buttonDesign='slide'
+//             buttonBgColor='black'
+//             buttonTextColor='white'
+//             hoverButtonBgColor='white'
+//             hoverButtonTextColor='black'
+//             bordered/>
+//     )
+// }

package/dist/components/{Input → Organisms/FyreCard}/index.js

@@ -9,61 +9,65 @@ require("core-js/modules/es.object.assign.js");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Button = _interopRequireDefault(require("../Button/"));
+var _Button = _interopRequireDefault(require("../../Atoms/Button"));
+
+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 Input = _ref => {
+const FyreCard = _ref => {
   let {
     id,
-    label,
-    hideLabel,
-    placeholder,
-    type,
+    image,
     ctaText,
+    imageClass,
     classNames,
+    altText,
+    buttonType,
+    bordered,
+    url,
     buttonDesign,
     buttonBgColor,
     buttonTextColor,
     buttonBorderColor,
     hoverButtonBgColor,
     hoverButtonTextColor,
-    hoverButtonBorderColor,
-    buttonType,
-    onClick
+    hoverButtonBorderColor
   } = _ref;
-  let hidden = +hideLabel ? ' hidden ' : '';
-  let classes = 'flex flex-col w-96 ' + classNames;
-  let labelClasses = 'w-auto ' + hidden;
-  let inputClasses = 'border h-12 pl-2';
+  let classList = 'flex flex-col ';
+  let border = bordered ? ' border border-grey border-opacity-100 ' : '';
+  let classes = classNames ? classNames : '';
+  let imageClassList = ' w-full ';
+  classList += border + classes;
+  imageClassList += imageClass;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: classes
-  }, /*#__PURE__*/_react.default.createElement("label", {
-    className: labelClasses,
-    htmlFor: id
-  }, /*#__PURE__*/_react.default.createElement("b", null, label)), /*#__PURE__*/_react.default.createElement("input", {
-    className: inputClasses,
-    type: type,
+    key: id,
     id: id,
-    placeholder: placeholder
-  }), ctaText && /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    className: "mt-8",
+    className: classList
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "card-content flex flex-1 flex-col"
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("img", {
+    className: imageClassList,
+    src: image,
+    alt: altText
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex justify-end"
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
     ctaText: ctaText,
+    buttonType: buttonType,
+    url: url,
     bgColor: buttonBgColor,
     textColor: buttonTextColor,
     borderColor: buttonBorderColor,
-    hoverTextColor: hoverButtonTextColor,
     hoverBgColor: hoverButtonBgColor,
+    hoverTextColor: hoverButtonTextColor,
     hoverBorderColor: hoverButtonBorderColor
-  }, onClick && {
-    onClick: onClick
-  }, {
-    buttonType: buttonType,
+  }, buttonDesign && {
     buttonDesign: buttonDesign
-  })));
+  })))));
 };
 
-var _default = Input;
+var _default = FyreCard;
 exports.default = _default;

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

@@ -0,0 +1,87 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._ImageLinkWithTitle = exports._ImageLinkWithButton = exports._ImageLinkRounded = exports._ImageLink = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Column = _interopRequireDefault(require("../../Atoms/Column"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Organisms/Image Link',
+  components: _index.default,
+  parameters: {},
+  argTypes: {
+    title: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    image: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    ctaText: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    rounded: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    image: 'https://picsum.photos/400/400'
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_Column.default, {
+  sm: 3,
+  md: 3
+}, /*#__PURE__*/_react.default.createElement(_index.default, args));
+
+const _ImageLink = Template.bind({});
+
+exports._ImageLink = _ImageLink;
+_ImageLink.args = {};
+
+const _ImageLinkWithTitle = Template.bind({});
+
+exports._ImageLinkWithTitle = _ImageLinkWithTitle;
+_ImageLinkWithTitle.args = {
+  title: 'Title'
+};
+
+const _ImageLinkWithButton = Template.bind({});
+
+exports._ImageLinkWithButton = _ImageLinkWithButton;
+_ImageLinkWithButton.args = {
+  ctaText: 'Button 1'
+};
+
+const _ImageLinkRounded = Template.bind({});
+
+exports._ImageLinkRounded = _ImageLinkRounded;
+_ImageLinkRounded.args = {
+  title: 'Title',
+  ctaText: 'Button 1',
+  rounded: true
+};

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = _interopRequireDefault(require("../../Atoms/Button"));
+
+require("../../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ImageLink = _ref => {
+  let {
+    image,
+    altText,
+    title,
+    ctaText,
+    ctaLink,
+    classes,
+    rounded
+  } = _ref;
+  const classList = 'cursor-pointer lg:mx-3 md:mx-1 mx-1 lg:mb-5 md:mb-2 mb-2 hover:opacity-50 overflow-hidden text-center ' + classes;
+  let roundedClass = rounded ? 'rounded-full' : '';
+  return /*#__PURE__*/_react.default.createElement("a", {
+    href: ctaLink
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: roundedClass + ' ' + classList + ' relative overflow-hidden'
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: image,
+    alt: altText,
+    className: "object-cover w-full h-full"
+  }), title && /*#__PURE__*/_react.default.createElement("h1", {
+    className: "absolute bg-black text-white py-2 mt-4 top-0 inset-x-0 text-center"
+  }, title), ctaText && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    className: "absolute mx-8 mb-4 bottom-0 inset-x-0 text-center",
+    ctaText: ctaText
+  })));
+};
+
+var _default = ImageLink;
+exports.default = _default;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._ImageLinkList = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const getLinks = () => {
+  return new Array(16).fill(null).map(() => {
+    return {
+      image: "https://picsum.photos/400/400",
+      title: 'Hi',
+      ctaText: 'button'
+    };
+  });
+};
+
+var _default = {
+  title: 'Trepur Components/Organisms/Image Link List',
+  components: _index.default,
+  parameters: {},
+  argTypes: {
+    list: {
+      description: '',
+      control: 'array',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    items: getLinks()
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _ImageLinkList = Template.bind({});
+
+exports._ImageLinkList = _ImageLinkList;
+_ImageLinkList.args = {};