Pills and tooltips in product step of OBW

client/devdocs/examples.json

@@ -21,6 +21,7 @@
 	{ "component": "List" },
 	{ "component": "OrderStatus" },
 	{ "component": "Pagination" },
+	{ "component": "Pill" },
 	{ "component": "ProductImage" },
 	{ "component": "Rating" },
 	{ "component": "ScrollTo" },

client/profile-wizard/steps/product-types.js

@@ -1,10 +1,10 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { Component, Fragment } from '@wordpress/element';
 import { compose } from '@wordpress/compose';
-import { Button, CheckboxControl } from '@wordpress/components';
+import { Button, CheckboxControl, Tooltip } from '@wordpress/components';
 import { includes, filter, get } from 'lodash';
 import interpolateComponents from 'interpolate-components';
 import { withDispatch, withSelect } from '@wordpress/data';
@@ -13,13 +13,42 @@ import { withDispatch, withSelect } from '@wordpress/data';
  * WooCommerce dependencies
  */
 import { getSetting } from '@woocommerce/wc-admin-settings';
-import { H, Card, Link } from '@woocommerce/components';
+import { H, Card, Link, Pill } from '@woocommerce/components';
 import { ONBOARDING_STORE_NAME } from '@woocommerce/data';
 
 /**
  * Internal dependencies
  */
 import { recordEvent } from 'lib/tracks';
+import './product-types.scss';
+
+function getLabel( description, yearlyPrice ) {
+	if ( ! yearlyPrice ) {
+		return description;
+	}
+
+	const monthlyPrice = ( yearlyPrice / 12.0 ).toFixed( 2 );
+	const priceDescription = sprintf(
+		__( '$%f per month, billed annually', 'woocommerce-admin' ),
+		monthlyPrice
+	);
+
+	return (
+		<Fragment>
+			<span className="woocommerce-product-wizard__product-types__label">
+				{ description }
+			</span>
+			<Tooltip
+				text={ __(
+					"This product type requires a paid extension. We'll add this to a cart so that you can purchase and install it later.",
+					'woocommerce-admin'
+				) }
+			>
+				<Pill>{ priceDescription }</Pill>
+			</Tooltip>
+		</Fragment>
+	);
+}
 
 class ProductTypes extends Component {
 	constructor( props ) {
@@ -106,8 +135,9 @@ class ProductTypes extends Component {
 	render() {
 		const { productTypes = {} } = getSetting( 'onboarding', {} );
 		const { error, selected } = this.state;
+
 		return (
-			<Fragment>
+			<div className="woocommerce-profile-wizard__product-types">
 				<H className="woocommerce-profile-wizard__header-title">
 					{ __(
 						'What type of products will be listed?',
@@ -119,6 +149,11 @@ class ProductTypes extends Component {
 				<Card>
 					<div className="woocommerce-profile-wizard__checkbox-group">
 						{ Object.keys( productTypes ).map( ( slug ) => {
+							const label = getLabel(
+								productTypes[ slug ].label,
+								productTypes[ slug ].yearly_price
+							);
+							const moreUrl = productTypes[ slug ].more_url;
 							const helpText =
 								productTypes[ slug ].description &&
 								interpolateComponents( {
@@ -128,24 +163,20 @@ class ProductTypes extends Component {
 											? ' {{moreLink/}}'
 											: '' ),
 									components: {
-										moreLink: productTypes[ slug ]
-											.more_url ? (
-												<Link
-													href={
-														productTypes[ slug ]
-															.more_url
-													}
-													target="_blank"
-													type="external"
-													onClick={ () =>
-														this.onLearnMore( slug )
-													}
-												>
-													{ __(
-														'Learn more',
-														'woocommerce-admin'
-													) }
-												</Link>
+										moreLink: moreUrl ? (
+											<Link
+												href={ moreUrl }
+												target="_blank"
+												type="external"
+												onClick={ () =>
+													this.onLearnMore( slug )
+												}
+											>
+												{ __(
+													'Learn more',
+													'woocommerce-admin'
+												) }
+											</Link>
 										) : (
 											''
 										),
@@ -155,7 +186,7 @@ class ProductTypes extends Component {
 							return (
 								<CheckboxControl
 									key={ slug }
-									label={ productTypes[ slug ].label }
+									label={ label }
 									help={ helpText }
 									onChange={ () => this.onChange( slug ) }
 									checked={ selected.includes( slug ) }
@@ -170,22 +201,26 @@ class ProductTypes extends Component {
 						) }
 					</div>
 
-					<Button
-						isPrimary
-						onClick={ this.onContinue }
-						disabled={ ! selected.length }
-					>
-						{ __( 'Continue', 'woocommerce-admin' ) }
-					</Button>
+					<div className="woocommerce-profile-wizard__card-actions">
+						<Button
+							isPrimary
+							onClick={ this.onContinue }
+							disabled={ ! selected.length }
+						>
+							{ __( 'Continue', 'woocommerce-admin' ) }
+						</Button>
+					</div>
 				</Card>
-			</Fragment>
+			</div>
 		);
 	}
 }
 
 export default compose(
 	withSelect( ( select ) => {
-		const { getProfileItems, getOnboardingError } = select( ONBOARDING_STORE_NAME );
+		const { getProfileItems, getOnboardingError } = select(
+			ONBOARDING_STORE_NAME
+		);
 
 		return {
 			isError: Boolean( getOnboardingError( 'updateProfileItems' ) ),

client/profile-wizard/steps/product-types.scss

@@ -0,0 +1,18 @@
+.woocommerce-profile-wizard__product-types {
+	.components-base-control__field {
+		display: flex;
+	}
+
+	.woocommerce-product-wizard__product-types__label {
+		display: inline-block;
+		margin-right: 12px;
+	}
+
+	.woocommerce-profile-wizard__checkbox {
+		border-bottom: 1px solid $gray-100;
+	}
+
+	.woocommerce-profile-wizard__card-actions .components-button.is-primary {
+		margin-top: $gap;
+	}
+}

client/profile-wizard/style.scss

@@ -247,7 +247,7 @@
 			margin-top: 0;
 			margin-bottom: 0;
 			position: relative;
-			padding: $gap-small $gap;
+			padding: $gap-large $gap;
 			min-height: 56px;
 
 			.components-base-control {
@@ -260,11 +260,7 @@
 
 			label.components-checkbox-control__label {
 				color: $studio-gray-80;
-				margin-top: $gap-smallest;
-			}
-
-			label.components-checkbox-control__label {
-				margin-left: $gap-large - $gap-smallest;
+				margin-left: $gap-small;
 			}
 
 			.components-base-control__help {

client/stylesheets/abstracts/_colors.scss

@@ -2,6 +2,11 @@
 
 @import 'node_modules/@automattic/color-studio/dist/color-variables.scss';
 
+// TODO: Remove this when the next update of @wordpress/base-styles is
+// released (see https://github.com/woocommerce/woocommerce-admin/pull/4707/files#r451921109)
+$gray-700: #757575;		// Meets 4.6:1 text contrast against white.
+$gray-100: #f0f0f0;
+
 $transparent: rgba(255, 255, 255, 0);
 
 // Greys

docs/components/_sidebar.md

@@ -30,6 +30,7 @@
     * [List](components/packages/list/README.md)
     * [OrderStatus](components/packages/order-status/README.md)
     * [Pagination](components/packages/pagination/README.md)
+    * [Pill](components/packages/pill/README.md)
     * [Plugins](components/packages/plugins/README.md)
     * [ProductImage](components/packages/product-image/README.md)
     * [Rating](components/packages/rating/README.md)
@@ -47,5 +48,6 @@
     * [Tag](components/packages/tag/README.md)
     * [TextControlWithAffixes](components/packages/text-control-with-affixes/README.md)
     * [TextControl](components/packages/text-control/README.md)
+    * [Timeline](components/packages/timeline/README.md)
     * [ViewMoreList](components/packages/view-more-list/README.md)
     * [WebPreview](components/packages/web-preview/README.md)

packages/components/CHANGELOG.md

@@ -12,6 +12,7 @@
 - Fix `<SelectControl />` component to allow clicking anywhere on options in list to select.
 - Add support for `<List />` component item tags and link types.
 - Add `<List />` and `<Link />` components to Storybook.
+- Add `<Pill />` component.
 
 ## Breaking Changes
 - Removed `SplitButton` because its not being used.

packages/components/src/index.js

@@ -30,6 +30,7 @@ export { default as MenuItem } from './ellipsis-menu/menu-item';
 export { default as MenuTitle } from './ellipsis-menu/menu-title';
 export { default as OrderStatus } from './order-status';
 export { default as Pagination } from './pagination';
+export { default as Pill } from './pill';
 export { default as Plugins } from './plugins';
 export { default as ProductImage } from './product-image';
 export { default as ProductRating } from './rating/product';

packages/components/src/pill/README.md

@@ -0,0 +1,9 @@
+# Pill
+
+Use `Pill` to display a pill element containing child content.
+
+## Usage
+
+```jsx
+<Pill>Content</Pill>
+```

packages/components/src/pill/docs/example.js

@@ -0,0 +1,10 @@
+/**
+ * Internal dependencies
+ */
+import { Pill } from '@woocommerce/components';
+
+export default () => {
+	return (
+		<Pill>Content</Pill>
+	);
+};

packages/components/src/pill/index.js

@@ -0,0 +1 @@
+export { Pill as default } from './pill';

packages/components/src/pill/pill.js

@@ -0,0 +1,7 @@
+export function Pill( { children } ) {
+	return (
+		<span className="woocommerce-pill">
+			{ children }
+		</span>
+	);
+}

packages/components/src/pill/stories/index.js

@@ -0,0 +1,15 @@
+/**
+ * Internal dependencies
+ */
+import Pill from '../';
+
+export default {
+	title: 'WooCommerce Admin/components/Pill',
+	component: Pill,
+}
+
+export function Default() {
+	return (
+		<Pill>Content</Pill>
+	);
+}

packages/components/src/pill/style.scss

@@ -0,0 +1,9 @@
+.woocommerce-pill {
+	border: 1px solid $gray-700;
+	border-radius: 28px;
+	color: $gray-700;
+	display: inline-block;
+	font-size: 11px;
+	padding: 2px 10px;
+	line-height: 16px;
+}

packages/components/src/style.scss

@@ -21,6 +21,7 @@
 @import 'list/style.scss';
 @import 'order-status/style.scss';
 @import 'pagination/style.scss';
+@import 'pill/style.scss';
 @import 'product-image/style.scss';
 @import 'rating/style.scss';
 @import 'search/style.scss';

src/Features/Onboarding.php

@@ -338,12 +338,10 @@ public static function get_allowed_product_types() {
 		$product_types = self::append_product_data(
 			array(
 				'physical'        => array(
-					'label'       => __( 'Physical products', 'woocommerce-admin' ),
-					'description' => __( 'Products you ship to customers.', 'woocommerce-admin' ),
+					'label' => __( 'Physical products', 'woocommerce-admin' ),
 				),
 				'downloads'       => array(
-					'label'       => __( 'Downloads', 'woocommerce-admin' ),
-					'description' => __( 'Virtual products that customers download.', 'woocommerce-admin' ),
+					'label' => __( 'Downloads', 'woocommerce-admin' ),
 				),
 				'subscriptions'   => array(
 					'label'   => __( 'Subscriptions', 'woocommerce-admin' ),
@@ -543,11 +541,13 @@ public static function append_product_data( $product_types ) {
 		// Loop over product types and append data.
 		foreach ( $product_types as $key => $product_type ) {
 			if ( isset( $product_type['product'] ) && isset( $products[ $product_type['product'] ] ) ) {
-				/* translators: Amount of product per year (e.g. Bookings - $240.00 per year) */
-				$product_types[ $key ]['label']      .= sprintf( __( ' — %s per year', 'woocommerce-admin' ), html_entity_decode( $products[ $product_type['product'] ]->price ) );
-				$product_types[ $key ]['description'] = $products[ $product_type['product'] ]->excerpt;
-				$product_types[ $key ]['more_url']    = $products[ $product_type['product'] ]->link;
-				$product_types[ $key ]['slug']        = strtolower( preg_replace( '~[^\pL\d]+~u', '-', $products[ $product_type['product'] ]->slug ) );
+				$price        = html_entity_decode( $products[ $product_type['product'] ]->price );
+				$yearly_price = (float) str_replace( '$', '', $price );
+
+				$product_types[ $key ]['yearly_price'] = $yearly_price;
+				$product_types[ $key ]['description']  = $products[ $product_type['product'] ]->excerpt;
+				$product_types[ $key ]['more_url']     = $products[ $product_type['product'] ]->link;
+				$product_types[ $key ]['slug']         = strtolower( preg_replace( '~[^\pL\d]+~u', '-', $products[ $product_type['product'] ]->slug ) );
 			} elseif ( isset( $product_type['product'] ) ) {
 				/* translators: site currency symbol (used to show that the product costs money) */
 				$product_types[ $key ]['label'] .= sprintf( __( ' — %s', 'woocommerce-admin' ), html_entity_decode( get_woocommerce_currency_symbol() ) );