import { ScrollingModule } from "@angular/cdk/scrolling";
import { CommonModule } from "@angular/common";
import { RouterTestingModule } from "@angular/router/testing";
import { Meta, StoryObj, componentWrapperDecorator, moduleMetadata } from "@storybook/angular";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { A11yGridDirective } from "../a11y/a11y-grid.directive";
import { AvatarModule } from "../avatar";
import { BadgeModule } from "../badge";
import { IconButtonModule } from "../icon-button";
import { LayoutComponent } from "../layout";
import { TypographyModule } from "../typography";
import { I18nMockService } from "../utils/i18n-mock.service";
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,
LayoutComponent,
RouterTestingModule,
],
providers: [
{
provide: I18nService,
useFactory: () => {
return new I18nMockService({
toggleSideNavigation: "Toggle side navigation",
skipToContent: "Skip to content",
submenu: "submenu",
toggleCollapse: "toggle collapse",
});
},
},
],
}),
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!
`,
}),
};
const multipleActionListTemplate = /*html*/ `
`;
export const MultipleActionList: Story = {
render: (args) => ({
props: args,
template: multipleActionListTemplate,
}),
};
export const SingleActionList: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
Foobar
Foobar
Foobar
Foobar
Foobar
Foobar
`,
}),
};
export const SingleActionWithBadge: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
Foobar
Auto-fill
Helloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo!
Auto-fill
`,
}),
};
export const CompactMode: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
${multipleActionListTemplate}
`,
}),
};
export const VirtualScrolling: Story = {
render: (_args) => ({
props: {
data: Array.from(Array(100000).keys()),
},
template: /*html*/ `
`,
}),
};
export const WithoutBorderRadius: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
`,
}),
};