trepur_components 0.1.43 → 0.2.2

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

@@ -0,0 +1,111 @@
+import React from 'react'
+import Carousel from './index'
+import './index.css'
+import mp4 from '../../../Assets/Videos/example.mp4'
+import Video from '../../Atoms/Video'
+
+const textSlides = [
+    <div className='bg-black'>
+        <Video classes='mx-auto' mp4File={mp4} autoPlay/>
+    </div>,
+    <div className='h-32 border bg-brand-primary'>
+        <h3 className='text-center pt-8 text-4xl'>2</h3>
+    </div>,
+    <div className='h-32 border bg-brand-secondary'>
+        <h3 className='text-center pt-8 text-4xl'>3</h3>
+    </div>
+]
+
+export default {
+    title: 'Trepur Components/Organisms/Carousel',
+    component: Carousel,
+    parameters: {},
+    argTypes: {
+        slides: {
+            description: '',
+            control: 'array',
+            table: {
+                category: ''
+            }
+        },
+        slidesToShow: {
+            description: '',
+            control: 'number',
+            table: {
+                category: ''
+            }
+        },
+        slidesToScroll: {
+            description: '',
+            control: 'number',
+            table: {
+                category: ''
+            }
+        },
+        infinite: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: ''
+            }
+        },
+        arrows: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: ''
+            }
+        },
+        dots: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: ''
+            }
+        },
+        speed: {
+            description: 'milliseconds',
+            control: 'number',
+            table: {
+                category: ''
+            }
+        },
+        autoPlay: {
+            description: '',
+            control: 'boolean',
+            table: {
+                category: ''
+            }
+        },
+        autoPlaySpeed: {
+            description: 'milliseconds',
+            control: 'number',
+            table: {
+                category: ''
+            }
+        },
+        speed: {
+            description: 'milliseconds',
+            control: 'number',
+            table: {
+                category: ''
+            }
+        }
+    },
+    args: {
+        slides: textSlides,
+        slidesToShow: 1,
+        slidesToScroll: 1,
+        dots: true,
+        arrows: true,
+        infinite: true,
+        autoPlay: true,
+        autoPlaySpeed: 2500,
+        speed: 1000
+    }
+}
+
+const Template = (args) => <Carousel {...args} />;
+
+export const _Carousel = Template.bind({});
+_Carousel.args = {};

package/dist/components/Organisms/Carousel/index.css

@@ -0,0 +1,7 @@
+.slick-next {
+  border: 2px solid black;
+}
+
+.slick-prev {
+  border: 2px solid black;
+}

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,18 @@
+import React from 'react'
+import ChevronCard from './index'
+
+export default {
+    title: 'Trepur Components/Organisms/Chevron Card',
+    component: ChevronCard,
+    parameters: {},
+    argTypes: {
+        
+    },
+    args: {
+    }
+}
+
+const Template = (args) => <ChevronCard {...args} />;
+
+export const _ChevronCard = Template.bind({});
+_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,118 @@
+import React from 'react'
+import { 
+    buttonDesignOptions, 
+    buttonTypeOptions 
+} from '../../../utils/controls'
+import Form from './index'
+
+export default {
+    title: 'Trepur Components/Organisms/Form',
+    components: Form,
+    parameters: {},
+    argTypes: {
+        title: {
+            description: '',
+            control: 'text',
+            table: {
+                category: '',
+            },
+        },
+        components: {
+            description: '',
+            control: 'array',
+            table: {
+                category: '',
+            },
+        },
+        buttonDesign: {
+            description: '',
+            control: 'select',
+            options: 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: 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'
+            }
+        ]
+    }
+}
+
+const Template = (args) => <Form {...args} />;
+
+export const _Form = Template.bind({});
+_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,127 @@
+import React from 'react'
+import FyreCard from './index'
+import {
+    buttonDesignOptions,
+    buttonTypeOptions
+} from '../../../utils/controls'
+
+export default {
+    title: 'Trepur Components/Organisms/Fyre Card',
+    components: FyreCard,
+    parameters: {},
+    argTypes: {
+        ctaText: {
+            description: '',
+            control: 'text',
+            table: {
+                category: '',
+            },
+        },
+        image: {
+            description: '',
+            control: 'text',
+            table: {
+                category: '',
+            },
+        },
+        buttonDesign: {
+            description: '',
+            control: 'select',
+            options: buttonDesignOptions,
+            table: {
+                category: '',
+            },
+        },
+        buttonType: {
+            description: '',
+            control: 'select',
+            options: 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'
+    }
+}
+
+const Template = (args) => <FyreCard {...args} />;
+
+export const _FyreCard = Template.bind({});
+_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,64 @@
+import React from 'react'
+import Column from '../../Atoms/Column';
+import ImageLink from './index'
+
+export default {
+    title: 'Trepur Components/Organisms/Image Link',
+    components: ImageLink,
+    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',
+    },
+}
+
+const Template = (args) => <Column sm={3} md={3}><ImageLink {...args} /></Column>
+
+export const _ImageLink = Template.bind({});
+_ImageLink.args = {};
+
+export const _ImageLinkWithTitle = Template.bind({});
+_ImageLinkWithTitle.args = {
+    title: 'Title'
+};
+
+export const _ImageLinkWithButton = Template.bind({});
+_ImageLinkWithButton.args = {
+    ctaText: 'Button 1',
+};
+
+export const _ImageLinkRounded = Template.bind({});
+_ImageLinkRounded.args = {
+    title: 'Title',
+    ctaText: 'Button 1',
+    rounded: true,
+};