KoliBri (logo) component: Remove animate prop (#5766)

packages/components/src/components.d.ts

@@ -1741,11 +1741,7 @@ export namespace Components {
     }
     interface KolKolibri {
         /**
-          * Gibt an, ob das Bild-Logo farblich animiert werden soll.
-         */
-        "_animate"?: boolean;
-        /**
-          * Gibt an, in welcher Farbe das Bild-Logo initial dargestellt werden soll.
+          * Defines the color of the logo and label.
          */
         "_color"?: Stringified<PropColor>;
         /**
@@ -4545,11 +4541,7 @@ declare namespace LocalJSX {
     }
     interface KolKolibri {
         /**
-          * Gibt an, ob das Bild-Logo farblich animiert werden soll.
-         */
-        "_animate"?: boolean;
-        /**
-          * Gibt an, in welcher Farbe das Bild-Logo initial dargestellt werden soll.
+          * Defines the color of the logo and label.
          */
         "_color"?: Stringified<PropColor>;
         /**

packages/components/src/components/kolibri/component.tsx

@@ -9,14 +9,6 @@ import { watchBoolean } from '../../utils/prop.validators';
 import { colorRgba } from '../badge/color-rgba';
 import { API, States } from './types';
 
-const max = 360;
-function degreeToRadians(degree: number): number {
-	return (degree * Math.PI) / 180;
-}
-function getColorNumber(degree: number): number {
-	return Math.round(((Math.cos(degreeToRadians(degree)) + 1) / 2) * 225);
-}
-
 @Component({
 	tag: 'kol-kolibri',
 	styleUrls: {
@@ -26,10 +18,7 @@ function getColorNumber(degree: number): number {
 })
 export class KolKolibri implements API {
 	public render(): JSX.Element {
-		const fillColor: string =
-			this.state._animate === true
-				? `rgb(${getColorNumber(this.state._color.red)},${getColorNumber(this.state._color.green)},${getColorNumber(this.state._color.blue)})`
-				: `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
+		const fillColor = `rgb(${this.state._color.red},${this.state._color.green},${this.state._color.blue})`;
 		return (
 			<Host>
 				<svg role="img" aria-label={translate('kol-kolibri-logo')} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" fill={fillColor}>
@@ -49,15 +38,8 @@ export class KolKolibri implements API {
 		);
 	}
 
-	private interval?: number;
-
-	/**
-	 * Gibt an, ob das Bild-Logo farblich animiert werden soll.
-	 */
-	@Prop() public _animate?: boolean = false;
-
 	/**
-	 * Gibt an, in welcher Farbe das Bild-Logo initial dargestellt werden soll.
+	 * Defines the color of the logo and label.
 	 */
 	@Prop() public _color?: Stringified<PropColor> = '#003c78';
 
@@ -67,7 +49,6 @@ export class KolKolibri implements API {
 	@Prop() public _labeled?: boolean;
 
 	@State() public state: States = {
-		_animate: false,
 		_color: {
 			red: 0,
 			green: 60,
@@ -76,11 +57,6 @@ export class KolKolibri implements API {
 		_labeled: true,
 	};
 
-	@Watch('_animate')
-	public validateAnimate(value?: boolean): void {
-		watchBoolean(this, '_animate', value);
-	}
-
 	private handleColorChange: Generic.Element.NextStateHooksCallback = (nextValue: unknown, nextState: Map<string, unknown>): void => {
 		if (typeof nextValue === 'string') {
 			const rgba = colorRgba(nextValue);
@@ -110,28 +86,7 @@ export class KolKolibri implements API {
 	}
 
 	public componentWillLoad(): void {
-		this.validateAnimate(this._animate);
 		this.validateColor(this._color);
 		this.validateLabeled(this._labeled);
 	}
-
-	public componentDidRender(): void {
-		clearInterval(this.interval);
-		if (this.state._animate) {
-			this.interval = setInterval(() => {
-				this.state = {
-					...this.state,
-					_color: {
-						red: (this.state._color.red + 1) % max,
-						green: (this.state._color.green + 2) % max,
-						blue: (this.state._color.blue + 3) % max,
-					},
-				};
-			}, 50) as unknown as number;
-		}
-	}
-
-	public disconnectedCallback(): void {
-		clearInterval(this.interval);
-	}
 }

packages/components/src/components/kolibri/readme.md

@@ -7,17 +7,12 @@ Diese Komponente implementiert das Logo von KoliBri.
 ### Code
 
 ```html
-<kol-kolibri />
-<kol-kolibri _animate />
-<kol-kolibri _animate _labeled="false" />
-<kol-kolibri _labeled="false" />
+<kol-kolibri /> <kol-kolibri _labeled="false" />
 ```
 
 ## Beispiele
 
 <kol-kolibri />
-<kol-kolibri _animate />
-<kol-kolibri _animate _labeled="false" /> 
 <kol-kolibri _labeled="false" />
 
 ## Barrierefreiheit

packages/components/src/components/kolibri/test/snapshot.spec.tsx

@@ -11,14 +11,6 @@ const DEFAULT_PATH_TAGS = `<path d="M353 322L213 304V434L353 322Z"></path>
 <path d="M391 286L565 272L421 252L391 286Z"></path>`;
 
 describe('Test KolKolibri', () => {
-	beforeAll(() => {
-		jest.useFakeTimers();
-	});
-
-	beforeEach(() => {
-		jest.clearAllTimers();
-	});
-
 	it('render default', async () => {
 		const page = await newSpecPage({
 			components: COMPONENTS,
@@ -36,23 +28,6 @@ describe('Test KolKolibri', () => {
 </kol-kolibri>`);
 	});
 
-	it('render animate', async () => {
-		const page = await newSpecPage({
-			components: COMPONENTS,
-			html: `<kol-kolibri _animate></kol-kolibri>`,
-		});
-		expect(page.root).toEqualHtml(`<kol-kolibri _animate="">
-  <mock:shadow-root>
-    <svg ${DEFAULT_HTML_SVG_PROPS} fill="rgb(225,169,56)">
-      ${DEFAULT_PATH_TAGS}
-      <text fill="rgb(225,169,56)" x="250" y="525">
-        KoliBri
-      </text>
-    </svg>
-  </mock:shadow-root>
-</kol-kolibri>`);
-	});
-
 	it('render not labeled', async () => {
 		const page = await newSpecPage({
 			components: COMPONENTS,

packages/components/src/components/kolibri/types.ts

@@ -5,13 +5,11 @@ import { PropColor } from '../../types/props/color';
 
 type RequiredProps = NonNullable<unknown>;
 type OptionalProps = {
-	animate: boolean;
 	color: Stringified<PropColor>;
 	labeled: boolean;
 };
 
 type RequiredStates = {
-	animate: boolean;
 	color: {
 		red: number;
 		green: number;

packages/samples/react/src/components/kolibri/basic.tsx

@@ -1,4 +1,18 @@
 import React, { FC } from 'react';
-import { KolKolibri } from '@public-ui/react';
+import { KolKolibri, KolHeading } from '@public-ui/react';
+import { SampleDescription } from '../SampleDescription';
 
-export const KolibriBasic: FC = () => <KolKolibri style={{ width: 300 }} />;
+export const KolibriBasic: FC = () => (
+	<>
+		<SampleDescription>
+			<p>Das KoliBri-Logo in verschiedenen Varianten</p>
+		</SampleDescription>
+
+		<KolHeading class="block" _level={3} _label="Regular" />
+		<KolKolibri class="block" style={{ width: 300 }} />
+		<KolHeading class="block" _level={3} _label="Ohne Label" />
+		<KolKolibri class="block" style={{ width: 300 }} _labeled={false} />
+		<KolHeading class="block" _level={3} _label="Individuelle Farbe" />
+		<KolKolibri class="block" style={{ width: 300 }} _color="#cc006e" />
+	</>
+);

packages/samples/react/src/components/kolibri/routes.ts

@@ -1,13 +1,9 @@
 import { Routes } from '../../shares/types';
 
 import { KolibriBasic } from './basic';
-import { KolibriAnimated } from './animated';
-import { KolibriNoLabel } from './no-label';
 
 export const KOLIBRI_ROUTES: Routes = {
 	kolibri: {
 		basic: KolibriBasic,
-		animated: KolibriAnimated,
-		'no-label': KolibriNoLabel,
 	},
 };

packages/tools/visual-tests/tests/sample-app.routes.js

@@ -187,21 +187,11 @@ ROUTES.set('input-range/basic', null);
 ROUTES.set('input-text/basic', null);
 ROUTES.set('input-text/blur', null);
 ROUTES.set('input-text/focus', null);
-ROUTES.set('kolibri/animated', {
-	axe: {
-		skipFailures: false,
-	},
-});
 ROUTES.set('kolibri/basic', {
 	axe: {
 		skipFailures: false,
 	},
 });
-ROUTES.set('kolibri/no-label', {
-	axe: {
-		skipFailures: false,
-	},
-});
 ROUTES.set('link-button/basic', {
 	axe: {
 		skipFailures: false,