@automattic/jetpack-components 0.72.2 → 0.72.3

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ### This is a list detailing changes for the Jetpack RNA Components package releases.
 
+## [0.72.3] - 2025-04-07
+### Changed
+- Code: First pass of style coding standards. [#42734]
+
+### Fixed
+- Fix TypeScript type checking in the monorepo. [#42817]
+
 ## [0.72.2] - 2025-04-01
 ### Changed
 - Update package dependencies. [#42809]
@@ -1351,6 +1358,7 @@
 ### Changed
 - Update node version requirement to 14.16.1
 
+[0.72.3]: https://github.com/Automattic/jetpack-components/compare/0.72.2...0.72.3
 [0.72.2]: https://github.com/Automattic/jetpack-components/compare/0.72.1...0.72.2
 [0.72.1]: https://github.com/Automattic/jetpack-components/compare/0.72.0...0.72.1
 [0.72.0]: https://github.com/Automattic/jetpack-components/compare/0.71.0...0.72.0

package/components/alert/style.module.scss

@@ -16,6 +16,7 @@
 
 .is-error {
 	color: var( --jp-red );
+
 	.icon {
 		fill: var( --jp-red );
 	}
@@ -23,6 +24,7 @@
 
 .is-warning {
 	color: var( --jp-yellow-40 );
+
 	.icon {
 		fill: var( --jp-yellow-40 );
 	}
@@ -30,6 +32,7 @@
 
 .is-info {
 	color: var( --jp-blue-40 );
+
 	.icon {
 		fill: var( --jp-blue-40 );
 	}
@@ -37,6 +40,7 @@
 
 .is-success {
 	color: var( --jp-green );
+
 	.icon {
 		fill: var( --jp-green );
 	}

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

@@ -25,6 +25,7 @@ $no_boost_score_size: 28px;
 
 	@media (max-width: 767px) {
 		flex-direction: column;
+
 		&__label {
 			background-color: transparent;
 		}
@@ -32,6 +33,7 @@ $no_boost_score_size: 28px;
 
 
 	&__loading {
+
 		@extend %score-pill;
 		width: $bar_height;
 		display: flex;
@@ -40,6 +42,7 @@ $no_boost_score_size: 28px;
 	}
 
 	&__label {
+
 		@extend %score-pill;
 		display: grid;
 		grid-template-columns: 24px 1fr;
@@ -57,6 +60,7 @@ $no_boost_score_size: 28px;
 	}
 
 	&__score {
+
 		@extend %score-pill;
 		border-radius: 100%;
 		font-weight: 700;
@@ -76,6 +80,7 @@ $no_boost_score_size: 28px;
 		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) ;
@@ -91,6 +96,7 @@ $no_boost_score_size: 28px;
 		will-change: width;
 		width: 0;
 		position: relative;
+
 		@media (max-width: 767px) {
 			min-width: $bar_height + 1px;
 			border-radius: inherit;

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

@@ -33,6 +33,7 @@ $white: #ffffff;
 		}
 
 		&:hover {
+
 			&::after {
 				background: rgba(146, 175, 215, 1);
 			}
@@ -40,6 +41,7 @@ $white: #ffffff;
 	}
 
 	&__annotation {
+
 		&::after {
 			content: '';
 			width: 0;

package/components/button/style.module.scss

@@ -14,6 +14,7 @@
 		padding: var( --spacing-base );
 		width: calc( var( --spacing-base ) * 5 );
 		height: calc( var( --spacing-base ) * 5 );
+
 		> svg:first-child {
 			margin: 0;
 			padding: 0;
@@ -170,6 +171,7 @@
 
 		// Link
 		&:global(.is-link) {
+
 			&:not(:disabled) {
 				color: var(--jp-red-50);
 			}

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

@@ -34,6 +34,7 @@
 
 	&:focus-within,
 	&:hover {
+
 		& .icon {
 			transform: translateX( calc( var( --spacing-base ) * 2 ) );
 		}

package/components/dialog/style.module.scss

@@ -14,6 +14,7 @@
 // Fit images in secondary section.
 .secondary {
 	align-items: center;
+
 	img {
 		// let's fit images
 		object-fit: cover;

package/components/donut-meter/style.scss

@@ -1,10 +1,13 @@
 .donut-meter {
+
   .donut-meter-segment {
     stroke: var(--jp-green);
   }
+
   &.is-warning .donut-meter-segment {
     stroke: var(--jp-yellow-10);
   }
+
   &.is-danger .donut-meter-segment {
     stroke: var(--jp-red);
   }

package/components/dot-pager/style.scss

@@ -10,6 +10,7 @@
 .dot-pager__page {
 	height: 100%;
 	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+
 	@include reduce-motion( "transition" );
 	opacity: 1;
 	visibility: visible;
@@ -26,6 +27,7 @@
 	left: 0;
 	right: 0;
 	z-index: 1;
+
 	li {
 		display: inline-flex;
 		margin: 0 4px;
@@ -35,6 +37,7 @@
 		&:first-child {
 			margin-left: 0;
 		}
+
 		&:last-child {
 			margin-right: 0;
 		}
@@ -74,6 +77,7 @@
 }
 
 .dot-pager {
+
 	&__button {
 		margin-right: 10px;
 	}

package/components/global-notices/styles.module.scss

@@ -1,6 +1,7 @@
 @import '@automattic/jetpack-base-styles/gutenberg-base-styles';
 
 .global-notices {
+
 	&:global(.components-snackbar-list) {
 		position: fixed;
 		inset-block-start: auto; // top

package/components/icon-tooltip/style.scss

@@ -9,6 +9,7 @@ $arrow-color: var( --jp-gray );
 
 // Namespace to avoid overriding global styles
 .icon-tooltip-helper {
+
 	/*
 	* Fix arrow placement - section start
 	*/
@@ -19,6 +20,7 @@ $arrow-color: var( --jp-gray );
 	.components-popover:not([data-y-axis=middle])[data-x-axis=right] .components-popover__content {
 		margin-left: -62px;	
 	}
+
 	/*
 	* Fix arrow placement - section end
 	*/
@@ -49,6 +51,7 @@ $arrow-color: var( --jp-gray );
 	.components-popover:not(.is-without-arrow)[data-y-axis=top]::after {
 		bottom: 4px;
 	}
+
 	/*
 	* Fix arrow position for legacy position option - section end
 	*/

package/components/icons/style.module.scss

@@ -11,9 +11,11 @@
 
 .socialIcon {
 	fill: $gray-700;
+
 	&.bluesky {
 		fill: var( --color-bluesky );
 	}
+
 	&.facebook {
 		fill: var( --color-facebook );
 		// Add some specificity to override the border-radius on Jetpack settings page
@@ -21,24 +23,31 @@
 			border-radius: 50%;
 		}
 	}
+
 	&.instagram {
 		fill: var( --color-instagram );
 	}
+
 	&.twitter {
 		fill: var( --color-twitter );
 	}
+
 	&.linkedin {
 		fill: var( --color-linkedin );
 	}
+
 	&.tumblr {
 		fill: var( --color-tumblr );
 	}
+
 	&.google {
 		fill: var( --color-gplus );
 	}
+
 	&.mastodon {
 		fill: var( --color-mastodon );
 	}
+
 	&.nextdoor {
 		fill: var( --color-nextdoor );
 		// Add some specificity to override the border-radius on Jetpack settings page
@@ -46,14 +55,18 @@
 			border-radius: 50%;
 		}
 	}
+
 	&.instagram {
 		fill: var( --color-instagram );
 	}
+
 	&.whatsapp {
 		fill: var( --color-whatsapp );
 	}
+
 	&.threads {
 		fill: var( --color-threads );
+
 		&:global(.social-logo) {
 			border-radius: 40%;
 		}

package/components/indeterminate-progress-bar/style.module.scss

@@ -22,12 +22,14 @@
 }
 
 @keyframes indeterminate_progress_bar__animation {
+
 	0% {
 		background-position: 136px 0;
 	}
 }
 
 @media (prefers-reduced-motion: no-preference) {
+
 	.indeterminate-progress-bar {
 		animation: indeterminate_progress_bar__animation 2000ms infinite linear;
 	}

package/components/jetpack-footer/style.scss

@@ -38,6 +38,7 @@
 	}
 
 	&.is-sm {
+
 		> ul {
 			flex-direction: column;
 			align-items: flex-start;
@@ -100,6 +101,7 @@
 }
 
 .jp-dashboard-footer__a8c-item {
+
 	.jp-dashboard-footer.is-lg & {
 		margin-inline-start: auto;
 	}
@@ -111,6 +113,7 @@
 
 .jp-dashboard-footer__jp-item,
 .jp-dashboard-footer__a8c-item {
+
 	> a {
 		text-decoration: none; // Logos typically have no hover effect
 	}

package/components/layout/breakpoints.module.scss

@@ -14,6 +14,7 @@ $breakpoints: ("sm": "(max-width: 599px)", "md": "(min-width: 600px) and (max-wi
 }
 
 :export {
+
 	@each $breakpoint, $media in $breakpoints {
 		#{$breakpoint}: string.unquote($media);
 	}

package/components/layout/col/style.module.scss

@@ -2,7 +2,9 @@
 @import "../breakpoints.module.scss";
 
 @mixin cols($size) {
+
 	@include media($size) using ($columns) {
+
 		@for $i from 1 through $columns {
 			.col-#{$size}-#{$i} {
 				grid-column-end: span #{$i};

package/components/loading-placeholder/style.module.scss

@@ -1,10 +1,13 @@
 @keyframes pulse {
+
   0% {
     opacity: .6;
   }
+
   50% {
     opacity: 1;
   }
+
   100% {
     opacity: .6;
   }

package/components/notice/style.module.scss

@@ -24,6 +24,7 @@
 	border: none;
 	cursor: pointer;
 	outline: none;
+
 	svg {
 		display: block;
 	}
@@ -31,6 +32,7 @@
 
 // Mobile layout differences.
 @media screen and ( max-width: 600px ) {
+
 	.container {
 		position: relative;
 		padding-top: 68px;
@@ -71,6 +73,7 @@
 	}
 
 	a {
+
 		&, &:hover, &:active, &:focus {
 			color: var( --jp-black );
 		}

package/components/number-slider/style.scss

@@ -10,6 +10,7 @@ $track-height: 8px;
 
 // On holding thumb styling
 .jp-components-number-slider--is-holding {
+
 	.jp-components-number-slider__thumb {
 		box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(6, 158, 8, 0.25);
 	}
@@ -22,6 +23,7 @@ $track-height: 8px;
 }
 
 .jp-components-number-slider__track {
+
 	@include adjust-track-rail-styles;
 	top: calc(($thumb-height / 2) - ($track-height / 2));
 	background: var(--jp-gray);

package/components/pricing-card/style.scss

@@ -14,6 +14,7 @@
 	}
 
 	&__icon {
+
 		img {
 			height: 32px;
 			width: 32px;

package/components/pricing-table/styles.module.scss

@@ -25,6 +25,7 @@
 	}
 
 	&.is-primary {
+
 		> * {
 			background: var(--jp-white);
 			position: relative;
@@ -78,6 +79,7 @@
 			left: var(--padding);
 			right: var(--padding);
 			height: 1px;
+
 			.is-viewport-large & {
 				width: calc(100% + var(--gap));
 				left: 0;

package/components/product-price/style.module.scss

@@ -43,6 +43,7 @@
 		}
 	}
 }
+
 .footer {
 	display: flex;
 	flex-wrap: wrap;

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

@@ -4,9 +4,13 @@
 /// @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 );

package/components/record-meter-bar/style.scss

@@ -11,16 +11,19 @@
 	}
 
 	&__legend {
+
 		&--items {
 			display: flex;
 			margin: 0;
 		}
+
 		&--item {
 			display: flex;
 			margin: 0;
 			margin-inline-end: 1em;
 			align-items: center;
 		}
+
 		&--item-circle {
 			width: 1rem;
 			height: 1rem;
@@ -28,9 +31,11 @@
 			margin-inline-end: 0.4em;
 			border-radius: 100%;
 		}
+
 		&--item-count {
 			margin-inline-end: 0.4em;
 		}
+
 		&--item-label-first {
 			margin-inline-end: 0.4em;
 		}

package/components/spinner/style.scss

@@ -1,4 +1,5 @@
 @keyframes rotate-spinner {
+
 	100% {
 		transform: rotate( 360deg );
 	}

package/components/status/style.module.scss

@@ -21,6 +21,7 @@
     }
 
     &.is-active {
+
 		span, a {
 			color: var(--jp-green-50);
 		}
@@ -31,6 +32,7 @@
     }
 
     &.is-inactive {
+
 		span, a {
 			color: var(--jp-gray-50);
 		}
@@ -41,6 +43,7 @@
     }
 
     &.is-error {
+
 		span, a {
 			color: var(--jp-red-50);
 		}
@@ -51,6 +54,7 @@
     }
 
     &.is-action {
+
 		span, a {
 			color: var(--jp-yellow-30);
 		}
@@ -61,6 +65,7 @@
     }
 
     &.is-initializing {
+
 		span, a {
 			color: var(--jp-blue-40);
 		}

package/components/testimonials/style.scss

@@ -117,6 +117,7 @@
 }
 
 @keyframes showTestimonial {
+
     0% {
         opacity: 0;
     }

package/components/text/style.module.scss

@@ -98,6 +98,7 @@ $sides: (
 	$sizes: ( 0, 1, 2, 3, 4, 5, 6, 7, 8 );
 
 	@each $size in $sizes {
+
 		/* m, p */
 		.#{$p}-#{$size} {
 			#{$prop}: calc( var( --spacing-base ) * #{$size} );
@@ -115,6 +116,7 @@ $sides: (
 		}
 
 		/* mt, mr, mb, ml */
+
 		/* pt, pr, pb, pl */
 		@each $side, $s in $sides {
 			.#{$p}#{$s}-#{$size} {

package/components/theme-provider/globals.module.scss

@@ -1,5 +1,6 @@
 /* DO NOT USE THIS TO OVERRIDE STYLES */
 .global {
+
 	& * {
 		box-sizing: border-box;
 	}

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

@@ -15,6 +15,7 @@
 	}
 
 	:global {
+
 		.components-form-toggle {
 			--wp-admin-theme-color: var( --jp-green-40 );
 			height: calc( var(--base-width) * 3 );
@@ -50,7 +51,9 @@
 }
 
 .toggle.is-toggling {
+
 	:global {
+
 		.components-form-toggle {
 			opacity: .6;
 		}

package/components/upsell-banner/style.scss

@@ -82,6 +82,7 @@
 					background-color: var( --jp-white );
 					color: var( --jp-black );
 				}
+
 				&.primary {
 					margin-left: 8px;
 				}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@automattic/jetpack-components",
-	"version": "0.72.2",
+	"version": "0.72.3",
 	"description": "Jetpack Components Package",
 	"author": "Automattic",
 	"license": "GPL-2.0-or-later",
@@ -37,7 +37,7 @@
 		"uplot-react": "1.1.4"
 	},
 	"devDependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.45",
+		"@automattic/jetpack-base-styles": "^0.7.0",
 		"@babel/core": "7.26.10",
 		"@babel/preset-react": "7.26.3",
 		"@jest/globals": "29.4.3",
@@ -89,6 +89,7 @@
 		"clean": "rm -rf build/",
 		"compile-ts": "tsc --pretty",
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
-		"test-coverage": "pnpm run test --coverage"
+		"test-coverage": "pnpm run test --coverage",
+		"typecheck": "tsc --noEmit"
 	}
 }