From d8bc742caba75e10ef1b0682ac4ea6ff44993ba5 Mon Sep 17 00:00:00 2001
From: Alexander Reifschneider <alexander.reifschneider@mgm-tp.com>
Date: Fri, 25 Apr 2025 16:36:58 +0200
Subject: [PATCH] OZG-8129 replace button in paste text button
---
.../src/assets/paste-from-clipboard.svg | 5 ++++
.../src/lib/assets/paste_from_clipboard.svg | 4 ----
.../libs/ui/src/lib/icon/icon.model.ts | 1 -
.../ozgcloud-paste-text-button.component.html | 11 +++------
...gcloud-paste-text-button.component.spec.ts | 24 ++++++-------------
.../ozgcloud-paste-text-button.component.ts | 4 ++--
6 files changed, 17 insertions(+), 32 deletions(-)
create mode 100644 alfa-client/libs/design-system/src/assets/paste-from-clipboard.svg
delete mode 100644 alfa-client/libs/ui/src/lib/assets/paste_from_clipboard.svg
diff --git a/alfa-client/libs/design-system/src/assets/paste-from-clipboard.svg b/alfa-client/libs/design-system/src/assets/paste-from-clipboard.svg
new file mode 100644
index 0000000000..f56358b94f
--- /dev/null
+++ b/alfa-client/libs/design-system/src/assets/paste-from-clipboard.svg
@@ -0,0 +1,5 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+ <path
+ d="m5.63158 23 1.62105-1.5675L5.42895 19.7H12v-2.2H5.42895l1.82368-1.76-1.62105-1.54L1 18.6 5.63158 23ZM2.15789 12H4.3V5.4h2.2v3.3h12.1V5.4h2.2v15.4h-5.9053V23h5.7895c.6369 0 1.182-.2154 1.6355-.6462.4535-.4309.6803-.9488.6803-1.5538V5.4c0-.605-.2268-1.12292-.6803-1.55375-.4535-.43083-.9986-.64625-1.6355-.64625H15.85c-.2123-.64167-.6272-1.16875-1.2447-1.58125C13.9877 1.20625 13.3123 1 12.5789 1c-.7719 0-1.4618.20625-2.0697.61875-.60788.4125-1.01797.93958-1.23025 1.58125H4.47368c-.63684 0-1.18201.21542-1.63552.64625-.45351.43083-.68027.94875-.68027 1.55375V12ZM12.5789 5.4c-.328 0-.603-.10542-.825-.31625-.2219-.21083-.3328-.47208-.3328-.78375 0-.31167.1109-.57292.3328-.78375.222-.21083.497-.31625.825-.31625.3281 0 .6031.10542.825.31625.222.21083.3329.47208.3329.78375 0 .31167-.1109.57292-.3329.78375-.2219.21083-.4969.31625-.825.31625Z" />
+ <path d="M7 11h11v1H7v-1ZM10 14h8v1h-8v-1ZM15 17h3v1h-3v-1Z" />
+</svg>
\ No newline at end of file
diff --git a/alfa-client/libs/ui/src/lib/assets/paste_from_clipboard.svg b/alfa-client/libs/ui/src/lib/assets/paste_from_clipboard.svg
deleted file mode 100644
index 27073d47e4..0000000000
--- a/alfa-client/libs/ui/src/lib/assets/paste_from_clipboard.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
- <path d="m5.63158 23 1.62105-1.5675L5.42895 19.7H12v-2.2H5.42895l1.82368-1.76-1.62105-1.54L1 18.6 5.63158 23ZM2.15789 12H4.3V5.4h2.2v3.3h12.1V5.4h2.2v15.4h-5.9053V23h5.7895c.6369 0 1.182-.2154 1.6355-.6462.4535-.4309.6803-.9488.6803-1.5538V5.4c0-.605-.2268-1.12292-.6803-1.55375-.4535-.43083-.9986-.64625-1.6355-.64625H15.85c-.2123-.64167-.6272-1.16875-1.2447-1.58125C13.9877 1.20625 13.3123 1 12.5789 1c-.7719 0-1.4618.20625-2.0697.61875-.60788.4125-1.01797.93958-1.23025 1.58125H4.47368c-.63684 0-1.18201.21542-1.63552.64625-.45351.43083-.68027.94875-.68027 1.55375V12ZM12.5789 5.4c-.328 0-.603-.10542-.825-.31625-.2219-.21083-.3328-.47208-.3328-.78375 0-.31167.1109-.57292.3328-.78375.222-.21083.497-.31625.825-.31625.3281 0 .6031.10542.825.31625.222.21083.3329.47208.3329.78375 0 .31167-.1109.57292-.3329.78375-.2219.21083-.4969.31625-.825.31625Z"/>
- <path d="M7 11h11v1H7v-1ZM10 14h8v1h-8v-1ZM15 17h3v1h-3v-1Z"/>
-</svg>
\ No newline at end of file
diff --git a/alfa-client/libs/ui/src/lib/icon/icon.model.ts b/alfa-client/libs/ui/src/lib/icon/icon.model.ts
index c33174978b..f43d2916d5 100644
--- a/alfa-client/libs/ui/src/lib/icon/icon.model.ts
+++ b/alfa-client/libs/ui/src/lib/icon/icon.model.ts
@@ -26,5 +26,4 @@ export enum Icons {
LOGO = 'logo',
MAIL = 'mail',
PDF_EXPORT = 'pdf_export',
- PASTE_FROM_CLIPBOARD = 'paste_from_clipboard',
}
diff --git a/alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.html b/alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.html
index f6dd97a4e5..bd191c810a 100644
--- a/alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.html
+++ b/alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.html
@@ -24,12 +24,7 @@ unter der Lizenz sind dem Lizenztext zu entnehmen.
-->
@if (isPasteSupported) {
- <ozgcloud-icon-button-primary
- [tooltip]="tooltip"
- svgIcon="paste_from_clipboard"
- class="paste_icon"
- (clickEmitter)="onPaste()"
- data-test-id="paste_from_clipboard"
- >
- </ozgcloud-icon-button-primary>
+ <ods-button variant="ghost" size="fit" (clickEmitter)="onPaste()" data-test-id="paste-button" [tooltip]="tooltip">
+ <ods-icon icon name="paste-from-clipboard" />
+ </ods-button>
}
diff --git a/alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.spec.ts b/alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.spec.ts
index 918ec8d7c1..d2b7bc8b9e 100644
--- a/alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.spec.ts
+++ b/alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.spec.ts
@@ -22,13 +22,10 @@
* unter der Lizenz sind dem Lizenztext zu entnehmen.
*/
import { isClipboardReadSupported } from '@alfa-client/tech-shared';
-import { getElementFromFixture, mock } from '@alfa-client/test-utils';
-import { OzgcloudIconButtonPrimaryComponent } from '@alfa-client/ui';
+import { existsAsHtmlElement, mock, notExistsAsHtmlElement } from '@alfa-client/test-utils';
import { EventEmitter } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatIcon } from '@angular/material/icon';
-import { MatIconTestingModule } from '@angular/material/icon/testing';
-import { TooltipDirective } from '@ods/system';
+import { ButtonComponent, IconComponent, TooltipDirective } from '@ods/system';
import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
import { MockComponent, MockDirective } from 'ng-mocks';
import { OzgcloudPasteTextButtonComponent } from './ozgcloud-paste-text-button.component';
@@ -39,23 +36,19 @@ const isClipboardReadSupportedMock = isClipboardReadSupported as jest.Mock;
const clipboardContent = '1234';
const readTextMock = jest.fn().mockResolvedValue(clipboardContent);
Object.assign(navigator, { clipboard: { readText: readTextMock } });
+const pasteButtonLocator: string = getDataTestIdOf('paste-button');
describe('OzgcloudPasteTextButtonComponent', () => {
let component: OzgcloudPasteTextButtonComponent;
let fixture: ComponentFixture<OzgcloudPasteTextButtonComponent>;
- function getMatIconElement(): HTMLElement {
- return getElementFromFixture(fixture, getDataTestIdOf('paste_from_clipboard'));
- }
-
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [
- MatIconTestingModule,
OzgcloudPasteTextButtonComponent,
- MockComponent(MatIcon),
- MockComponent(OzgcloudIconButtonPrimaryComponent),
MockDirective(TooltipDirective),
+ MockComponent(ButtonComponent),
+ MockComponent(IconComponent),
],
}).compileComponents();
@@ -74,9 +67,7 @@ describe('OzgcloudPasteTextButtonComponent', () => {
});
it('should not render if paste not supported', () => {
- const matIcon = getMatIconElement();
-
- expect(matIcon).not.toBeInstanceOf(HTMLElement);
+ notExistsAsHtmlElement(fixture, pasteButtonLocator);
});
describe('ngOnInit', () => {
@@ -97,11 +88,10 @@ describe('OzgcloudPasteTextButtonComponent', () => {
it('should render if paste supported', () => {
isClipboardReadSupportedMock.mockReturnValue(true);
fixture.detectChanges();
- const matIcon = getMatIconElement();
component.ngOnInit();
- expect(matIcon).toBeInstanceOf(HTMLElement);
+ existsAsHtmlElement(fixture, pasteButtonLocator);
});
});
diff --git a/alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.ts b/alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.ts
index 3fa9c14b0b..9bf6e48d88 100644
--- a/alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.ts
+++ b/alfa-client/libs/ui/src/lib/ui/ozgcloud-paste-text-button/ozgcloud-paste-text-button.component.ts
@@ -23,14 +23,14 @@
*/
import { isClipboardReadSupported } from '@alfa-client/tech-shared';
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { OzgcloudIconButtonPrimaryComponent } from '../ozgcloud-button/ozgcloud-icon-button-primary/ozgcloud-icon-button-primary.component';
+import { ButtonComponent, IconComponent, TooltipDirective } from '@ods/system';
@Component({
selector: 'ozgcloud-paste-text-button',
templateUrl: './ozgcloud-paste-text-button.component.html',
styleUrls: ['./ozgcloud-paste-text-button.component.scss'],
standalone: true,
- imports: [OzgcloudIconButtonPrimaryComponent],
+ imports: [ButtonComponent, IconComponent, TooltipDirective],
})
export class OzgcloudPasteTextButtonComponent implements OnInit {
@Input() tooltip: string;
--
GitLab