trepur_components 0.3.22 → 0.3.23

package/dist/components/BreadcrumbsItem/index.js

@@ -15,8 +15,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _BreadcrumbsItemModule = _interopRequireDefault(require("./BreadcrumbsItem.module.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); }
@@ -87,13 +85,33 @@ const BreadcrumbsItem = _ref => {
   }, 'absolute top-0 w-0 h-0 border-t');
 
   const frontArrow = /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(frontArrowClasses, " ").concat(_BreadcrumbsItemModule.default.rightArrow)
+    style: {
+      'border-top': '17px solid transparent',
+      'border-bottom': '15px solid transparent',
+      'border-left': '16px solid',
+      'right': '-16px'
+    },
+    className: frontArrowClasses
   });
 
   const backArrows = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(backArrowsClasses, " ").concat(bottomArrowClasses, " ").concat(_BreadcrumbsItemModule.default.arrowBottom)
+    style: {
+      'border-top': '17px solid',
+      'border-bottom': '18px solid transparent',
+      'border-left': '17px solid transparent',
+      'left': '-17px',
+      '-webkit-transform': 'scaleY(-1)',
+      'transform': 'scaleY(-1)'
+    },
+    className: "".concat(backArrowsClasses, " ").concat(bottomArrowClasses)
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: "".concat(backArrowsClasses, " ").concat(topArrowClasses, " ").concat(_BreadcrumbsItemModule.default.arrowTop)
+    style: {
+      'border-top': '18px solid',
+      'border-bottom': '17px solid transparent',
+      'border-left': '17px solid transparent',
+      'left': '-17px'
+    },
+    className: "".concat(backArrowsClasses, " ").concat(topArrowClasses)
   }));
 
   const renderWithFrontArrow = () => /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/CardWithTopImage/index.js

@@ -13,8 +13,6 @@ var _index = _interopRequireDefault(require("../Image/index"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-require("./index.css");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
@@ -54,7 +52,11 @@ const CardWithTopImage = _ref => {
   imageProps = _objectSpread(_objectSpread({}, imageProps), {}, {
     classes: ((_imageProps3 = imageProps) === null || _imageProps3 === void 0 ? void 0 : _imageProps3.classes) + ' ' + imageClassList
   });
-  return /*#__PURE__*/_react.default.createElement("div", _extends({}, id && {
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    style: {
+      'filter': 'drop-shadow(0 4px 8px rgb(154, 154, 154))'
+    }
+  }, id && {
     id: id
   }, {
     className: classList

package/dist/components/Carousel/index.css

@@ -1,3 +1,4 @@
 .arrow {
   -webkit-transform: translateY(-50%);
-}
+}
+/*# sourceMappingURL=index.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/components/Carousel/index.css"],"names":[],"mappings":"AAAA;EACE,mCAAmC;AACrC","file":"index.css","sourcesContent":[".arrow {\n  -webkit-transform: translateY(-50%);\n}"]}

package/dist/components/StarRating/index.js

@@ -17,8 +17,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-require("./index.css");
-
 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; }
@@ -58,12 +56,13 @@ const StarRating = _ref => {
       var _starRatingProps$icon2;
 
       starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        key: "unchecked_star_".concat(i + 0),
+        key: "checked_star_".concat(i + 0),
         iconProps: {
-          id: "unchecked-".concat(i),
+          id: "checked-".concat(i),
           classes: "".concat(iconClassList, " checked"),
           type: 'star',
-          size: starRatingProps === null || starRatingProps === void 0 ? void 0 : (_starRatingProps$icon2 = starRatingProps.iconProps) === null || _starRatingProps$icon2 === void 0 ? void 0 : _starRatingProps$icon2.size
+          size: starRatingProps === null || starRatingProps === void 0 ? void 0 : (_starRatingProps$icon2 = starRatingProps.iconProps) === null || _starRatingProps$icon2 === void 0 ? void 0 : _starRatingProps$icon2.size,
+          colour: 'text-brand-gold'
         }
       }));
     }
@@ -78,12 +77,13 @@ const StarRating = _ref => {
       var _starRatingProps$icon3;
 
       starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        key: "checked_star_".concat(i + 0),
+        key: "unchecked_star_".concat(i + 0),
         iconProps: {
-          id: "checked-".concat(i),
-          classes: "".concat(iconClassList, " unchecked"),
+          id: "unchecked-".concat(i),
+          classes: "".concat(iconClassList, " unchecked opacity-30 gold"),
           type: 'star',
-          size: starRatingProps === null || starRatingProps === void 0 ? void 0 : (_starRatingProps$icon3 = starRatingProps.iconProps) === null || _starRatingProps$icon3 === void 0 ? void 0 : _starRatingProps$icon3.size
+          size: starRatingProps === null || starRatingProps === void 0 ? void 0 : (_starRatingProps$icon3 = starRatingProps.iconProps) === null || _starRatingProps$icon3 === void 0 ? void 0 : _starRatingProps$icon3.size,
+          colour: 'text-brand-gold'
         }
       }));
     }

package/dist/components/Timeline/index.css

@@ -1,5 +1,5 @@
 /* Vertical */
-#circle.vertical:before {
+/* #circle.vertical:before {
   position: absolute;
   display: block;
   border-left: 1px solid #31a3dd;
@@ -41,10 +41,10 @@
   top: 0%;
   left: 49.9%;
   z-index: -1;
-}
+} */
 
 /* V - collapse*/
-#circle.vertical.collapse:before {
+/* #circle.vertical.collapse:before {
   position: absolute;
   display: block;
   border-left: 1px solid #31a3dd;
@@ -86,9 +86,9 @@
   top: 0%;
   left: 8.2%;
   z-index: -1;
-}
+} */
 /* Horizontal */
-#circle.horizontal:before {
+/* #circle.horizontal:before {
   position: absolute;
   display: block;
   border-top: 1px solid #31a3dd;
@@ -130,4 +130,6 @@
   top: 50%;
   left: -8%;
   z-index: -1;
-}
+} */
+
+/*# sourceMappingURL=index.css.map */

package/dist/components/Timeline/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/components/Timeline/index.css"],"names":[],"mappings":"AAAA,aAAa;AACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;;AAEH,gBAAgB;AAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAe;AACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG","file":"index.css","sourcesContent":["/* Vertical */\n/* #circle.vertical:before {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  top: 0%;\n  left: 49.9%;\n  z-index: -1;\n}\n\n#circle.vertical:after {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  bottom: 0%;\n  left: 49.9%;\n  z-index: -1;\n}\n\n#first-circle.vertical:after {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  bottom: 0%;\n  left: 49.9%;\n  z-index: -1;\n}\n\n#last-circle.vertical:before {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  top: 0%;\n  left: 49.9%;\n  z-index: -1;\n} */\n\n/* V - collapse*/\n/* #circle.vertical.collapse:before {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  top: 0%;\n  left: 8.2%;\n  z-index: -1;\n}\n\n#circle.vertical.collapse:after {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  bottom: 0%;\n  left: 8.2%;\n  z-index: -1;\n}\n\n#first-circle.vertical.collapse:after {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  bottom: 0%;\n  left: 8.2%;\n  z-index: -1;\n}\n\n#last-circle.vertical.collapse:before {\n  position: absolute;\n  display: block;\n  border-left: 1px solid #31a3dd;\n  content: \"\";\n  height: 50%;\n  top: 0%;\n  left: 8.2%;\n  z-index: -1;\n} */\n/* Horizontal */\n/* #circle.horizontal:before {\n  position: absolute;\n  display: block;\n  border-top: 1px solid #31a3dd;\n  content: \"\";\n  width: 70%;\n  top: 50%;\n  left: -8%;\n  z-index: -1;\n}\n\n#circle.horizontal:after {\n  position: absolute;\n  display: block;\n  border-top: 1px solid #31a3dd;\n  content: \"\";\n  width: 70%;\n  top: 50%;\n  right: -12%;\n  z-index: -1;\n}\n\n#first-circle.horizontal:after {\n  position: absolute;\n  display: block;\n  border-top: 1px solid #31a3dd;\n  content: \"\";\n  width: 60%;\n  top: 50%;\n  right: -12%;\n  z-index: -1;\n}\n\n#last-circle.horizontal:before {\n  position: absolute;\n  display: block;\n  border-top: 1px solid #31a3dd;\n  content: \"\";\n  width: 55%;\n  top: 50%;\n  left: -8%;\n  z-index: -1;\n} */\n"]}

package/dist/components/Timeline/index.js

@@ -17,8 +17,6 @@ var _Column = _interopRequireDefault(require("../Column"));
 
 var _Row = _interopRequireDefault(require("../Row"));
 
-require("./index.css");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Timeline = _ref => {
@@ -60,6 +58,86 @@ const Timeline = _ref => {
     'vertical collapse': !isHorizontal && isSm,
     'vertical': !isHorizontal && !isSm
   }, 'w-4 h-4 my-16 text-center mx-auto rounded-full border bg-black');
+  const circleVerticalBefore = {
+    'position': 'absolute',
+    'display': 'block',
+    'border-left': '1px solid #31a3dd',
+    'content': '""',
+    'height': '50%',
+    'top': '0%',
+    'left': '49.9%',
+    'z-index': '-1'
+  };
+  const circleVerticalCollapseBefore = {
+    'position': ' absolute',
+    'display': ' block',
+    'border-left': ' 1px solid #31a3dd',
+    'content': ' ""',
+    'height': ' 50%',
+    'top': ' 0%',
+    'left': ' 8.2%',
+    'z-index': ' -1'
+  };
+  const lastCircleVerticalBefore = {
+    'position': 'absolute',
+    'display': 'block',
+    'border-left': '1px solid #31a3dd',
+    'content': '""',
+    'height': '50%',
+    'top': '0%',
+    'left': '49.9%',
+    'z-index': '-1'
+  };
+  const lastCircleVerticalCollapseBefore = {
+    'position': ' absolute',
+    'display': ' block',
+    'border-left': ' 1px solid #31a3dd',
+    'content': ' ""',
+    'height': ' 50%',
+    'top': ' 0%',
+    'left': ' 8.2%',
+    'z-index': ' -1'
+  };
+  const circleVerticalAfter = {
+    'position': 'absolute',
+    'display': 'block',
+    'border-left': '1px solid #31a3dd',
+    'content': '""',
+    'height': '50%',
+    'bottom': '0%',
+    'left': '49.9%',
+    'z-index': '-1'
+  };
+  const firstCircleVerticalAfter = {
+    'position': 'absolute',
+    'display': 'block',
+    'border-left': '1px solid #31a3dd',
+    'content': '""',
+    'height': '50%',
+    'bottom': '0%',
+    'left': '49.9%',
+    'z-index': '-1'
+  };
+  const circleVerticalCollapseAfter = {
+    'position': 'absolute',
+    'display': 'block',
+    'border-left': '1px solid #31a3dd',
+    'content': '""',
+    'height': '50%',
+    'bottom': '0%',
+    'left': '8.2%',
+    'z-index': '-1'
+  };
+  const firstCircleVerticalCollapseAfter = {
+    'position': 'absolute',
+    'display': 'block',
+    'border-left': '1px solid #31a3dd',
+    'content': '""',
+    'height': '50%',
+    'bottom': '0%',
+    'left': '8.2%',
+    'z-index': '-1'
+  };
   return /*#__PURE__*/_react.default.createElement(_Column.default, {
     columnProps: {
       sm: 12,
@@ -77,6 +155,30 @@ const Timeline = _ref => {
       if (i === 0) circlePos = 'first-circle';else if (i === items.length - 1) circlePos = 'last-circle';else circlePos = "circle";
     }
 
+    let verticalCircleStylesBefore;
+
+    if (circlePos === 'circle' && isSm) {
+      verticalCircleStylesBefore = circleVerticalCollapseBefore;
+    } else if (circlePos === 'circle' && !isSm) {
+      verticalCircleStylesBefore = circleVerticalBefore;
+    } else if (circlePos === 'last-circle' && isSm) {
+      verticalCircleStylesBefore = lastCircleVerticalCollapseBefore;
+    } else if (circlePos === 'last-circle' && !isSm) {
+      verticalCircleStylesBefore = lastCircleVerticalBefore;
+    }
+
+    let verticalCircleStylesAfter;
+
+    if (circlePos === 'circle' && isSm) {
+      verticalCircleStylesAfter = circleVerticalCollapseAfter;
+    } else if (circlePos === 'circle' && !isSm) {
+      verticalCircleStylesAfter = circleVerticalAfter;
+    } else if (circlePos === 'first-circle' && isSm) {
+      verticalCircleStylesAfter = firstCircleVerticalCollapseAfter;
+    } else if (circlePos === 'first-circle' && !isSm) {
+      verticalCircleStylesAfter = firstCircleVerticalAfter;
+    }
+
     if (isHorizontal) {
       return /*#__PURE__*/_react.default.createElement(_Column.default, {
         key: "horizontal_col_".concat(i + 0),
@@ -127,13 +229,17 @@ const Timeline = _ref => {
       }, useImages ? /*#__PURE__*/_react.default.createElement("div", {
         id: circlePos,
         className: isSm ? 'vertical collapse' : 'vertical'
-      }, /*#__PURE__*/_react.default.createElement(_Image.default, {
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        style: verticalCircleStylesBefore
+      }), /*#__PURE__*/_react.default.createElement(_Image.default, {
         imageProps: {
           classes: imageClassList,
           title: item.logoTitle,
           image: item.logo,
           altText: "".concat(item.logoAltText, " center logo")
         }
+      }), /*#__PURE__*/_react.default.createElement("span", {
+        style: verticalCircleStylesAfter
       })) : /*#__PURE__*/_react.default.createElement("p", {
         id: circlePos,
         className: circle

package/dist/components/Tubestops/index.css

@@ -1,92 +1,97 @@
 /* Vertical */
 .tubestop.flex-col.none-reverse .status-flow-item:not(:first-child):before {
-  @apply absolute;
-  @apply block;
+  
+  position: absolute;
+  
+  display: block;
   
   content: "";
   width: 1px;
   height: 100%;
   left: 7px;
-  top: -100%;
+  top: -100%
 }
 
 .tubestop.flex-col.none-reverse .status-flow-item:not(:last-child):after {
-  @apply absolute;
-  @apply block;
+  
+  position: absolute;
+  
+  display: block;
  
   content: "";
   width: 1px;
   height: 100%;
   left: 7px;
-  top: 40%;
+  top: 40%
 }
 
 /* reverse */
 .tubestop.flex-col.reverse .status-flow-item:not(:first-child):before {
-  @apply absolute;
-  @apply block;
+  
+  position: absolute;
+  
+  display: block;
 
   content: "";
   width: 1px;
   height: 100%;
   right: 7px;
-  top: -100%;
+  top: -100%
 }
 
 .tubestop.flex-col.reverse .status-flow-item:not(:last-child):after {
-  @apply absolute;
-  @apply block;
+  
+  position: absolute;
+  
+  display: block;
 
   content: "";
   width: 1px;
   height: 100%;
   right: 7px;
-  top: 40%;
+  top: 40%
 }
 
 /* Horizontal */
 .tubestop.flex-row.none-reverse .status-flow-item:not(:first-child):after {
-  @apply absolute;
-  @apply block;
+  
+  position: absolute;
+  
+  display: block;
 
   content: "";
   width: 100%;
   height: 1px;
   left: -50%;
-  bottom: 7px;
+  bottom: 7px
 }
 
 .tubestop.flex-row-reverse.none-reverse
   .status-flow-item:not(:first-child):after {
-  @apply absolute;
-  @apply block;
+  
+  position: absolute;
+  
+  display: block;
 
   content: "";
   width: 100%;
   height: 1px;
   right: -50%;
-  top: 7px;
+  top: 7px
 }
 
 /*reverse*/
 .tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
-  @apply absolute;
-  @apply block;
-
-  content: "";
-  width: 100%;
-  height: 1px;
   left: -50%;
   bottom: 7px;
-}
-
-.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
-  @apply absolute;
-  @apply block;
+  position: absolute;
+  display: block;
 
   content: "";
   width: 100%;
   height: 1px;
   right: -50%;
-  top: 7px;
+  top: 7px
 }
+
+/*# sourceMappingURL=index.css.map */

package/dist/components/Tubestops/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/components/Tubestops/index.css"],"names":[],"mappings":"AAAA,aAAa;AAEX;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,UAAU;EACV,YAAY;EACZ,SAAS;EACT;AAPe;;AAWf;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,UAAU;EACV,YAAY;EACZ,SAAS;EACT;AAPe;;AAUjB,YAAY;AAEV;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,UAAU;EACV,YAAY;EACZ,UAAU;EACV;AAPe;;AAWf;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,UAAU;EACV,YAAY;EACZ,UAAU;EACV;AAPe;;AAUjB,eAAe;AAEb;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,WAAW;EACX,WAAW;EACX,UAAU;EACV;AAPe;;AAYf;;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX;AAPe;;AAUjB,UAAU;AAER;EAMA,UAAU;EACV,WAAW;EAIX,kBAAe;EACf,cAAY;;EAEZ,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX;AAlBe","file":"index.css","sourcesContent":["/* Vertical */\n.tubestop.flex-col.none-reverse .status-flow-item:not(:first-child):before {\n  @apply absolute;\n  @apply block;\n  \n  content: \"\";\n  width: 1px;\n  height: 100%;\n  left: 7px;\n  top: -100%;\n}\n\n.tubestop.flex-col.none-reverse .status-flow-item:not(:last-child):after {\n  @apply absolute;\n  @apply block;\n \n  content: \"\";\n  width: 1px;\n  height: 100%;\n  left: 7px;\n  top: 40%;\n}\n\n/* reverse */\n.tubestop.flex-col.reverse .status-flow-item:not(:first-child):before {\n  @apply absolute;\n  @apply block;\n\n  content: \"\";\n  width: 1px;\n  height: 100%;\n  right: 7px;\n  top: -100%;\n}\n\n.tubestop.flex-col.reverse .status-flow-item:not(:last-child):after {\n  @apply absolute;\n  @apply block;\n\n  content: \"\";\n  width: 1px;\n  height: 100%;\n  right: 7px;\n  top: 40%;\n}\n\n/* Horizontal */\n.tubestop.flex-row.none-reverse .status-flow-item:not(:first-child):after {\n  @apply absolute;\n  @apply block;\n\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  left: -50%;\n  bottom: 7px;\n}\n\n.tubestop.flex-row-reverse.none-reverse\n  .status-flow-item:not(:first-child):after {\n  @apply absolute;\n  @apply block;\n\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  right: -50%;\n  top: 7px;\n}\n\n/*reverse*/\n.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {\n  @apply absolute;\n  @apply block;\n\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  left: -50%;\n  bottom: 7px;\n}\n\n.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {\n  @apply absolute;\n  @apply block;\n\n  content: \"\";\n  width: 100%;\n  height: 1px;\n  right: -50%;\n  top: 7px;\n}\n"]}