ordering-ui-external 1.6.4 → 1.6.5

package/_modules/themes/five/src/components/BusinessBasicInformation/styles.js

@@ -4,10 +4,10 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.WrapperSearch = exports.WrapperBusinessLogo = exports.TitleWrapper = exports.SocialList = exports.SearchIconWrapper = exports.SearchComponentContainer = exports.RibbonBox = exports.IconWrapper = exports.BusinessMoreDetail = exports.BusinessLogo = exports.BusinessInfoWrapper = exports.BusinessInfoItem = exports.BusinessInfoContent = exports.BusinessInfoContainer = exports.BusinessInfo = exports.BusinessDetail = exports.BusinessContent = exports.BusinessContainer = void 0;
+exports.WrapperSearch = exports.WrapperFloatingSearch = exports.WrapperBusinessLogo = exports.TitleWrapper = exports.SocialList = exports.SearchIconWrapper = exports.SearchComponentContainer = exports.RibbonBox = exports.IconWrapper = exports.BusinessMoreDetail = exports.BusinessLogo = exports.BusinessInfoWrapper = exports.BusinessInfoItem = exports.BusinessInfoContent = exports.BusinessInfoContainer = exports.BusinessInfo = exports.BusinessDetail = exports.BusinessContent = exports.BusinessContainer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34, _templateObject35, _templateObject36, _templateObject37, _templateObject38, _templateObject39, _templateObject40, _templateObject41, _templateObject42, _templateObject43;
 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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -148,4 +148,9 @@ var IconWrapper = _styledComponents.default.a(_templateObject40 || (_templateObj
 });
 exports.IconWrapper = IconWrapper;
 var BusinessInfoWrapper = _styledComponents.default.div(_templateObject42 || (_templateObject42 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column-reverse;\n  @media (min-width: 768px) {\n    flex-direction: column;\n  }\n"])));
-exports.BusinessInfoWrapper = BusinessInfoWrapper;
+exports.BusinessInfoWrapper = BusinessInfoWrapper;
+var WrapperFloatingSearch = _styledComponents.default.div(_templateObject43 || (_templateObject43 = _taggedTemplateLiteral(["\n  position: absolute;\n  color: ", ";\n  display: flex;\n  background: rgba(0,0,0,0.2);\n  top: 80px;\n  right: 10px;\n  width: 80%;\n  border-bottom: 1px solid #FFFFFF;\n  #select-input {\n    color: #FFFFFF !important;\n    background: transparent;\n  }\n  svg, span {\n    color: #FFFFFF !important;\n  }\n  @media (min-width: 681px){\n    top: 23px;\n    right: 60px;\n    width: 300px;\n    input {\n      width: 80%;\n    }\n  }\n"])), function (_ref11) {
+  var theme = _ref11.theme;
+  return theme.colors.white;
+});
+exports.WrapperFloatingSearch = WrapperFloatingSearch;

package/_modules/themes/five/src/components/BusinessController/index.js

@@ -165,8 +165,8 @@ var BusinessControllerUI = function BusinessControllerUI(props) {
     }
   }, (business === null || business === void 0 ? void 0 : (_business$ribbon = business.ribbon) === null || _business$ribbon === void 0 ? void 0 : _business$ribbon.enabled) && /*#__PURE__*/_react.default.createElement(_styles.RibbonBox, {
     bgColor: business === null || business === void 0 ? void 0 : (_business$ribbon2 = business.ribbon) === null || _business$ribbon2 === void 0 ? void 0 : _business$ribbon2.color,
-    colorText: (0, _utils.LightenDarkenColor)(business === null || business === void 0 ? void 0 : (_business$ribbon3 = business.ribbon) === null || _business$ribbon3 === void 0 ? void 0 : _business$ribbon3.color, -200),
-    borderRibbon: (0, _utils.LightenDarkenColor)(business === null || business === void 0 ? void 0 : (_business$ribbon4 = business.ribbon) === null || _business$ribbon4 === void 0 ? void 0 : _business$ribbon4.color, -200),
+    colorText: (0, _utils.lightenDarkenColor)(business === null || business === void 0 ? void 0 : (_business$ribbon3 = business.ribbon) === null || _business$ribbon3 === void 0 ? void 0 : _business$ribbon3.color, -200),
+    borderRibbon: (0, _utils.lightenDarkenColor)(business === null || business === void 0 ? void 0 : (_business$ribbon4 = business.ribbon) === null || _business$ribbon4 === void 0 ? void 0 : _business$ribbon4.color, -200),
     isRoundRect: (business === null || business === void 0 ? void 0 : (_business$ribbon5 = business.ribbon) === null || _business$ribbon5 === void 0 ? void 0 : _business$ribbon5.shape) === (_utils.shape === null || _utils.shape === void 0 ? void 0 : _utils.shape.rectangleRound),
     isCapsule: (business === null || business === void 0 ? void 0 : (_business$ribbon6 = business.ribbon) === null || _business$ribbon6 === void 0 ? void 0 : _business$ribbon6.shape) === (_utils.shape === null || _utils.shape === void 0 ? void 0 : _utils.shape.capsuleShape)
   }, business === null || business === void 0 ? void 0 : (_business$ribbon7 = business.ribbon) === null || _business$ribbon7 === void 0 ? void 0 : _business$ribbon7.text), /*#__PURE__*/_react.default.createElement(_styles.BusinessHero, null, isSkeleton ? /*#__PURE__*/_react.default.createElement(_reactLoadingSkeleton.default, {

package/_modules/themes/five/src/components/BusinessController/styles.js

@@ -160,10 +160,10 @@ var RibbonBox = _styledComponents.default.div(_templateObject40 || (_templateObj
   return isCapsule && (0, _styledComponents.css)(_templateObject44 || (_templateObject44 = _taggedTemplateLiteral(["\n    border-radius: 50px;\n  "])));
 }, function (_ref21) {
   var colorText = _ref21.colorText;
-  return colorText && (0, _styledComponents.css)(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), colorText);
+  return colorText && (0, _styledComponents.css)(_templateObject45 || (_templateObject45 = _taggedTemplateLiteral(["\n    color: ", ";\n  "])), colorText ? 'black' : 'white');
 }, function (_ref22) {
   var borderRibbon = _ref22.borderRibbon;
-  return borderRibbon && (0, _styledComponents.css)(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n  "])), borderRibbon);
+  return borderRibbon && (0, _styledComponents.css)(_templateObject46 || (_templateObject46 = _taggedTemplateLiteral(["\n    border: 1px solid ", ";\n  "])), borderRibbon ? 'black' : 'white');
 });
 exports.RibbonBox = RibbonBox;
 var FavoriteWrapper = _styledComponents.default.div(_templateObject47 || (_templateObject47 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  margin-left: 15px;\n  ", "\n\n  svg {\n    font-size: 16px;\n    color: ", ";\n  }\n"])), function (props) {

package/_modules/utils/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.verifyDecimals = exports.sortInputFields = exports.shape = exports.scrollTo = exports.reviewCommentList = exports.priceList = exports.getTraduction = exports.getIconCard = exports.getHourMin = exports.getGoogleMapImage = exports.getDistance = exports.formatUrlVideo = exports.formatSeconds = exports.flatArray = exports.fieldsToSort = exports.convertToRadian = exports.convertHoursToMinutes = exports.checkSiteUrl = exports.capitalize = exports.bytesConverter = exports.LightenDarkenColor = void 0;
+exports.verifyDecimals = exports.sortInputFields = exports.shape = exports.scrollTo = exports.reviewCommentList = exports.priceList = exports.lightenDarkenColor = exports.getTraduction = exports.getIconCard = exports.getHourMin = exports.getGoogleMapImage = exports.getDistance = exports.formatUrlVideo = exports.formatSeconds = exports.flatArray = exports.fieldsToSort = exports.convertToRadian = exports.convertHoursToMinutes = exports.checkSiteUrl = exports.capitalize = exports.bytesConverter = void 0;
 var _orderingComponentsExternal = require("ordering-components-external");
 var _styledComponents = require("styled-components");
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -168,29 +168,40 @@ var bytesConverter = function bytesConverter(bytes) {
 };
 
 /**
- * Function to get colors darker/lighten.
+ * Function to get brightness of color.
  */
 exports.bytesConverter = bytesConverter;
-var LightenDarkenColor = function LightenDarkenColor(col, amt) {
-  var usePound = false;
-  if (col[0] == "#") {
-    col = col.slice(1);
-    usePound = true;
+var lightenDarkenColor = function lightenDarkenColor(color) {
+  var r, g, b, hsp;
+  if (color.match(/^rgb/)) {
+    // If HEX --> store the red, green, blue values in separate variables
+    color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+    r = color[1];
+    g = color[2];
+    b = color[3];
+  } else {
+    // If RGB --> Convert it to HEX
+    color = +("0x" + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));
+    r = color >> 16;
+    g = color >> 8 & 255;
+    b = color & 255;
+  }
+
+  // HSP (Highly Sensitive Poo) equation
+  hsp = Math.sqrt(0.299 * (r * r) + 0.587 * (g * g) + 0.114 * (b * b));
+
+  // Using the HSP value, determine whether the color is light or dark
+  if (hsp > 197) {
+    return true; //is light color
+  } else {
+    return false;
   }
-  var num = parseInt(col, 16);
-  var r = (num >> 16) + amt;
-  if (r > 255) r = 255;else if (r < 0) r = 0;
-  var b = (num >> 8 & 0x00FF) + amt;
-  if (b > 255) b = 255;else if (b < 0) b = 0;
-  var g = (num & 0x0000FF) + amt;
-  if (g > 255) g = 255;else if (g < 0) g = 0;
-  return (usePound ? "#" : "") + (g | b << 8 | r << 16).toString(16);
 };
 
 /**
  * Function to get time in 12 hours format.
  */
-exports.LightenDarkenColor = LightenDarkenColor;
+exports.lightenDarkenColor = lightenDarkenColor;
 var getHourMin = function getHourMin(hour, min) {
   var _hour;
   if (hour < 12) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-external",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "description": "Ordering UI Components",
   "main": "./_modules/index.js",
   "exports": {

package/src/themes/five/src/components/BusinessBasicInformation/styles.js

@@ -468,3 +468,29 @@ export const BusinessInfoWrapper = styled.div`
     flex-direction: column;
   }
 `
+
+export const WrapperFloatingSearch = styled.div`
+  position: absolute;
+  color: ${({ theme }) => theme.colors.white};
+  display: flex;
+  background: rgba(0,0,0,0.2);
+  top: 80px;
+  right: 10px;
+  width: 80%;
+  border-bottom: 1px solid #FFFFFF;
+  #select-input {
+    color: #FFFFFF !important;
+    background: transparent;
+  }
+  svg, span {
+    color: #FFFFFF !important;
+  }
+  @media (min-width: 681px){
+    top: 23px;
+    right: 60px;
+    width: 300px;
+    input {
+      width: 80%;
+    }
+  }
+`

package/src/themes/five/src/components/BusinessController/index.js

@@ -8,7 +8,7 @@ import { Modal } from '../Modal'
 import { LoginForm } from '../LoginForm'
 import { SignUpForm } from '../SignUpForm'
 import { ForgotPasswordForm } from '../ForgotPasswordForm'
-import { convertHoursToMinutes, LightenDarkenColor, shape } from '../../../../../utils'
+import { convertHoursToMinutes, lightenDarkenColor, shape } from '../../../../../utils'
 
 import {
   ContainerCard,
@@ -153,8 +153,8 @@ const BusinessControllerUI = (props) => {
           {business?.ribbon?.enabled && (
             <RibbonBox
               bgColor={business?.ribbon?.color}
-              colorText={LightenDarkenColor(business?.ribbon?.color, -200)}
-              borderRibbon={LightenDarkenColor(business?.ribbon?.color, -200)}
+              colorText={lightenDarkenColor(business?.ribbon?.color, -200)}
+              borderRibbon={lightenDarkenColor(business?.ribbon?.color, -200)}
               isRoundRect={business?.ribbon?.shape === shape?.rectangleRound}
               isCapsule={business?.ribbon?.shape === shape?.capsuleShape}
             >

package/src/themes/five/src/components/BusinessController/styles.js

@@ -451,11 +451,11 @@ export const RibbonBox = styled.div`
   `}
 
   ${({ colorText }) => colorText && css`
-    color: ${colorText};
+    color: ${colorText ? 'black' : 'white'};
   `}
 
   ${({ borderRibbon }) => borderRibbon && css`
-    border: 1px solid ${borderRibbon};
+    border: 1px solid ${borderRibbon ? 'black' : 'white'};
   `}
 `
 

package/src/utils/index.js

@@ -132,35 +132,40 @@ export const bytesConverter = bytes => {
 }
 
 /**
- * Function to get colors darker/lighten.
+ * Function to get brightness of color.
  */
-export const LightenDarkenColor = (col, amt) => {
+export const lightenDarkenColor = (color) => {
 
-    var usePound = false;
-  
-    if (col[0] == "#") {
-        col = col.slice(1);
-        usePound = true;
-    }
- 
-    var num = parseInt(col,16);
- 
-    var r = (num >> 16) + amt;
- 
-    if (r > 255) r = 255;
-    else if  (r < 0) r = 0;
- 
-    var b = ((num >> 8) & 0x00FF) + amt;
- 
-    if (b > 255) b = 255;
-    else if  (b < 0) b = 0;
- 
-    var g = (num & 0x0000FF) + amt;
- 
-    if (g > 255) g = 255;
-    else if (g < 0) g = 0;
- 
-    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
+  let r, g, b, hsp;
+  if (color.match(/^rgb/)) {
+    // If HEX --> store the red, green, blue values in separate variables
+    color = color.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/);
+
+    r = color[1];
+    g = color[2];
+    b = color[3];
+  } else {
+    // If RGB --> Convert it to HEX
+    color = +("0x" + color.slice(1).replace(color.length < 5 && /./g, '$&$&'));
+
+    r = color >> 16;
+    g = color >> 8 & 255;
+    b = color & 255;
+  }
+
+  // HSP (Highly Sensitive Poo) equation
+  hsp = Math.sqrt(
+    0.299 * (r * r) +
+    0.587 * (g * g) +
+    0.114 * (b * b)
+  );
+
+  // Using the HSP value, determine whether the color is light or dark
+  if (hsp > 197) {
+    return true; //is light color
+  } else {
+    return false;
+  }
 }
 
 /**