@automattic/plans-grid-next 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,4 @@
+
+## 1.0.0-alpha.0
+
+- migrated from Calypso

package/README.md

@@ -0,0 +1,3 @@
+# Plans Grid, Next
+
+WordPress.com plans UI grid components and helpers.

package/dist/cjs/__mocks__/wpcom-proxy-request.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.requestAllBlogsAccess = exports.reloadProxy = exports.canAccessWpcomApis = void 0;
+exports.default = async ({ path }) => {
+    const response = await fetch(path);
+    const data = await response.json();
+    return data.body;
+};
+function canAccessWpcomApis() {
+    return true;
+}
+exports.canAccessWpcomApis = canAccessWpcomApis;
+function reloadProxy() { }
+exports.reloadProxy = reloadProxy;
+function requestAllBlogsAccess() { }
+exports.requestAllBlogsAccess = requestAllBlogsAccess;
+//# sourceMappingURL=wpcom-proxy-request.js.map

package/dist/cjs/__mocks__/wpcom-proxy-request.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"wpcom-proxy-request.js","sourceRoot":"","sources":["../../../src/__mocks__/wpcom-proxy-request.js"],"names":[],"mappings":";;;AAAA,kBAAe,KAAK,EAAG,EAAE,IAAI,EAAE,EAAG,EAAE;IACnC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAE,IAAI,CAAE,CAAC;IACrC,MAAM,IAAI,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;IACnC,OAAO,IAAI,CAAC,IAAI,CAAC;AAClB,CAAC,CAAC;AAEF,SAAgB,kBAAkB;IACjC,OAAO,IAAI,CAAC;AACb,CAAC;AAFD,gDAEC;AAED,SAAgB,WAAW,KAAI,CAAC;AAAhC,kCAAgC;AAEhC,SAAgB,qBAAqB,KAAI,CAAC;AAA1C,sDAA0C"}

package/dist/cjs/_media-queries.scss

@@ -0,0 +1,14 @@
+$plans-2023-small-breakpoint: 780px;
+
+/**
+ * @see @automattic/plans-grid-next/src/components/plan-type-selector/style.scss
+ * This introduces mobile only sticky behavior for the plan type selector.
+ *
+ * @deprecated
+ * TODO clk This should migrate to use grid-size on the parent container. As done for features/comparison grid.
+ */
+@mixin plan-type-selector-custom-mobile-breakpoint() {
+	@media (max-width: $plans-2023-small-breakpoint) {
+		@content;
+	}
+}

package/dist/cjs/_mixins.scss

@@ -0,0 +1,15 @@
+@mixin plans-grid-large() {
+	.plans-grid-next.is-large &,
+	.plans-grid-next.is-xlarge &, {
+		@content;
+	}
+}
+
+@mixin plans-grid-medium-large() {
+	.plans-grid-next.is-smedium &,
+	.plans-grid-next.is-medium &,
+	.plans-grid-next.is-large &,
+	.plans-grid-next.is-xlarge & {
+		@content;
+	}
+}

package/dist/cjs/_shared.scss

@@ -0,0 +1,174 @@
+@import "@automattic/onboarding/styles/mixins";
+@import "./mixins";
+@import "./media-queries";
+
+$table-cell-max-width: 344px;
+$mobile-card-max-width: 440px;
+
+/*********************************
+ * Storage Add-On Dropdown parts *
+ *********************************/
+
+.plans-grid-next-storage-feature-label__container {
+	display: flex;
+	gap: 5px;
+	flex-direction: column;
+	align-items: baseline;
+
+	&.is-row {
+		flex-direction: row;
+	}
+
+	/**
+	 * Comparison grid override
+	 * Always render as column/wrapped
+	 */
+	.plans-grid-next-comparison-grid & {
+		flex-direction: column;
+		align-items: center;
+	}
+}
+
+.plans-grid-next-storage-feature-label__offset-price {
+	color: var(--studio-green-50);
+	font-size: $font-body-extra-small;
+	font-weight: 500;
+}
+
+.plans-grid-next-storage-dropdown__addon-offset-price-container {
+	width: 100%;
+	margin-top: 8px;
+	text-align: left;
+
+	.plans-grid-next-storage-dropdown__addon-offset-price {
+		font-size: $font-body-extra-small;
+		font-weight: 500;
+	}
+}
+
+.plans-grid-next-storage-dropdown__option {
+	display: inline-block;
+	line-height: 20px;
+	min-height: 30px;
+	padding-top: 5px;
+	font-size: 0.75rem;
+	text-align: start;
+}
+
+.plans-grid-next-storage-dropdown__option-title, .plans-grid-next-storage-dropdown__option .title {
+	color: var(--color-text);
+	font-weight: 600;
+
+	.plans-grid-next-features-grid__mobile-plan-card & {
+		font-size: 0.875rem;
+	}
+}
+
+.plans-grid-next-storage-dropdown__option-price,
+.plans-grid-next-storage-dropdown__option-per-month {
+	display: inline-block;
+
+	font-size: 0.75rem;
+	font-weight: 500;
+}
+
+.plans-grid-next-storage-dropdown__option-price {
+	margin-left: 4px;
+}
+
+.plans-grid-next-storage-feature-label__volume {
+	color: var(--studio-gray-90);
+	padding: 4px 0;
+	font-weight: 400;
+	line-height: 20px;
+	font-size: $font-body-extra-small;
+
+	&.is-badge {
+		background: #f2f2f2;
+		/* stylelint-disable-next-line */
+		border-radius: 5px;
+		text-align: center;
+		width: fit-content;
+		min-width: 64px;
+
+		.plans-grid-next-comparison-grid & {
+			margin-top: 10px;
+			margin-left: auto;
+			margin-right: auto;
+
+			@include plans-grid-medium-large {
+				margin-top: 0;
+			}
+		}
+	}
+}
+
+.plans-grid-next-plan-storage {
+	width: 100%;
+
+	.plan-features-2023-grid__plan-spotlight & {
+		padding-top: 0;
+		padding-bottom: 32px;
+		max-width: $table-cell-max-width;
+	}
+
+	.plans-grid-next-comparison-grid & {
+		width: 100%;
+	}
+
+	/***********************************
+	 * Custom Select Control overrides *
+	 ***********************************/
+
+	.components-custom-select-control {
+		line-height: 0px;
+		font-size: 0.75rem;
+
+		/**************
+	     * 1. General *
+		 **************/
+
+		.components-custom-select-control__label {
+			color: var(--studio-gray-100);
+		}
+
+		.components-custom-select-control__menu {
+			margin-left: 0;
+			box-sizing: border-box;
+		}
+
+		.components-custom-select-control__item {
+			&.is-highlighted {
+				background-color: var(--studio-gray-0);
+			}
+		}
+
+		/*****************************
+		 * 2. Features Grid - mobile *
+		 *****************************/
+
+		.plans-grid-next-features-grid__mobile-plan-card & {
+			.components-custom-select-control__button {
+				height: 40px;
+			}
+		}
+
+		/**********************
+		 * 3. Comparison Grid *
+		 **********************/
+
+		.plans-grid-next-comparison-grid & {
+			width: 100%;
+			label {
+				display: none;
+			}
+
+			.components-custom-select-control__menu {
+				margin-left: 0;
+				li {
+					text-align: left;
+				}
+			}
+		}
+	}
+}