From 6451075c5b699c016cc3073287f4cd5190b1e445 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Thu, 2 Nov 2023 22:45:57 +0100
Subject: [PATCH 1/2] Icon for `k-stat`

---
 config/areas/system/views.php                | 17 +++---
 panel/lab/components/stats/1_stats/index.vue | 14 +++--
 panel/lab/components/stats/2_stat/index.vue  |  3 ++
 panel/src/components/Layout/Stat.vue         | 41 ++++++++-------
 tests/Panel/Areas/SystemTest.php             | 54 +++++++++++---------
 5 files changed, 74 insertions(+), 55 deletions(-)

diff --git a/config/areas/system/views.php b/config/areas/system/views.php
index dab7de6cfd..b786f06c9a 100644
--- a/config/areas/system/views.php
+++ b/config/areas/system/views.php
@@ -17,25 +17,26 @@
 					'label'  => $license ? I18n::translate('license') : I18n::translate('license.register.label'),
 					'value'  => $license ? 'Kirby 3' : I18n::translate('license.unregistered.label'),
 					'theme'  => $license ? null : 'negative',
+					'icon'   => $license ? 'info' : 'key',
 					'dialog' => $license ? 'license' : 'registration'
 				],
 				[
 					'label' => $updateStatus?->label() ?? I18n::translate('version'),
 					'value' => $kirby->version(),
-					'link'  => (
-						$updateStatus ?
-						$updateStatus->url() :
-						'https://github.com/getkirby/kirby/releases/tag/' . $kirby->version()
-					),
-					'theme' => $updateStatus?->theme()
+					'link'  => $updateStatus?->url() ??
+						'https://github.com/getkirby/kirby/releases/tag/' . $kirby->version(),
+					'theme' => $updateStatus?->theme(),
+					'icon'  => $updateStatus?->icon() ?? 'info'
 				],
 				[
 					'label' => 'PHP',
-					'value' => phpversion()
+					'value' => phpversion(),
+					'icon'  => 'code'
 				],
 				[
 					'label' => I18n::translate('server'),
-					'value' => $system->serverSoftware() ?? '?'
+					'value' => $system->serverSoftware() ?? '?',
+					'icon'  => 'server'
 				]
 			];
 
diff --git a/panel/lab/components/stats/1_stats/index.vue b/panel/lab/components/stats/1_stats/index.vue
index 30ea13fc7c..2c3c4515de 100644
--- a/panel/lab/components/stats/1_stats/index.vue
+++ b/panel/lab/components/stats/1_stats/index.vue
@@ -18,27 +18,31 @@ export default {
 					label: "Views",
 					value: "12.250",
 					info: "+120%",
-					theme: "positive"
+					theme: "positive",
+					icon: "preview"
 				},
 				{
 					label: "Visitors",
 					value: "3.500",
 					info: "0%",
-					theme: "info"
+					theme: "info",
+					icon: "users"
 				},
 				{
 					label: "Searches",
 					value: "1.250",
 					info: "-10%",
-					theme: "negative"
+					theme: "negative",
+					icon: "search"
 				}
 			];
 		},
 		reportsWithoutTheme() {
-			return this.$helper.clone(this.reports).map(report => {
+			return this.$helper.clone(this.reports).map((report) => {
+				report.icon = null;
 				report.theme = null;
 				return report;
-			})
+			});
 		}
 	}
 };
diff --git a/panel/lab/components/stats/2_stat/index.vue b/panel/lab/components/stats/2_stat/index.vue
index d5be376c8a..b855ad1a5d 100644
--- a/panel/lab/components/stats/2_stat/index.vue
+++ b/panel/lab/components/stats/2_stat/index.vue
@@ -1,5 +1,8 @@
 <template>
 	<k-lab-examples>
+		<k-lab-example label="icon">
+			<k-stat label="Pages" value="123" info="Last week" icon="page" />
+		</k-lab-example>
 		<k-lab-example label="theme">
 			<k-stat label="Pages" value="123" info="Last week" theme="info" />
 		</k-lab-example>
diff --git a/panel/src/components/Layout/Stat.vue b/panel/src/components/Layout/Stat.vue
index d17865e25e..4461c56897 100644
--- a/panel/src/components/Layout/Stat.vue
+++ b/panel/src/components/Layout/Stat.vue
@@ -1,6 +1,10 @@
 <template>
 	<component :is="component" :data-theme="theme" :to="target" class="k-stat">
-		<dt v-if="label" class="k-stat-label">{{ label }}</dt>
+		<dt v-if="label" class="k-stat-label">
+			<k-icon v-if="icon" :type="icon" />
+
+			{{ label }}
+		</dt>
 		<dd v-if="value" class="k-stat-value">{{ value }}</dd>
 		<dd v-if="info" class="k-stat-info">{{ info }}</dd>
 	</component>
@@ -18,37 +22,30 @@ export default {
 		/**
 		 * Label text of the stat (2nd line)
 		 */
-		label: {
-			type: String
-		},
+		label: String,
 		/**
 		 * Main text of the stat (1st line)
 		 */
-		value: {
-			type: String
-		},
+		value: String,
+		/**
+		 * Additional icon for the stat
+		 * @since 4.0.0
+		 */
+		icon: String,
 		/**
 		 * Additional text of the stat (3rd line)
 		 */
-		info: {
-			type: String
-		},
+		info: String,
 		/**
 		 * @values "negative", "positive", "warning", "info"
 		 */
-		theme: {
-			type: String
-		},
+		theme: String,
 		/** Absolute or relative URL */
-		link: {
-			type: String
-		},
+		link: String,
 		/**
 		 * Function to be called when clicked
 		 */
-		click: {
-			type: Function
-		},
+		click: Function,
 		/**
 		 * Dialog endpoint or options to be passed to `this.$dialog`
 		 */
@@ -111,7 +108,13 @@ export default {
 	margin-bottom: var(--spacing-1);
 }
 .k-stat-label {
+	--icon-size: var(--text-xs);
+
 	order: 2;
+	display: flex;
+	justify-content: start;
+	align-items: center;
+	gap: var(--spacing-1);
 	font-size: var(--text-xs);
 }
 .k-stat-info {
diff --git a/tests/Panel/Areas/SystemTest.php b/tests/Panel/Areas/SystemTest.php
index b3ba98f95c..f2990c85c0 100644
--- a/tests/Panel/Areas/SystemTest.php
+++ b/tests/Panel/Areas/SystemTest.php
@@ -49,40 +49,44 @@ public function testView(): void
 		$this->assertSame('k-system-view', $view['component']);
 		$this->assertSame([
 			[
-				'label' => 'Please enter your license code',
-				'value' => 'Unregistered',
-				'theme' => 'negative',
+				'label'  => 'Please enter your license code',
+				'value'  => 'Unregistered',
+				'theme'  => 'negative',
+				'icon'   => 'key',
 				'dialog' => 'registration'
 			],
 			[
 				'label' => 'Free update 88888.8.8 available',
 				'value' => $this->app->version(),
-				'link' => 'https://getkirby.com/releases/88888.8.8',
-				'theme' => 'info'
+				'link'  => 'https://getkirby.com/releases/88888.8.8',
+				'theme' => 'info',
+				'icon'  => 'info'
 			],
 			[
 				'label' => 'PHP',
-				'value' => phpversion()
+				'value' => phpversion(),
+				'icon'  => 'code'
 			],
 			[
 				'label' => 'Server',
-				'value' => 'php'
+				'value' => 'php',
+				'icon'  => 'server'
 			],
 		], $props['environment']);
 		$this->assertSame([], $props['exceptions']);
 		$this->assertSame([], $props['plugins']);
 		$this->assertSame([
 			[
-				'text' => 'This is a very important announcement!',
+				'text'  => 'This is a very important announcement!',
 				'kirby' => '*',
-				'php' => '*'
+				'php'   => '*'
 			]
 		], $props['security']);
 		$this->assertSame([
 			'content' => 'https://example.com/content/site.txt',
-			'git' => null,
-			'kirby' => null,
-			'site' => 'https://example.com/site'
+			'git'     => null,
+			'kirby'   => null,
+			'site'    => 'https://example.com/site'
 		], $props['urls']);
 	}
 
@@ -102,9 +106,9 @@ public function testViewDebug(): void
 		$this->assertSame([], $props['exceptions']);
 		$this->assertSame([
 			[
-				'text' => 'This is a very important announcement!',
+				'text'  => 'This is a very important announcement!',
 				'kirby' => '*',
-				'php' => '*'
+				'php'   => '*'
 			],
 			[
 				'id'   => 'debug',
@@ -129,9 +133,9 @@ public function testViewHttps(): void
 
 		$this->assertSame([
 			[
-				'text' => 'This is a very important announcement!',
+				'text'  => 'This is a very important announcement!',
 				'kirby' => '*',
-				'php' => '*'
+				'php'   => '*'
 			],
 			[
 				'id'   => 'https',
@@ -358,24 +362,28 @@ public function testViewWithoutUpdateCheck(): void
 
 		$this->assertSame([
 			[
-				'label' => 'Please enter your license code',
-				'value' => 'Unregistered',
-				'theme' => 'negative',
+				'label'  => 'Please enter your license code',
+				'value'  => 'Unregistered',
+				'theme'  => 'negative',
+				'icon'   => 'key',
 				'dialog' => 'registration'
 			],
 			[
 				'label' => 'Version',
 				'value' => $this->app->version(),
-				'link' => 'https://github.com/getkirby/kirby/releases/tag/' . $this->app->version(),
-				'theme' => null
+				'link'  => 'https://github.com/getkirby/kirby/releases/tag/' . $this->app->version(),
+				'theme' => null,
+				'icon'  => 'info'
 			],
 			[
 				'label' => 'PHP',
-				'value' => phpversion()
+				'value' => phpversion(),
+				'icon'  => 'code'
 			],
 			[
 				'label' => 'Server',
-				'value' => 'php'
+				'value' => 'php',
+				'icon'  => 'server'
 			],
 		], $props['environment']);
 		$this->assertSame([], $props['security']);

From 9ff689175ca22fc90dc3bd1a1dac1bdb5faf8f56 Mon Sep 17 00:00:00 2001
From: Nico Hoffmann <me@nhoffmann.com>
Date: Fri, 3 Nov 2023 16:04:15 +0100
Subject: [PATCH 2/2] `k-stat`: increase icon size

---
 panel/src/components/Layout/Stat.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/panel/src/components/Layout/Stat.vue b/panel/src/components/Layout/Stat.vue
index 4461c56897..5ce7c1afd2 100644
--- a/panel/src/components/Layout/Stat.vue
+++ b/panel/src/components/Layout/Stat.vue
@@ -108,7 +108,7 @@ export default {
 	margin-bottom: var(--spacing-1);
 }
 .k-stat-label {
-	--icon-size: var(--text-xs);
+	--icon-size: var(--text-sm);
 
 	order: 2;
 	display: flex;