diff --git a/alfa-client/libs/design-system/.storybook/preview.ts b/alfa-client/libs/design-system/.storybook/preview.ts
index d57171a4c3eea38e3c946daa2bbc42124a3cde87..3c1f85a5675655fcfc60d365ed14751832b4a9a3 100644
--- a/alfa-client/libs/design-system/.storybook/preview.ts
+++ b/alfa-client/libs/design-system/.storybook/preview.ts
@@ -21,13 +21,21 @@
* Die sprachspezifischen Genehmigungen und Beschränkungen
* unter der Lizenz sind dem Lizenztext zu entnehmen.
*/
-import { Preview } from '@storybook/angular';
+import { provideHttpClient } from '@angular/common/http';
+import { provideZoneChangeDetection } from '@angular/core';
+import { applicationConfig, Preview } from '@storybook/angular';
+import { provideAngularSvgIcon } from 'angular-svg-icon';
const preview: Preview = {
globalTypes: {
darkMode: { defaultValue: false },
},
+ decorators: [
+ applicationConfig({
+ providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideHttpClient(), provideAngularSvgIcon()],
+ }),
+ ],
- tags: ['autodocs']
+ tags: ['autodocs'],
};
export default preview;
diff --git a/alfa-client/libs/design-system/project.json b/alfa-client/libs/design-system/project.json
index bc681e80f5d762322adf47a62dba25464c0a7a0d..d5d0f6b7252ba57792da4fe1b9babdba50897a01 100644
--- a/alfa-client/libs/design-system/project.json
+++ b/alfa-client/libs/design-system/project.json
@@ -25,7 +25,14 @@
"configDir": "libs/design-system/.storybook",
"browserTarget": "design-system:build-storybook",
"compodoc": false,
- "styles": ["libs/design-system/.storybook/styles.scss"]
+ "styles": ["libs/design-system/.storybook/styles.scss"],
+ "assets": [
+ {
+ "input": "libs/design-system/src/assets",
+ "glob": "**/*",
+ "output": "assets/icons"
+ }
+ ]
},
"configurations": {
"ci": {
@@ -41,7 +48,14 @@
"configDir": "libs/design-system/.storybook",
"browserTarget": "design-system:build-storybook",
"compodoc": false,
- "styles": ["libs/design-system/.storybook/styles.scss"]
+ "styles": ["libs/design-system/.storybook/styles.scss"],
+ "assets": [
+ {
+ "input": "libs/design-system/src/assets",
+ "glob": "**/*",
+ "output": "assets/icons"
+ }
+ ]
},
"configurations": {
"ci": {
@@ -58,9 +72,7 @@
"metadata": {
"images": ["docker.ozg-sh.de/storybook"],
"load": true,
- "tags": [
- "build-latest"
- ]
+ "tags": ["build-latest"]
}
}
}
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
index 6ab4a39444a60e22fa59c6350f5e4d1583fa7106..99c277f893f236b63b6858a1915a39dc16715df1 100644
--- 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
@@ -24,6 +24,7 @@
import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
import { AttachmentComponent } from '../attachment/attachment.component';
+import { IconComponent } from '../icon/icon.component';
import { AttachmentHeaderComponent } from './attachment-header.component';
const meta: Meta<AttachmentHeaderComponent> = {
@@ -38,7 +39,7 @@ const meta: Meta<AttachmentHeaderComponent> = {
},
decorators: [
moduleMetadata({
- imports: [AttachmentHeaderComponent, AttachmentComponent],
+ imports: [AttachmentHeaderComponent, AttachmentComponent, IconComponent],
}),
],
excludeStories: /.*Data$/,
@@ -61,8 +62,7 @@ export const Default: Story = {
props: args,
template: `<ods-attachment-header ${argsToTemplate(args)}>
<button action-buttons>
- //TODO OZG-7707
- <ods-save-icon size="small" class="fill-text" />
+ <ods-icon name="save" size="small" fill="text" />
</button>
</ods-attachment-header>`,
}),
diff --git a/alfa-client/libs/design-system/src/lib/attachment-wrapper/attachment-wrapper.stories.ts b/alfa-client/libs/design-system/src/lib/attachment-wrapper/attachment-wrapper.stories.ts
index 4ea7a26b7956c2a1d0ca00a389e1748221d891a5..96ca28e29ee7e8859a845d566178f456f9531a6d 100644
--- a/alfa-client/libs/design-system/src/lib/attachment-wrapper/attachment-wrapper.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/attachment-wrapper/attachment-wrapper.stories.ts
@@ -25,6 +25,7 @@ import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
import { AttachmentHeaderComponent } from '../attachment-header/attachment-header.component';
import { AttachmentComponent } from '../attachment/attachment.component';
+import { IconComponent } from '../icon/icon.component';
import { AttachmentWrapperComponent } from './attachment-wrapper.component';
const meta: Meta<AttachmentWrapperComponent> = {
@@ -39,7 +40,7 @@ const meta: Meta<AttachmentWrapperComponent> = {
},
decorators: [
moduleMetadata({
- imports: [AttachmentWrapperComponent, AttachmentComponent, AttachmentHeaderComponent],
+ imports: [AttachmentWrapperComponent, AttachmentComponent, AttachmentHeaderComponent, IconComponent],
}),
],
excludeStories: /.*Data$/,
@@ -54,8 +55,7 @@ export const Default: Story = {
template: `<ods-attachment-wrapper>
<ods-attachment-header title="Anhänge">
<button action-buttons>
- //TODO OZG-7707
- <ods-save-icon size="small" class="fill-text" />
+ <ods-icon name="save" size="small" fill="text" />
</button>
</ods-attachment-header>
<ods-attachment caption="Attachment" description="200 kB" fileType="pdf"></ods-attachment>
diff --git a/alfa-client/libs/design-system/src/lib/button-card/button-card.stories.ts b/alfa-client/libs/design-system/src/lib/button-card/button-card.stories.ts
index 86908c6adceb4ff9f3120a8880a4451eb6221442..f741322f7f4ca7529f52f5ace8a27929d800735a 100644
--- a/alfa-client/libs/design-system/src/lib/button-card/button-card.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/button-card/button-card.stories.ts
@@ -23,6 +23,7 @@
*/
import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { IconComponent } from '../icon/icon.component';
import { ButtonCardComponent } from './button-card.component';
const meta: Meta<ButtonCardComponent> = {
@@ -37,7 +38,7 @@ const meta: Meta<ButtonCardComponent> = {
},
decorators: [
moduleMetadata({
- imports: [ButtonCardComponent],
+ imports: [ButtonCardComponent, IconComponent],
}),
],
excludeStories: /.*Data$/,
@@ -60,8 +61,7 @@ export const Default: Story = {
render: (args: ButtonCardComponent) => ({
props: args,
template: `<ods-button-card ${argsToTemplate(args)} class="w-72">
- //TODO OZG-7707
- <ods-bescheid-generate-icon icon fileType="auto"></ods-bescheid-generate-icon>
+ <ods-icon icon name="bescheid-generate" fill="pdf" size="extra-large" />
</ods-button-card>`,
}),
};
diff --git a/alfa-client/libs/design-system/src/lib/button/button.stories.ts b/alfa-client/libs/design-system/src/lib/button/button.stories.ts
index fa8a838ccf850cc094f5b32a2bdfa08abbddf71e..45acb55a32a841382d3ed5ab201a7ea917ccfe25 100644
--- a/alfa-client/libs/design-system/src/lib/button/button.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/button/button.stories.ts
@@ -23,6 +23,7 @@
*/
import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { IconComponent } from '../icon/icon.component';
import { ButtonComponent } from './button.component';
const meta: Meta<ButtonComponent> = {
@@ -30,7 +31,7 @@ const meta: Meta<ButtonComponent> = {
component: ButtonComponent,
decorators: [
moduleMetadata({
- imports: [ButtonComponent],
+ imports: [ButtonComponent, IconComponent],
}),
],
excludeStories: /.*Data$/,
@@ -80,8 +81,7 @@ export const PrimaryWithIcon: Story = {
render: (args) => ({
props: args,
template: `<ods-button ${argsToTemplate(args)}>
- //TODO OZG-7707
- <ods-save-icon icon size="small" class="fill-whitetext" />
+ <ods-icon icon name="save" size="small" fill="whitetext" />
</ods-button>`,
}),
};
@@ -94,7 +94,7 @@ export const SecondaryWithIcon: Story = {
render: (args) => ({
props: args,
template: `<ods-button ${argsToTemplate(args)}>
- <ods-save-icon icon size="small" />
+ <ods-icon icon name="save" size="small" />
</ods-button>`,
}),
};
@@ -107,7 +107,7 @@ export const SecondaryIconOnly: Story = {
render: (args) => ({
props: args,
template: `<ods-button ${argsToTemplate(args)}>
- <ods-save-icon icon size="small" />
+ <ods-icon icon name="save" size="small" />
</ods-button>`,
}),
};
@@ -134,7 +134,7 @@ export const GhostIcon: Story = {
render: (args) => ({
props: args,
template: `<ods-button ${argsToTemplate(args)}>
- <ods-save-icon icon size='medium' />
+ <ods-icon icon name="save" />
</ods-button>`,
}),
};
@@ -148,7 +148,7 @@ export const GhostIconDestructive: Story = {
render: (args) => ({
props: args,
template: `<ods-button ${argsToTemplate(args)}>
- <ods-save-icon icon size='medium' class="fill-destructive" />
+ <ods-icon icon name="save" fill="destructive" />
</ods-button>`,
}),
};
@@ -162,7 +162,7 @@ export const GhostLoadingIcon: Story = {
render: (args) => ({
props: args,
template: `<ods-button ${argsToTemplate(args)}>
- <ods-save-icon icon size='medium' />
+ <ods-icon icon name="save" />
</ods-button>`,
}),
};
diff --git a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.stories.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.stories.ts
index 0f0a475073d758e8ebc9063bf7727540c8708ddd..5c81f238c6c862110789d4642f846727db6e2120 100644
--- a/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.stories.ts
@@ -23,6 +23,7 @@
*/
import { argsToTemplate, componentWrapperDecorator, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { IconComponent } from '../../icon/icon.component';
import { DropdownMenuButtonItemComponent } from '../dropdown-menu-button-item/dropdown-menu-button-item.component';
import { DropdownMenuItemComponent } from '../dropdown-menu-item/dropdown-menu-item.component';
import { DropdownMenuTextItemComponent } from '../dropdown-menu-text-item/dropdown-menu-text-item.component';
@@ -33,7 +34,13 @@ const meta: Meta<DropdownMenuComponent> = {
component: DropdownMenuComponent,
decorators: [
moduleMetadata({
- imports: [DropdownMenuComponent, DropdownMenuItemComponent, DropdownMenuButtonItemComponent, DropdownMenuTextItemComponent],
+ imports: [
+ DropdownMenuComponent,
+ DropdownMenuItemComponent,
+ DropdownMenuButtonItemComponent,
+ DropdownMenuTextItemComponent,
+ IconComponent,
+ ],
}),
componentWrapperDecorator((story) => `<div class="flex justify-center mb-32">${story}</div>`),
],
@@ -60,8 +67,7 @@ export const Button: Story = {
render: (args) => ({
props: args,
template: `<ods-dropdown-menu ${argsToTemplate(args)}>
- //TODO OZG-7707
- <ods-user-icon button-content />
+ <ods-icon button-content name="user" size="extra-large" fill="neutral" />
<ods-dropdown-menu-button-item caption="Lorem" />
<ods-dropdown-menu-button-item caption="Ipsum" />
<ods-dropdown-menu-button-item caption="Dolor" />
@@ -86,11 +92,10 @@ export const ButtonWithIcon: Story = {
template: `<ods-dropdown-menu ${argsToTemplate(args)}>
<p button-content>Trigger menu</p>
<ods-dropdown-menu-button-item caption="Lorem">
- //TODO OZG-7707
- <ods-save-icon icon size="small" />
+ <ods-icon icon name="save" size="small" />
</ods-dropdown-menu-button-item>
<ods-dropdown-menu-button-item caption="Lorem ipsum dolor sit amet">
- <ods-save-icon icon size="small" />
+ <ods-icon icon name="save" size="small" />
</ods-dropdown-menu-button-item>
</ods-dropdown-menu>`,
}),
@@ -104,10 +109,10 @@ export const StructuredContent: Story = {
<ods-dropdown-menu-text-item title="Item 1" description="The quick brown fox jumps over the lazy dog">
</ods-dropdown-menu-text-item>
<ods-dropdown-menu-text-item title="Item 2" description="The quick brown fox jumps over the lazy dog">
- <ods-save-icon icon size="large" />
+ <ods-icon icon name="save" size="large" />
</ods-dropdown-menu-text-item>
<ods-dropdown-menu-text-item title="Item 3" description="The quick brown fox jumps over the lazy dog">
- <ods-save-icon icon size="large" />
+ <ods-icon icon name="save" size="large" />
<button additionalContent class="border">Button</button>
</ods-dropdown-menu-text-item>
</ods-dropdown-menu>`,
@@ -120,7 +125,9 @@ export const AnyContent: Story = {
template: `<ods-dropdown-menu ${argsToTemplate(args)}>
<p button-content>Trigger menu</p>
<ods-dropdown-menu-item class="border-t">Item 1</ods-dropdown-menu-item>
- <ods-dropdown-menu-item class="border-t border-b"><ods-save-icon size="small" /> Text <ods-save-icon size="large" /></ods-dropdown-menu-item>
+ <ods-dropdown-menu-item class="border-t border-b">
+ <ods-icon icon name="save" size="small" /> Text <ods-icon icon name="save" size="large" />
+ </ods-dropdown-menu-item>
</ods-dropdown-menu>`,
}),
};
diff --git a/alfa-client/libs/design-system/src/lib/form/file-upload-button/file-upload-button.stories.ts b/alfa-client/libs/design-system/src/lib/form/file-upload-button/file-upload-button.stories.ts
index 5dd83fb819a2702ecad896a7131b2147ae2aa29b..b4ca47e18d7c5775623c02098fc8a849642d48dd 100644
--- a/alfa-client/libs/design-system/src/lib/form/file-upload-button/file-upload-button.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/form/file-upload-button/file-upload-button.stories.ts
@@ -24,7 +24,7 @@
import { CommonModule } from '@angular/common';
import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { AttachmentIconComponent } from '../../icons/attachment-icon/attachment-icon.component';
+import { IconComponent } from '../../icon/icon.component';
import { SpinnerIconComponent } from '../../icons/spinner-icon/spinner-icon.component';
import { FileUploadButtonComponent } from './file-upload-button.component';
@@ -33,7 +33,7 @@ const meta: Meta<FileUploadButtonComponent> = {
component: FileUploadButtonComponent,
decorators: [
moduleMetadata({
- imports: [CommonModule, FileUploadButtonComponent, AttachmentIconComponent, SpinnerIconComponent],
+ imports: [CommonModule, FileUploadButtonComponent, SpinnerIconComponent, IconComponent],
}),
],
excludeStories: /.*Data$/,
@@ -51,8 +51,7 @@ export const Upload: Story = {
render: (args: FileUploadButtonComponent) => ({
props: args,
template: `<ods-file-upload-button ${argsToTemplate(args)}>
- // TODO OZG-7707
- <ods-attachment-icon icon></ods-attachment-icon>
+ <ods-icon icon name="attachment" />
<ods-spinner-icon spinner size="medium"></ods-spinner-icon>
<p text>Anhang hochladen</p>
</ods-file-upload-button>`,
diff --git a/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.stories.ts b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.stories.ts
index c198e906ad669ba0fd2aa3737b185ed54f159129..7d60189700568a9c5549420430195bc55b44782b 100644
--- a/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/form/radio-button-card/radio-button-card.stories.ts
@@ -25,6 +25,7 @@ import { CommonModule } from '@angular/common';
import { FormGroupDirective } from '@angular/forms';
import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { IconComponent } from '../../icon/icon.component';
import { RadioButtonCardComponent } from './radio-button-card.component';
const meta: Meta<RadioButtonCardComponent> = {
@@ -32,7 +33,7 @@ const meta: Meta<RadioButtonCardComponent> = {
component: RadioButtonCardComponent,
decorators: [
moduleMetadata({
- imports: [CommonModule, RadioButtonCardComponent],
+ imports: [CommonModule, RadioButtonCardComponent, IconComponent],
providers: [FormGroupDirective],
}),
],
@@ -57,8 +58,7 @@ export const Default: Story = {
<ods-radio-button-card
${argsToTemplate(args)}
>
- //TODO OZG-7707
- <ods-stamp-icon />
+ <ods-icon name="stamp" fill="bewilligt" />
</ods-radio-button-card>
<ods-radio-button-card
label="abgelehnt"
@@ -66,8 +66,7 @@ export const Default: Story = {
value="abgelehnt"
variant="bescheid_abgelehnt"
>
- //TODO OZG-7707
- <ods-close-icon class="fill-abgelehnt" size="large" />
+ <ods-icon name="close" fill="abgelehnt" size="large" />
</ods-radio-button-card>
</div>`,
}),
@@ -92,20 +91,18 @@ export const Message: Story = {
name="nachrichtOrManual"
variant="bescheid_save"
[fullWidthText]="true"
- >
- //TODO OZG-7707
- <ods-send-icon></ods-send-icon
- ></ods-radio-button-card>
+ >
+ <ods-icon name="send" />
+ </ods-radio-button-card>
<ods-radio-button-card
label="Nur speichern"
value="MANUAL"
name="nachrichtOrManual"
variant="bescheid_save"
[fullWidthText]="true"
- >
- //TODO OZG-7707
- <ods-save-icon></ods-save-icon
- ></ods-radio-button-card>
+ >
+ <ods-icon name="save" />
+ </ods-radio-button-card>
</div>`,
}),
};
diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
index 835fe41dfa94a32686e8ec09d8ac0818f06d65c1..0c4b0f5f3ff4b8828cbfd90ad946d212782926c1 100644
--- a/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
+++ b/alfa-client/libs/design-system/src/lib/icon/icon.component.ts
@@ -46,6 +46,7 @@ const iconVariants = cva('', {
neutral: 'fill-neutral-500 dark:fill-neutral-400',
bewilligt: 'fill-bewilligt',
abgelehnt: 'fill-abgelehnt',
+ destructive: 'fill-destructive',
},
},
});
diff --git a/alfa-client/libs/design-system/src/lib/icon/icon.stories.ts b/alfa-client/libs/design-system/src/lib/icon/icon.stories.ts
index 6f92ea55f26a052607f3858f7bc957449d4782e4..9dca7ffa6b29759768a9f714bce77f411d2069b3 100644
--- a/alfa-client/libs/design-system/src/lib/icon/icon.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/icon/icon.stories.ts
@@ -23,23 +23,114 @@
*/
import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { CommonModule } from '@angular/common';
import { IconComponent } from './icon.component';
const meta: Meta<IconComponent> = {
title: 'Icon',
+ parameters: {
+ docs: {
+ description: {
+ component: 'Generic icon component',
+ },
+ },
+ },
component: IconComponent,
decorators: [
moduleMetadata({
- imports: [IconComponent],
+ imports: [IconComponent, CommonModule],
}),
],
excludeStories: /.*Data$/,
tags: ['autodocs'],
};
+const ICONS_LIST: string[] = [
+ 'accessibility',
+ 'account-circle',
+ 'admin-logo',
+ 'archive',
+ 'arrow-back',
+ 'attachment',
+ 'bescheid-generate',
+ 'bescheid-upload',
+ 'check-circle',
+ 'check',
+ 'close',
+ 'delete-vorgang-finally',
+ 'delete',
+ 'discard-vorgang',
+ 'edit',
+ 'error',
+ 'exclamation',
+ 'external-unit',
+ 'forward-vorgang',
+ 'help',
+ 'info',
+ 'logout',
+ 'mailbox',
+ 'more',
+ 'office',
+ 'open-link',
+ 'orga-unit',
+ 'ozg-logo',
+ 'person',
+ 'plus',
+ 'public-administration',
+ 'request-vorgang-deletion',
+ 'save',
+ 'search',
+ 'send',
+ 'settings',
+ 'stamp',
+ 'statistic',
+ 'undo-request-vorgang-deletion',
+ 'undo',
+ 'update',
+ 'user',
+ 'users',
+];
+const stringifiedIcons: string = JSON.stringify(ICONS_LIST);
+
export default meta;
type Story = StoryObj<IconComponent>;
export const Default: Story = {
- args: {},
+ args: {
+ name: 'mailbox',
+ size: 'extra-large',
+ fill: 'primary',
+ class: '',
+ },
+ argTypes: {
+ name: { description: 'Name of the icon' },
+ size: {
+ description: 'Size of the icon. "Full" stands for 100%',
+ control: 'select',
+ options: ['small', 'medium', 'large', 'extra-large', 'xxl', 'full'],
+ table: { defaultValue: { summary: 'medium' } },
+ },
+ fill: {
+ description: 'Fill color of the icon',
+ control: 'select',
+ options: ['primary', 'text', 'whitetext', 'neutral', 'error', 'pdf', 'bewilligt', 'abgelehnt'],
+ table: { defaultValue: { summary: 'primary' } },
+ },
+ class: { description: 'Additional (tailwind) classes for the icon' },
+ },
+};
+
+export const AllIcons: Story = {
+ render: () => {
+ return {
+ template: `<div class="flex gap-6 w-full flex-wrap justify-around">
+ @for (icon of ${stringifiedIcons}; track $index) {
+ <div class="flex flex-col items-center">
+ <ods-icon [name]="icon" size="extra-large" />
+ <p class="text-pretty">{{ icon }}</p>
+ </div>
+ }
+ </div>`,
+ };
+ },
};
diff --git a/alfa-client/libs/design-system/src/lib/link/link.stories.ts b/alfa-client/libs/design-system/src/lib/link/link.stories.ts
index f4cad5258e5bc811593066f13a2fa7b844dbcd58..ebf0cb95701c759ff76fa44f4bae8697b61dff7c 100644
--- a/alfa-client/libs/design-system/src/lib/link/link.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/link/link.stories.ts
@@ -1,6 +1,6 @@
import { argsToTemplate, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-import { AccessibilityIconComponent } from '../icons/accessibility-icon/accessibility-icon.component';
+import { IconComponent } from '../icon/icon.component';
import { LinkComponent } from './link.component';
const meta: Meta<LinkComponent> = {
@@ -8,7 +8,7 @@ const meta: Meta<LinkComponent> = {
component: LinkComponent,
decorators: [
moduleMetadata({
- imports: [LinkComponent, AccessibilityIconComponent],
+ imports: [LinkComponent, IconComponent],
}),
],
excludeStories: /.*Data$/,
@@ -30,7 +30,7 @@ export const Default: Story = {
},
render: (args) => ({
props: args,
- template: `<ods-link ${argsToTemplate(args)}>
+ template: `<ods-link ${argsToTemplate(args)} class="w-fit">
Link with text
</ods-link>`,
}),
@@ -43,8 +43,8 @@ export const WithIcon: Story = {
},
render: (args) => ({
props: args,
- template: `<ods-link ${argsToTemplate(args)}>
- <ods-accessibility-icon size="large" />
+ template: `<ods-link ${argsToTemplate(args)} class="w-fit">
+ <ods-icon name="accessibility" size="large" />
</ods-link>`,
}),
};
diff --git a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
index 00bdcbaf4c9c016b71970e5ef880c514e0a40712..20911e3aa601b25c0b8014d5b92e6d4d54f00b76 100644
--- a/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/navbar/navbar/navbar.stories.ts
@@ -25,6 +25,7 @@ import { APP_BASE_HREF } from '@angular/common';
import { importProvidersFrom } from '@angular/core';
import { RouterModule } from '@angular/router';
import { applicationConfig, moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import { IconComponent } from '../../icon/icon.component';
import { NavItemComponent } from '../nav-item/nav-item.component';
import { NavbarComponent } from './navbar.component';
@@ -38,7 +39,7 @@ const meta: Meta<NavbarComponent> = {
providers: [importProvidersFrom(RouterModule.forRoot([]))],
}),
moduleMetadata({
- imports: [NavItemComponent],
+ imports: [NavItemComponent, IconComponent],
providers: [
{
provide: APP_BASE_HREF,
@@ -56,11 +57,10 @@ export const Default: Story = {
args: {},
render: () => ({
template: `<ods-navbar>
- //TODO OZG-7077
- <ods-nav-item caption="First link" path="/"><ods-office-icon icon /></ods-nav-item>
- <ods-nav-item caption="Second link" path="/second"><ods-office-icon icon /></ods-nav-item>
+ <ods-nav-item caption="First link" path="/"><ods-icon icon name="office" /></ods-nav-item>
+ <ods-nav-item caption="Second link" path="/second"><ods-icon icon name="office" /></ods-nav-item>
<hr />
- <ods-nav-item caption="Third link" path="/third"><ods-office-icon icon /></ods-nav-item>
+ <ods-nav-item caption="Third link" path="/third"><ods-icon icon name="office" /></ods-nav-item>
</ods-navbar>`,
}),
};