@automattic/jetpack-components 1.4.11 → 1.4.12

package/build/components/number-control/index.d.ts

@@ -1,11 +1,28 @@
-export default NumberControl;
+import type { ComponentType, InputHTMLAttributes, ReactNode } from 'react';
+export type NumberControlProps = {
+    /**
+     * Matches common `@wordpress/components` control props without importing their internal types.
+     */
+    label?: ReactNode;
+    help?: ReactNode;
+    className?: string;
+    hideLabelFromVision?: boolean;
+    __nextHasNoMarginBottom?: boolean;
+    /**
+     * TextControl-style signature. (The experimental NumberControl can accept this too.)
+     */
+    onChange: (value: string) => void;
+    value: string | number;
+    __next40pxDefaultSize?: boolean;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'className' | 'type' | 'children'>;
 /**
  * This uses the experimental NumberControl from the block
  * editor where available, otherwise it falls back to a
  * standard TextControl, limited to numbers.
- * @type {import('react').ComponentType<any>}
+ * @type {ComponentType<NumberControlProps>}
  *
- * @param {any} props - the NumberControl component props
- * @return {import('react').ReactNode} - NumberControl component
+ * @param {NumberControlProps} props - the NumberControl component props
+ * @return {ReactNode} - NumberControl component
  */
-declare const NumberControl: import("react").ComponentType<any>;
+declare const NumberControl: ComponentType<NumberControlProps>;
+export default NumberControl;

package/build/components/number-control/index.js

@@ -5,10 +5,10 @@ TextControl, } from '@wordpress/components';
  * This uses the experimental NumberControl from the block
  * editor where available, otherwise it falls back to a
  * standard TextControl, limited to numbers.
- * @type {import('react').ComponentType<any>}
+ * @type {ComponentType<NumberControlProps>}
  *
- * @param {any} props - the NumberControl component props
- * @return {import('react').ReactNode} - NumberControl component
+ * @param {NumberControlProps} props - the NumberControl component props
+ * @return {ReactNode} - NumberControl component
  */
 const NumberControl = ExperimentalNumberControl ||
     function CustomNumberControl(props) {

package/build/components/number-slider/style.scss

@@ -0,0 +1,68 @@
+@use "@automattic/jetpack-base-styles/style";
+
+$thumb-height: 40px;
+$track-height: 8px;
+
+@mixin adjust-track-rail-styles {
+	height: $track-height;
+	border-radius: 8px; /* stylelint-disable-line scales/radii */
+}
+
+// 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);
+	}
+}
+
+// Base styles
+.jp-components-number-slider__control {
+	width: 100%;
+	height: $thumb-height;
+}
+
+.jp-components-number-slider__track {
+
+	@include adjust-track-rail-styles;
+	top: calc(($thumb-height / 2) - ($track-height / 2));
+	background: var(--jp-gray);
+
+	&.jp-components-number-slider__track-0 {
+		background: var(--jp-green-40);
+	}
+
+	&.jp-components-number-slider__track-1 {
+		background: var(--jp-gray);
+	}
+}
+
+.jp-components-number-slider__thumb {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 8px 16px;
+	height: $thumb-height;
+	background-color: var(--jp-white);
+	border: 1.5px solid var(--jp-green-50);
+	box-shadow: 0 6px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
+	border-radius: 4px;
+	color: var(--jp-black);
+	font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	font-style: normal;
+	font-weight: 600;
+	font-size: var(--font-body);
+	line-height: 24px;
+	letter-spacing: -0.02em;
+	white-space: nowrap;
+	cursor: pointer;
+
+	// On focus thumb styling
+	&.jp-components-number-slider__thumb--is-active {
+		outline: none;
+	}
+
+	&[aria-valuenow="0"] {
+		border-color: var(--jp-gray);
+	}
+}

package/build/components/popover/style.scss

@@ -0,0 +1,26 @@
+.jp-popover {
+	width: 600px;
+	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);
+	border: 1px solid rgba(220, 220, 222, 1);
+	border-radius: 4px;
+	text-align: center;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+
+	> * {
+		margin: 16px;
+		clear: both;
+	}
+
+	&__body p {
+		font-weight: 400;
+		// stylelint-disable-next-line declaration-property-unit-allowed-list -- this should be changed to a unitless value: https://developer.wordpress.org/coding-standards/wordpress-coding-standards/css/#values
+		line-height: 1.6em;
+		font-family: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+	}
+}

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

@@ -0,0 +1,113 @@
+@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);
+
+	@media screen and ( min-width: 600px ) {
+		padding: 32px 32px 44px;
+	}
+
+	&__icon {
+
+		img {
+			height: 32px;
+			width: 32px;
+		}
+	}
+
+	&__title {
+		margin: 16px 0 24px;
+		color: #101517;
+		font-size: 32px;
+		line-height: 38px;
+	}
+
+	&__pricing {
+		display: flex;
+		flex-wrap: wrap;
+	}
+
+	&__price-before,
+	&__price-after {
+		display: inline-block;
+		margin-bottom: 8px;
+		padding: 0 2px;
+		font-size: 54px;
+		font-weight: 700;
+		line-height: 40px;
+	}
+
+	&__price-before {
+		position: relative;
+		margin-right: 16px;
+		color: var(--jp-gray-20);
+	}
+
+	&__price-strikethrough {
+		position: absolute;
+		width: 100%;
+		height: 3px;
+		left: 0;
+		top: 20px;
+		background: var(--jp-pink);
+		border-radius: 1.5px;
+	}
+
+	&__price-after {
+		color: var(--jp-black);
+	}
+
+	&__currency {
+		vertical-align: super;
+		font-size: var(--font-title-small);
+		font-weight: 400;
+		line-height: 20px;
+	}
+
+	&__price-details {
+		align-self: flex-end;
+		margin-bottom: 8px;
+		font-size: 14px;
+		font-weight: 400;
+		line-height: 17px;
+		color: var(--jp-gray-50);
+		letter-spacing: -0.02em;
+	}
+
+	&__price-decimal {
+		font-size: var(--font-label);
+		line-height: 14px;
+		vertical-align: top;
+	}
+
+	&__button {
+		width: 100%;
+		height: auto;
+		font-size: 18px;
+		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;
+		align-items: center;
+	}
+
+	&__info,
+	&__tos {
+		font-size: var(--font-label);
+		line-height: 20px;
+		letter-spacing: -0.02em;
+		color: var(--jp-gray-60);
+	}
+
+	&__tos {
+		margin-top: 24px;
+	}
+}

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

@@ -0,0 +1,235 @@
+@use "@automattic/jetpack-base-styles/gutenberg-base-styles" as gb;
+
+.container {
+	--padding: calc(var(--spacing-base) * 4);
+	--padding-horizontal: calc(var(--spacing-base) * 3);
+	--padding-vertical: var(--spacing-base);
+	--item-border-color: #f0f0f0;
+	color: var(--jp-black);
+}
+
+.table {
+	--gap: calc(var(--spacing-base) * 3);
+	position: relative;
+	padding: var(--padding) 0;
+
+	.is-viewport-large & {
+		display: grid;
+		grid-template-columns: repeat(var(--columns), 1fr);
+		grid-auto-flow: column;
+		grid-template-rows: repeat(var(--rows), minmax(min-content, max-content));
+		column-gap: var(--gap);
+	}
+
+	.tableTitle {
+		font-size: 32px;
+		font-weight: 500;
+		line-height: 40px;
+		word-wrap: break-word;
+	}
+}
+
+.header-logo {
+
+	.is-viewport-large & {
+		margin-top: 32px;
+	}
+
+	margin-bottom: 24px;
+}
+
+.card {
+	margin-top: var(--padding);
+
+	.is-viewport-large & {
+		display: contents;
+	}
+
+	// Border styles for all columns (default gray borders)
+	> :first-child {
+		border-style: solid;
+		border-color: var(--item-border-color);
+		border-width: 1.5px 1.5px 0;
+		border-start-start-radius: 8px;
+		border-start-end-radius: 8px;
+	}
+
+	> :last-child {
+		border-style: solid;
+		border-color: var(--item-border-color);
+		border-width: 0 1.5px 1.5px;
+		border-end-start-radius: 8px;
+		border-end-end-radius: 8px;
+	}
+
+	> :not(:first-child):not(:last-child) {
+		border-inline: 1.5px solid var(--item-border-color);
+	}
+
+	> * {
+		background: var(--jp-white);
+	}
+
+	&.is-primary {
+
+		> * {
+			position: relative;
+
+			&::after {
+				content: "";
+				position: absolute;
+				top: 0;
+				left: 0;
+				right: 0;
+				bottom: 0;
+				z-index: -1;
+				box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
+			}
+		}
+
+		// Primary column with green border and gradient background
+		> :first-child {
+			border-style: solid;
+			border-color: #008710;
+			border-width: 1.5px 1.5px 0;
+			border-start-start-radius: 8px;
+			border-start-end-radius: 8px;
+
+			background-image: url(./gradient.svg);
+			background-repeat: no-repeat;
+			background-size: 450px;
+			background-position-x: center;
+
+			@media (max-width: gb.$break-large) {
+				background-position-x: right;
+			}
+		}
+
+		> :last-child {
+			border-style: solid;
+			border-color: #008710;
+			border-width: 0 1.5px 1.5px;
+			border-end-start-radius: 8px;
+			border-end-end-radius: 8px;
+		}
+
+		> :not(:first-child):not(:last-child) {
+			border-inline: 1.5px solid #008710;
+		}
+	}
+}
+
+.headerContainer {
+	padding: var(--padding);
+	display: flex;
+	flex-direction: column;
+}
+
+.header {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	flex-basis: 100%;
+}
+
+.title {
+	margin-bottom: 24px;
+}
+
+.item {
+	display: flex;
+	align-items: center;
+	padding-bottom: var(--padding-vertical);
+	position: relative;
+	line-height: 20px;
+
+	&:not(:nth-child(2)):not(.empty) {
+		padding-top: var(--padding-vertical);
+
+		&::before {
+			content: "";
+			position: absolute;
+			top: 0;
+			inset-inline-start: var(--padding-horizontal);
+			inset-inline-end: var(--padding-horizontal);
+			height: 1px;
+
+			z-index: 5;
+			background-color: var(--jp-gray);
+		}
+
+		&.feature {
+
+			&::before {
+				inset-inline-start: 0;
+				inset-inline-end: calc(var(--padding) - var(--gap));
+
+			}
+		}
+	}
+
+	&:last-of-type {
+		padding-bottom: var(--padding-vertical);
+	}
+}
+
+.last-feature {
+	padding-bottom: var(--padding);
+}
+
+.value {
+	padding-left: var(--padding-horizontal);
+	padding-right: var(--padding-horizontal);
+}
+
+.icon {
+	margin: 0 var(--spacing-base);
+	fill: var(--jp-gray);
+	flex-shrink: 0;
+
+	&.icon-check {
+		fill: var(--jp-green-40);
+	}
+
+	&.icon-cross {
+		fill: var(--jp-red-50);
+	}
+}
+
+.popover {
+	margin-left: auto;
+
+	.is-viewport-large & {
+		top: 1px;
+		margin: 0 var(--spacing-base);
+	}
+}
+
+.item .popover-icon {
+	fill: var(--jp-gray-20);
+	flex-shrink: 0;
+}
+
+.tos {
+	text-align: center;
+	width: fit-content;
+
+	> a {
+		color: #000;
+	}
+
+	.is-viewport-large & {
+		padding-left: var(--padding);
+		padding-right: var(--padding);
+		grid-column: 2;
+		white-space: nowrap;
+		overflow: hidden;
+	}
+}
+
+.tos-container {
+	display: flex;
+	align-items: right;
+	justify-content: right;
+	margin: 0 calc(var(--spacing-base) * 4);
+}

package/build/components/product-offer/style.module.scss

@@ -0,0 +1,93 @@
+.wrapper {
+	padding: calc(var(--spacing-base) * 8);
+	position: relative;
+}
+
+.is-card {
+	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);
+
+	.card-header {
+		border-radius: var(--jp-border-radius) var(--jp-border-radius) 0 0;
+	}
+}
+
+.card-header {
+	display: flex;
+	align-items: center;
+	background: var(--jp-black);
+	color: var(--jp-white);
+	padding: calc(var(--spacing-base) / 2) var(--spacing-base);
+	line-height: calc(var(--spacing-base) * 3);
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	box-sizing: border-box;
+}
+
+.card-container {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.product-bundle-icon {
+	fill: var(--jp-white);
+	margin-right: var(--spacing-base);
+}
+
+.product-bundle-icons,
+.product-icon {
+	display: flex;
+	align-items: center;
+	margin-bottom: calc(var(--spacing-base) * 4);
+}
+
+.plus-icon {
+	fill: rgb(140, 143, 148);
+	height: 24px;
+	line-height: 24px;
+}
+
+.features {
+	margin: 0;
+	padding: 0;
+	flex-grow: 1;
+	margin-bottom: calc(var(--spacing-base) * 2);
+
+	li {
+		list-style: none;
+		display: flex;
+		align-items: flex-start;
+		margin-bottom: var(--spacing-base);
+	}
+
+	.check {
+		fill: var(--jp-green-primary);
+		margin-right: var(--spacing-base);
+		flex-shrink: 0;
+	}
+}
+
+.product-has-required-plan {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	svg {
+		margin-right: var(--spacing-base);
+	}
+}
+
+.add-button {
+	width: 100%;
+	justify-content: center;
+
+	&:global(.is-primary):disabled {
+		opacity: 1;
+		background-color: var(--jp-black);
+	}
+}

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

@@ -0,0 +1,122 @@
+.container {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	justify-content: flex-end;
+}
+
+.price-container {
+	display: flex;
+	align-items: flex-start;
+	flex-grow: 2;
+	flex-basis: 0;
+
+	.promo-label {
+		margin-left: auto;
+	}
+}
+
+.price {
+	display: inline-flex;
+	align-items: flex-start;
+	position: relative;
+	flex: 0 0 auto;
+
+	&:first-child {
+		margin-right: calc(var(--spacing-base) * 2);
+	}
+
+	&.is-not-off-price {
+		color: var(--jp-gray-20);
+
+		&::after {
+			content: " ";
+			display: block;
+			width: 100%;
+			height: 3px;
+			background: var(--jp-red);
+			border-radius: var(--jp-border-radius);
+			position: absolute;
+			top: 50%;
+			margin-top: -2px;
+			pointer-events: none;
+		}
+	}
+}
+
+.footer {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: flex-start;
+	justify-content: flex-start;
+	margin-bottom: calc(var(--spacing-base) * 3);
+}
+
+.legend {
+	color: var(--jp-gray-40);
+	font-size: var(--font-body-small);
+	line-height: 20px;
+
+	&::after {
+		content: "\200B"; // Pseudo element to keep height
+	}
+}
+
+.promo-label {
+	background-color: var(--jp-yellow-10);
+	border-radius: 4px;
+	padding-left: var(--spacing-base);
+	padding-right: var(--spacing-base);
+	font-weight: 600;
+	font-size: 13px;
+	margin-left: var(--spacing-base);
+}
+
+.symbol {
+	font-weight: 400;
+}
+
+.simple {
+	display: grid;
+	grid-gap: 8px;
+	margin-bottom: 24px;
+
+	.currentPrice {
+		display: flex;
+
+		> p {
+			font-weight: 500;
+			font-size: 32px;
+			line-height: 32px;
+			margin-right: 8px;
+		}
+
+		> div {
+			line-height: 16px;
+			margin: auto 0 0;
+			color: var(--jp-gray-50);
+		}
+	}
+
+	.originalPrice {
+		display: flex;
+
+		> p {
+			font-weight: 400;
+			margin-right: 8px;
+			color: var(--jp-gray-40);
+			font-size: 21px;
+			line-height: 35px;
+
+			&::after {
+				background: var(--jp-gray-40);
+			}
+		}
+
+		> div {
+			line-height: 16px;
+			margin: auto 0 0;
+			color: var(--jp-gray-50);
+		}
+	}
+}

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

@@ -0,0 +1,18 @@
+.wrapper {
+	width: 100%;
+	height: 12px;
+	background-color: var(--jp-gray-5);
+	border-radius: calc(var(--spacing-base) * 3);
+	overflow: hidden;
+
+	&.small {
+		height: 3px;
+	}
+
+	.progress {
+		height: 100%;
+		border-radius: calc(var(--spacing-base) * 3);
+		background-color: var(--jp-black);
+		min-width: 12px;
+	}
+}