@automattic/plans-grid-next 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/__mocks__/wpcom-proxy-request.js +3 -4
- package/dist/cjs/__mocks__/wpcom-proxy-request.js.map +1 -1
- package/dist/cjs/_shared.scss +9 -4
- package/dist/cjs/components/comparison-grid/index.js +62 -50
- package/dist/cjs/components/comparison-grid/index.js.map +1 -1
- package/dist/cjs/components/comparison-grid/index.stories.js +1 -0
- package/dist/cjs/components/comparison-grid/index.stories.js.map +1 -1
- package/dist/cjs/components/comparison-grid/style.scss +0 -17
- package/dist/cjs/components/dropdown-option.js +1 -1
- package/dist/cjs/components/features-grid/index.js +21 -6
- package/dist/cjs/components/features-grid/index.js.map +1 -1
- package/dist/cjs/components/features-grid/index.stories.js +1 -0
- package/dist/cjs/components/features-grid/index.stories.js.map +1 -1
- package/dist/cjs/components/features-grid/style.scss +6 -21
- package/dist/cjs/components/item.js +1 -2
- package/dist/cjs/components/item.js.map +1 -1
- package/dist/cjs/components/plan-button/style.scss +12 -11
- package/dist/cjs/components/plan-type-selector/hooks/use-interval-options.js +1 -1
- package/dist/cjs/components/plan-type-selector/hooks/use-interval-options.js.map +1 -1
- package/dist/cjs/components/plan-type-selector/hooks/use-max-discount.js +1 -1
- package/dist/cjs/components/plan-type-selector/hooks/use-max-discount.js.map +1 -1
- package/dist/cjs/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.js +1 -1
- package/dist/cjs/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.js.map +1 -1
- package/dist/cjs/components/plan-type-selector/style.scss +3 -1
- package/dist/cjs/components/shared/billing-timeframe/index.js +13 -5
- package/dist/cjs/components/shared/billing-timeframe/index.js.map +1 -1
- package/dist/cjs/components/shared/header-price/style.scss +4 -2
- package/dist/cjs/components/shared/storage/hooks/use-default-storage-option.js +1 -1
- package/dist/cjs/components/shared/storage/hooks/use-default-storage-option.js.map +1 -1
- package/dist/cjs/components/shared/storage/hooks/use-purchased-storage-add-on.js +1 -1
- package/dist/cjs/components/shared/storage/hooks/use-purchased-storage-add-on.js.map +1 -1
- package/dist/cjs/components/shared/storage/index.js +3 -2
- package/dist/cjs/components/shared/storage/index.js.map +1 -1
- package/dist/cjs/components/sticky-container.js +66 -6
- package/dist/cjs/components/sticky-container.js.map +1 -1
- package/dist/cjs/hooks/data-store/is-popular-plan.js +1 -2
- package/dist/cjs/hooks/data-store/is-popular-plan.js.map +1 -1
- package/dist/cjs/hooks/data-store/use-grid-plans-for-features-grid.js +14 -11
- package/dist/cjs/hooks/data-store/use-grid-plans-for-features-grid.js.map +1 -1
- package/dist/cjs/hooks/data-store/use-plan-billing-description.js +2 -2
- package/dist/cjs/hooks/data-store/use-plan-billing-description.js.map +1 -1
- package/dist/cjs/hooks/data-store/use-plan-billing-period.js +14 -0
- package/dist/cjs/hooks/data-store/use-plan-billing-period.js.map +1 -0
- package/dist/cjs/hooks/use-grid-size.js +2 -4
- package/dist/cjs/hooks/use-grid-size.js.map +1 -1
- package/dist/cjs/hooks/use-is-large-currency.js +1 -1
- package/dist/cjs/hooks/use-is-large-currency.js.map +1 -1
- package/dist/cjs/hooks/use-manage-tooltip-toggle.js +1 -2
- package/dist/cjs/hooks/use-manage-tooltip-toggle.js.map +1 -1
- package/dist/cjs/hooks/use-plan-pricing-info-from-grid-plans.js +1 -2
- package/dist/cjs/hooks/use-plan-pricing-info-from-grid-plans.js.map +1 -1
- package/dist/cjs/index.js +3 -1
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/lib/get-plan-pricing-info-from-grid-plans.js +1 -2
- package/dist/cjs/lib/get-plan-pricing-info-from-grid-plans.js.map +1 -1
- package/dist/cjs/lib/is-same-plan.js +1 -2
- package/dist/cjs/lib/is-same-plan.js.map +1 -1
- package/dist/cjs/lib/touch-detect/index.js +1 -2
- package/dist/cjs/lib/touch-detect/index.js.map +1 -1
- package/dist/esm/_shared.scss +9 -4
- package/dist/esm/components/comparison-grid/index.js +62 -50
- package/dist/esm/components/comparison-grid/index.js.map +1 -1
- package/dist/esm/components/comparison-grid/index.stories.js +1 -0
- package/dist/esm/components/comparison-grid/index.stories.js.map +1 -1
- package/dist/esm/components/comparison-grid/style.scss +0 -17
- package/dist/esm/components/dropdown-option.js +1 -1
- package/dist/esm/components/features-grid/index.js +21 -6
- package/dist/esm/components/features-grid/index.js.map +1 -1
- package/dist/esm/components/features-grid/index.stories.js +1 -0
- package/dist/esm/components/features-grid/index.stories.js.map +1 -1
- package/dist/esm/components/features-grid/style.scss +6 -21
- package/dist/esm/components/plan-button/style.scss +12 -11
- package/dist/esm/components/plan-type-selector/style.scss +3 -1
- package/dist/esm/components/shared/billing-timeframe/index.js +14 -6
- package/dist/esm/components/shared/billing-timeframe/index.js.map +1 -1
- package/dist/esm/components/shared/header-price/style.scss +4 -2
- package/dist/esm/components/sticky-container.js +66 -5
- package/dist/esm/components/sticky-container.js.map +1 -1
- package/dist/esm/hooks/data-store/use-grid-plans-for-features-grid.js +14 -11
- package/dist/esm/hooks/data-store/use-grid-plans-for-features-grid.js.map +1 -1
- package/dist/esm/hooks/data-store/use-plan-billing-description.js +1 -1
- package/dist/esm/hooks/data-store/use-plan-billing-period.js +12 -0
- package/dist/esm/hooks/data-store/use-plan-billing-period.js.map +1 -0
- package/dist/esm/hooks/use-grid-size.js +0 -1
- package/dist/esm/hooks/use-grid-size.js.map +1 -1
- package/dist/esm/index.js +2 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/tsconfig-cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/types/components/comparison-grid/index.d.ts +1 -1
- package/dist/types/components/comparison-grid/index.d.ts.map +1 -1
- package/dist/types/components/comparison-grid/index.stories.d.ts +5 -3
- package/dist/types/components/comparison-grid/index.stories.d.ts.map +1 -1
- package/dist/types/components/dropdown-option.d.ts +0 -1
- package/dist/types/components/dropdown-option.d.ts.map +1 -1
- package/dist/types/components/features-grid/billing-timeframes.d.ts.map +1 -1
- package/dist/types/components/features-grid/client-logo-list/client-list.d.ts +0 -1
- package/dist/types/components/features-grid/client-logo-list/client-list.d.ts.map +1 -1
- package/dist/types/components/features-grid/client-logo-list/index.d.ts.map +1 -1
- package/dist/types/components/features-grid/enterprise-features.d.ts.map +1 -1
- package/dist/types/components/features-grid/index.d.ts.map +1 -1
- package/dist/types/components/features-grid/index.stories.d.ts +5 -1
- package/dist/types/components/features-grid/index.stories.d.ts.map +1 -1
- package/dist/types/components/features-grid/mobile-free-domain.d.ts.map +1 -1
- package/dist/types/components/features-grid/plan-features-list.d.ts.map +1 -1
- package/dist/types/components/features-grid/plan-headers.d.ts.map +1 -1
- package/dist/types/components/features-grid/plan-logos.d.ts.map +1 -1
- package/dist/types/components/features-grid/plan-prices.d.ts.map +1 -1
- package/dist/types/components/features-grid/plan-tagline.d.ts.map +1 -1
- package/dist/types/components/features-grid/previous-features-included-title.d.ts.map +1 -1
- package/dist/types/components/features-grid/spotlight-plan.d.ts.map +1 -1
- package/dist/types/components/features-grid/table.d.ts.map +1 -1
- package/dist/types/components/features-grid/top-buttons.d.ts.map +1 -1
- package/dist/types/components/plan-button/index.d.ts +10 -10
- package/dist/types/components/plan-button/index.d.ts.map +1 -1
- package/dist/types/components/plan-div-td-container.d.ts +0 -1
- package/dist/types/components/plan-div-td-container.d.ts.map +1 -1
- package/dist/types/components/plan-logo.d.ts +0 -1
- package/dist/types/components/plan-logo.d.ts.map +1 -1
- package/dist/types/components/plan-type-selector/components/interval-type-dropdown.d.ts +0 -1
- package/dist/types/components/plan-type-selector/components/interval-type-dropdown.d.ts.map +1 -1
- package/dist/types/components/plan-type-selector/components/interval-type-selector.d.ts +0 -1
- package/dist/types/components/plan-type-selector/components/interval-type-selector.d.ts.map +1 -1
- package/dist/types/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.d.ts.map +1 -1
- package/dist/types/components/plans-2023-tooltip.d.ts.map +1 -1
- package/dist/types/components/popular-badge.d.ts +0 -1
- package/dist/types/components/popular-badge.d.ts.map +1 -1
- package/dist/types/components/shared/action-button/index.d.ts.map +1 -1
- package/dist/types/components/shared/billing-timeframe/index.d.ts.map +1 -1
- package/dist/types/components/shared/header-price/header-price-context.d.ts +0 -1
- package/dist/types/components/shared/header-price/header-price-context.d.ts.map +1 -1
- package/dist/types/components/shared/header-price/index.d.ts.map +1 -1
- package/dist/types/components/shared/storage/components/plan-storage.d.ts.map +1 -1
- package/dist/types/components/shared/storage/components/storage-dropdown.d.ts.map +1 -1
- package/dist/types/components/shared/storage/components/storage-feature-label.d.ts.map +1 -1
- package/dist/types/components/shared/storage/hooks/use-storage-string.d.ts +0 -1
- package/dist/types/components/shared/storage/hooks/use-storage-string.d.ts.map +1 -1
- package/dist/types/components/sticky-container.d.ts +22 -0
- package/dist/types/components/sticky-container.d.ts.map +1 -1
- package/dist/types/css-mixins.d.ts.map +1 -1
- package/dist/types/grid-context.d.ts +0 -1
- package/dist/types/grid-context.d.ts.map +1 -1
- package/dist/types/hooks/data-store/types.d.ts +1 -0
- package/dist/types/hooks/data-store/types.d.ts.map +1 -1
- package/dist/types/hooks/data-store/use-grid-plan-for-spotlight.d.ts.map +1 -1
- package/dist/types/hooks/data-store/use-grid-plans-for-comparison-grid.d.ts.map +1 -1
- package/dist/types/hooks/data-store/use-grid-plans-for-features-grid.d.ts +1 -1
- package/dist/types/hooks/data-store/use-grid-plans-for-features-grid.d.ts.map +1 -1
- package/dist/types/hooks/data-store/use-grid-plans.d.ts +1 -1
- package/dist/types/hooks/data-store/use-grid-plans.d.ts.map +1 -1
- package/dist/types/hooks/data-store/use-highlight-labels.d.ts +0 -1
- package/dist/types/hooks/data-store/use-highlight-labels.d.ts.map +1 -1
- package/dist/types/hooks/data-store/use-plan-billing-description.d.ts +0 -1
- package/dist/types/hooks/data-store/use-plan-billing-description.d.ts.map +1 -1
- package/dist/types/hooks/data-store/use-plan-billing-period.d.ts +8 -0
- package/dist/types/hooks/data-store/use-plan-billing-period.d.ts.map +1 -0
- package/dist/types/hooks/data-store/use-plans-from-types.d.ts.map +1 -1
- package/dist/types/hooks/use-grid-size.d.ts +3 -3
- package/dist/types/hooks/use-grid-size.d.ts.map +1 -1
- package/dist/types/hooks/use-highlight-adjacency-matrix.d.ts.map +1 -1
- package/dist/types/index.d.ts +2 -1
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/lib/filter-unused-features-object.d.ts.map +1 -1
- package/dist/types/lib/get-plan-features-object.d.ts.map +1 -1
- package/dist/types/types.d.ts +5 -5
- package/dist/types/types.d.ts.map +1 -1
- package/package.json +16 -15
- package/src/_shared.scss +9 -4
- package/src/components/comparison-grid/index.stories.tsx +2 -1
- package/src/components/comparison-grid/index.tsx +69 -55
- package/src/components/comparison-grid/style.scss +0 -17
- package/src/components/dropdown-option.tsx +1 -1
- package/src/components/features-grid/index.stories.tsx +1 -0
- package/src/components/features-grid/index.tsx +22 -9
- package/src/components/features-grid/style.scss +6 -21
- package/src/components/plan-button/style.scss +12 -11
- package/src/components/plan-type-selector/style.scss +3 -1
- package/src/components/shared/billing-timeframe/index.tsx +15 -7
- package/src/components/shared/header-price/style.scss +4 -2
- package/src/components/sticky-container.tsx +74 -3
- package/src/components/test/billing-timeframe.tsx +2 -2
- package/src/hooks/data-store/types.ts +1 -0
- package/src/hooks/data-store/use-grid-plans-for-features-grid.ts +14 -10
- package/src/hooks/data-store/use-plan-billing-description.tsx +1 -1
- package/src/hooks/data-store/use-plan-billing-period.tsx +28 -0
- package/src/hooks/use-grid-size.ts +3 -3
- package/src/index.tsx +2 -0
- package/src/types.ts +5 -4
- package/dist/cjs/lib/sort-plan-properties.js +0 -39
- package/dist/cjs/lib/sort-plan-properties.js.map +0 -1
- package/dist/esm/lib/sort-plan-properties.js +0 -35
- package/dist/esm/lib/sort-plan-properties.js.map +0 -1
- package/dist/types/lib/sort-plan-properties.d.ts +0 -3
- package/dist/types/lib/sort-plan-properties.d.ts.map +0 -1
- package/src/lib/sort-plan-properties.ts +0 -46
- package/src/lib/test/sort-plan-properties.ts +0 -104
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import { GridSize } from '../types';
|
|
2
2
|
interface Props {
|
|
3
3
|
containerRef: React.MutableRefObject<HTMLDivElement | null>;
|
|
4
4
|
/**
|
|
@@ -7,12 +7,12 @@ interface Props {
|
|
|
7
7
|
* but they could be used in the future in a containment context.
|
|
8
8
|
* The keys are the labels, the values are the minimum widths.
|
|
9
9
|
*/
|
|
10
|
-
containerBreakpoints: Map<
|
|
10
|
+
containerBreakpoints: Map<GridSize, number>;
|
|
11
11
|
}
|
|
12
12
|
/**
|
|
13
13
|
* useGridSize returns the current grid size based on the width of the container
|
|
14
14
|
* and the breakpoints passed through as props.
|
|
15
15
|
*/
|
|
16
|
-
export default function useGridSize({ containerRef, containerBreakpoints }: Props):
|
|
16
|
+
export default function useGridSize({ containerRef, containerBreakpoints }: Props): GridSize | null;
|
|
17
17
|
export {};
|
|
18
18
|
//# sourceMappingURL=use-grid-size.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-grid-size.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-grid-size.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"use-grid-size.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-grid-size.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,UAAU,KAAK;IACd,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAE,cAAc,GAAG,IAAI,CAAE,CAAC;IAC9D;;;;;OAKG;IACH,oBAAoB,EAAE,GAAG,CAAE,QAAQ,EAAE,MAAM,CAAE,CAAC;CAC9C;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EAAE,YAAY,EAAE,oBAAoB,EAAE,EAAE,KAAK,mBA2BjF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-highlight-adjacency-matrix.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-highlight-adjacency-matrix.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAE7D,KAAK,wBAAwB,GAAG;KAC7B,QAAQ,IAAI,QAAQ,GAAI;QACzB,eAAe,EAAE,OAAO,CAAC;QACzB,gBAAgB,EAAE,OAAO,CAAC;QAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;KAC1B;CACD,CAAC;AAEF,UAAU,KAAK;IACd,iBAAiB,EAAE,QAAQ,EAAE,CAAC;CAC9B;AAED,QAAA,MAAM,2BAA2B,
|
|
1
|
+
{"version":3,"file":"use-highlight-adjacency-matrix.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-highlight-adjacency-matrix.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,8BAA8B,CAAC;AAE7D,KAAK,wBAAwB,GAAG;KAC7B,QAAQ,IAAI,QAAQ,GAAI;QACzB,eAAe,EAAE,OAAO,CAAC;QACzB,gBAAgB,EAAE,OAAO,CAAC;QAC1B,eAAe,CAAC,EAAE,OAAO,CAAC;KAC1B;CACD,CAAC;AAEF,UAAU,KAAK;IACd,iBAAiB,EAAE,QAAQ,EAAE,CAAC;CAC9B;AAED,QAAA,MAAM,2BAA2B,GAAK,uBAAuB,KAAK,6BA6BjE,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ import useGridPlans, { usePlanTypesWithIntent } from './hooks/data-store/use-gri
|
|
|
9
9
|
import useGridPlansForComparisonGrid from './hooks/data-store/use-grid-plans-for-comparison-grid';
|
|
10
10
|
import useGridPlansForFeaturesGrid from './hooks/data-store/use-grid-plans-for-features-grid';
|
|
11
11
|
import usePlanBillingDescription from './hooks/data-store/use-plan-billing-description';
|
|
12
|
+
import usePlanBillingPeriod from './hooks/data-store/use-plan-billing-period';
|
|
12
13
|
import usePlanFeaturesForGridPlans from './hooks/data-store/use-plan-features-for-grid-plans';
|
|
13
14
|
import usePlansFromTypes from './hooks/data-store/use-plans-from-types';
|
|
14
15
|
import useRestructuredPlanFeaturesForComparisonGrid from './hooks/data-store/use-restructured-plan-features-for-comparison-grid';
|
|
@@ -24,7 +25,7 @@ export { ComparisonGrid, FeaturesGrid, PlanTypeSelector, PlanButton, Plans2023To
|
|
|
24
25
|
/**
|
|
25
26
|
* Hooks/helpers
|
|
26
27
|
*/
|
|
27
|
-
export { useManageTooltipToggle, useGridPlans, useGridPlansForFeaturesGrid, useGridPlansForComparisonGrid, useGridPlanForSpotlight, usePlanBillingDescription, usePlanFeaturesForGridPlans, usePlansFromTypes, usePlanTypesWithIntent, useRestructuredPlanFeaturesForComparisonGrid, };
|
|
28
|
+
export { useManageTooltipToggle, useGridPlans, useGridPlansForFeaturesGrid, useGridPlansForComparisonGrid, useGridPlanForSpotlight, usePlanBillingPeriod, usePlanBillingDescription, usePlanFeaturesForGridPlans, usePlansFromTypes, usePlanTypesWithIntent, useRestructuredPlanFeaturesForComparisonGrid, };
|
|
28
29
|
/**
|
|
29
30
|
* Constants
|
|
30
31
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAC1D,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,gBAAgB,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,uBAAuB,MAAM,gDAAgD,CAAC;AACrF,OAAO,YAAY,EAAE,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACzF,OAAO,6BAA6B,MAAM,uDAAuD,CAAC;AAClG,OAAO,2BAA2B,MAAM,qDAAqD,CAAC;AAC9F,OAAO,yBAAyB,MAAM,iDAAiD,CAAC;AACxF,OAAO,2BAA2B,MAAM,qDAAqD,CAAC;AAC9F,OAAO,iBAAiB,MAAM,yCAAyC,CAAC;AACxE,OAAO,4CAA4C,MAAM,uEAAuE,CAAC;AACjI,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAE3E;;GAEG;AACH,mBAAmB,SAAS,CAAC;AAE7B;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAC;AAExF;;GAEG;AACH,OAAO,EACN,sBAAsB,EACtB,YAAY,EACZ,2BAA2B,EAC3B,6BAA6B,EAC7B,uBAAuB,EACvB,yBAAyB,EACzB,2BAA2B,EAC3B,iBAAiB,EACjB,sBAAsB,EACtB,4CAA4C,GAC5C,CAAC;AAEF;;GAEG;AACH,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,MAAM,8BAA8B,CAAC;AAC1D,OAAO,YAAY,MAAM,4BAA4B,CAAC;AACtD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,gBAAgB,MAAM,iCAAiC,CAAC;AAC/D,OAAO,EAAE,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,uBAAuB,MAAM,gDAAgD,CAAC;AACrF,OAAO,YAAY,EAAE,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AACzF,OAAO,6BAA6B,MAAM,uDAAuD,CAAC;AAClG,OAAO,2BAA2B,MAAM,qDAAqD,CAAC;AAC9F,OAAO,yBAAyB,MAAM,iDAAiD,CAAC;AACxF,OAAO,oBAAoB,MAAM,4CAA4C,CAAC;AAC9E,OAAO,2BAA2B,MAAM,qDAAqD,CAAC;AAC9F,OAAO,iBAAiB,MAAM,yCAAyC,CAAC;AACxE,OAAO,4CAA4C,MAAM,uEAAuE,CAAC;AACjI,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAE3E;;GAEG;AACH,mBAAmB,SAAS,CAAC;AAE7B;;GAEG;AACH,OAAO,EAAE,cAAc,EAAE,YAAY,EAAE,gBAAgB,EAAE,UAAU,EAAE,gBAAgB,EAAE,CAAC;AAExF;;GAEG;AACH,OAAO,EACN,sBAAsB,EACtB,YAAY,EACZ,2BAA2B,EAC3B,6BAA6B,EAC7B,uBAAuB,EACvB,oBAAoB,EACpB,yBAAyB,EACzB,2BAA2B,EAC3B,iBAAiB,EACjB,sBAAsB,EACtB,4CAA4C,GAC5C,CAAC;AAEF;;GAEG;AACH,OAAO,EAAE,oBAAoB,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-unused-features-object.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-unused-features-object.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAElE;;GAEG;AACH,QAAA,MAAM,0BAA0B,
|
|
1
|
+
{"version":3,"file":"filter-unused-features-object.d.ts","sourceRoot":"","sources":["../../../src/lib/filter-unused-features-object.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAElE;;GAEG;AACH,QAAA,MAAM,0BAA0B,GAC/B,kBAAkB,QAAQ,EAAE,EAC5B,UAAU,aAAa,EAAE,KACvB,aAAa,EAmBf,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-plan-features-object.d.ts","sourceRoot":"","sources":["../../../src/lib/get-plan-features-object.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,QAAA,MAAM,qBAAqB,
|
|
1
|
+
{"version":3,"file":"get-plan-features-object.d.ts","sourceRoot":"","sources":["../../../src/lib/get-plan-features-object.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAG3D,QAAA,MAAM,qBAAqB,GAAK,cAAc,WAAW,EAAE,eAAe,KAAK,CAAE,MAAM,CAAE,2DAMxF,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
|
package/dist/types/types.d.ts
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { Plans, AddOns, PlanPricing } from '@automattic/data-stores';
|
|
3
2
|
import type { UrlFriendlyTermType, PlanSlug, FeatureList, FeatureObject, FeatureGroupMap, Feature } from '@automattic/calypso-products';
|
|
4
3
|
import type { MinimalRequestCartProduct } from '@automattic/shopping-cart';
|
|
@@ -38,7 +37,7 @@ export interface GridPlan {
|
|
|
38
37
|
/***********************
|
|
39
38
|
* Grid Component Types:
|
|
40
39
|
***********************/
|
|
41
|
-
export type GridSize = 'small' | 'medium' | 'large';
|
|
40
|
+
export type GridSize = 'small' | 'smedium' | 'medium' | 'large' | 'xlarge';
|
|
42
41
|
export type PlansIntent = 'plans-affiliate' | 'plans-blog-onboarding' | 'plans-newsletter' | 'plans-new-hosted-site' | 'plans-new-hosted-site-business-only' | 'plans-plugins' | 'plans-jetpack-app' | 'plans-jetpack-app-site-creation' | 'plans-import' | 'plans-woocommerce' | 'plans-p2' | 'plans-default-wpcom' | 'plans-business-trial' | 'plans-videopress' | 'plans-guided-segment-developer-or-agency' | 'plans-guided-segment-merchant' | 'plans-guided-segment-blogger' | 'plans-guided-segment-nonprofit' | 'plans-guided-segment-consumer-or-business' | 'plans-site-selected-legacy' | 'default';
|
|
43
42
|
export interface PlanActionOverrides {
|
|
44
43
|
loggedInFreePlan?: {
|
|
@@ -63,8 +62,9 @@ export interface CommonGridProps {
|
|
|
63
62
|
siteId?: number | null;
|
|
64
63
|
isInSignup: boolean;
|
|
65
64
|
isInAdmin: boolean;
|
|
65
|
+
isInSiteDashboard: boolean;
|
|
66
66
|
onStorageAddOnClick?: (addOnSlug: AddOns.StorageAddOnSlug) => void;
|
|
67
|
-
currentSitePlanSlug?:
|
|
67
|
+
currentSitePlanSlug?: PlanSlug | null;
|
|
68
68
|
hideUnavailableFeatures?: boolean;
|
|
69
69
|
planActionOverrides?: PlanActionOverrides;
|
|
70
70
|
selectedFeature?: string;
|
|
@@ -73,7 +73,7 @@ export interface CommonGridProps {
|
|
|
73
73
|
showRefundPeriod?: boolean;
|
|
74
74
|
planTypeSelectorProps?: PlanTypeSelectorProps;
|
|
75
75
|
gridContainerRef?: React.MutableRefObject<HTMLDivElement | null>;
|
|
76
|
-
gridSize?:
|
|
76
|
+
gridSize?: GridSize;
|
|
77
77
|
}
|
|
78
78
|
export interface FeaturesGridProps extends CommonGridProps {
|
|
79
79
|
gridPlans: GridPlan[];
|
|
@@ -89,7 +89,7 @@ export interface FeaturesGridProps extends CommonGridProps {
|
|
|
89
89
|
}
|
|
90
90
|
export interface ComparisonGridProps extends CommonGridProps {
|
|
91
91
|
selectedPlan?: string;
|
|
92
|
-
intervalType:
|
|
92
|
+
intervalType: SupportedUrlFriendlyTermType;
|
|
93
93
|
}
|
|
94
94
|
export type UseActionCallback = ({ planSlug, cartItemForPlan, selectedStorageAddOn, availableForPurchase, }: {
|
|
95
95
|
planSlug: PlanSlug;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@automattic/plans-grid-next",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "WordPress.com plans UI grid components and helpers.",
|
|
5
5
|
"homepage": "https://github.com/Automattic/wp-calypso",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -36,31 +36,32 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@automattic/calypso-products": "^1.2.1",
|
|
39
|
-
"@automattic/components": "^2.2.
|
|
40
|
-
"@automattic/data-stores": "^3.1.
|
|
39
|
+
"@automattic/components": "^2.2.1",
|
|
40
|
+
"@automattic/data-stores": "^3.1.1",
|
|
41
41
|
"@automattic/onboarding": "^1.0.0",
|
|
42
|
+
"@automattic/typography": "^1.0.0",
|
|
42
43
|
"@emotion/react": "11.11.1",
|
|
43
44
|
"@emotion/styled": "^11.11.0",
|
|
44
|
-
"@wordpress/data": "^10.
|
|
45
|
-
"@wordpress/element": "^6.
|
|
46
|
-
"@wordpress/icons": "^10.
|
|
47
|
-
"@wordpress/primitives": "^4.
|
|
48
|
-
"@wordpress/url": "^4.
|
|
49
|
-
"@wordpress/warning": "^3.
|
|
45
|
+
"@wordpress/data": "^10.20.0",
|
|
46
|
+
"@wordpress/element": "^6.20.0",
|
|
47
|
+
"@wordpress/icons": "^10.20.0",
|
|
48
|
+
"@wordpress/primitives": "^4.20.0",
|
|
49
|
+
"@wordpress/url": "^4.20.0",
|
|
50
|
+
"@wordpress/warning": "^3.20.0",
|
|
50
51
|
"clsx": "^2.1.1",
|
|
51
52
|
"i18n-calypso": "^7.4.0",
|
|
52
53
|
"react-intersection-observer": "^9.4.3",
|
|
53
54
|
"react-transition-group": "^4.3.0"
|
|
54
55
|
},
|
|
55
56
|
"peerDependencies": {
|
|
56
|
-
"@wordpress/i18n": "^5.
|
|
57
|
-
"postcss": "^8.5.
|
|
57
|
+
"@wordpress/i18n": "^5.20.0",
|
|
58
|
+
"postcss": "^8.5.3",
|
|
58
59
|
"react": "^18.3.1",
|
|
59
60
|
"react-dom": "^18.3.1"
|
|
60
61
|
},
|
|
61
62
|
"devDependencies": {
|
|
62
63
|
"@automattic/calypso-build": "^10.0.0",
|
|
63
|
-
"@automattic/calypso-color-schemes": "^
|
|
64
|
+
"@automattic/calypso-color-schemes": "^4.0.0",
|
|
64
65
|
"@automattic/calypso-storybook": "^1.0.0",
|
|
65
66
|
"@automattic/calypso-typescript-config": "^1.0.0",
|
|
66
67
|
"@automattic/shopping-cart": "^2.0.1",
|
|
@@ -70,11 +71,11 @@
|
|
|
70
71
|
"@testing-library/dom": "^10.4.0",
|
|
71
72
|
"@testing-library/jest-dom": "^6.6.3",
|
|
72
73
|
"@testing-library/react": "^16.2.0",
|
|
73
|
-
"@testing-library/user-event": "^14.6.
|
|
74
|
+
"@testing-library/user-event": "^14.6.1",
|
|
74
75
|
"msw": "^2.2.14",
|
|
75
|
-
"msw-storybook-addon": "^2.0.
|
|
76
|
+
"msw-storybook-addon": "^2.0.4",
|
|
76
77
|
"resize-observer-polyfill": "^1.5.1",
|
|
77
|
-
"typescript": "^5.
|
|
78
|
+
"typescript": "^5.8.2",
|
|
78
79
|
"webpack": "^5.97.1"
|
|
79
80
|
},
|
|
80
81
|
"msw": {
|
package/src/_shared.scss
CHANGED
|
@@ -11,7 +11,7 @@ $mobile-card-max-width: 440px;
|
|
|
11
11
|
|
|
12
12
|
.plans-grid-next-storage-feature-label__container {
|
|
13
13
|
display: flex;
|
|
14
|
-
gap:
|
|
14
|
+
gap: 10px;
|
|
15
15
|
flex-direction: column;
|
|
16
16
|
align-items: baseline;
|
|
17
17
|
|
|
@@ -30,7 +30,7 @@ $mobile-card-max-width: 440px;
|
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.plans-grid-next-storage-feature-label__offset-price {
|
|
33
|
-
color: var(--studio-green-
|
|
33
|
+
color: var(--studio-green-60);
|
|
34
34
|
font-size: $font-body-extra-small;
|
|
35
35
|
font-weight: 500;
|
|
36
36
|
}
|
|
@@ -76,14 +76,19 @@ $mobile-card-max-width: 440px;
|
|
|
76
76
|
margin-left: 4px;
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
+
// Height of the <CustomSelectControl /> component defined here: https://github.com/WordPress/gutenberg/blob/7c02f292165c182ffc126134b82e01074db6f631/packages/components/src/custom-select-control-v2/styles.ts#L40
|
|
80
|
+
$storage-feature-dropdown-height: 40px;
|
|
81
|
+
$storage-feature-label-y-padding: 4px;
|
|
82
|
+
|
|
79
83
|
.plans-grid-next-storage-feature-label__volume {
|
|
80
84
|
color: var(--studio-gray-90);
|
|
81
|
-
padding:
|
|
85
|
+
padding: $storage-feature-label-y-padding 0;
|
|
82
86
|
font-weight: 400;
|
|
83
|
-
line-height:
|
|
87
|
+
line-height: $storage-feature-dropdown-height - 2 * $storage-feature-label-y-padding;
|
|
84
88
|
font-size: $font-body-extra-small;
|
|
85
89
|
|
|
86
90
|
&.is-badge {
|
|
91
|
+
line-height: 20px;
|
|
87
92
|
background: #f2f2f2;
|
|
88
93
|
/* stylelint-disable-next-line */
|
|
89
94
|
border-radius: 5px;
|
|
@@ -45,8 +45,9 @@ const defaultProps = {
|
|
|
45
45
|
currentSitePlanSlug: undefined,
|
|
46
46
|
featureGroupMap: getPlanFeaturesGroupedForComparisonGrid(),
|
|
47
47
|
hideUnavailableFeatures: false,
|
|
48
|
-
intervalType: 'yearly',
|
|
48
|
+
intervalType: 'yearly' as const,
|
|
49
49
|
isInAdmin: false,
|
|
50
|
+
isInSiteDashboard: false,
|
|
50
51
|
isInSignup: true,
|
|
51
52
|
onStorageAddOnClick: () => {},
|
|
52
53
|
planActionOverrides: undefined,
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
getPlans,
|
|
6
6
|
} from '@automattic/calypso-products';
|
|
7
7
|
import { Gridicon, JetpackLogo } from '@automattic/components';
|
|
8
|
-
import { AddOns } from '@automattic/data-stores';
|
|
8
|
+
import { AddOns, Plans } from '@automattic/data-stores';
|
|
9
9
|
import { css } from '@emotion/react';
|
|
10
10
|
import styled from '@emotion/styled';
|
|
11
11
|
import { useRef, useMemo } from '@wordpress/element';
|
|
@@ -24,12 +24,12 @@ import {
|
|
|
24
24
|
import { useInView } from 'react-intersection-observer';
|
|
25
25
|
import { plansGridMediumLarge } from '../../css-mixins';
|
|
26
26
|
import PlansGridContextProvider, { usePlansGridContext } from '../../grid-context';
|
|
27
|
+
import usePlanBillingPeriod from '../../hooks/data-store/use-plan-billing-period';
|
|
27
28
|
import useGridSize from '../../hooks/use-grid-size';
|
|
28
29
|
import useHighlightAdjacencyMatrix from '../../hooks/use-highlight-adjacency-matrix';
|
|
29
30
|
import { useManageTooltipToggle } from '../../hooks/use-manage-tooltip-toggle';
|
|
30
31
|
import filterUnusedFeaturesObject from '../../lib/filter-unused-features-object';
|
|
31
32
|
import getPlanFeaturesObject from '../../lib/get-plan-features-object';
|
|
32
|
-
import { sortPlans } from '../../lib/sort-plan-properties';
|
|
33
33
|
import PlanTypeSelector from '../plan-type-selector';
|
|
34
34
|
import { Plans2023Tooltip } from '../plans-2023-tooltip';
|
|
35
35
|
import PopularBadge from '../popular-badge';
|
|
@@ -46,6 +46,7 @@ import type {
|
|
|
46
46
|
PlanActionOverrides,
|
|
47
47
|
TransformedFeatureObject,
|
|
48
48
|
PlanTypeSelectorProps,
|
|
49
|
+
GridSize,
|
|
49
50
|
} from '../../types';
|
|
50
51
|
import type {
|
|
51
52
|
FeatureObject,
|
|
@@ -930,59 +931,66 @@ const ComparisonGrid = ( {
|
|
|
930
931
|
showRefundPeriod,
|
|
931
932
|
planTypeSelectorProps,
|
|
932
933
|
gridSize,
|
|
934
|
+
siteId,
|
|
933
935
|
}: ComparisonGridProps ) => {
|
|
934
936
|
const { gridPlans, gridPlansIndex, featureGroupMap } = usePlansGridContext();
|
|
935
937
|
const [ activeTooltipId, setActiveTooltipId ] = useManageTooltipToggle();
|
|
936
938
|
const [ visiblePlans, setVisiblePlans ] = useState< PlanSlug[] >( [] );
|
|
937
|
-
|
|
938
|
-
const
|
|
939
|
-
return sortPlans( gridPlans, currentSitePlanSlug, 'small' === gridSize );
|
|
940
|
-
}, [ gridPlans, currentSitePlanSlug, gridSize ] );
|
|
939
|
+
const currentPlanTerm = Plans.useCurrentPlanTerm( { siteId } );
|
|
940
|
+
const selectedPlanTerm = usePlanBillingPeriod( { intervalType } );
|
|
941
941
|
|
|
942
942
|
useEffect( () => {
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
949
|
-
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
// visible length changed, update with the current gridPlans
|
|
959
|
-
// - we don't care about previous order
|
|
960
|
-
if ( prev.length !== visibleLength ) {
|
|
961
|
-
return displayedGridPlans.slice( 0, visibleLength ).map( ( { planSlug } ) => planSlug );
|
|
962
|
-
}
|
|
963
|
-
|
|
964
|
-
// prev state out of sync with current gridPlans (e.g. gridPlans updated to a different term)
|
|
965
|
-
// - we care about previous order
|
|
966
|
-
const isPrevStale = prev.some( ( planSlug ) => ! gridPlansIndex[ planSlug ] );
|
|
967
|
-
if ( isPrevStale ) {
|
|
968
|
-
return prev.map( ( planSlug ) => {
|
|
969
|
-
const gridPlan = displayedGridPlans.find(
|
|
970
|
-
( gridPlan ) => getPlanClass( gridPlan.planSlug ) === getPlanClass( planSlug )
|
|
971
|
-
);
|
|
943
|
+
let numPlansToDisplay = gridPlans.length;
|
|
944
|
+
|
|
945
|
+
switch ( gridSize ) {
|
|
946
|
+
case 'large':
|
|
947
|
+
numPlansToDisplay = 4;
|
|
948
|
+
break;
|
|
949
|
+
case 'medium':
|
|
950
|
+
numPlansToDisplay = 3;
|
|
951
|
+
break;
|
|
952
|
+
case 'smedium':
|
|
953
|
+
case 'small':
|
|
954
|
+
numPlansToDisplay = 2;
|
|
955
|
+
break;
|
|
956
|
+
}
|
|
972
957
|
|
|
973
|
-
|
|
974
|
-
|
|
975
|
-
}
|
|
958
|
+
let visiblePlanSlugs = gridPlans
|
|
959
|
+
.slice( 0, numPlansToDisplay )
|
|
960
|
+
.map( ( { planSlug } ) => planSlug );
|
|
961
|
+
|
|
962
|
+
const isCurrentPlanVisible =
|
|
963
|
+
!! currentSitePlanSlug && visiblePlanSlugs.includes( currentSitePlanSlug );
|
|
964
|
+
|
|
965
|
+
/**
|
|
966
|
+
* Plans are sorted by least to most expensive unless:
|
|
967
|
+
* - a current plan exists and
|
|
968
|
+
* - the current plan's term matches the selected term and
|
|
969
|
+
* - the current plan would not be displayed due to the number of plans that can be visible at once
|
|
970
|
+
*
|
|
971
|
+
* If those conditions are met:
|
|
972
|
+
* - the current plan is placed at the start of the grid and
|
|
973
|
+
* - the last plan is removed to maintain the expected number of visible plans
|
|
974
|
+
*/
|
|
975
|
+
if ( currentSitePlanSlug && ! isCurrentPlanVisible && currentPlanTerm === selectedPlanTerm ) {
|
|
976
|
+
visiblePlanSlugs = [ currentSitePlanSlug, ...visiblePlanSlugs ].slice( 0, numPlansToDisplay );
|
|
977
|
+
}
|
|
976
978
|
|
|
977
|
-
|
|
978
|
-
|
|
979
|
-
|
|
980
|
-
|
|
979
|
+
setVisiblePlans( visiblePlanSlugs );
|
|
980
|
+
}, [
|
|
981
|
+
gridSize,
|
|
982
|
+
gridPlansIndex,
|
|
983
|
+
currentSitePlanSlug,
|
|
984
|
+
gridPlans,
|
|
985
|
+
currentPlanTerm,
|
|
986
|
+
selectedPlanTerm,
|
|
987
|
+
intervalType,
|
|
988
|
+
] );
|
|
981
989
|
|
|
982
990
|
const visibleGridPlans = useMemo(
|
|
983
991
|
() =>
|
|
984
992
|
visiblePlans.reduce( ( acc, planSlug ) => {
|
|
985
|
-
const gridPlan =
|
|
993
|
+
const gridPlan = gridPlans.find(
|
|
986
994
|
( gridPlan ) => getPlanClass( gridPlan.planSlug ) === getPlanClass( planSlug )
|
|
987
995
|
);
|
|
988
996
|
|
|
@@ -992,7 +1000,7 @@ const ComparisonGrid = ( {
|
|
|
992
1000
|
|
|
993
1001
|
return acc;
|
|
994
1002
|
}, [] as GridPlan[] ),
|
|
995
|
-
[ visiblePlans,
|
|
1003
|
+
[ visiblePlans, gridPlans ]
|
|
996
1004
|
);
|
|
997
1005
|
|
|
998
1006
|
const onPlanChange = useCallback(
|
|
@@ -1064,7 +1072,7 @@ const ComparisonGrid = ( {
|
|
|
1064
1072
|
>
|
|
1065
1073
|
{ ( isStuck: boolean ) => (
|
|
1066
1074
|
<ComparisonGridHeader
|
|
1067
|
-
displayedGridPlans={
|
|
1075
|
+
displayedGridPlans={ gridPlans }
|
|
1068
1076
|
visibleGridPlans={ visibleGridPlans }
|
|
1069
1077
|
isInSignup={ isInSignup }
|
|
1070
1078
|
onPlanChange={ onPlanChange }
|
|
@@ -1093,7 +1101,7 @@ const ComparisonGrid = ( {
|
|
|
1093
1101
|
/>
|
|
1094
1102
|
) ) }
|
|
1095
1103
|
<ComparisonGridHeader
|
|
1096
|
-
displayedGridPlans={
|
|
1104
|
+
displayedGridPlans={ gridPlans }
|
|
1097
1105
|
visibleGridPlans={ visibleGridPlans }
|
|
1098
1106
|
isInSignup={ isInSignup }
|
|
1099
1107
|
isFooter
|
|
@@ -1124,14 +1132,6 @@ const ComparisonGrid = ( {
|
|
|
1124
1132
|
);
|
|
1125
1133
|
};
|
|
1126
1134
|
|
|
1127
|
-
const GRID_BREAKPOINTS = new Map( [
|
|
1128
|
-
[ 'small', 0 ],
|
|
1129
|
-
[ 'smedium', 686 ],
|
|
1130
|
-
[ 'medium', 835 ], // enough to fit Enterpreneur plan. was 686
|
|
1131
|
-
[ 'large', 1005 ], // enough to fit Enterpreneur plan. was 870
|
|
1132
|
-
[ 'xlarge', 1180 ],
|
|
1133
|
-
] );
|
|
1134
|
-
|
|
1135
1135
|
// TODO
|
|
1136
1136
|
// Now that everything under is functional component, we can deprecate this wrapper and only keep ComparisonGrid instead.
|
|
1137
1137
|
// More details can be found in https://github.com/Automattic/wp-calypso/issues/87047
|
|
@@ -1144,6 +1144,7 @@ const WrappedComparisonGrid = ( {
|
|
|
1144
1144
|
recordTracksEvent,
|
|
1145
1145
|
allFeaturesList,
|
|
1146
1146
|
intervalType,
|
|
1147
|
+
isInSiteDashboard,
|
|
1147
1148
|
isInSignup,
|
|
1148
1149
|
currentSitePlanSlug,
|
|
1149
1150
|
selectedPlan,
|
|
@@ -1162,10 +1163,22 @@ const WrappedComparisonGrid = ( {
|
|
|
1162
1163
|
}: ComparisonGridExternalProps ) => {
|
|
1163
1164
|
const gridContainerRef = useRef< HTMLDivElement >( null );
|
|
1164
1165
|
|
|
1166
|
+
const gridBreakpoints = useMemo( () => {
|
|
1167
|
+
// we want to fit up to the Commerce plan in this breakpoint
|
|
1168
|
+
const xlargeBreakpoint = isInSiteDashboard ? 1114 : 1180;
|
|
1169
|
+
return new Map< GridSize, number >( [
|
|
1170
|
+
[ 'small', 0 ],
|
|
1171
|
+
[ 'smedium', 686 ],
|
|
1172
|
+
[ 'medium', 835 ],
|
|
1173
|
+
[ 'large', 1005 ],
|
|
1174
|
+
[ 'xlarge', xlargeBreakpoint ],
|
|
1175
|
+
] );
|
|
1176
|
+
}, [ isInSiteDashboard ] );
|
|
1177
|
+
|
|
1165
1178
|
// TODO: this will be deprecated along side removing the wrapper component
|
|
1166
1179
|
const gridSize = useGridSize( {
|
|
1167
1180
|
containerRef: gridContainerRef,
|
|
1168
|
-
containerBreakpoints:
|
|
1181
|
+
containerBreakpoints: gridBreakpoints,
|
|
1169
1182
|
} );
|
|
1170
1183
|
|
|
1171
1184
|
const classNames = clsx( 'plans-grid-next', className, {
|
|
@@ -1196,6 +1209,7 @@ const WrappedComparisonGrid = ( {
|
|
|
1196
1209
|
>
|
|
1197
1210
|
<ComparisonGrid
|
|
1198
1211
|
intervalType={ intervalType }
|
|
1212
|
+
isInSiteDashboard={ isInSiteDashboard }
|
|
1199
1213
|
isInSignup={ isInSignup }
|
|
1200
1214
|
currentSitePlanSlug={ currentSitePlanSlug }
|
|
1201
1215
|
siteId={ siteId }
|
|
@@ -282,23 +282,6 @@
|
|
|
282
282
|
@include plans-grid-medium-large {
|
|
283
283
|
margin: 7px 0 10px;
|
|
284
284
|
}
|
|
285
|
-
|
|
286
|
-
.plans-grid-next__billing-timeframe-vip-price {
|
|
287
|
-
font-size: $font-body;
|
|
288
|
-
line-height: 24px;
|
|
289
|
-
font-weight: 400;
|
|
290
|
-
color: var(--studio-gray-80);
|
|
291
|
-
|
|
292
|
-
@include plans-grid-medium-large {
|
|
293
|
-
font-size: $font-body-small;
|
|
294
|
-
line-height: 20px;
|
|
295
|
-
}
|
|
296
|
-
|
|
297
|
-
@include plans-grid-large {
|
|
298
|
-
font-size: $font-body-extra-small;
|
|
299
|
-
line-height: 16px;
|
|
300
|
-
}
|
|
301
|
-
}
|
|
302
285
|
}
|
|
303
286
|
|
|
304
287
|
.plans-grid-next-action-button {
|
|
@@ -31,6 +31,7 @@ import type {
|
|
|
31
31
|
FeaturesGridExternalProps,
|
|
32
32
|
FeaturesGridProps,
|
|
33
33
|
GridPlan,
|
|
34
|
+
GridSize,
|
|
34
35
|
PlanActionOverrides,
|
|
35
36
|
} from '../../types';
|
|
36
37
|
|
|
@@ -376,6 +377,7 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
|
|
|
376
377
|
allFeaturesList,
|
|
377
378
|
coupon,
|
|
378
379
|
isInAdmin,
|
|
380
|
+
isInSiteDashboard,
|
|
379
381
|
className,
|
|
380
382
|
enableFeatureTooltips,
|
|
381
383
|
enableCategorisedFeatures,
|
|
@@ -390,15 +392,26 @@ const WrappedFeaturesGrid = ( props: FeaturesGridExternalProps ) => {
|
|
|
390
392
|
|
|
391
393
|
const gridContainerRef = useRef< HTMLDivElement >( null );
|
|
392
394
|
|
|
393
|
-
const gridBreakpoints = useMemo(
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
395
|
+
const gridBreakpoints = useMemo( () => {
|
|
396
|
+
// we want to fit up to the Commerce plan in this breakpoint
|
|
397
|
+
let largeBreakpoint;
|
|
398
|
+
if ( isInSiteDashboard ) {
|
|
399
|
+
largeBreakpoint = 1042;
|
|
400
|
+
} else if ( isInAdmin ) {
|
|
401
|
+
largeBreakpoint = 1180;
|
|
402
|
+
} else {
|
|
403
|
+
largeBreakpoint = 1320;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
// we want to fit 3 plans per row in this breakpoint
|
|
407
|
+
const mediumBreakpoint = isInSiteDashboard ? 667 : 741;
|
|
408
|
+
|
|
409
|
+
return new Map< GridSize, number >( [
|
|
410
|
+
[ 'small', 0 ],
|
|
411
|
+
[ 'medium', mediumBreakpoint ],
|
|
412
|
+
[ 'large', largeBreakpoint ],
|
|
413
|
+
] );
|
|
414
|
+
}, [ isInAdmin, isInSiteDashboard ] );
|
|
402
415
|
|
|
403
416
|
// TODO: this will be deprecated along side removing the wrapper component
|
|
404
417
|
const gridSize = useGridSize( {
|
|
@@ -222,6 +222,7 @@
|
|
|
222
222
|
line-height: 16px;
|
|
223
223
|
padding-bottom: 8px;
|
|
224
224
|
min-height: 50px;
|
|
225
|
+
text-wrap: balance;
|
|
225
226
|
}
|
|
226
227
|
}
|
|
227
228
|
|
|
@@ -240,8 +241,10 @@
|
|
|
240
241
|
&.is-top-buttons {
|
|
241
242
|
padding: 0 20px;
|
|
242
243
|
@include plans-grid-medium-large {
|
|
243
|
-
|
|
244
|
-
|
|
244
|
+
button {
|
|
245
|
+
margin-top: 16px;
|
|
246
|
+
margin-bottom: 16px;
|
|
247
|
+
}
|
|
245
248
|
}
|
|
246
249
|
}
|
|
247
250
|
|
|
@@ -349,6 +352,7 @@
|
|
|
349
352
|
font-weight: 400;
|
|
350
353
|
line-height: 20px;
|
|
351
354
|
overflow-wrap: break-word;
|
|
355
|
+
text-wrap: balance;
|
|
352
356
|
margin: 0;
|
|
353
357
|
flex: 1 0 0;
|
|
354
358
|
width: 100%;
|
|
@@ -441,18 +445,6 @@
|
|
|
441
445
|
@include plans-grid-medium-large {
|
|
442
446
|
padding-bottom: 0;
|
|
443
447
|
}
|
|
444
|
-
|
|
445
|
-
.plans-grid-next__billing-timeframe-vip-price {
|
|
446
|
-
@include plans-grid-medium-large {
|
|
447
|
-
font-size: $font-body-small;
|
|
448
|
-
line-height: 20px;
|
|
449
|
-
}
|
|
450
|
-
|
|
451
|
-
@include plans-grid-large {
|
|
452
|
-
font-size: $font-body-extra-small;
|
|
453
|
-
line-height: 16px;
|
|
454
|
-
}
|
|
455
|
-
}
|
|
456
448
|
}
|
|
457
449
|
|
|
458
450
|
&.popular-plan-parent-class {
|
|
@@ -501,13 +493,6 @@
|
|
|
501
493
|
font-weight: 400;
|
|
502
494
|
font-size: $font-body-extra-small;
|
|
503
495
|
padding: 0 19px 24px 20px;
|
|
504
|
-
|
|
505
|
-
.plans-grid-next__billing-timeframe-vip-price {
|
|
506
|
-
font-size: $font-body;
|
|
507
|
-
line-height: 24px;
|
|
508
|
-
font-weight: 400;
|
|
509
|
-
color: var(--studio-gray-80);
|
|
510
|
-
}
|
|
511
496
|
}
|
|
512
497
|
|
|
513
498
|
&.popular-plan-parent-class {
|