@automattic/jetpack-components 1.4.10 → 1.4.12

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

@@ -0,0 +1,214 @@
+.button {
+	--wp-admin-theme-color: var(--jp-black);
+	--wp-admin-theme-color-darker-10: var(--jp-black-80);
+	--wp-admin-theme-color-darker-20: var(--jp-black-80);
+	// 1.51px to avoid subpixel rendering issues on Firefox/Linux
+	--wp-admin-border-width-focus: 1.51px;
+
+	border-radius: var(--jp-border-radius);
+	justify-content: center;
+	font-weight: 600;
+
+	// Icon Button
+	&.is-icon-button {
+		padding: var(--spacing-base);
+		width: calc(var(--spacing-base) * 5);
+		height: calc(var(--spacing-base) * 5);
+
+		> svg:first-child {
+			margin: 0;
+			padding: 0;
+		}
+
+		&.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);
+		}
+	}
+
+	// Normal Size & Font
+	&.normal:not(.is-icon-button) {
+		height: auto;
+		font-size: var(--font-body);
+		line-height: 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
+		}
+	}
+
+	// Small Size & Font
+	&.small:not(.is-icon-button) {
+		height: auto;
+		font-size: var(--font-body-extra-small);
+		line-height: 20px;
+		padding: calc(var(--spacing-base) / 2) var(--spacing-base); // 4px - 8px
+
+		&.icon > svg:first-child {
+			margin-right: calc(var(--spacing-base) / 2); // 4px
+		}
+
+		// With Spinner
+		> :global(.components-spinner) {
+			height: 20px;
+		}
+	}
+
+	&.regular {
+		font-weight: 400;
+	}
+
+	// Full Width
+	&.full-width {
+		min-width: 100%;
+	}
+
+	// SPECIFICS
+	// PRIMARY AND SECONDARY
+
+	// Primary & Secondary
+	&:global(.is-primary),
+	&:global(.is-secondary) {
+		// Disabled
+		&:disabled {
+			background: var(--jp-gray);
+			color: var(--jp-gray-20);
+		}
+	}
+
+	// Only Secondary
+	&:global(.is-secondary) {
+		background: var(--jp-white);
+		// 1.51px to avoid subpixel rendering issues on Firefox/Linux
+		box-shadow: inset 0 0 0 1.51px var(--jp-black);
+
+		// Hover & Active
+		&:active:not(:disabled),
+		&:hover:not(:disabled) {
+			background: var(--jp-gray-0);
+		}
+	}
+
+	// SPECIFICS
+	// LINK & EXTERNAL LINK
+
+	&:global(.is-link) {
+		// Normal & Small Spacing
+		&.normal,
+		&.small {
+			padding: 0;
+		}
+
+		// Hover State
+		&:hover:not(:disabled) {
+			text-decoration-thickness: 3px;
+		}
+
+		// Focus State
+		&:focus:not(:disabled) {
+			text-decoration-line: none;
+		}
+	}
+
+	// DESTRUCTIVE
+
+	&:global(.is-destructive) {
+		// Primary
+		&:global(.is-primary) {
+			box-shadow: none;
+
+			&:not(:disabled) {
+				color: var(--jp-white);
+				background: var(--jp-red-50);
+				box-shadow: inset 0 0 0 1px var(--jp-red-50);
+			}
+
+			&:hover:not(:disabled) {
+				background: var(--jp-red-60);
+				box-shadow: inset 0 0 0 1px var(--jp-red-60);
+			}
+
+			&:focus:not(:disabled) {
+				box-shadow: inset 0 0 0 1px var(--jp-white), 0 0 0 var(--wp-admin-border-width-focus) var(--jp-red-70);
+				background: var(--jp-red-70);
+				color: var(--jp-white);
+			}
+
+			&:active:not(:disabled) {
+				background: var(--jp-red-50);
+			}
+		}
+
+		// Secondary
+		&:global(.is-secondary) {
+			box-shadow: none;
+
+			&:not(:disabled) {
+				color: var(--jp-red-50);
+				background: var(--jp-white);
+				box-shadow: inset 0 0 0 1.5px var(--jp-red-50);
+			}
+
+			&:hover:not(:disabled) {
+				background: var(--jp-red-0);
+				box-shadow: inset 0 0 0 1.5px var(--jp-red-60);
+				color: var(--jp-red-60);
+			}
+
+			&:focus:not(:disabled) {
+				box-shadow: inset 0 0 0 1px var(--jp-white), 0 0 0 var(--wp-admin-border-width-focus) var(--jp-red-70);
+				color: var(--jp-red-70);
+			}
+
+			&:active:not(:disabled) {
+				background: var(--jp-gray-0);
+			}
+		}
+
+		// Link
+		&:global(.is-link) {
+
+			&:not(:disabled) {
+				color: var(--jp-red-50);
+			}
+
+			&:hover:not(:disabled) {
+				color: var(--jp-red-60);
+				box-shadow: none;
+			}
+
+			&:focus:not(:disabled) {
+				color: var(--jp-red-70);
+				box-shadow: inset 0 0 0 1px var(--jp-white), 0 0 0 var(--wp-admin-border-width-focus) var(--jp-red-70);
+			}
+		}
+	}
+
+	// LOADING
+
+	&.loading {
+		position: relative;
+
+		&:global(.has-icon) {
+			justify-content: center;
+		}
+
+		> *:not(:global(.components-spinner)) {
+			visibility: hidden;
+		}
+
+		// Spinner
+		> :global(.components-spinner) {
+			margin: 0;
+			position: absolute;
+		}
+	}
+}
+
+.external-icon {
+	margin-left: calc(var(--spacing-base) / 2); // 4px
+}

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

@@ -0,0 +1,18 @@
+.chip {
+	display: inline-block;
+	border-radius: 3px;
+	background-color: var(--jp-gray-5);
+	color: var(--jp-gray-50);
+	padding: 0 6px;
+	margin: 0 8px;
+	text-transform: uppercase;
+	font-size: 10px;
+	font-weight: 700;
+	line-height: 20px;
+	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+
+	&.is-new {
+		background-color: var(--jp-green-5);
+		color: var(--jp-green-50);
+	}
+}

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

@@ -0,0 +1,77 @@
+.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);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: calc(var(--spacing-base) * 3);
+	text-align: left;
+	background: none;
+	width: 100%;
+	position: relative;
+	color: var(--jp-gray-80);
+
+	button,
+	a {
+		all: unset;
+		color: var(--jp-gray-80);
+		cursor: pointer;
+
+		&::after {
+			content: "";
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	&:focus-within {
+		border-color: var(--jp-black);
+	}
+
+	&:focus-within,
+	&:hover {
+
+		.icon {
+			transform: translateX(calc(var(--spacing-base) * 2));
+		}
+
+		.cta {
+			text-decoration: underline;
+			text-decoration-thickness: 2px;
+		}
+	}
+
+	// Overwrite styles in Text component
+	.cta {
+		font-weight: 700;
+	}
+}
+
+.cta {
+	font-weight: 700;
+}
+
+.icon {
+	fill: var(--jp-green-40);
+	transition: transform 0.1s ease-out;
+	pointer-events: none;
+}
+
+.iconContainer {
+	margin: 0 0 0 calc(var(--spacing-base) / 3);
+	display: inline;
+	vertical-align: middle;
+
+	svg {
+		z-index: 10;
+		position: relative;
+	}
+}
+
+.description {
+	display: inline;
+}

package/build/components/decorative-card/style.scss

@@ -0,0 +1,116 @@
+@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);
+	position: relative;
+	width: 360px;
+	max-width: 100%;
+	height: 280px;
+	margin: 0 auto;
+	margin-bottom: 3rem;
+
+	&__image,
+	&__content {
+		width: 50%;
+	}
+
+	&__image {
+		background: var(--jp-gray);
+		background-size: cover;
+		position: relative;
+
+		&::before {
+			content: "";
+			display: block;
+			position: absolute;
+			top: 24px;
+			left: 24px;
+			width: 38px;
+			height: 8px;
+			background-image: url('data:image/svg+xml,<svg width="38" height="8" viewBox="0 0 38 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 7C1 7 2.37087 1 6.89831 1C11.4257 1 14.3709 7 18.8983 7C23.4257 7 26.7777 1 31.3051 1C35.912 1 37 7 37 7" stroke="white" stroke-width="1.5" stroke-linejoin="round"/></svg>');
+		}
+	}
+
+	&__content {
+		background: #fff;
+		padding: 2rem;
+	}
+
+	&__icon-container {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		width: 80px;
+		height: 80px;
+		background: var(--jp-red);
+		border-radius: 50px;
+	}
+
+	&__icon {
+		width: 40px;
+		height: 40px;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background-position: center, center;
+		background-repeat: no-repeat;
+
+		&--unlink {
+			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>');
+		}
+	}
+
+	&__lines {
+		display: block;
+		width: 100%;
+		height: 12px;
+		border-radius: 6px;
+		background: #e9eff5;
+		position: relative;
+
+		&::before,
+		&::after {
+			content: "";
+			display: block;
+			width: 100%;
+			height: 12px;
+			border-radius: 6px;
+			background: #e9eff5;
+			position: relative;
+			top: calc(100% + 16px);
+		}
+
+		&::after {
+			top: calc(100% + 32px);
+			width: 75%;
+		}
+	}
+
+	// Variants
+	&--vertical {
+		flex-direction: column;
+
+		.jp-components__decorative-card__image,
+		.jp-components__decorative-card__content {
+			width: 100%;
+			height: 50%;
+		}
+
+		.jp-components__decorative-card__lines {
+			max-width: 135px;
+			margin-left: auto;
+			margin-right: auto;
+
+			&::before,
+			&::after {
+				margin-left: auto;
+				margin-right: auto;
+			}
+		}
+	}
+}

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

@@ -0,0 +1,40 @@
+.details-viewer {
+	padding: 0;
+	background-color: var(--jp-gray-0);
+	font-family: monospace;
+	display: flex;
+	flex-direction: column;
+	overflow-x: auto;
+	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);
+
+	&:last-child {
+		border-bottom: none;
+	}
+}
+
+.details-viewer__key {
+	font-weight: 700;
+	padding-right: var(--spacing-base); // 8px
+	color: var(--jp-gray-80);
+	min-width: 120px;
+}
+
+.details-viewer__value {
+	flex: 1;
+	white-space: pre-wrap;
+	word-break: break-all;
+
+	pre {
+		margin: 0;
+		padding: 0;
+		font-family: monospace;
+		background-color: transparent;
+	}
+}

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

@@ -0,0 +1,31 @@
+.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);
+}
+
+.primary,
+.secondary {
+	display: flex;
+}
+
+// Fit images in secondary section.
+.secondary {
+	align-items: center;
+
+	img {
+		// let's fit images
+		object-fit: cover;
+		width: 100%;
+	}
+}
+
+// Viewport breakpoints.
+.is-viewport-small {
+	// Add spacing between primary and secondary in "sm" viewport size
+	.primary {
+		margin-bottom: calc(var(--spacing-base) * 3);
+	}
+}

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

@@ -0,0 +1,52 @@
+.diff-viewer {
+	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);
+	font-weight: 600;
+}
+
+.diff-viewer__file {
+	background-color: var(--jp-gray-0);
+	display: flex;
+	font-family: "Courier 10 Pitch", Courier, monospace;
+	flex-direction: row;
+	overflow-x: auto;
+	white-space: pre;
+}
+
+.diff-viewer__line-numbers {
+	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);
+}
+
+.diff-viewer__lines {
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow-x: visible;
+
+	div,
+	del,
+	ins {
+		padding: 0 var(--spacing-base); // 0px | 8px
+		text-decoration: none;
+	}
+
+	del {
+		background-color: var(--jp-red-0);
+		color: var(--jp-red-60);
+	}
+
+	ins {
+		background-color: var(--jp-green-5);
+		color: var(--jp-green-60);
+	}
+}

package/build/components/donut-meter/style.scss

@@ -0,0 +1,14 @@
+.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/build/components/dot-pager/style.scss

@@ -0,0 +1,78 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+@use "@automattic/jetpack-base-styles/root-variables";
+
+.dot-pager {
+	width: 100%;
+	height: 100%;
+	position: relative;
+}
+
+.dot-pager__page {
+	height: 100%;
+	transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
+	opacity: 1;
+	visibility: visible;
+
+	@include gb.reduce-motion( "transition" );
+}
+
+.dot-pager__controls {
+	margin: 0;
+	margin-bottom: 16px;
+	margin-top: auto;
+	display: flex;
+	justify-content: center;
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 1;
+
+	li {
+		display: inline-flex;
+		margin: 0 4px;
+		height: 18px;
+		align-items: center;
+
+		&:first-child {
+			margin-left: 0;
+		}
+
+		&:last-child {
+			margin-right: 0;
+		}
+	}
+
+	.dot-pager__control-gap {
+		margin-left: auto;
+	}
+}
+
+.dot-pager__control-choose-page {
+	cursor: pointer;
+	border-radius: 50%;
+	width: 6px;
+	height: 6px;
+	padding: 0;
+	background-color: var(--jp-white-off);
+
+	&:disabled {
+		cursor: default;
+	}
+
+	&:focus-visible {
+		box-shadow: 0 0 0 2px var(--jp-gray-90);
+	}
+
+	&:hover {
+		background-color: var(--jp-gray-20);
+	}
+
+	&.dot-pager__control-current {
+		background-color: var(--jp-gray-80);
+	}
+}
+
+.dot-pager__button {
+	margin-right: 10px;
+}

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

@@ -0,0 +1,24 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+
+.global-notices {
+
+	&:global(.components-snackbar-list) {
+		position: fixed;
+		inset-block-start: auto; // top
+		inset-block-end: 0; // bottom
+		inset-inline: 0; // left and right
+		// Modals have 100000, so this needs to be above them
+		z-index: 100001;
+
+		@include gb.break-small {
+			width: auto;
+			inset-inline: unset; // left and right
+			inset-block-start: 4rem;
+			inset-inline-end: 1rem;
+		}
+
+		@include gb.break-medium {
+			inset-block-start: 3rem;
+		}
+	}
+}

package/build/components/gridicon/style.scss

@@ -0,0 +1,16 @@
+.gridicon {
+	fill: currentColor;
+	display: inline-block;
+
+	&.needs-offset g {
+		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 */
+	}
+
+	&.needs-offset-y g {
+		transform: translate(0, 1px); /* only nudges vertically */
+	}
+}