Boost: Move button and snackbar style to module scss (#41371)

Co-authored-by: Peter Petrov <[email protected]>

projects/plugins/boost/app/assets/src/css/admin-style.scss

@@ -5,6 +5,3 @@
 @import 'main/dashboard';
 @import 'main/common';
 
-// Components
-@import 'components/button';
-@import 'components/snackbar';

projects/plugins/boost/app/assets/src/css/main/dashboard.scss

@@ -11,22 +11,6 @@
 
 }
 
-// Helper style for buttons we want to look like links.
-button.jb-link {
-	background: none;
-	text-decoration: underline;
-	border: none;
-	padding: 0;
-	margin: 0;
-	cursor: pointer;
-}
-
-.jb-link{
-	display:inline-block;
-	margin-top: 10px;
-	font-size:0.8em;
-}
-
 .jb-section--alt {
 	background-color: $alt_white;
 }

projects/plugins/boost/app/assets/src/css/main/wp-admin.scss

@@ -39,18 +39,6 @@ p {
 		color: var( --wp-admin-theme-link-color );
 	}
 
-	.components-button.is-jb-primary {
-		background-color: $jetpack_green;
-		border-radius: $border-radius;
-		font-weight: 600;
-		margin-bottom: 1.5rem;
-		white-space: nowrap;
-		color: #fff;
-		text-decoration: none;
-		text-shadow: none;
-		outline: 1px solid transparent;
-	}
-
 	.components-button.is-link:not(:disabled) {
 		color: var( --wp-admin-theme-link-color );
 	}

projects/plugins/boost/app/assets/src/js/features/critical-css/folding-element/folding-element.module.scss

@@ -1,16 +1,3 @@
-:global(.jb-dashboard .components-button.is-link) {
-	&.foldable-element-control {
-		color: var( --primary-black );
-		font-size: 16px;
-	}
-}
-
-:global(.jb-dashboard .components-button.is-link) {
-	&.foldable-element-control.visible {
-		margin-bottom: 0;
-	}
-}
-
 @keyframes fadeIn {
 	from {
 		opacity: 0;
@@ -38,4 +25,10 @@
 
 .foldable-element-control {
 	font-weight: 600;
+	margin-bottom: 0;
+
+	span {
+		display: inline-flex;
+		align-items: center;
+	}
 }

projects/plugins/boost/app/assets/src/js/features/critical-css/folding-element/folding-element.tsx

@@ -5,6 +5,7 @@ import { useState } from 'react';
 import ChevronDown from '$svg/chevron-down';
 import ChevronUp from '$svg/chevron-up';
 import styles from './folding-element.module.scss';
+import { Button } from '@automattic/jetpack-components';
 
 type PropTypes = {
 	labelExpandedText: string;
@@ -39,15 +40,16 @@ const FoldingElement: React.FC< PropTypes > = ( {
 
 	return (
 		<>
-			<button
-				className={ clsx( 'components-button is-link', styles[ 'foldable-element-control' ], {
+			<Button
+				variant="link"
+				className={ clsx( styles[ 'foldable-element-control' ], {
 					visible: expanded,
 				} ) }
 				onClick={ handleOnExpand }
 			>
 				{ label }
 				{ expanded ? <ChevronUp /> : <ChevronDown /> }
-			</button>
+			</Button>
 
 			<animated.div
 				className={ expanded ? styles.expanded : '' }

projects/plugins/boost/app/assets/src/js/features/notice/manager.module.scss

@@ -2,6 +2,14 @@
 	display: grid;
 	justify-items: end;
 
+	// Positioning
+	box-sizing: content-box;
+	position: fixed;
+	bottom: 100px;
+	right: 100px;
+	z-index: 900;
+
+	// Space between notices
 	:global(.components-snackbar + .components-snackbar) {
 		margin-top: 16px;
 	}

projects/plugins/boost/app/assets/src/js/features/speed-score/pop-out/pop-out.tsx

@@ -3,9 +3,8 @@ import CloseButton from '$features/ui/close-button/close-button';
 import styles from './pop-out.module.scss';
 import { __ } from '@wordpress/i18n';
 import { ReactNode, useState, useEffect } from 'react';
-import { Button } from '@wordpress/components';
+import { Button, getRedirectUrl } from '@automattic/jetpack-components';
 import { useDismissibleAlertState } from '$features/performance-history/lib/hooks';
-import { getRedirectUrl } from '@automattic/jetpack-components';
 import { recordBoostEvent } from '$lib/utils/analytics';
 
 type Props = {
@@ -54,6 +53,66 @@ const slowerMessage: ScoreChangeMessage = {
 	ctaLink: getRedirectUrl( 'boost-improve-site-speed-score' ),
 };
 
+type VanillaPopOutProps = {
+	message: ScoreChangeMessage;
+	onClose: () => void;
+	onDismiss: () => void;
+	isVisible: boolean;
+};
+
+/**
+ * The basic pop out excluding all external dependencies.
+ *
+ * @param {VanillaPopOutProps} props
+ * @return {React.ReactNode} Vanilla PopOut component.
+ */
+export const VanillaPopOut = ( { message, onClose, onDismiss, isVisible }: VanillaPopOutProps ) => {
+	const animationStyles = useSpring( {
+		from: {
+			right: '-100%',
+		},
+		to: {
+			right: isVisible ? '0%' : '-100%',
+		},
+	} );
+
+	return (
+		<div id="parent" className={ styles.wrapper }>
+			<animated.div
+				className={ styles.card }
+				style={ {
+					...animationStyles,
+				} }
+			>
+				<CloseButton onClick={ onClose } />
+
+				<h3 className={ styles.headline }>{ message.title }</h3>
+
+				<>{ message.body }</>
+
+				<Button
+					variant="primary"
+					href={ message?.ctaLink }
+					target="_blank"
+					rel="noreferrer"
+					onClick={ onDismiss }
+				>
+					{ message.cta }
+				</Button>
+
+				<Button
+					variant="link"
+					size="small"
+					className={ styles[ 'dismiss-button' ] }
+					onClick={ onDismiss }
+				>
+					{ __( 'Do not show me again', 'jetpack-boost' ) }
+				</Button>
+			</animated.div>
+		</div>
+	);
+};
+
 function PopOut( { scoreChange }: Props ) {
 	/*
 	 * Determine if the score has changed enough to show the alert.
@@ -95,49 +154,13 @@ function PopOut( { scoreChange }: Props ) {
 		dismissAlert();
 	};
 
-	const animationStyles = useSpring( {
-		from: {
-			right: '-100%',
-		},
-		to: {
-			right: hasScoreChanged && ! isDismissed && ! isClosed ? '0%' : '-100%',
-		},
-	} );
-
 	return (
-		<div id="parent" className={ styles.wrapper }>
-			<animated.div
-				className={ styles.card }
-				style={ {
-					...animationStyles,
-				} }
-			>
-				<CloseButton onClick={ hideAlert } />
-
-				<h3 className={ styles.headline }>{ message.title }</h3>
-
-				<>{ message.body }</>
-
-				<a
-					className="jb-button--primary"
-					href={ message?.ctaLink }
-					target="_blank"
-					rel="noreferrer"
-					onClick={ handleCtaClick }
-				>
-					{ message.cta }
-				</a>
-
-				<Button
-					variant="link"
-					size="small"
-					className={ styles[ 'dismiss-button' ] }
-					onClick={ handleCtaClick }
-				>
-					{ __( 'Do not show me again', 'jetpack-boost' ) }
-				</Button>
-			</animated.div>
-		</div>
+		<VanillaPopOut
+			message={ message }
+			onClose={ hideAlert }
+			onDismiss={ handleCtaClick }
+			isVisible={ hasScoreChanged && ! isDismissed && ! isClosed }
+		/>
 	);
 }
 

projects/plugins/boost/app/assets/src/js/features/speed-score/pop-out/stories/pop-out.stories.tsx

@@ -0,0 +1,55 @@
+import type { Meta } from '@storybook/react';
+import React from 'react';
+import { VanillaPopOut } from '../pop-out';
+
+const meta: Meta< typeof VanillaPopOut > = {
+	title: 'Plugins/Boost/Features/Speed Score/Vanilla PopOut',
+	component: VanillaPopOut,
+	argTypes: {
+		message: { control: 'object' },
+		onClose: { action: 'onClose' },
+		onDismiss: { action: 'onDismiss' },
+		isVisible: { control: 'boolean' },
+	},
+	decorators: [
+		Story => (
+			<div style={ { maxWidth: '800px', minHeight: '600px', fontSize: '16px' } }>
+				<Story />
+			</div>
+		),
+	],
+};
+
+const defaultValues = {
+	isVisible: true,
+	message: {
+		id: 'score_decrease',
+		title: 'Speed score has fallen',
+		body: (
+			<>
+				<p>
+					Most of the time Jetpack Boost will increase your site speed, but there may be cases where your score does not increase.
+				</p>
+				<p>
+					Try refreshing your score, and if it doesn’t help, check our guide on improving your site speed score:
+				</p>
+			</>
+		),
+		cta: 'Read the guide',
+		ctaLink: 'https://example.com',
+	},
+	onClose: () => {
+		defaultValues.isVisible = false;
+	},
+	onDismiss: () => {
+		defaultValues.isVisible = false;
+	},
+};
+
+export default meta;
+const Template = args => {
+	return <VanillaPopOut { ...args } />;
+};
+export const _default = Template.bind( {} );
+_default.args = defaultValues;
+