@automattic/jetpack-components 1.4.11 → 1.4.12

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.4.12] - 2026-02-10
+### Changed
+- Update package dependencies. [#47002]
+
+### Fixed
+- RNA: Fix build folder extensions and copy SCSS assets. [#46938]
+
 ## [1.4.11] - 2026-02-04
 ### Changed
 - NavigatorModal: Prevent scrolling for navigator screen for large content. [#46925]
@@ -1640,6 +1647,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.4.12]: https://github.com/Automattic/jetpack-components/compare/1.4.11...1.4.12
 [1.4.11]: https://github.com/Automattic/jetpack-components/compare/1.4.10...1.4.11
 [1.4.10]: https://github.com/Automattic/jetpack-components/compare/1.4.9...1.4.10
 [1.4.9]: https://github.com/Automattic/jetpack-components/compare/1.4.8...1.4.9

package/build/components/action-button/index.d.ts

@@ -1,4 +1,3 @@
-export default ActionButton;
 /**
  * The Jetpack Action button.
  *
@@ -9,18 +8,29 @@ export default ActionButton;
  * @param {object} props - The properties.
  * @return {import('react').ReactNode} The `ActionButton` component.
  */
-declare function ActionButton(props: object): import("react").ReactNode;
-declare namespace ActionButton {
-    namespace propTypes {
-        let label: any;
-        let onClick: any;
-        let isLoading: any;
-        let isDisabled: any;
-        let displayError: any;
-        let errorMessage: any;
-        let variant: any;
-        let isExternalLink: any;
-        let customClass: any;
-        let loadingText: any;
-    }
-}
+declare const ActionButton: {
+    (props: any): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /** The button label. */
+        label: any;
+        /** The callback to be called on click. */
+        onClick: any;
+        /** Will disable the button and display a spinner if set to true. */
+        isLoading: any;
+        /** Will disable the button with no spinner. */
+        isDisabled: any;
+        /** Displays an error message */
+        displayError: any;
+        /** The error message string */
+        errorMessage: any;
+        /** The type/variant of button */
+        variant: any;
+        /** Will display the button as a link with an external icon. */
+        isExternalLink: any;
+        /** Custom CSS class to apply to the button */
+        customClass: any;
+        /** Text to display when loading */
+        loadingText: any;
+    };
+};
+export default ActionButton;

package/build/components/action-button/style.module.scss

@@ -0,0 +1,11 @@
+.error {
+	color: var(--jp-red);
+	line-height: 25px;
+	padding-left: 25px;
+	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDIwQzE2LjQxODMgMjAgMjAgMTYuNDE4MyAyMCAxMkMyMCA3LjU4MTcyIDE2LjQxODMgNCAxMiA0QzcuNTgxNzIgNCA0IDcuNTgxNzIgNCAxMkM0IDE2LjQxODMgNy41ODE3MiAyMCAxMiAyMFoiIHN0cm9rZT0iI0Q2MzYzOSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPHBhdGggZD0iTTEzIDdIMTFWMTNIMTNWN1oiIGZpbGw9IiNENjM2MzkiLz4KPHBhdGggZD0iTTEzIDE1SDExVjE3SDEzVjE1WiIgZmlsbD0iI0Q2MzYzOSIvPgo8L3N2Zz4K) no-repeat 0 0;
+}
+
+.button {
+	--spacing-base: 8px;
+	min-width: 264px;
+}

package/build/components/action-popover/styles.module.scss

@@ -0,0 +1,49 @@
+.wrapper {
+	width: 304px;
+	min-height: 230px;
+	padding: calc(var(--spacing-base) * 3); // 24px;
+	display: flex;
+	flex-direction: column;
+
+	.header {
+		display: flex;
+		margin-bottom: calc(var(--spacing-base) * 2); // 16px
+		justify-content: space-between;
+
+		.title {
+			max-width: 226px;
+		}
+
+		.close-button {
+			height: calc(var(--spacing-base) * 3); // 24px
+			width: calc(var(--spacing-base) * 3); // 24px
+			min-width: unset;
+			color: var(--jp-gray-90);
+			background-color: var(--jp-white);
+			flex-shrink: 0;
+
+			&:hover:not(:focus) {
+				box-shadow: none;
+			}
+		}
+	}
+
+	.footer {
+		height: calc(var(--spacing-base) * 6); // 48px
+		margin-top: calc(var(--spacing-base) * 2); // 16px
+		display: flex;
+		justify-content: flex-end;
+		align-items: flex-end;
+		flex-grow: 1;
+
+		.steps {
+			color: var(--jp-gray-60);
+			flex-grow: 1;
+			margin-bottom: var(--spacing-base);
+		}
+
+		.action-button {
+			flex-shrink: 0;
+		}
+	}
+}

package/build/components/admin-page/style.module.scss

@@ -0,0 +1,28 @@
+.admin-page {
+	margin-left: -20px; // to neutralize the padding of #wpcontent.
+
+	@media (max-width: 782px) {
+		margin-left: -10px; // to neutralize the padding of #wpcontent.
+	}
+
+	&.background {
+		background-color: var(--jp-white);
+	}
+
+	.admin-page-header {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+	}
+
+	.sandbox-domain-badge {
+		background: #d63638;
+		text-transform: uppercase;
+		letter-spacing: 0.2em;
+		text-shadow: none;
+		font-size: 9px;
+		font-weight: 700;
+		cursor: pointer;
+		color: #fff;
+	}
+}

package/build/components/admin-section/basic/style.module.scss

@@ -0,0 +1,3 @@
+.section {
+	background-color: var(--jp-white);
+}

package/build/components/admin-section/hero/style.module.scss

@@ -0,0 +1,4 @@
+.section-hero {
+	padding-top: 1px; // prevent margin collapse for interior sections
+	background: var(--jp-white-off);
+}

package/build/components/alert/style.module.scss

@@ -0,0 +1,47 @@
+.container {
+	display: flex;
+	font-size: var(--font-body);
+	line-height: calc(var(--spacing-base) * 3);
+	min-height: calc(var(--spacing-base) * 3);
+	align-items: center;
+	margin: calc(var(--spacing-base) * 2) 0;
+}
+
+.icon-wrapper {
+	margin-right: calc(var(--spacing-base) / 2);
+	width: calc(var(--spacing-base) * 3);
+	height: calc(var(--spacing-base) * 3);
+	align-self: flex-start;
+}
+
+.is-error {
+	color: var(--jp-red);
+
+	.icon {
+		fill: var(--jp-red);
+	}
+}
+
+.is-warning {
+	color: var(--jp-yellow-40);
+
+	.icon {
+		fill: var(--jp-yellow-40);
+	}
+}
+
+.is-info {
+	color: var(--jp-blue-40);
+
+	.icon {
+		fill: var(--jp-blue-40);
+	}
+}
+
+.is-success {
+	color: var(--jp-green);
+
+	.icon {
+		fill: var(--jp-green);
+	}
+}

package/build/components/badge/style.module.scss

@@ -0,0 +1,25 @@
+.badge {
+	display: inline-block;
+	border-radius: 4px;
+	background-color: var(--jp-gray-0);
+	color: var(--jp-gray-80);
+	padding: 4px 8px;
+	font-size: 13px;
+	font-weight: 400;
+	line-height: 16px;
+
+	&.is-success {
+		background-color: var(--jp-green-5);
+		color: var(--jp-green-50);
+	}
+
+	&.is-warning {
+		background-color: var(--jp-yellow-5);
+		color: var(--jp-yellow-60);
+	}
+
+	&.is-danger {
+		background-color: var(--jp-red-5);
+		color: var(--jp-red-70);
+	}
+}

package/build/components/boost-score-bar/style.scss

@@ -0,0 +1,189 @@
+@use "sass:math";
+
+$bar_height: 42px;
+$label_z_index: 50;
+$score_pointer_size: 6px;
+$no_boost_score_size: 28px;
+
+%score-pill {
+	background-color: #fff;
+	border-radius: $bar_height;
+	height: $bar_height;
+	display: flex;
+	align-items: center;
+	border: 2px solid transparent;
+}
+
+.jb-score-bar {
+	width: 100%;
+	display: flex;
+	color: var(--jp-gray-70);
+
+	&--mobile { // .jb-score-bar--mobile
+		margin-bottom: 1.5rem;
+	}
+
+	@media (max-width: 767px) {
+		flex-direction: column;
+
+		&__label {
+			background-color: transparent;
+		}
+	}
+
+
+	&__loading {
+
+		@extend %score-pill;
+		width: $bar_height;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__label {
+
+		@extend %score-pill;
+		display: grid;
+		grid-template-columns: 24px 1fr;
+		grid-column-gap: 10px;
+		justify-content: center;
+		font-size: 14px;
+		position: relative;
+
+		@media (min-width: 768px) {
+			padding-left: 15px;
+			padding-right: 15px;
+			width: 200px;
+			z-index: $label_z_index;
+		}
+	}
+
+	&__score {
+
+		@extend %score-pill;
+		border-radius: 100%;
+		font-weight: 700;
+		width: $bar_height;
+		justify-content: center;
+		position: absolute;
+		right: -1px;
+		height: $bar_height;
+	}
+
+	&__bounds {
+		background-color: #f1f1f1;
+		border-radius: math.div($bar-height, 2);
+		display: flex;
+		height: $bar_height;
+		width: 100%;
+		max-width: 100%;
+		position: relative;
+		z-index: $label_z_index - 10;
+
+		@media (min-width: 768px) {
+			width: calc(100% + #{math.div($bar-height, 2)});
+			margin-left: math.div(-$bar_height, 2);
+		}
+	}
+
+	&__filler {
+		display: flex;
+		min-width: 1px + $bar_height * 2;
+		justify-content: flex-end;
+		border-radius: 0 $bar_height $bar_height 0;
+		transition: width 300ms ease-in-out;
+		will-change: width;
+		width: 0;
+		position: relative;
+
+		@media (max-width: 767px) {
+			min-width: $bar_height + 1px;
+			border-radius: inherit;
+		}
+	}
+
+	&__no_boost_score {
+
+		--clearance-space: #{$bar_height + $no_boost_score_size + 4px};
+
+		position: absolute;
+		background: #fff;
+		border-radius: 50%;
+		padding: 3px;
+		top: $score_pointer_size;
+		width: $no_boost_score_size;
+		height: $no_boost_score_size;
+		line-height: 1.625;
+		font-size: 0.7em;
+		text-align: center;
+		cursor: pointer;
+		z-index: 2;
+		border: 2px solid transparent;
+		background-clip: padding-box;
+
+		&:hover {
+			border: 2px solid rgba(255, 255, 255, 0.5);
+		}
+
+		&::after {
+			content: " ";
+			width: 0;
+			height: 0;
+			border-left: $score_pointer_size solid transparent;
+			border-right: $score_pointer_size solid transparent;
+			border-bottom: $score_pointer_size solid #fff;
+
+			position: absolute;
+			top: $bar_height - $score_pointer_size * 2 - 2px;
+			left: $score_pointer_size;
+		}
+	}
+
+	&__no_boost_score_tooltip {
+		box-shadow: 0 0 20px 0 rgb(170 170 170 / 28%);
+		position: absolute;
+		top: -62px;
+		left: -10em;
+		width: 20em;
+		background: #fff;
+		padding: 16px;
+		border-radius: 4px;
+		margin: 0 16px;
+		display: none;
+
+		&::after {
+			content: " ";
+			width: 0;
+			height: 0;
+			border-left: $score_pointer_size solid transparent;
+			border-right: $score_pointer_size solid transparent;
+			border-top: $score_pointer_size solid #fff;
+
+			position: absolute;
+			bottom: -$score_pointer_size;
+			left: 10em;
+			margin: 0 -10px;
+		}
+	}
+
+	&__no_boost_score:hover &__no_boost_score_tooltip {
+		display: block;
+	}
+
+	.fill-loading {
+		background-color: var(--jp-white);
+	}
+
+	.fill-good {
+		background-color: var(--jp-green);
+	}
+
+	.fill-mediocre {
+		background-color: var(--jp-orange-20);
+	}
+
+	.fill-bad {
+		background-color: var(--jp-red-50);
+	}
+}

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

@@ -0,0 +1,76 @@
+$black: #101517;
+$white: #fff;
+
+.jb-graph-annotations {
+	pointer-events: none;
+	position: relative;
+	left: 0;
+	top: 0;
+	height: 100%;
+	width: 100%;
+	overflow: visible;
+
+	&__line {
+		position: absolute;
+		height: 100%;
+		transform: translateX(-50%);
+		pointer-events: all;
+		width: 10px;
+		z-index: 1;
+
+		/*
+		 * The actual line is a pseudo element to create a bigger hover area.
+		 */
+		&::after {
+			position: absolute;
+			content: "";
+			display: block;
+			width: 2px;
+			height: 100%;
+			background: rgba(146, 175, 215, 0.5);
+			left: calc(50% - 1px);
+		}
+
+		&:hover {
+
+			&::after {
+				background: rgba(146, 175, 215, 1);
+			}
+		}
+	}
+
+	&__annotation {
+
+		&::after {
+			content: "";
+			width: 0;
+			height: 0;
+			border-left: 8px solid transparent;
+			border-right: 8px solid transparent;
+			border-top: 8px solid $black;
+			position: absolute;
+			bottom: -7px;
+			left: 50%;
+			transform: translateX(-50%);
+		}
+
+		display: none;
+		bottom: 100%;
+		background-color: $black;
+		color: $white;
+		width: fit-content;
+		width: 20em;
+		padding: 16px 24px;
+		border-radius: 4px;
+		font-size: 14px;
+		position: absolute;
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+		text-align: center;
+		transform: translateX(-50%);
+		z-index: 2;
+
+		a {
+			color: $white !important;
+		}
+	}
+}

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

@@ -0,0 +1,74 @@
+$grey: #8e8e8e;
+$black: #101517;
+$white: #fff;
+
+.jb-score-tooltips-container {
+	width: 100%;
+	position: relative;
+	pointer-events: none;
+
+}
+
+.jb-score-tooltip-react-root {
+	position: absolute;
+	bottom: -20px;
+	translate: -50% calc(100% - 20px);
+	z-index: 1000;
+	pointer-events: auto;
+	user-select: text;
+}
+
+.jb-score-tooltip {
+	background-color: $black;
+	color: $white;
+	padding: 16px 24px;
+	border-radius: 4px;
+	font-size: 14px;
+	width: 20em;
+	position: relative;
+	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+	display: none;
+
+	.visible &,
+	&:hover {
+		display: block;
+	}
+
+	hr {
+		border-top: 1px solid $grey;
+		border-bottom: none;
+		border-left: none;
+		border-right: none;
+	}
+
+	&__date {
+		font-size: 1em;
+		font-weight: 600;
+		// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
+		line-height: 1.6em;
+	}
+
+	&__row {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		margin: 0.9em 0;
+
+		&--secondary {
+			color: $grey;
+			margin-left: 1em;
+		}
+	}
+
+	&__pointer {
+		width: 0;
+		height: 0;
+		border-left: 8px solid transparent;
+		border-right: 8px solid transparent;
+		border-bottom: 8px solid $black;
+		position: absolute;
+		top: -7px;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}

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

@@ -0,0 +1,22 @@
+.jb-score-graph {
+	height: 300px;
+
+	&__placeholder {
+		overflow: hidden;
+		width: 100%;
+		height: 100%;
+
+		svg {
+			object-position: right bottom;
+			object-fit: cover;
+			height: 100%;
+			width: 100%;
+		}
+	}
+
+}
+
+.boost-uplot-container {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+}