@automattic/jetpack-components 1.4.11 → 1.4.12

package/build/components/icon-tooltip/style.scss

@@ -0,0 +1,124 @@
+@use "@automattic/jetpack-base-styles/style";
+
+$arrow-color: var(--jp-gray);
+
+// Fix arrow color
+.components-popover:not(.is-without-arrow)::before {
+	border-color: $arrow-color;
+}
+
+// Namespace to avoid overriding global styles
+.icon-tooltip-helper {
+	// POPOVER_HELPER_WIDTH
+	width: 124px;
+	height: 18px;
+	position: absolute;
+	top: 0;
+	// -( POPOVER_HELPER_WIDTH / 2 - iconSize / 2 ) + 'px'
+	left: -53px;
+	pointer-events: none;
+
+	/*
+	* Fix arrow placement - section start
+	*/
+	.components-popover:not([data-y-axis="middle"])[data-x-axis="left"] .components-popover__content {
+		margin-right: -62px;
+	}
+
+	.components-popover:not([data-y-axis="middle"])[data-x-axis="right"] .components-popover__content {
+		margin-left: -62px;
+	}
+
+	/*
+	* Fix arrow placement - section end
+	*/
+
+	/*
+	* Fix arrow position for legacy position option - section start
+	*/
+	.components-popover[data-y-axis="bottom"] .components-popover__content {
+		top: 2px !important;
+	}
+
+	.components-popover:not(.is-without-arrow)[data-y-axis="bottom"]::before {
+		top: -6px !important;
+	}
+
+	.components-popover:not(.is-without-arrow)[data-y-axis="bottom"]::after {
+		top: -4px !important;
+	}
+
+	.components-popover[data-y-axis="top"] .components-popover__content {
+		bottom: 10px !important;
+	}
+
+	.components-popover:not(.is-without-arrow)[data-y-axis="top"]::before {
+		bottom: 3px;
+	}
+
+	.components-popover:not(.is-without-arrow)[data-y-axis="top"]::after {
+		bottom: 4px;
+	}
+
+	/*
+	* Fix arrow position for legacy position option - section end
+	*/
+
+	&.is-wide .components-popover__content {
+		width: 440px;
+	}
+}
+
+.icon-tooltip-wrapper {
+	display: inline-block;
+	position: relative;
+	color: var(--jp-black);
+
+	.components-button.is-link:focus:not(:disabled) {
+		box-shadow: none;
+	}
+}
+
+.icon-tooltip-container {
+	// Recover events
+	pointer-events: all;
+
+	// __content styles here covers both the inline and portal modes
+	.components-popover__content {
+		padding: 24px;
+		width: 304px;
+		white-space: normal;
+		border-radius: 4px;
+		outline: none;
+		border: 1px solid $arrow-color;
+		max-width: 90vw;
+		margin: 0 10px;
+	}
+}
+
+.icon-tooltip-title {
+	font-weight: 600;
+	font-size: 16px;
+	line-height: 19px;
+
+	&:not(:last-child) {
+		margin-bottom: 8px;
+	}
+}
+
+.icon-tooltip-content {
+	font-weight: 400;
+	font-size: 14px;
+	line-height: 24px;
+
+	// Allow bulleted lists in tooltips.
+	ul {
+		margin: 0 0 0 1rem;
+		list-style-type: disc;
+	}
+
+	// Remove bottom margin from last list item.
+	ul li:last-child {
+		margin-bottom: 0;
+	}
+}

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

@@ -0,0 +1,71 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+
+.star-icon {
+	fill: #000;
+}
+
+.jetpack,
+.checkmark-icon {
+	fill: var(--jp-green-primary);
+}
+
+.socialIcon {
+	fill: gb.$gray-700;
+
+	&.bluesky {
+		fill: var(--color-bluesky);
+	}
+
+	&.facebook {
+		fill: var(--color-facebook);
+		// Add some specificity to override the border-radius on Jetpack settings page
+		&:global(.social-logo) {
+			border-radius: 50%;
+		}
+	}
+
+	&.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
+		&:global(.social-logo) {
+			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/build/components/indeterminate-progress-bar/style.module.scss

@@ -0,0 +1,30 @@
+:root {
+	--jp-indeterminate-progress-bar__light-color: #f6f7f7;
+	--jp-indeterminate-progress-bar__dark-color: #ededee;
+}
+
+.indeterminate-progress-bar {
+	width: 100%;
+	height: 24px;
+	background-color: transparent;
+	border-radius: calc(var(--spacing-base) * 3);
+
+	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%);
+	display: inline-block;
+}
+
+@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/build/components/jetpack-footer/style.scss

@@ -0,0 +1,120 @@
+.jp-dashboard-footer {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+
+	max-width: 1128px;
+	width: 100%;
+
+	color: var(--jp-black);
+
+	font-size: var(--font-body-extra-small);
+	line-height: 1.333;
+
+	a {
+		text-decoration: none;
+
+		&:any-link,
+		&[role="button"] {
+			color: inherit;
+		}
+
+		&:hover {
+			text-decoration: underline;
+			text-decoration-thickness: 1.5px;
+		}
+
+		&:focus {
+			box-shadow: none;
+			outline-width: 0;
+		}
+
+		&:focus-visible {
+			border-radius: 2px;
+			box-shadow: none;
+			outline: 1.5px solid currentColor;
+			outline-offset: 3px;
+		}
+	}
+
+	&.is-sm {
+
+		> ul {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 0.125rem;
+		}
+	}
+
+	&.is-md {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	> ul {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 1rem;
+
+		width: 100%;
+		margin: 0;
+		padding: 0;
+
+		list-style: none;
+
+		> li {
+			margin-bottom: 0;
+
+			> a {
+				display: flex;
+				align-items: center;
+				gap: 0.25rem;
+
+				min-height: 44px; // Minimum target area size
+			}
+		}
+	}
+}
+
+.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;
+}
+
+.jp-dashboard-footer__jp-item {
+	padding-inline-end: 1rem;
+
+	font-weight: 600;
+
+	.jp-dashboard-footer.is-sm & {
+		padding-bottom: 1rem;
+	}
+}
+
+.jp-dashboard-footer__a8c-item {
+
+	.jp-dashboard-footer.is-lg & {
+		margin-inline-start: auto;
+	}
+
+	.jp-dashboard-footer.is-sm & {
+		padding-top: 1rem;
+	}
+}
+
+.jp-dashboard-footer__jp-item,
+.jp-dashboard-footer__a8c-item {
+
+	> a {
+		text-decoration: none; // Logos typically have no hover effect
+	}
+}

package/build/components/layout/breakpoints.module.scss

@@ -0,0 +1,21 @@
+@use "sass:map";
+@use "sass:string";
+
+$cols-sizes: ("sm": 4, "md": 8, "lg": 12);
+$breakpoints: ("sm": "(max-width: 599px)", "md": "(min-width: 600px) and (max-width: 959px)", "lg": "(min-width: 960px)");
+
+@mixin media($breakpoint) {
+	$media: map.get($breakpoints, #{$breakpoint});
+	$columns: map.get($cols-sizes, #{$breakpoint});
+
+	@media #{$media} {
+		@content($columns);
+	}
+}
+
+:export {
+
+	@each $breakpoint, $media in $breakpoints {
+		#{$breakpoint}: string.unquote($media);
+	}
+}

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

@@ -0,0 +1,30 @@
+@use "sass:map";
+@use "../breakpoints.module" as breakpoints;
+
+@mixin cols($size) {
+
+	@include breakpoints.media($size) using ($columns) {
+
+		@for $i from 1 through $columns {
+			.col-#{$size}-#{$i} {
+				grid-column-end: span #{$i};
+			}
+			.col-#{$size}-#{$i}-start {
+				grid-column-start: #{$i};
+			}
+			.col-#{$size}-#{$i}-end {
+				grid-column-end: #{$i + 1};
+			}
+		}
+	}
+}
+
+@include cols("sm");
+@include cols("md");
+@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");
+}

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

@@ -0,0 +1,35 @@
+@use "sass:map";
+@use "../breakpoints.module" as breakpoints;
+
+@mixin container($size) {
+	$paddings: ("sm": "16px", "md": "18px", "lg": "24px");
+	$padding: map.get($paddings, #{$size});
+
+	@include breakpoints.media(#{$size}) using ($columns) {
+		padding: 0 #{$padding};
+		grid-template-columns: repeat(#{$columns}, minmax(0, 1fr));
+	}
+}
+
+.container {
+	--max-container-width: 1128px;
+	// vertical spacing
+	--vertical-gutter: 24px;
+	// horizontal spacing
+	--horizontal-spacing: 8px;
+
+	display: grid;
+	column-gap: var(--vertical-gutter);
+	max-width: var(--max-container-width);
+	margin: 0 auto;
+	width: 100%;
+
+	@include container( "sm" );
+	@include container( "md" );
+	@include container( "lg" );
+
+	&.fluid {
+		max-width: none;
+		padding: unset;
+	}
+}

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

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

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

@@ -0,0 +1,48 @@
+.marked-lines {
+	padding: 0;
+	background-color: var(--jp-gray-0);
+	font-family: monospace;
+	display: flex;
+	flex-direction: row;
+	overflow-x: auto;
+}
+
+.marked-lines__marked-line {
+	background-color: var(--jp-red-0);
+}
+
+.marked-lines__line-numbers {
+	display: flex;
+	flex-direction: column;
+	text-align: right;
+}
+
+.marked-lines__line-number {
+	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);
+	}
+}
+
+.marked-lines__lines {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	white-space: pre;
+	overflow-x: visible;
+}
+
+.marked-lines__line {
+	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
+}

package/build/components/navigator-modal/styles.scss

@@ -0,0 +1,99 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+
+.components-modal__screen-overlay:has(.jp-navigator-modal) {
+	z-index: 99999; // Slightly lower than snackbar z-index (100001) so snackbars remain visible above the modal
+}
+
+.jp-navigator-modal {
+	container-type: inline-size;
+	container-name: navigator-modal;
+	width: 100%;
+
+	@include gb.break-medium() {
+		max-height: 90%;
+	}
+
+	.components-modal__content {
+		padding: 0;
+
+		> div {
+			height: 100%;
+		}
+	}
+
+	&__navigator {
+		height: 100%;
+	}
+
+	&__screen {
+		height: 100%;
+		padding: 0;
+		overflow: hidden;
+	}
+
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 1.5rem;
+		height: 4.5rem;
+		border-bottom: 1px solid gb.$gray-200;
+		flex-shrink: 0;
+
+		h1 {
+			margin: 0;
+			font-size: 15px;
+			font-weight: 500;
+			line-height: 24px;
+			color: gb.$gray-900;
+		}
+	}
+
+	&__title-wrap {
+		display: flex;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	&__body {
+		height: 100%;
+		overflow: auto;
+		flex-direction: column;
+
+		@container navigator-modal (width >= #{gb.$break-small}) {
+			flex-direction: row;
+		}
+	}
+
+	&__sidebar {
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+
+		@container navigator-modal (width >= #{gb.$break-small}) {
+			flex-basis: 30%;
+			height: 100%;
+			flex-shrink: 0;
+			border-inline-end: 1px solid gb.$gray-300;
+			overflow: auto;
+		}
+	}
+
+	&__content {
+		width: 100%;
+		height: 100%;
+		flex: 1;
+
+		@container navigator-modal (width >= #{gb.$break-small}) {
+			overflow: auto;
+		}
+	}
+
+	&__footer {
+		padding: 1rem 1.5rem;
+		border-top: 1px solid gb.$gray-300;
+		height: 4.5rem;
+		flex-shrink: 0;
+	}
+}

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

@@ -0,0 +1,120 @@
+.container {
+	display: flex;
+	align-items: flex-start;
+
+	font-size: var(--font-body);
+
+	border: 1px solid var(--jp-black);
+	border-radius: 4px;
+	border-color: var(--jp-gray-5);
+	border-left-width: 6px;
+
+	padding: 24px 31px 27px 18px;
+}
+
+.icon-wrapper {
+	margin-right: 20px;
+	width: calc(var(--spacing-base) * 3);
+	height: calc(var(--spacing-base) * 3);
+}
+
+.close-button {
+	padding: 0;
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	outline: none;
+
+	svg {
+		display: block;
+	}
+}
+
+// Mobile layout differences.
+@media screen and ( max-width: 600px ) {
+
+	.container {
+		position: relative;
+		padding-top: 68px;
+		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);
+	}
+
+	.icon-wrapper {
+		position: absolute;
+		top: 24px;
+		left: 24px;
+	}
+
+	.close-button {
+		position: absolute;
+		top: 24px;
+		right: 24px;
+	}
+}
+
+.main-content {
+	flex-grow: 1;
+}
+
+.title {
+	font-weight: 600;
+	margin-bottom: 8px;
+}
+
+.action-bar {
+	display: flex;
+	align-items: center;
+	margin-top: 20px;
+	row-gap: 20px;
+	flex-wrap: wrap;
+
+	@media screen and ( max-width: 600px ) {
+		justify-content: center;
+	}
+
+	a {
+
+		&,
+		&:hover,
+		&:active,
+		&:focus {
+			color: var(--jp-black);
+		}
+	}
+
+	> * {
+		margin-right: 24px;
+	}
+}
+
+.is-error {
+	border-left-color: var(--jp-red);
+
+	.icon {
+		fill: var(--jp-red);
+	}
+}
+
+.is-warning {
+	border-left-color: var(--jp-yellow-20);
+
+	.icon {
+		fill: var(--jp-yellow-20);
+	}
+}
+
+.is-info {
+	border-left-color: var(--black);
+
+	.icon {
+		fill: var(--black);
+	}
+}
+
+.is-success {
+	border-left-color: var(--jp-green);
+
+	.icon {
+		fill: var(--jp-green);
+	}
+}