@automattic/plans-grid-next 1.0.0

package/src/components/features-grid/client-logo-list/index.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import CLIENT_LIST from './client-list';
+import './style.scss';
+
+const ClientLogoList = ( props: React.HTMLAttributes< HTMLDivElement > ) => {
+	const { className, ...otherProps } = props;
+
+	const elementProps: React.HTMLAttributes< HTMLDivElement > = {
+		className: clsx( 'plans-grid-next-client-logo-list', className ),
+		...otherProps,
+	};
+
+	return (
+		<div { ...elementProps }>
+			{ CLIENT_LIST.map( ( { slug, name, Logo } ) => (
+				<div key={ slug } className={ `plans-grid-next-client-logo-list__item is-name-${ slug }` }>
+					<Logo title={ name } />
+				</div>
+			) ) }
+		</div>
+	);
+};
+
+export default ClientLogoList;

package/src/components/features-grid/client-logo-list/style.scss

@@ -0,0 +1,52 @@
+/*
+ * Logo list styles
+ */
+
+.plans-grid-next-client-logo-list {
+	display: flex;
+	flex-wrap: wrap;
+	column-gap: 18px;
+	row-gap: 9px;
+
+	svg {
+		display: block;
+		width: auto;
+		height: 24px;
+		fill: var(--studio-gray-50);
+	}
+}
+
+/*
+ * Individual logo adjustments
+ */
+
+.plans-grid-next-client-logo-list__item {
+	--adjustment-unit: calc(24px / 60);
+
+	&.is-name-al-jazeera {
+		transform: translate3d(0, calc(var(--adjustment-unit) * -6), 0);
+	}
+
+	&.is-name-chevron {
+		padding: 0 calc(var(--adjustment-unit) * 8);
+		transform: translate3d(0, var(--adjustment-unit), 0);
+	}
+
+	&.is-name-intuit {
+		/*!rtl:ignore*/
+		transform: translate3d(var(--adjustment-unit), 0, 0);
+	}
+
+	&.is-name-salesforce {
+		padding: 0 calc(var(--adjustment-unit) * 4);
+		transform: translate3d(0, var(--adjustment-unit), 0);
+	}
+
+	&.is-name-techcrunch {
+		padding: 0 calc(var(--adjustment-unit) * 8);
+	}
+
+	&.is-name-time {
+		padding: 0 calc(var(--adjustment-unit) * 3);
+	}
+}

package/src/components/features-grid/enterprise-features.tsx

@@ -0,0 +1,101 @@
+import { getPlanClass, isWpcomEnterpriseGridPlan } from '@automattic/calypso-products';
+import { FoldableCard } from '@automattic/components';
+import clsx from 'clsx';
+import { useTranslate } from 'i18n-calypso';
+import { usePlansGridContext } from '../../grid-context';
+import { GridPlan } from '../../types';
+import { PlanFeaturesItem } from '../item';
+import PlanDivOrTdContainer from '../plan-div-td-container';
+import ClientLogoList from './client-logo-list';
+
+type EnterpriseFeaturesProps = {
+	renderedGridPlans: GridPlan[];
+	options?: {
+		isTableCell?: boolean;
+		isLogosOnly?: boolean;
+	};
+};
+
+const EnterpriseFeatures = ( { renderedGridPlans, options }: EnterpriseFeaturesProps ) => {
+	const { featureGroupMap, enableCategorisedFeatures, enterpriseFeaturesList } =
+		usePlansGridContext();
+	const translate = useTranslate();
+	const isTableCell = options?.isTableCell;
+
+	const CardContainer = ( props: React.ComponentProps< typeof FoldableCard > ) => {
+		const { children, className, ...otherProps } = props;
+
+		return isTableCell ? (
+			<div className={ className } { ...otherProps }>
+				{ children }
+			</div>
+		) : (
+			<FoldableCard
+				className={ clsx(
+					'plans-grid-next-features-grid__mobile-plan-card-foldable-container',
+					className
+				) }
+				header={ translate( 'Show all features' ) }
+				{ ...otherProps }
+				compact
+				clickableHeader
+			>
+				{ children }
+			</FoldableCard>
+		);
+	};
+
+	return renderedGridPlans.map( ( { planSlug, features: { wpcomFeatures, jetpackFeatures } } ) => {
+		const planClassName = getPlanClass( planSlug );
+		const shouldRenderLogos = isWpcomEnterpriseGridPlan( planSlug );
+		const shouldCoverFullColumn =
+			( wpcomFeatures.length === 0 && jetpackFeatures.length === 0 ) || enableCategorisedFeatures;
+		const rowspanProp =
+			isTableCell && shouldRenderLogos
+				? {
+						...( shouldCoverFullColumn && {
+							/**
+							 * The rowSpan should be:
+							 * - the number of feature groups + 2 (1 this row + 1 row of storage) in case of feature categories,
+							 * - otherwise: 4 (1 this row + 1 row of features + 1 row of storage + 1 row for the "everything in ... plus" part)
+							 */
+							rowSpan: enableCategorisedFeatures ? Object.values( featureGroupMap ).length + 2 : 4,
+						} ),
+				  }
+				: {};
+
+		return (
+			<PlanDivOrTdContainer
+				key={ planSlug }
+				isTableCell={ options?.isTableCell }
+				className="plan-features-2023-grid__table-item"
+				{ ...rowspanProp }
+			>
+				{ shouldRenderLogos && (
+					<>
+						<div className="plan-features-2023-grid__item">
+							<ClientLogoList className="plan-features-2023-grid__item-logos" />
+						</div>
+
+						{ ! options?.isLogosOnly && (
+							<CardContainer>
+								<div className={ clsx( 'plan-features-2023-grid__common-title', planClassName ) }>
+									{ translate( 'High performance platform, with:' ) }
+								</div>
+								{ enterpriseFeaturesList?.map( ( title, index ) => (
+									<PlanFeaturesItem key={ index }>
+										<span className="plan-features-2023-grid__item-info is-available">
+											<span className="plan-features-2023-grid__item-title">{ title }</span>
+										</span>
+									</PlanFeaturesItem>
+								) ) }
+							</CardContainer>
+						) }
+					</>
+				) }
+			</PlanDivOrTdContainer>
+		);
+	} );
+};
+
+export default EnterpriseFeatures;

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

@@ -0,0 +1,143 @@
+import {
+	getFeaturesList,
+	getPlanFeaturesGroupedForFeaturesGrid,
+	getPlanFeaturesGroupedForComparisonGrid,
+} from '@automattic/calypso-products';
+import {
+	FeaturesGrid,
+	FeaturesGridExternalProps,
+	useGridPlanForSpotlight,
+	useGridPlansForFeaturesGrid,
+} from '../..';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const ComponentWrapper = ( props: Omit< FeaturesGridExternalProps, 'gridPlans' > ) => {
+	const gridPlans = useGridPlansForFeaturesGrid( {
+		eligibleForFreeHostingTrial: true,
+		hasRedeemedDomainCredit: undefined,
+		hiddenPlans: undefined,
+		isDisplayingPlansNeededForFeature: false,
+		isSubdomainNotGenerated: false,
+		selectedFeature: undefined,
+		selectedPlan: undefined,
+		reflectStorageSelectionInPlanPrices: false,
+		term: 'TERM_ANNUALLY',
+		useFreeTrialPlanSlugs: undefined,
+
+		// Mirror values from props
+		siteId: props.siteId,
+		intent: props.intent,
+		coupon: props.coupon,
+		allFeaturesList: props.allFeaturesList,
+		isInSignup: props.isInSignup,
+		showLegacyStorageFeature: props.showLegacyStorageFeature,
+		useCheckPlanAvailabilityForPurchase: props.useCheckPlanAvailabilityForPurchase,
+	} );
+
+	const gridPlanForSpotlight = useGridPlanForSpotlight( {
+		gridPlans,
+		siteId: props.siteId,
+		intent: props.intent,
+		isSpotlightOnCurrentPlan: true,
+	} );
+
+	const featureGroupMap = getPlanFeaturesGroupedForFeaturesGrid();
+
+	return (
+		gridPlans && (
+			<FeaturesGrid
+				{ ...props }
+				gridPlans={ gridPlans }
+				gridPlanForSpotlight={
+					'gridPlanForSpotlight' in props ? props.gridPlanForSpotlight : gridPlanForSpotlight
+				}
+				featureGroupMap={ featureGroupMap }
+			/>
+		)
+	);
+};
+
+const defaultProps = {
+	allFeaturesList: getFeaturesList(),
+	coupon: undefined,
+	currentSitePlanSlug: undefined,
+	generatedWPComSubdomain: {
+		isLoading: false,
+		result: { domain_name: 'zzz.wordpress.com' },
+	},
+	hideUnavailableFeatures: false,
+	isCustomDomainAllowedOnFreePlan: false,
+	isInAdmin: false,
+	isInSignup: true,
+	onStorageAddOnClick: () => {},
+	planActionOverrides: undefined,
+	recordTracksEvent: () => {},
+	showLegacyStorageFeature: false,
+	showRefundPeriod: false,
+	showUpgradeableStorage: true,
+	siteId: undefined,
+	stickyRowOffset: 0,
+	useCheckPlanAvailabilityForPurchase: () => ( {} ),
+	useAction: () => ( {
+		primary: {
+			text: 'test',
+			callback: () => {},
+			status: 'enabled' as const,
+		},
+		postButtonText: '',
+	} ),
+	enableCategorisedFeatures: true,
+	enableStorageAsBadge: false,
+	enableReducedFeatureGroupSpacing: true,
+	enableLogosOnlyForEnterprisePlan: true,
+	hideFeatureGroupTitles: true,
+};
+
+const meta = {
+	title: 'FeaturesGrid',
+	component: ComponentWrapper,
+} satisfies Meta< typeof ComponentWrapper >;
+
+export default meta;
+
+type Story = StoryObj< typeof meta >;
+
+export const PlansInAdmin = {
+	name: 'Default in admin',
+	args: {
+		...defaultProps,
+		intent: 'plans-default-wpcom',
+		siteId: 222597060,
+		isInAdmin: true,
+		isInSignup: false,
+	},
+} satisfies Story;
+
+export const PlansInSignup = {
+	name: 'Default in signup',
+	args: {
+		...defaultProps,
+		intent: 'plans-default-wpcom',
+		isInSignup: true,
+	},
+} satisfies Story;
+
+export const CategorizedFeatures = {
+	name: 'Categorized features grid',
+	args: {
+		...PlansInSignup.args,
+		gridPlanForSpotlight: undefined,
+
+		// to better show the effect of the categories, here we use the one from the comparison grid instead
+		featureGroupMap: getPlanFeaturesGroupedForComparisonGrid(),
+		enableCategorisedFeatures: true,
+	},
+} satisfies Story;
+
+export const CuratedPlanMixByIntent = {
+	name: 'Curated plan mix configured by intent',
+	args: {
+		...defaultProps,
+		intent: 'plans-newsletter',
+	},
+} satisfies Story;