@thoughtspot/visual-embed-sdk 1.40.1-alpha.1 → 1.40.1-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@thoughtspot/visual-embed-sdk",
-    "version": "1.40.1-alpha.1",
+    "version": "1.40.1-alpha.3",
     "description": "ThoughtSpot Embed SDK",
     "module": "lib/src/index.js",
     "main": "dist/tsembed.js",
@@ -38,7 +38,7 @@
     "size-limit": [
         {
             "path": "dist/tsembed.es.js",
-            "limit": "31 kB"
+            "limit": "32 kB"
         }
     ],
     "scripts": {
@@ -55,8 +55,9 @@
         "docgen": "typedoc --tsconfig tsconfig.json --theme typedoc-theme --json static/typedoc/typedoc.json --disableOutputCheck",
         "test-sdk": "jest -c jest.config.sdk.js --runInBand",
         "test": "npm run test-sdk",
-        "posttest": "cat ./coverage/sdk/lcov.info | coveralls",
+        "posttest": "cat ./coverage/sdk/lcov.info",
         "is-publish-allowed": "node scripts/is-publish-allowed.js",
+        "prepublishOnly": "npm run is-publish-allowed && npm run test && npm run tsc && npm run bundle-dts-file && npm run bundle-dts && npm run bundle-dts-react && npm run bundle-dts-react-full && npm run build",
         "check-size": "npm run build && size-limit",
         "publish-dev": "npm publish --tag dev",
         "publish-prod": "npm publish --tag latest",
@@ -84,7 +85,7 @@
         "@rollup/plugin-json": "^4.1.0",
         "@rollup/plugin-node-resolve": "^11.2.1",
         "@rollup/plugin-replace": "^5.0.2",
-        "@size-limit/preset-big-lib": "^8.2.6",
+        "@size-limit/preset-big-lib": "^11.2.0",
         "@testing-library/dom": "^7.31.0",
         "@testing-library/jest-dom": "^5.14.1",
         "@testing-library/react": "^11.2.7",
@@ -95,11 +96,12 @@
         "@types/react-test-renderer": "^17.0.1",
         "@typescript-eslint/eslint-plugin": "^8.28.0",
         "@typescript-eslint/parser": "^8.28.0",
+        "ajv": "^8.17.1",
         "asciidoctor": "^2.2.1",
         "babel-jest": "^26.6.3",
         "babel-preset-gatsby": "^1.10.0",
         "command-line-args": "^5.1.1",
-        "coveralls": "^3.1.0",
+        "coveralls-next": "^5.0.0",
         "crypto": "^1.0.1",
         "current-git-branch": "^1.1.0",
         "dts-bundle": "^0.7.3",
@@ -119,7 +121,7 @@
         "highlight.js": "^10.6.0",
         "html-to-text": "^8.0.0",
         "identity-obj-proxy": "^3.0.0",
-        "istanbul-merge": "^1.1.1",
+        "istanbul-merge": "^2.0.0",
         "jest": "^26.6.3",
         "jest-fetch-mock": "^3.0.3",
         "jsdom": "^17.0.0",

package/src/css-variables.ts

@@ -472,4 +472,399 @@ export interface CustomCssVariables {
      * Background color of checkbox.
      */
     '--ts-var-checkbox-background-color'?: string;
-  }
+
+    /**
+     * Height of the tiles in the Liveboard.
+     */
+    '--ts-var-viz-tile-height'?: string;
+
+    /**
+     * Background color of the layout in the Liveboard.
+     */
+    '--ts-var-liveboard-layout-background'?: string;
+
+    /**
+     * Font color of the title of the layout in the Liveboard.
+     */
+    '--ts-var-liveboard-layout-title-color'?: string;
+
+    /**
+     * Font size of the title of the layout in the Liveboard.
+     */
+    '--ts-var-liveboard-layout-title-fontsize'?: string;
+
+    /**
+     * Background color of the header in the Liveboard.
+     */
+    '--ts-var-liveboard-header-background'?: string;
+
+    /**
+     * Font size of the header in the Liveboard.
+     */
+    '--ts-var-liveboard-header-fontsize'?: string;
+
+    /**
+     * Font color of the header in the Liveboard.
+     */
+    '--ts-var-liveboard-header-font-color'?: string;
+
+    /**
+     * Border color of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-border-color'?: string;
+
+    /**
+     * Background color of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-background'?: string;
+
+    /**
+     * Border radius of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-border-radius'?: string;
+
+    /**
+     * Padding of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-padding'?: string;
+
+    /**
+     * Background color of the table header in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-table-header-background'?: string;
+
+    /**
+     * Padding of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-padding'?: string;
+
+    /**
+     * Padding of the title of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-title-padding'?: string;
+
+    /**
+     * Font size of the title of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-title-font-size'?: string;
+
+    /**
+     * Font weight of the title of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-title-font-weight'?: string;
+
+    /**
+     * Font size of the title of the tiles inside the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-title-font-size'?: string;
+
+    /**
+     * Font weight of the title of the tiles inside the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-title-font-weight'?: string;
+
+    /**
+     * Font size of the description of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-description-font-size'?: string;
+
+    /**
+     * Font weight of the description of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-description-font-weight'?: string;
+
+    /**
+     * Border of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-border'?: string;
+
+    /**
+     * Padding of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-padding'?: string;
+
+    /**
+     * Padding of the answer viz in the Liveboard.
+     */
+    '--ts-var-liveboard-answer-viz-padding'?: string;
+
+    /**
+     * Background color of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-background'?: string;
+
+    /**
+     * Border color of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-border-color'?: string;
+
+    /**
+     * Font color of the heading of the note title in the Liveboard.
+     */
+    '--ts-var-liveboard-notetitle-heading-font-color'?: string;
+
+    /**
+     * Font color of the body of the note title in the Liveboard.
+     */
+    '--ts-var-liveboard-notetitle-body-font-color'?: string;
+
+    /**
+     * Font color of the title of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-title-font-color'?: string;
+
+    /**
+     * Font color of the description of the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-description-font-color'?: string;
+
+    /**
+     * Font color of the title of the tiles inside the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-title-font-color'?: string;
+
+    /**
+     * Background color of the tiles inside the groups in the Liveboard.
+     */
+    '--ts-var-liveboard-group-tile-background'?: string;
+
+    /**
+     * Background color of the chips in the Liveboard.
+     */
+    '--ts-var-liveboard-chip-background'?: string;
+
+    /**
+     * Font color of the chips in the Liveboard.
+     */
+    '--ts-var-liveboard-chip-color'?: string;
+
+    /**
+     * Background color of the chips in the Liveboard on hover.
+     */
+    '--ts-var-liveboard-chip--hover-background'?: string;
+
+    /**
+     * Font color of the chips in the Liveboard on hover.
+     */
+    '--ts-var-liveboard-chip--hover-color'?: string;
+
+    /**
+     * Background color of the chips in the Liveboard on active.
+     */
+    '--ts-var-liveboard-chip--active-background'?: string;
+
+    /**
+     * Font color of the chips in the Liveboard on active.
+     */
+    '--ts-var-liveboard-chip--active-color'?: string;
+
+    /**
+     * Width of the side panel in the Liveboard.
+     */
+    '--ts-var-side-panel-width'?: string;
+
+    /**
+     * Background color of the edit bar in the Liveboard.
+     */
+    '--ts-var-liveboard-edit-bar-background'?: string;
+
+    /**
+     * Breakpoint for the dual column layout in the Liveboard.
+     */
+    '--ts-var-liveboard-dual-column-breakpoint'?: string;
+
+    /**
+     * Breakpoint for the single column layout in the Liveboard.
+     */
+    '--ts-var-liveboard-single-column-breakpoint'?: string;
+
+    /**
+     * Background color of the cross filter layout in the Liveboard.
+     */
+    '--ts-var-liveboard-cross-filter-layout-background'?: string;
+
+    /**
+     * Border color of the active tab in the Liveboard.
+     */
+    '--ts-var-liveboard-tab-active-border-color'?: string;
+
+    /**
+     * Font color of the hover tab in the Liveboard.
+     */
+    '--ts-var-liveboard-tab-hover-color'?: string;
+
+    /**
+     * Font size of the title of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-title-fontsize'?: string;
+
+    /**
+     * Font weight of the title of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-title-fontweight'?: string;
+
+    /**
+     * Font weight of the description of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-description-font-weight'?: string;
+
+    /**
+     * Opacity of the description of the tiles in the Liveboard.
+     */
+    '--ts-var-liveboard-tile-description-opacity'?: string;
+
+    /**
+     * Background color of the parameter chips in the Liveboard.
+     */
+    '--ts-var-parameter-chip-background'?: string;
+
+    /**
+     * Font color of the parameter chips in the Liveboard.
+     */
+    '--ts-var-parameter-chip-text-color'?: string;
+
+    /**
+     * Background color of the parameter chips in the Liveboard on hover.
+     */
+    '--ts-var-parameter-chip-hover-background'?: string;
+
+    /**
+     * Font color of the parameter chips in the Liveboard on hover.
+     */
+    '--ts-var-parameter-chip-hover-text-color'?: string;
+
+    /**
+     * Background color of the parameter chips in the Liveboard on active.
+     */
+    '--ts-var-parameter-chip-active-background'?: string;
+
+    /**
+     * Font color of the parameter chips in the Liveboard on active.
+     */
+    '--ts-var-parameter-chip-active-text-color'?: string;
+
+    /**
+     * Background color of the action button in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-action-button-background'?: string;
+
+    /**
+     * Font color of the action button in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-action-button-font-color'?: string;
+
+    /**
+     * Font color of the action button in the Liveboard header on hover.
+     */
+    '--ts-var-liveboard-header-action-button-hover-color'?: string;
+
+    /**
+     * Font color of the action button in the Liveboard header on active.
+     */
+    '--ts-var-liveboard-header-action-button-active-color'?: string;
+
+    /**
+     * Background color of the badge in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-badge-background'?: string;
+
+    /**
+     * Font color of the badge in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-badge-font-color'?: string;
+
+    /**
+     * Background color of the modified badge in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-badge-modified-background'?: string;
+
+    /**
+     * Font color of the modified badge in the Liveboard header.
+     */
+    '--ts-var-liveboard-header-badge-modified-font-color'?: string;
+
+    /**
+     * Font color of the badge in the Liveboard header on hover.
+     */
+    '--ts-var-liveboard-header-badge-hover-color'?: string;
+
+    /**
+     * Font color of the badge in the Liveboard header on active.
+     */
+    '--ts-var-liveboard-header-badge-active-color'?: string;
+
+    /**
+     * Font color of the hero text in the KPI widget.
+     */
+    '--ts-var-kpi-hero-color'?: string;
+
+    /**
+     * Font color of the comparison text in the KPI widget.
+     */
+    '--ts-var-kpi-comparison-color'?: string;
+
+    /**
+     * Font color of the analyze text in the KPI widget.
+     */
+    '--ts-var-kpi-analyze-text-color'?: string;
+
+    /**
+     * Font color of the legend title in the heatmap chart.
+     */
+    '--ts-var-chart-heatmap-legend-title-color'?: string;
+
+    /**
+     * Font color of the legend label in the heatmap chart.
+     */
+    '--ts-var-chart-heatmap-legend-label-color'?: string;
+
+    /**
+     * Font color of the legend title in the treemap chart.
+     */
+    '--ts-var-chart-treemap-legend-title-color'?: string;
+
+    /**
+     * Font color of the legend label in the treemap chart.
+     */
+    '--ts-var-chart-treemap-legend-label-color'?: string;
+
+    /**
+     * Color of the positive change in the KPI.
+     */
+    '--ts-var-kpi-positive-change-color'?: string;
+
+    /**
+     * Color of the negative change in the KPI.
+     */
+    '--ts-var-kpi-negative-change-color'?: string;
+ 
+    /**
+     * Background color of the change analysis insights.
+     */
+    '--ts-var-change-analysis-insights-background'?: string;
+
+    /**
+     * Background color of the forecasting card in the SpotIQ analyze.
+     */
+    '--ts-var-spotiq-analyze-forecasting-card-background'?: string;
+
+    /**
+     * Background color of the outlier card in the SpotIQ analyze.
+     */
+    '--ts-var-spotiq-analyze-outlier-card-background'?: string;
+
+    /**
+     * Background color of the trend card in the SpotIQ analyze.
+     */
+    '--ts-var-spotiq-analyze-trend-card-background'?: string;
+    
+    /**
+     * Background color of the crosscorrelation card in the SpotIQ analyze.
+     */
+    '--ts-var-spotiq-analyze-crosscorrelation-card-background'?: string;
+    
+    /**
+     * Background color of the summary header in the CCA modal.
+     */
+    '--ts-var-cca-modal-summary-header-background'?: string;
+  }

package/src/embed/app.spec.ts

@@ -344,6 +344,34 @@ describe('App embed tests', () => {
         });
     });
 
+    test('should set liveboardXLSXCSVDownload to true in url', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardXLSXCSVDownload: true,
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&profileAndHelpInNavBarHidden=false&isLiveboardXLSXCSVDownloadEnabled=true${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('should set liveboardXLSXCSVDownload to false in url', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            liveboardXLSXCSVDownload: false,
+        } as AppViewConfig);
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&profileAndHelpInNavBarHidden=false&isLiveboardXLSXCSVDownloadEnabled=false${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
     test('Should add the tag to the iframe src', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
@@ -593,11 +621,30 @@ describe('App embed tests', () => {
         });
     });
 
-    test('Should add navigationVersion=v3 & modularHomeExperience=false when primaryNavbarVersion is Sliding to the iframe src', async () => {
+    test('Should add navigationVersion=v3 & modularHomeExperience=true when primaryNavbarVersion is Sliding to the iframe src', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            // Not included the homePage v2 config under discoveryExperience.
+            discoveryExperience: {
+                primaryNavbarVersion: PrimaryNavbarVersion.Sliding,
+            },
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=true&navigationVersion=v3${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('Should add homepageVersion=v3 & navigationVersion=v3 & modularHomeExperience=true when Sliding and ModularWithStylingChanges configured in the iframe src', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
             discoveryExperience: {
                 primaryNavbarVersion: PrimaryNavbarVersion.Sliding,
+                homePage: HomePage.ModularWithStylingChanges,
             },
         } as AppViewConfig);
 
@@ -605,7 +652,40 @@ describe('App embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=false&navigationVersion=v3${defaultParams}${defaultParamsPost}#/home`,
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=true&navigationVersion=v3&homepageVersion=v3${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('Should add homepageVersion=v3 & navigationVersion=v3 & modularHomeExperience=true when homePage is ModularWithStylingChanges to the iframe src', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+            // primaryNavbarVersion is not included under discoveryExperience,
+            // then it set navigationVersion=v2 and modularHomeExperience=false.
+            discoveryExperience: {
+                homePage: HomePage.ModularWithStylingChanges,
+            },
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=false&navigationVersion=v2&homepageVersion=v3${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('Should add navigationVersion=v2 when primaryNavbarVersion is not added to the iframe src', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=false&navigationVersion=v2${defaultParams}${defaultParamsPost}#/home`,
             );
         });
     });
@@ -642,11 +722,27 @@ describe('App embed tests', () => {
         });
     });
 
-    test('Should not add listpageVersion when listPageVersion is List (v2) to the iframe src', async () => {
+
+    test('Should add listpageVersion=v2 by default when no discoveryExperience is provided', async () => {
+        const appEmbed = new AppEmbed(getRootEl(), {
+            ...defaultViewConfig,
+        } as AppViewConfig);
+
+        appEmbed.render();
+        await executeAfterWait(() => {
+            expectUrlMatchesWithParams(
+                getIFrameSrc(),
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=false&navigationVersion=v2&listpageVersion=v2${defaultParams}${defaultParamsPost}#/home`,
+            );
+        });
+    });
+
+    test('Should add listpageVersion=v2 by default when discoveryExperience is provided but listPageVersion is not specified', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,
             discoveryExperience: {
-                listPageVersion: ListPage.List,
+                primaryNavbarVersion: PrimaryNavbarVersion.Sliding,
+                homePage: HomePage.Modular,
             },
         } as AppViewConfig);
 
@@ -654,11 +750,12 @@ describe('App embed tests', () => {
         await executeAfterWait(() => {
             expectUrlMatchesWithParams(
                 getIFrameSrc(),
-                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=false${defaultParams}${defaultParamsPost}#/home`,
+                `http://${thoughtSpotHost}/?embedApp=true&primaryNavHidden=true&profileAndHelpInNavBarHidden=false&modularHomeExperience=true&navigationVersion=v3&listpageVersion=v2${defaultParams}${defaultParamsPost}#/home`,
             );
         });
     });
 
+
     test('Should add listpageVersion=v3 combined with other discoveryExperience options to the iframe src', async () => {
         const appEmbed = new AppEmbed(getRootEl(), {
             ...defaultViewConfig,

package/src/embed/app.ts

@@ -107,6 +107,11 @@ export enum HomePage {
      * It serves as the foundational version of the home page.
      */
     Modular = 'v2',
+    /**
+     * ModularWithStylingChanges (v3) introduces Modular Home Experience
+     * with styling changes.
+     */
+    ModularWithStylingChanges = 'v3',
 }
 
 /**
@@ -638,6 +643,7 @@ export class AppEmbed extends V1Embed {
             enablePendoHelp = true,
             discoveryExperience,
             coverAndFilterOptionInPDF = false,
+            liveboardXLSXCSVDownload = false,
             isLiveboardStylingAndGroupingEnabled,
         } = this.viewConfig;
 
@@ -657,6 +663,7 @@ export class AppEmbed extends V1Embed {
         params[Param.HideIrrelevantFiltersInTab] = hideIrrelevantChipsInLiveboardTabs;
         params[Param.IsUnifiedSearchExperienceEnabled] = isUnifiedSearchExperienceEnabled;
         params[Param.CoverAndFilterOptionInPDF] = !!coverAndFilterOptionInPDF;
+        params[Param.LiveboardXLSXCSVDownload] = !!liveboardXLSXCSVDownload;
 
         params = this.getBaseQueryParams(params);
 
@@ -740,10 +747,24 @@ export class AppEmbed extends V1Embed {
             params[Param.DataPanelCustomGroupsAccordionInitialState] = DataPanelCustomColumnGroupsAccordionState.EXPAND_ALL;
         }
 
+        // Set navigation to v2 by default to avoid problems like the app
+        // switcher (9-dot menu) not showing when v3 navigation is turned on
+        // at the cluster level.
+        // To use v3 navigation, we must manually set the discoveryExperience
+        // settings.
+        params[Param.NavigationVersion] = 'v2';
+        // Set homePageVersion to v2 by default to reset the LD flag value
+        // for the homepageVersion.
+        params[Param.HomepageVersion] = 'v2';
+        // Set listpageVersion to v2 by default to reset the LD flag value
+        // for the listpageVersion.
+        params[Param.ListPageVersion] = ListPage.List;
         if (discoveryExperience) {
             // primaryNavbarVersion v3 will enabled the new left navigation
             if (discoveryExperience.primaryNavbarVersion === PrimaryNavbarVersion.Sliding) {
                 params[Param.NavigationVersion] = discoveryExperience.primaryNavbarVersion;
+                // Enable the modularHomeExperience when Sliding is enabled.
+                params[Param.ModularHomeExperienceEnabled] = true;
             }
 
             // homePage v2 will enable the modular home page
@@ -751,6 +772,14 @@ export class AppEmbed extends V1Embed {
             if (discoveryExperience.homePage === HomePage.Modular) {
                 params[Param.ModularHomeExperienceEnabled] = true;
             }
+
+            // ModularWithStylingChanges (v3) introduces the styling changes
+            // to the Modular Homepage.
+            // v3 will be the base version of homePageVersion.
+            if (discoveryExperience.homePage === HomePage.ModularWithStylingChanges) {
+                params[Param.HomepageVersion] = HomePage.ModularWithStylingChanges;
+            }
+
             // listPageVersion v3 will enable the new list page
             if (discoveryExperience.listPageVersion === ListPage.ListWithUXChanges) {
                 params[Param.ListPageVersion] = discoveryExperience.listPageVersion;