Merge pull request #5908 from getkirby/v4/enhancement/stat-icon

Icon for `k-stat`
getkirby · Nov 3, 2023 · ea9535f · ea9535f
2 parents 203a801 + 9ff6891
commit ea9535f
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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-sm);
+
 	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
@@ -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']);