Merge pull request #5467 from google/enhancement/5452-twg-experimenta…

…l-label

Add "experimental" label to Thank with Google

assets/js/components/Badge.js

@@ -22,8 +22,12 @@
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 
-const Badge = ( { label, className } ) => (
-	<span className={ classnames( 'googlesitekit-badge', className ) }>
+const Badge = ( { label, className, hasLeftSpacing = false } ) => (
+	<span
+		className={ classnames( 'googlesitekit-badge', className, {
+			'googlesitekit-badge--has-left-spacing': hasLeftSpacing,
+		} ) }
+	>
 		{ label }
 	</span>
 );
@@ -32,6 +36,7 @@ Badge.displayName = 'Badge';
 
 Badge.propTypes = {
 	label: PropTypes.string.isRequired,
+	hasLeftSpacing: PropTypes.bool,
 };
 
 export default Badge;

assets/js/components/dashboard-sharing/DashboardSharingSettings/constants.js

@@ -18,3 +18,5 @@
 
 export const EDITING_USER_ROLE_SELECT_SLUG_KEY =
 	'editing-user-role-select-slug-key';
+
+export const EXPERIMENTAL_MODULES = [ 'idea-hub', 'thank-with-google' ];

assets/js/components/settings/SettingsActiveModule/Header.js

@@ -34,6 +34,7 @@ import { __, sprintf } from '@wordpress/i18n';
  */
 import Data from 'googlesitekit-data';
 import { CORE_MODULES } from '../../../googlesitekit/modules/datastore/constants';
+import { EXPERIMENTAL_MODULES } from '../../dashboard-sharing/DashboardSharingSettings/constants';
 import { Grid, Row, Cell } from '../../../material-components';
 import Link from '../../Link';
 import ModuleIcon from '../../ModuleIcon';
@@ -98,13 +99,13 @@ export default function Header( { slug } ) {
 							/>
 							{ name }
 
-							{ slug === 'idea-hub' && (
+							{ EXPERIMENTAL_MODULES.includes( slug ) && (
 								<Badge
 									label={ __(
 										'Experimental',
 										'google-site-kit'
 									) }
-									className="googlesitekit-idea-hub__badge"
+									hasLeftSpacing={ true }
 								/>
 							) }
 						</h3>

assets/js/components/settings/SetupModule.js

@@ -40,6 +40,7 @@ import ModuleSettingsWarning from '../notifications/ModuleSettingsWarning.js';
 import { CORE_SITE } from '../../googlesitekit/datastore/site/constants';
 import { CORE_MODULES } from '../../googlesitekit/modules/datastore/constants';
 import { CORE_LOCATION } from '../../googlesitekit/datastore/location/constants';
+import { EXPERIMENTAL_MODULES } from '../dashboard-sharing/DashboardSharingSettings/constants';
 import { trackEvent } from '../../util';
 import useViewContext from '../../hooks/useViewContext';
 const { useSelect, useDispatch } = Data;
@@ -110,10 +111,10 @@ export default function SetupModule( { slug, name, description } ) {
 			>
 				{ name }
 
-				{ slug === 'idea-hub' && (
+				{ EXPERIMENTAL_MODULES.includes( slug ) && (
 					<Badge
 						label={ __( 'Experimental', 'google-site-kit' ) }
-						className="googlesitekit-idea-hub__badge"
+						hasLeftSpacing={ true }
 					/>
 				) }
 			</h3>

assets/js/modules/idea-hub/components/setup/SetupMain.js

@@ -64,7 +64,7 @@ export default function SetupMain( { finishSetup } ) {
 
 				<Badge
 					label={ __( 'Experimental', 'google-site-kit' ) }
-					className="googlesitekit-idea-hub__badge"
+					hasLeftSpacing={ true }
 				/>
 			</h2>
 

assets/js/modules/thank-with-google/components/setup/SetupMain.js

@@ -24,14 +24,15 @@ import PropTypes from 'prop-types';
 /**
  * WordPress dependencies
  */
-import { _x } from '@wordpress/i18n';
+import { _x, __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
 import Data from 'googlesitekit-data';
 import ThankWithGoogleIcon from '../../../../../svg/graphics/thank-with-google.svg';
 import ProgressBar from '../../../../components/ProgressBar';
+import Badge from '../../../../components/Badge';
 import { MODULES_THANK_WITH_GOOGLE } from '../../datastore/constants';
 import { CORE_LOCATION } from '../../../../googlesitekit/datastore/location/constants';
 import SetupForm from './SetupForm';
@@ -60,6 +61,11 @@ export default function SetupMain( { finishSetup } ) {
 
 			<h2 className="googlesitekit-heading-3 googlesitekit-setup-module__title">
 				{ _x( 'Thank with Google', 'Service name', 'google-site-kit' ) }
+
+				<Badge
+					label={ __( 'Experimental', 'google-site-kit' ) }
+					hasLeftSpacing={ true }
+				/>
 			</h2>
 
 			{ viewComponent }

assets/sass/components/global/_googlesitekit-badge.scss

@@ -28,4 +28,8 @@
 	padding: 6px 12px;
 	text-transform: uppercase;
 	vertical-align: middle;
+
+	&--has-left-spacing {
+		margin-left: 12px;
+	}
 }

assets/sass/components/idea-hub/_index.scss

@@ -16,7 +16,6 @@
  * limitations under the License.
  */
 
-@import "googlesitekit-idea-hub-common";
 @import "googlesitekit-idea-hub-dashboard-ideas-widget";
 @import "googlesitekit-idea-hub-empty";
 @import "googlesitekit-idea-hub-notification";