refactor: brand component

packages/components/src/components/brand/brand.lite.tsx

@@ -1,4 +1,10 @@
-import { Show, useMetadata, useRef, useStore } from '@builder.io/mitosis';
+import {
+
+	Show,
+	useMetadata,
+	useRef,
+	useStore
+} from '@builder.io/mitosis';
 import { cls } from '../../utils';
 import { DBBrandProps, DBBrandState } from './model';
 
@@ -11,30 +17,16 @@ export default function DBBrand(props: DBBrandProps) {
 	// jscpd:ignore-start
 	const state = useStore<DBBrandState>({
 		defaultValues: {
-			src: './assets/images/db_logo.svg',
-			width: '34',
-			height: '24'
+			icon: 'logo'
 		}
 	});
 	// jscpd:ignore-end
 
 	return (
-		<div ref={ref} id={props.id} class={cls('db-brand', props.className)}>
-			<a
-				href={props.anchorRef}
-				title={props.anchorTitle}
-				rel={props.anchorRelation}>
-				<Show when={!props.hideDefaultAsset}>
-					<img
-						src={props.imgSrc ?? state.defaultValues.src}
-						alt={props.imgAlt ?? ''}
-						height={props.imgHeight ?? state.defaultValues.height}
-						width={props.imgWidth ?? state.defaultValues.width}
-						className="db-logo"
-					/>
-				</Show>
-				{props.children}
-			</a>
+		<div ref={ref} data-icon={props.hideLogo ? 'none' : state.defaultValues.icon}
+			id={props.id}
+			class={cls('db-brand', props.className)}>
+			{props.children}
 		</div>
 	);
 }

packages/components/src/components/brand/brand.scss

@@ -1,25 +1,23 @@
 @use "@db-ui/foundations/build/scss/variables";
+@use "@db-ui/foundations/build/scss/colors";
 
-%brand-display {
+.db-brand {
 	display: flex;
 	gap: variables.$db-spacing-fixed-md;
 	align-items: center;
-}
-
-.db-brand {
-	@extend %brand-display;
-
 	font-weight: 700;
 
-	a {
-		@extend %brand-display;
-		color: inherit;
-		// Deactivate underline on site name being made clickable by added to the link as well
-		text-decoration: none;
+	&::before {
+		--db-icon-font-size: #{variables.$db-sizing-md};
+		--db-icon-margin-end: 0;
+		--db-current-icon-color: #{colors.$db-brand-origin-enabled};
 	}
-}
 
-.db-logo {
-	max-inline-size: none;
-	block-size: variables.$db-sizing-sm;
+	img {
+		$logo-size: calc(
+			#{variables.$db-sizing-md} - #{variables.$db-sizing-3xs}
+		);
+		inline-size: $logo-size;
+		max-block-size: $logo-size;
+	}
 }

packages/components/src/components/brand/brand.spec.tsx

@@ -5,27 +5,7 @@ import { DBBrand } from './index';
 // @ts-ignore - vue can only find it with .ts as file ending
 import { DEFAULT_VIEWPORT, TESTING_VIEWPORTS } from '../../shared/constants.ts';
 
-const comp = (
-	<DBBrand
-		anchorChildren={true}
-		anchorRef="/"
-		anchorTitle="I am hover text"
-		anchorRelation="alternate"
-		hideDefaultAsset={true}>
-		<svg
-			class="db-logo"
-			xmlns="http://www.w3.org/2000/svg"
-			viewBox="0 0 40 28"
-			id="logo"
-			aria-hidden="true">
-			<rect x="2" y="2" width="36" height="24" fill="transparent"></rect>
-			<path
-				d="M27.2 7.53h-1.43v4.54h1.83c1.53.03 2.47-1.04 2.47-2.27 0-1.63-.96-2.32-2.87-2.27zm.6 7.8h-2.04v4.84h1.84c.7.01 3.07 0 3.07-2.37 0-1.01-.62-2.5-2.87-2.47zm-17.1-7.7h-.83v12.54h1.53c2.58.06 3.77-2.05 3.77-5.97 0-3.6-.41-6.74-4.47-6.57zm18.4-2.76c5.13.02 5.23 4.03 5.23 4.43a4.33 4.33 0 01-3.15 4.13v.14c3.26.79 3.75 3.14 3.75 4.43 0 4.76-4.68 5.02-6.71 5.03h-6.68V4.87h7.56zm-16.9 0c4.7.02 7.23 3.01 7.23 9.03 0 5.29-1.68 9.1-7.23 9.13H5.54V4.87h6.66zm23.7-1.94H4c-.63 0-1.04.5-1.06 1.05l-.01.12v19.7c0 .57.35 1.22.95 1.26l.12.01h31.9c.63 0 1.13-.6 1.16-1.14l.01-.13V4.1a1.2 1.2 0 00-1.17-1.17zm0-2.86c2.1 0 3.97 1.56 4.03 3.63v20.2a4 4 0 01-3.83 4.03H4A3.91 3.91 0 01.07 24.1V3.9A3.8 3.8 0 013.8.07h32.1z"
-				fill="#f01414"></path>
-		</svg>
-		Test
-	</DBBrand>
-);
+const comp = <DBBrand>Test</DBBrand>;
 const testBrand = () => {
 	test(`should contain text`, async ({ mount }) => {
 		const component = await mount(comp);

packages/components/src/components/brand/docs/Migration.md

@@ -0,0 +1,28 @@
+## General
+
+> **Note**
+> For a general installation or migration process check out this [documentation](https://www.npmjs.com/package/@db-ui/components).
+
+## DB UI Core ➡ DB UI Components
+
+### class
+
+| Before      | Status | After      | Description |
+| ----------- | :----: | ---------- | ----------- |
+| `cmp-brand` |   🔁   | `db-brand` |             |
+
+### properties
+
+> **Note**
+> We removed all old properties, because brand hasn't a wrapping anchor tag (`<a>`) anymore.
+> If you want to use a link around `db-brand`, do it by yourself.
+
+| Before           | Status | After | Description                                                                                           |
+| ---------------- | :----: | :---: | ----------------------------------------------------------------------------------------------------- |
+| `siteNameLink`   |   ❌   |  ❌   | see Note                                                                                              |
+| `alt`            |   ❌   |  ❌   | see Note                                                                                              |
+| `anchorRef`      |   ❌   |  ❌   | see Note                                                                                              |
+| `anchorTitle`    |   ❌   |  ❌   | see Note                                                                                              |
+| `anchorRelation` |   ❌   |  ❌   | see Note                                                                                              |
+| `src`            |   ❌   |  ❌   | see Note                                                                                              |
+| `hideLogo`       |   🆕   |  ❌   | If you want a custom image, you can hide the default one and pass anything into the `children`/`slot` |

packages/components/src/components/brand/model.ts

@@ -1,33 +1,11 @@
-import { GlobalProps, GlobalState, ImageProps } from '../../shared/model';
+import { GlobalProps, GlobalState } from '../../shared/model';
 
 export interface DBBrandDefaultProps {
-	/**
-	 * The anchorChildren attribute can be set to warp children inside the 'a' tag.
-	 */
-	anchorChildren?: boolean;
-	/**
-	 * The href attribute can be set to reload the current application, in general you would go to the base path of your app.
-	 */
-	anchorRef?: string;
-
-	/**
-	 * The title attribute can be set to show a hint while hovering over the brand.
-	 */
-	anchorTitle?: string;
-
-	/**
-	 * The rel attribute can be set to make a relationship to the current URL (https://developer.mozilla.org/en-US/docs/web/api/htmlanchorelement/rel).
-	 */
-	anchorRelation?: string;
-
-	/**
-	 * Hides the default image with an asset path to be able to add a custom image inside the children.
-	 * Use this if you know what you do.
-	 */
-	hideDefaultAsset?: boolean;
+	/* Disabled the default logo svg to pass in a custom img */
+	hideLogo?: boolean;
 }
 
-export type DBBrandProps = DBBrandDefaultProps & GlobalProps & ImageProps;
+export type DBBrandProps = DBBrandDefaultProps & GlobalProps;
 
 export interface DBBrandDefaultState {}
 

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

@@ -5,21 +5,14 @@
 }
 @if (!page) {
 	<db-page type="fixedHeaderFooter" [fadeIn]="true">
-		<db-header
-			header
-			[drawerOpen]="drawerOpen"
-			(onToggle)="toggleDrawer($event)"
-		>
-			<db-brand
-				brand
-				title="Angular Showcase"
-				src="./assets/db_logo.svg"
-				href="/angular-showcase"
-			>
-				Showcase
-			</db-brand>
-			<db-navigation *dbNavigation>
-				@for (item of navigationItems; track item.label) {
+	<db-header
+		header
+		[drawerOpen]="drawerOpen"
+		(onToggle)="toggleDrawer($event)"
+	>
+		<db-brand brand>Showcase</db-brand>
+		<db-navigation *dbNavigation>
+			@for (item of navigationItems; track item.label) {
 					<app-nav-item [navItem]="item"> </app-nav-item>
 				}
 			</db-navigation>

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

@@ -0,0 +1,20 @@
+<app-default-component
+	title="DBBrand"
+	[variants]="variants"
+	[exampleTemplate]="exampleTemplate"
+>
+	<ng-template
+		#exampleTemplate
+		let-exampleProps="exampleProps"
+		let-exampleName="exampleName"
+		let-exampleIndex="exampleIndex"
+		let-variantIndex="variantIndex"
+	>
+		<db-brand [hideLogo]="exampleProps.hideLogo">
+			@if (exampleProps.customLogo) {
+				<img src="./assets/images/db_logo.svg" alt="logo" />
+			}
+			{{ exampleName }}
+		</db-brand>
+	</ng-template>
+</app-default-component>

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

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import defaultComponentVariants from '../../../../../shared/brand.json';
+import { DefaultComponent } from '../default.component';
+import { DBBrand } from '../../../../../../output/angular/src/components/brand';
+
+@Component({
+	selector: 'app-button',
+	templateUrl: './brand.component.html',
+	imports: [DefaultComponent, DBBrand],
+	standalone: true
+})
+export class BrandComponent {
+	variants = defaultComponentVariants;
+}

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

@@ -24,6 +24,7 @@ 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';
+import { BrandComponent } from '../components/brand/brand.component';
 
 export type NavItem = {
 	path: string;
@@ -73,6 +74,11 @@ export const NAVIGATION_ITEMS: NavItem[] = [
 		label: '04 Data-Display',
 		subNavigation: getSortedNavigationItems([
 			{ path: '04/icon', label: 'Icon', component: IconComponent },
+			{
+				path: '04/brand',
+				label: 'Brand',
+				component: BrandComponent
+			},
 			{
 				path: '04/tooltip',
 				label: 'Tooltip',