@automattic/jetpack-components 1.4.11 → 1.4.13

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

@@ -0,0 +1,26 @@
+/// Radio Control
+///
+/// Overrides the @wordpress/components RadioControl component.
+/// @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);
+				}
+
+				&:focus {
+					border-color: var(--jp-green-50);
+					box-shadow: 0 0 0 2px var(--jp-white), 0 0 0 4px var(--jp-green-50);
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,43 @@
+.record-meter-bar {
+	padding-block: 1em;
+
+	&__items {
+		height: 2rem;
+		display: flex;
+		border-radius: 1rem;
+		overflow: hidden;
+		margin-bottom: 2em;
+		background-color: var(--jp-gray-off);
+	}
+
+	&__legend {
+
+		&--items {
+			display: flex;
+			margin: 0;
+		}
+
+		&--item {
+			display: flex;
+			margin: 0;
+			margin-inline-end: 1em;
+			align-items: center;
+		}
+
+		&--item-circle {
+			width: 1rem;
+			height: 1rem;
+			display: inline-block;
+			margin-inline-end: 0.4em;
+			border-radius: 100%;
+		}
+
+		&--item-count {
+			margin-inline-end: 0.4em;
+		}
+
+		&--item-label-first {
+			margin-inline-end: 0.4em;
+		}
+	}
+}

package/build/components/spinner/index.d.ts

@@ -1,13 +1,17 @@
+import './style.scss';
+declare const Spinner: {
+    ({ color, className, size }: {
+        color?: string;
+        className?: string;
+        size?: number;
+    }): import("react/jsx-runtime").JSX.Element;
+    propTypes: {
+        /** The spinner color. */
+        color: any;
+        /** CSS class names. */
+        className: any;
+        /** The spinner size. */
+        size: any;
+    };
+};
 export default Spinner;
-declare function Spinner({ color, className, size }: {
-    color?: string;
-    className?: string;
-    size?: number;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace Spinner {
-    namespace propTypes {
-        let color: any;
-        let className: any;
-        let size: any;
-    }
-}

package/build/components/spinner/style.scss

@@ -0,0 +1,33 @@
+@keyframes rotate-spinner {
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+.jp-components-spinner {
+	display: flex;
+	align-items: center;
+}
+
+.jp-components-spinner__outer,
+.jp-components-spinner__inner {
+	margin: auto;
+	box-sizing: border-box;
+	border: 0.1em solid transparent;
+	border-radius: 50%;
+	animation: 3s linear infinite;
+	animation-name: rotate-spinner;
+}
+
+.jp-components-spinner__outer {
+	border-top-color: #fff;
+}
+
+.jp-components-spinner__inner {
+	width: 100%;
+	height: 100%;
+	border-top-color: #fff;
+	border-right-color: #fff;
+	opacity: 0.4;
+}

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

@@ -0,0 +1,26 @@
+.split-button {
+	--actions-size: 28px;
+	display: flex;
+	height: var(--actions-size);
+	border-radius: var(--jp-border-radius);
+
+	:global(.components-button-group) {
+		display: flex;
+		height: 100%;
+	}
+
+	> .button:first-child {
+		border-radius: var(--jp-border-radius) 0 0 var(--jp-border-radius);
+	}
+
+	> :global(.components-dropdown) > .button {
+		border-radius: 0 var(--jp-border-radius) var(--jp-border-radius) 0;
+	}
+}
+
+.button {
+	font-size: var(--font-body-extra-small);
+	border-radius: var(--jp-border-radius);
+	height: var(--actions-size);
+	line-height: var(--actions-size);
+}

package/build/components/stat-card/style.module.scss

@@ -0,0 +1,49 @@
+.wrapper {
+	background-color: var(--jp-white);
+	box-shadow: 0 4px 40px rgba(0, 0, 0, 0.08);
+	border-radius: calc(var(--jp-border-radius) * 2); // 8px;
+	display: flex;
+
+	&.horizontal {
+		align-items: center;
+		padding: calc(var(--spacing-base) * 2); // 16px;
+		width: 358px;
+
+		.info {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			overflow: hidden;
+		}
+
+		.label {
+			margin: 0 calc(var(--spacing-base) * 2); // 16px;
+			flex-grow: 1;
+		}
+	}
+
+	&.square {
+		--square-stat-vertical-spacing: calc(var(--spacing-base) * 2); // 16px;
+		--square-stat-horizontal-spacing: calc(var(--spacing-base) * 3); // 24px;
+		flex-direction: column;
+		justify-content: space-between;
+		height: 168px;
+		width: 168px;
+		padding: var(--square-stat-vertical-spacing) var(--square-stat-horizontal-spacing);
+
+		.label {
+			margin-bottom: calc(var(--spacing-base) / 2); // 4px;
+		}
+	}
+
+	.value {
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.icon {
+		display: flex;
+		color: var(--jp-green-40);
+		fill: var(--jp-green-40);
+	}
+}

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

@@ -0,0 +1,82 @@
+.status {
+	--spacing-base: 8px;
+	--wp-admin-border-width-focus: 1.5px;
+
+	align-items: center;
+	display: flex;
+	white-space: nowrap;
+
+	&__indicator {
+		background-color: var(--jp-gray-50);
+		border-radius: 50%;
+		flex-shrink: 0;
+		height: 0.666em;
+		width: 0.666em;
+	}
+
+	&__label {
+		font-weight: 600;
+		line-height: 1.666;
+		margin-left: calc(var(--spacing-base) / 2); // 4px
+	}
+
+	&.is-active {
+
+		span,
+		a {
+			color: var(--jp-green-50);
+		}
+
+		.status__indicator {
+			background-color: var(--jp-green-50);
+		}
+	}
+
+	&.is-inactive {
+
+		span,
+		a {
+			color: var(--jp-gray-50);
+		}
+
+		.status__indicator {
+			background-color: var(--jp-gray-50);
+		}
+	}
+
+	&.is-error {
+
+		span,
+		a {
+			color: var(--jp-red-50);
+		}
+
+		.status__indicator {
+			background-color: var(--jp-red-50);
+		}
+	}
+
+	&.is-action {
+
+		span,
+		a {
+			color: var(--jp-yellow-30);
+		}
+
+		.status__indicator {
+			background-color: var(--jp-yellow-30);
+		}
+	}
+
+	&.is-initializing {
+
+		span,
+		a {
+			color: var(--jp-blue-40);
+		}
+
+		.status__indicator {
+			background-color: var(--jp-blue-40);
+		}
+	}
+}

package/build/components/swipeable/style.scss

@@ -0,0 +1,34 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+
+.swipeable__container {
+	width: 100%;
+	height: 100%;
+	position: relative;
+	overflow: hidden;
+	list-style: none;
+	padding: 0;
+	touch-action: pan-y;
+}
+
+.swipeable__pages {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: flex-start;
+	transition: all 0.5s ease-in-out;
+	transition-property: transform, height;
+
+	@include gb.reduce-motion( "transition" );
+}
+
+.swipeable__page {
+	width: 100%;
+	flex-shrink: 0;
+	margin-left: 0;
+
+	&.is-clone {
+		position: relative;
+		pointer-events: none; // Prevent interactions with cloned elements
+	}
+}

package/build/components/terms-of-service/styles.scss

@@ -0,0 +1,9 @@
+.terms-of-service {
+	font-size: var(--font-body);
+	color: var(--jp-black);
+
+	.terms-of-service__link {
+		color: var(--jp-green-50);
+		white-space: nowrap;
+	}
+}

package/build/components/testimonials/style.scss

@@ -0,0 +1,128 @@
+.testimonials {
+	position: relative;
+
+	margin-top: 1.5rem;
+	padding: calc(var(--spacing-base) * 3);
+	padding-bottom: 0;
+
+	color: var(--jp-black);
+	background-color: var(--jp-white);
+	border-radius: var(--jp-border-radius);
+	box-shadow: 0 0 40px rgba(0, 0, 0, 0.08);
+
+	&__left-arrow,
+	&__right-arrow {
+		position: absolute;
+		top: 50%;
+		transform: translateY(-50%);
+
+		background: none;
+		border: none;
+
+		svg {
+			color: #1e1e1e;
+		}
+
+		&:hover {
+			cursor: pointer;
+
+			svg {
+				color: var(--jp-gray-20);
+			}
+		}
+	}
+
+	&__left-arrow {
+		left: 0;
+	}
+
+	&__right-arrow {
+		right: 0;
+	}
+}
+
+.testimonial {
+	display: flex;
+	flex-direction: column-reverse;
+	align-items: center;
+
+	&__author-img {
+		min-width: 325px;
+		width: 365px;
+		max-width: 100%;
+		margin-top: 3rem;
+	}
+
+	&__content {
+		display: flex;
+		gap: 1rem;
+	}
+
+	&__quote-icon {
+		min-width: 32px;
+	}
+
+	&__quote,
+	&__author {
+		font-size: var(--font-title-medium);
+		font-weight: 500;
+		line-height: 1.3;
+	}
+
+	&__quote {
+		margin: 0;
+	}
+
+	&__author {
+		display: block;
+		margin-top: 2rem;
+	}
+
+	&__profession {
+		display: block;
+		margin-top: 0.5rem;
+	}
+
+	@media (min-width: 600px) {
+		padding: calc(var(--spacing-base) * 8);
+		padding-bottom: 0;
+	}
+
+	@media (min-width: 1080px) {
+		flex-direction: row;
+		align-items: flex-end;
+		gap: 3rem;
+
+		padding-top: 0;
+
+		&__content {
+			align-self: center;
+
+			min-width: 350px;
+			max-width: 550px;
+		}
+
+		&__text-block {
+			padding-bottom: calc(var(--spacing-base) * 3);
+		}
+	}
+}
+
+.show {
+	animation: showTestimonial 500ms ease-in-out forwards;
+}
+
+.hidden {
+	display: none;
+}
+
+@keyframes showTestimonial {
+
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}

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

@@ -0,0 +1,127 @@
+/* Reset all margin and padding for used components */
+.reset {
+	margin: 0;
+	padding: 0;
+}
+
+/* Emerald Typography/Headline Medium */
+.headline-medium {
+	font-size: var(--font-headline-medium);
+	font-weight: 700;
+	line-height: 52px;
+}
+
+/* Emerald Typography/Headline Small */
+.headline-small {
+	font-size: var(--font-headline-small);
+	font-weight: 700;
+	line-height: 40px;
+}
+
+/* Emerald Typography/Headline Small Regular */
+.headline-small-regular {
+	font-size: var(--font-headline-small);
+	font-weight: 400;
+	line-height: 40px;
+}
+
+/* Emerald Typography/Title Medium */
+.title-medium {
+	font-size: var(--font-title-medium);
+	font-weight: 500;
+	line-height: 32px;
+}
+
+/* Emerald Typography/Title Medium Semi Bold */
+.title-medium-semi-bold {
+	font-size: var(--font-title-medium);
+	font-weight: 600;
+	line-height: 32px;
+}
+
+/* Emerald Typography/Title Small */
+.title-small {
+	font-size: var(--font-title-small);
+	font-weight: 500;
+	line-height: 30px;
+}
+
+/* Emerald Typography/Body */
+.body {
+	font-size: var(--font-body);
+	font-weight: 400;
+	line-height: 24px;
+}
+
+/* Emerald Typography/Body Small */
+.body-small {
+	font-size: var(--font-body-small);
+	font-weight: 400;
+	line-height: 24px;
+}
+
+/* Emerald Typography/Body Extra Small */
+.body-extra-small {
+	font-size: var(--font-body-extra-small);
+	font-weight: 400;
+	line-height: 20px;
+}
+
+/* Emerald Typography/Body Extra Small Bold */
+.body-extra-small-bold {
+	font-size: var(--font-body-extra-small);
+	font-weight: 700;
+	line-height: 20px;
+}
+
+/* Emerald Typography/Body Extra Small Label */
+.label {
+	font-size: var(--font-body-extra-small);
+	font-weight: 600;
+	line-height: 16px;
+}
+
+/** Box-Model: Spacing (margin) */
+$props: (
+	"margin": "m",
+	"padding": "p",
+);
+
+$sides: (
+	"top": "t",
+	"right": "r",
+	"bottom": "b",
+	"left": "l",
+);
+
+@each $prop, $p in $props {
+	$sizes: ( 0, 1, 2, 3, 4, 5, 6, 7, 8 );
+
+	@each $size in $sizes {
+
+		/* m, p */
+		.#{$p}-#{$size} {
+			#{$prop}: calc(var(--spacing-base) * #{$size});
+		}
+
+		/* mx, px */
+		.#{$p}x-#{$size} {
+			#{$prop}-left: calc(var(--spacing-base) * #{$size});
+			#{$prop}-right: calc(var(--spacing-base) * #{$size});
+		}
+
+		.#{$p}y-#{$size} {
+			#{$prop}-top: calc(var(--spacing-base) * #{$size});
+			#{$prop}-bottom: calc(var(--spacing-base) * #{$size});
+		}
+
+		/* mt, mr, mb, ml */
+
+		/* pt, pr, pb, pl */
+		@each $side, $s in $sides {
+			.#{$p}#{$s}-#{$size} {
+				#{$prop}-#{$side}: calc(var(--spacing-base) * #{$size});
+			}
+		}
+	}
+}

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

@@ -0,0 +1,7 @@
+/* DO NOT USE THIS TO OVERRIDE STYLES */
+.global {
+
+	:where(&) * {
+		box-sizing: border-box;
+	}
+}

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

@@ -0,0 +1,61 @@
+/// Toggle Control
+///
+/// Overrides the @wordpress/components ToggleControl component.
+/// @link https://github.com/WordPress/gutenberg/tree/trunk/packages/components/src/form-toggle
+.toggle {
+	--base-width: 8px;
+	--track-width: calc(var(--base-width) * 6);
+
+	&.is-small {
+		--base-width: 6px;
+	}
+
+	&.no-label :global(.components-toggle-control__label) {
+		display: none;
+	}
+
+	:global {
+
+		.components-form-toggle {
+			--wp-admin-theme-color: var(--jp-green-40);
+			height: calc(var(--base-width) * 3);
+
+
+			&__input:focus + .components-form-toggle__track {
+				box-shadow: 0 0 0 2px var(--jp-white), 0 0 0 4px var(--jp-green-50);
+			}
+
+			.components-form-toggle__track {
+				width: var(--track-width);
+				height: calc(var(--base-width) * 3);
+				border-radius: 12px;
+				border-width: 2px;
+			}
+
+			.components-form-toggle__thumb {
+				width: calc(var(--base-width) * 2);
+				height: calc(var(--base-width) * 2);
+				top: calc(var(--base-width) / 2);
+				left: calc(var(--base-width) / 2);
+			}
+
+			&.is-checked .components-form-toggle__thumb {
+				transform: translateX(calc(var(--base-width) * 3));
+			}
+		}
+
+		.components-toggle-control__help {
+			margin-inline-start: calc(var(--track-width) + var(--spacing-base));
+		}
+	}
+}
+
+.toggle.is-toggling {
+
+	:global {
+
+		.components-form-toggle {
+			opacity: 0.6;
+		}
+	}
+}