trepur_components 0.1.32 → 0.1.36

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

@@ -15,6 +15,8 @@ var _index = _interopRequireDefault(require("./index"));
 
 require("../../../index.css");
 
+var _index3 = _interopRequireDefault(require("../Column/index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = {
@@ -99,7 +101,8 @@ var _default = {
       defaultValue: true
     }
   },
-  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+  decorators: [story => /*#__PURE__*/_react.default.createElement(_index3.default, {
+    md: "4",
     className: "p-4"
   }, story())],
   parameters: {

package/dist/components/Card/index.js

@@ -49,22 +49,21 @@ const Card = _ref => {
     hoverButtonTextColor,
     hoverButtonBorderColor
   } = _ref;
-  let titleWrapperClass = imageBelowTitle ? ' order-1 p-3 ' : ' p-3 ';
-  let contentWrapperClass = imageBelowTitle ? ' order-3 px-3 ' : ' px-3 ';
-  let btnClass = imageBelowTitle ? ' order-4 w-full p-3 ' : ' w-full p-3 ';
-  let classList = ' flex flex-col bg-white w-auto max-w-md ';
+  let orderClass = imageBelowTitle ? ' order-first ' : '';
+  let titleWrapperClass = ' p-3 ' + orderClass;
+  let contentWrapperClass = ' px-3 ';
+  let btnClass = ' w-full p-3 ';
+  let classList = 'flex flex-col ';
   let border = bordered ? ' border border-grey border-opacity-100 ' : '';
   let titleFont = titleBold ? ' font-bold' : '';
   let titlePosition = titleLeft ? ' text-left ' : titleRight ? ' text-right ' : ' text-center ';
   let roundedImage = rounded ? ' rounded-t-2xl ' : '';
   let roundedCard = rounded ? ' rounded-2xl ' : '';
   let titleClasses = titlePosition + titleFont;
-  let imageWrapperClass = imageBelowTitle ? ' order-2 ' : '';
   let classes = classNames ? classNames : '';
   let imageClassList = ' w-full ';
   imageClassList += imageBelowTitle && imageBelowTitle ? '' : roundedImage;
   classList += border + classes;
-  imageWrapperClass += roundedImage;
   classList += roundedCard;
   imageClassList += imageClass;
   return /*#__PURE__*/_react.default.createElement("div", {
@@ -72,9 +71,9 @@ const Card = _ref => {
     id: id,
     className: classList
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "card-content flex-1"
+    className: "card-content flex flex-1 flex-col"
   }, image && /*#__PURE__*/_react.default.createElement("div", {
-    className: imageWrapperClass && imageWrapperClass
+    className: roundedImage
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: imageClassList,
     src: image,

package/dist/components/CardImageLink/CardImageLink.stories.js

@@ -13,6 +13,8 @@ var _index = _interopRequireDefault(require("./index"));
 
 require("../../../index.css");
 
+var _index3 = _interopRequireDefault(require("../Column/index"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = {
@@ -40,7 +42,8 @@ var _default = {
       defaultValue: 'Button 2'
     }
   },
-  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+  decorators: [story => /*#__PURE__*/_react.default.createElement(_index3.default, {
+    md: "4",
     className: "p-4"
   }, story())],
   parameters: {

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

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Carousel = exports.WithDots = exports.WithAutoPlayInstantTransition = exports.WithAutoPlay = exports.WithArrows = exports.Infinite = exports.Cards = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("../../../index.css");
+
+require("./index.css");
+
+var _index4 = _interopRequireDefault(require("../Card/index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// const textSlides = Array(5)
+//     .fill(null)
+//     .map(
+//         (el, i) =>
+//             `<div className='h-32 border bg-lightest-grey'>
+//                 <h3 className='text-center pt-8 text-4xl'>${i}</h3>
+//             </div>`
+//     )
+const textSlides = ["<div className='h-32 border bg-lightest-grey'>\n    <h3 className='text-center pt-8 text-4xl'>1</h3>\n</div>", "<div className='h-32 border bg-brand-primary'>\n<h3 className='text-center pt-8 text-4xl'>2</h3>\n</div>", "<div className='h-32 border bg-brand-secondary'>\n<h3 className='text-center pt-8 text-4xl'>3</h3>\n</div>"];
+var _default = {
+  title: 'Components/Carousel',
+  argTypes: {},
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _Carousel = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    slides: textSlides,
+    slidesToShow: 1,
+    slidesToScroll: 1
+  });
+};
+
+exports._Carousel = _Carousel;
+
+const WithDots = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    dots: true,
+    slidesToShow: 1,
+    slidesToScroll: 1
+  });
+};
+
+exports.WithDots = WithDots;
+
+const WithArrows = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    dots: true,
+    arrows: true,
+    slidesToShow: 1,
+    slidesToScroll: 1
+  });
+};
+
+exports.WithArrows = WithArrows;
+
+const Infinite = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    dots: true,
+    infinite: true,
+    arrows: true,
+    slidesToShow: 1,
+    slidesToScroll: 1
+  });
+};
+
+exports.Infinite = Infinite;
+
+const WithAutoPlay = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    dots: true,
+    speed: 5000,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 2000
+  });
+};
+
+exports.WithAutoPlay = WithAutoPlay;
+
+const WithAutoPlayInstantTransition = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    dots: true,
+    speed: 0,
+    slidesToShow: 1,
+    slidesToScroll: 1,
+    autoplay: true,
+    autoplaySpeed: 2000
+  });
+};
+
+exports.WithAutoPlayInstantTransition = WithAutoPlayInstantTransition;
+
+const Cards = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    dots: true,
+    infinite: true,
+    arrows: true,
+    slidesToShow: 1,
+    slidesToScroll: 1
+  });
+};
+
+exports.Cards = Cards;

package/dist/components/Carousel/README.md

@@ -0,0 +1,22 @@
+# Testimonial
+
+
+
+## Example
+
+```
+<Testimonial 
+    altText='image'
+    image='https://picsum.photos/100/100'
+    text={args.text}
+    companyName={args.companyName}
+    position={args.position}
+    date={args.date}
+    positionStartDate={args.positionStartDate}
+    positionEndDate={args.positionEndDate}
+    authorsName={args.authorsName}
+    authorsPosition={args.authorsPosition}
+/>
+```
+
+## Parameters

package/dist/components/Carousel/index.css

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

package/dist/components/Carousel/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _reactSlick = _interopRequireDefault(require("react-slick"));
+
+require("slick-carousel/slick/slick.css");
+
+require("slick-carousel/slick/slick-theme.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,
+    arrows,
+    speed,
+    slidesToShow,
+    slidesToScroll,
+    autoplay,
+    autoplaySpeed
+  } = _ref;
+  const settings = {
+    dots: dots,
+    infinite: infinite,
+    arrows: arrows,
+    speed: speed,
+    slidesToShow: slidesToShow,
+    slidesToScroll: slidesToScroll,
+    autoplay: autoplay,
+    autoplaySpeed: autoplaySpeed
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactSlick.default, settings, slides && slides.forEach((slide, i) => {
+    return slide;
+  })));
+};
+
+var _default = Carousel;
+exports.default = _default;

package/dist/components/Column/Column.stories.js

@@ -0,0 +1,168 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Column = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("../../../index.css");
+
+var _index2 = _interopRequireDefault(require("./index"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/Column',
+  argTypes: {
+    sm: {
+      name: 'SM',
+      control: {
+        type: 'text'
+      },
+      defaultValue: ''
+    },
+    md: {
+      name: 'MD',
+      control: {
+        type: 'text'
+      },
+      defaultValue: ''
+    },
+    lg: {
+      name: 'LG',
+      control: {
+        type: 'text'
+      },
+      defaultValue: ''
+    },
+    xl: {
+      name: 'XL',
+      control: {
+        type: 'text'
+      },
+      defaultValue: ''
+    }
+  },
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  addParameters: {
+    oprions: {
+      showNav: false
+    }
+  }
+};
+exports.default = _default;
+
+const _Column = args => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index2.default, {
+    sm: 1,
+    md: 1,
+    lg: 1,
+    xl: 1,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "text-center"
+  }, "Col width 1/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    sm: 2,
+    md: 2,
+    lg: 2,
+    xl: 2,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 2/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    sm: 3,
+    md: 3,
+    lg: 3,
+    xl: 3,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 3/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 4,
+    sm: 4,
+    md: 4,
+    lg: 4,
+    xl: 4,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 24/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 5,
+    sm: 5,
+    md: 5,
+    lg: 5,
+    xl: 5,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 5/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 6,
+    sm: 6,
+    md: 6,
+    lg: 6,
+    xl: 6,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 6/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 7,
+    sm: 7,
+    md: 7,
+    lg: 7,
+    xl: 7,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 7/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 8,
+    sm: 8,
+    md: 8,
+    lg: 8,
+    xl: 8,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 8/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 9,
+    sm: 9,
+    md: 9,
+    lg: 9,
+    xl: 9,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 9/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 10,
+    sm: 10,
+    md: 10,
+    lg: 10,
+    xl: 10,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 10/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 11,
+    sm: 11,
+    md: 11,
+    lg: 11,
+    xl: 11,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 11/12")), /*#__PURE__*/_react.default.createElement(_index2.default, {
+    xs: 12,
+    sm: 12,
+    md: 12,
+    lg: 12,
+    xl: 12,
+    className: "border h-16"
+  }, /*#__PURE__*/_react.default.createElement("p", {
+    className: "pt-4 text-center"
+  }, "Col width 12/12")));
+};
+
+exports._Column = _Column;

package/dist/components/Column/README.md

@@ -0,0 +1,23 @@
+# Calumn
+
+
+
+## Example
+
+```
+<Column 
+    sm='2'
+    md='2'
+    lg='2'
+    xl='2'
+>
+{children}
+<Column/>
+
+```
+
+## Parameters
+`sm={string} (default=null)`
+`md={string} (default=null)`
+`lg={string} (default=null)`
+`xl={string} (default=null)`

package/dist/components/Column/index.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Column = _ref => {
+  let {
+    className,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    children
+  } = _ref;
+
+  const calculateWidth = size => {
+    let width;
+
+    if (size === 12) {
+      width = 'full';
+    } else {
+      width = 'w-' + size + '/12';
+    }
+
+    return width;
+  };
+
+  let classes = className + ' ';
+
+  if (xs) {
+    let xsClass;
+    xsClass = 'xs:' + calculateWidth(xs);
+    classes += xsClass + ' ';
+  }
+
+  if (sm) {
+    let smClass;
+    smClass = 'sm:' + calculateWidth(sm);
+    classes += smClass + ' ';
+  }
+
+  if (md) {
+    let mdClass;
+    mdClass = 'md:' + calculateWidth(md);
+    classes += mdClass + ' ';
+  }
+
+  if (lg) {
+    let lgClass;
+    lgClass = 'lg:' + calculateWidth(lg);
+    classes += lgClass + ' ';
+  }
+
+  if (xl) {
+    let xlClass;
+    xlClass = 'xl:' + calculateWidth(xl);
+    classes += xlClass + ' ';
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: classes
+  }, children);
+};
+
+var _default = Column;
+exports.default = _default;

package/dist/components/Icon/Icon.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports._Icon = void 0;
+exports.default = exports._Icon = exports.WithOnClick = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,6 +13,8 @@ var _index = _interopRequireDefault(require("./index"));
 
 require("../../../index.css");
 
+var _addonActions = require("@storybook/addon-actions");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var _default = {
@@ -53,4 +55,14 @@ const _Icon = args => {
   });
 };
 
-exports._Icon = _Icon;
+exports._Icon = _Icon;
+
+const WithOnClick = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: args.type,
+    size: args.size,
+    onClick: (0, _addonActions.action)('icon-click')
+  });
+};
+
+exports.WithOnClick = WithOnClick;

package/dist/components/InformationIcon/InformationIcon.stories.js

@@ -0,0 +1,122 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._InformationIcon = exports.WithRoundedBorder = exports.WithBorder = exports.AsNumberWithRoundedBorder = exports.AsNumber = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _index = _interopRequireDefault(require("./index"));
+
+require("../../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/InformationIcon',
+  argTypes: {
+    type: {
+      name: 'Type',
+      description: 'The name of the icon you wish to use',
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'search'
+    },
+    text: {
+      name: 'Text',
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'This is some information text'
+    },
+    number: {
+      name: 'Number',
+      control: {
+        type: 'number'
+      },
+      defaultValue: 14
+    },
+    size: {
+      name: 'Size',
+      description: 'an integer between 1 and 5 to dictage the magnification of the icon',
+      control: {
+        type: 'number'
+      },
+      defaultValue: 4
+    }
+  },
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      content: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _InformationIcon = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: args.type,
+    size: args.size,
+    text: args.text
+  });
+};
+
+exports._InformationIcon = _InformationIcon;
+
+const WithBorder = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: args.type,
+    size: args.size,
+    text: args.text,
+    bordered: true
+  });
+};
+
+exports.WithBorder = WithBorder;
+
+const WithRoundedBorder = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: args.type,
+    size: args.size,
+    text: args.text,
+    bordered: true,
+    rounded: true
+  });
+};
+
+exports.WithRoundedBorder = WithRoundedBorder;
+
+const AsNumber = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: args.type,
+    size: args.size,
+    number: args.number,
+    text: args.text
+  });
+};
+
+exports.AsNumber = AsNumber;
+
+const AsNumberWithRoundedBorder = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.default, {
+    type: args.type,
+    size: args.size,
+    number: args.number,
+    text: args.text,
+    bordered: true,
+    rounded: true,
+    classNames: "py-4",
+    imageClassNames: "pb-4",
+    bgColor: "#38B6FF",
+    textColor: "white"
+  });
+};
+
+exports.AsNumberWithRoundedBorder = AsNumberWithRoundedBorder;