@automattic/jetpack-components 1.1.13 → 1.1.15

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [1.1.15] - 2025-07-23
+### Changed
+- Internal updates.
+
+## [1.1.14] - 2025-07-21
+### Changed
+- Update package dependencies. [#44356]
+
 ## [1.1.13] - 2025-07-10
 ### Changed
 - Update package dependencies. [#44219]
@@ -1477,6 +1485,8 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[1.1.15]: https://github.com/Automattic/jetpack-components/compare/1.1.14...1.1.15
+[1.1.14]: https://github.com/Automattic/jetpack-components/compare/1.1.13...1.1.14
 [1.1.13]: https://github.com/Automattic/jetpack-components/compare/1.1.12...1.1.13
 [1.1.12]: https://github.com/Automattic/jetpack-components/compare/1.1.11...1.1.12
 [1.1.11]: https://github.com/Automattic/jetpack-components/compare/1.1.10...1.1.11

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

@@ -20,5 +20,7 @@ declare namespace ActionButton {
         let errorMessage: any;
         let variant: any;
         let isExternalLink: any;
+        let customClass: any;
+        let loadingText: any;
     }
 }

package/build/components/action-button/index.js

@@ -34,8 +34,12 @@ ActionButton.propTypes = {
     /** The error message string */
     errorMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     /** The type/variant of button */
-    variant: PropTypes.arrayOf(PropTypes.oneOf(['primary', 'secondary', 'link'])),
+    variant: PropTypes.oneOf(['primary', 'secondary', 'link']),
     /** Will display the button as a link with an external icon. */
     isExternalLink: PropTypes.bool,
+    /** Custom CSS class to apply to the button */
+    customClass: PropTypes.string,
+    /** Text to display when loading */
+    loadingText: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 };
 export default ActionButton;

package/build/components/layout/col/index.js

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
 import { createElement } from 'react';
 import styles from './style.module.scss';
-const smCols = Number(styles.smCols);
-const mdCols = Number(styles.mdCols);
-const lgCols = Number(styles.lgCols);
+const smCols = Number(styles.smcols);
+const mdCols = Number(styles.mdcols);
+const lgCols = Number(styles.lgcols);
 /**
  * The basic Col component.
  *

package/components/action-button/index.jsx

@@ -67,9 +67,13 @@ ActionButton.propTypes = {
 	/** The error message string */
 	errorMessage: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
 	/** The type/variant of button */
-	variant: PropTypes.arrayOf( PropTypes.oneOf( [ 'primary', 'secondary', 'link' ] ) ),
+	variant: PropTypes.oneOf( [ 'primary', 'secondary', 'link' ] ),
 	/** Will display the button as a link with an external icon. */
 	isExternalLink: PropTypes.bool,
+	/** Custom CSS class to apply to the button */
+	customClass: PropTypes.string,
+	/** Text to display when loading */
+	loadingText: PropTypes.oneOfType( [ PropTypes.string, PropTypes.element ] ),
 };
 
 export default ActionButton;

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

@@ -1,5 +1,5 @@
 .error {
-	color: var( --jp-red );
+	color: var(--jp-red);
 	line-height: 25px;
 	padding-left: 25px;
 	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDIwQzE2LjQxODMgMjAgMjAgMTYuNDE4MyAyMCAxMkMyMCA3LjU4MTcyIDE2LjQxODMgNCAxMiA0QzcuNTgxNzIgNCA0IDcuNTgxNzIgNCAxMkM0IDE2LjQxODMgNy41ODE3MiAyMCAxMiAyMFoiIHN0cm9rZT0iI0Q2MzYzOSIgc3Ryb2tlLXdpZHRoPSIxLjUiLz4KPHBhdGggZD0iTTEzIDdIMTFWMTNIMTNWN1oiIGZpbGw9IiNENjM2MzkiLz4KPHBhdGggZD0iTTEzIDE1SDExVjE3SDEzVjE1WiIgZmlsbD0iI0Q2MzYzOSIvPgo8L3N2Zz4K) no-repeat 0 0;

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

@@ -1,25 +1,25 @@
 .wrapper {
 	width: 304px;
 	min-height: 230px;
-	padding: calc( var( --spacing-base ) * 3 ); // 24px;
+	padding: calc(var(--spacing-base) * 3); // 24px;
 	display: flex;
 	flex-direction: column;
 
 	.header {
 		display: flex;
-		margin-bottom: calc( var( --spacing-base ) * 2 ); // 16px
+		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
+			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 );
+			color: var(--jp-gray-90);
+			background-color: var(--jp-white);
 			flex-shrink: 0;
 
 			&:hover:not(:focus) {
@@ -29,17 +29,17 @@
 	}
 
 	.footer {
-		height: calc( var( --spacing-base ) * 6 ); // 48px
-		margin-top: calc( var( --spacing-base ) * 2 ); // 16px
+		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 );
+			color: var(--jp-gray-60);
 			flex-grow: 1;
-			margin-bottom: var( --spacing-base );
+			margin-bottom: var(--spacing-base);
 		}
 
 		.action-button {

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

@@ -25,4 +25,4 @@
 		cursor: pointer;
 		color: #fff;
 	}
-}
+}

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

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

package/components/alert/style.module.scss

@@ -1,47 +1,47 @@
 .container {
 	display: flex;
-	font-size: var( --font-body );
-	line-height: calc( var( --spacing-base ) * 3 );
-	min-height: calc( var( --spacing-base ) * 3 );
+	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;
+	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 );
+	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 );
+	color: var(--jp-red);
 
 	.icon {
-		fill: var( --jp-red );
+		fill: var(--jp-red);
 	}
 }
 
 .is-warning {
-	color: var( --jp-yellow-40 );
+	color: var(--jp-yellow-40);
 
 	.icon {
-		fill: var( --jp-yellow-40 );
+		fill: var(--jp-yellow-40);
 	}
 }
 
 .is-info {
-	color: var( --jp-blue-40 );
+	color: var(--jp-blue-40);
 
 	.icon {
-		fill: var( --jp-blue-40 );
+		fill: var(--jp-blue-40);
 	}
 }
 
 .is-success {
-	color: var( --jp-green );
+	color: var(--jp-green);
 
 	.icon {
-		fill: var( --jp-green );
+		fill: var(--jp-green);
 	}
-}
+}

package/components/badge/style.module.scss

@@ -13,12 +13,12 @@
 		color: var(--jp-green-50);
 	}
 
-    &.is-warning {
+	&.is-warning {
 		background-color: var(--jp-yellow-5);
 		color: var(--jp-yellow-60);
 	}
 
-    &.is-danger {
+	&.is-danger {
 		background-color: var(--jp-red-5);
 		color: var(--jp-red-70);
 	}

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

@@ -83,7 +83,7 @@ $no_boost_score_size: 28px;
 
 		@media (min-width: 768px) {
 			width: calc(100% + #{math.div($bar-height, 2)});
-			margin-left: math.div(-$bar_height, 2) ;
+			margin-left: math.div(-$bar_height, 2);
 		}
 	}
 
@@ -146,7 +146,7 @@ $no_boost_score_size: 28px;
 		top: -62px;
 		left: -10em;
 		width: 20em;
-		background: #FFF;
+		background: #fff;
 		padding: 16px;
 		border-radius: 4px;
 		margin: 0 16px;
@@ -163,11 +163,11 @@ $no_boost_score_size: 28px;
 			position: absolute;
 			bottom: -$score_pointer_size;
 			left: 10em;
-			margin: 0 -10px
+			margin: 0 -10px;
 		}
 	}
 
-  	&__no_boost_score:hover &__no_boost_score_tooltip {
+	&__no_boost_score:hover &__no_boost_score_tooltip {
 		display: block;
 	}
 
@@ -186,4 +186,4 @@ $no_boost_score_size: 28px;
 	.fill-bad {
 		background-color: var(--jp-red-50);
 	}
-}
+}

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

@@ -19,11 +19,11 @@ $white: #fff;
 		z-index: 1;
 
 		/*
-		 * The actual line is a pseudo element because we want to give a bigger hover area.
+		 * The actual line is a pseudo element to create a bigger hover area.
 		 */
 		&::after {
 			position: absolute;
-			content: '';
+			content: "";
 			display: block;
 			width: 2px;
 			height: 100%;
@@ -42,7 +42,7 @@ $white: #fff;
 	&__annotation {
 
 		&::after {
-			content: '';
+			content: "";
 			width: 0;
 			height: 0;
 			border-left: 8px solid transparent;
@@ -73,4 +73,4 @@ $white: #fff;
 			color: $white !important;
 		}
 	}
-}
+}

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

@@ -3,71 +3,72 @@ $black: #101517;
 $white: #fff;
 
 .jb-score-tooltips-container {
-    width: 100%;
-    position: relative;
-    pointer-events: none;
+	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;
+	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;
+	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;
-    }
+	.visible &,
+	&:hover {
+		display: block;
+	}
 
-    hr {
-        border-top: 1px solid $grey;
-        border-bottom: none;
-        border-left: none;
-        border-right: none;
-    }
+	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;
-    }
+	&__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;
+	&__row {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		margin: 0.9em 0;
 
-        &--secondary {
-            color: $grey;
-            margin-left: 1em;
-        }
-    }
+		&--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%);
-    }
+	&__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/components/boost-score-graph/style.scss

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

package/components/button/style.module.scss

@@ -11,9 +11,9 @@
 
 	// Icon Button
 	&.is-icon-button {
-		padding: var( --spacing-base );
-		width: calc( var( --spacing-base ) * 5 );
-		height: calc( var( --spacing-base ) * 5 );
+		padding: var(--spacing-base);
+		width: calc(var(--spacing-base) * 5);
+		height: calc(var(--spacing-base) * 5);
 
 		> svg:first-child {
 			margin: 0;
@@ -21,10 +21,10 @@
 		}
 
 		&.small {
-			padding: calc( var( --spacing-base ) / 2 );
-			width: calc( var( --spacing-base ) * 4 );
-			min-width: calc( var( --spacing-base ) * 4 );
-			height: calc( var( --spacing-base ) * 4 );	
+			padding: calc(var(--spacing-base) / 2);
+			width: calc(var(--spacing-base) * 4);
+			min-width: calc(var(--spacing-base) * 4);
+			height: calc(var(--spacing-base) * 4);
 		}
 	}
 
@@ -33,11 +33,11 @@
 		height: auto;
 		font-size: var(--font-body);
 		line-height: 24px;
-		padding: var(--spacing-base) calc( var(--spacing-base) * 3); // 8px - 24px
+		padding: var(--spacing-base) calc(var(--spacing-base) * 3); // 8px - 24px
 
 		// With icon
 		&.icon {
-			padding: var(--spacing-base) calc( var(--spacing-base) * 2); // 8px - 16px
+			padding: var(--spacing-base) calc(var(--spacing-base) * 2); // 8px - 16px
 		}
 	}
 
@@ -46,10 +46,10 @@
 		height: auto;
 		font-size: var(--font-body-extra-small);
 		line-height: 20px;
-		padding: calc( var(--spacing-base) / 2 ) var(--spacing-base); // 4px - 8px
+		padding: calc(var(--spacing-base) / 2) var(--spacing-base); // 4px - 8px
 
 		&.icon > svg:first-child {
-			margin-right: calc( var(--spacing-base) / 2 ); // 4px
+			margin-right: calc(var(--spacing-base) / 2); // 4px
 		}
 
 		// With Spinner
@@ -210,5 +210,5 @@
 }
 
 .external-icon {
-	margin-left: calc( var(--spacing-base) / 2 ); // 4px
+	margin-left: calc(var(--spacing-base) / 2); // 4px
 }

package/components/contextual-upgrade-trigger/style.module.scss

@@ -1,11 +1,11 @@
 .cut {
-	border: 2px solid var( --jp-green-40 );
-	border-radius: var( --jp-border-radius );
-	padding: calc( var( --spacing-base ) * 2 ) calc( var( --spacing-base ) * 3 );
+	border: 2px solid var(--jp-green-40);
+	border-radius: var(--jp-border-radius);
+	padding: calc(var(--spacing-base) * 2) calc(var(--spacing-base) * 3);
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	gap: calc( var( --spacing-base ) * 3 );
+	gap: calc(var(--spacing-base) * 3);
 	text-align: left;
 	background: none;
 	width: 100%;
@@ -19,7 +19,7 @@
 		cursor: pointer;
 
 		&::after {
-			content: '';
+			content: "";
 			position: absolute;
 			top: 0;
 			left: 0;
@@ -29,14 +29,14 @@
 	}
 
 	&:focus-within {
-		border-color: var( --jp-black );
+		border-color: var(--jp-black);
 	}
 
 	&:focus-within,
 	&:hover {
 
 		.icon {
-			transform: translateX( calc( var( --spacing-base ) * 2 ) );
+			transform: translateX(calc(var(--spacing-base) * 2));
 		}
 
 		.cta {
@@ -56,16 +56,16 @@
 }
 
 .icon {
-	fill: var( --jp-green-40 );
+	fill: var(--jp-green-40);
 	transition: transform 0.1s ease-out;
 	pointer-events: none;
 }
 
 .iconContainer {
-	margin: 0 0 0 calc( var( --spacing-base ) / 3);
+	margin: 0 0 0 calc(var(--spacing-base) / 3);
 	display: inline;
 	vertical-align: middle;
-	
+
 	svg {
 		z-index: 10;
 		position: relative;

package/components/decorative-card/style.scss

@@ -1,10 +1,10 @@
-@use '@automattic/jetpack-base-styles/style';
+@use "@automattic/jetpack-base-styles/style";
 
 .jp-components__decorative-card {
 	display: flex;
 	border-radius: 8px;
 	overflow: hidden;
-	box-shadow: 0 0 15px var( --jp-gray );
+	box-shadow: 0 0 15px var(--jp-gray);
 	position: relative;
 	width: 360px;
 	max-width: 100%;
@@ -18,12 +18,12 @@
 	}
 
 	&__image {
-		background: var( --jp-gray );
+		background: var(--jp-gray);
 		background-size: cover;
 		position: relative;
 
 		&::before {
-			content: '';
+			content: "";
 			display: block;
 			position: absolute;
 			top: 24px;
@@ -36,7 +36,7 @@
 	}
 
 	&__content {
-		background: #FFF;
+		background: #fff;
 		padding: 2rem;
 	}
 
@@ -57,13 +57,13 @@
 		position: absolute;
 		top: 50%;
 		left: 50%;
-		transform: translate( -50%, -50% );
+		transform: translate(-50%, -50%);
 		background-position: center, center;
 		background-repeat: no-repeat;
 
 		&--unlink {
 			// stylelint-disable-next-line function-url-quotes -- quotes are required here. Bug report: https://github.com/stylelint/stylelint/issues/8544
-			background-image: url('data:image/svg+xml,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>')
+			background-image: url('data:image/svg+xml,<svg width="34" height="37" viewBox="0 0 34 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.3335 10.001H25.0002C29.4184 10.001 33.0002 13.5827 33.0002 18.001V19.7788C33.0002 24.197 29.4184 27.7788 25.0002 27.7788H22.3335" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M11.6675 27.7783L9.00082 27.7783C4.58254 27.7783 1.00081 24.1966 1.00081 19.7783L1.00081 18.0005C1.00081 13.5823 4.58253 10.0005 9.00081 10.0005L11.6675 10.0005" stroke="white" stroke-width="1.5" stroke-linecap="square"/> <path d="M10.9998 19.167L16.9998 19.167" stroke="white" stroke-width="1.5"/> <path d="M8.99951 35.998L24.9995 0.998048" stroke="white"/> </svg>');
 		}
 	}
 
@@ -72,17 +72,17 @@
 		width: 100%;
 		height: 12px;
 		border-radius: 6px;
-		background: #E9EFF5;
+		background: #e9eff5;
 		position: relative;
 
 		&::before,
 		&::after {
-			content: '';
+			content: "";
 			display: block;
 			width: 100%;
 			height: 12px;
 			border-radius: 6px;
-			background: #E9EFF5;
+			background: #e9eff5;
 			position: relative;
 			top: calc(100% + 16px);
 		}