1 files changed, 65 insertions, 1 deletions
diff --git a/browser/components/storybook/stories/migration-wizard.stories.mjs b/browser/components/storybook/stories/migration-wizard.stories.mjs
index 64ce519a66..53d4698a7a 100644
--- a/browser/components/storybook/stories/migration-wizard.stories.mjs
+++ b/browser/components/storybook/stories/migration-wizard.stories.mjs
@@ -172,7 +172,27 @@ const FAKE_MIGRATOR_LIST = [
   },
 ];
 
-const Template = ({ state, dialogMode }) => html`
+const Template = ({
+  state,
+  dialogMode,
+  forceShowImportAll,
+  hideOptionExpanderSubtitle,
+  optionExpanderTitleString,
+  hideSelectAll,
+  importButtonString,
+  checkboxMarginInline,
+  checkboxMarginBlock,
+  importButtonClass,
+  selectionHeaderString,
+  selectionSubheaderString,
+  dataImportCompleteSuccessString,
+  headerFontSize,
+  headerMarginBlock,
+  headerFontWeight,
+  subheaderFontSize,
+  subheaderMarginBlock,
+  subheaderFontWeight,
+}) => html`
   <style>
     @media (prefers-reduced-motion: no-preference) {
       migration-wizard::part(progress-spinner) {
@@ -184,6 +204,23 @@ const Template = ({ state, dialogMode }) => html`
   <div class="card card-no-hover" style="width: fit-content">
     <migration-wizard
       ?dialog-mode=${dialogMode}
+      ?force-show-import-all=${forceShowImportAll}
+      ?hide-option-expander-subtitle=${hideOptionExpanderSubtitle}
+      option-expander-title-string=${optionExpanderTitleString}
+      ?hide-select-all=${hideSelectAll}
+      import-button-string=${importButtonString}
+      import-button-class=${importButtonClass}
+      checkbox-margin-inline=${checkboxMarginInline}
+      checkbox-margin-block=${checkboxMarginBlock}
+      selection-header-string=${selectionHeaderString}
+      selection-subheader-string=${selectionSubheaderString}
+      data-import-complete-success-string=${dataImportCompleteSuccessString}
+      header-font-size=${headerFontSize}
+      header-margin-block=${headerMarginBlock}
+      header-font-weight=${headerFontWeight}
+      subheader-font-size=${subheaderFontSize}
+      subheader-margin-block=${subheaderMarginBlock}
+      subheader-font-weight=${subheaderFontWeight}
       .state=${state}
     ></migration-wizard>
   </div>
@@ -217,6 +254,33 @@ MainSelectorVariant2.args = {
   },
 };
 
+export const CustomizedSelectionPage = Template.bind({});
+CustomizedSelectionPage.args = {
+  dialogMode: true,
+  state: {
+    page: MigrationWizardConstants.PAGES.SELECTION,
+    migrators: FAKE_MIGRATOR_LIST,
+    showImportAll: true,
+  },
+  forceShowImportAll: false,
+  hideOptionExpanderSubtitle: false,
+  hideSelectAll: false,
+  importButtonString: "Custom Button String",
+  checkboxMarginInline: "5px",
+  checkboxMarginBlock: "10px",
+  importButtonClass: "test-class",
+  optionExpanderTitleString: "Options",
+  selectionHeaderString: "Custom Header",
+  selectionSubheaderString: "Custom Subheader",
+  dataImportCompleteSuccessString: "Custom Data Import Success",
+  headerFontSize: "24px",
+  headerMarginBlock: "0 4px",
+  headerFontWeight: "590",
+  subheaderFontSize: "13px",
+  subheaderMarginBlock: "0 28px",
+  subheaderFontWeight: "400",
+};
+
 export const NoPermissionMessage = Template.bind({});
 NoPermissionMessage.args = {
   dialogMode: true,