Merge pull request code-dot-org#24848 from code-dot-org/delete-teacher-acct-story

Add storybook stories for delete account dialog

Author: nkiruka

apps/src/lib/ui/accounts/DeleteAccountDialog.story.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import DeleteAccountDialog from './DeleteAccountDialog';
 import {action} from '@storybook/addon-actions';
+import {getCheckboxes} from './DeleteAccountHelpers';
 
 const PASSWORD = 'MY_PASSWORD';
 const DELETE_VERIFICATION = 'DELETE MY ACCOUNT';
@@ -35,16 +36,57 @@ export default storybook => {
         )
       },
       {
-        name: 'Delete Teacher Account',
-        description: 'Warning message for teacher account deletion',
+        name: 'Delete Teacher Account - without students',
+        description: 'Warning message for teacher account deletion.',
+        story: () => (
+          <DeleteAccountDialog
+            {...DEFAULT_PROPS}
+            isTeacher={true}
+            warnAboutDeletingStudents={false}
+          />
+        )
+      },
+      {
+        name: 'Delete Teacher Account - with students',
+        description: 'Warning message for teacher account deletion.',
+        story: () => (
+          <DeleteAccountDialog
+            {...DEFAULT_PROPS}
+            isTeacher={true}
+            warnAboutDeletingStudents={true}
+          />
+        )
+      },
+      {
+        name: 'Delete Teacher Account with students - 1 checkbox visible',
+        description: `
+        A teacher with students is only required to see/check
+        the first checkbox to delete their account.
+        `,
+        story: () => (
+          <DeleteAccountDialog
+            {...DEFAULT_PROPS}
+            isTeacher={true}
+            warnAboutDeletingStudents={true}
+            checkboxes={getCheckboxes(false,true)}
+          />
+        )
+      },
+      {
+        name: 'Delete Teacher Account with students - 5 checkboxes visible',
+        description: `
+        For a teacher that has students who depend on them to log in
+        and is required to see/check all 5 checkboxes to delete their
+        account.
+        `,
         story: () => (
           <DeleteAccountDialog
             {...DEFAULT_PROPS}
             isTeacher={true}
             warnAboutDeletingStudents={true}
+            checkboxes={getCheckboxes(true)}
           />
         )
       },
     ]);
 };
-