bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-20 18:23:31 +00:00
Code Issues Releases Wiki Activity

[CL-427] Add skeleton loading components to the CL (#16728)

Browse Source
This commit is contained in:
Vicki League
2025-10-16 09:36:16 -04:00
committed by GitHub
parent 96d40ae5c0
commit ba5c93fae2
14 changed files with 427 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
libs/components/src/skeleton/skeleton-group.stories.ts Normal file
View File

@@ -0,0 +1,73 @@
import { Meta, moduleMetadata, StoryObj } from "@storybook/angular";
import { SharedModule } from "../shared/shared.module";
import { SkeletonGroupComponent } from "./skeleton-group.component";
import { SkeletonTextComponent } from "./skeleton-text.component";
import { SkeletonComponent } from "./skeleton.component";
export default {
title: "Component Library/Skeleton/Skeleton Group",
component: SkeletonGroupComponent,
decorators: [
moduleMetadata({
imports: [SharedModule, SkeletonTextComponent, SkeletonComponent],
}),
],
} as Meta<SkeletonGroupComponent>;
type Story = StoryObj<SkeletonGroupComponent>;
export const Default: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<bit-skeleton-group>
<bit-skeleton class="tw-size-8" slot="start"></bit-skeleton>
<bit-skeleton-text [lines]="2" class="tw-w-1/2"></bit-skeleton-text>
<bit-skeleton-text [lines]="1" slot="end" class="tw-w-1/4"></bit-skeleton-text>
</bit-skeleton-group>
`,
}),
};
export const NoEndSlot: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<bit-skeleton-group>
<bit-skeleton class="tw-size-8" slot="start"></bit-skeleton>
<bit-skeleton-text [lines]="2" class="tw-w-1/2"></bit-skeleton-text>
</bit-skeleton-group>
`,
}),
};
export const NoStartSlot: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<bit-skeleton-group>
<bit-skeleton-text [lines]="2" class="tw-w-1/2"></bit-skeleton-text>
<bit-skeleton-text [lines]="1" slot="end" class="tw-w-1/4"></bit-skeleton-text>
</bit-skeleton-group>
`,
}),
};
export const CustomContent: Story = {
render: (args) => ({
props: args,
template: /*html*/ `
<bit-skeleton-group>
<bit-skeleton class="tw-size-12" slot="start" edgeShape="circle"></bit-skeleton>
<bit-skeleton-text [lines]="3" class="tw-w-full"></bit-skeleton-text>
<div slot="end" class="tw-flex tw-flex-row tw-gap-1">
<bit-skeleton class="tw-size-4" slot="start"></bit-skeleton>
<bit-skeleton class="tw-size-4" slot="start"></bit-skeleton>
<bit-skeleton class="tw-size-4" slot="start"></bit-skeleton>
</div>
</bit-skeleton-group>
`,
}),
};