Combine educational cards

Automattic · Apr 15, 2020 · b806c10 · b806c10
1 parent 6395378
commit b806c10
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 128 deletions.
diff --git a/client/components/dot-pager/index.jsx b/client/components/dot-pager/index.jsx
@@ -18,6 +18,7 @@ import './style.scss';
 
 export const DotPagerControls = ( { currentPage, numberOfPages, setCurrentPage } ) => {
 	const translate = useTranslate();
+
 	const canGoBack = currentPage > 0;
 	const canGoForward = currentPage < numberOfPages - 1;
 	return (

diff --git a/client/my-sites/customer-home/cards/education/educational-card/index.jsx b/client/my-sites/customer-home/cards/education/educational-card/index.jsx
@@ -0,0 +1,29 @@
+/**
+ * External dependencies
+ */
+import React from 'react';
+import { isDesktop } from '@automattic/viewport';
+
+/**
+ * Style dependencies
+ */
+import './style.scss';
+
+const EducationalCard = ( { header, text, links, illustration } ) => {
+	return (
+		<div className="educational-card">
+			<div className="educational-card__content">
+				<h3>{ header }</h3>
+				<p className="educational-card__text customer-home__card-subheader">{ text }</p>
+				{ links }
+			</div>
+			{ isDesktop() && (
+				<div className="educational-card__illustration">
+					<img src={ illustration } alt="" />
+				</div>
+			) }
+		</div>
+	);
+};
+
+export default EducationalCard;
diff --git a/client/my-sites/customer-home/cards/education/educational-card/style.scss b/client/my-sites/customer-home/cards/education/educational-card/style.scss
@@ -0,0 +1,22 @@
+.educational-card {
+	display: flex;
+
+	.educational-card__content {
+		flex: 60%;
+	}
+
+	.educational-card__illustration {
+		flex: 40%;
+		margin-left: 16px;
+	}
+
+	h3 {
+		font-weight: 700;
+		margin-bottom: 16px;
+	}
+
+	.inline-support-link {
+		display: block;
+		margin-bottom: 2px;
+	}
+}
diff --git a/client/my-sites/customer-home/cards/education/free-photo-library/index.jsx b/client/my-sites/customer-home/cards/education/free-photo-library/index.jsx
@@ -3,76 +3,39 @@
  */
 import React from 'react';
 import { useTranslate } from 'i18n-calypso';
-import { Button, Card } from '@automattic/components';
-import { isDesktop } from '@automattic/viewport';
-import { connect } from 'react-redux';
 
 /**
  * Internal dependencies
  */
-import CardHeading from 'components/card-heading';
-import { openSupportArticleDialog } from 'state/inline-support-article/actions';
 import { localizeUrl } from 'lib/i18n-utils';
-import {
-	withAnalytics,
-	composeAnalytics,
-	recordTracksEvent,
-	bumpStat,
-} from 'state/analytics/actions';
-
-/**
- * Style dependencies
- */
-import './style.scss';
+import InlineSupportLink from 'components/inline-support-link';
+import EducationalCard from '../educational-card';
 
 /**
  * Image dependencies
  */
 import freePhotoLibraryVideoPrompt from 'assets/images/customer-home/illustration--free-photo-library.svg';
 
-const FreePhotoLibrary = ( { openSupportArticleDialogAndTrack } ) => {
+const FreePhotoLibrary = () => {
 	const translate = useTranslate();
 
 	return (
-		<Card className="free-photo-library">
-			{ isDesktop() && (
-				<button onClick={ openSupportArticleDialogAndTrack.bind( this, 'prompt' ) }>
-					<img
-						className="free-photo-library__demonstration-image"
-						src={ freePhotoLibraryVideoPrompt }
-						alt={ translate( 'Free Photo Library demonstration' ) }
-					/>
-				</button>
+		<EducationalCard
+			header={ translate( 'The WordPress.com free photo library' ) }
+			text={ translate(
+				'Our free photo library integrates your site with over 40,000 beautiful copyright-free photos to create stunning designs.'
 			) }
-			<CardHeading>{ translate( 'Over 40,000 Free Photos' ) }</CardHeading>
-			<p className="free-photo-library__text customer-home__card-subheader">
-				{ translate(
-					'The WordPress.com Free Photo Library integrates ' +
-						'your site with beautiful copyright-free photos to ' +
-						'create stunning designs.'
-				) }
-			</p>
-			<Button onClick={ openSupportArticleDialogAndTrack.bind( this, 'button' ) }>
-				{ translate( 'Learn more' ) }
-			</Button>
-		</Card>
+			links={
+				<InlineSupportLink
+					supportPostId={ 145498 }
+					supportLink={ localizeUrl( 'https://wordpress.com/support/free-photo-library/' ) }
+					showIcon={ false }
+					text={ translate( 'Learn more' ) }
+				/>
+			}
+			illustration={ freePhotoLibraryVideoPrompt }
+		/>
 	);
 };
 
-const openSupportArticleDialogAndTrack = clickSource =>
-	withAnalytics(
-		composeAnalytics(
-			clickSource === 'prompt'
-				? recordTracksEvent( 'calypso_customer_home_free_photo_library_video_dialog_view' )
-				: recordTracksEvent( 'calypso_customer_home_free_photo_library_video_support_page_view' ),
-			clickSource === 'prompt'
-				? bumpStat( 'calypso_customer_home', 'view_free_photo_library_video' )
-				: bumpStat( 'calypso_customer_home', 'view_free_photo_library_learn_more' )
-		),
-		openSupportArticleDialog( {
-			postId: 145498,
-			postUrl: localizeUrl( 'https://wordpress.com/support/free-photo-library/' ),
-		} )
-	);
-
-export default connect( null, { openSupportArticleDialogAndTrack } )( FreePhotoLibrary );
+export default FreePhotoLibrary;
diff --git a/client/my-sites/customer-home/cards/education/free-photo-library/style.scss b/client/my-sites/customer-home/cards/education/free-photo-library/style.scss
diff --git a/client/my-sites/customer-home/cards/education/mastering-gutenberg/index.jsx b/client/my-sites/customer-home/cards/education/mastering-gutenberg/index.jsx
@@ -3,54 +3,43 @@
  */
 import React from 'react';
 import { useTranslate } from 'i18n-calypso';
-import { Card } from '@automattic/components';
-import { isMobile } from '@automattic/viewport';
 
 /**
  * Internal dependencies
  */
-import CardHeading from 'components/card-heading';
 import InlineSupportLink from 'components/inline-support-link';
 import { localizeUrl } from 'lib/i18n-utils';
-
-/**
- * Style dependencies
- */
-import './style.scss';
+import EducationalCard from '../educational-card';
 
 const MasteringGutenberg = () => {
 	const translate = useTranslate();
 
 	return (
-		<Card className="mastering-gutenberg">
-			{ ! isMobile() && (
-				<div className="mastering-gutenberg__illustration">
-					<img src="/calypso/images/illustrations/gutenberg-mini.svg" alt="" />
-				</div>
+		<EducationalCard
+			header={ translate( 'Master the Block Editor' ) }
+			text={ translate(
+				'Learn how to create stunning post and page layouts through our video guides.'
 			) }
-			<div>
-				<CardHeading>{ translate( 'Master the Block Editor' ) }</CardHeading>
-				<p className="mastering-gutenberg__text customer-home__card-subheader">
-					{ translate(
-						'Learn how to create stunning post and page layouts through our video guides.'
-					) }
-				</p>
-				<InlineSupportLink
-					supportPostId={ 147594 }
-					supportLink={ localizeUrl( 'https://wordpress.com/support/wordpress-editor/#blocks' ) }
-					showIcon={ false }
-					text={ translate( 'Customizing posts and pages with blocks' ) }
-				/>
-				<InlineSupportLink
-					supportPostId={ 147594 }
-					supportLink={ localizeUrl(
-						'https://wordpress.com/support/wordpress-editor/#configuring-a-block'
-					) }
-					showIcon={ false }
-					text={ translate( 'Adjusting settings of blocks' ) }
-				/>
-			</div>
-		</Card>
+			links={
+				<>
+					<InlineSupportLink
+						supportPostId={ 147594 }
+						supportLink={ localizeUrl( 'https://wordpress.com/support/wordpress-editor/#blocks' ) }
+						showIcon={ false }
+						text={ translate( 'Customizing posts and pages with blocks' ) }
+					/>
+					<InlineSupportLink
+						supportPostId={ 147594 }
+						supportLink={ localizeUrl(
+							'https://wordpress.com/support/wordpress-editor/#configuring-a-block'
+						) }
+						showIcon={ false }
+						text={ translate( 'Adjusting settings of blocks' ) }
+					/>
+				</>
+			}
+			illustration="/calypso/images/illustrations/gutenberg-mini.svg"
+		/>
 	);
 };
 

diff --git a/client/my-sites/customer-home/cards/education/mastering-gutenberg/style.scss b/client/my-sites/customer-home/cards/education/mastering-gutenberg/style.scss
diff --git a/client/my-sites/customer-home/locations/secondary/learn-grow/index.jsx b/client/my-sites/customer-home/locations/secondary/learn-grow/index.jsx
@@ -12,10 +12,11 @@ import FreePhotoLibrary from 'my-sites/customer-home/cards/education/free-photo-
 import MasteringGutenberg from 'my-sites/customer-home/cards/education/mastering-gutenberg';
 import { getSelectedSiteId } from 'state/ui/selectors';
 import { getHomeLayout } from 'state/selectors/get-home-layout';
+import DotPager from 'components/dot-pager';
 
 const cardComponents = {
 	'home-education-free-photo-library': FreePhotoLibrary,
-	'home-education-mastering-gutenberg': MasteringGutenberg,
+	'home-education-gutenberg': MasteringGutenberg,
 };
 
 const LearnGrow = ( { cards } ) => {
@@ -26,14 +27,16 @@ const LearnGrow = ( { cards } ) => {
 			<h2 className="learn-grow__heading customer-home__section-heading">
 				{ translate( 'Learn and grow' ) }
 			</h2>
-			{ cards &&
-				cards.map(
-					( card, index ) =>
-						cardComponents[ card ] &&
-						React.createElement( cardComponents[ card ], {
-							key: index,
-						} )
-				) }
+			<DotPager>
+				{ cards &&
+					cards.map(
+						( card, index ) =>
+							cardComponents[ card ] &&
+							React.createElement( cardComponents[ card ], {
+								key: index,
+							} )
+					) }
+			</DotPager>
 		</>
 	);
 };