bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-13 06:54:07 +00:00
Code Issues Releases Wiki Activity

add Item story

Browse Source
This commit is contained in:
William Martin
2024-10-30 13:33:22 -04:00
parent 844e1593c6
commit 540ad94a1c
1 changed files with 126 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
libs/components/src/item/item.stories.ts
View File

@@ -346,6 +346,132 @@ export const SingleActionWithBadge: Story = {
}),
};
export const CompactMode: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<div class="tw-bit-compact">
<bit-item-group aria-label="Multiple Action List">
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
<bit-item>
<button bit-item-content>
<i slot="start" class="bwi bwi-globe tw-text-2xl tw-text-muted" aria-hidden="true"></i>
Foo
<span slot="secondary">Bar</span>
</button>
<ng-container slot="end">
<bit-item-action>
<button type="button" bitBadge variant="primary">Auto-fill</button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-clone" size="small"></button>
</bit-item-action>
<bit-item-action>
<button type="button" bitIconButton="bwi-ellipsis-v" size="small"></button>
</bit-item-action>
</ng-container>
</bit-item>
</bit-item-group>
</div>
`,
}),
};
export const VirtualScrolling: Story = {
render: (_args) => ({
props: {