@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.
Files changed (196) hide show
  1. package/dist/cjs/__mocks__/wpcom-proxy-request.js +3 -4
  2. package/dist/cjs/__mocks__/wpcom-proxy-request.js.map +1 -1
  3. package/dist/cjs/_shared.scss +9 -4
  4. package/dist/cjs/components/comparison-grid/index.js +62 -50
  5. package/dist/cjs/components/comparison-grid/index.js.map +1 -1
  6. package/dist/cjs/components/comparison-grid/index.stories.js +1 -0
  7. package/dist/cjs/components/comparison-grid/index.stories.js.map +1 -1
  8. package/dist/cjs/components/comparison-grid/style.scss +0 -17
  9. package/dist/cjs/components/dropdown-option.js +1 -1
  10. package/dist/cjs/components/features-grid/index.js +21 -6
  11. package/dist/cjs/components/features-grid/index.js.map +1 -1
  12. package/dist/cjs/components/features-grid/index.stories.js +1 -0
  13. package/dist/cjs/components/features-grid/index.stories.js.map +1 -1
  14. package/dist/cjs/components/features-grid/style.scss +6 -21
  15. package/dist/cjs/components/item.js +1 -2
  16. package/dist/cjs/components/item.js.map +1 -1
  17. package/dist/cjs/components/plan-button/style.scss +12 -11
  18. package/dist/cjs/components/plan-type-selector/hooks/use-interval-options.js +1 -1
  19. package/dist/cjs/components/plan-type-selector/hooks/use-interval-options.js.map +1 -1
  20. package/dist/cjs/components/plan-type-selector/hooks/use-max-discount.js +1 -1
  21. package/dist/cjs/components/plan-type-selector/hooks/use-max-discount.js.map +1 -1
  22. package/dist/cjs/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.js +1 -1
  23. package/dist/cjs/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.js.map +1 -1
  24. package/dist/cjs/components/plan-type-selector/style.scss +3 -1
  25. package/dist/cjs/components/shared/billing-timeframe/index.js +13 -5
  26. package/dist/cjs/components/shared/billing-timeframe/index.js.map +1 -1
  27. package/dist/cjs/components/shared/header-price/style.scss +4 -2
  28. package/dist/cjs/components/shared/storage/hooks/use-default-storage-option.js +1 -1
  29. package/dist/cjs/components/shared/storage/hooks/use-default-storage-option.js.map +1 -1
  30. package/dist/cjs/components/shared/storage/hooks/use-purchased-storage-add-on.js +1 -1
  31. package/dist/cjs/components/shared/storage/hooks/use-purchased-storage-add-on.js.map +1 -1
  32. package/dist/cjs/components/shared/storage/index.js +3 -2
  33. package/dist/cjs/components/shared/storage/index.js.map +1 -1
  34. package/dist/cjs/components/sticky-container.js +66 -6
  35. package/dist/cjs/components/sticky-container.js.map +1 -1
  36. package/dist/cjs/hooks/data-store/is-popular-plan.js +1 -2
  37. package/dist/cjs/hooks/data-store/is-popular-plan.js.map +1 -1
  38. package/dist/cjs/hooks/data-store/use-grid-plans-for-features-grid.js +14 -11
  39. package/dist/cjs/hooks/data-store/use-grid-plans-for-features-grid.js.map +1 -1
  40. package/dist/cjs/hooks/data-store/use-plan-billing-description.js +2 -2
  41. package/dist/cjs/hooks/data-store/use-plan-billing-description.js.map +1 -1
  42. package/dist/cjs/hooks/data-store/use-plan-billing-period.js +14 -0
  43. package/dist/cjs/hooks/data-store/use-plan-billing-period.js.map +1 -0
  44. package/dist/cjs/hooks/use-grid-size.js +2 -4
  45. package/dist/cjs/hooks/use-grid-size.js.map +1 -1
  46. package/dist/cjs/hooks/use-is-large-currency.js +1 -1
  47. package/dist/cjs/hooks/use-is-large-currency.js.map +1 -1
  48. package/dist/cjs/hooks/use-manage-tooltip-toggle.js +1 -2
  49. package/dist/cjs/hooks/use-manage-tooltip-toggle.js.map +1 -1
  50. package/dist/cjs/hooks/use-plan-pricing-info-from-grid-plans.js +1 -2
  51. package/dist/cjs/hooks/use-plan-pricing-info-from-grid-plans.js.map +1 -1
  52. package/dist/cjs/index.js +3 -1
  53. package/dist/cjs/index.js.map +1 -1
  54. package/dist/cjs/lib/get-plan-pricing-info-from-grid-plans.js +1 -2
  55. package/dist/cjs/lib/get-plan-pricing-info-from-grid-plans.js.map +1 -1
  56. package/dist/cjs/lib/is-same-plan.js +1 -2
  57. package/dist/cjs/lib/is-same-plan.js.map +1 -1
  58. package/dist/cjs/lib/touch-detect/index.js +1 -2
  59. package/dist/cjs/lib/touch-detect/index.js.map +1 -1
  60. package/dist/esm/_shared.scss +9 -4
  61. package/dist/esm/components/comparison-grid/index.js +62 -50
  62. package/dist/esm/components/comparison-grid/index.js.map +1 -1
  63. package/dist/esm/components/comparison-grid/index.stories.js +1 -0
  64. package/dist/esm/components/comparison-grid/index.stories.js.map +1 -1
  65. package/dist/esm/components/comparison-grid/style.scss +0 -17
  66. package/dist/esm/components/dropdown-option.js +1 -1
  67. package/dist/esm/components/features-grid/index.js +21 -6
  68. package/dist/esm/components/features-grid/index.js.map +1 -1
  69. package/dist/esm/components/features-grid/index.stories.js +1 -0
  70. package/dist/esm/components/features-grid/index.stories.js.map +1 -1
  71. package/dist/esm/components/features-grid/style.scss +6 -21
  72. package/dist/esm/components/plan-button/style.scss +12 -11
  73. package/dist/esm/components/plan-type-selector/style.scss +3 -1
  74. package/dist/esm/components/shared/billing-timeframe/index.js +14 -6
  75. package/dist/esm/components/shared/billing-timeframe/index.js.map +1 -1
  76. package/dist/esm/components/shared/header-price/style.scss +4 -2
  77. package/dist/esm/components/sticky-container.js +66 -5
  78. package/dist/esm/components/sticky-container.js.map +1 -1
  79. package/dist/esm/hooks/data-store/use-grid-plans-for-features-grid.js +14 -11
  80. package/dist/esm/hooks/data-store/use-grid-plans-for-features-grid.js.map +1 -1
  81. package/dist/esm/hooks/data-store/use-plan-billing-description.js +1 -1
  82. package/dist/esm/hooks/data-store/use-plan-billing-period.js +12 -0
  83. package/dist/esm/hooks/data-store/use-plan-billing-period.js.map +1 -0
  84. package/dist/esm/hooks/use-grid-size.js +0 -1
  85. package/dist/esm/hooks/use-grid-size.js.map +1 -1
  86. package/dist/esm/index.js +2 -1
  87. package/dist/esm/index.js.map +1 -1
  88. package/dist/tsconfig-cjs.tsbuildinfo +1 -1
  89. package/dist/tsconfig.tsbuildinfo +1 -1
  90. package/dist/types/components/comparison-grid/index.d.ts +1 -1
  91. package/dist/types/components/comparison-grid/index.d.ts.map +1 -1
  92. package/dist/types/components/comparison-grid/index.stories.d.ts +5 -3
  93. package/dist/types/components/comparison-grid/index.stories.d.ts.map +1 -1
  94. package/dist/types/components/dropdown-option.d.ts +0 -1
  95. package/dist/types/components/dropdown-option.d.ts.map +1 -1
  96. package/dist/types/components/features-grid/billing-timeframes.d.ts.map +1 -1
  97. package/dist/types/components/features-grid/client-logo-list/client-list.d.ts +0 -1
  98. package/dist/types/components/features-grid/client-logo-list/client-list.d.ts.map +1 -1
  99. package/dist/types/components/features-grid/client-logo-list/index.d.ts.map +1 -1
  100. package/dist/types/components/features-grid/enterprise-features.d.ts.map +1 -1
  101. package/dist/types/components/features-grid/index.d.ts.map +1 -1
  102. package/dist/types/components/features-grid/index.stories.d.ts +5 -1
  103. package/dist/types/components/features-grid/index.stories.d.ts.map +1 -1
  104. package/dist/types/components/features-grid/mobile-free-domain.d.ts.map +1 -1
  105. package/dist/types/components/features-grid/plan-features-list.d.ts.map +1 -1
  106. package/dist/types/components/features-grid/plan-headers.d.ts.map +1 -1
  107. package/dist/types/components/features-grid/plan-logos.d.ts.map +1 -1
  108. package/dist/types/components/features-grid/plan-prices.d.ts.map +1 -1
  109. package/dist/types/components/features-grid/plan-tagline.d.ts.map +1 -1
  110. package/dist/types/components/features-grid/previous-features-included-title.d.ts.map +1 -1
  111. package/dist/types/components/features-grid/spotlight-plan.d.ts.map +1 -1
  112. package/dist/types/components/features-grid/table.d.ts.map +1 -1
  113. package/dist/types/components/features-grid/top-buttons.d.ts.map +1 -1
  114. package/dist/types/components/plan-button/index.d.ts +10 -10
  115. package/dist/types/components/plan-button/index.d.ts.map +1 -1
  116. package/dist/types/components/plan-div-td-container.d.ts +0 -1
  117. package/dist/types/components/plan-div-td-container.d.ts.map +1 -1
  118. package/dist/types/components/plan-logo.d.ts +0 -1
  119. package/dist/types/components/plan-logo.d.ts.map +1 -1
  120. package/dist/types/components/plan-type-selector/components/interval-type-dropdown.d.ts +0 -1
  121. package/dist/types/components/plan-type-selector/components/interval-type-dropdown.d.ts.map +1 -1
  122. package/dist/types/components/plan-type-selector/components/interval-type-selector.d.ts +0 -1
  123. package/dist/types/components/plan-type-selector/components/interval-type-selector.d.ts.map +1 -1
  124. package/dist/types/components/plan-type-selector/hooks/use-max-discounts-for-plan-terms.d.ts.map +1 -1
  125. package/dist/types/components/plans-2023-tooltip.d.ts.map +1 -1
  126. package/dist/types/components/popular-badge.d.ts +0 -1
  127. package/dist/types/components/popular-badge.d.ts.map +1 -1
  128. package/dist/types/components/shared/action-button/index.d.ts.map +1 -1
  129. package/dist/types/components/shared/billing-timeframe/index.d.ts.map +1 -1
  130. package/dist/types/components/shared/header-price/header-price-context.d.ts +0 -1
  131. package/dist/types/components/shared/header-price/header-price-context.d.ts.map +1 -1
  132. package/dist/types/components/shared/header-price/index.d.ts.map +1 -1
  133. package/dist/types/components/shared/storage/components/plan-storage.d.ts.map +1 -1
  134. package/dist/types/components/shared/storage/components/storage-dropdown.d.ts.map +1 -1
  135. package/dist/types/components/shared/storage/components/storage-feature-label.d.ts.map +1 -1
  136. package/dist/types/components/shared/storage/hooks/use-storage-string.d.ts +0 -1
  137. package/dist/types/components/shared/storage/hooks/use-storage-string.d.ts.map +1 -1
  138. package/dist/types/components/sticky-container.d.ts +22 -0
  139. package/dist/types/components/sticky-container.d.ts.map +1 -1
  140. package/dist/types/css-mixins.d.ts.map +1 -1
  141. package/dist/types/grid-context.d.ts +0 -1
  142. package/dist/types/grid-context.d.ts.map +1 -1
  143. package/dist/types/hooks/data-store/types.d.ts +1 -0
  144. package/dist/types/hooks/data-store/types.d.ts.map +1 -1
  145. package/dist/types/hooks/data-store/use-grid-plan-for-spotlight.d.ts.map +1 -1
  146. package/dist/types/hooks/data-store/use-grid-plans-for-comparison-grid.d.ts.map +1 -1
  147. package/dist/types/hooks/data-store/use-grid-plans-for-features-grid.d.ts +1 -1
  148. package/dist/types/hooks/data-store/use-grid-plans-for-features-grid.d.ts.map +1 -1
  149. package/dist/types/hooks/data-store/use-grid-plans.d.ts +1 -1
  150. package/dist/types/hooks/data-store/use-grid-plans.d.ts.map +1 -1
  151. package/dist/types/hooks/data-store/use-highlight-labels.d.ts +0 -1
  152. package/dist/types/hooks/data-store/use-highlight-labels.d.ts.map +1 -1
  153. package/dist/types/hooks/data-store/use-plan-billing-description.d.ts +0 -1
  154. package/dist/types/hooks/data-store/use-plan-billing-description.d.ts.map +1 -1
  155. package/dist/types/hooks/data-store/use-plan-billing-period.d.ts +8 -0
  156. package/dist/types/hooks/data-store/use-plan-billing-period.d.ts.map +1 -0
  157. package/dist/types/hooks/data-store/use-plans-from-types.d.ts.map +1 -1
  158. package/dist/types/hooks/use-grid-size.d.ts +3 -3
  159. package/dist/types/hooks/use-grid-size.d.ts.map +1 -1
  160. package/dist/types/hooks/use-highlight-adjacency-matrix.d.ts.map +1 -1
  161. package/dist/types/index.d.ts +2 -1
  162. package/dist/types/index.d.ts.map +1 -1
  163. package/dist/types/lib/filter-unused-features-object.d.ts.map +1 -1
  164. package/dist/types/lib/get-plan-features-object.d.ts.map +1 -1
  165. package/dist/types/types.d.ts +5 -5
  166. package/dist/types/types.d.ts.map +1 -1
  167. package/package.json +16 -15
  168. package/src/_shared.scss +9 -4
  169. package/src/components/comparison-grid/index.stories.tsx +2 -1
  170. package/src/components/comparison-grid/index.tsx +69 -55
  171. package/src/components/comparison-grid/style.scss +0 -17
  172. package/src/components/dropdown-option.tsx +1 -1
  173. package/src/components/features-grid/index.stories.tsx +1 -0
  174. package/src/components/features-grid/index.tsx +22 -9
  175. package/src/components/features-grid/style.scss +6 -21
  176. package/src/components/plan-button/style.scss +12 -11
  177. package/src/components/plan-type-selector/style.scss +3 -1
  178. package/src/components/shared/billing-timeframe/index.tsx +15 -7
  179. package/src/components/shared/header-price/style.scss +4 -2
  180. package/src/components/sticky-container.tsx +74 -3
  181. package/src/components/test/billing-timeframe.tsx +2 -2
  182. package/src/hooks/data-store/types.ts +1 -0
  183. package/src/hooks/data-store/use-grid-plans-for-features-grid.ts +14 -10
  184. package/src/hooks/data-store/use-plan-billing-description.tsx +1 -1
  185. package/src/hooks/data-store/use-plan-billing-period.tsx +28 -0
  186. package/src/hooks/use-grid-size.ts +3 -3
  187. package/src/index.tsx +2 -0
  188. package/src/types.ts +5 -4
  189. package/dist/cjs/lib/sort-plan-properties.js +0 -39
  190. package/dist/cjs/lib/sort-plan-properties.js.map +0 -1
  191. package/dist/esm/lib/sort-plan-properties.js +0 -35
  192. package/dist/esm/lib/sort-plan-properties.js.map +0 -1
  193. package/dist/types/lib/sort-plan-properties.d.ts +0 -3
  194. package/dist/types/lib/sort-plan-properties.d.ts.map +0 -1
  195. package/src/lib/sort-plan-properties.ts +0 -46
  196. package/src/lib/test/sort-plan-properties.ts +0 -104
@@ -1,4 +1,4 @@
1
- /// <reference types="react" />
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<string, number>;
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): string | null;
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":";AAGA,UAAU,KAAK;IACd,YAAY,EAAE,KAAK,CAAC,gBAAgB,CAAE,cAAc,GAAG,IAAI,CAAE,CAAC;IAC9D;;;;;OAKG;IACH,oBAAoB,EAAE,GAAG,CAAE,MAAM,EAAE,MAAM,CAAE,CAAC;CAC5C;AAED;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EAAE,YAAY,EAAE,oBAAoB,EAAE,EAAE,KAAK,iBA2BjF"}
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,0BAA4B,KAAK,6BA6BjE,CAAC;AAEF,eAAe,2BAA2B,CAAC"}
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"}
@@ -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,qBACb,QAAQ,EAAE,YAClB,aAAa,EAAE,KACvB,aAAa,EAmBf,CAAC;AAEF,eAAe,0BAA0B,CAAC"}
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,iBAAmB,WAAW,iBAAiB,MAAO,MAAM,CAAE,2DAMxF,CAAC;AAEF,eAAe,qBAAqB,CAAC"}
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"}
@@ -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?: string | null;
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?: string;
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: string;
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":"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"}
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.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.0",
40
- "@automattic/data-stores": "^3.1.0",
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.16.0",
45
- "@wordpress/element": "^6.16.0",
46
- "@wordpress/icons": "^10.16.0",
47
- "@wordpress/primitives": "^4.16.0",
48
- "@wordpress/url": "^4.16.0",
49
- "@wordpress/warning": "^3.16.0",
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.16.0",
57
- "postcss": "^8.5.1",
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": "^3.1.3",
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.0",
74
+ "@testing-library/user-event": "^14.6.1",
74
75
  "msw": "^2.2.14",
75
- "msw-storybook-addon": "^2.0.2",
76
+ "msw-storybook-addon": "^2.0.4",
76
77
  "resize-observer-polyfill": "^1.5.1",
77
- "typescript": "^5.3.3",
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: 5px;
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-50);
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: 4px 0;
85
+ padding: $storage-feature-label-y-padding 0;
82
86
  font-weight: 400;
83
- line-height: 20px;
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 displayedGridPlans = useMemo( () => {
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
- setVisiblePlans( ( prev ) => {
944
- let visibleLength = displayedGridPlans.length;
945
- switch ( gridSize ) {
946
- case 'large':
947
- visibleLength = 4;
948
- break;
949
- case 'medium':
950
- visibleLength = 3;
951
- break;
952
- case 'smedium':
953
- case 'small':
954
- visibleLength = 2;
955
- break;
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
- return gridPlan?.planSlug ?? planSlug;
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
- // nothing to update
978
- return prev;
979
- } );
980
- }, [ gridSize, displayedGridPlans, gridPlansIndex ] );
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 = displayedGridPlans.find(
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, displayedGridPlans ]
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={ 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={ 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: GRID_BREAKPOINTS,
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 {
@@ -16,7 +16,7 @@ const Container = styled.div`
16
16
  }
17
17
 
18
18
  span {
19
- color: var( --studio-green-50 );
19
+ color: var( --studio-green-60 );
20
20
  }
21
21
 
22
22
  .title {
@@ -68,6 +68,7 @@ const defaultProps = {
68
68
  hideUnavailableFeatures: false,
69
69
  isCustomDomainAllowedOnFreePlan: false,
70
70
  isInAdmin: false,
71
+ isInSiteDashboard: false,
71
72
  isInSignup: true,
72
73
  onStorageAddOnClick: () => {},
73
74
  planActionOverrides: undefined,
@@ -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
- new Map( [
396
- [ 'small', 0 ],
397
- [ 'medium', 740 ],
398
- [ 'large', isInAdmin ? 1180 : 1320 ], // 1320 to fit Enterpreneur plan, 1180 to work in admin
399
- ] ),
400
- [ isInAdmin ]
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
- padding-top: 16px;
244
- padding-bottom: 16px;
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 {