diff --git a/alfa-client/apps/demo/src/app/app.component.ts b/alfa-client/apps/demo/src/app/app.component.ts index 5e26d7aa7ffcf45c1908da08fed80ccd1ea71f81..fbd58a87093ed57b19c83b1e1c78151e75ca1b66 100644 --- a/alfa-client/apps/demo/src/app/app.component.ts +++ b/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, diff --git a/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit-container.component.html b/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit-container.component.html index 66d554560ddfc5b1b8331c115917dc6851c7493c..36cee6fb596565233bad6c63435fe246bd75fe06 100644 --- a/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit-container.component.html +++ b/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit-container.component.html @@ -1,6 +1,6 @@ <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" diff --git a/alfa-client/libs/collaboration/src/lib/collaboration.module.ts b/alfa-client/libs/collaboration/src/lib/collaboration.module.ts index 30c3dd7621efe1914a8c33947050334a7bf75621..bbe069e5b79e331041e43cbb62ed661f085e2d72 100644 --- a/alfa-client/libs/collaboration/src/lib/collaboration.module.ts +++ b/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, diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts index f70af207f2b3cacf15ecef89b3728dd830f6bc64..0c83b3d1ba9df2ab88f88227a9197f681970ca18 100644 --- a/alfa-client/libs/design-system/src/index.ts +++ b/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'; diff --git a/alfa-client/libs/design-system/src/lib/icons/office-icon/office-icon.component.spec.ts b/alfa-client/libs/design-system/src/lib/icons/office-icon/office-icon.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..b41f00f7375d9ef6362471bda4734fa271f18ead --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/office-icon/office-icon.component.spec.ts @@ -0,0 +1,21 @@ +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(); + }); +}); diff --git a/alfa-client/libs/design-system/src/lib/icons/office-icon/office-icon.component.ts b/alfa-client/libs/design-system/src/lib/icons/office-icon/office-icon.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..25bdbb57d5011b3135a55be56cae8121c1611485 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/office-icon/office-icon.component.ts @@ -0,0 +1,28 @@ +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; +} diff --git a/alfa-client/libs/design-system/src/lib/icons/office-icon/office-icon.stories.ts b/alfa-client/libs/design-system/src/lib/icons/office-icon/office-icon.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..8a54d90c40add3636c0f41c9748ab529f09fc253 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/icons/office-icon/office-icon.stories.ts @@ -0,0 +1,27 @@ +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' }, + }, + }, + }, +};