docs: add separate stories for different button configs in totp

supertokens · Nov 15, 2023 · 989f59e · 989f59e
1 parent caf708c
commit 989f59e
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 1 deletion.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -130,7 +130,8 @@
         "size": "size-limit",
         "check-circular-dependencies": "npx madge --circular --extensions js ./lib/build/",
         "storybook": "TEST_MODE=testing storybook dev -p 6006",
-        "build-storybook": "TEST_MODE=testing storybook build"
+        "build-storybook": "TEST_MODE=testing storybook build",
+        "chromatic": "npx chromatic --project-token=chpt_ca6c16f6b3fac1f"
     },
     "size-limit": [
         {

diff --git a/stories/totpMFA.stories.tsx b/stories/totpMFA.stories.tsx
@@ -121,6 +121,26 @@ const meta: Meta<typeof Page> = {
     },
 };
 
+const loadSessionContextWithSingleNextOption = async () => ({
+    session: {
+        ...defaultSessionContext,
+        accessTokenPayload: {
+            ...defaultSessionContext.accessTokenPayload,
+            "st-mfa": { c: {}, n: ["totp"] },
+        },
+    },
+});
+
+const loadSessionContextWithMultipleNextOptions = async () => ({
+    session: {
+        ...defaultSessionContext,
+        accessTokenPayload: {
+            ...defaultSessionContext.accessTokenPayload,
+            "st-mfa": { c: {}, n: ["totp", "otp-phone", "otp-email"] },
+        },
+    },
+});
+
 export default meta;
 type Story = StoryObj<typeof Page>;
 
@@ -134,6 +154,30 @@ export const DeviceSetup: Story = {
     },
 };
 
+export const DeviceSetupWithSingleNextOption: Story = {
+    args: {
+        featureState: {
+            ...defaultState,
+            loaded: true,
+            deviceInfo: exampleDeviceInfo,
+            showBackButton: false,
+        },
+    },
+    loaders: [loadSessionContextWithSingleNextOption],
+};
+
+export const DeviceSetupMultipleNextOptions: Story = {
+    args: {
+        featureState: {
+            ...defaultState,
+            loaded: true,
+            deviceInfo: exampleDeviceInfo,
+            showBackButton: false,
+        },
+    },
+    loaders: [loadSessionContextWithMultipleNextOptions],
+};
+
 export const DeviceSetupAccessDenied: Story = {
     args: {
         featureState: {
@@ -190,6 +234,29 @@ export const Verification: Story = {
     },
 };
 
+export const VerificationWithSingleNextOption: Story = {
+    args: {
+        featureState: {
+            ...defaultState,
+            loaded: true,
+            deviceInfo: undefined,
+            showBackButton: false,
+        },
+    },
+    loaders: [loadSessionContextWithSingleNextOption],
+};
+
+export const VerificationWithMultipleNextOption: Story = {
+    args: {
+        featureState: {
+            ...defaultState,
+            loaded: true,
+            deviceInfo: undefined,
+            showBackButton: false,
+        },
+    },
+    loaders: [loadSessionContextWithMultipleNextOptions],
+};
 export const VerificationEmptySubmit: Story = {
     args: {
         featureState: {