Site Profiler: Add MetricsSection component

client/site-profiler/components/metrics-menu/index.tsx

@@ -22,6 +22,8 @@ const SectionNavbar = styled( SectionNav )`
 interface MetricsMenuProps {
 	basicMetricsRef?: React.RefObject< HTMLObjectElement >;
 	onCTAClick: () => void;
+	performanceMetricsRef?: React.RefObject< HTMLObjectElement >;
+	healthScoresRef?: React.RefObject< HTMLObjectElement >;
 }
 
 interface MenuItem {
@@ -31,33 +33,51 @@ interface MenuItem {
 
 enum MetricsMenuTabs {
 	basic = 'basic',
+	performance = 'performance',
+	health = 'health',
 }
 
 export const MetricsMenu: React.FC< MetricsMenuProps > = ( props ) => {
 	const translate = useTranslate();
-	const { basicMetricsRef, onCTAClick } = props;
+	const { basicMetricsRef, performanceMetricsRef, healthScoresRef, onCTAClick } = props;
 
 	const references = {
 		[ MetricsMenuTabs.basic ]: basicMetricsRef,
+		[ MetricsMenuTabs.performance ]: performanceMetricsRef,
+		[ MetricsMenuTabs.health ]: healthScoresRef,
 	};
 
 	const menuItems: MenuItem[] = [
 		{
 			id: MetricsMenuTabs.basic,
+			label: translate( 'Basic Performance Metrics' ),
+		},
+		{
+			id: MetricsMenuTabs.performance,
 			label: translate( 'Performance Metrics' ),
 		},
+		{
+			id: MetricsMenuTabs.health,
+			label: translate( 'Health Scores' ),
+		},
 	];
 
 	const [ selectedTab, setSelectedTab ] = useState< MetricsMenuTabs | undefined >();
 	const basicMetricsVisible = useIsMenuSectionVisible( basicMetricsRef );
+	const performanceMetricsVisible = useIsMenuSectionVisible( performanceMetricsRef );
+	const healthScoresVisible = useIsMenuSectionVisible( healthScoresRef );
 
 	useEffect( () => {
 		if ( basicMetricsVisible ) {
 			setSelectedTab( MetricsMenuTabs.basic );
+		} else if ( performanceMetricsVisible ) {
+			setSelectedTab( MetricsMenuTabs.performance );
+		} else if ( healthScoresVisible ) {
+			setSelectedTab( MetricsMenuTabs.health );
 		} else {
 			setSelectedTab( undefined );
 		}
-	}, [ basicMetricsVisible ] );
+	}, [ basicMetricsVisible, performanceMetricsVisible, healthScoresVisible ] );
 
 	const onMenuItemClick = ( tab: MetricsMenuTabs ) => {
 		if ( references[ tab ]?.current ) {

client/site-profiler/components/metrics-section/index.tsx

@@ -0,0 +1,88 @@
+import styled from '@emotion/styled';
+import React, { ForwardedRef, forwardRef } from 'react';
+import { calculateMetricsSectionScrollOffset } from 'calypso/site-profiler/utils/calculate-metrics-section-scroll-offset';
+
+interface MetricsSectionProps {
+	name: string;
+	title: string | React.ReactNode;
+	subtitle: string | React.ReactNode;
+	children?: React.ReactNode;
+}
+
+const Container = styled.div`
+	margin: 150px 0;
+	scroll-margin-top: ${ calculateMetricsSectionScrollOffset }px;
+`;
+
+const NameSpan = styled.span`
+	font-family: 'SF Pro Text';
+	color: var( --studio-gray-40 );
+	font-size: 16px;
+	margin-bottom: 8px;
+`;
+
+const Title = styled.div`
+	font-family: 'SF Pro Display';
+	font-size: 60px;
+	font-weight: 400;
+	line-height: 100%;
+	margin-bottom: 24px;
+
+	span {
+		font-family: 'SF Pro Display';
+		font-size: 60px;
+		font-style: normal;
+		font-weight: 510;
+		line-height: 100%;
+		letter-spacing: -1.5px;
+
+		&.success {
+			background: linear-gradient( 270deg, #349f4b 49.73%, #3858e9 100% );
+			background-clip: text;
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+		}
+
+		&.alert {
+			background: linear-gradient( 270deg, #d63638 10.23%, #5200ff 100% );
+			background-clip: text;
+			-webkit-background-clip: text;
+			-webkit-text-fill-color: transparent;
+		}
+	}
+`;
+
+const Subtitle = styled.span`
+	cursor: pointer;
+	color: var( --studio-gray-70 );
+	font-family: 'SF Pro Text';
+	font-size: 16px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 28px;
+
+	&:hover {
+		text-decoration-line: underline;
+		color: var( --studio-gray-80 );
+	}
+`;
+
+const Content = styled.div`
+	margin-top: 64px;
+`;
+
+export const MetricsSection = forwardRef< HTMLObjectElement, MetricsSectionProps >(
+	( props, ref: ForwardedRef< HTMLObjectElement > ) => {
+		const { name, title, subtitle, children } = props;
+
+		return (
+			<Container ref={ ref }>
+				<NameSpan>{ name }</NameSpan>
+				<Title>{ title }</Title>
+				<Subtitle>{ subtitle }</Subtitle>
+
+				{ children && <Content>{ children }</Content> }
+			</Container>
+		);
+	}
+);

client/site-profiler/components/site-profiler.tsx

@@ -25,6 +25,7 @@ import HostingInformation from './hosting-information';
 import HostingIntro from './hosting-intro';
 import { MetricsMenu } from './metrics-menu';
 import './styles.scss';
+import { MetricsSection } from './metrics-section';
 
 const debug = debugFactory( 'apps:site-profiler' );
 
@@ -36,6 +37,8 @@ interface Props {
 export default function SiteProfiler( props: Props ) {
 	const { routerDomain } = props;
 	const basicMetricsRef = useRef( null );
+	const performanceMetricsRef = useRef( null );
+	const healthScoresRef = useRef( null );
 	const [ isGetReportFormOpen, setIsGetReportFormOpen ] = useState( false );
 
 	const {
@@ -164,9 +167,39 @@ export default function SiteProfiler( props: Props ) {
 						<LayoutBlockSection>
 							<MetricsMenu
 								basicMetricsRef={ basicMetricsRef }
+								performanceMetricsRef={ performanceMetricsRef }
+								healthScoresRef={ healthScoresRef }
 								onCTAClick={ () => setIsGetReportFormOpen( true ) }
 							/>
 							<BasicMetrics ref={ basicMetricsRef } basicMetrics={ basicMetrics.basic } />
+							<MetricsSection
+								name={ translate( 'Performance Metrics' ) }
+								title={ translate(
+									"Your site {{success}}performs well{{/success}}, but there's always room to be faster and smoother for your visitors.",
+									{
+										components: {
+											success: <span className="success" />,
+											alert: <span className="alert" />,
+										},
+									}
+								) }
+								subtitle={ translate( "Boost your site's performance" ) }
+								ref={ performanceMetricsRef }
+							/>
+							<MetricsSection
+								name={ translate( 'Health Scores' ) }
+								title={ translate(
+									"Your site's health scores {{alert}}suggest critical area{{/alert}} but need attention to prevent low performance.",
+									{
+										components: {
+											success: <span className="success" />,
+											alert: <span className="alert" />,
+										},
+									}
+								) }
+								subtitle={ translate( "Optimize your site's health" ) }
+								ref={ healthScoresRef }
+							/>
 						</LayoutBlockSection>
 					) }
 				</LayoutBlock>