import { ScrollingModule } from "@angular/cdk/scrolling";
import { CommonModule } from "@angular/common";
import { Meta, StoryObj, componentWrapperDecorator, moduleMetadata } from "@storybook/angular";
import { A11yGridDirective } from "../a11y/a11y-grid.directive";
import { AvatarModule } from "../avatar";
import { BadgeModule } from "../badge";
import { IconButtonModule } from "../icon-button";
import { TypographyModule } from "../typography";
import { ItemActionComponent } from "./item-action.component";
import { ItemContentComponent } from "./item-content.component";
import { ItemGroupComponent } from "./item-group.component";
import { ItemComponent } from "./item.component";
export default {
title: "Component Library/Item",
component: ItemComponent,
decorators: [
moduleMetadata({
imports: [
CommonModule,
ItemGroupComponent,
AvatarModule,
IconButtonModule,
BadgeModule,
TypographyModule,
ItemActionComponent,
ItemContentComponent,
A11yGridDirective,
ScrollingModule,
],
}),
componentWrapperDecorator((story) => `${story}
`),
],
} as Meta;
type Story = StoryObj;
export const Default: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
`,
}),
};
export const ContentSlots: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
`,
}),
};
export const ContentTypes: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
Hi, I am a link.
I'm just static :(
`,
}),
};
export const TextOverflow: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo!
Worlddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd!
`,
}),
};
export const MultipleActionList: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
`,
}),
};
export const SingleActionList: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
Foobar
Foobar
Foobar
Foobar
Foobar
Foobar
`,
}),
};
export const VirtualScrolling: Story = {
render: (_args) => ({
props: {
data: Array.from(Array(100000).keys()),
},
template: /*html*/ `
`,
}),
};