Bug 1774472 - Pocket newtab split cardgrid into sections. r=gvn (231999a3) · Commits · Dan Ballard / Mullvad Browser

browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx

+56 −28

Original line number	Diff line number	Diff line
		@@ -16,6 +16,30 @@ const WIDGET_IDS = {
		TOPICS: 1,
		};

		export function DSSubHeader(props) {
		return (
		<div className="section-top-bar ds-sub-header">
		<h3 className="section-title-container">
		<span className="section-title">{props.children}</span>
		</h3>
		</div>
		);
		}

		export function GridContainer(props) {
		const { header, className, children } = props;
		return (
		<>
		{header && (
		<DSSubHeader>
		<FluentOrText message={header} />
		</DSSubHeader>
		)}
		<div className={`ds-card-grid ${className}`}>{children}</div>
		</>
		);
		}

		export class CardGrid extends React.PureComponent {
		constructor(props) {
		super(props);
		@@ -42,18 +66,6 @@ export class CardGrid extends React.PureComponent {
		);
		}

		renderDSSubHeader(title) {
		return (
		<div className="section-top-bar ds-sub-header">
		<h3 className="section-title-container">
		<span className="section-title">
		<FluentOrText message={title} />
		</span>
		</h3>
		</div>
		);
		}

		renderCards() {
		let { items } = this.props;
		const {
		@@ -84,6 +96,8 @@ export class CardGrid extends React.PureComponent {

		const recs = this.props.data.recommendations.slice(0, items);
		const cards = [];
		let essentialReadsCards = [];
		let editorsPicksCards = [];

		for (let index = 0; index < items; index++) {
		const rec = recs[index];
		@@ -133,17 +147,6 @@ export class CardGrid extends React.PureComponent {
		);
		}

		// If we have both header, inject the second one after the second row.
		// For now this is English only.
		if (essentialReadsHeader && editorsPicksHeader) {
		// For 4 card row layouts, second row is 8 cards, and regular it is 6 cards.
		if (fourCardLayout) {
		cards.splice(8, 0, this.renderDSSubHeader("Editor’s Picks"));
		} else {
		cards.splice(6, 0, this.renderDSSubHeader("Editor’s Picks"));
		}
		}

		// Replace last card with "you are all caught up card"
		if (showLastCardMessage) {
		cards.splice(
		@@ -188,6 +191,19 @@ export class CardGrid extends React.PureComponent {
		}
		}

		// For now this is English only.
		if (essentialReadsHeader && editorsPicksHeader) {
		let spliceAt = 6;
		// For 4 card row layouts, second row is 8 cards, and regular it is 6 cards.
		if (fourCardLayout) {
		spliceAt = 8;
		}
		// Put the first 2 rows into essentialReadsCards.
		essentialReadsCards = [...cards.splice(0, spliceAt)];
		// Put the rest into editorsPicksCards.
		editorsPicksCards = [...cards.splice(0, cards.length)];
		}

		// Used for CSS overrides to default styling (eg: "hero")
		const variantClass = this.props.display_variant
		? `ds-card-grid-${this.props.display_variant}`
		@@ -206,12 +222,24 @@ export class CardGrid extends React.PureComponent {
		? `ds-card-grid-hybrid-layout`
		: ``;

		const className = `ds-card-grid-${this.props.border} ${variantClass} ${hybridLayoutClassName} ${hideCardBackgroundClass} ${fourCardLayoutClass} ${hideDescriptionsClassName} ${compactGridClassName}`;

		return (
		<div
		className={`ds-card-grid ds-card-grid-${this.props.border} ${variantClass} ${hybridLayoutClassName} ${hideCardBackgroundClass} ${fourCardLayoutClass} ${hideDescriptionsClassName} ${compactGridClassName}`}
		>
		{cards}
		</div>
		<>
		{essentialReadsCards?.length > 0 && (
		<GridContainer className={className}>
		{essentialReadsCards}
		</GridContainer>
		)}
		{editorsPicksCards?.length > 0 && (
		<GridContainer className={className} header="Editor’s Picks">
		{editorsPicksCards}
		</GridContainer>
		)}
		{cards?.length > 0 && (
		<GridContainer className={className}>{cards}</GridContainer>
		)}
		</>
		);
		}

browser/components/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss

+4 −5

Original line number	Diff line number	Diff line
		@@ -18,11 +18,6 @@ $col4-header-font-size: 14;
		border-radius: 4px;
		}

		.ds-sub-header {
		grid-column: 1 / -1;
		margin-bottom: -7px;
		}

		.ds-column-12 &.ds-card-grid-hero {
		@media (min-width: $break-point-large) {
		grid-template-columns: repeat(12, 1fr);
		@@ -291,6 +286,10 @@ $col4-header-font-size: 14;
		}

		.ds-layout {
		.ds-sub-header {
		margin-top: 24px;
		}

		.ds-card-grid-load-more-button {
		display: block;
		margin: 32px auto 0;

browser/components/newtab/css/activity-stream-linux.css

+3 −4

Original line number	Diff line number	Diff line
		@@ -2645,10 +2645,6 @@ main.has-snippet {
		[lwt-newtab-brighttext] .ds-card-grid .ds-card {
		background: none;
		}
		.ds-card-grid .ds-sub-header {
		grid-column: 1/-1;
		margin-bottom: -7px;
		}
		@media (min-width: 866px) {
		.ds-column-12 .ds-card-grid.ds-card-grid-hero {
		grid-template-columns: repeat(12, 1fr);
		@@ -2957,6 +2953,9 @@ main.has-snippet {
		padding: 12px 0 0;
		}

		.ds-layout .ds-sub-header {
		margin-top: 24px;
		}
		.ds-layout .ds-card-grid-load-more-button {
		display: block;
		margin: 32px auto 0;

browser/components/newtab/css/activity-stream-mac.css

+3 −4

Original line number	Diff line number	Diff line
		@@ -2649,10 +2649,6 @@ main.has-snippet {
		[lwt-newtab-brighttext] .ds-card-grid .ds-card {
		background: none;
		}
		.ds-card-grid .ds-sub-header {
		grid-column: 1/-1;
		margin-bottom: -7px;
		}
		@media (min-width: 866px) {
		.ds-column-12 .ds-card-grid.ds-card-grid-hero {
		grid-template-columns: repeat(12, 1fr);
		@@ -2961,6 +2957,9 @@ main.has-snippet {
		padding: 12px 0 0;
		}

		.ds-layout .ds-sub-header {
		margin-top: 24px;
		}
		.ds-layout .ds-card-grid-load-more-button {
		display: block;
		margin: 32px auto 0;

browser/components/newtab/css/activity-stream-windows.css

+3 −4

Original line number	Diff line number	Diff line
		@@ -2645,10 +2645,6 @@ main.has-snippet {
		[lwt-newtab-brighttext] .ds-card-grid .ds-card {
		background: none;
		}
		.ds-card-grid .ds-sub-header {
		grid-column: 1/-1;
		margin-bottom: -7px;
		}
		@media (min-width: 866px) {
		.ds-column-12 .ds-card-grid.ds-card-grid-hero {
		grid-template-columns: repeat(12, 1fr);
		@@ -2957,6 +2953,9 @@ main.has-snippet {
		padding: 12px 0 0;
		}

		.ds-layout .ds-sub-header {
		margin-top: 24px;
		}
		.ds-layout .ds-card-grid-load-more-button {
		display: block;
		margin: 32px auto 0;