Stats: improve Download CSV consistency

client/my-sites/stats/stats-download-csv/index.jsx

@@ -1,4 +1,5 @@
-import { Button, Gridicon } from '@automattic/components';
+import { Button } from '@wordpress/components';
+import { download } from '@wordpress/icons';
 import { saveAs } from 'browser-filesaver';
 import { localize } from 'i18n-calypso';
 import PropTypes from 'prop-types';
@@ -92,12 +93,12 @@ class StatsDownloadCsv extends Component {
 				onClick={ this.downloadCsv }
 				disabled={ disabled }
 				borderless={ borderless }
+				icon={ download }
 			>
 				{ ! skipQuery && siteId && statType && query && (
 					<QuerySiteStats statType={ statType } siteId={ siteId } query={ query } />
 				) }
-				<Gridicon icon="cloud-download" />{ ' ' }
-				{ translate( 'Download data as CSV', {
+				{ translate( 'Download CSV', {
 					context: 'Action shown in stats to download data as csv.',
 				} ) }
 			</Button>

client/my-sites/stats/stats-list/stats-list-card.jsx

@@ -22,6 +22,7 @@ const StatsListCard = ( {
 	showMore,
 	title,
 	titleNodes,
+	downloadCsv,
 	emptyMessage,
 	loader,
 	useShortLabel,
@@ -30,6 +31,7 @@ const StatsListCard = ( {
 	heroElement, // a node placed before the list
 	metricLabel, // a label to use for the values on the right side of the bars - `Views` by default
 	splitHeader, // instead of using a simple header containing the name of the card use additional columns and header items
+	multiHeader,
 	mainItemLabel,
 	additionalColumns, // additional columns to be displayed next to the default `views` column
 	toggleControl, // component to be placed in a split header
@@ -140,11 +142,13 @@ const StatsListCard = ( {
 			emptyMessage={ emptyMessage }
 			isEmpty={ ! loader && ( ! data || ! data?.length ) }
 			titleNodes={ titleNodes }
+			downloadCsv={ downloadCsv }
 			className={ clsx( `list-${ moduleType }`, className ) }
 			headerClassName={ listItemClassName }
 			metricLabel={ metricLabel }
 			heroElement={ heroElement }
 			splitHeader={ splitHeader }
+			multiHeader={ multiHeader }
 			mainItemLabel={ mainItemLabel }
 			additionalHeaderColumns={ additionalColumns?.header }
 			toggleControl={ toggleControl }

client/my-sites/stats/stats-module/index.jsx

@@ -183,11 +183,12 @@ class StatsModule extends Component {
 	isAllTimeList() {
 		const { summary, statType } = this.props;
 		const summarizedTypes = [
-			'statsCountryViews',
 			'statsTopPosts',
 			'statsSearchTerms',
 			'statsClicks',
 			'statsReferrers',
+			'statsTopAuthors',
+			'statsFileDownloads',
 			// statsEmailsOpen and statsEmailsClick are not used. statsEmailsSummary are used at the moment,
 			// besides this, email page uses separate summary component: <StatsEmailSummary />
 			'statsEmailsOpen',
@@ -261,9 +262,25 @@ class StatsModule extends Component {
 		const summaryLink = ! this.props.hideSummaryLink && this.getSummaryLink();
 		const displaySummaryLink = data && summaryLink;
 		const isAllTime = this.isAllTimeList();
-		const footerClass = clsx( 'stats-module__footer-actions', {
-			'stats-module__footer-actions--summary': summary,
-		} );
+
+		const renderDownloadCsv = () => {
+			if ( gateDownloads ) {
+				return <DownloadCsvUpsell siteId={ siteId } borderless />;
+			}
+
+			return (
+				<DownloadCsv
+					statType={ statType }
+					query={ query }
+					path={ path }
+					borderless
+					period={ period }
+					skipQuery={ skipQuery }
+				/>
+			);
+		};
+
+		const downloadCsv = renderDownloadCsv();
 
 		const emptyMessage = isRealTime ? 'gathering info…' : moduleStrings.empty;
 		// TODO: Translate empty message
@@ -281,6 +298,7 @@ class StatsModule extends Component {
 					useShortLabel={ useShortLabel }
 					title={ this.props.moduleStrings?.title }
 					titleNodes={ titleNodes }
+					downloadCsv={ downloadCsv }
 					emptyMessage={ emptyMessage }
 					metricLabel={ metricLabel }
 					showMore={
@@ -305,6 +323,7 @@ class StatsModule extends Component {
 					}
 					additionalColumns={ additionalColumns }
 					splitHeader={ !! additionalColumns }
+					multiHeader={ isAllTime }
 					mainItemLabel={ mainItemLabel }
 					showLeftIcon={ path === 'authors' }
 					listItemClassName={ listItemClassName }
@@ -322,22 +341,6 @@ class StatsModule extends Component {
 					}
 					formatValue={ formatValue }
 				/>
-				{ isAllTime && (
-					<div className={ footerClass }>
-						{ gateDownloads ? (
-							<DownloadCsvUpsell siteId={ siteId } borderless />
-						) : (
-							<DownloadCsv
-								statType={ statType }
-								query={ query }
-								path={ path }
-								borderless
-								period={ period }
-								skipQuery={ skipQuery }
-							/>
-						) }
-					</div>
-				) }
 			</>
 		);
 	}

client/my-sites/stats/summary/index.jsx

@@ -218,7 +218,7 @@ class StatsSummary extends Component {
 				/* eslint-disable wpcalypso/jsx-classname-namespace */
 				summaryView = (
 					<Fragment key="authors-summary">
-						{ this.renderSummaryHeader( path, statType, true, query ) }
+						{ this.renderSummaryHeader( path, statType, false, query ) }
 						<StatsModuleAuthors
 							moduleStrings={ StatsStrings.authors }
 							period={ this.props.period }
@@ -261,7 +261,7 @@ class StatsSummary extends Component {
 
 				summaryView = (
 					<Fragment key="filedownloads-summary">
-						{ this.renderSummaryHeader( path, statType, true, query ) }
+						{ this.renderSummaryHeader( path, statType, false, query ) }
 						<StatsModuleDownloads
 							moduleStrings={ StatsStrings.filedownloads }
 							period={ this.props.period }

packages/components/src/horizontal-bar-list/stats-card.scss

@@ -69,6 +69,26 @@
 			width: $value-column-width;
 			text-align: right;
 		}
+
+		.stats-download-csv {
+			color: var(--color-link);
+			gap: 4px;
+
+			&[disabled],
+			&.disabled {
+				color: var(--color-neutral-20);
+			}
+
+			&:hover:not([disabled]) {
+				color: var(--color-link-dark);
+			}
+		}
+	}
+
+	.stats-card-sub-header {
+		display: flex;
+		justify-content: space-between;
+		padding: 0 $padding-outside $header-spacer $padding-outside;
 	}
 
 	.stats-card-header--main {

packages/components/src/horizontal-bar-list/stats-card.tsx

@@ -24,9 +24,11 @@ const StatsCard = ( props: StatsCardProps ) => {
 		titleURL,
 		titleAriaLevel = 4,
 		titleNodes,
+		downloadCsv,
 		footerAction,
 		isEmpty,
 		emptyMessage,
+		multiHeader,
 		metricLabel,
 		mainItemLabel,
 		additionalHeaderColumns,
@@ -57,6 +59,22 @@ const StatsCard = ( props: StatsCardProps ) => {
 		</div>
 	);
 
+	// Show card title and download csv button on one line, description and metric label on another:
+	const multiHeaderNode = (
+		<>
+			<div className={ clsx( `${ BASE_CLASS_NAME }-header`, headerClassName ) }>
+				{ titleNode }
+				{ ! isEmpty && downloadCsv }
+			</div>
+			{ ! isEmpty && (
+				<div className={ clsx( `${ BASE_CLASS_NAME }-sub-header`, headerClassName ) }>
+					<div> All { title.toLowerCase() } </div>
+					<div>{ metricLabel ?? translate( 'Views' ) }</div>
+				</div>
+			) }
+		</>
+	);
+
 	// Show Card title on one line and all other column header(s) below:
 	// (main item, optional additional columns and value)
 	const splitHeaderNode = (
@@ -87,6 +105,16 @@ const StatsCard = ( props: StatsCardProps ) => {
 		</div>
 	);
 
+	const getHeaderNode = () => {
+		if ( multiHeader ) {
+			return multiHeaderNode;
+		}
+		if ( splitHeader ) {
+			return splitHeaderNode;
+		}
+		return simpleHeaderNode;
+	};
+
 	return (
 		<div
 			className={ clsx( className, BASE_CLASS_NAME, {
@@ -101,7 +129,7 @@ const StatsCard = ( props: StatsCardProps ) => {
 					</div>
 				) }
 				<div className={ `${ BASE_CLASS_NAME }--header-and-body` }>
-					{ splitHeader ? splitHeaderNode : simpleHeaderNode }
+					{ getHeaderNode() }
 					<div
 						className={ clsx( `${ BASE_CLASS_NAME }--body`, {
 							[ `${ BASE_CLASS_NAME }--body-empty` ]: isEmpty,

packages/components/src/horizontal-bar-list/types.ts

@@ -76,6 +76,10 @@ export type StatsCardProps = {
 	 * @property {React.ReactNode} titleNodes - additional nodes to be displayed next to the title - use TitleExtras component for unified resutl.
 	 */
 	titleNodes?: React.ReactNode;
+	/**
+	 * @property {React.ReactNode} downloadCsv - a node to be displayed next to the title - use DownloadCsv component for unified result.
+	 */
+	downloadCsv?: React.ReactNode;
 	footerAction?: {
 		label?: string;
 		url?: string;
@@ -98,6 +102,10 @@ export type StatsCardProps = {
 	 * @property {React.ReactNode} heroElement - a node placed before the list
 	 */
 	heroElement?: React.ReactNode;
+	/**
+	 * @property {boolean} multiHeader - adds a sub-header row, including metric label, after the header containing the name of the card and download csv button
+	 */
+	multiHeader?: boolean;
 	/**
 	 * @property {boolean} splitHeader - instead of using a simple header containing the name of the card use additional columns and header items
 	 */