revdev-components 0.194.0 → 0.195.0

package/build/badges/level/index.d.ts

@@ -7,6 +7,7 @@ export interface LevelBadgeProps {
     levels: LevelGen[];
     className?: string;
     children?: React.ReactNode;
+    mode?: "default" | "compact";
     texts?: {
         refersTo?: (param: LevelGen) => string;
     };

package/build/index.js

@@ -5809,10 +5809,11 @@ var HelpTip = function (_a) {
     return (React.createElement(AppTooltip, { title: title || children, placement: "top" }, href ? (React.createElement(AppLink, { href: href, target: target }, iconNode)) : (iconNode)));
 };
 
-var s = {"root":"index-module_root__W7fFh","level":"index-module_level__J8dSJ","bar":"index-module_bar__V-ymE","bar__rate":"index-module_bar__rate__w6r3z","code":"index-module_code__aAnic"};
+var s = {"root":"index-module_root__W7fFh","root__compact":"index-module_root__compact__4t0Qf","bar":"index-module_bar__V-ymE","level":"index-module_level__J8dSJ","bar__rate":"index-module_bar__rate__w6r3z","code":"index-module_code__aAnic","label":"index-module_label__gftYy"};
 
 var LevelBadge = function (_a) {
-    var levels = _a.levels, className = _a.className, texts = _a.texts, children = _a.children;
+    var _b;
+    var levels = _a.levels, className = _a.className, texts = _a.texts, children = _a.children, _c = _a.mode, mode = _c === void 0 ? "default" : _c;
     var bars = React.useMemo(function () {
         var maxRate = Math.max.apply(Math, levels.map(function (x) { return x.rate; }));
         return levels.map(function (x) { return [x.code.toUpperCase(), x.rate, x.rate / maxRate]; });
@@ -5823,17 +5824,22 @@ var LevelBadge = function (_a) {
             refersTo: (_a = texts === null || texts === void 0 ? void 0 : texts.refersTo) !== null && _a !== void 0 ? _a : (function (level) { return "Level ".concat(level.code, " at ").concat(numeral(level.rate).format("0%")); }),
         };
     }, [texts]);
+    var renderCode = React.useCallback(function (code) {
+        return mode === "compact" ? (React.createElement("div", { className: s.code },
+            React.createElement("span", null, code))) : null;
+    }, [levels, mode]);
     if (bars.length === 0) {
         return null;
     }
-    return (React.createElement("div", { className: classNames(s.root, className) },
+    return (React.createElement("div", { className: classNames(s.root, (_b = {}, _b[s.root__compact] = mode === "compact", _b), className) },
         bars.map(function (_a) {
             var code = _a[0], rate = _a[1], normalizedRate = _a[2];
             return (React.createElement(AppTooltip, { key: code, title: interText.refersTo({ code: code, rate: rate }), placement: "top" },
                 React.createElement("div", { key: code, className: s.level },
                     React.createElement("div", { className: s.bar },
-                        React.createElement("div", { className: s.bar__rate, style: { height: "".concat(normalizedRate * 100, "%") } })),
-                    React.createElement("div", { className: s.code }, code))));
+                        React.createElement("div", { className: s.bar__rate, style: { height: "".concat(normalizedRate * 100, "%") } }, renderCode(code)),
+                        renderCode(code)),
+                    mode === "default" && React.createElement("div", { className: s.label }, code))));
         }),
         children));
 };

package/build/styles.css

@@ -36,6 +36,8 @@
   --iconDropBackgroundColor: white;
   --helpTipMargin: none;
   --helpTipFontSize: 0.8em;
+  --levelBadgeBarBackgroundColor: #e4e4e4;
+  --levelBadgeColor: #555;
 }
 
 html,
@@ -672,6 +674,10 @@ body {
   flex-direction: row;
   font-size: 12px;
   gap: 0.3em;
+  color: var(--levelBadgeColor);
+}
+.index-module_root__compact__4t0Qf .index-module_bar__V-ymE {
+  width: 1.4em;
 }
 
 .index-module_level__J8dSJ {
@@ -680,18 +686,41 @@ body {
 }
 
 .index-module_bar__V-ymE {
-  height: 1.1em;
-  background-color: rgba(15, 23, 42, 0.055);
+  height: 1.2em;
   display: flex;
   align-items: flex-end;
   justify-content: center;
+  position: relative;
+  background-color: var(--levelBadgeBarBackgroundColor);
+  color: var(--levelBadgeColor);
+  z-index: 0;
 }
 
 .index-module_bar__rate__w6r3z {
   width: 100%;
-  background-color: var(--passiveColor);
+  background-color: var(--levelBadgeColor);
+  position: relative;
+  overflow: hidden;
+  left: 0;
+  bottom: 0;
+  z-index: 1;
+}
+.index-module_bar__rate__w6r3z .index-module_code__aAnic {
+  color: var(--levelBadgeBarBackgroundColor);
+  z-index: 2;
 }
 
-.index-module_code__aAnic {
+.index-module_label__gftYy {
   padding: 1px 0;
+  text-align: center;
+}
+
+.index-module_code__aAnic {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  display: flex;
+  place-items: center;
+  transform: translateX(-50%);
+  font-weight: bold;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "revdev-components",
-  "version": "0.194.0",
+  "version": "0.195.0",
   "main": "build/index.js",
   "module": "build/index.esm.js",
   "scripts": {