OZG-6305 OZG-6463 add office icon

alfa-client/apps/demo/src/app/app.component.ts

@@ -16,6 +16,7 @@ import {
   FileIconComponent,
   FileUploadButtonComponent,
   InstantSearchComponent,
+  OfficeIconComponent,
   RadioButtonCardComponent,
   SaveIconComponent,
   SendIconComponent,
@@ -54,6 +55,7 @@ import { CustomStepperComponent } from './components/cdk-demo/custom-stepper.com
     RadioButtonCardComponent,
     ReactiveFormsModule,
     InstantSearchComponent,
+    OfficeIconComponent,
     SaveIconComponent,
     SendIconComponent,
     StampIconComponent,

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit-container.component.html

 <ng-container *ngIf="organisationsEinheitResource; else searchButton">
   <div class="flex items-center gap-3">
-    <ods-search-icon class="flex-none" />
+    <ods-office-icon size="large" class="flex-none" />
     <alfa-organisations-einheit
       data-test-id="organisations-einheit-in-collaboration"
       [organisationsEinheitResource]="organisationsEinheitResource"

alfa-client/libs/collaboration/src/lib/collaboration.module.ts

@@ -9,6 +9,7 @@ import {
   CloseIconComponent,
   CollaborationIconComponent,
   InstantSearchComponent,
+  OfficeIconComponent,
   SaveIconComponent,
   SearchIconComponent,
 } from '@ods/system';
@@ -23,6 +24,7 @@ import { SearchOrganisationsEinheitFormComponent } from './search-organisations-
   imports: [
     CommonModule,
     ButtonComponent,
+    OfficeIconComponent,
     SaveIconComponent,
     CloseIconComponent,
     SearchIconComponent,

alfa-client/libs/design-system/src/index.ts

@@ -18,6 +18,7 @@ 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';
+export * from './lib/icons/office-icon/office-icon.component';
 export * from './lib/icons/save-icon/save-icon.component';
 export * from './lib/icons/search-icon/search-icon.component';
 export * from './lib/icons/send-icon/send-icon.component';

alfa-client/libs/design-system/src/lib/icons/office-icon/office-icon.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { OfficeIconComponent } from './office-icon.component';
+
+describe('SaveIconComponent', () => {
+  let component: OfficeIconComponent;
+  let fixture: ComponentFixture<OfficeIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [OfficeIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(OfficeIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

alfa-client/libs/design-system/src/lib/icons/office-icon/office-icon.component.ts

+import { NgClass } from '@angular/common';
+import { Component, Input } from '@angular/core';
+import { twMerge } from 'tailwind-merge';
+
+import { IconVariants, iconVariants } from '../iconVariants';
+
+@Component({
+  selector: 'ods-office-icon',
+  standalone: true,
+  imports: [NgClass],
+  template: `<svg
+    [ngClass]="twMerge(iconVariants({ size }), 'fill-black', class)"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M2 21V4.75L7 1L12 4.75V7H22V21H2ZM4 19H6V17H4V19ZM4 15H6V13H4V15ZM4 11H6V9H4V11ZM4 7H6V5H4V7ZM8 7H10V5H8V7ZM8 19H20V9H8V19ZM14 13V11H18V13H14ZM14 17V15H18V17H14ZM10 13V11H12V13H10ZM10 17V15H12V17H10Z"
+    />
+  </svg>`,
+})
+export class OfficeIconComponent {
+  @Input() size: IconVariants['size'] = 'medium';
+  @Input() class: string = undefined;
+
+  iconVariants = iconVariants;
+  twMerge = twMerge;
+}

alfa-client/libs/design-system/src/lib/icons/office-icon/office-icon.stories.ts

+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { OfficeIconComponent } from './office-icon.component';
+
+const meta: Meta<OfficeIconComponent> = {
+  title: 'Icons/Save icon',
+  component: OfficeIconComponent,
+  excludeStories: /.*Data$/,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<OfficeIconComponent>;
+
+export const Default: Story = {
+  args: { size: 'large' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['small', 'medium', 'large', 'extra-large', 'full'],
+      description: 'Size of icon. Property "full" means 100%',
+      table: {
+        defaultValue: { summary: 'medium' },
+      },
+    },
+  },
+};