@bundle-stats/ui 4.4.0-beta.1 → 4.4.0-beta.4

package/lib/components/insight-icon/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./insight-icon"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/insight-icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/insight-icon/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,iDAA+B"}

package/lib/components/insight-icon/insight-icon.js

@@ -0,0 +1,25 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InsightIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("@bundle-stats/utils");
+const icon_1 = require("../../ui/icon");
+const insight_icon_module_css_1 = __importDefault(require("./insight-icon.module.css"));
+const InsightTypeIconMap = new Map([
+    [utils_1.InsightType.ERROR, icon_1.Icon.ICONS.ERROR],
+    [utils_1.InsightType.WARNING, icon_1.Icon.ICONS.WARNING],
+    [utils_1.InsightType.INFO, icon_1.Icon.ICONS.INFO],
+]);
+const InsightIcon = (props) => {
+    const { className, type } = props;
+    const resolvedType = Object.values(utils_1.InsightType).includes(type) ? type : utils_1.InsightType.WARNING;
+    const rootClassName = (0, classnames_1.default)(insight_icon_module_css_1.default.root, insight_icon_module_css_1.default[resolvedType], className);
+    const glyph = InsightTypeIconMap.get(resolvedType);
+    return react_1.default.createElement(icon_1.Icon, { glyph: glyph, className: rootClassName });
+};
+exports.InsightIcon = InsightIcon;
+//# sourceMappingURL=insight-icon.js.map

package/lib/components/insight-icon/insight-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insight-icon.js","sourceRoot":"","sources":["../../../src/components/insight-icon/insight-icon.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,+CAAkD;AAElD,wCAAgD;AAChD,wFAA4C;AAE5C,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC;IACjC,CAAC,mBAAW,CAAC,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IACrC,CAAC,mBAAW,CAAC,OAAO,EAAE,WAAI,CAAC,KAAK,CAAC,OAAO,CAAC;IACzC,CAAC,mBAAW,CAAC,IAAI,EAAE,WAAI,CAAC,KAAK,CAAC,IAAI,CAAC;CACpC,CAAC,CAAC;AAMI,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IACrD,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAW,CAAC,OAAO,CAAC;IAC5F,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,iCAAG,CAAC,IAAI,EAAE,iCAAG,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC,CAAC;IACjE,MAAM,KAAK,GAAG,kBAAkB,CAAC,GAAG,CAAC,YAAY,CAAc,CAAC;IAEhE,OAAO,8BAAC,WAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAC1D,CAAC,CAAC;AAPW,QAAA,WAAW,eAOtB"}

package/lib/components/insight-icon/insight-icon.module.css

@@ -0,0 +1,24 @@
+.root {
+  width: calc(var(--space-small) + 6px);
+  height: calc(var(--space-small) + 6px);
+  padding: 3px;
+  border-radius: 50%;
+  background: var(--color-highlight);
+}
+
+.error {
+  background: var(--color-red-50);
+  color: var(--color-danger);
+}
+
+.warning {
+  padding-top: 1px;
+  background: var(--color-yellow-100);
+  color: var(--color-yellow-900);
+}
+
+.info {
+  background: var(--color-highlight-info);
+  color: var(--color-info);
+}
+

package/lib/components/insights/insights.js

@@ -5,52 +5,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Insights = void 0;
 const react_1 = __importDefault(require("react"));
-const classnames_1 = __importDefault(require("classnames"));
 const utils_1 = require("@bundle-stats/utils");
 const flex_stack_1 = require("../../layout/flex-stack");
 const stack_1 = require("../../layout/stack");
-const icon_1 = require("../../ui/icon");
 const component_link_1 = require("../component-link");
+const insight_icon_1 = require("../insight-icon");
 const insights_module_css_1 = __importDefault(require("./insights.module.css"));
-const normalizedInsights = ({ duplicatePackages, newPackages, }) => {
-    const insightsByLevel = {
-        [utils_1.InsightType.ERROR]: [],
-        [utils_1.InsightType.WARNING]: [],
-        [utils_1.InsightType.INFO]: [],
-    };
-    if (duplicatePackages) {
-        insightsByLevel[duplicatePackages.type].push({
-            name: 'duplicatePackages',
-            insight: duplicatePackages,
-            link: utils_1.BUNDLE_PACKAGES_DUPLICATE,
-        });
-    }
-    if (newPackages) {
-        insightsByLevel[newPackages.type].push({
-            name: 'newPackages',
-            insight: newPackages,
-            link: utils_1.BUNDLE_PACKAGES_COUNT,
-        });
-    }
-    return [
-        ...(insightsByLevel[utils_1.InsightType.ERROR] || []),
-        ...(insightsByLevel[utils_1.InsightType.WARNING] || []),
-        ...(insightsByLevel[utils_1.InsightType.INFO] || []),
-    ];
-};
-const InsightTypeIconMap = new Map([
-    [utils_1.InsightType.ERROR, icon_1.Icon.ICONS.ERROR],
-    [utils_1.InsightType.WARNING, icon_1.Icon.ICONS.WARNING],
-    [utils_1.InsightType.INFO, icon_1.Icon.ICONS.INFO],
-]);
 const Insights = (props) => {
-    const { duplicatePackages, newPackages, customComponentLink: CustomComponentLink = component_link_1.ComponentLink, ...restProps } = props;
-    const insights = normalizedInsights({ duplicatePackages, newPackages });
-    return (react_1.default.createElement(stack_1.Stack, { space: "xxsmall", ...restProps }, insights.map(({ name, insight, link }) => {
-        const glyph = InsightTypeIconMap.get(insight.type);
+    const { insights, customComponentLink: CustomComponentLink = component_link_1.ComponentLink, ...restProps } = props;
+    const insightList = (0, utils_1.getInsightList)(insights);
+    return (react_1.default.createElement(stack_1.Stack, { space: "xxsmall", ...restProps }, insightList.map(({ name, insight, link }) => {
         const { text } = insight.data;
-        return (react_1.default.createElement(flex_stack_1.FlexStack, { key: name, space: "xxsmall", alignItems: "center", as: CustomComponentLink, ...link, className: (0, classnames_1.default)(insights_module_css_1.default.entry, insights_module_css_1.default[insight.type]) },
-            glyph && react_1.default.createElement(icon_1.Icon, { glyph: glyph, className: insights_module_css_1.default.icon }),
+        return (react_1.default.createElement(flex_stack_1.FlexStack, { key: name, space: "xxsmall", alignItems: "center", as: CustomComponentLink, ...link, className: insights_module_css_1.default.entry },
+            react_1.default.createElement(insight_icon_1.InsightIcon, { type: insight.type, className: insights_module_css_1.default.icon }),
             react_1.default.createElement("span", null, text)));
     })));
 };

package/lib/components/insights/insights.js.map

@@ -1 +1 @@
-{"version":3,"file":"insights.js","sourceRoot":"","sources":["../../../src/components/insights/insights.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,+CAM6B;AAE7B,wDAAoD;AACpD,8CAA2C;AAC3C,wCAAqC;AACrC,sDAAkD;AAElD,gFAAwC;AAQxC,MAAM,kBAAkB,GAAG,CAAC,EAC1B,iBAAiB,EACjB,WAAW,GACyB,EAAuB,EAAE;IAC7D,MAAM,eAAe,GAA6C;QAChE,CAAC,mBAAW,CAAC,KAAK,CAAC,EAAE,EAAE;QACvB,CAAC,mBAAW,CAAC,OAAO,CAAC,EAAE,EAAE;QACzB,CAAC,mBAAW,CAAC,IAAI,CAAC,EAAE,EAAE;KACvB,CAAC;IAEF,IAAI,iBAAiB,EAAE;QACrB,eAAe,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;YAC3C,IAAI,EAAE,mBAAmB;YACzB,OAAO,EAAE,iBAAiB;YAC1B,IAAI,EAAE,iCAAyB;SAChC,CAAC,CAAC;KACJ;IAED,IAAI,WAAW,EAAE;QACf,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;YACrC,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,WAAW;YACpB,IAAI,EAAE,6BAAqB;SAC5B,CAAC,CAAC;KACJ;IAED,OAAO;QACL,GAAG,CAAC,eAAe,CAAC,mBAAW,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAC7C,GAAG,CAAC,eAAe,CAAC,mBAAW,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAC/C,GAAG,CAAC,eAAe,CAAC,mBAAW,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;KAC7C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC;IACjC,CAAC,mBAAW,CAAC,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IACrC,CAAC,mBAAW,CAAC,OAAO,EAAE,WAAI,CAAC,KAAK,CAAC,OAAO,CAAC;IACzC,CAAC,mBAAW,CAAC,IAAI,EAAE,WAAI,CAAC,KAAK,CAAC,IAAI,CAAC;CACpC,CAAC,CAAC;AAQI,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EACJ,iBAAiB,EACjB,WAAW,EACX,mBAAmB,EAAE,mBAAmB,GAAG,8BAAa,EACxD,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,kBAAkB,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAE,CAAC,CAAC;IAExE,OAAO,CACL,8BAAC,aAAK,IAAC,KAAK,EAAC,SAAS,KAAK,SAAS,IACjC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;QACxC,MAAM,KAAK,GAAG,kBAAkB,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACnD,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,IAAwB,CAAC;QAElD,OAAO,CACL,8BAAC,sBAAS,IACR,GAAG,EAAE,IAAI,EACT,KAAK,EAAC,SAAS,EACf,UAAU,EAAC,QAAQ,EACnB,EAAE,EAAE,mBAAmB,KACnB,IAAI,EACR,SAAS,EAAE,IAAA,oBAAE,EAAC,6BAAG,CAAC,KAAK,EAAE,6BAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAE1C,KAAK,IAAI,8BAAC,WAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,6BAAG,CAAC,IAAI,GAAI;YACrD,4CAAO,IAAI,CAAQ,CACT,CACb,CAAC;IACJ,CAAC,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,QAAQ,YAgCnB"}
+{"version":3,"file":"insights.js","sourceRoot":"","sources":["../../../src/components/insights/insights.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,+CAAsE;AAEtE,wDAAoD;AACpD,8CAA2C;AAC3C,sDAAkD;AAClD,kDAA8C;AAC9C,gFAAwC;AAOjC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EACJ,QAAQ,EACR,mBAAmB,EAAE,mBAAmB,GAAG,8BAAa,EACxD,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,WAAW,GAAG,IAAA,sBAAc,EAAC,QAAQ,CAAC,CAAC;IAE7C,OAAO,CACL,8BAAC,aAAK,IAAC,KAAK,EAAC,SAAS,KAAK,SAAS,IACjC,WAAW,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;QAC3C,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,IAAwB,CAAC;QAClD,OAAO,CACL,8BAAC,sBAAS,IACR,GAAG,EAAE,IAAI,EACT,KAAK,EAAC,SAAS,EACf,UAAU,EAAC,QAAQ,EACnB,EAAE,EAAE,mBAAmB,KACnB,IAAI,EACR,SAAS,EAAE,6BAAG,CAAC,KAAK;YAEpB,8BAAC,0BAAW,IAAC,IAAI,EAAE,OAAO,CAAC,IAAI,EAAE,SAAS,EAAE,6BAAG,CAAC,IAAI,GAAI;YACxD,4CAAO,IAAI,CAAQ,CACT,CACb,CAAC;IACJ,CAAC,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,QAAQ,YA6BnB"}

package/lib/components/insights/insights.module.css

@@ -1,23 +1,5 @@
 .icon {
-  padding: 3px;
-  box-sizing: content-box;
-  border-radius: 50%;
-  background: var(--color-highlight);
-}
-
-.error .icon {
-  background: var(--color-red-50);
-  color: var(--color-danger);
-}
-
-.warning .icon {
-  background: var(--color-yellow-100);
-  color: var(--color-warning-dark);
-}
-
-.info .icon {
-  background: var(--color-highlight-info);
-  color: var(--color-info);
+  flex: 0 0 auto;
 }
 
 .entry {

package/lib/components/job-header/job-header.js

@@ -19,17 +19,18 @@ const JobHeader = (props) => {
     const { builtAt, hash } = (0, get_1.default)(job, `meta.${utils_1.Source.webpack}`, {});
     const rootClassName = (0, classnames_1.default)(job_header_module_css_1.default.root, className);
     return (react_1.default.createElement(stack_1.Stack, { className: rootClassName, space: "xxsmall" },
-        react_1.default.createElement("h1", { className: job_header_module_css_1.default.title },
-            react_1.default.createElement("span", null, `#${job.internalBuildNumber}`),
-            tag && react_1.default.createElement(tag_1.Tag, { className: job_header_module_css_1.default.tag }, tag)),
-        react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxsmall", className: job_header_module_css_1.default.meta },
-            builtAt && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: builtAt },
-                react_1.default.createElement(icon_1.Icon, { glyph: "clock" }),
-                react_1.default.createElement("span", null, (0, utils_1.formatDateTime)({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)))),
-            hash && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, title: "Webpack bundle hash" },
-                react_1.default.createElement(icon_1.Icon, { glyph: "commit" }),
-                react_1.default.createElement("span", null, hash))),
-            react_1.default.createElement("div", { className: job_header_module_css_1.default.content }, children))));
+        react_1.default.createElement(flex_stack_1.FlexStack, { space: "xsmall", alignItems: "center" },
+            react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", as: "h1", className: job_header_module_css_1.default.title },
+                react_1.default.createElement("span", null, `#${job.internalBuildNumber}`),
+                tag && react_1.default.createElement(tag_1.Tag, { className: job_header_module_css_1.default.tag }, tag)),
+            builtAt && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: builtAt, className: job_header_module_css_1.default.meta },
+                react_1.default.createElement(icon_1.Icon, { glyph: "clock", className: job_header_module_css_1.default.metaIcon }),
+                react_1.default.createElement("span", { className: job_header_module_css_1.default.metaText }, (0, utils_1.formatDateTime)({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)))),
+            hash && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, title: "Webpack bundle hash", className: job_header_module_css_1.default.meta },
+                react_1.default.createElement(icon_1.Icon, { glyph: "commit", className: job_header_module_css_1.default.metaIcon }),
+                react_1.default.createElement("span", { className: job_header_module_css_1.default.metaText }, hash.slice(0, 7))))),
+        children && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxsmall", className: job_header_module_css_1.default.meta },
+            react_1.default.createElement("div", { className: job_header_module_css_1.default.content }, children)))));
 };
 exports.JobHeader = JobHeader;
 exports.JobHeader.propTypes = {

package/lib/components/job-header/job-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"job-header.js","sourceRoot":"","sources":["../../../src/components/job-header/job-header.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAC5B,qDAA6B;AAC7B,+CAA6D;AAE7D,wDAAoD;AACpD,8CAA2C;AAC3C,wCAAqC;AACrC,sCAAmC;AACnC,oFAA0C;AAEnC,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,EAAE;IACjC,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEhD,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,IAAA,aAAG,EAAC,GAAG,EAAE,QAAQ,cAAM,CAAC,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;IACjE,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,+BAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,8BAAC,aAAK,IAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAC,SAAS;QAC9C,sCAAI,SAAS,EAAE,+BAAG,CAAC,KAAK;YACtB,4CAAO,IAAI,GAAG,CAAC,mBAAmB,EAAE,CAAQ;YAC3C,GAAG,IAAI,8BAAC,SAAG,IAAC,SAAS,EAAE,+BAAG,CAAC,GAAG,IAAG,GAAG,CAAO,CACzC;QACL,8BAAC,sBAAS,IAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,+BAAG,CAAC,IAAI;YAC3C,OAAO,IAAI,CACV,8BAAC,sBAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,MAAM,QAAC,EAAE,EAAC,MAAM,EAAC,KAAK,EAAE,OAAO;gBAC7E,8BAAC,WAAI,IAAC,KAAK,EAAC,OAAO,GAAG;gBACtB,4CACG,IAAA,sBAAc,EAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,OAAO,CAAC,CACjE,CACG,CACb;YAEA,IAAI,IAAI,CACP,8BAAC,sBAAS,IAAC,KAAK,EAAC,UAAU,EAAC,UAAU,EAAC,QAAQ,EAAC,MAAM,QAAC,KAAK,EAAC,qBAAqB;gBAChF,8BAAC,WAAI,IAAC,KAAK,EAAC,QAAQ,GAAG;gBACvB,4CAAO,IAAI,CAAQ,CACT,CACb;YAED,uCAAK,SAAS,EAAE,+BAAG,CAAC,OAAO,IAAG,QAAQ,CAAO,CACnC,CACN,CACT,CAAC;AACJ,CAAC,CAAC;AAjCW,QAAA,SAAS,aAiCpB;AAEF,iBAAS,CAAC,SAAS,GAAG;IACpB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,GAAG,EAAE,oBAAS,CAAC,MAAM;IACrB,GAAG,EAAE,oBAAS,CAAC,KAAK,CAAC;QACnB,mBAAmB,EAAE,oBAAS,CAAC,MAAM;QACrC,IAAI,EAAE,oBAAS,CAAC,KAAK,CAAC;YACpB,OAAO,EAAE,oBAAS,CAAC,MAAM;SAC1B,CAAC;QACF,OAAO,EAAE,oBAAS,CAAC,MAAM;KAC1B,CAAC;IACF,QAAQ,EAAE,oBAAS,CAAC,OAAO;CAC5B,CAAC;AAEF,iBAAS,CAAC,YAAY,GAAG;IACvB,SAAS,EAAE,EAAE;IACb,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,IAAI;IACT,QAAQ,EAAE,IAAI;CACf,CAAC"}
+{"version":3,"file":"job-header.js","sourceRoot":"","sources":["../../../src/components/job-header/job-header.jsx"],"names":[],"mappings":"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"}

package/lib/components/jobs-header/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/jobs-header/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/jobs-header/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,gDAA8B"}

package/lib/components/jobs-header/jobs-header.js

@@ -3,28 +3,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.JobsHeader = void 0;
+exports.JobsHeader = exports.Item = void 0;
 const react_1 = __importDefault(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("@bundle-stats/utils");
 const i18n_1 = __importDefault(require("../../i18n"));
 const flex_stack_1 = require("../../layout/flex-stack");
-const job_header_1 = require("../job-header");
+const icon_1 = require("../../ui/icon");
+const tag_1 = require("../../ui/tag");
 const jobs_header_module_css_1 = __importDefault(require("./jobs-header.module.css"));
+const Item = (props) => {
+    const { className, tag, job } = props;
+    const { builtAt, hash } = job.meta?.webpack || {};
+    const rootClassName = (0, classnames_1.default)(jobs_header_module_css_1.default.item, className);
+    return (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xsmall", alignItems: "center", className: rootClassName },
+        react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", as: "h1", className: jobs_header_module_css_1.default.itemTitle },
+            react_1.default.createElement("span", null, `#${job.internalBuildNumber}`),
+            tag && react_1.default.createElement(tag_1.Tag, { className: jobs_header_module_css_1.default.itemTag }, tag)),
+        builtAt && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: builtAt, className: jobs_header_module_css_1.default.itemMeta },
+            react_1.default.createElement(icon_1.Icon, { glyph: "clock", className: jobs_header_module_css_1.default.itemMetaIcon }),
+            react_1.default.createElement("span", { className: jobs_header_module_css_1.default.itemMetaText }, (0, utils_1.formatDateTime)({ dateStyle: 'medium', timeStyle: 'medium' }, builtAt)))),
+        hash && (react_1.default.createElement(flex_stack_1.FlexStack, { space: "xxxsmall", alignItems: "center", inline: true, as: "span", title: "Webpack bundle hash", className: jobs_header_module_css_1.default.itemMeta },
+            react_1.default.createElement(icon_1.Icon, { glyph: "commit", className: jobs_header_module_css_1.default.itemMetaIcon }),
+            react_1.default.createElement("span", { className: jobs_header_module_css_1.default.itemMetaText }, hash.slice(0, 7))))));
+};
+exports.Item = Item;
 const JobsHeader = (props) => {
     const { className, jobs } = props;
     const rootClassName = (0, classnames_1.default)(jobs_header_module_css_1.default.root, className);
-    return (react_1.default.createElement(flex_stack_1.FlexStack, { className: rootClassName, space: "none" }, jobs?.map((job, index) => (react_1.default.createElement(job_header_1.JobHeader, { key: job.internalBuildNumber || index, className: jobs_header_module_css_1.default.item, job: job, tag: index === 0 ? i18n_1.default.CURRENT : i18n_1.default.BASELINE })))));
+    return (react_1.default.createElement("header", { className: rootClassName }, jobs?.map((job, index) => (react_1.default.createElement(exports.Item, { key: job.internalBuildNumber || index, job: job, tag: index === 0 ? i18n_1.default.CURRENT : i18n_1.default.BASELINE })))));
 };
 exports.JobsHeader = JobsHeader;
-exports.JobsHeader.propTypes = {
-    className: prop_types_1.default.string,
-    jobs: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        internalBuildNumber: prop_types_1.default.number,
-    })),
-};
-exports.JobsHeader.defaultProps = {
-    className: '',
-    jobs: null,
-};
 //# sourceMappingURL=jobs-header.js.map

package/lib/components/jobs-header/jobs-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"jobs-header.js","sourceRoot":"","sources":["../../../src/components/jobs-header/jobs-header.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AACnC,4DAA4B;AAE5B,sDAA8B;AAC9B,wDAAoD;AACpD,8CAA0C;AAC1C,sFAA2C;AAEpC,MAAM,UAAU,GAAG,CAAC,KAAK,EAAE,EAAE;IAClC,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,gCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,8BAAC,sBAAS,IAAC,SAAS,EAAE,aAAa,EAAE,KAAK,EAAC,MAAM,IAC9C,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,8BAAC,sBAAS,IACR,GAAG,EAAE,GAAG,CAAC,mBAAmB,IAAI,KAAK,EACrC,SAAS,EAAE,gCAAG,CAAC,IAAI,EACnB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,cAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAI,CAAC,QAAQ,GAC/C,CACH,CAAC,CACQ,CACb,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,UAAU,cAgBrB;AAEF,kBAAU,CAAC,SAAS,GAAG;IAErB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAG3B,IAAI,EAAE,oBAAS,CAAC,OAAO,CACrB,oBAAS,CAAC,KAAK,CAAC;QACd,mBAAmB,EAAE,oBAAS,CAAC,MAAM;KACtC,CAAC,CACH;CACF,CAAC;AAEF,kBAAU,CAAC,YAAY,GAAG;IACxB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,IAAI;CACX,CAAC"}
+{"version":3,"file":"jobs-header.js","sourceRoot":"","sources":["../../../src/components/jobs-header/jobs-header.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,+CAAqD;AAErD,sDAA8B;AAC9B,wDAAoD;AACpD,wCAAqC;AACrC,sCAAmC;AACnC,sFAA2C;AAepC,MAAM,IAAI,GAAG,CAAC,KAA8C,EAAE,EAAE;IACrE,MAAM,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,KAAK,CAAC;IAEtC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC,IAAI,EAAE,OAAO,IAAI,EAAE,CAAC;IAClD,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,gCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,8BAAC,sBAAS,IAAC,KAAK,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,SAAS,EAAE,aAAa;QACpE,8BAAC,sBAAS,IAAC,KAAK,EAAC,UAAU,EAAC,EAAE,EAAC,IAAI,EAAC,SAAS,EAAE,gCAAG,CAAC,SAAS;YAC1D,4CAAO,IAAI,GAAG,CAAC,mBAAmB,EAAE,CAAQ;YAC3C,GAAG,IAAI,8BAAC,SAAG,IAAC,SAAS,EAAE,gCAAG,CAAC,OAAO,IAAG,GAAG,CAAO,CACtC;QAEX,OAAO,IAAI,CACV,8BAAC,sBAAS,IACR,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,QAAQ,EACnB,MAAM,QACN,EAAE,EAAC,MAAM,EACT,KAAK,EAAE,OAAO,EACd,SAAS,EAAE,gCAAG,CAAC,QAAQ;YAEvB,8BAAC,WAAI,IAAC,KAAK,EAAC,OAAO,EAAC,SAAS,EAAE,gCAAG,CAAC,YAAY,GAAI;YACnD,wCAAM,SAAS,EAAE,gCAAG,CAAC,YAAY,IAC9B,IAAA,sBAAc,EAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,OAAO,CAAC,CACjE,CACG,CACb;QAEA,IAAI,IAAI,CACP,8BAAC,sBAAS,IACR,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,QAAQ,EACnB,MAAM,QACN,EAAE,EAAC,MAAM,EACT,KAAK,EAAC,qBAAqB,EAC3B,SAAS,EAAE,gCAAG,CAAC,QAAQ;YAEvB,8BAAC,WAAI,IAAC,KAAK,EAAC,QAAQ,EAAC,SAAS,EAAE,gCAAG,CAAC,YAAY,GAAI;YACpD,wCAAM,SAAS,EAAE,gCAAG,CAAC,YAAY,IAAG,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ,CAClD,CACb,CACS,CACb,CAAC;AACJ,CAAC,CAAC;AA5CW,QAAA,IAAI,QA4Cf;AAMK,MAAM,UAAU,GAAG,CAAC,KAAuD,EAAE,EAAE;IACpF,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,gCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC;IAE9C,OAAO,CACL,0CAAQ,SAAS,EAAE,aAAa,IAC7B,IAAI,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE,CAAC,CACzB,8BAAC,YAAI,IACH,GAAG,EAAE,GAAG,CAAC,mBAAmB,IAAI,KAAK,EACrC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,cAAI,CAAC,OAAO,CAAC,CAAC,CAAC,cAAI,CAAC,QAAQ,GAC/C,CACH,CAAC,CACK,CACV,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,UAAU,cAerB"}

package/lib/components/jobs-header/jobs-header.module.css

@@ -1,16 +1,63 @@
 .root {
-  align-items: stretch;
-  flex-wrap: wrap;
   padding: var(--space-small) 0;
+  width: 100%;
+  display: flex;
 }
 
 .item {
-  flex: 0 0 auto;
-  padding: 0 var(--space-medium);
+  position: relative;
+  flex: 1 0 10%;
+  max-width: 50%;
+  overflow: hidden;
+  padding: 0 var(--space-small);
   border-left: 1px solid var(--color-outline);
 }
 
+.item::after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: var(--space-xxsmall);
+  background: linear-gradient(90deg, transparent, var(--color-background));
+}
+
+.item + .item {
+  margin-left: var(--space-small);
+}
+
 .item:first-child {
   border-left: 0;
   padding-left: 0;
 }
+
+.itemTitle {
+  font-size: var(--size-xlarge);
+  line-height: 1;
+  font-weight: bold;
+  vertical-align: top;
+}
+
+.itemTag {
+  margin-left: var(--space-xxsmall);
+  vertical-align: top;
+  outline: 1px solid var(--color-outline);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
+}
+
+.itemMeta {
+  font-size: var(--size-small);
+  color: var(--color-text-light);
+}
+
+.itemMetaIcon {
+  flex: 0 0 auto;
+}
+
+.itemMetaText {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}

package/lib/components/metric/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metric/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metric/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB"}

package/lib/components/metric/metric.js

@@ -1,77 +1,20 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Metric = void 0;
-const react_1 = __importStar(require("react"));
-const prop_types_1 = __importDefault(require("prop-types"));
+const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 const metric_module_css_1 = __importDefault(require("./metric.module.css"));
-const EXTRACT_VALUE_UNIT_PATTERN = /([\d|.|,| ]*)(\w*|%)$/;
-const Metric = ({ className, value, formatter, inline, children, enhanced }) => {
-    const { displayValue, displayUnit } = (0, react_1.useMemo)(() => {
-        const formattedValue = formatter?.(value);
-        if (!formattedValue) {
-            return { displayValue: value };
-        }
-        if (!enhanced) {
-            return { displayValue: formattedValue };
-        }
-        const matches = formattedValue.match(EXTRACT_VALUE_UNIT_PATTERN);
-        if (!matches) {
-            return { displayValue: value };
-        }
-        return {
-            displayUnit: matches[2],
-            displayValue: matches[1],
-        };
-    }, [formatter, value]);
+const Metric = (props) => {
+    const { className = '', value = '0', unit = '', inline = false, children = null, ...restProps } = props;
     const rootClassName = (0, classnames_1.default)(className, metric_module_css_1.default.root, inline && metric_module_css_1.default.inline);
-    return (react_1.default.createElement("div", { className: rootClassName },
+    return (react_1.default.createElement("div", { className: rootClassName, ...restProps },
         react_1.default.createElement("div", { className: metric_module_css_1.default.display },
-            react_1.default.createElement("span", { className: metric_module_css_1.default.displayValue }, displayValue),
-            displayUnit && react_1.default.createElement("span", { className: metric_module_css_1.default.displayUnit }, displayUnit)),
-        react_1.default.createElement("div", { className: metric_module_css_1.default.delta }, children)));
+            react_1.default.createElement("span", { className: metric_module_css_1.default.displayValue }, value),
+            unit && react_1.default.createElement("span", { className: metric_module_css_1.default.displayUnit }, unit)),
+        children && react_1.default.createElement("div", { className: metric_module_css_1.default.content }, children)));
 };
 exports.Metric = Metric;
-exports.Metric.defaultProps = {
-    className: '',
-    enhanced: false,
-    inline: false,
-    value: 0,
-    children: [],
-    formatter: (val) => val,
-};
-exports.Metric.propTypes = {
-    className: prop_types_1.default.string,
-    enhanced: prop_types_1.default.bool,
-    inline: prop_types_1.default.bool,
-    value: prop_types_1.default.oneOfType([prop_types_1.default.number, prop_types_1.default.string]),
-    formatter: prop_types_1.default.func,
-    children: prop_types_1.default.node,
-};
 //# sourceMappingURL=metric.js.map

package/lib/components/metric/metric.js.map

@@ -1 +1 @@
-{"version":3,"file":"metric.js","sourceRoot":"","sources":["../../../src/components/metric/metric.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAuC;AACvC,4DAAmC;AACnC,4DAA4B;AAE5B,4EAAsC;AAGtC,MAAM,0BAA0B,GAAG,uBAAuB,CAAC;AAEpD,MAAM,MAAM,GAAG,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE;IACpF,MAAM,EAAE,YAAY,EAAE,WAAW,EAAE,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QACjD,MAAM,cAAc,GAAG,SAAS,EAAE,CAAC,KAAK,CAAC,CAAC;QAE1C,IAAI,CAAC,cAAc,EAAE;YACnB,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;SAChC;QAED,IAAI,CAAC,QAAQ,EAAE;YACb,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC;SACzC;QAED,MAAM,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,0BAA0B,CAAC,CAAC;QAEjE,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;SAChC;QAED,OAAO;YACL,WAAW,EAAE,OAAO,CAAC,CAAC,CAAC;YACvB,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;SACzB,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAEvB,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,SAAS,EAAE,2BAAG,CAAC,IAAI,EAAE,MAAM,IAAI,2BAAG,CAAC,MAAM,CAAC,CAAC;IAEpE,OAAO,CACL,uCAAK,SAAS,EAAE,aAAa;QAC3B,uCAAK,SAAS,EAAE,2BAAG,CAAC,OAAO;YACzB,wCAAM,SAAS,EAAE,2BAAG,CAAC,YAAY,IAAG,YAAY,CAAQ;YACvD,WAAW,IAAI,wCAAM,SAAS,EAAE,2BAAG,CAAC,WAAW,IAAG,WAAW,CAAQ,CAClE;QACN,uCAAK,SAAS,EAAE,2BAAG,CAAC,KAAK,IAAG,QAAQ,CAAO,CACvC,CACP,CAAC;AACJ,CAAC,CAAC;AAnCW,QAAA,MAAM,UAmCjB;AAEF,cAAM,CAAC,YAAY,GAAG;IACpB,SAAS,EAAE,EAAE;IACb,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,KAAK;IACb,KAAK,EAAE,CAAC;IACR,QAAQ,EAAE,EAAE;IACZ,SAAS,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG;CACxB,CAAC;AAEF,cAAM,CAAC,SAAS,GAAG;IACjB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,QAAQ,EAAE,oBAAS,CAAC,IAAI;IACxB,MAAM,EAAE,oBAAS,CAAC,IAAI;IACtB,KAAK,EAAE,oBAAS,CAAC,SAAS,CAAC,CAAC,oBAAS,CAAC,MAAM,EAAE,oBAAS,CAAC,MAAM,CAAC,CAAC;IAChE,SAAS,EAAE,oBAAS,CAAC,IAAI;IACzB,QAAQ,EAAE,oBAAS,CAAC,IAAI;CACzB,CAAC"}
+{"version":3,"file":"metric.js","sourceRoot":"","sources":["../../../src/components/metric/metric.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAE5B,4EAAsC;AAiB/B,MAAM,MAAM,GAAG,CAAC,KAAgD,EAAE,EAAE;IACzE,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,GAAG,EACX,IAAI,GAAG,EAAE,EACT,MAAM,GAAG,KAAK,EACd,QAAQ,GAAG,IAAI,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,IAAA,oBAAE,EAAC,SAAS,EAAE,2BAAG,CAAC,IAAI,EAAE,MAAM,IAAI,2BAAG,CAAC,MAAM,CAAC,CAAC;IAEpE,OAAO,CACL,uCAAK,SAAS,EAAE,aAAa,KAAM,SAAS;QAC1C,uCAAK,SAAS,EAAE,2BAAG,CAAC,OAAO;YACzB,wCAAM,SAAS,EAAE,2BAAG,CAAC,YAAY,IAAG,KAAK,CAAQ;YAChD,IAAI,IAAI,wCAAM,SAAS,EAAE,2BAAG,CAAC,WAAW,IAAG,IAAI,CAAQ,CACpD;QACL,QAAQ,IAAI,uCAAK,SAAS,EAAE,2BAAG,CAAC,OAAO,IAAG,QAAQ,CAAO,CACtD,CACP,CAAC;AACJ,CAAC,CAAC;AArBW,QAAA,MAAM,UAqBjB"}

package/lib/components/metric/metric.module.css

@@ -1,12 +1,12 @@
 .root {
-  letter-spacing: 0.05em;
+  font-family: var(--font-family-fixed);
 }
 
 .displayUnit {
   font-size: var(--size-small);
 }
 
-.delta {
+.content {
   font-size: var(--size-small);
 }
 
@@ -14,7 +14,7 @@
   display: inline-block;
 }
 
-.inline .delta {
+.inline .content {
   display: inline-block;
   margin: 0 0 0 var(--space-xxxsmall);
 }

package/lib/components/metric-run-info/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./metric-run-info"), exports);
+//# sourceMappingURL=index.js.map

package/lib/components/metric-run-info/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,oDAAkC"}

package/lib/components/metric-run-info/metric-run-info.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetricRunInfo = void 0;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("@bundle-stats/utils");
+const stack_1 = require("../../layout/stack");
+const run_info_1 = require("../run-info");
+const metric_run_info_module_css_1 = __importDefault(require("./metric-run-info.module.css"));
+const MetricHoverCard = ({ description, url }) => {
+    const onClick = (0, react_1.useCallback)(() => {
+        if (url) {
+            window.open(url);
+        }
+    }, [url]);
+    return (react_1.default.createElement(stack_1.Stack, { space: "xxxsmall" },
+        react_1.default.createElement("p", null, description),
+        url && (react_1.default.createElement("p", null,
+            react_1.default.createElement("button", { type: "button", onClick: onClick, className: metric_run_info_module_css_1.default.readMoreLink }, "Read more")))));
+};
+const MetricRunInfo = (props) => {
+    const { metricId, current, baseline = 0, showDelta = true, showMetricDescription = true, showBaseline = true, ...restProps } = props;
+    const metric = (0, utils_1.getGlobalMetricType)(metricId);
+    const metricRunInfo = (0, utils_1.getMetricRunInfo)(metric, current, baseline || 0);
+    const titleHoverCard = (0, react_1.useMemo)(() => {
+        if (showMetricDescription) {
+            return react_1.default.createElement(MetricHoverCard, { description: metric.description, url: metric.url });
+        }
+        return null;
+    }, [showMetricDescription, metric]);
+    return (react_1.default.createElement(run_info_1.RunInfo, { title: metric.label, titleHoverCard: titleHoverCard, enhance: true, current: metricRunInfo.displayValue, showBaseline: showBaseline, ...(showBaseline && {
+            baseline: metric.formatter(baseline),
+        }), ...(showDelta && showBaseline && {
+            delta: metricRunInfo.displayDeltaPercentage,
+            deltaType: metricRunInfo.deltaType,
+        }), ...restProps }));
+};
+exports.MetricRunInfo = MetricRunInfo;
+//# sourceMappingURL=metric-run-info.js.map

package/lib/components/metric-run-info/metric-run-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metric-run-info.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/metric-run-info.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AACpD,+CAA4E;AAE5E,8CAA2C;AAC3C,0CAAoD;AACpD,8FAA+C;AAO/C,MAAM,eAAe,GAAG,CAAC,EAAE,WAAW,EAAE,GAAG,EAAmB,EAAE,EAAE;IAEhE,MAAM,OAAO,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QAC/B,IAAI,GAAG,EAAE;YACP,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;SAClB;IACH,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,OAAO,CACL,8BAAC,aAAK,IAAC,KAAK,EAAC,UAAU;QACrB,yCAAI,WAAW,CAAK;QACnB,GAAG,IAAI,CACN;YACE,0CAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,oCAAG,CAAC,YAAY,gBAE1D,CACP,CACL,CACK,CACT,CAAC;AACJ,CAAC,CAAC;AAaK,MAAM,aAAa,GAAG,CAAC,KAAuD,EAAE,EAAE;IACvF,MAAM,EACJ,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,CAAC,EACZ,SAAS,GAAG,IAAI,EAChB,qBAAqB,GAAG,IAAI,EAC5B,YAAY,GAAG,IAAI,EACnB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,MAAM,GAAG,IAAA,2BAAmB,EAAC,QAAQ,CAAC,CAAC;IAC7C,MAAM,aAAa,GAAG,IAAA,wBAAgB,EAAC,MAAM,EAAE,OAAO,EAAE,QAAQ,IAAI,CAAC,CAAC,CAAC;IAEvE,MAAM,cAAc,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAClC,IAAI,qBAAqB,EAAE;YACzB,OAAO,8BAAC,eAAe,IAAC,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE,GAAG,EAAE,MAAM,CAAC,GAAG,GAAI,CAAC;SAC9E;QAED,OAAO,IAAI,CAAC;IACd,CAAC,EAAE,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC,CAAC;IAEpC,OAAO,CACL,8BAAC,kBAAO,IACN,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,cAAc,EAAE,cAAc,EAC9B,OAAO,QACP,OAAO,EAAE,aAAa,CAAC,YAAY,EACnC,YAAY,EAAE,YAAY,KACtB,CAAC,YAAY,IAAI;YACnB,QAAQ,EAAE,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC;SACrC,CAAC,KACE,CAAC,SAAS,IAAI,YAAY,IAAI;YAChC,KAAK,EAAE,aAAa,CAAC,sBAAsB;YAC3C,SAAS,EAAE,aAAa,CAAC,SAAS;SACnC,CAAC,KACE,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC;AAvCW,QAAA,aAAa,iBAuCxB"}

package/lib/components/metric-run-info/metric-run-info.module.css

@@ -0,0 +1,18 @@
+.readMoreLink {
+  appearance: none;
+  background: none;
+  margin: 0;
+  border: 0;
+  padding: 0;
+  color: var(--color-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.readMoreLink:hover,
+.readMoreLink:active,
+.readMoreLink:focus {
+  color: var(--color-primary-dark);
+  text-decoration: none;
+}
+

package/lib/components/metrics-table-options/metrics-table-options.js

@@ -10,7 +10,7 @@ const i18n_1 = __importDefault(require("../../i18n"));
 const dropdown_1 = require("../../ui/dropdown");
 const MetricsTableOptions = (props) => {
     const { className, handleViewAll, handleResetFilters, ...restProps } = props;
-    return (react_1.default.createElement(dropdown_1.Dropdown, { className: className, glyph: "menu", ...restProps },
+    return (react_1.default.createElement(dropdown_1.Dropdown, { className: className, glyph: "more-vertical", ...restProps },
         handleResetFilters && (react_1.default.createElement(dropdown_1.Dropdown.Item, { onClick: handleResetFilters }, i18n_1.default.RESET_FILTERS)),
         handleViewAll && (react_1.default.createElement(dropdown_1.Dropdown.Item, { onClick: handleViewAll }, i18n_1.default.VIEW_ALL))));
 };

package/lib/components/metrics-table-options/metrics-table-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"metrics-table-options.js","sourceRoot":"","sources":["../../../src/components/metrics-table-options/metrics-table-options.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AAEnC,sDAA8B;AAC9B,gDAA6C;AAEtC,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,EAAE;IAC3C,MAAM,EAAE,SAAS,EAAG,aAAa,EAAE,kBAAkB,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE9E,OAAO,CACL,8BAAC,mBAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAC,MAAM,KAAK,SAAS;QACvD,kBAAkB,IAAI,CACrB,8BAAC,mBAAQ,CAAC,IAAI,IAAC,OAAO,EAAE,kBAAkB,IACvC,cAAI,CAAC,aAAa,CACL,CACjB;QACA,aAAa,IAAI,CAChB,8BAAC,mBAAQ,CAAC,IAAI,IAAC,OAAO,EAAE,aAAa,IAClC,cAAI,CAAC,QAAQ,CACA,CACjB,CACQ,CACZ,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,mBAAmB,uBAiB9B;AAEF,2BAAmB,CAAC,SAAS,GAAG;IAC9B,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,aAAa,EAAE,oBAAS,CAAC,IAAI;IAC7B,kBAAkB,EAAE,oBAAS,CAAC,IAAI;CACnC,CAAC;AAEF,2BAAmB,CAAC,YAAY,GAAG;IACjC,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,IAAI;IACnB,kBAAkB,EAAE,IAAI;CACzB,CAAC"}
+{"version":3,"file":"metrics-table-options.js","sourceRoot":"","sources":["../../../src/components/metrics-table-options/metrics-table-options.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAAmC;AAEnC,sDAA8B;AAC9B,gDAA6C;AAEtC,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,EAAE;IAC3C,MAAM,EAAE,SAAS,EAAG,aAAa,EAAE,kBAAkB,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAE9E,OAAO,CACL,8BAAC,mBAAQ,IAAC,SAAS,EAAE,SAAS,EAAE,KAAK,EAAC,eAAe,KAAK,SAAS;QAChE,kBAAkB,IAAI,CACrB,8BAAC,mBAAQ,CAAC,IAAI,IAAC,OAAO,EAAE,kBAAkB,IACvC,cAAI,CAAC,aAAa,CACL,CACjB;QACA,aAAa,IAAI,CAChB,8BAAC,mBAAQ,CAAC,IAAI,IAAC,OAAO,EAAE,aAAa,IAClC,cAAI,CAAC,QAAQ,CACA,CACjB,CACQ,CACZ,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,mBAAmB,uBAiB9B;AAEF,2BAAmB,CAAC,SAAS,GAAG;IAC9B,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,aAAa,EAAE,oBAAS,CAAC,IAAI;IAC7B,kBAAkB,EAAE,oBAAS,CAAC,IAAI;CACnC,CAAC;AAEF,2BAAmB,CAAC,YAAY,GAAG;IACjC,SAAS,EAAE,EAAE;IACb,aAAa,EAAE,IAAI;IACnB,kBAAkB,EAAE,IAAI;CACzB,CAAC"}