feat: add new ButtonCard component (#961)

* feat: add new button-card component

* feat(components-demo): add button-card examples

* style(card): remove unused class

* feat(dashboard): rework wizard using button-card

* feat: improve button-card is-small style and add support for chevron

* fix: typo

assets/components/src/button-card/index.js

@@ -0,0 +1,49 @@
+/**
+ * Button Card
+ */
+
+/**
+ * WordPress dependencies
+ */
+import { Component } from '@wordpress/element';
+import { Icon, chevronRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+class ButtonCard extends Component {
+	/**
+	 * Render
+	 */
+	render() {
+		const { chevron, className, desc, grouped, icon, isSmall, title, ...otherProps } = this.props;
+		const classes = classnames(
+			'newspack-button-card',
+			className,
+			chevron && 'has-chevron',
+			grouped && 'grouped',
+			icon && 'has-icon',
+			isSmall && 'is-small'
+		);
+
+		return (
+			<a className={ classes } { ...otherProps }>
+				{ icon && <Icon icon={ icon } height={ 48 } width={ 48 } /> }
+				<div>
+					{ title && <div className="title">{ title }</div> }
+					{ desc && <div className="desc">{ desc }</div> }
+				</div>
+				{ chevron && <Icon icon={ chevronRight } height={ 24 } width={ 24 } /> }
+			</a>
+		);
+	}
+}
+
+export default ButtonCard;

assets/components/src/button-card/style.scss

@@ -0,0 +1,140 @@
+/**
+ * Button Card
+ */
+
+@import '../../../shared/scss/colors';
+@import '~@wordpress/base-styles/colors';
+
+.newspack-button-card {
+	border-radius: 3px;
+	border: 1px solid $light-gray-500;
+	box-shadow: inset 0 0 0 2px transparent;
+	cursor: pointer;
+	display: block;
+	margin: 32px 0;
+	padding: 32px;
+	text-decoration: none;
+	transition: background-color 125ms ease-in-out, border-color 125ms ease-in-out,
+		box-shadow 125ms ease-in-out;
+
+	&:active,
+	&:focus,
+	&:hover {
+		background-color: $light-gray-100;
+		color: $primary-600;
+		text-decoration: none;
+
+		.title,
+		.desc {
+			color: inherit;
+		}
+	}
+
+	&:focus {
+		border-color: $primary-500;
+		box-shadow: inset 0 0 0 2px $primary-500 !important;
+		outline: none !important;
+		position: relative;
+	}
+
+	.title,
+	.desc {
+		line-height: 24px;
+		transition: color 125ms ease-in-out;
+	}
+
+	.title {
+		color: $dark-gray-900;
+		font-size: 17px;
+		font-weight: bold;
+	}
+
+	.desc {
+		color: $dark-gray-300;
+		font-size: 14px;
+	}
+
+	// Grouped
+
+	&.grouped {
+		border-radius: 0;
+
+		& + &:not( .br--top ) {
+			margin-top: -33px;
+		}
+
+		&.br--bottom {
+			border-bottom-left-radius: 3px;
+			border-bottom-right-radius: 3px;
+		}
+
+		&.br--top {
+			border-top-left-radius: 3px;
+			border-top-right-radius: 3px;
+		}
+	}
+
+	// Chevron & Icon
+
+	&.has-chevron,
+	&.has-icon {
+		align-items: center;
+		display: grid;
+		grid-gap: 16px;
+		grid-template-columns: auto 24px;
+
+		&:active,
+		&:focus,
+		&:hover {
+			svg {
+				fill: currentColor;
+			}
+		}
+
+		svg {
+			fill: $primary-500;
+			transition: fill 125ms ease-in-out;
+		}
+	}
+
+	&.has-icon {
+		grid-template-columns: 48px auto;
+
+		&.has-chevron {
+			grid-template-columns: 48px auto 24px;
+		}
+	}
+
+	// Is Small
+
+	&.is-small {
+		padding: 16px;
+
+		&.has-chevron,
+		&.has-icon {
+			grid-gap: 8px;
+
+			svg {
+				height: 24px;
+				width: 24px;
+			}
+		}
+
+		&.has-icon {
+			grid-template-columns: 24px auto;
+
+			&.has-chevron {
+				grid-template-columns: 24px auto 24px;
+			}
+		}
+
+		.title {
+			font-size: 14px;
+		}
+
+		.desc {
+			font-size: 12px;
+			line-height: 16px;
+		}
+	}
+}

assets/components/src/card/style.scss

@@ -41,18 +41,6 @@
 		}
 	}
 
-	// Is Clickable
-
-	&--is-clickable {
-		cursor: pointer;
-		transition: box-shadow 150ms ease-in-out, transform 150ms ease-in-out;
-
-		&:hover {
-			box-shadow: 0 8px 16px rgba( black, 0.08 );
-			transform: translateY( -4px );
-		}
-	}
-
 	// Is Small
 
 	&__is-small {

assets/components/src/index.js

@@ -1,7 +1,8 @@
 export { default as ActionCard } from './action-card';
 export { default as AutocompleteTokenField } from './autocomplete-tokenfield';
-export { default as Button } from './button';
 export { default as AutocompleteWithSuggestions } from './autocomplete-with-suggestions';
+export { default as Button } from './button';
+export { default as ButtonCard } from './button-card';
 export { default as ButtonGroup } from './button-group';
 export { default as Card } from './card';
 export { default as PreviewBox } from './preview-box';

assets/wizards/componentsDemo/index.js

@@ -14,6 +14,7 @@ import apiFetch from '@wordpress/api-fetch';
 import { decodeEntities } from '@wordpress/html-entities';
 import { addQueryArgs } from '@wordpress/url';
 import { __ } from '@wordpress/i18n';
+import { audio, plus, reusableBlock, typography } from '@wordpress/icons';
 
 /**
  * Internal dependencies.
@@ -25,6 +26,7 @@ import {
 	CheckboxControl,
 	Card,
 	Button,
+	ButtonCard,
 	Handoff,
 	Notice,
 	Footer,
@@ -522,6 +524,51 @@ class ComponentsDemo extends Component {
 							</Button>
 						</Card>
 					</Card>
+					<Card>
+						<h2>{ __( 'ButtonCard' ) }</h2>
+						<ButtonCard
+							href="admin.php?page=newspack-site-design-wizard"
+							title={ __( 'Site Design', 'newspack' ) }
+							desc={ __( 'Branding, color, typography, layouts', 'newspack' ) }
+							icon={ typography }
+							chevron
+						/>
+						<ButtonCard
+							href="#"
+							title={ __( 'Start a new site', 'newspack' ) }
+							desc={ __( "You don't have content to import", 'newspack' ) }
+							icon={ plus }
+							className="br--top"
+							grouped
+						/>
+						<ButtonCard
+							href="#"
+							title={ __( 'Migrate an existing site', 'newspack' ) }
+							desc={ __( 'You have content to import', 'newspack' ) }
+							icon={ reusableBlock }
+							className="br--bottom"
+							grouped
+						/>
+						<ButtonCard
+							href="#"
+							title={ __( 'Add a new Podcast', 'newspack' ) }
+							desc="isSmall"
+							icon={ audio }
+							className="br--top"
+							isSmall
+							grouped
+						/>
+						<ButtonCard
+							href="#"
+							title={ __( 'Add a new Font', 'newspack' ) }
+							desc="isSmall + chevron"
+							icon={ typography }
+							className="br--bottom"
+							chevron
+							isSmall
+							grouped
+						/>
+					</Card>
 				</div>
 				<Footer />
 			</Fragment>

assets/wizards/dashboard/index.js

@@ -20,7 +20,7 @@ import { Icon, plugins } from '@wordpress/icons';
  */
 import {
 	GlobalNotices,
-	Button,
+	ButtonCard,
 	Card,
 	Waiting,
 	Footer,
@@ -30,11 +30,6 @@ import {
 import DashboardCard from './views/dashboardCard';
 import './style.scss';
 
-/**
- * External dependencies.
- */
-import classnames from 'classnames';
-
 const Dashboard = ( { items } ) => {
 	const params = qs.parse( window.location.search );
 	const authCode = params.code;
@@ -106,30 +101,28 @@ const Dashboard = ( { items } ) => {
 						</div>
 					) }
 					{ displayAuth ? (
-						<Card className={ classnames( 'newspack-dashboard-card', 'google-oauth2' ) }>
+						<>
 							{ userBasicInfo ? (
-								<div className="newspack-dashboard-card__contents">
-									<Icon icon={ plugins } />
-									<div className="newspack-dashboard-card__header">
+								<Card className="newspack-dashboard-card">
+									<Icon icon={ plugins } height={ 48 } width={ 48 } />
+									<div>
 										<h2>{ __( 'Google OAuth2' ) }</h2>
 										<p>
 											{ __( 'Authorized Google as', 'newspack' ) }{' '}
 											<strong>{ userBasicInfo.email }</strong>
 										</p>
 									</div>
-								</div>
+								</Card>
 							) : (
-								<Button onClick={ goToAuthPage }>
-									<div className="newspack-dashboard-card__contents">
-										<Icon icon={ plugins } />
-										<div className="newspack-dashboard-card__header">
-											<h2>{ __( 'Google OAuth2' ) }</h2>
-											<p>{ __( 'Authorize Newspack with Google', 'newspack' ) }</p>
-										</div>
-									</div>
-								</Button>
+								<ButtonCard
+									onClick={ goToAuthPage }
+									title={ __( 'Google OAuth2', 'newspack' ) }
+									desc={ __( 'Authorize Newspack with Google', 'newspack' ) }
+									icon={ plugins }
+									tabIndex="0"
+								/>
 							) }
-						</Card>
+						</>
 					) : null }
 				</Grid>
 			</div>