[SM-453] user onboarding component (#4707)

* wip onboarding component * fix button type * remove dismiss button * add completion logic * update styles; add download cli section; add click logic; add loading spinner * update i18n * update icons; rearrange items; fix import item logic * add complete i18n * fix reactivity * move visibility logic into presentational component * add button type * apply code reviews * add loading spinner to page * onboarding dismissal should persist when switching orgs * add workaround for inconsistent icon size * fix full storybook * apply code review; update stories
2025-12-23 19:53:43 +00:00 · 2023-02-21 11:25:41 -05:00
parent 7ce4579214
commit 581f69256d
11 changed files with 408 additions and 68 deletions
--- a/bitwarden_license/bit-web/src/app/secrets-manager/overview/onboarding.stories.ts
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/overview/onboarding.stories.ts
@@ -0,0 +1,92 @@
+import { RouterModule } from "@angular/router";
+import { Meta, Story, 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.forRoot(
+          [
+            {
+              path: "",
+              component: OnboardingComponent,
+            },
+          ],
+          { useHash: true }
+        ),
+        LinkModule,
+        IconModule,
+        ProgressModule,
+        PreloadedEnglishI18nModule,
+      ],
+      declarations: [OnboardingTaskComponent],
+    }),
+  ],
+} 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]="'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-task
+        [title]="'createProject' | i18n"
+        icon="bwi-collection"
+        [completed]="createProject"
+      ></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)),
+};