newspack-components 2.2.1 → 3.0.0-alpha.2

package/src/button/index.tsx

@@ -0,0 +1,48 @@
+/**
+ * Button
+ */
+
+/**
+ * WordPress dependencies.
+ */
+import { Button as BaseComponent } from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import Router from '../proxied-imports/router';
+import './style.scss';
+
+const { useHistory } = Router;
+
+type OriginalButtonProps = typeof BaseComponent.defaultProps;
+type Props = OriginalButtonProps & {
+	href?: string;
+	onClick?: () => void;
+};
+
+const Button = ( { href, onClick, ...otherProps }: Props ) => {
+	const history = useHistory();
+	const [ isAwaitingOnClick, setIsAwaitingOnClick ] = useState( false );
+
+	// If both onClick and href are present, await the onClick action an then redirect.
+	if ( href && onClick ) {
+		( otherProps as Props ).onClick = async () => {
+			setIsAwaitingOnClick( true );
+			await onClick();
+			setIsAwaitingOnClick( false );
+			history.push( ( href || '' ).replace( '#', '' ) );
+		};
+	} else {
+		( otherProps as Props ).href = href;
+		( otherProps as Props ).onClick = onClick;
+	}
+	if ( isAwaitingOnClick ) {
+		otherProps.disabled = true;
+	}
+	// @ts-ignore - @wordpress/components' Button can only have either href or onClick, not both.
+	return <BaseComponent { ...otherProps } />;
+};
+
+export default Button;

package/src/button/style.scss

@@ -4,7 +4,7 @@
 
 .components-button {
 	&.is-destructive {
-		&:hover:not( :disabled ) {
+		&:hover:not(:disabled) {
 			box-shadow: none;
 		}
 	}

package/src/button-card/style.scss

@@ -2,40 +2,44 @@
  * Button Card
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-button-card {
 	background: white;
 	border-radius: 2px;
 	border: 1px solid wp-colors.$gray-300;
-	box-shadow: inset 0 0 0 var( --wp-admin-border-width-focus ) transparent;
+	box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) transparent;
 	cursor: pointer;
 	display: block;
 	margin: 32px 0;
 	padding: 32px;
 	position: relative;
 	text-decoration: none;
-	transition: background-color 125ms ease-in-out, border-color 125ms ease-in-out,
+	transition:
+		background-color 125ms ease-in-out,
+		border-color 125ms ease-in-out,
 		box-shadow 125ms ease-in-out;
 
 	&:focus,
 	&.is-pressed {
 		background: white;
-		border-color: var( --wp-admin-theme-color );
-		box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color ) !important;
+		border-color: var(--wp-admin-theme-color);
+		box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color) !important;
 		outline: none !important;
 		z-index: 1;
 	}
 
 	&.is-pressed:focus-visible {
-		box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color ), 0 0 0 1px white,
-			0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color ) !important;
+		box-shadow:
+			inset 0 0 0 1px var(--wp-admin-theme-color),
+			0 0 0 1px white,
+			0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color) !important;
 	}
 
 	&:active,
 	&:hover {
-		border-color: var( --wp-admin-theme-color );
-		color: var( --wp-admin-theme-color );
+		border-color: var(--wp-admin-theme-color);
+		color: var(--wp-admin-theme-color);
 		text-decoration: none;
 		z-index: 1;
 
@@ -63,7 +67,7 @@
 	&.grouped {
 		border-radius: 0;
 
-		& + &:not( .br--top ) {
+		& + &:not(.br--top) {
 			margin-top: -33px;
 		}
 
@@ -95,7 +99,7 @@
 		}
 
 		svg {
-			fill: var( --wp-admin-theme-color );
+			fill: var(--wp-admin-theme-color);
 			transition: fill 125ms ease-in-out;
 		}
 	}
@@ -161,8 +165,10 @@
 		}
 
 		&.is-pressed:focus-visible {
-			box-shadow: inset 0 0 0 1px wp-colors.$alert-red, 0 0 0 1px white,
-				0 0 0 var( --wp-admin-border-width-focus ) wp-colors.$alert-red !important;
+			box-shadow:
+				inset 0 0 0 1px wp-colors.$alert-red,
+				0 0 0 1px white,
+				0 0 0 var(--wp-admin-border-width-focus) wp-colors.$alert-red !important;
 		}
 
 		&:active,

package/src/card/style.scss

@@ -2,7 +2,7 @@
  * Card
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-card {
 	border-radius: 2px;

package/src/category-autocomplete/style.scss

@@ -19,10 +19,10 @@
 	&__suggestions-spinner {
 		position: absolute;
 		right: 1px;
-		top: calc( 1.4em + 8px );
+		top: calc(1.4em + 8px);
 		z-index: 2;
 
-		[class*='--label-hidden'] + & {
+		[class*="--label-hidden"] + & {
 			top: 0;
 		}
 

package/src/color-picker/style.scss

@@ -10,7 +10,7 @@
 	}
 
 	&__expander {
-		box-shadow: inset 0 0 0 1px rgb( 0 0 0 / 20% );
+		box-shadow: inset 0 0 0 1px rgb(0 0 0 / 20%);
 		border-radius: 2px;
 		height: 64px;
 		padding: 12px;
@@ -18,14 +18,14 @@
 		text-transform: uppercase;
 
 		&:focus-visible {
-			box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) var( --wp-admin-theme-color );
+			box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color);
 			border-color: white;
 		}
 	}
 
 	&__main {
 		background: white;
-		box-shadow: 0 0 8px 4px rgba( black, 0.08 );
+		box-shadow: 0 0 8px 4px rgba(black, 0.08);
 		margin: 12px 0;
 		position: absolute;
 		z-index: 2;

package/src/consts.js

@@ -1,3 +1 @@
-export const NEWSPACK_SITE_URL = 'https://newspack.com';
-export const NEWSPACK_SUPPORT_URL = `${ NEWSPACK_SITE_URL }/support`;
 export const HANDOFF_KEY = 'newspack_wizard_handoff_message';

package/src/custom-select-control/style.scss

@@ -2,7 +2,7 @@
  * Custom Select Control
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-custom-select-control {
 	label {
@@ -22,13 +22,13 @@
 		&:active,
 		&:focus,
 		&:hover,
-		&[aria-expanded='true'] {
+		&[aria-expanded="true"] {
 			color: wp-colors.$gray-900;
 		}
 
 		&:focus {
-			border-color: var( --wp-admin-theme-color );
-			box-shadow: inset 0 0 0 1px var( --wp-admin-theme-color );
+			border-color: var(--wp-admin-theme-color);
+			box-shadow: inset 0 0 0 1px var(--wp-admin-theme-color);
 		}
 
 		&-icon {
@@ -36,15 +36,15 @@
 			width: 18px;
 		}
 
-		&[aria-expanded='true'] svg {
-			transform: rotate( 180deg );
+		&[aria-expanded="true"] svg {
+			transform: rotate(180deg);
 		}
 	}
 
 	.components-custom-select-control__menu {
 		border-color: wp-colors.$gray-700;
 		border-radius: 2px;
-		box-shadow: 0 4px 8px rgba( black, 0.08 );
+		box-shadow: 0 4px 8px rgba(black, 0.08);
 		margin: 8px 0 0;
 		min-width: 222px;
 	}
@@ -72,16 +72,17 @@
 
 		&.is-highlighted {
 			background: white;
-			color: var( --wp-admin-theme-color );
+			color: var(--wp-admin-theme-color);
 		}
 
 		&.is-selected {
 			margin-left: 0;
 
 			&::before {
-				background: url( 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTguMyA1LjZMOS45IDE2LjlsLTQuNi0zLjQtLjkgMS4yIDUuOCA0LjMgOS4zLTEyLjZ6IiBmaWxsPSIjMzM2NmZmIj48L3BhdGg+PC9zdmc+Cg==' )
+				background:
+					url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0Ij48cGF0aCBkPSJNMTguMyA1LjZMOS45IDE2LjlsLTQuNi0zLjQtLjkgMS4yIDUuOCA0LjMgOS4zLTEyLjZ6IiBmaWxsPSIjMzM2NmZmIj48L3BhdGg+PC9zdmc+Cg==")
 					0 0 no-repeat;
-				content: '';
+				content: "";
 				display: block;
 				height: 24px;
 				margin: 0 4px 0 0;

package/src/date-range-picker/style.scss

@@ -1,5 +1,5 @@
-@use '../../../shared/scss/colors';
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "../../../shared/scss/colors";
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .DateRangePicker {
 	margin: 32px 0;
@@ -15,20 +15,20 @@
 		width: 36px;
 
 		&--previous {
-			background-image: url( 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" fill="%231e1e1e"/%3E%3C/svg%3E' );
+			background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" fill="%231e1e1e"/%3E%3C/svg%3E');
 			left: 0;
 
 			&:hover {
-				background-image: url( 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" fill="%2336f"/%3E%3C/svg%3E' );
+				background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" fill="%2336f"/%3E%3C/svg%3E');
 			}
 		}
 
 		&--next {
-			background-image: url( 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" fill="%231e1e1e"/%3E%3C/svg%3E' );
+			background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" fill="%231e1e1e"/%3E%3C/svg%3E');
 			right: 0;
 
 			&:hover {
-				background-image: url( 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" fill="%2336f"/%3E%3C/svg%3E' );
+				background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"%3E%3Cpath d="M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" fill="%2336f"/%3E%3C/svg%3E');
 			}
 		}
 

package/src/footer/index.js

@@ -32,43 +32,43 @@ const Footer = ( { simple } ) => {
 			external: true,
 		},
 		{
-			label: __( 'About', 'newspack' ),
+			label: __( 'About', 'newspack-plugin' ),
 			url: 'https://newspack.com/',
 			external: true,
 		},
 		{
-			label: __( 'Documentation', 'newspack' ),
+			label: __( 'Documentation', 'newspack-plugin' ),
 			url: support,
 			external: true,
 		},
 	];
 	if ( componentsDemo ) {
 		footerElements.push( {
-			label: __( 'Components Demo', 'newspack' ),
+			label: __( 'Components Demo', 'newspack-plugin' ),
 			url: componentsDemo,
 		} );
 	}
 	if ( setupWizard ) {
 		footerElements.push( {
-			label: __( 'Setup Wizard', 'newspack' ),
+			label: __( 'Setup Wizard', 'newspack-plugin' ),
 			url: setupWizard,
 		} );
 	}
 	if ( resetUrl ) {
 		footerElements.push( {
-			label: __( 'Reset Newspack', 'newspack' ),
+			label: __( 'Reset Newspack', 'newspack-plugin' ),
 			url: resetUrl,
 		} );
 	}
 	if ( removeStarterContent ) {
 		footerElements.push( {
-			label: __( 'Remove Starter Content', 'newspack' ),
+			label: __( 'Remove Starter Content', 'newspack-plugin' ),
 			url: removeStarterContent,
 		} );
 	}
 	if ( supportEmail ) {
 		footerElements.push( {
-			label: __( 'Contact Support', 'newspack' ),
+			label: __( 'Contact Support', 'newspack-plugin' ),
 			url: `mailto:${ supportEmail }`,
 		} );
 	}

package/src/footer/style.scss

@@ -2,7 +2,7 @@
  * Footer
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-footer {
 	align-items: stretch;

package/src/form-token-field/style.scss

@@ -2,7 +2,7 @@
  * Form Token Field
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-form-token-field {
 	width: 100%;

package/src/grid/index.tsx

@@ -0,0 +1,34 @@
+/**
+ * Grid
+ */
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+const Grid = ( {
+	className = '',
+	columns = 2,
+	gutter = 32,
+	noMargin = false,
+	rowGap = 0,
+	...otherProps
+} ) => {
+	const classes = classnames(
+		'newspack-grid',
+		noMargin && 'newspack-grid--no-margin',
+		columns && 'newspack-grid__columns-' + columns,
+		gutter && 'newspack-grid__gutter-' + gutter,
+		rowGap && 'newspack-grid__row-gap-' + rowGap,
+		className
+	);
+	return <div className={ classes } { ...otherProps } />;
+};
+
+export default Grid;

package/src/grid/style.scss

@@ -2,7 +2,7 @@
  * Grid
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-grid {
 	display: grid;
@@ -68,7 +68,7 @@
 
 	// Columns 6
 	&__columns-6 {
-		grid-template-columns: repeat( 2, 1fr );
+		grid-template-columns: repeat(2, 1fr);
 	}
 
 	// Media Queries - 744px
@@ -76,11 +76,11 @@
 		&__columns-2,
 		&__columns-3,
 		&__columns-4 {
-			grid-template-columns: repeat( 2, 1fr );
+			grid-template-columns: repeat(2, 1fr);
 		}
 
 		&__columns-6 {
-			grid-template-columns: repeat( 3, 1fr );
+			grid-template-columns: repeat(3, 1fr);
 		}
 	}
 
@@ -88,17 +88,17 @@
 	@media screen and ( min-width: 1128px ) {
 		// Columns 3
 		&__columns-3 {
-			grid-template-columns: repeat( 3, 1fr );
+			grid-template-columns: repeat(3, 1fr);
 		}
 
 		// Columns 4
 		&__columns-4 {
-			grid-template-columns: repeat( 4, 1fr );
+			grid-template-columns: repeat(4, 1fr);
 		}
 
 		// Columns 6
 		&__columns-6 {
-			grid-template-columns: repeat( 6, 1fr );
+			grid-template-columns: repeat(6, 1fr);
 		}
 
 		// Gutter 48
@@ -144,12 +144,12 @@
 
 	// Table-like
 	&__thead {
-		background: rgba( black, 0.025 );
+		background: rgba(black, 0.025);
 		border-bottom: 1px solid wp-colors.$gray-300;
 		border-top: 1px solid wp-colors.$gray-300;
 		color: wp-colors.$gray-900;
 
-		> *:not( .screen-reader-text ) {
+		> *:not(.screen-reader-text) {
 			padding: 8px;
 		}
 	}

package/src/handoff/index.js

@@ -52,10 +52,11 @@ class Handoff extends Component {
 	textForPlugin = pluginInfo => {
 		const defaults = {
 			modalBody: null,
-			modalTitle: pluginInfo.Name && `${ __( 'Manage', 'newspack' ) } ${ pluginInfo.Name }`,
-			primaryButton: pluginInfo.Name && `${ __( 'Manage', 'newspack' ) } ${ pluginInfo.Name }`,
-			primaryModalButton: __( 'Manage', 'newspack' ),
-			dismissModalButton: __( 'Dismiss', 'newspack' ),
+			modalTitle: pluginInfo.Name && `${ __( 'Manage', 'newspack-plugin' ) } ${ pluginInfo.Name }`,
+			primaryButton:
+				pluginInfo.Name && `${ __( 'Manage', 'newspack-plugin' ) } ${ pluginInfo.Name }`,
+			primaryModalButton: __( 'Manage', 'newspack-plugin' ),
+			dismissModalButton: __( 'Dismiss', 'newspack-plugin' ),
 		};
 		return assign( defaults, this.props );
 	};
@@ -115,7 +116,7 @@ class Handoff extends Component {
 				) }
 				{ Name && 'active' !== Status && (
 					<Button className={ classes } variant="secondary" disabled { ...otherProps }>
-						{ Name + __( ' not installed', 'newspack' ) }
+						{ Name + __( ' not installed', 'newspack-plugin' ) }
 					</Button>
 				) }
 				{ ! Name && (
@@ -126,7 +127,7 @@ class Handoff extends Component {
 					>
 						<Fragment>
 							{ ! compact && <Waiting isLeft /> }
-							{ __( 'Retrieving Plugin Info', 'newspack' ) }
+							{ __( 'Retrieving Plugin Info', 'newspack-plugin' ) }
 						</Fragment>
 					</Button>
 				) }

package/src/handoff-message/index.js

@@ -34,6 +34,8 @@ export default function HandoffMessage() {
 		// Clean up the notification when unmounting.
 		return () => window.localStorage.removeItem( HANDOFF_KEY );
 	}, [] );
-	if ( ! handoffMessage ) return null;
+	if ( ! handoffMessage ) {
+		return null;
+	}
 	return <Notice isHandoff isDismissible={ false } rawHTML noticeText={ handoffMessage } />;
 }

package/src/hooks/index.ts

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { useRef } from '@wordpress/element';
+
+import usePrompt from './usePrompt';
+import useObjectState from './useObjectState';
+import useOnClickOutside from './useOnClickOutside';
+
+const useUniqueId = ( prefix: string ) => {
+	const id = useRef( `${ prefix }-${ Math.round( Math.random() * 99999 ) }` );
+	return id.current;
+};
+
+export default { usePrompt, useObjectState, useOnClickOutside, useUniqueId };

package/src/hooks/usePrompt.ts

@@ -0,0 +1,46 @@
+// https://gist.github.com/sibelius/60a4e11da1f826b8d60dc3975a1ac805
+
+/**
+ * External dependencies.
+ */
+import { useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Internal dependencies.
+ */
+import Router from '../proxied-imports/router';
+
+const { useHistory } = Router;
+
+export default ( when: boolean, message: string ): ( () => void ) => {
+	const history = useHistory();
+	const self = useRef( null );
+
+	const onWindowOrTabClose = ( event: Event | undefined ) => {
+		if ( ! when ) {
+			return;
+		}
+
+		if ( typeof event === 'undefined' ) {
+			event = window.event;
+		}
+
+		return message;
+	};
+
+	useEffect( () => {
+		if ( when ) {
+			self.current = history.block( message );
+			window.addEventListener( 'beforeunload', onWindowOrTabClose );
+		}
+
+		return () => {
+			if ( self.current ) {
+				( self.current as () => void )();
+			}
+			window.removeEventListener( 'beforeunload', onWindowOrTabClose );
+		};
+	}, [ message, when ] );
+
+	return self.current || ( () => {} );
+};

package/src/image-upload/index.js

@@ -92,7 +92,7 @@ class ImageUpload extends Component {
 		return (
 			<div className={ classnames( 'newspack-image-upload', className ) }>
 				<div className="newspack-image-upload__header">
-					{ /* eslint-disable-next-line jsx-a11y/label-has-for */ }
+					{ /* eslint-disable-next-line jsx-a11y/label-has-for, jsx-a11y/label-has-associated-control */ }
 					{ label && <label className="newspack-image-upload__label">{ label }</label> }
 					{ info && <InfoButton text={ info } /> }
 				</div>
@@ -102,11 +102,11 @@ class ImageUpload extends Component {
 							<img
 								data-testid="image-upload"
 								src={ image.url }
-								alt={ __( 'Image preview', 'newspack' ) }
+								alt={ __( 'Image preview', 'newspack-plugin' ) }
 							/>
 							<div className="newspack-image-upload__controls">
 								<Button disabled={ disabled } onClick={ this.openModal } isLink>
-									{ __( 'Replace', 'newspack' ) }
+									{ __( 'Replace', 'newspack-plugin' ) }
 								</Button>
 								<span className="sep" />
 								<Button
@@ -115,13 +115,13 @@ class ImageUpload extends Component {
 									isLink
 									isDestructive
 								>
-									{ __( 'Remove', 'newspack' ) }
+									{ __( 'Remove', 'newspack-plugin' ) }
 								</Button>
 							</div>
 						</>
 					) : (
 						<Button disabled={ disabled } onClick={ this.openModal } isLink>
-							{ buttonLabel ? buttonLabel : __( 'Upload', 'newspack' ) }
+							{ buttonLabel ? buttonLabel : __( 'Upload', 'newspack-plugin' ) }
 						</Button>
 					) }
 				</div>

package/src/image-upload/index.test.js

@@ -1,6 +1,11 @@
-import React from 'react';
+/**
+ * External dependencies
+ */
 import { render } from '@testing-library/react';
 
+/**
+ * Internal dependencies
+ */
 import ImageUpload from './';
 
 describe( 'ImageUpload', () => {

package/src/image-upload/style.scss

@@ -2,7 +2,7 @@
  * Image Upload
  */
 
-@use '~@wordpress/base-styles/colors' as wp-colors;
+@use "~@wordpress/base-styles/colors" as wp-colors;
 
 .newspack-image-upload {
 	margin: 32px 0;
@@ -27,7 +27,7 @@
 		&--covering {
 			background-size: cover;
 		}
-		&:not( &--has-image ) {
+		&:not(&--has-image) {
 			.newspack-button {
 				background: white !important;
 				border-radius: 2px !important;
@@ -49,9 +49,9 @@
 			overflow: hidden;
 			&::before,
 			&::after {
-				border: 1px solid rgba( black, 0.54 );
+				border: 1px solid rgba(black, 0.54);
 				border-radius: 2px;
-				content: '';
+				content: "";
 				inset: 0;
 				position: absolute;
 				z-index: 0;
@@ -66,7 +66,7 @@
 				position: relative;
 			}
 			&::after {
-				background: rgba( white, 0.9 );
+				background: rgba(white, 0.9);
 				border-color: wp-colors.$gray-700;
 			}
 			&:focus-within,