@bonlineza/luxity-lib 2.6.2 → 2.7.3

package/StyleSelector.js

@@ -333,7 +333,7 @@
   };
 
   function _templateObject2() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem 0.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 75px;\n"]);
+    var data = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"]);
 
     _templateObject2 = function _templateObject2() {
       return data;
@@ -368,7 +368,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 
@@ -451,7 +453,7 @@
   };
 
   function _templateObject2$1() {
-    var data = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(33.33% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  .multiselector__selected-items,\n  .multiselector__selectable-items {\n    display: flex;\n    flex-flow: wrap;\n    margin-left: calc(-1 * ", ");\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      border-color: ", ";\n      background-color: ", ";\n      color: ", ";\n      padding: ", ";\n      text-transform: none;\n      box-sizing: border-box;\n      animation: ", " ease-in-out\n        ", " forwards;\n      flex-basis: calc(25% - ", ");\n      margin-bottom: ", ";\n      margin-left: ", ";\n      text-overflow: ellipsis;\n      overflow-x: hidden;\n      min-height: 40px;\n\n      @media (max-width: ", ") {\n        flex-basis: calc(50% - ", ");\n      }\n    }\n  }\n\n  .multiselector__footer {\n    display: flex;\n    justify-content: center;\n    button {\n      &:hover {\n        color: ", ";\n        background-color: ", ";\n      }\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n"]);
 
     _templateObject2$1 = function _templateObject2() {
       return data;
@@ -478,14 +480,16 @@
   var multiselectorItemFadeIn = styled.keyframes(_templateObject$3(), multiSelectorItemMaxHeight);
   var StyledMultiselector = styled__default.div(_templateObject2$1(), function (props) {
     return props.theme.marginPaddings[2];
-  }, function (props) {
-    return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.primary;
   }, function (props) {
     return props.theme.colors.ntrlMin;
+  }, function (props) {
+    return props.theme.colors.primary;
   }, function (props) {
     return props.theme.marginPaddings[0];
   }, multiSelectorItemAnimationDuration, multiselectorItemFadeIn, function (props) {
@@ -710,8 +714,18 @@
     }));
   });
 
+  function _templateObject2$2() {
+    var data = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n  padding-bottom: ", ";\n  border-bottom: 1px solid ", ";\n  margin-bottom: ", ";\n  margin-top: ", ";\n  width: 100%;\n  align-items: center;\n"]);
+
+    _templateObject2$2 = function _templateObject2() {
+      return data;
+    };
+
+    return data;
+  }
+
   function _templateObject$4() {
-    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      border: solid 1px transparent;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0 ", " 0\n        ", " 0;\n\n      :focus {\n        border-color: ", ";\n      }\n    }\n  }\n"]);
+    var data = _taggedTemplateLiteral(["\n  font-size: ", ";\n  font-weight: bold;\n  margin-bottom: 0;\n  text-transform: uppercase;\n"]);
 
     _templateObject$4 = function _templateObject() {
       return data;
@@ -719,16 +733,48 @@
 
     return data;
   }
+  var Title = styled__default.h1(_templateObject$4(), function (props) {
+    return props.theme.fontSizes[2];
+  });
+  var InterestsSubheadingContainer = styled__default.div(_templateObject2$2(), function (props) {
+    return props.theme.marginPaddings[1];
+  }, function (props) {
+    return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  }, function (props) {
+    return props.theme.marginPaddings[3];
+  });
+
+  var InterestsSubheading = function InterestsSubheading(_ref) {
+    var title = _ref.title,
+        children = _ref.children,
+        className = _ref.className;
+    return React__default.createElement(InterestsSubheadingContainer, {
+      className: className
+    }, React__default.createElement(Title, null, title), React__default.createElement("div", null, children));
+  };
 
-  var Title = function Title(_ref) {
+  function _templateObject$5() {
+    var data = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  font-weight: bold;\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n\n  .title__search,\n  .title__search {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 30px;\n    margin-bottom: ", ";\n\n    svg {\n      margin-left: ", ";\n      fill: ", ";\n      stroke: ", ";\n    }\n\n    input {\n      width: 140px;\n      border: none;\n      font-size: ", ";\n      transition: 0.2s border-color ease-in-out;\n      margin-left: ", ";\n      padding: 0;\n\n      :focus {\n        border-color: ", ";\n        border-bottom: none;\n      }\n    }\n  }\n"]);
+
+    _templateObject$5 = function _templateObject() {
+      return data;
+    };
+
+    return data;
+  }
+
+  var Title$1 = function Title(_ref) {
     var baseClass = _ref.baseClass,
         className = _ref.className,
         title = _ref.title,
         searchPlaceHolder = _ref.searchPlaceHolder,
         onSearchChanged = _ref.onSearchChanged;
-    return React__default.createElement("div", {
-      className: "".concat(className, " ").concat(baseClass, "__title")
-    }, React__default.createElement("div", null, title), React__default.createElement("div", {
+    return React__default.createElement(InterestsSubheading, {
+      className: "".concat(className, " ").concat(baseClass, "__title"),
+      title: title
+    }, React__default.createElement("div", {
       className: "title__search"
     }, React__default.createElement(Search, null), React__default.createElement("input", {
       placeholder: searchPlaceHolder,
@@ -738,10 +784,12 @@
     })));
   };
 
-  var StyledTitle = styled__default(Title)(_templateObject$4(), function (props) {
+  var StyledTitle = styled__default(Title$1)(_templateObject$5(), function (props) {
     return props.theme.marginPaddings[2];
   }, function (props) {
     return props.theme.fontSizes[2];
+  }, function (props) {
+    return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.marginPaddings[3];
   }, function (props) {
@@ -752,14 +800,10 @@
     return props.theme.fontSizes[2];
   }, function (props) {
     return props.theme.marginPaddings[0];
-  }, function (props) {
-    return props.theme.marginPaddings[0];
-  }, function (props) {
-    return props.theme.marginPaddings[0];
   }, function (props) {
     return props.theme.colors.primary;
   });
-  var Title$1 = themed(StyledTitle);
+  var Title$2 = themed(StyledTitle);
 
   var debounceBuilder = functions.debounced(200);
 
@@ -832,7 +876,7 @@
             requestInstance = _this$props.requestInstance;
         return React__default.createElement("div", {
           className: baseClass
-        }, React__default.createElement(Title$1, {
+        }, React__default.createElement(Title$2, {
           title: title,
           baseClass: baseClass,
           searchPlaceHolder: searchPlaceHolder,
@@ -882,17 +926,19 @@
     baseQueryLimit: 12
   };
 
-  function _templateObject$5() {
-    var data = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  &:active,\n  &:hover {\n    background-color: #fff;\n    color: ", ";\n  }\n\n  &:disabled {\n    ", "\n\n    &:hover {\n      background-color: ", ";\n      color: #ffff;\n    }\n  }\n"]);
+  function _templateObject$6() {
+    var data = _taggedTemplateLiteral(["\n  ", ";\n  background-color: ", ";\n  color: ", ";\n  &:active,\n  &:hover {\n    background-color: #fff;\n    color: ", ";\n  }\n\n  &:disabled {\n    ", "\n\n    &:hover {\n      background-color: ", ";\n      color: #ffff;\n    }\n  }\n"]);
 
-    _templateObject$5 = function _templateObject() {
+    _templateObject$6 = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var Button$2 = styled__default.button(_templateObject$5(), baseButtonStyle, function (props) {
+  var Button$2 = styled__default.button(_templateObject$6(), baseButtonStyle, function (props) {
     return props.theme.colors.primary;
+  }, function (props) {
+    return props.theme.colors.ntrlMin;
   }, function (props) {
     return props.theme.colors.primary;
   }, disabledButtonStyle, function (props) {
@@ -908,16 +954,16 @@
 
   var PrimaryButton$1 = themed(PrimaryButton);
 
-  function _templateObject$6() {
+  function _templateObject$7() {
     var data = _taggedTemplateLiteral(["\n  color: ", ";\n  border: 1px solid ", ";\n  background-color: ", ";\n  &:hover {\n    color: ", ";\n    background-color: ", ";\n  }\n"]);
 
-    _templateObject$6 = function _templateObject() {
+    _templateObject$7 = function _templateObject() {
       return data;
     };
 
     return data;
   }
-  var BaseButton = styled__default.button(_templateObject$6(), function (props) {
+  var BaseButton = styled__default.button(_templateObject$7(), function (props) {
     return props.theme.colors.base;
   }, function (props) {
     return props.theme.colors.borderColor;
@@ -957,7 +1003,7 @@
       baseQueryLimit: 16,
       baseClass: "style-selector",
       identifier: "style-selector",
-      searchPlaceHolder: "SEARCH STYLES...",
+      searchPlaceHolder: "Search Styles",
       category: category,
       onChange: onChange,
       graphApi: graphApi,

package/TextButton.js

@@ -74,7 +74,7 @@
   }
 
   function _templateObject2() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem 0.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 75px;\n"]);
+    var data = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"]);
 
     _templateObject2 = function _templateObject2() {
       return data;
@@ -109,7 +109,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 

package/Tooltip.js

@@ -178,7 +178,9 @@
       baseLt: '#817c7c',
       borderColor: '#d8d8d8',
       ntrlMin: '#fff',
-      ntrlMinTen: '#e6e6e6'
+      ntrlMinTen: '#e6e6e6',
+      gray: '#efefef',
+      darkerGray: '#454141'
     }
   };
 

package/WrapperButton.js

@@ -56,7 +56,7 @@
   }
 
   function _templateObject2() {
-    var data = _taggedTemplateLiteral(["\n  padding: 1rem 0.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 75px;\n"]);
+    var data = _taggedTemplateLiteral(["\n  padding: 1rem 3.5rem;\n  cursor: pointer;\n  letter-spacing: 1.3px;\n  border-style: none;\n  text-transform: uppercase;\n  font-size: 12px;\n  color: #fff;\n  transition: 0.2s ease-in-out;\n  outline: none;\n  min-width: 150px;\n"]);
 
     _templateObject2 = function _templateObject2() {
       return data;