diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index c4fabf910d..6a73ae02b4 100644 --- a/packages/components/src/components.d.ts +++ b/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; /** @@ -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; /** diff --git a/packages/components/src/components/kolibri/component.tsx b/packages/components/src/components/kolibri/component.tsx index 91c77075be..0f82a536d2 100644 --- a/packages/components/src/components/kolibri/component.tsx +++ b/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 ( @@ -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 = '#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): 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); - } } diff --git a/packages/components/src/components/kolibri/readme.md b/packages/components/src/components/kolibri/readme.md index a1638b5fab..7c9654eea7 100644 --- a/packages/components/src/components/kolibri/readme.md +++ b/packages/components/src/components/kolibri/readme.md @@ -7,17 +7,12 @@ Diese Komponente implementiert das Logo von KoliBri. ### Code ```html - - - - + ``` ## Beispiele - - ## Barrierefreiheit diff --git a/packages/components/src/components/kolibri/test/snapshot.spec.tsx b/packages/components/src/components/kolibri/test/snapshot.spec.tsx index b9c07a4161..fbd78576b2 100644 --- a/packages/components/src/components/kolibri/test/snapshot.spec.tsx +++ b/packages/components/src/components/kolibri/test/snapshot.spec.tsx @@ -11,14 +11,6 @@ const DEFAULT_PATH_TAGS = ` `; 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', () => { `); }); - it('render animate', async () => { - const page = await newSpecPage({ - components: COMPONENTS, - html: ``, - }); - expect(page.root).toEqualHtml(` - - - ${DEFAULT_PATH_TAGS} - - KoliBri - - - -`); - }); - it('render not labeled', async () => { const page = await newSpecPage({ components: COMPONENTS, diff --git a/packages/components/src/components/kolibri/types.ts b/packages/components/src/components/kolibri/types.ts index 51cabd2cae..e2e56382b3 100644 --- a/packages/components/src/components/kolibri/types.ts +++ b/packages/components/src/components/kolibri/types.ts @@ -5,13 +5,11 @@ import { PropColor } from '../../types/props/color'; type RequiredProps = NonNullable; type OptionalProps = { - animate: boolean; color: Stringified; labeled: boolean; }; type RequiredStates = { - animate: boolean; color: { red: number; green: number; diff --git a/packages/samples/react/src/components/kolibri/animated.tsx b/packages/samples/react/src/components/kolibri/animated.tsx deleted file mode 100644 index f8e0dcd599..0000000000 --- a/packages/samples/react/src/components/kolibri/animated.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import React, { FC } from 'react'; -import { KolKolibri } from '@public-ui/react'; - -export const KolibriAnimated: FC = () => ; diff --git a/packages/samples/react/src/components/kolibri/basic.tsx b/packages/samples/react/src/components/kolibri/basic.tsx index baae2b72ef..625054a715 100644 --- a/packages/samples/react/src/components/kolibri/basic.tsx +++ b/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 = () => ; +export const KolibriBasic: FC = () => ( + <> + +

Das KoliBri-Logo in verschiedenen Varianten

+ + + + + + + + + +); diff --git a/packages/samples/react/src/components/kolibri/no-label.tsx b/packages/samples/react/src/components/kolibri/no-label.tsx deleted file mode 100644 index 292ac1a549..0000000000 --- a/packages/samples/react/src/components/kolibri/no-label.tsx +++ /dev/null @@ -1,4 +0,0 @@ -import React, { FC } from 'react'; -import { KolKolibri } from '@public-ui/react'; - -export const KolibriNoLabel: FC = () => ; diff --git a/packages/samples/react/src/components/kolibri/routes.ts b/packages/samples/react/src/components/kolibri/routes.ts index 951922346a..f6ef2b136d 100644 --- a/packages/samples/react/src/components/kolibri/routes.ts +++ b/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, }, }; diff --git a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-kolibri-basic-firefox-darwin.png b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-kolibri-basic-firefox-darwin.png index eda6f7af54..6772f4c880 100644 Binary files a/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-kolibri-basic-firefox-darwin.png and b/packages/themes/bmf/snapshots/theme-bmf/snapshot-for-kolibri-basic-firefox-darwin.png differ diff --git a/packages/themes/bzst/snapshots/theme-bzstv1/snapshot-for-kolibri-basic-firefox-darwin.png b/packages/themes/bzst/snapshots/theme-bzstv1/snapshot-for-kolibri-basic-firefox-darwin.png index eda6f7af54..e00f9f4856 100644 Binary files a/packages/themes/bzst/snapshots/theme-bzstv1/snapshot-for-kolibri-basic-firefox-darwin.png and b/packages/themes/bzst/snapshots/theme-bzstv1/snapshot-for-kolibri-basic-firefox-darwin.png differ diff --git a/packages/themes/default/snapshots/theme-default/snapshot-for-kolibri-basic-firefox-darwin.png b/packages/themes/default/snapshots/theme-default/snapshot-for-kolibri-basic-firefox-darwin.png index eda6f7af54..6772f4c880 100644 Binary files a/packages/themes/default/snapshots/theme-default/snapshot-for-kolibri-basic-firefox-darwin.png and b/packages/themes/default/snapshots/theme-default/snapshot-for-kolibri-basic-firefox-darwin.png differ diff --git a/packages/themes/ecl/snapshots/theme-ecl_ec/snapshot-for-kolibri-basic-firefox-darwin.png b/packages/themes/ecl/snapshots/theme-ecl_ec/snapshot-for-kolibri-basic-firefox-darwin.png index 3b5d7b889a..998867a3f1 100644 Binary files a/packages/themes/ecl/snapshots/theme-ecl_ec/snapshot-for-kolibri-basic-firefox-darwin.png and b/packages/themes/ecl/snapshots/theme-ecl_ec/snapshot-for-kolibri-basic-firefox-darwin.png differ diff --git a/packages/themes/ecl/snapshots/theme-ecl_eu/snapshot-for-kolibri-basic-firefox-darwin.png b/packages/themes/ecl/snapshots/theme-ecl_eu/snapshot-for-kolibri-basic-firefox-darwin.png index 3b5d7b889a..ec258627f5 100644 Binary files a/packages/themes/ecl/snapshots/theme-ecl_eu/snapshot-for-kolibri-basic-firefox-darwin.png and b/packages/themes/ecl/snapshots/theme-ecl_eu/snapshot-for-kolibri-basic-firefox-darwin.png differ diff --git a/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-kolibri-basic-firefox-darwin.png b/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-kolibri-basic-firefox-darwin.png index 3b5d7b889a..9e5f99d7e0 100644 Binary files a/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-kolibri-basic-firefox-darwin.png and b/packages/themes/itzbund/snapshots/theme-itzbund/snapshot-for-kolibri-basic-firefox-darwin.png differ diff --git a/packages/themes/mfm/snapshots/theme-mfm/snapshot-for-kolibri-basic-firefox-darwin.png b/packages/themes/mfm/snapshots/theme-mfm/snapshot-for-kolibri-basic-firefox-darwin.png index eda6f7af54..6772f4c880 100644 Binary files a/packages/themes/mfm/snapshots/theme-mfm/snapshot-for-kolibri-basic-firefox-darwin.png and b/packages/themes/mfm/snapshots/theme-mfm/snapshot-for-kolibri-basic-firefox-darwin.png differ diff --git a/packages/themes/zoll/snapshots/theme-mapz/snapshot-for-kolibri-basic-firefox-darwin.png b/packages/themes/zoll/snapshots/theme-mapz/snapshot-for-kolibri-basic-firefox-darwin.png index f8386c2fd0..c4777cfe6c 100644 Binary files a/packages/themes/zoll/snapshots/theme-mapz/snapshot-for-kolibri-basic-firefox-darwin.png and b/packages/themes/zoll/snapshots/theme-mapz/snapshot-for-kolibri-basic-firefox-darwin.png differ diff --git a/packages/themes/zoll/snapshots/theme-zollv2/snapshot-for-kolibri-basic-firefox-darwin.png b/packages/themes/zoll/snapshots/theme-zollv2/snapshot-for-kolibri-basic-firefox-darwin.png index f8386c2fd0..b53a0897c2 100644 Binary files a/packages/themes/zoll/snapshots/theme-zollv2/snapshot-for-kolibri-basic-firefox-darwin.png and b/packages/themes/zoll/snapshots/theme-zollv2/snapshot-for-kolibri-basic-firefox-darwin.png differ diff --git a/packages/themes/zoll/snapshots/theme-zollv3/snapshot-for-kolibri-basic-firefox-darwin.png b/packages/themes/zoll/snapshots/theme-zollv3/snapshot-for-kolibri-basic-firefox-darwin.png index f8386c2fd0..b53a0897c2 100644 Binary files a/packages/themes/zoll/snapshots/theme-zollv3/snapshot-for-kolibri-basic-firefox-darwin.png and b/packages/themes/zoll/snapshots/theme-zollv3/snapshot-for-kolibri-basic-firefox-darwin.png differ diff --git a/packages/tools/visual-tests/tests/sample-app.routes.js b/packages/tools/visual-tests/tests/sample-app.routes.js index 1cb84f4de2..6322bcab5d 100644 --- a/packages/tools/visual-tests/tests/sample-app.routes.js +++ b/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,