@automattic/jetpack-components 1.1.13 → 1.1.15

package/components/details-viewer/styles.module.scss

@@ -1,18 +1,18 @@
 .details-viewer {
 	padding: 0;
-	background-color: var( --jp-gray-0 );
+	background-color: var(--jp-gray-0);
 	font-family: monospace;
 	display: flex;
 	flex-direction: column;
 	overflow-x: auto;
-	margin-bottom: var( --spacing-base ); // 8px
+	margin-bottom: var(--spacing-base); // 8px
 }
 
 .details-viewer__item {
 	display: flex;
 	flex-direction: row;
-	padding: calc( var( --spacing-base ) / 2 ); // 4px
-	border-bottom: 1px solid var( --jp-gray-10 );
+	padding: calc(var(--spacing-base) / 2); // 4px
+	border-bottom: 1px solid var(--jp-gray-10);
 
 	&:last-child {
 		border-bottom: none;
@@ -21,8 +21,8 @@
 
 .details-viewer__key {
 	font-weight: 700;
-	padding-right: var( --spacing-base ); // 8px
-	color: var( --jp-gray-80 );
+	padding-right: var(--spacing-base); // 8px
+	color: var(--jp-gray-80);
 	min-width: 120px;
 }
 

package/components/dialog/style.module.scss

@@ -1,9 +1,9 @@
 .one-section-style {
 	--product-card-shadow: rgb(0 0 0 / 3%);
-	background-color: var( --jp-white );
-	border: 1px solid var( --jp-gray );
-	border-radius: var( --jp-border-radius );
-	box-shadow: 0 2px 6px var( --product-card-shadow ), 0 1px 2px var( --product-card-shadow );
+	background-color: var(--jp-white);
+	border: 1px solid var(--jp-gray);
+	border-radius: var(--jp-border-radius);
+	box-shadow: 0 2px 6px var(--product-card-shadow), 0 1px 2px var(--product-card-shadow);
 }
 
 .primary,
@@ -26,6 +26,6 @@
 .is-viewport-small {
 	// Add spacing between primary and secondary in "sm" viewport size
 	.primary {
-		margin-bottom: calc( var( --spacing-base ) * 3 );
+		margin-bottom: calc(var(--spacing-base) * 3);
 	}
 }

package/components/diff-viewer/styles.module.scss

@@ -1,16 +1,16 @@
 .diff-viewer {
-	font-size: var( --font-body );
+	font-size: var(--font-body);
 	line-height: 1.5;
 }
 
 .diff-viewer__filename {
-	padding: calc( var( --spacing-base ) / 2 ) var( --spacing-base ); // 4px | 8px
-	background-color: var( --jp-gray-10 );
+	padding: calc(var(--spacing-base) / 2) var(--spacing-base); // 4px | 8px
+	background-color: var(--jp-gray-10);
 	font-weight: 600;
 }
 
 .diff-viewer__file {
-	background-color: var( --jp-gray-0 );
+	background-color: var(--jp-gray-0);
 	display: flex;
 	font-family: "Courier 10 Pitch", Courier, monospace;
 	flex-direction: row;
@@ -19,12 +19,12 @@
 }
 
 .diff-viewer__line-numbers {
-	padding: 0 var( --spacing-base ); // 0px | 8px
+	padding: 0 var(--spacing-base); // 0px | 8px
 	display: flex;
 	flex-direction: column;
 	text-align: right;
-	background-color: var( --jp-gray-10 );
-	color: var( --jp-gray-50 );
+	background-color: var(--jp-gray-10);
+	color: var(--jp-gray-50);
 }
 
 .diff-viewer__lines {
@@ -36,17 +36,17 @@
 	div,
 	del,
 	ins {
-		padding: 0 var( --spacing-base ); // 0px | 8px
+		padding: 0 var(--spacing-base); // 0px | 8px
 		text-decoration: none;
 	}
 
 	del {
-		background-color: var( --jp-red-0 );
-		color: var( --jp-red-60 );
+		background-color: var(--jp-red-0);
+		color: var(--jp-red-60);
 	}
 
 	ins {
-		background-color: var( --jp-green-5 );
-		color: var( --jp-green-60 );
+		background-color: var(--jp-green-5);
+		color: var(--jp-green-60);
 	}
 }

package/components/donut-meter/style.scss

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

package/components/dot-pager/style.scss

@@ -1,5 +1,5 @@
-@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
-@use '@automattic/jetpack-base-styles/root-variables';
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@automattic/jetpack-base-styles/root-variables";
 
 .dot-pager {
 	width: 100%;

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

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
 
 .global-notices {
 

package/components/gridicon/style.scss

@@ -3,14 +3,14 @@
 	display: inline-block;
 
 	&.needs-offset g {
-		transform: translate( 1px, 1px ); /* translates to .5px because it's in a child element */
+		transform: translate(1px, 1px); /* translates to .5px because it's in a child element */
 	}
 
 	&.needs-offset-x g {
-		transform: translate( 1px, 0 ); /* only nudges horizontally */
+		transform: translate(1px, 0); /* only nudges horizontally */
 	}
 
 	&.needs-offset-y g {
-		transform: translate( 0, 1px ); /* only nudges vertically */
+		transform: translate(0, 1px); /* only nudges vertically */
 	}
 }

package/components/icon-tooltip/style.scss

@@ -1,6 +1,6 @@
-@use '@automattic/jetpack-base-styles/style';
+@use "@automattic/jetpack-base-styles/style";
 
-$arrow-color: var( --jp-gray );
+$arrow-color: var(--jp-gray);
 
 // Fix arrow color
 .components-popover:not(.is-without-arrow)::before {
@@ -26,7 +26,7 @@ $arrow-color: var( --jp-gray );
 	}
 
 	.components-popover:not([data-y-axis="middle"])[data-x-axis="right"] .components-popover__content {
-		margin-left: -62px;	
+		margin-left: -62px;
 	}
 
 	/*
@@ -72,7 +72,7 @@ $arrow-color: var( --jp-gray );
 .icon-tooltip-wrapper {
 	display: inline-block;
 	position: relative;
-	color: var( --jp-black );
+	color: var(--jp-black);
 
 	.components-button.is-link:focus:not(:disabled) {
 		box-shadow: none;

package/components/icons/style.module.scss

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/gutenberg-base-styles' as gb;
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
 
 .star-icon {
 	fill: #000;
@@ -13,11 +13,11 @@
 	fill: gb.$gray-700;
 
 	&.bluesky {
-		fill: var( --color-bluesky );
+		fill: var(--color-bluesky);
 	}
 
 	&.facebook {
-		fill: var( --color-facebook );
+		fill: var(--color-facebook);
 		// Add some specificity to override the border-radius on Jetpack settings page
 		&:global(.social-logo) {
 			border-radius: 50%;
@@ -25,27 +25,27 @@
 	}
 
 	&.twitter {
-		fill: var( --color-twitter );
+		fill: var(--color-twitter);
 	}
 
 	&.linkedin {
-		fill: var( --color-linkedin );
+		fill: var(--color-linkedin);
 	}
 
 	&.tumblr {
-		fill: var( --color-tumblr );
+		fill: var(--color-tumblr);
 	}
 
 	&.google {
-		fill: var( --color-gplus );
+		fill: var(--color-gplus);
 	}
 
 	&.mastodon {
-		fill: var( --color-mastodon );
+		fill: var(--color-mastodon);
 	}
 
 	&.nextdoor {
-		fill: var( --color-nextdoor );
+		fill: var(--color-nextdoor);
 		// Add some specificity to override the border-radius on Jetpack settings page
 		&:global(.social-logo) {
 			border-radius: 50%;
@@ -53,15 +53,15 @@
 	}
 
 	&.instagram {
-		fill: var( --color-instagram );
+		fill: var(--color-instagram);
 	}
 
 	&.whatsapp {
-		fill: var( --color-whatsapp );
+		fill: var(--color-whatsapp);
 	}
 
 	&.threads {
-		fill: var( --color-threads );
+		fill: var(--color-threads);
 
 		&:global(.social-logo) {
 			border-radius: 40%;

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

@@ -1,6 +1,6 @@
 :root {
-	--jp-indeterminate-progress-bar__light-color: #F6F7F7;
-	--jp-indeterminate-progress-bar__dark-color: #EDEDEE;
+	--jp-indeterminate-progress-bar__light-color: #f6f7f7;
+	--jp-indeterminate-progress-bar__dark-color: #ededee;
 }
 
 .indeterminate-progress-bar {
@@ -11,13 +11,7 @@
 
 	pointer-events: none;
 	background-size: 68px 100%;
-	background-image: linear-gradient(
-		-45deg,
-		var(--jp-indeterminate-progress-bar__light-color) 33%,
-		var(--jp-indeterminate-progress-bar__dark-color) 33%,
-		var(--jp-indeterminate-progress-bar__dark-color) 71%,
-		var(--jp-indeterminate-progress-bar__light-color) 71%
-	);
+	background-image: linear-gradient(-45deg, var(--jp-indeterminate-progress-bar__light-color) 33%, var(--jp-indeterminate-progress-bar__dark-color) 33%, var(--jp-indeterminate-progress-bar__dark-color) 71%, var(--jp-indeterminate-progress-bar__light-color) 71%);
 	display: inline-block;
 }
 

package/components/jetpack-footer/style.scss

@@ -2,15 +2,15 @@
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	
+
 	max-width: 1128px;
 	width: 100%;
 
-	color: var( --jp-black );
-	
-	font-size: var( --font-body-extra-small );
+	color: var(--jp-black);
+
+	font-size: var(--font-body-extra-small);
 	line-height: 1.333;
-	
+
 	a {
 		text-decoration: none;
 
@@ -60,7 +60,7 @@
 		width: 100%;
 		margin: 0;
 		padding: 0;
-		
+
 		list-style: none;
 
 		> li {
@@ -68,7 +68,7 @@
 
 			> a {
 				display: flex;
-				align-items: center;	
+				align-items: center;
 				gap: 0.25rem;
 
 				min-height: 44px; // Minimum target area size
@@ -79,15 +79,15 @@
 
 .jp-dashboard-footer__accessible-external-link {
 	border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    overflow-wrap: normal;
+	clip: rect(1px, 1px, 1px, 1px);
+	clip-path: inset(50%);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+	overflow-wrap: normal;
 }
 
 .jp-dashboard-footer__jp-item {
@@ -117,4 +117,4 @@
 	> a {
 		text-decoration: none; // Logos typically have no hover effect
 	}
-}
+}

package/components/layout/col/index.tsx

@@ -4,9 +4,9 @@ import { ColProps } from '../types.ts';
 import styles from './style.module.scss';
 import type { FC, ReactElement } from 'react';
 
-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/layout/col/style.module.scss

@@ -24,7 +24,7 @@
 @include cols("lg");
 
 :export {
-	smCols: map.get(breakpoints.$cols-sizes, "sm");
-	mdCols: map.get(breakpoints.$cols-sizes, "md");
-	lgCols: map.get(breakpoints.$cols-sizes, "lg");
+	smcols: map.get(breakpoints.$cols-sizes, "sm");
+	mdcols: map.get(breakpoints.$cols-sizes, "md");
+	lgcols: map.get(breakpoints.$cols-sizes, "lg");
 }

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

@@ -7,7 +7,7 @@
 
 	@include breakpoints.media(#{$size}) using ($columns) {
 		padding: 0 #{$padding};
-		grid-template-columns: repeat( #{$columns}, minmax(0, 1fr) );
+		grid-template-columns: repeat(#{$columns}, minmax(0, 1fr));
 	}
 }
 

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

@@ -1,21 +1,21 @@
 @keyframes pulse {
 
-  0% {
-    opacity: .6;
-  }
+	0% {
+		opacity: 0.6;
+	}
 
-  50% {
-    opacity: 1;
-  }
+	50% {
+		opacity: 1;
+	}
 
-  100% {
-    opacity: .6;
-  }
+	100% {
+		opacity: 0.6;
+	}
 }
 
 .placeholder {
-  background-color: var( --jp-gray );
-  animation: pulse 1.5s infinite;
-  height: 100%;
-  width: 100%;
+	background-color: var(--jp-gray);
+	animation: pulse 1.5s infinite;
+	height: 100%;
+	width: 100%;
 }

package/components/marked-lines/styles.module.scss

@@ -1,6 +1,6 @@
 .marked-lines {
 	padding: 0;
-	background-color: var( --jp-gray-0 );
+	background-color: var(--jp-gray-0);
 	font-family: monospace;
 	display: flex;
 	flex-direction: row;
@@ -8,7 +8,7 @@
 }
 
 .marked-lines__marked-line {
-	background-color: var( --jp-red-0 );
+	background-color: var(--jp-red-0);
 }
 
 .marked-lines__line-numbers {
@@ -18,13 +18,13 @@
 }
 
 .marked-lines__line-number {
-	padding: 0 calc( var( --spacing-base ) / 2 ); // 0px | 4px
-	background-color: var( --jp-gray-10 );
-	color: var( --font-body );
+	padding: 0 calc(var(--spacing-base) / 2); // 0px | 4px
+	background-color: var(--jp-gray-10);
+	color: var(--font-body);
 
 	&.marked-lines__marked-line {
-		background-color: var( --jp-red-50 );
-		color: var( --jp-white );
+		background-color: var(--jp-red-50);
+		color: var(--jp-white);
 	}
 }
 
@@ -37,12 +37,12 @@
 }
 
 .marked-lines__line {
-	padding-left: var( --spacing-base ); // 8px
+	padding-left: var(--spacing-base); // 8px
 }
 
 .marked-lines__mark {
-	background-color: var( --jp-red );
-	color: var( --jp-white );
-	border-radius: calc( var( --jp-border-radius ) / 2 ); // 2px
-	padding: calc( var( --spacing-base ) / 4 ) calc( var( --spacing-base ) / 2 ); // 2px | 4px
+	background-color: var(--jp-red);
+	color: var(--jp-white);
+	border-radius: calc(var(--jp-border-radius) / 2); // 2px
+	padding: calc(var(--spacing-base) / 4) calc(var(--spacing-base) / 2); // 2px | 4px
 }

package/components/notice/style.module.scss

@@ -2,11 +2,11 @@
 	display: flex;
 	align-items: flex-start;
 
-	font-size: var( --font-body );
+	font-size: var(--font-body);
 
-	border: 1px solid var( --jp-black );
+	border: 1px solid var(--jp-black);
 	border-radius: 4px;
-	border-color: var( --jp-gray-5 );
+	border-color: var(--jp-gray-5);
 	border-left-width: 6px;
 
 	padding: 24px 31px 27px 18px;
@@ -14,8 +14,8 @@
 
 .icon-wrapper {
 	margin-right: 20px;
-	width: calc( var( --spacing-base ) * 3 );
-	height: calc( var( --spacing-base ) * 3 );
+	width: calc(var(--spacing-base) * 3);
+	height: calc(var(--spacing-base) * 3);
 }
 
 .close-button {
@@ -74,8 +74,11 @@
 
 	a {
 
-		&, &:hover, &:active, &:focus {
-			color: var( --jp-black );
+		&,
+		&:hover,
+		&:active,
+		&:focus {
+			color: var(--jp-black);
 		}
 	}
 
@@ -85,33 +88,33 @@
 }
 
 .is-error {
-	border-left-color: var( --jp-red );
+	border-left-color: var(--jp-red);
 
 	.icon {
-		fill: var( --jp-red );
+		fill: var(--jp-red);
 	}
 }
 
 .is-warning {
-	border-left-color: var( --jp-yellow-20 );
+	border-left-color: var(--jp-yellow-20);
 
 	.icon {
-		fill: var( --jp-yellow-20 );
+		fill: var(--jp-yellow-20);
 	}
 }
 
 .is-info {
-	border-left-color: var( --black );
+	border-left-color: var(--black);
 
 	.icon {
-		fill: var( --black );
+		fill: var(--black);
 	}
 }
 
 .is-success {
-	border-left-color: var( --jp-green );
+	border-left-color: var(--jp-green);
 
 	.icon {
-		fill: var( --jp-green );
+		fill: var(--jp-green);
 	}
-}
+}

package/components/number-slider/style.scss

@@ -1,4 +1,4 @@
-@use '@automattic/jetpack-base-styles/style';
+@use "@automattic/jetpack-base-styles/style";
 
 $thumb-height: 40px;
 $track-height: 8px;

package/components/popover/style.scss

@@ -1,6 +1,6 @@
 .jp-popover {
 	width: 600px;
-	max-width: calc( 100% - 32px );
+	max-width: calc(100% - 32px);
 	padding: 16px;
 	background-color: #fff;
 	box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 4px 8px 0 rgba(0, 0, 0, 0.03);

package/components/pricing-card/style.scss

@@ -1,13 +1,13 @@
-@use '@automattic/jetpack-base-styles/style';
+@use "@automattic/jetpack-base-styles/style";
 
 .jp-components__pricing-card {
 	width: -moz-fit-content;
 	width: fit-content;
 	max-width: 384px;
 	padding: 24px 24px 32px;
-	background:var( --jp-white );
-	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.08 );
-	border-radius: var( --jp-border-radius );
+	background: var(--jp-white);
+	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
+	border-radius: var(--jp-border-radius);
 
 	@media screen and ( min-width: 600px ) {
 		padding: 32px 32px 44px;
@@ -46,7 +46,7 @@
 	&__price-before {
 		position: relative;
 		margin-right: 16px;
-		color: var( --jp-gray-20 );
+		color: var(--jp-gray-20);
 	}
 
 	&__price-strikethrough {
@@ -55,17 +55,17 @@
 		height: 3px;
 		left: 0;
 		top: 20px;
-		background: var( --jp-pink );
+		background: var(--jp-pink);
 		border-radius: 1.5px;
 	}
 
 	&__price-after {
-		color: var( --jp-black );
+		color: var(--jp-black);
 	}
 
 	&__currency {
 		vertical-align: super;
-		font-size: var( --font-title-small );
+		font-size: var(--font-title-small);
 		font-weight: 400;
 		line-height: 20px;
 	}
@@ -76,12 +76,12 @@
 		font-size: 14px;
 		font-weight: 400;
 		line-height: 17px;
-		color: var( --jp-gray-50 );
+		color: var(--jp-gray-50);
 		letter-spacing: -0.02em;
 	}
 
 	&__price-decimal {
-		font-size: var( --font-label );
+		font-size: var(--font-label);
 		line-height: 14px;
 		vertical-align: top;
 	}
@@ -90,9 +90,9 @@
 		width: 100%;
 		height: auto;
 		font-size: 18px;
-		background: var( --jp-black );
-		color: var( --jp-white ) !important;
-		border-radius: var( --jp-border-radius );
+		background: var(--jp-black);
+		color: var(--jp-white) !important;
+		border-radius: var(--jp-border-radius);
 		padding: 14px 24px;
 		margin: 24px 0 32px;
 		justify-content: center;
@@ -101,10 +101,10 @@
 
 	&__info,
 	&__tos {
-		font-size: var( --font-label );
+		font-size: var(--font-label);
 		line-height: 20px;
 		letter-spacing: -0.02em;
-		color: var( --jp-gray-60 );
+		color: var(--jp-gray-60);
 	}
 
 	&__tos {