trepur_components 0.1.43 → 0.2.2

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

@@ -0,0 +1,122 @@
+import React from 'react'
+import Breadcrumbs from './index'
+
+export default {
+    title: 'Trepur Components/Organisms/Breadcrumbs',
+    components: Breadcrumbs,
+    parameters: {},
+    argTypes: {
+        links: {
+            description: '',
+            control: 'array',
+            table: {
+                category: '',
+            }
+        },
+        bgColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+                subcategory: 'Hover'
+            }
+        },
+        hoverBgColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+                subcategory: 'Hover'
+            }
+        },
+        borderColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+                subcategory: 'Hover'
+            }
+        },
+        hoverBorderColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+                subcategory: 'Hover'
+            }
+        },
+        textColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+            }
+        },
+        hoverTextColor: {
+            description: '',
+            control: 'color',
+            table: {
+                category: 'Colors',
+                subcategory: 'Hover'
+            }
+        },
+    },
+    args: {
+        links: [
+            {
+                link: '/', 
+                name: 'link 1'
+            },
+            {
+                link: '/', 
+                name: 'link 2'
+            },
+            {
+                link: '/', 
+                name: 'link 3'
+            },
+            {
+                link: '/', 
+                name: 'link 4'
+            },
+            {
+                link: '/', 
+                name: 'link 5'
+            }
+        ]
+    }
+}
+
+const Template = (args) => <Breadcrumbs {...args} />;
+
+export const _BreadcrumbsBordered = Template.bind({});
+_BreadcrumbsBordered.args = {};
+
+// export const _BreadcrumbsBordered = (args) => {
+//     return (
+//         <Breadcrumbs 
+//             links={links}
+//             textColor='white'
+//         />
+//     )
+// }
+
+// export const WithColors = (args) => {
+//     return (
+//         <Breadcrumbs 
+//             links={links}
+//             bgColor='#38B6FF'
+//             borderColor='white'
+//             textColor='white'
+//             hoverTextColor='#38B6FF'
+//             hoverBgColor='white'
+//             hoverBorderColor='#38B6FF'
+//         />
+//     )
+// }
+
+// export const WithOnlyOneLink = (args) => {
+//     return (
+//         <Breadcrumbs links={link}/>
+//     )
+// }

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

@@ -7,7 +7,9 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _index = _interopRequireDefault(require("../BreadcrumbsBorderedItem/index"));
+var _BreadcrumbsItem = _interopRequireDefault(require("../../Atoms/BreadcrumbsItem"));
+
+require("../../../../index.css");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -36,7 +38,7 @@ const Breadcrumbs = _ref => {
       bType = 'link';
     }
 
-    return /*#__PURE__*/_react.default.createElement(_index.default, {
+    return /*#__PURE__*/_react.default.createElement(_BreadcrumbsItem.default, {
       classNames: margin,
       name: link.name,
       link: link.link,

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

@@ -0,0 +1,352 @@
+import React from 'react'
+import Card from './index'
+import {
+    buttonOptions
+} from '../../../utils/controls'
+import mp4File from '../../../Assets/Videos/example.mp4'
+
+export default {
+    title: 'Trepur Components/Organisms/Card',
+    component: Card,
+    parameters: {},
+    argTypes: {
+        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: '',
+            },
+        },
+        ...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'
+    }
+}
+
+const Template = (args) => <Card {...args} />;
+
+export const _Card = Template.bind({});
+_Card.args = {};
+
+export const _ImageCard = Template.bind({});
+_ImageCard.args = {
+    image: 'https://picsum.photos/500/300',
+};
+
+export const _VideoCard = Template.bind({});
+_VideoCard.args = {
+    mp4File: mp4File,
+    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,64 @@
+import React from 'react'
+import CardWithTopImage from './index'
+import logo from '../../../Assets/Images/logoBlue.png'
+
+export default {
+    title: 'Trepur Components/Organisms/Card With Top Image',
+    component: CardWithTopImage,
+    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: logo,
+        roundedImage: true
+    }
+}
+
+const Template = (args) => <CardWithTopImage {...args} />;
+
+export const _CardWithTopImage = Template.bind({});
+_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))
+}