trepur_components 0.1.43 → 0.2.0

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

@@ -0,0 +1,359 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._VideoCard = exports._ImageCard = exports._Card = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _controls = require("../../../utils/controls");
+
+var _example = _interopRequireDefault(require("../../../Assets/Videos/example.mp4"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _default = {
+  title: 'Trepur Components/Organisms/Card',
+  component: _index.default,
+  parameters: {},
+  argTypes: _objectSpread({
+    title: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    image: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    subTitle: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    description: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    extraText: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    imageBelowTitle: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    titleLeft: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    titleRight: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    titleBold: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    image: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    rounded: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    bordered: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    }
+  }, _controls.buttonOptions),
+  args: {
+    title: 'This is a title',
+    subTitle: 'This is a subtitle',
+    description: 'This is a description paragraph',
+    extraText: 'This is another paragraph',
+    bordered: true,
+    classNames: 'w-96'
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Card = Template.bind({});
+
+exports._Card = _Card;
+_Card.args = {};
+
+const _ImageCard = Template.bind({});
+
+exports._ImageCard = _ImageCard;
+_ImageCard.args = {
+  image: 'https://picsum.photos/500/300'
+};
+
+const _VideoCard = Template.bind({});
+
+exports._VideoCard = _VideoCard;
+_VideoCard.args = {
+  mp4File: _example.default,
+  withControls: false,
+  autoPlay: true
+}; // export const _Card = (args) => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title={args.title}
+//             titleClass='text-center font-bold'
+//             subTitle={args.subTitle}
+//             extraText={args.extraText}
+//             description={args.description}
+//             image={args.image}
+//             hasCta={args.hasCta}
+//             ctaText={args.ctaText}
+//             url='/'
+//             imageBelowTitle={args.imageBelowTitle}
+//             rounded={args.rounded}
+//             buttonStyle={args.buttonStyle}
+//             bordered={args.bordered}/>
+//     )
+// }
+// export const CardTitleBold = (args) => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title={args.title}
+//             titleBold
+//             bordered={true}/>
+//     )
+// }
+// export const CardTitleLeft = (args) => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title={args.title}
+//             titleLeft
+//             bordered={true}/>
+//     )
+// }
+// export const CardTitleRight = (args) => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title={args.title}
+//             titleRight
+//             bordered={true}/>
+//     )
+// }
+// export const CardWithImage = (args) => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title={args.title}
+//             titleClass='text-center font-bold'
+//             image='https://picsum.photos/500/300'
+//             bordered={true}/>
+//     )
+// }
+// export const CardWithText = (args) => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title={args.title}
+//             titleClass='text-center font-bold'
+//             subTitle={args.subTitle}
+//             extraText={args.extraText}
+//             description={args.description}
+//             image='https://picsum.photos/500/500'
+//             bordered={true}/>
+//     )
+// }
+// export const CardWithButton = (args) => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title={args.title}
+//             titleClass='text-center font-bold'
+//             subTitle={args.subTitle}
+//             extraText={args.extraText}
+//             description={args.description}
+//             image='https://picsum.photos/500/300'
+//             hasCta={args.hasCta}
+//             ctaText={args.ctaText}
+//             url='/'
+//             buttonType='internal'
+//             buttonStyle={args.buttonStyle}
+//             bordered={true}/>
+//     )
+// }
+// export const CardWithButtonStyles = (args) => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title={args.title}
+//             titleClass='text-center font-bold'
+//             subTitle={args.subTitle}
+//             extraText={args.extraText}
+//             description={args.description}
+//             image='https://picsum.photos/500/300'
+//             hasCta={args.hasCta}
+//             ctaText={args.ctaText}
+//             url='/'
+//             buttonType='internal'
+//             buttonStyle={args.buttonStyle}
+//             bordered={true}
+//             buttonBgColor='blue'
+//             buttonTextColor='white'
+//             buttonBorderColor='blue'
+//             hoverButtonBgColor='white'
+//             hoverButtonTextColor='blue'
+//             hoverButtonBorderColor='blue'
+//         />
+//     )
+// }
+// export const CardWithSlideButton = (args) => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title={args.title}
+//             titleClass='text-center font-bold'
+//             subTitle={args.subTitle}
+//             extraText={args.extraText}
+//             description={args.description}
+//             image='https://picsum.photos/500/300'
+//             hasCta={args.hasCta}
+//             buttonDesign='slide'
+//             buttonBgColor='red'
+//             buttonTextColor='white'
+//             buttonBorderColor='red'
+//             hoverButtonTextColor='red'
+//             hoverButtonBgColor='red'
+//             hoverButtonBorderColor='red'
+//             ctaText={args.ctaText}
+//             url='/'
+//             buttonType='button'
+//             bordered={true}/>
+//     )
+// }
+// export const CardWithImageBelowTitle = (args) => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title={args.title}
+//             titleClass='text-center font-bold'
+//             subTitle={args.subTitle}
+//             extraText={args.extraText}
+//             description={args.description}
+//             image='https://picsum.photos/500/300'
+//             hasCta={args.hasCta}
+//             ctaText={args.ctaText}
+//             url='/'
+//             buttonType='button'
+//             buttonStyle={args.buttonStyle}
+//             imageBelowTitle={true}
+//             bordered={true}/>
+//     )
+// }
+// export const CardRounded = (args) => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title={args.title}
+//             titleClass='text-center font-bold'
+//             subTitle={args.subTitle}
+//             extraText={args.extraText}
+//             description={args.description}
+//             image='https://picsum.photos/500/300'
+//             hasCta={args.hasCta}
+//             ctaText={args.ctaText}
+//             url='/'
+//             buttonType='button'
+//             buttonStyle={args.buttonStyle}
+//             rounded={true}
+//             bordered={true}/>
+//     )
+// }
+// export const lotsOfCards = (args) => {
+//     const options = ['300', '400', '500']
+//     let cards = []
+//     let width, height
+//     for (let i = 0; i < 8 ; i++) {
+//         width = options[Math.floor(Math.random() * (2 + 0))]
+//         height = options[Math.floor(Math.random() * (2 + 0))]
+//         cards.push(<Card
+//             id={'card_' + i} 
+//             classNames='m-2'
+//             title={args.title}
+//             titleClass='text-center font-bold'
+//             subTitle={args.subTitle}
+//             extraText={args.extraText}
+//             description={args.description}
+//             image={'https://picsum.photos/' + width + '/' + height}
+//             hasCta={args.hasCta}
+//             ctaText={args.ctaText}
+//             imageBelowTitle={args.imageBelowTitle}
+//             rounded={true}
+//             bordered={true}
+//             buttonType='internal'
+//             url='/?path=/story/components-card--lots-of-cards'/>
+//         )
+//     }
+//     return (
+//         <div className="grid grid-cols-4 grid-flow-row">
+//             {cards}
+//         </div>
+//     )
+// }
+// export const ImageCard = (args) => {
+//     return (
+//         <Card 
+//             image='https://picsum.photos/500/300' 
+//             rounded={args.rounded} 
+//             bordered={args.bordered}
+//         />
+//     )
+// }

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

@@ -11,7 +11,11 @@ require("core-js/modules/es.symbol.description.js");
 
 var _react = _interopRequireDefault(require("react"));
 
-var _index = _interopRequireDefault(require("../Button/index"));
+var _index = _interopRequireDefault(require("../../Atoms/Button/index"));
+
+require("../../../../index.css");
+
+var _Video = _interopRequireDefault(require("../../Atoms/Video"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -41,6 +45,18 @@ const Card = _ref => {
     rounded,
     bordered,
     url,
+    videoId,
+    videoClassNames,
+    autoPlay,
+    muted,
+    poster,
+    mp4File,
+    webmFile,
+    ogvFile,
+    videoHeight,
+    videoWidth,
+    withControls,
+    withPoster,
     buttonDesign,
     buttonBgColor,
     buttonTextColor,
@@ -72,7 +88,27 @@ const Card = _ref => {
     className: classList
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "card-content flex flex-1 flex-col"
-  }, image && /*#__PURE__*/_react.default.createElement("div", {
+  }, mp4File || webmFile || ogvFile ? /*#__PURE__*/_react.default.createElement("div", {
+    className: roundedImage
+  }, /*#__PURE__*/_react.default.createElement(_Video.default, _extends({
+    id: videoId,
+    classNames: videoClassNames,
+    autoPlay: autoPlay,
+    muted: muted
+  }, poster && {
+    poster: poster
+  }, mp4File && {
+    mp4File: mp4File
+  }, webmFile && {
+    webmFile: webmFile
+  }, ogvFile && {
+    ogvFile: ogvFile
+  }, {
+    height: videoHeight,
+    width: videoWidth,
+    withControls: withControls,
+    withPoster: withPoster
+  }))) : image && /*#__PURE__*/_react.default.createElement("div", {
     className: roundedImage
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: imageClassList,

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

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._CardWithTopImage = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+var _logoBlue = _interopRequireDefault(require("../../../Assets/Images/logoBlue.png"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Trepur Components/Organisms/Card With Top Image',
+  component: _index.default,
+  parameters: {},
+  argTypes: {
+    image: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    roundedImage: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    roundedCard: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    },
+    shadow: {
+      description: '',
+      control: 'boolean',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    image: _logoBlue.default,
+    roundedImage: true
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _CardWithTopImage = Template.bind({});
+
+exports._CardWithTopImage = _CardWithTopImage;
+_CardWithTopImage.args = {}; // export const _CardWithTopImage = (args) => {
+//     return (
+//         <CardWithTopImage image={logo} roundedImage shadow/>
+//     )
+// }
+// export const CardWithChild = (args) => {
+//     return (
+//         <CardWithTopImage image={logo} roundedImage shadow>
+//             <Button className='mt-20' ctaText='Hello'/>
+//         </CardWithTopImage>
+//     )
+// }

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

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("../../Atoms/Image/index"));
+
+require("../../../../index.css");
+
+require("./styles.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CardWithTopImage = _ref => {
+  let {
+    id,
+    image,
+    imageClass,
+    classNames,
+    altText,
+    roundedCard,
+    roundedImage,
+    bordered,
+    shadow,
+    bgColor,
+    hoverBgColor,
+    children
+  } = _ref;
+  let classes = 'w-full px-4 ';
+  classes += classNames ? classNames : '';
+  let cardBordered = bordered ? ' border border-grey border-opacity-100 ' : '';
+  let cardRounded = roundedCard ? ' rounded-2xl ' : '';
+  let imageRounded = roundedImage ? ' rounded-full ' : '';
+  let cardShadow = shadow ? '  ' : '';
+  let imageWrapperClasses = '';
+  const imageClasses = 'flex mx-auto w-24 bg-white p-4 ' + imageRounded;
+  const contentClasses = 'pt-12 px-4 h-96 -mt-12 bg-white ' + cardShadow + cardRounded + cardBordered;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    id: 'wrapper',
+    className: classes
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    id: "image",
+    classNames: imageWrapperClasses
+  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+    altText: altText,
+    image: image,
+    classNames: imageClasses
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    id: "content",
+    className: contentClasses
+  }, children));
+};
+
+var _default = CardWithTopImage;
+exports.default = _default;

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

@@ -0,0 +1,3 @@
+#wrapper {
+    filter: drop-shadow(0 4px 8px rgb(154, 154, 154))
+}

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

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Carousel = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("./index.css");
+
+var _example = _interopRequireDefault(require("../../../Assets/Videos/example.mp4"));
+
+var _Video = _interopRequireDefault(require("../../Atoms/Video"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const textSlides = [/*#__PURE__*/_react.default.createElement("div", {
+  className: "bg-black"
+}, /*#__PURE__*/_react.default.createElement(_Video.default, {
+  classes: "mx-auto",
+  mp4File: _example.default,
+  autoPlay: true
+})), /*#__PURE__*/_react.default.createElement("div", {
+  className: "h-32 border bg-brand-primary"
+}, /*#__PURE__*/_react.default.createElement("h3", {
+  className: "text-center pt-8 text-4xl"
+}, "2")), /*#__PURE__*/_react.default.createElement("div", {
+  className: "h-32 border bg-brand-secondary"
+}, /*#__PURE__*/_react.default.createElement("h3", {
+  className: "text-center pt-8 text-4xl"
+}, "3"))];
+var _default = {
+  title: 'Trepur Components/Organisms/Carousel',
+  component: _index.default,
+  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
+  }
+};
+exports.default = _default;
+
+const Template = args => /*#__PURE__*/_react.default.createElement(_index.default, args);
+
+const _Carousel = Template.bind({});
+
+exports._Carousel = _Carousel;
+_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;
+}