bitwarden-estensione-browser/bitwarden_license/bit-web/src/app/secrets-manager/overview/onboarding.stories.ts

85 lines
2.5 KiB
TypeScript

import { importProvidersFrom } from "@angular/core";
import { RouterModule } from "@angular/router";
import { Meta, Story, applicationConfig, moduleMetadata } from "@storybook/angular";
import { delay, of, startWith } from "rxjs";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { LinkModule, IconModule, ProgressModule } from "@bitwarden/components";
import { PreloadedEnglishI18nModule } from "@bitwarden/web-vault/app/tests/preloaded-english-i18n.module";
import { OnboardingTaskComponent } from "./onboarding-task.component";
import { OnboardingComponent } from "./onboarding.component";
export default {
title: "Web/Onboarding",
component: OnboardingComponent,
decorators: [
moduleMetadata({
imports: [JslibModule, RouterModule, LinkModule, IconModule, ProgressModule],
declarations: [OnboardingTaskComponent],
}),
applicationConfig({
providers: [
importProvidersFrom(RouterModule.forRoot([], { useHash: true })),
importProvidersFrom(PreloadedEnglishI18nModule),
],
}),
],
} as Meta;
const Template: Story = (args) => ({
props: {
createServiceAccount: false,
importSecrets$: of(false),
createSecret: false,
createProject: false,
...args,
},
template: `
<sm-onboarding title="Get started">
<sm-onboarding-task
[title]="'createServiceAccount' | i18n"
icon="bwi-cli"
[completed]="createServiceAccount"
>
<span>
{{ "downloadThe" | i18n }} <a bitLink routerLink="">{{ "smCLI" | i18n }}</a>
</span>
</sm-onboarding-task>
<sm-onboarding-task
[title]="'createProject' | i18n"
icon="bwi-collection"
[completed]="createProject"
></sm-onboarding-task>
<sm-onboarding-task
[title]="'importSecrets' | i18n"
icon="bwi-download"
[completed]="importSecrets$ | async"
></sm-onboarding-task>
<sm-onboarding-task
[title]="'createSecret' | i18n"
icon="bwi-key"
[completed]="createSecret"
></sm-onboarding-task>
</sm-onboarding>
`,
});
export const Empty = Template.bind({});
export const Partial = Template.bind({});
Partial.args = {
...Template.args,
createServiceAccount: true,
createProject: true,
};
export const Full = Template.bind({});
Full.args = {
...Template.args,
createServiceAccount: true,
createProject: true,
createSecret: true,
importSecrets$: of(true).pipe(delay(0), startWith(false)),
};