diff --git a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js index 2fd6161d43434..2be087f5729fc 100644 --- a/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js +++ b/browser/components/newtab/aboutwelcome/content/aboutwelcome.bundle.js @@ -399,7 +399,8 @@ const MultiStageAboutWelcome = props => { setActiveMultiSelect: setActiveMultiSelect, autoAdvance: screen.auto_advance, negotiatedLanguage: negotiatedLanguage, - langPackInstallPhase: langPackInstallPhase + langPackInstallPhase: langPackInstallPhase, + forceHideStepsIndicator: screen.force_hide_steps_indicator }) : null; }))); }; @@ -628,7 +629,8 @@ class WelcomeScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCo isLastScreen: this.props.isLastScreen, isSingleScreen: this.props.isSingleScreen, startsWithCorner: this.props.startsWithCorner, - autoAdvance: this.props.autoAdvance + autoAdvance: this.props.autoAdvance, + forceHideStepsIndicator: this.props.forceHideStepsIndicator }); } @@ -826,7 +828,8 @@ const MultiStageProtonScreen = props => { iconURL: props.iconURL, messageId: props.messageId, negotiatedLanguage: props.negotiatedLanguage, - langPackInstallPhase: props.langPackInstallPhase + langPackInstallPhase: props.langPackInstallPhase, + forceHideStepsIndicator: props.forceHideStepsIndicator }); }; const ProtonScreenActionButtons = props => { @@ -1068,12 +1071,13 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom isTheme, isFirstScreen, isLastScreen, - isSingleScreen + isSingleScreen, + forceHideStepsIndicator } = this.props; const includeNoodles = content.has_noodles; // The default screen position is "center" const isCenterPosition = content.position === "center" || !content.position; - const hideStepsIndicator = autoAdvance || (content === null || content === void 0 ? void 0 : content.video_container) || isSingleScreen; + const hideStepsIndicator = autoAdvance || (content === null || content === void 0 ? void 0 : content.video_container) || isSingleScreen || forceHideStepsIndicator; const textColorClass = content.text_color ? `${content.text_color}-text` : ""; // Assign proton screen style 'screen-1' or 'screen-2' to centered screens // by checking if screen order is even or odd. diff --git a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx index 074f76ba42e1d..4d67e0aa4ed04 100644 --- a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx +++ b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageAboutWelcome.jsx @@ -244,6 +244,7 @@ export const MultiStageAboutWelcome = props => { autoAdvance={screen.auto_advance} negotiatedLanguage={negotiatedLanguage} langPackInstallPhase={langPackInstallPhase} + forceHideStepsIndicator={screen.force_hide_steps_indicator} /> ) : null; })} @@ -480,6 +481,7 @@ export class WelcomeScreen extends React.PureComponent { isSingleScreen={this.props.isSingleScreen} startsWithCorner={this.props.startsWithCorner} autoAdvance={this.props.autoAdvance} + forceHideStepsIndicator={this.props.forceHideStepsIndicator} /> ); } diff --git a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx index 15bbeb08b1143..beeb4150d7799 100644 --- a/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx +++ b/browser/components/newtab/content-src/aboutwelcome/components/MultiStageProtonScreen.jsx @@ -60,6 +60,7 @@ export const MultiStageProtonScreen = props => { messageId={props.messageId} negotiatedLanguage={props.negotiatedLanguage} langPackInstallPhase={props.langPackInstallPhase} + forceHideStepsIndicator={props.forceHideStepsIndicator} /> ); }; @@ -371,12 +372,16 @@ export class ProtonScreen extends React.PureComponent { isFirstScreen, isLastScreen, isSingleScreen, + forceHideStepsIndicator, } = this.props; const includeNoodles = content.has_noodles; // The default screen position is "center" const isCenterPosition = content.position === "center" || !content.position; const hideStepsIndicator = - autoAdvance || content?.video_container || isSingleScreen; + autoAdvance || + content?.video_container || + isSingleScreen || + forceHideStepsIndicator; const textColorClass = content.text_color ? `${content.text_color}-text` : ""; diff --git a/browser/components/newtab/test/unit/aboutwelcome/MultiStageAWProton.test.jsx b/browser/components/newtab/test/unit/aboutwelcome/MultiStageAWProton.test.jsx index f18d280e2f748..8fbc83387ac6b 100644 --- a/browser/components/newtab/test/unit/aboutwelcome/MultiStageAWProton.test.jsx +++ b/browser/components/newtab/test/unit/aboutwelcome/MultiStageAWProton.test.jsx @@ -227,6 +227,18 @@ describe("MultiStageAboutWelcomeProton module", () => { assert.equal(wrapper.find(".steps.progress-bar").exists(), false); }); + it("should not render a steps indicator if steps indicator is force hidden", () => { + const SCREEN_PROPS = { + content: { + title: "test title", + }, + forceHideStepsIndicator: true, + }; + const wrapper = mount(); + assert.ok(wrapper.exists()); + assert.equal(wrapper.find(".steps").exists(), false); + }); + it("should render a progress bar if there are 2 steps", () => { const SCREEN_PROPS = { content: {