Skip to content

Commit 718fd74

Browse files
mimizillaamimizillaa
committed
Bug 1877557 - Extra configurations for LinkParagraph component for about:welcome r=omc-reviewers,emcminn,pdahiya
Adds styling for legal copy and updates above_button_config so it renders after tiles/MultiSelect but before action buttons. Differential Revision: https://phabricator.services.mozilla.com/D200078
1 parent c58f843 commit 718fd74

File tree

7 files changed

+114
-10
lines changed

7 files changed

+114
-10
lines changed

‎browser/components/aboutwelcome/content-src/aboutwelcome.scss

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -597,6 +597,21 @@ html {
597597
border-radius: 8px 0 0 8px;
598598
}
599599

600+
.legal-paragraph {
601+
text-align: start;
602+
font-size: 11px;
603+
line-height: 16.5px;
604+
color: #5B5B66;
605+
606+
@media only screen and (width <= 800px) {
607+
padding-inline: 30px;
608+
}
609+
610+
@media (prefers-color-scheme: dark) {
611+
color: #CFCFD8;
612+
}
613+
}
614+
600615
.main-content-inner {
601616
min-height: 330px;
602617

@@ -912,9 +927,17 @@ html {
912927
height: $split-screen-height;
913928
margin: auto;
914929

930+
&:dir(rtl) {
931+
margin: auto;
932+
}
933+
915934
.main-content {
916935
padding: 50px 0 0;
917936
border-radius: 8px;
937+
938+
&:dir(rtl) {
939+
border-radius: 8px;
940+
}
918941
}
919942
}
920943

@@ -1610,6 +1633,10 @@ html {
16101633
}
16111634
}
16121635

1636+
.legal-paragraph {
1637+
transition: var(--transition)
1638+
}
1639+
16131640
.primary,
16141641
.secondary,
16151642
.additional-cta,
@@ -1763,7 +1790,8 @@ html {
17631790
.secondary,
17641791
.secondary-cta,
17651792
.steps,
1766-
.cta-link {
1793+
.cta-link,
1794+
.legal-paragraph {
17671795
transition-delay: 1s;
17681796
}
17691797
}
@@ -1779,7 +1807,8 @@ html {
17791807
.primary,
17801808
.secondary,
17811809
.secondary-cta,
1782-
.cta-link {
1810+
.cta-link,
1811+
.legal-paragraph {
17831812
transition-delay: 0.4s;
17841813
}
17851814
}
@@ -1852,6 +1881,7 @@ html {
18521881
.secondary,
18531882
.secondary-cta:not(.top),
18541883
.cta-link,
1884+
.legal-paragraph,
18551885
migration-wizard {
18561886
opacity: 0;
18571887
translate: 0 calc(-1 * var(--translate));
@@ -1898,7 +1928,8 @@ html {
18981928
.checkbox-container:not(.multi-select-item),
18991929
.secondary,
19001930
.secondary-cta:not(.top),
1901-
.cta-link {
1931+
.cta-link,
1932+
.legal-paragraph {
19021933
opacity: 0;
19031934
translate: 0 var(--translate);
19041935
transition-delay: 0.3s;

‎browser/components/aboutwelcome/content-src/components/MSLocalized.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export const CONFIGURABLE_STYLES = [
1313
"marginInline",
1414
"paddingBlock",
1515
"paddingInline",
16+
"textAlign",
1617
"whiteSpace",
1718
];
1819
const ZAP_SIZE_THRESHOLD = 160;

‎browser/components/aboutwelcome/content-src/components/MultiStageProtonScreen.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -591,11 +591,11 @@ export class ProtonScreen extends React.PureComponent {
591591
handleAction={this.props.handleAction}
592592
/>
593593
) : null}
594+
{this.renderContentTiles()}
595+
{this.renderLanguageSwitcher()}
594596
{content.above_button_content
595597
? this.renderOrderedContent(content.above_button_content)
596598
: null}
597-
{this.renderContentTiles()}
598-
{this.renderLanguageSwitcher()}
599599
{!hideStepsIndicator && aboveButtonStepsIndicator
600600
? this.renderStepsIndicator()
601601
: null}

‎browser/components/aboutwelcome/content/aboutwelcome.bundle.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -666,7 +666,7 @@ __webpack_require__.r(__webpack_exports__);
666666
* You can obtain one at http://mozilla.org/MPL/2.0/. */
667667

668668

669-
const CONFIGURABLE_STYLES = ["color", "fontSize", "fontWeight", "letterSpacing", "lineHeight", "marginBlock", "marginInline", "paddingBlock", "paddingInline", "whiteSpace"];
669+
const CONFIGURABLE_STYLES = ["color", "fontSize", "fontWeight", "letterSpacing", "lineHeight", "marginBlock", "marginInline", "paddingBlock", "paddingInline", "textAlign", "whiteSpace"];
670670
const ZAP_SIZE_THRESHOLD = 160;
671671

672672
/**
@@ -1226,7 +1226,7 @@ class ProtonScreen extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
12261226
}) : null), content.video_container ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_OnboardingVideo__WEBPACK_IMPORTED_MODULE_10__.OnboardingVideo, {
12271227
content: content.video_container,
12281228
handleAction: this.props.handleAction
1229-
}) : null, content.above_button_content ? this.renderOrderedContent(content.above_button_content) : null, this.renderContentTiles(), this.renderLanguageSwitcher(), !hideStepsIndicator && aboveButtonStepsIndicator ? this.renderStepsIndicator() : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ProtonScreenActionButtons, {
1229+
}) : null, this.renderContentTiles(), this.renderLanguageSwitcher(), content.above_button_content ? this.renderOrderedContent(content.above_button_content) : null, !hideStepsIndicator && aboveButtonStepsIndicator ? this.renderStepsIndicator() : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(ProtonScreenActionButtons, {
12301230
content: content,
12311231
addonName: this.props.addonName,
12321232
handleAction: this.props.handleAction,

‎browser/components/aboutwelcome/content/aboutwelcome.css

Lines changed: 33 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -813,6 +813,7 @@ panel#feature-callout[arrow-position=inline-start-bottom] {
813813
margin-block: 0 20px;
814814
padding-inline: 30px;
815815
text-align: start;
816+
color: inherit;
816817
}
817818
.onboardingContainer.shopping .screen[pos=split] .section-main .main-content .legal-paragraph a {
818819
text-decoration: underline;
@@ -1390,6 +1391,22 @@ html {
13901391
.onboardingContainer .screen[pos=split] .section-main .main-content:dir(rtl) {
13911392
border-radius: 8px 0 0 8px;
13921393
}
1394+
.onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
1395+
text-align: start;
1396+
font-size: 11px;
1397+
line-height: 16.5px;
1398+
color: #5B5B66;
1399+
}
1400+
@media only screen and (width <= 800px) {
1401+
.onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
1402+
padding-inline: 30px;
1403+
}
1404+
}
1405+
@media (prefers-color-scheme: dark) {
1406+
.onboardingContainer .screen[pos=split] .section-main .main-content .legal-paragraph {
1407+
color: #CFCFD8;
1408+
}
1409+
}
13931410
.onboardingContainer .screen[pos=split] .section-main .main-content .main-content-inner {
13941411
min-height: 330px;
13951412
}
@@ -1687,10 +1704,16 @@ html {
16871704
height: 550px;
16881705
margin: auto;
16891706
}
1707+
.onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive]:dir(rtl) {
1708+
margin: auto;
1709+
}
16901710
.onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] .main-content {
16911711
padding: 50px 0 0;
16921712
border-radius: 8px;
16931713
}
1714+
.onboardingContainer .screen[pos=split] .section-main[hide-secondary-section=responsive] .main-content:dir(rtl) {
1715+
border-radius: 8px;
1716+
}
16941717
.onboardingContainer .screen[pos=split] .section-main .main-content {
16951718
border-radius: 0 0 8px 8px;
16961719
padding: 30px 0 0;
@@ -2273,6 +2296,9 @@ html {
22732296
.onboardingContainer .additional-cta-container[flow][flow=row] .secondary-cta {
22742297
flex-basis: 100%;
22752298
}
2299+
.onboardingContainer .legal-paragraph {
2300+
transition: var(--transition);
2301+
}
22762302
.onboardingContainer .primary,
22772303
.onboardingContainer .secondary,
22782304
.onboardingContainer .additional-cta,
@@ -2407,7 +2433,8 @@ html {
24072433
.onboardingContainer .dialog-initial .secondary,
24082434
.onboardingContainer .dialog-initial .secondary-cta,
24092435
.onboardingContainer .dialog-initial .steps,
2410-
.onboardingContainer .dialog-initial .cta-link {
2436+
.onboardingContainer .dialog-initial .cta-link,
2437+
.onboardingContainer .dialog-initial .legal-paragraph {
24112438
transition-delay: 1s;
24122439
}
24132440
.onboardingContainer .screen:not(.dialog-initial) .tiles-theme-section,
@@ -2417,7 +2444,8 @@ html {
24172444
.onboardingContainer .screen:not(.dialog-initial) .primary,
24182445
.onboardingContainer .screen:not(.dialog-initial) .secondary,
24192446
.onboardingContainer .screen:not(.dialog-initial) .secondary-cta,
2420-
.onboardingContainer .screen:not(.dialog-initial) .cta-link {
2447+
.onboardingContainer .screen:not(.dialog-initial) .cta-link,
2448+
.onboardingContainer .screen:not(.dialog-initial) .legal-paragraph {
24212449
transition-delay: 0.4s;
24222450
}
24232451
.onboardingContainer .screen-2 .section-main {
@@ -2473,6 +2501,7 @@ html {
24732501
.onboardingContainer.transition-in .screen .secondary,
24742502
.onboardingContainer.transition-in .screen .secondary-cta:not(.top),
24752503
.onboardingContainer.transition-in .screen .cta-link,
2504+
.onboardingContainer.transition-in .screen .legal-paragraph,
24762505
.onboardingContainer.transition-in .screen migration-wizard {
24772506
opacity: 0;
24782507
translate: 0 calc(-1 * var(--translate));
@@ -2505,7 +2534,8 @@ html {
25052534
.onboardingContainer.transition-out .screen:not(.dialog-last) .checkbox-container:not(.multi-select-item),
25062535
.onboardingContainer.transition-out .screen:not(.dialog-last) .secondary,
25072536
.onboardingContainer.transition-out .screen:not(.dialog-last) .secondary-cta:not(.top),
2508-
.onboardingContainer.transition-out .screen:not(.dialog-last) .cta-link {
2537+
.onboardingContainer.transition-out .screen:not(.dialog-last) .cta-link,
2538+
.onboardingContainer.transition-out .screen:not(.dialog-last) .legal-paragraph {
25092539
opacity: 0;
25102540
translate: 0 var(--translate);
25112541
transition-delay: 0.3s;

‎browser/components/aboutwelcome/tests/unit/MultiStageAWProton.test.jsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -385,6 +385,47 @@ describe("MultiStageAboutWelcomeProton module", () => {
385385
assert.equal(textEl.at(0).prop("data-l10n-id"), "test-string-id");
386386
assert.equal(textEl.at(1).prop("data-l10n-id"), "test-string-id-2");
387387
});
388+
389+
it("should render above_button_content legal copy with MultiSelect tile", async () => {
390+
const SCREEN_PROPS = {
391+
content: {
392+
tiles: {
393+
type: "multiselect",
394+
label: "Test Subtitle",
395+
data: [
396+
{
397+
id: "checkbox-1",
398+
type: "checkbox",
399+
defaultValue: false,
400+
label: { raw: "Checkbox 1" },
401+
},
402+
],
403+
},
404+
above_button_content: [
405+
{
406+
type: "text",
407+
text: {
408+
string_id: "test-string-id",
409+
},
410+
font_styles: "legal",
411+
link_keys: ["privacy_policy", "terms_of_use"],
412+
},
413+
],
414+
},
415+
setScreenMultiSelects: sandbox.stub(),
416+
setActiveMultiSelect: sandbox.stub(),
417+
};
418+
419+
const wrapper = mount(<MultiStageProtonScreen {...SCREEN_PROPS} />);
420+
assert.ok(wrapper.exists());
421+
const legalText = wrapper.find(".legal-paragraph");
422+
assert.equal(legalText.exists(), true);
423+
424+
const multiSelectContainer = wrapper.find(".multi-select-container");
425+
assert.equal(multiSelectContainer.exists(), true);
426+
427+
sandbox.restore();
428+
});
388429
});
389430

390431
describe("AboutWelcomeDefaults for proton", () => {

‎browser/components/asrouter/content-src/styles/_shopping.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
margin-block: 0 20px;
8686
padding-inline: 30px;
8787
text-align: start;
88+
color: inherit;
8889

8990
a {
9091
text-decoration: underline;

0 commit comments

Comments
 (0)