chore: add icon overview for patternhub (#2029)

* chore: add icon overview for patternhub

* chore: add snapshot

* chore: update snapshots

---------

Co-authored-by: Maximilian Franzke <[email protected]>

showcases/angular-showcase/src/app/app.module.ts

@@ -59,9 +59,11 @@ import { NavigationItemComponent } from './components/navigation-item/navigation
 import { NavItemComponent } from './nav-item/nav-item.component';
 import { MainNavigationComponent } from './components/main-navigation/main-navigation.component';
 import { TextareaComponent } from './components/textarea/textarea.component';
+import { IconComponent } from './components/icon/icon.component';
 
 @NgModule({
 	declarations: [
+		IconComponent,
 		TooltipComponent,
 
 		PopoverComponent,

showcases/angular-showcase/src/app/components/icon/icon.component.html

@@ -0,0 +1,18 @@
+<app-default-component
+	title="DBIcon"
+	[variants]="variants"
+	[exampleTemplate]="exampleTemplate"
+>
+	<ng-template
+		#exampleTemplate
+		let-exampleProps="exampleProps"
+		let-exampleName="exampleName"
+		let-exampleIndex="exampleIndex"
+		let-variantIndex="variantIndex"
+	>
+		<db-infotext icon="none" size="small" variant="informational">
+			{{ exampleName }}
+		</db-infotext>
+		<db-icon icon="account">{{ exampleName }}</db-icon>
+	</ng-template>
+</app-default-component>

showcases/angular-showcase/src/app/components/icon/icon.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+import defaultComponentVariants from '../../../../../shared/icon.json';
+
+@Component({
+	selector: 'app-icon',
+	templateUrl: './icon.component.html'
+})
+export class IconComponent {
+	variants = defaultComponentVariants;
+}

showcases/angular-showcase/src/app/utils/navigation-item.ts

@@ -21,6 +21,7 @@ import { SectionComponent } from '../components/section/section.component';
 import { CardComponent } from '../components/card/card.component';
 import { DividerComponent } from '../components/divider/divider.component';
 import { DrawerComponent } from '../components/drawer/drawer.component';
+import { IconComponent } from '../components/icon/icon.component';
 
 export type NavItem = {
 	path: string;
@@ -65,6 +66,7 @@ export const NAVIGATION_ITEMS: NavItem[] = [
 		path: '04',
 		label: '04 Data-Display',
 		subNavigation: getSortedNavigationItems([
+			{ path: '04/icon', label: 'Icon', component: IconComponent },
 			{
 				path: '04/tooltip',
 				label: 'Tooltip',

showcases/e2e/icon/showcase-icon.spec.ts

@@ -0,0 +1,7 @@
+import { test } from '@playwright/test';
+// @ts-expect-error - required for playwright
+import { getDefaultScreenshotTest } from '../default.ts';
+
+test.describe('DBIcon', () => {
+	getDefaultScreenshotTest('04/icon');
+});

showcases/react-showcase/src/components/icon/index.tsx

@@ -0,0 +1,27 @@
+import { DBIcon, DBInfotext } from '../../../../../output/react/src';
+import DefaultComponent from '../index';
+import defaultComponentVariants from '../../../../shared/icon.json';
+import { type DBIconProps } from '../../../../../output/react/src/components/icon/model';
+import { getVariants } from '../data';
+
+const getIcon = ({ children }: DBIconProps) => (
+	<>
+		<DBInfotext icon="none" size="small" variant="informational">
+			{children}
+		</DBInfotext>
+		<DBIcon icon="account">{children}</DBIcon>
+	</>
+);
+
+const IconComponent = () => {
+	return (
+		<DefaultComponent
+			title={'DBIcon'}
+			variants={getVariants(
+				defaultComponentVariants,
+				getIcon
+			)}></DefaultComponent>
+	);
+};
+
+export default IconComponent;

showcases/react-showcase/src/utils/navigation-item.tsx

@@ -20,6 +20,7 @@ import InputComponent from '../components/input';
 import LinkComponent from '../components/link';
 import SectionComponent from '../components/section';
 import TextareaComponent from '../components/textarea';
+import IconComponent from '../components/icon';
 
 export type NavigationItem = {
 	path: string;
@@ -82,6 +83,11 @@ export const NAVIGATION_ITEMS: NavigationItem[] = [
 				label: 'Infotext',
 				component: <InfotextComponent />
 			},
+			{
+				path: 'icon',
+				label: 'Icon',
+				component: <IconComponent />
+			},
 			{
 				path: 'tooltip',
 				label: 'Tooltip',

showcases/shared/icon.json

@@ -0,0 +1,22 @@
+[
+	{
+		"name": "Tonality",
+		"examples": [
+			{
+				"name": "functional",
+				"className": "db-ui-functional",
+				"props": {}
+			},
+			{
+				"name": "regular (Default)",
+				"className": "db-ui-regular",
+				"props": {}
+			},
+			{
+				"name": "expressive",
+				"className": "db-ui-expressive",
+				"props": {}
+			}
+		]
+	}
+]

showcases/vue-showcase/src/components/icon/Icon.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import DefaultComponent from "../DefaultComponent.vue";
+import defaultComponentVariants from "../../../../shared/icon.json";
+import { DBIcon, DBInfotext } from "../../../../../output/vue/vue3/src";
+</script>
+
+<template>
+	<DefaultComponent title="DBIcon" :variants="defaultComponentVariants">
+		<template
+			#example="{ exampleIndex, variantIndex, exampleName, exampleProps }"
+		>
+			<DBInfotext icon="none" size="small" variant="informational">
+				{{ exampleName }}</DBInfotext
+			>
+			<DBIcon icon="account">
+				{{ exampleName }}
+			</DBIcon>
+		</template>
+	</DefaultComponent>
+</template>

showcases/vue-showcase/src/utils/navigation-items.ts

@@ -21,6 +21,7 @@ import Infotext from '../components/infotext/Infotext.vue';
 import Radio from '../components/radio/Radio.vue';
 import Section from '../components/section/Section.vue';
 import Textarea from '../components/textarea/Textarea.vue';
+import Icon from '../components/icon/Icon.vue';
 
 export type NavItem = {
 	path: string;
@@ -70,6 +71,11 @@ export const navigationItems: NavItem[] = [
 				label: 'Infotext',
 				component: Infotext
 			},
+			{
+				path: '/04/icon',
+				label: 'Icon',
+				component: Icon
+			},
 			{ path: '/04/tag', label: 'Tag', component: Tag },
 			{ path: '/04/accordion', label: 'Accordion', component: Accordion },
 			{