@automattic/jetpack-components 0.50.1 → 0.50.3

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.50.3] - 2024-03-25
+### Added
+- Annotations: Make it possible to interact with them [#36453]
+- Create RadioControl component [#36532]
+
+## [0.50.2] - 2024-03-14
+### Added
+- Add Bluesky color [#36181]
+
 ## [0.50.1] - 2024-03-12
 ### Added
 - Social Logos: add new SMS icon. [#36176]
@@ -978,6 +987,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.50.3]: https://github.com/Automattic/jetpack-components/compare/0.50.2...0.50.3
+[0.50.2]: https://github.com/Automattic/jetpack-components/compare/0.50.1...0.50.2
 [0.50.1]: https://github.com/Automattic/jetpack-components/compare/0.50.0...0.50.1
 [0.50.0]: https://github.com/Automattic/jetpack-components/compare/0.49.2...0.50.0
 [0.49.2]: https://github.com/Automattic/jetpack-components/compare/0.49.1...0.49.2

package/components/boost-score-graph/annotations-plugin.ts

@@ -35,14 +35,15 @@ export function annotationsPlugin( annotations: Annotation[] ) {
 				annotationEl.style.display = 'block';
 				annotationEl.style.left = u.valToPos( annotation.timestamp / 1000, 'x' ) + 'px';
 			} );
-			lineEl.addEventListener( 'mouseleave', () => {
-				annotationEl.style.display = 'none';
-			} );
 
 			annotation.line = lineEl;
 			annotationsContainer.appendChild( lineEl );
 		} );
 
+		annotationEl.addEventListener( 'mouseleave', () => {
+			annotationEl.style.display = 'none';
+		} );
+
 		containerEl.appendChild( annotationsContainer );
 		u.over.appendChild( annotationEl );
 	}

package/components/boost-score-graph/style-annotation.scss

@@ -46,25 +46,30 @@ $white: #ffffff;
 			height: 0;
 			border-left: 8px solid transparent;
 			border-right: 8px solid transparent;
-			border-bottom: 8px solid $black;
+			border-top: 8px solid $black;
 			position: absolute;
-			top: -7px;
+			bottom: -7px;
 			left: 50%;
 			transform: translateX(-50%);
 		}
 
 		display: none;
-		top: 100%;
+		bottom: 100%;
 		background-color: $black;
 		color: $white;
 		width: fit-content;
+		width: 20em;
 		padding: 16px 24px;
 		border-radius: 4px;
 		font-size: 14px;
-		position: relative;
+		position: absolute;
 		box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
 		text-align: center;
 		transform: translateX(-50%);
 		z-index: 2;
+
+		a {
+			color: $white !important;
+		}
 	}
 }

package/components/boost-score-graph/style-tooltip.scss

@@ -2,6 +2,11 @@ $grey: #8e8e8e;
 $black: #101517;
 $white: #ffffff;
 
+.jb-score-tooltips-container {
+    width: 100%;
+    position: relative;
+}
+
 .jb-score-tooltip {
     background-color: $black;
     color: $white;

package/components/boost-score-graph/tooltips-plugin.ts

@@ -11,6 +11,7 @@ import { Period } from '.';
  */
 export function tooltipsPlugin( periods ) {
 	const reactRoot = document.createElement( 'div' );
+	const container = document.createElement( 'div' );
 	let reactDom;
 
 	/**
@@ -19,8 +20,9 @@ export function tooltipsPlugin( periods ) {
 	 * @param {uPlot} u - The uPlot instance.
 	 * @param {object} _opts - Options for the uPlot instance.
 	 */
-	function init( u, _opts ) {
-		const container = u.over;
+	function init( u: uPlot, _opts: object ) {
+		container.classList.add( 'jb-score-tooltips-container' );
+
 		reactDom = ReactDOM.createRoot( reactRoot );
 		reactRoot.style.position = 'absolute';
 		reactRoot.style.bottom = -20 + 'px';
@@ -29,6 +31,8 @@ export function tooltipsPlugin( periods ) {
 
 		container.appendChild( reactRoot );
 
+		u.over.appendChild( container );
+
 		/**
 		 * Hides all tooltips.
 		 */
@@ -44,9 +48,7 @@ export function tooltipsPlugin( periods ) {
 		}
 
 		container.addEventListener( 'mouseleave', () => {
-			if ( ! u.cursor._lock ) {
-				hideTips();
-			}
+			hideTips();
 		} );
 
 		container.addEventListener( 'mouseenter', () => {
@@ -54,6 +56,14 @@ export function tooltipsPlugin( periods ) {
 		} );
 	}
 
+	/**
+	 * Called when the chart is resized.
+	 * @param {uPlot} u - The uPlot instance.
+	 */
+	function setSize( u: uPlot ) {
+		container.style.height = u.over.clientHeight + 'px';
+	}
+
 	/**
 	 * Sets the cursor for tooltips.
 	 *
@@ -88,6 +98,7 @@ export function tooltipsPlugin( periods ) {
 		hooks: {
 			init,
 			setCursor,
+			setSize,
 		},
 	};
 }

package/components/icons/style.module.scss

@@ -11,6 +11,9 @@
 
 .socialIcon {
 	fill: $gray-700;
+	&.bluesky {
+		fill: var( --color-bluesky );
+	}
 	&.facebook {
 		fill: var( --color-facebook );
 		border-radius: 50% !important;

package/components/radio-control/README.md

@@ -0,0 +1,5 @@
+# RadioControl
+
+A wrapper component for applying Jetpack Emerald styles to the [RadioControl](https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/radio-control) component from `@wordpress/components`.
+
+The documentation for the base `RadioControl` component can be found via the [Gutenberg Handbook](https://developer.wordpress.org/block-editor/reference-guides/components/radio-control/).

package/components/radio-control/index.tsx

@@ -0,0 +1,55 @@
+import { RadioControl as WPRadioControl } from '@wordpress/components';
+import classNames from 'classnames';
+import styles from './styles.module.scss';
+
+interface RadioControlProps {
+	/** The current value. */
+	selected: string;
+
+	/** Custom class name to append to the component. */
+	className?: string;
+
+	/** Whether or not the radio control is currently disabled. */
+	disabled?: boolean;
+
+	/** Additional information to display below the radio control. */
+	help?: React.ReactNode;
+
+	/** The label for the radio control. */
+	label?: React.ReactNode;
+
+	/** If true, the label will only be visible to screen readers. */
+	hideLabelFromVision?: boolean;
+
+	/** A list of options to show. */
+	options: { label: string; value: string }[];
+
+	/** A callback function invoked when the value is changed. */
+	onChange: ( value: string ) => void;
+}
+
+const RadioControl: React.FC< RadioControlProps > = ( {
+	selected,
+	className,
+	disabled,
+	help,
+	label,
+	hideLabelFromVision,
+	options,
+	onChange,
+} ) => {
+	return (
+		<WPRadioControl
+			selected={ selected }
+			className={ classNames( styles.radio, className ) }
+			disabled={ disabled }
+			help={ help }
+			label={ label }
+			hideLabelFromVision={ hideLabelFromVision }
+			options={ options }
+			onChange={ onChange }
+		/>
+	);
+};
+
+export default RadioControl;

package/components/radio-control/styles.module.scss

@@ -0,0 +1,22 @@
+/// Radio Control
+///
+/// Overrides the @wordpress/components RadioControl component.
+/// @link https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/radio-control
+
+.radio {
+	:global {
+		.components-radio-control {
+			&__input[type="radio"] {
+				&:checked {
+					background: var( --jp-green-40 );
+					border-color: var( --jp-green-40 );
+				}
+
+				&:focus {
+					border-color: var( --jp-green-50 );
+					box-shadow: 0 0 0 2px var( --jp-white ), 0 0 0 4px var( --jp-green-50 );
+				}
+			}
+		}
+	}
+}

package/index.ts

@@ -72,3 +72,4 @@ export { default as ZendeskChat } from './components/zendesk-chat';
 export { default as ProgressBar } from './components/progress-bar';
 export { default as UpsellBanner } from './components/upsell-banner';
 export { getUserLocale, cleanLocale } from './lib/locale';
+export { default as RadioControl } from './components/radio-control';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.50.1",
+	"version": "0.50.3",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",