diff --git a/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang-container.component.html b/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang-container.component.html
index 03d11d5c710f87ba333b3f0205b4e6a110b036d0..96a01f7a4706cb57c9cb6d9fddbe7a93e3af87b7 100644
--- a/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang-container.component.html
+++ b/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-in-vorgang-container.component.html
@@ -5,7 +5,7 @@
data-test-id="anfrage-erstellen-button"
(clickEmitter)="showAnfrageFormular()"
>
- <ods-save-icon icon class="fill-text"></ods-save-icon>
+ <ods-collaboration-icon icon />
</ods-button>
</ng-template>
diff --git a/alfa-client/libs/collaboration/src/lib/collaboration.module.ts b/alfa-client/libs/collaboration/src/lib/collaboration.module.ts
index 2847a5dd26eba7521f52d011549fb7b361caa550..a73ec83dde3bf2b9dd7da59e4d98adf876ccc31b 100644
--- a/alfa-client/libs/collaboration/src/lib/collaboration.module.ts
+++ b/alfa-client/libs/collaboration/src/lib/collaboration.module.ts
@@ -1,7 +1,12 @@
import { CollaborationSharedModule } from '@alfa-client/collaboration-shared';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
-import { ButtonComponent, CloseIconComponent, SaveIconComponent } from '@ods/system';
+import {
+ ButtonComponent,
+ CloseIconComponent,
+ CollaborationIconComponent,
+ SaveIconComponent,
+} from '@ods/system';
import { CollaborationInVorgangContainerComponent } from './collaboration-in-vorgang-container/collaboration-in-vorgang-container.component';
import { ZustaendigeStelleContainerComponent } from './collaboration-in-vorgang-container/zustaendige-stelle-container/zustaendige-stelle-container.component';
@@ -12,6 +17,7 @@ import { ZustaendigeStelleContainerComponent } from './collaboration-in-vorgang-
SaveIconComponent,
CloseIconComponent,
CollaborationSharedModule,
+ CollaborationIconComponent,
],
declarations: [CollaborationInVorgangContainerComponent, ZustaendigeStelleContainerComponent],
exports: [CollaborationInVorgangContainerComponent],
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 57c220dc85cf06f66d1e23edd66bc7d9bff947ea..5934b94acda30b1a9db2264244086f3d11bdcdbf 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -14,6 +14,7 @@ export * from './lib/icons/attachment-icon/attachment-icon.component';
export * from './lib/icons/bescheid-generate-icon/bescheid-generate-icon.component';
export * from './lib/icons/bescheid-upload-icon/bescheid-upload-icon.component';
export * from './lib/icons/close-icon/close-icon.component';
+export * from './lib/icons/collaboration-icon/collaboration-icon.component';
export * from './lib/icons/exclamation-icon/exclamation-icon.component';
export * from './lib/icons/file-icon/file-icon.component';
export * from './lib/icons/iconVariants';
diff --git a/alfa-client/libs/design-system/src/lib/button/button.component.ts b/alfa-client/libs/design-system/src/lib/button/button.component.ts
index 58ba7ec0d96c8c0eb0516c9fbc367b885d686837..277dbfbf830d140408f411526c2e84f33748e379 100644
--- a/alfa-client/libs/design-system/src/lib/button/button.component.ts
+++ b/alfa-client/libs/design-system/src/lib/button/button.component.ts
@@ -6,7 +6,10 @@ import { IconVariants } from '../icons/iconVariants';
import { SpinnerIconComponent } from '../icons/spinner-icon/spinner-icon.component';
export const buttonVariants = cva(
- 'flex cursor-pointer items-center gap-4 rounded-md font-medium disabled:cursor-wait text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
+ [
+ 'flex items-center gap-4 rounded-md disabled:cursor-wait text-sm font-medium box-border',
+ 'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus',
+ ],
{
variants: {
variant: {
diff --git a/alfa-client/libs/design-system/src/lib/icons/collaboration-icon/collaboration-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/collaboration-icon/collaboration-icon.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c1a2136a653c2b9dfc52bc039fb0aa1d48ce0733
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/collaboration-icon/collaboration-icon.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CollaborationIconComponent } from './collaboration-icon.component';
+
+describe('CollaborationIconComponent', () => {
+ let component: CollaborationIconComponent;
+ let fixture: ComponentFixture<CollaborationIconComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [CollaborationIconComponent],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(CollaborationIconComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/design-system/src/lib/icons/collaboration-icon/collaboration-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/collaboration-icon/collaboration-icon.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8565574eac373499fcedaea5b514e7f616b344e1
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/collaboration-icon/collaboration-icon.component.ts
@@ -0,0 +1,53 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+import { IconVariants, iconVariants } from '../iconVariants';
+
+@Component({
+ selector: 'ods-collaboration-icon',
+ standalone: true,
+ imports: [CommonModule],
+ template: `<svg
+ viewBox="0 0 24 24"
+ [ngClass]="[twMerge(iconVariants({ size }), 'stroke-primary', class)]"
+ aria-hidden="true"
+ fill="inherit"
+ xmlns="http://www.w3.org/2000/svg"
+ >
+ <path
+ d="M16 21V19C16 17.9391 15.5786 16.9217 14.8284 16.1716C14.0783 15.4214 13.0609 15 12 15H6C4.93913 15 3.92172 15.4214 3.17157 16.1716C2.42143 16.9217 2 17.9391 2 19V21"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ fill="none"
+ />
+ <path
+ d="M9 11C11.2091 11 13 9.20914 13 7C13 4.79086 11.2091 3 9 3C6.79086 3 5 4.79086 5 7C5 9.20914 6.79086 11 9 11Z"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ fill="none"
+ />
+ <path
+ d="M22 20.9999V18.9999C21.9993 18.1136 21.7044 17.2527 21.1614 16.5522C20.6184 15.8517 19.8581 15.3515 19 15.1299"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ fill="none"
+ />
+ <path
+ d="M16 3.12988C16.8604 3.35018 17.623 3.85058 18.1676 4.55219C18.7122 5.2538 19.0078 6.11671 19.0078 7.00488C19.0078 7.89305 18.7122 8.75596 18.1676 9.45757C17.623 10.1592 16.8604 10.6596 16 10.8799"
+ stroke-width="2"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ fill="none"
+ />
+ </svg>`,
+})
+export class CollaborationIconComponent {
+ @Input() size: IconVariants['size'] = 'medium';
+ @Input() class: string = undefined;
+
+ iconVariants = iconVariants;
+ twMerge = twMerge;
+}
diff --git a/alfa-client/libs/design-system/src/lib/icons/collaboration-icon/collaboration-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/collaboration-icon/collaboration-icon.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..dbc1440939f920bb66062062c12ac343a347ddce
--- /dev/null
+++ b/alfa-client/libs/design-system/src/lib/icons/collaboration-icon/collaboration-icon.stories.ts
@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { CollaborationIconComponent } from './collaboration-icon.component';
+
+const meta: Meta<CollaborationIconComponent> = {
+ title: 'Icons/Collaboration icon',
+ component: CollaborationIconComponent,
+ excludeStories: /.*Data$/,
+ tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<CollaborationIconComponent>;
+
+export const Default: Story = {
+ args: { size: 'medium' },
+ argTypes: {
+ size: {
+ control: 'select',
+ options: ['small', 'medium', 'large', 'extra-large', 'full'],
+ description: 'Size of icon. Property "full" means 100%',
+ table: {
+ defaultValue: { summary: 'medium' },
+ },
+ },
+ },
+};