trepur_components 0.2.73 → 0.3.1

package/dist/components/Card/index.js

@@ -7,18 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+require("core-js/modules/es.symbol.description.js");
+
 require("core-js/modules/web.dom-collections.iterator.js");
 
 var _react = _interopRequireWildcard(require("react"));
 
 var _Button = _interopRequireDefault(require("../Button"));
 
-require("../index.css");
-
 var _Video = _interopRequireDefault(require("../Video"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+require("../index.css");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -29,214 +31,122 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 const Card = _ref => {
   let {
-    cardId,
-    cardClasses,
-    cardTitle,
-    cardImage,
-    cardSubTitle,
-    cardDescription,
-    cardExtraText,
-    cardHasCta,
-    cardImageBelowTitle,
-    cardTitleLeft,
-    cardTitleRight,
-    cardTitleBold,
-    cardImageClass,
-    cardSubTitleClass,
-    cardExtraTextClass,
-    cardDescriptionClass,
-    cardAltText,
-    cardRounded,
-    cardBordered,
-    videoId,
-    videoClasses,
-    autoPlay,
-    muted,
-    poster,
-    mp4File,
-    webmFile,
-    ogvFile,
-    videoHeight,
-    videoWidth,
-    withControls,
-    withPoster,
-    buttonId,
-    buttonClasses,
-    buttonText,
-    buttonOnClick,
-    buttonLeftIcon,
-    buttonRightIcon,
-    buttonCenterIcon,
-    buttonBgColor,
-    buttonTextColor,
-    buttonBorderColor,
-    buttonHoverBgColor,
-    buttonHoverTextColor,
-    buttonHoverBorderColor,
-    buttonHoverText,
-    buttonType,
-    buttonUrl,
-    buttonDesign,
-    buttonBordered,
-    buttonRounded,
-    buttonIconBrand,
-    buttonDisabled,
-    onHover
+    id,
+    classes,
+    title,
+    image,
+    subTitle,
+    description,
+    extraText,
+    hasCta,
+    imageBelowTitle,
+    titleLeft,
+    titleRight,
+    titleBold,
+    imageClass,
+    subTitleClass,
+    extraTextClass,
+    descriptionClass,
+    altText,
+    rounded,
+    bordered,
+    videoProps,
+    onHover,
+    iconButtonProps,
+    cardButtonProps,
+    button2Props
   } = _ref;
   const [showHoverButtons, setShowHoverButtons] = (0, _react.useState)(false);
-  let orderClass = cardImageBelowTitle ? ' order-first ' : '';
+  let orderClass = imageBelowTitle ? ' order-first ' : '';
   let btnClass = 'w-full p-3 ';
-  let border = cardBordered ? 'border border-grey border-opacity-100 ' : '';
-  let cardTitleFont = cardTitleBold ? 'font-bold' : '';
-  let cardTitlePosition = cardTitleLeft ? 'text-left ' : cardTitleRight ? 'text-right ' : 'text-center ';
-  let roundedImage = cardRounded ? 'rounded-t-2xl ' : '';
-  let roundedCard = cardRounded ? 'rounded-2xl ' : '';
+  let border = bordered ? 'border border-grey border-opacity-100 ' : '';
+  let cardTitleFont = titleBold ? 'font-bold' : '';
+  let cardTitlePosition = titleLeft ? 'text-left ' : titleRight ? 'text-right ' : 'text-center ';
+  let roundedImage = rounded ? 'rounded-t-2xl ' : '';
+  let roundedCard = rounded ? 'rounded-2xl ' : '';
   let contentWrapperClass = 'px-3 order-3';
   const titleWrapperClass = (0, _classnames.default)({
     [orderClass]: orderClass
   }, 'pt-3');
   const cardTitleClasses = (0, _classnames.default)({
-    [cardTitleFont]: cardTitleFont
-  }, cardTitlePosition, 'font-medium text-md text-grey');
+    [cardTitleFont]: cardTitleFont,
+    [cardTitlePosition]: true
+  }, 'font-medium text-md text-grey');
   const cardSubTitleClassList = (0, _classnames.default)({
-    [cardSubTitleClass]: cardSubTitleClass
+    [subTitleClass]: subTitleClass
   }, 'font-light text-sm text-grey');
   const cardDescriptionClassList = (0, _classnames.default)({
-    [cardDescriptionClass]: cardDescriptionClass
+    [descriptionClass]: descriptionClass
   }, 'font-extraLight text-xs text-light-grey');
   const classList = (0, _classnames.default)({
     [border]: border,
     [roundedCard]: roundedCard,
-    [cardClasses]: cardClasses
-  }, 'flex flex-col ');
+    [classes]: classes
+  }, 'flex flex-col');
   const imageClassList = (0, _classnames.default)({
-    [roundedImage]: !cardImageBelowTitle,
-    [cardImageClass]: cardImageClass
-  }, ' w-full object-cover h-full ');
+    [roundedImage]: !imageBelowTitle,
+    [imageClass]: imageClass
+  }, 'w-full object-cover h-full');
   const videoClassList = (0, _classnames.default)({
-    [roundedImage]: !cardImageBelowTitle,
-    [videoClasses]: videoClasses
-  }, ' w-full object-cover h-full ');
+    [roundedImage]: !imageBelowTitle,
+    [videoProps === null || videoProps === void 0 ? void 0 : videoProps.videoClasses]: videoProps === null || videoProps === void 0 ? void 0 : videoProps.videoClasses
+  }, 'w-full object-cover h-full');
   const cardExtraTextClassList = (0, _classnames.default)({
-    [cardExtraTextClass]: cardExtraTextClass,
-    ['pb-4']: !cardHasCta
+    [extraTextClass]: extraTextClass,
+    'pb-4': !hasCta
   }, 'w-full object-cover h-full font-extraLight text-xs text-light-grey');
   const imageWrapperClassList = (0, _classnames.default)({
-    [' order-2']: cardImageBelowTitle,
-    ["".concat(roundedImage, " order-1")]: !cardImageBelowTitle
-  }, ' h-64 overflow-hidden object-cover ');
+    'order-2': imageBelowTitle,
+    ["".concat(roundedImage, " order-1")]: !imageBelowTitle
+  }, 'h-64 overflow-hidden object-cover');
 
   const toggleHover = isHovering => {
     onHover && isHovering ? setShowHoverButtons(true) : setShowHoverButtons(false);
   };
 
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
-    key: cardId
-  }, cardId && {
-    id: cardId
+  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
   }, {
     className: classList,
     onMouseEnter: () => toggleHover(true),
     onMouseLeave: () => toggleHover(false)
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: "card-content flex flex-1 flex-col"
-  }, mp4File || webmFile || ogvFile ? /*#__PURE__*/_react.default.createElement("div", {
+  }, videoProps !== null && videoProps !== void 0 && videoProps.mp4File || videoProps !== null && videoProps !== void 0 && videoProps.webmFile || videoProps !== null && videoProps !== void 0 && videoProps.ogvFile ? /*#__PURE__*/_react.default.createElement("div", {
     className: imageWrapperClassList
-  }, /*#__PURE__*/_react.default.createElement(_Video.default, _extends({
-    id: videoId,
-    classes: videoClassList,
-    autoPlay: autoPlay,
-    muted: muted
-  }, poster && {
-    poster: poster
-  }, mp4File && {
-    mp4File: mp4File
-  }, webmFile && {
-    webmFile: webmFile
-  }, ogvFile && {
-    ogvFile: ogvFile
-  }, {
-    height: videoHeight,
-    width: videoWidth,
-    withControls: withControls,
-    withPoster: withPoster
-  }))) : cardImage && /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement(_Video.default, {
+    videoProps: videoProps
+  })) : image && /*#__PURE__*/_react.default.createElement("div", {
     className: imageWrapperClassList
   }, /*#__PURE__*/_react.default.createElement("img", {
     className: imageClassList,
-    src: cardImage,
-    alt: cardAltText
+    src: image,
+    alt: altText
   })), !showHoverButtons ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
-    className: cardImageBelowTitle ? 'order-1' : 'order-3'
-  }, cardTitle && /*#__PURE__*/_react.default.createElement("div", {
+    className: imageBelowTitle ? 'order-1' : 'order-3'
+  }, title && /*#__PURE__*/_react.default.createElement("div", {
     className: titleWrapperClass
   }, /*#__PURE__*/_react.default.createElement("h3", {
     className: cardTitleClasses
-  }, cardTitle))), /*#__PURE__*/_react.default.createElement("div", {
+  }, title))), /*#__PURE__*/_react.default.createElement("div", {
     className: contentWrapperClass
-  }, cardSubTitle && /*#__PURE__*/_react.default.createElement("h4", {
+  }, subTitle && /*#__PURE__*/_react.default.createElement("h4", {
     className: cardSubTitleClassList
-  }, cardSubTitle), cardDescription && /*#__PURE__*/_react.default.createElement("p", {
+  }, subTitle), description && /*#__PURE__*/_react.default.createElement("p", {
     className: cardDescriptionClassList
-  }, cardDescription), cardExtraText && /*#__PURE__*/_react.default.createElement("p", {
+  }, description), extraText && /*#__PURE__*/_react.default.createElement("p", {
     className: cardExtraTextClassList
-  }, cardExtraText))) : /*#__PURE__*/_react.default.createElement("div", {
+  }, extraText))) : /*#__PURE__*/_react.default.createElement("div", {
     className: "flex p-2 order-last h-24"
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
-    buttonType: "icon",
-    buttonUrl: "/",
-    buttonCenterIcon: "heart",
-    buttonBgColor: "white",
-    buttonTextColor: "black",
-    buttonBorderColor: "black",
-    buttonHoverBgColor: "black",
-    buttonHoverTextColor: "white",
-    buttonHoverBorderColor: "black",
-    buttonBordered: true,
-    buttonClasses: "mt-8",
-    iconSize: 1,
-    iconHollow: true
+    buttonProps: iconButtonProps
   }), /*#__PURE__*/_react.default.createElement(_Button.default, {
-    buttonClasses: "ml-2 w-full mt-8",
-    buttonText: "Add to basket",
-    buttonBordered: true,
-    buttonRounded: false,
-    buttonDisabled: false,
-    buttonBgColor: "#2f4848",
-    buttonBorderColor: "#2f4848",
-    buttonTextColor: "white"
-  }))), cardHasCta && /*#__PURE__*/_react.default.createElement("div", {
+    buttonProps: button2Props
+  }))), hasCta && /*#__PURE__*/_react.default.createElement("div", {
     className: btnClass
-  }, /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
-    buttonId: buttonId,
-    buttonClasses: buttonClasses + ' w-full',
-    buttonText: buttonText,
-    buttonType: buttonType,
-    buttonUrl: buttonUrl,
-    buttonBordered: buttonBordered,
-    buttonBgColor: buttonBgColor,
-    buttonTextColor: buttonTextColor,
-    buttonBorderColor: buttonBorderColor,
-    buttonHoverBgColor: buttonHoverBgColor,
-    buttonHoverTextColor: buttonHoverTextColor,
-    buttonHoverBorderColor: buttonHoverBorderColor
-  }, buttonDesign && {
-    buttonDesign: buttonDesign
-  }, buttonDisabled && {
-    buttonDisabled
-  }, {
-    buttonOnClick: buttonOnClick,
-    buttonLeftIcon: buttonLeftIcon,
-    buttonRightIcon: buttonRightIcon,
-    buttonCenterIcon: buttonCenterIcon,
-    buttonHoverBgColor: buttonHoverBgColor,
-    buttonHoverTextColor: buttonHoverTextColor,
-    buttonHoverBorderColor: buttonHoverBorderColor,
-    buttonHoverText: buttonHoverText,
-    buttonUrl: buttonUrl,
-    buttonRounded: buttonRounded,
-    buttonIconBrand: buttonIconBrand
-  }))));
+  }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    buttonProps: cardButtonProps
+  })));
 };
 
 var _default = Card;

package/dist/components/CardWithTopImage/index.js

@@ -11,6 +11,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _index = _interopRequireDefault(require("../Image/index"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 require("../index.css");
 
 require("./index.css");
@@ -23,42 +25,37 @@ const CardWithTopImage = _ref => {
   let {
     id,
     contentId,
-    imageId,
     classes,
     imageWrapperClasses,
-    imageClasses,
     contentClasses,
-    image,
-    altText,
-    roundedCard,
-    roundedImage,
     bordered,
-    shadow,
-    children
+    children,
+    imageProps
   } = _ref;
-  let classList = 'w-full px-4 ';
-  classList += classes ? classes : '';
-  let imageWrapperClassList = imageWrapperClasses && imageWrapperClasses;
-  let imageClassList = 'flex mx-auto w-24 bg-white p-4 ';
-  imageClassList += roundedImage ? 'rounded-full ' : '';
-  imageClassList += imageClasses;
-  let contentClassList = 'pt-12 px-4 h-auto pb-16 -mt-12 bg-white ';
-  contentClassList += shadow ? ' ' : '';
-  contentClassList += roundedCard ? 'rounded-2xl ' : '';
-  contentClassList += bordered ? 'border border-grey border-opacity-100 ' : '';
-  contentClassList += contentClasses ? contentClasses : '';
+  const classList = (0, _classnames.default)({
+    [classes]: classes
+  }, 'w-full px-4');
+  const imageWrapperClassList = (0, _classnames.default)({
+    [imageWrapperClasses]: imageWrapperClasses
+  });
+  const imageClassList = (0, _classnames.default)({
+    [imageProps.classes]: imageProps.classes
+  }, 'flex mx-auto w-24 bg-white p-4');
+  const contentClassList = (0, _classnames.default)({
+    'border border-grey border-opacity-100': bordered,
+    [contentClasses]: contentClasses
+  }, 'pt-12 px-4 h-auto pb-16 -mt-12 bg-white');
+  imageProps.classes = imageProps.classes + ' ' + imageClassList;
   return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
     id: id
   }, {
     className: classList
-  }), /*#__PURE__*/_react.default.createElement("div", _extends({}, imageId && {
-    id: imageId + '_imageId'
+  }), /*#__PURE__*/_react.default.createElement("div", _extends({}, imageProps.id && {
+    id: imageProps.id + '_imageId'
   }, {
     className: imageWrapperClassList
   }), /*#__PURE__*/_react.default.createElement(_index.default, {
-    altText: altText,
-    image: image,
-    classes: imageClassList
+    imageProps: imageProps
   })), /*#__PURE__*/_react.default.createElement("div", _extends({}, contentId && {
     id: contentId + '_content'
   }, {

package/dist/components/Carousel/index.js

@@ -95,8 +95,10 @@ const Carousel = _ref => {
         return slider === null || slider === void 0 ? void 0 : (_slider$current = slider.current) === null || _slider$current === void 0 ? void 0 : _slider$current.slickNext();
       }
     }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      type: nextArrowIcon,
-      size: nextArrowIconSize
+      iconProps: {
+        type: nextArrowIcon,
+        size: nextArrowIconSize
+      }
     }));
   };
 
@@ -111,8 +113,10 @@ const Carousel = _ref => {
         return slider === null || slider === void 0 ? void 0 : (_slider$current2 = slider.current) === null || _slider$current2 === void 0 ? void 0 : _slider$current2.slickPrev();
       }
     }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      type: previousArrowIcon,
-      size: previousArrowIconSize
+      iconProps: {
+        type: previousArrowIcon,
+        size: previousArrowIconSize
+      }
     }));
   };
 

package/dist/components/CarouselV2/index.css

@@ -0,0 +1,3 @@
+.arrow {
+  -webkit-transform: translateY(-50%);
+}

package/dist/components/CarouselV2/index.js

@@ -0,0 +1,173 @@
+"use strict";
+
+require("core-js/modules/es.object.assign.js");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/web.dom-collections.iterator.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+require("keen-slider/keen-slider.min.css");
+
+var _react2 = require("keen-slider/react");
+
+require("./index.css");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+//https://keen-slider.io/docs#usage-in-react
+const CarouselV2 = _ref => {
+  let {
+    id,
+    classes,
+    breakpoints,
+    defaultAnimation,
+    //disabled,
+    drag,
+    dragSpeed,
+    initial,
+    loop,
+    mode,
+    range,
+    renderMode,
+    rtl,
+    rubberband,
+    selector,
+    slides,
+    vertical,
+    animationStarted,
+    animationStopped,
+    animationEnded,
+    created,
+    destroyed,
+    detailsChanged,
+    dragged,
+    dragStarted,
+    dragChecked,
+    dragEnded,
+    beforeOptionsChanged,
+    optionsChanged,
+    slideChanged,
+    updated,
+    slidesToShow,
+    spacing,
+    number,
+    origin,
+    arrows,
+    dots
+  } = _ref;
+  const classList = "".concat(classes);
+  const dotClasses = "w-4 h-4 cursor-pointer focus:".concat(dots.activeColours, " rounded-full mx-1 ");
+  const [currentSlide, setCurrentSlide] = (0, _react.useState)(0);
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  const [sliderRef, instanceRef] = (0, _react2.useKeenSlider)({
+    initial: initial,
+    breakpoints: breakpoints,
+    defaultAnimation: defaultAnimation,
+    //disabled: disabled,
+    drag: drag,
+    dragSpeed: dragSpeed,
+    initial: initial,
+    loop: loop,
+    mode: mode,
+    range: range,
+    renderMode: renderMode,
+    rtl: rtl,
+    rubberband: rubberband,
+    // selector: selector,
+    vertical: vertical,
+
+    slideChanged(slider) {
+      setCurrentSlide(slider.track.details.rel);
+    },
+
+    created() {
+      setLoaded(true);
+    },
+
+    animationStarted: animationStarted,
+    animationStopped: animationStopped,
+    animationEnded: animationEnded,
+    // created: created,
+    destroyed: destroyed,
+    detailsChanged: detailsChanged,
+    dragged: dragged,
+    dragStarted: dragStarted,
+    dragChecked: dragChecked,
+    dragEnded: dragEnded,
+    beforeOptionsChanged: beforeOptionsChanged,
+    optionsChanged: optionsChanged,
+    // slideChanged: slideChanged,
+    updated: updated,
+    slides: {
+      perView: slidesToShow,
+      spacing: spacing,
+      origin: origin,
+      number: number
+    }
+  });
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+    id: id
+  }, {
+    className: "relative navigation-wrapper ".concat(classList)
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    ref: sliderRef,
+    className: "keen-slider"
+  }, slides && slides), arrows.visible && loaded && instanceRef.current && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Arrow, {
+    left: true,
+    onClick: e => {
+      var _instanceRef$current;
+
+      return e.stopPropagation() || ((_instanceRef$current = instanceRef.current) === null || _instanceRef$current === void 0 ? void 0 : _instanceRef$current.prev());
+    },
+    disabled: currentSlide === 0,
+    arrows: arrows
+  }), /*#__PURE__*/_react.default.createElement(Arrow, {
+    onClick: e => {
+      var _instanceRef$current2;
+
+      return e.stopPropagation() || ((_instanceRef$current2 = instanceRef.current) === null || _instanceRef$current2 === void 0 ? void 0 : _instanceRef$current2.next());
+    },
+    disabled: currentSlide === instanceRef.current.track.details.slides.length - 1,
+    arrows: arrows
+  }))), dots.visible && loaded && instanceRef.current && /*#__PURE__*/_react.default.createElement("div", {
+    className: "flex py-4 justify-center"
+  }, [...Array(instanceRef.current.track.details.slides.length).keys()].map(idx => {
+    return /*#__PURE__*/_react.default.createElement("button", {
+      key: idx,
+      onClick: () => {
+        var _instanceRef$current3;
+
+        (_instanceRef$current3 = instanceRef.current) === null || _instanceRef$current3 === void 0 ? void 0 : _instanceRef$current3.moveToIdx(idx);
+      },
+      className: dotClasses + (currentSlide === idx ? " active ".concat(dots.activeColours) : " ".concat(dots.colours))
+    });
+  })));
+};
+
+function Arrow(props) {
+  const disabeld = props.disabled ? " arrow--disabled ".concat(props.arrows.disabledColours) : "";
+  return /*#__PURE__*/_react.default.createElement("svg", {
+    onClick: props.onClick,
+    className: "arrow w-12 translate-y-2/4 h-12 absolute cursor-pointer  top-1/2 ".concat(props.left ? "arrow--left left-1.5" : "arrow--right left-auto right-1.5", " ").concat(disabeld),
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, props.left && /*#__PURE__*/_react.default.createElement("path", {
+    className: "".concat(props.arrows.colours),
+    d: "M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z"
+  }), !props.left && /*#__PURE__*/_react.default.createElement("path", {
+    className: "".concat(props.arrows.colours),
+    d: "M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z"
+  }));
+}
+
+var _default = CarouselV2;
+exports.default = _default;