feat(cibg): adopt the vendored CIBG Bestand-upload component
The upload suite now wraps the vendored CIBG file-upload classes instead of hand-rolling from tokens: - file-input becomes a .file-picker-drop-area with drag-and-drop + a real .btn-upload button and a visually-hidden, focusable <input>; renders an always-visible instruction (allowed types + max size) linked to the input via aria-describedby (pattern requirement). - The file list is a semantic ul.file-list; single-upload is an li[app-single-upload] .file-container (native <li> child) with .actions (retry/.icon-remove) + progress; document-chip renders the .file block (status glyph, .file-name link, .file-meta size/status). - Category validation moves ABOVE the block as .upload-validation > .feedback. - Instruction text uses the default (not subtle) foreground for WCAG AA contrast on the grey drop-area. DocumentUpload's public inputs/outputs are unchanged — both wizards keep working. GREEN: lint, tokens, 181 tests, build, 137 axe stories. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -6,16 +6,20 @@ const meta: Meta<FileInputComponent> = {
|
||||
component: FileInputComponent,
|
||||
render: (args) => ({
|
||||
props: args,
|
||||
template: `<app-file-input [inputId]="inputId" [accept]="accept" [multiple]="multiple" [disabled]="disabled" />`,
|
||||
template: `<app-file-input [inputId]="inputId" [accept]="accept" [maxSizeMb]="maxSizeMb" [multiple]="multiple" [disabled]="disabled" />`,
|
||||
}),
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<FileInputComponent>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: { inputId: 'diploma', accept: ['application/pdf'], multiple: false, disabled: false },
|
||||
args: { inputId: 'diploma', accept: ['application/pdf', 'image/jpeg'], maxSizeMb: 10, multiple: false, disabled: false },
|
||||
};
|
||||
|
||||
export const Multiple: Story = {
|
||||
args: { inputId: 'cv', accept: ['application/pdf'], maxSizeMb: 5, multiple: true, disabled: false },
|
||||
};
|
||||
|
||||
export const Disabled: Story = {
|
||||
args: { inputId: 'diploma-disabled', accept: ['application/pdf'], multiple: false, disabled: true },
|
||||
args: { inputId: 'diploma-disabled', accept: ['application/pdf'], maxSizeMb: 10, multiple: false, disabled: true },
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user