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,35 @@ 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',
+		monthlyPrice
+	);
+
+	return (
+		<Fragment>
+			{ description }
+			<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 +128,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 +142,10 @@ 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 helpText =
 								productTypes[ slug ].description &&
 								interpolateComponents( {
@@ -155,7 +182,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 ) }
@@ -178,7 +205,7 @@ class ProductTypes extends Component {
 						{ __( 'Continue', 'woocommerce-admin' ) }
 					</Button>
 				</Card>
-			</Fragment>
+			</div>
 		);
 	}
 }

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

@@ -0,0 +1,7 @@
+.woocommerce-profile-wizard__product-types {
+	.woocommerce-pill {
+		border-color: $studio-woocommerce-purple-50;
+		color: $studio-woocommerce-purple-50;
+		margin-left: 12px;
+	}
+}

client/profile-wizard/style.scss

@@ -263,7 +263,7 @@
 			}
 
 			label.components-checkbox-control__label {
-				margin-left: $gap-large - $gap-smallest;
+				margin-left: $gap;
 			}
 
 			.components-base-control__help {

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/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,8 @@
+.woocommerce-pill {
+	border: 1px solid $studio-gray-5;
+	border-radius: 28px;
+	color: $studio-gray-5;
+	display: inline-block;
+	font-size: 12px;
+	padding: 1px 10px;
+}

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' ),
@@ -535,11 +533,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() ) );