@automattic/plans-grid-next 1.0.0

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@automattic/plans-grid-next",
+  "version": "1.0.0",
+  "description": "WordPress.com plans UI grid components and helpers.",
+  "homepage": "https://github.com/Automattic/wp-calypso",
+  "license": "GPL-2.0-or-later",
+  "author": "Automattic Inc.",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "calypso:src": "src/index.tsx",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Automattic/wp-calypso.git",
+    "directory": "packages/plans-grid-next"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": "https://github.com/Automattic/wp-calypso/issues",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "types": "dist/types",
+  "scripts": {
+    "clean": "tsc --build ./tsconfig.json ./tsconfig-cjs.json --clean && rm -rf dist",
+    "build": "tsc --build ./tsconfig.json ./tsconfig-cjs.json && copy-assets",
+    "prepare": "yarn run build",
+    "prepack": "yarn run clean && yarn run build",
+    "watch": "tsc --build ./tsconfig.json --watch",
+    "storybook": "yarn msw init && sb dev"
+  },
+  "dependencies": {
+    "@automattic/calypso-products": "^1.2.1",
+    "@automattic/components": "^2.2.0",
+    "@automattic/data-stores": "^3.1.0",
+    "@automattic/onboarding": "^1.0.0",
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@wordpress/data": "^10.16.0",
+    "@wordpress/element": "^6.16.0",
+    "@wordpress/icons": "^10.16.0",
+    "@wordpress/primitives": "^4.16.0",
+    "@wordpress/url": "^4.16.0",
+    "@wordpress/warning": "^3.16.0",
+    "clsx": "^2.1.1",
+    "i18n-calypso": "^7.4.0",
+    "react-intersection-observer": "^9.4.3",
+    "react-transition-group": "^4.3.0"
+  },
+  "peerDependencies": {
+    "@wordpress/i18n": "^5.16.0",
+    "postcss": "^8.5.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@automattic/calypso-build": "^10.0.0",
+    "@automattic/calypso-color-schemes": "^3.1.3",
+    "@automattic/calypso-storybook": "^1.0.0",
+    "@automattic/calypso-typescript-config": "^1.0.0",
+    "@automattic/shopping-cart": "^2.0.1",
+    "@storybook/addon-actions": "^7.6.20",
+    "@storybook/cli": "^7.6.20",
+    "@storybook/react": "^7.6.20",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.0",
+    "msw": "^2.2.14",
+    "msw-storybook-addon": "^2.0.2",
+    "resize-observer-polyfill": "^1.5.1",
+    "typescript": "^5.3.3",
+    "webpack": "^5.97.1"
+  },
+  "msw": {
+    "workerDirectory": "static"
+  }
+}

package/src/__mocks__/wpcom-proxy-request.js

@@ -0,0 +1,13 @@
+export default async ( { path } ) => {
+	const response = await fetch( path );
+	const data = await response.json();
+	return data.body;
+};
+
+export function canAccessWpcomApis() {
+	return true;
+}
+
+export function reloadProxy() {}
+
+export function requestAllBlogsAccess() {}

package/src/_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/src/_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/src/_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;
+				}
+			}
+		}
+	}
+}

package/src/components/comparison-grid/README.md

@@ -0,0 +1,3 @@
+# Comparison Grid
+
+prop definitions, limitations/restrictions, etc.

package/src/components/comparison-grid/index.stories.tsx

@@ -0,0 +1,91 @@
+import {
+	getFeaturesList,
+	getPlanFeaturesGroupedForComparisonGrid,
+} from '@automattic/calypso-products';
+import { ComparisonGrid, ComparisonGridExternalProps, useGridPlansForComparisonGrid } from '../..';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const ComponentWrapper = ( props: Omit< ComparisonGridExternalProps, 'gridPlans' > ) => {
+	const gridPlans = useGridPlansForComparisonGrid( {
+		eligibleForFreeHostingTrial: true,
+		hasRedeemedDomainCredit: undefined,
+		hiddenPlans: undefined,
+		isDisplayingPlansNeededForFeature: false,
+		isInSignup: false,
+		isSubdomainNotGenerated: false,
+		selectedFeature: undefined,
+		selectedPlan: undefined,
+		showLegacyStorageFeature: false,
+		reflectStorageSelectionInPlanPrices: false,
+		term: 'TERM_ANNUALLY',
+		useFreeTrialPlanSlugs: undefined,
+
+		// Mirror values from props
+		siteId: props.siteId,
+		intent: props.intent,
+		coupon: props.coupon,
+		allFeaturesList: props.allFeaturesList,
+		useCheckPlanAvailabilityForPurchase: props.useCheckPlanAvailabilityForPurchase,
+	} );
+
+	return (
+		gridPlans && (
+			<ComparisonGrid
+				{ ...props }
+				gridPlans={ gridPlans }
+				featureGroupMap={ getPlanFeaturesGroupedForComparisonGrid() }
+			/>
+		)
+	);
+};
+
+const defaultProps = {
+	allFeaturesList: getFeaturesList(),
+	coupon: undefined,
+	currentSitePlanSlug: undefined,
+	featureGroupMap: getPlanFeaturesGroupedForComparisonGrid(),
+	hideUnavailableFeatures: false,
+	intervalType: 'yearly',
+	isInAdmin: false,
+	isInSignup: true,
+	onStorageAddOnClick: () => {},
+	planActionOverrides: undefined,
+	recordTracksEvent: () => {},
+	showRefundPeriod: false,
+	showUpgradeableStorage: true,
+	siteId: undefined,
+	stickyRowOffset: 0,
+	useCheckPlanAvailabilityForPurchase: () => ( {} ),
+	useAction: () => ( {
+		primary: {
+			text: 'test',
+			callback: () => {},
+			status: 'enabled' as const,
+		},
+		postButtonText: '',
+	} ),
+};
+
+const meta = {
+	title: 'ComparisonGrid',
+	component: ComponentWrapper,
+} satisfies Meta< typeof ComponentWrapper >;
+
+export default meta;
+
+type Story = StoryObj< typeof meta >;
+
+export const DefaultComparisonGrid = {
+	name: 'Default',
+	args: {
+		...defaultProps,
+	},
+} satisfies Story;
+
+export const HideUnsupportedFeatures = {
+	name: 'Hide unsupported features',
+	args: {
+		...defaultProps,
+		hideUnsupportedFeatures: true,
+	},
+} satisfies Story;