diff --git a/core-web/apps/dotcms-ui/src/app/view/components/dot-portlet-base/dot-portlet-base.stories.ts b/core-web/apps/dotcms-ui/src/app/view/components/dot-portlet-base/dot-portlet-base.stories.ts
index fa8164d4b6a5..ba2249d5bc36 100644
--- a/core-web/apps/dotcms-ui/src/app/view/components/dot-portlet-base/dot-portlet-base.stories.ts
+++ b/core-web/apps/dotcms-ui/src/app/view/components/dot-portlet-base/dot-portlet-base.stories.ts
@@ -1,5 +1,5 @@
/* eslint-disable no-console */
-import { moduleMetadata } from '@storybook/angular';
+import { moduleMetadata, Meta, StoryObj, componentWrapperDecorator } from '@storybook/angular';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -19,7 +19,7 @@ const MessageMocks = new MockDotMessageService({
actions: 'Actions'
});
-export default {
+const meta: Meta = {
title: 'DotCMS/Portlet',
component: DotPortletBaseComponent,
decorators: [
@@ -37,16 +37,12 @@ export default {
DotPortletBaseModule,
DotApiLinkComponent,
TabViewModule
- ]
+ ],
}),
- (storyFunc) => {
- const story = storyFunc();
-
- return {
- ...story,
- template: `
${story.template}
`
- };
- }
+ componentWrapperDecorator(
+ (story) =>
+ `${story}
`
+ )
],
parameters: {
docs: {
@@ -58,6 +54,9 @@ export default {
}
}
};
+export default meta;
+
+type Story = StoryObj;
const portletContent = (text = `Hello, I'm the portlet content`) => {
return `
@@ -72,19 +71,21 @@ const NoActionsTemplate = `
${portletContent()}
`;
-export const NoActions = () => ({
- props: {
+export const NoActions: Story = {
+ parameters: {
+ docs: {
+ source: {
+ code: NoActionsTemplate
+ }
+ }
+ },
+ args: {
title: 'This is the portlet title'
},
- template: NoActionsTemplate
-});
-
-NoActions.parameters = {
- docs: {
- source: {
- code: NoActionsTemplate
- }
- }
+ render: (args) => ({
+ props: args,
+ template: NoActionsTemplate
+ })
};
const BasicActionsTemplate = `
@@ -93,8 +94,15 @@ const BasicActionsTemplate = `
${portletContent()}
`;
-export const BasicActions = () => ({
- props: {
+export const BasicActions: Story = {
+ parameters: {
+ docs: {
+ source: {
+ code: BasicActionsTemplate
+ }
+ }
+ },
+ args: {
title: 'Adding Save and Cancel Button',
portletActions: {
primary: [
@@ -110,25 +118,29 @@ export const BasicActions = () => ({
}
}
},
- template: BasicActionsTemplate
-});
-
-BasicActions.parameters = {
- docs: {
- source: {
- code: BasicActionsTemplate
- }
- }
+ render: (args) => ({
+ props: args,
+ template: NoActionsTemplate
+ })
};
+
const MultipleActionsTemplate = `
${portletContent()}
`;
-export const MultipleActions = () => ({
- props: {
+
+export const MultipleActions: Story = {
+ parameters: {
+ docs: {
+ source: {
+ code: MultipleActionsTemplate
+ }
+ }
+ },
+ args: {
title: 'Multiple Actions',
portletActions: {
primary: [
@@ -156,15 +168,10 @@ export const MultipleActions = () => ({
}
}
},
- template: MultipleActionsTemplate
-});
-
-MultipleActions.parameters = {
- docs: {
- source: {
- code: MultipleActionsTemplate
- }
- }
+ render: (args) => ({
+ props: args,
+ template: MultipleActionsTemplate
+ })
};
const ExtraActionsTemplate = `
@@ -182,8 +189,15 @@ const ExtraActionsTemplate = `
${portletContent()}
`;
-export const ExtraActions = () => ({
- props: {
+export const ExtraActions: Story = {
+ parameters: {
+ docs: {
+ source: {
+ code: ExtraActionsTemplate
+ }
+ }
+ },
+ args: {
title: 'Extra Actions',
portletActions: {
primary: [
@@ -199,15 +213,10 @@ export const ExtraActions = () => ({
}
}
},
- template: ExtraActionsTemplate
-});
-
-ExtraActions.parameters = {
- docs: {
- source: {
- code: ExtraActionsTemplate
- }
- }
+ render: (args) => ({
+ props: args,
+ template: ExtraActionsTemplate
+ })
};
const WithTabsTemplate = `
@@ -220,8 +229,15 @@ const WithTabsTemplate = `
`;
-export const WithTabs = () => ({
- props: {
+export const WithTabs: Story = {
+ parameters: {
+ docs: {
+ source: {
+ code: WithTabsTemplate
+ }
+ }
+ },
+ args: {
title: 'Tabbed Portlet',
portletActions: {
primary: [
@@ -237,13 +253,8 @@ export const WithTabs = () => ({
}
}
},
- template: WithTabsTemplate
-});
-
-WithTabs.parameters = {
- docs: {
- source: {
- code: WithTabsTemplate
- }
- }
-};
+ render: (args) => ({
+ props: args,
+ template: WithTabsTemplate
+ })
+};
\ No newline at end of file
diff --git a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.stories.ts b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.stories.ts
index eb2391545b70..f231632dc0cb 100644
--- a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.stories.ts
+++ b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.stories.ts
@@ -1,10 +1,12 @@
-import { moduleMetadata, Story } from '@storybook/angular';
+import { moduleMetadata, StoryObj, Meta } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { SuggestionsListItemComponent } from './suggestions-list-item.component';
-export default {
+type Args = SuggestionsListItemComponent & { item: Record };
+
+const meta: Meta = {
title: 'Library/Block Editor/Components/Suggestions List Item',
decorators: [
moduleMetadata({
@@ -12,38 +14,41 @@ export default {
imports: [CommonModule]
})
],
- component: SuggestionsListItemComponent
+ component: SuggestionsListItemComponent,
+ render: (args) => ({
+ props: args,
+ template: `
+
+ `
+ })
};
+export default meta;
-export const Icon: Story = (args) => ({
- props: {
- ...args,
- item: iconItem
- },
- template: `
-
- `
-});
-
-export const Image: Story = (args) => ({
- props: {
- ...args,
- item: imageItem
- },
- template: `
-
- `
-});
+type Story = StoryObj;
-// Test Data
const iconItem: Record = {
title: 'An Icon',
type: 'icon',
icon: '+'
};
+export const Icon: Story = {
+ args: {
+ item: iconItem
+ },
+};
+
const imageItem: Record = {
title: 'Landscape',
type: 'image',
url: 'https://images.unsplash.com/photo-1508162942367-e4dd4cd67513?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1100&q=80'
};
+
+export const Image: Story = {
+ args: {
+ item: imageItem
+ },
+};
+
+
+
diff --git a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/suggestion-list.component.stories.ts b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/suggestion-list.component.stories.ts
index 3cf8fd0250e9..0b321890f7d6 100644
--- a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/suggestion-list.component.stories.ts
+++ b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/suggestion-list.component.stories.ts
@@ -1,11 +1,11 @@
-import { moduleMetadata, Story } from '@storybook/angular';
+import { moduleMetadata, StoryObj, Meta } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { SuggestionsListItemComponent } from './components/suggestions-list-item/suggestions-list-item.component';
import { SuggestionListComponent } from './suggestion-list.component';
-export default {
+const meta: Meta = {
title: 'Library/Block Editor/Components/Suggestion List',
decorators: [
moduleMetadata({
@@ -13,16 +13,20 @@ export default {
imports: [CommonModule]
})
],
- component: SuggestionListComponent
+ component: SuggestionListComponent,
+ render: (args) => ({
+ props: args,
+ template: `
+
+ Option 1
+ Option 2
+ Option 3
+
+ `
+ })
};
+export default meta;
-export const ManyItems: Story = (args) => ({
- props: args,
- template: `
-
- Option 1
- Option 2
- Option 3
-
- `
-});
+type Story = StoryObj;
+
+export const ManyItems: Story = {};
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.stories.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.stories.ts
index 8fd0cef4a589..0cd4ff547646 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.stories.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-preview/dot-binary-field-preview.component.stories.ts
@@ -1,5 +1,5 @@
import { action } from '@storybook/addon-actions';
-import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { moduleMetadata, StoryObj, Meta } from '@storybook/angular';
import { CommonModule } from '@angular/common';
import { HttpClientModule } from '@angular/common/http';
@@ -68,7 +68,14 @@ const previewFile = {