diff --git a/alfa-client/libs/binary-file/src/lib/binary-file.module.ts b/alfa-client/libs/binary-file/src/lib/binary-file.module.ts index d71e5da65a00c37c2d0bee7059e42f8532a19836..89f78362805623629dbb65e5e9963789da21a337 100644 --- a/alfa-client/libs/binary-file/src/lib/binary-file.module.ts +++ b/alfa-client/libs/binary-file/src/lib/binary-file.module.ts @@ -28,6 +28,7 @@ import { NgModule } from '@angular/core'; import { DownloadButtonComponent } from '@ods/component'; import { AttachmentComponent, + AttachmentHeaderComponent, AttachmentWrapperComponent, CloseIconComponent, SpinnerIconComponent, @@ -50,6 +51,7 @@ import { VerticalBinaryFileListComponent } from './vertical-binary-file-list/ver UiModule, TechSharedModule, AttachmentComponent, + AttachmentHeaderComponent, AttachmentWrapperComponent, SpinnerIconComponent, CloseIconComponent, diff --git a/alfa-client/libs/binary-file/src/lib/vertical-binary-file-list/vertical-binary-file-list.component.html b/alfa-client/libs/binary-file/src/lib/vertical-binary-file-list/vertical-binary-file-list.component.html index 3a344450b8c2de26e6f652c88003b5df5cb89654..187ab55187039b6ca7ea2f9d6b1ab8e0cc456a4a 100644 --- a/alfa-client/libs/binary-file/src/lib/vertical-binary-file-list/vertical-binary-file-list.component.html +++ b/alfa-client/libs/binary-file/src/lib/vertical-binary-file-list/vertical-binary-file-list.component.html @@ -23,14 +23,19 @@ unter der Lizenz sind dem Lizenztext zu entnehmen. --> -<ozgcloud-spinner [stateResource]="binaryFileListStateResource"> +<ozgcloud-spinner + *ngIf="binaryFileListStateResource.resource" + [stateResource]="binaryFileListStateResource" +> <ods-attachment-wrapper [title]="title" data-test-id="file-list"> - <alfa-download-archive-file-button-container - *ngIf="archiveDownloadUri" - data-test-class="download-archive-file-button" - [downloadUri]="archiveDownloadUri" - action-buttons - ></alfa-download-archive-file-button-container> + <ods-attachment-header [title]="title"> + <alfa-download-archive-file-button-container + *ngIf="archiveDownloadUri" + data-test-class="download-archive-file-button" + [downloadUri]="archiveDownloadUri" + action-buttons + ></alfa-download-archive-file-button-container + ></ods-attachment-header> <ng-container *ngFor=" let binaryFileResource of binaryFileListStateResource.resource diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts index 7456205d902558317cf19c0cb5486f4baa841b39..57c220dc85cf06f66d1e23edd66bc7d9bff947ea 100644 --- a/alfa-client/libs/design-system/src/index.ts +++ b/alfa-client/libs/design-system/src/index.ts @@ -1,3 +1,4 @@ +export * from './lib/attachment-header/attachment-header.component'; export * from './lib/attachment-wrapper/attachment-wrapper.component'; export * from './lib/attachment/attachment.component'; export * from './lib/bescheid-status-text/bescheid-status-text.component'; diff --git a/alfa-client/libs/design-system/src/lib/attachment-header/attachment-header.component.spec.ts b/alfa-client/libs/design-system/src/lib/attachment-header/attachment-header.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..b1484d6418804db087a5418a8eb26a8e41114398 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/attachment-header/attachment-header.component.spec.ts @@ -0,0 +1,21 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { AttachmentHeaderComponent } from './attachment-header.component'; + +describe('AttachmentHeaderComponent', () => { + let component: AttachmentHeaderComponent; + let fixture: ComponentFixture<AttachmentHeaderComponent>; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [AttachmentHeaderComponent], + }).compileComponents(); + + fixture = TestBed.createComponent(AttachmentHeaderComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/alfa-client/libs/design-system/src/lib/attachment-header/attachment-header.component.ts b/alfa-client/libs/design-system/src/lib/attachment-header/attachment-header.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..627f3cce4a58003f64c278605ab2838d05560b92 --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/attachment-header/attachment-header.component.ts @@ -0,0 +1,15 @@ +import { CommonModule } from '@angular/common'; +import { Component, Input } from '@angular/core'; + +@Component({ + selector: 'ods-attachment-header', + standalone: true, + imports: [CommonModule], + template: `<div class="flex items-center justify-between px-3 py-2"> + <h4 class="text-sm font-medium text-text">{{ title }}</h4> + <ng-content select="[action-buttons]"></ng-content> + </div>`, +}) +export class AttachmentHeaderComponent { + @Input() title: string = ''; +} diff --git a/alfa-client/libs/design-system/src/lib/attachment-header/attachment-header.stories.ts b/alfa-client/libs/design-system/src/lib/attachment-header/attachment-header.stories.ts new file mode 100644 index 0000000000000000000000000000000000000000..33a3d93237c69b82a28b08efaf36cc92f5970c5e --- /dev/null +++ b/alfa-client/libs/design-system/src/lib/attachment-header/attachment-header.stories.ts @@ -0,0 +1,45 @@ +import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular'; + +import { DownloadButtonComponent } from '../../../../design-component/src/lib/download-button/download-button.component'; + +import { AttachmentComponent } from '../attachment/attachment.component'; +import { AttachmentHeaderComponent } from './attachment-header.component'; + +const meta: Meta<AttachmentHeaderComponent> = { + title: 'Attachment header', + component: AttachmentHeaderComponent, + parameters: { + docs: { + description: { + component: 'Header may contain title and/or buttons', + }, + }, + }, + decorators: [ + moduleMetadata({ + imports: [AttachmentHeaderComponent, AttachmentComponent, DownloadButtonComponent], + }), + ], + excludeStories: /.*Data$/, + tags: ['autodocs'], +}; + +export default meta; +type Story = StoryObj<AttachmentHeaderComponent>; + +export const Default: Story = { + args: { + title: 'Anhänge', + }, + argTypes: { + title: { + description: 'Title for group of files', + }, + }, + render: (args) => ({ + props: args, + template: `<ods-attachment-header ${argsToTemplate(args)}> + <ods-download-button action-buttons /> + </ods-attachment-header>`, + }), +}; diff --git a/alfa-client/libs/design-system/src/lib/attachment-wrapper/attachment-wrapper.component.ts b/alfa-client/libs/design-system/src/lib/attachment-wrapper/attachment-wrapper.component.ts index 43ef6d38616b9a2684acb776545103745f702ebc..863cc92dffee0d1f7a1e2fd58636f40a6a39f1b5 100644 --- a/alfa-client/libs/design-system/src/lib/attachment-wrapper/attachment-wrapper.component.ts +++ b/alfa-client/libs/design-system/src/lib/attachment-wrapper/attachment-wrapper.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from '@angular/common'; -import { Component, Input } from '@angular/core'; +import { Component } from '@angular/core'; @Component({ selector: 'ods-attachment-wrapper', @@ -8,12 +8,6 @@ import { Component, Input } from '@angular/core'; styles: [ ':host {@apply flex flex-col overflow-hidden rounded-md shadow shadow-grayborder border border-grayborder empty:hidden}', ], - template: `<div class="flex items-center justify-between px-3 py-2"> - <h4 *ngIf="title" class="text-sm font-medium text-text">{{ title }}</h4> - <ng-content select="[action-buttons]"></ng-content> - </div> - <ng-content></ng-content>`, + template: `<ng-content></ng-content>`, }) -export class AttachmentWrapperComponent { - @Input() title: string = ''; -} +export class AttachmentWrapperComponent {}