From 9d39168985b631a0338fc40623f9ffdf58ec00c4 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Thu, 6 Apr 2023 14:47:07 +0300 Subject: [PATCH 1/5] Plans Grid: Remove unused components --- packages/plans-grid/src/badge/index.tsx | 18 - packages/plans-grid/src/badge/style.scss | 12 - packages/plans-grid/src/index.ts | 2 - .../src/plans-accordion-item/index.tsx | 186 ---------- .../plans-item-placeholder.tsx | 62 ---- .../src/plans-accordion-item/style.scss | 334 ------------------ .../plans-grid/src/plans-accordion/index.tsx | 191 ---------- .../plans-grid/src/plans-accordion/style.scss | 51 --- .../plans-grid/src/plans-details/index.tsx | 218 ------------ .../plans-grid/src/plans-details/style.scss | 148 -------- .../plans-feature-list-placeholder.tsx | 36 -- .../src/plans-feature-list/style.scss | 6 - packages/plans-grid/src/plans-grid/index.tsx | 146 -------- packages/plans-grid/src/plans-table/index.tsx | 90 ----- 14 files changed, 1500 deletions(-) delete mode 100644 packages/plans-grid/src/badge/index.tsx delete mode 100644 packages/plans-grid/src/badge/style.scss delete mode 100644 packages/plans-grid/src/plans-accordion-item/index.tsx delete mode 100644 packages/plans-grid/src/plans-accordion-item/plans-item-placeholder.tsx delete mode 100644 packages/plans-grid/src/plans-accordion-item/style.scss delete mode 100644 packages/plans-grid/src/plans-accordion/index.tsx delete mode 100644 packages/plans-grid/src/plans-accordion/style.scss delete mode 100644 packages/plans-grid/src/plans-details/index.tsx delete mode 100644 packages/plans-grid/src/plans-details/style.scss delete mode 100644 packages/plans-grid/src/plans-feature-list/plans-feature-list-placeholder.tsx delete mode 100644 packages/plans-grid/src/plans-grid/index.tsx delete mode 100644 packages/plans-grid/src/plans-table/index.tsx diff --git a/packages/plans-grid/src/badge/index.tsx b/packages/plans-grid/src/badge/index.tsx deleted file mode 100644 index 0a421a3b5b0f1..0000000000000 --- a/packages/plans-grid/src/badge/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import classNames from 'classnames'; -import type { PropsWithChildren } from 'react'; - -import './style.scss'; - -// @TODO: move to '@automattic/components' and reuse in Gutenboarding - -type Props = PropsWithChildren< { - className?: string; -} >; - -const Badge = ( { children, className, ...props }: Props ) => ( - - { children } - -); - -export default Badge; diff --git a/packages/plans-grid/src/badge/style.scss b/packages/plans-grid/src/badge/style.scss deleted file mode 100644 index 7134cc6c0c9a8..0000000000000 --- a/packages/plans-grid/src/badge/style.scss +++ /dev/null @@ -1,12 +0,0 @@ -.badge { - display: inline-block; - background: var(--studio-blue-40); - border-radius: 2px; - padding: 4px 8px; - color: var(--studio-white); - margin-left: 8px; - - > * { - vertical-align: middle; - } -} diff --git a/packages/plans-grid/src/index.ts b/packages/plans-grid/src/index.ts index 2a820a684dc3b..e311f0f5b8b6a 100644 --- a/packages/plans-grid/src/index.ts +++ b/packages/plans-grid/src/index.ts @@ -1,4 +1,2 @@ export { default as PlansIntervalToggle } from './plans-interval-toggle'; export type { PlansIntervalToggleProps } from './plans-interval-toggle'; -export { default } from './plans-grid'; -export type { Props } from './plans-grid'; diff --git a/packages/plans-grid/src/plans-accordion-item/index.tsx b/packages/plans-grid/src/plans-accordion-item/index.tsx deleted file mode 100644 index 7bb24ce79de13..0000000000000 --- a/packages/plans-grid/src/plans-accordion-item/index.tsx +++ /dev/null @@ -1,186 +0,0 @@ -import { useLocale } from '@automattic/i18n-utils'; -import { NextButton } from '@automattic/onboarding'; -import { useSelect } from '@wordpress/data'; -import { sprintf } from '@wordpress/i18n'; -import { useI18n } from '@wordpress/react-i18n'; -import classNames from 'classnames'; -import * as React from 'react'; -import PlansFeatureList from '../plans-feature-list'; -import { PLANS_STORE } from '../stores'; -import type { DomainSuggestions, Plans, PlansSelect } from '@automattic/data-stores'; - -import './style.scss'; - -const ChevronDown = ( - - - -); - -const SPACE_BAR_KEYCODE = 32; - -export interface Props { - slug: Plans.PlanSlug; - name: string; - description: string; - features: Plans.PlanSimplifiedFeature[]; - billingPeriod: Plans.PlanBillingPeriod; - domain?: DomainSuggestions.DomainSuggestion; - badge?: string; - isFree?: boolean; - isOpen?: boolean; - isPrimary?: boolean; - isSelected?: boolean; - onSelect: ( productId: number | undefined ) => void; - onPickDomainClick?: () => void; - onToggle?: ( slug: Plans.PlanSlug, isOpen: boolean ) => void; - disabledLabel?: string; -} - -const PlanAccordionItem: React.FunctionComponent< Props > = ( { - slug, - name, - description, - features, - billingPeriod, - domain, - badge, - isFree = false, - isOpen = false, - isPrimary = false, - onSelect, - onPickDomainClick, - onToggle, - disabledLabel, -} ) => { - const { __, hasTranslation } = useI18n(); - const locale = useLocale(); - - const planProduct = useSelect( - ( select ) => ( select( PLANS_STORE ) as PlansSelect ).getPlanProduct( slug, billingPeriod ), - [ slug, billingPeriod ] - ); - - // show a nbsp in price while loading to prevent a jump in the UI - const nbsp = '\u00A0\u00A0'; - - const handleToggle = () => { - ! disabledLabel && onToggle?.( slug, ! isOpen ); - }; - - const fallbackPlanItemPriceLabelAnnually = __( 'billed annually', __i18n_text_domain__ ); - // translators: %s is the cost per year (e.g "billed as 96$ annually") - const newPlanItemPriceLabelAnnually = __( 'billed as %s annually', __i18n_text_domain__ ); - const planItemPriceLabelAnnually = - locale === 'en' || hasTranslation?.( 'billed as %s annually' ) - ? sprintf( newPlanItemPriceLabelAnnually, planProduct?.annualPrice ) - : fallbackPlanItemPriceLabelAnnually; - - const fallbackPlanItemPriceLabelMonthly = __( 'per month, billed monthly', __i18n_text_domain__ ); - const newPlanItemPriceLabelMonthly = __( 'billed monthly', __i18n_text_domain__ ); - const planItemPriceLabelMonthly = - locale === 'en' || hasTranslation?.( 'billed monthly' ) - ? newPlanItemPriceLabelMonthly - : fallbackPlanItemPriceLabelMonthly; - - return ( -
- { badge && ( -
- { badge } -
- ) } -
-
-
e.keyCode === SPACE_BAR_KEYCODE && handleToggle() } - className="plans-accordion-item__header" - > -
-
{ name }
-
{ description }
-
-
-
- { planProduct?.price || nbsp } - { planProduct?.price && ( - - { - // translators: /mo is short for "per-month" - __( '/mo', __i18n_text_domain__ ) - } - - ) } -
-
- { isFree && __( 'free forever', __i18n_text_domain__ ) } - - { ! isFree && - ( billingPeriod === 'ANNUALLY' - ? planItemPriceLabelAnnually - : planItemPriceLabelMonthly ) } -
- { ! isFree && ( -
- { sprintf( - // Translators: will be like "Save up to 30% by paying annually". Please keep "%%" for the percent sign - __( `Save %(discountRate)s%% by paying annually`, __i18n_text_domain__ ), - { discountRate: planProduct?.annualDiscount ?? 0 } - ) } -
- ) } -
-
{ disabledLabel }
- { ! isOpen && ( -
{ ChevronDown }
- ) } -
- - -
-
-
- ); -}; - -export default PlanAccordionItem; diff --git a/packages/plans-grid/src/plans-accordion-item/plans-item-placeholder.tsx b/packages/plans-grid/src/plans-accordion-item/plans-item-placeholder.tsx deleted file mode 100644 index 859a8e7379b5c..0000000000000 --- a/packages/plans-grid/src/plans-accordion-item/plans-item-placeholder.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { NextButton } from '@automattic/onboarding'; -import classNames from 'classnames'; -import * as React from 'react'; -import PlansFeatureListPlaceholder from '../plans-feature-list/plans-feature-list-placeholder'; - -import './style.scss'; - -const ChevronDown = ( - - - -); -export interface Props { - isOpen?: boolean; - isPrimary?: boolean; -} - -const PlanItemPlaceholder: React.FunctionComponent< Props > = ( { isOpen, isPrimary } ) => { - return ( -
-
-
-
-
-
- -
-
- -
-
-
-
- -
-
- -
-
-
- { ! isOpen && ( -
{ ChevronDown }
- ) } -
- - -
-
-
- ); -}; - -export default PlanItemPlaceholder; diff --git a/packages/plans-grid/src/plans-accordion-item/style.scss b/packages/plans-grid/src/plans-accordion-item/style.scss deleted file mode 100644 index 25fc7fa06af9f..0000000000000 --- a/packages/plans-grid/src/plans-accordion-item/style.scss +++ /dev/null @@ -1,334 +0,0 @@ -@import "@wordpress/base-styles/breakpoints"; -@import "@automattic/onboarding/styles/mixins"; -@import "@automattic/typography/styles/variables"; -@import "../variables.scss"; - -$plans-accordion-item-border-radius: 5px; /* stylelint-disable-line scales/radii */ -$plans-accordion-item-border-color: var(--studio-gray-5); - -.plans-accordion-item { - display: block; - flex-grow: 1; - flex-basis: 0; - flex-direction: column; - - &.is-disabled { - background-color: var(--studio-gray-5); - } -} - -.plans-accordion-item__viewport { - width: 100%; - height: 100%; - padding: 20px; - border: 1px solid $plans-accordion-item-border-color; - - .plans-accordion-item + .plans-accordion-item & { - border-top: 0; - } - - @include break-small { - padding: 32px; - } - - .plans-accordion-item:first-of-type & { - border-top-left-radius: $plans-accordion-item-border-radius; - border-top-right-radius: $plans-accordion-item-border-radius; - } - - .plans-accordion-item:last-of-type & { - border-bottom-left-radius: $plans-accordion-item-border-radius; - border-bottom-right-radius: $plans-accordion-item-border-radius; - } - - // Badge will handle border-top in mobile. - .plans-accordion-item.has-badge & { - border-top-width: 0; - border-top-left-radius: 0; - border-top-right-radius: 0; - border-bottom-left-radius: $plans-accordion-item-border-radius; - border-bottom-right-radius: $plans-accordion-item-border-radius; - - @include break-small { - border-top-width: 1px; - border-top-left-radius: $plans-accordion-item-border-radius; - border-top-right-radius: $plans-accordion-item-border-radius; - } - } - - .plans-accordion-item:not(.is-open) & { - // Because .plans-accordion-item__header acts as a button - // to expand plan item, padding is applied there. - padding: 0; - } -} - -.plans-accordion-item__name { - display: inline-block; - font-size: $font-body; - line-height: 1.2; - - @include break-small { - font-size: $font-title-medium; - } - - .plans-accordion-item:not(.is-open) & { - font-size: $font-body-small; - - @include break-small { - font-size: $font-body-small; - } - } - - .plans-accordion-item.is-primary & { - font-size: $font-title-small; - - @include break-small { - font-size: $font-title-medium; - } - } -} - -.plans-accordion-item__description { - font-size: $font-body-small; - color: var(--studio-gray-50); - margin-top: 4px; - display: none; - - .plans-accordion-item:not(.is-open) & { - display: none; - } - - @include break-small { - display: block; - } -} - -.plans-accordion-item__domain-name { - font-size: $font-body-small; -} - -ul.plans-accordion-item__feature-item-group { - margin: 0; - column-count: 1; - - @include break-small { - column-count: 2; - } - - @include break-large { - column-count: 3; - } -} - -.plans-accordion-item__badge { - border-top-left-radius: $plans-accordion-item-border-radius; - border-top-right-radius: $plans-accordion-item-border-radius; - margin-bottom: -1px; - - > span { - display: block; - height: 24px; - line-height: 24px; - padding: 0 14px; - background: var(--studio-black); - color: var(--color-text-inverted); - font-size: $font-body-extra-small; - font-weight: 600; - letter-spacing: 0.5px; - text-align: center; - text-transform: uppercase; - } - - @include break-small { - position: relative; - top: -12px; - height: 0; - overflow: visible; - text-align: center; - border-radius: 0; - - > span { - display: inline-block; - border-radius: 2px; - } - } -} - -.plans-accordion-item__price-amount { - font-size: $font-title-medium; - - @include break-small { - text-align: right; - font-size: $font-title-large; - } - - &.is-loading { - max-width: 60px; - @include break-small { - max-width: none; - } - @include onboarding-placeholder(); - } - - > span { - display: none; - font-size: $font-body; - line-height: 1.2; - color: var(--studio-gray-40); - position: relative; - top: -1px; - margin-left: 1px; - - @include break-small { - display: inline-block; - } - } - - .plans-accordion-item:not(.is-open) & { - font-size: $font-body-small; - line-height: 1.2; - - > span { - display: none; - } - } -} - -.plans-accordion-item__header { - display: block; - width: 100%; - cursor: pointer; - - .plans-accordion-item:not(.is-open) & { - display: flex; - align-items: baseline; - padding: 16px 12px; - - @include break-small { - padding: 16px 24px; - } - } - - .plans-accordion-item.is-primary & { - cursor: default; - } - - @include break-small { - // Plan name & price side by side. - display: flex; - } -} - -.plans-accordion-item__price { - margin-top: 12px; - - .plans-accordion-item:not(.is-open) & { - margin-top: 0; - margin-left: 8px; - color: var(--studio-gray-40); - } - - @include break-small { - margin-top: 0; - margin-left: auto; - } -} - -.plans-accordion-item__disabled-label { - margin-left: 8px; - color: var(--studio-gray-40); -} - -.plans-accordion-item__price-note { - display: block; - font-size: $font-body-extra-small; - line-height: 1.5; - color: var(--studio-gray-40); - margin-bottom: 8px; - - .plans-accordion-item:not(.is-open) & { - display: none; - } - - @include break-small { - margin-bottom: 12px; - text-align: right; - } -} - -.plans-accordion-item__price-discount { - display: block; - font-size: $font-body-extra-small; - font-weight: 600; - line-height: 1.3; - letter-spacing: 0.2px; - text-transform: uppercase; - color: var(--studio-green-60); - - &--disabled { - color: var(--studio-gray-40); - text-decoration: line-through; - } - - .plans-accordion-item:not(.is-open) & { - display: none; - } - - @include break-small { - text-align: right; - margin-left: auto; - max-width: 170px; - } - - @include break-large { - max-width: none; - } -} - -.plans-accordion-item__actions { - margin-top: 16px; - - @include break-small { - margin-top: 24px; - } - - &--paid-plan-margin { - margin-top: 20px; - - // On small screen there's still a risk that the - // .plans-accordion-item__price-discount item overlaps with the action button - @include break-medium { - margin-top: -10px; - } - } -} - -.plans-accordion-item__dropdown-chevron { - flex: 1; - text-align: right; - position: relative; - top: -2px; - - @include break-small { - right: -8px; - } -} - -.plans-accordion-item.is-open .plans-accordion-item__dropdown-chevron { - display: none; -} - -.plans-accordion-item__placeholder { - @include onboarding-placeholder(); - display: inline-block; - width: 64px; - - &--narrow { - width: 32px; - } - - &--wide { - width: 96px; - } -} diff --git a/packages/plans-grid/src/plans-accordion/index.tsx b/packages/plans-grid/src/plans-accordion/index.tsx deleted file mode 100644 index 8ea803dd2f9f7..0000000000000 --- a/packages/plans-grid/src/plans-accordion/index.tsx +++ /dev/null @@ -1,191 +0,0 @@ -import { WPCOMFeatures } from '@automattic/data-stores'; -import { Button, SVG, Path } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; -import { Icon } from '@wordpress/icons'; -import { useI18n } from '@wordpress/react-i18n'; -import { useState } from 'react'; -import * as React from 'react'; -import { useSupportedPlans } from '../hooks'; -import PlanItem from '../plans-accordion-item'; -import PlanItemPlaceholder from '../plans-accordion-item/plans-item-placeholder'; -import { PLANS_STORE } from '../stores'; -import type { DisabledPlansMap } from '../plans-table/types'; -import type { DomainSuggestions, Plans, PlansSelect } from '@automattic/data-stores'; - -import './style.scss'; - -type FeatureId = WPCOMFeatures.FeatureId; - -const tip = ( - - - -); - -export interface Props { - selectedFeatures?: FeatureId[]; - selectedPlanProductId: number | undefined; - onPlanSelect: ( planProductId: number | undefined ) => void; - onPickDomainClick?: () => void; - currentDomain?: DomainSuggestions.DomainSuggestion; - disabledPlans?: DisabledPlansMap; - locale: string; - billingPeriod: Plans.PlanBillingPeriod; -} - -const PlansAccordion: React.FunctionComponent< Props > = ( { - selectedFeatures = [], - selectedPlanProductId, - onPlanSelect, - onPickDomainClick, - currentDomain, - disabledPlans, - locale, - billingPeriod, -} ) => { - const { __ } = useI18n(); - - const { supportedPlans } = useSupportedPlans( locale, billingPeriod ); - - const isLoading = ! supportedPlans?.length; - const placeholderPlans = [ 1, 2, 3, 4 ]; - - // Primary plan - const { popularPlan, getPlanProduct } = useSelect( - ( select ) => { - const plansStore: PlansSelect = select( PLANS_STORE ); - return { - popularPlan: plansStore.getDefaultPaidPlan( locale ), - getPlanProduct: plansStore.getPlanProduct, - }; - }, - [ locale ] - ); - const recommendedPlanSlug = useSelect( - ( select ) => select( WPCOMFeatures.store ).getRecommendedPlanSlug( selectedFeatures ), - [ selectedFeatures ] - ); - - const recommendedPlan = useSelect( - ( select ) => - ( select( PLANS_STORE ) as PlansSelect ).getPlanByPeriodAgnosticSlug( - recommendedPlanSlug, - locale - ), - [ recommendedPlanSlug, locale ] - ); - - const primaryPlan = recommendedPlan || popularPlan; - - const badgeTextRecommended = __( 'Recommended for you', __i18n_text_domain__ ); - const badgeTextPopular = __( 'Popular', __i18n_text_domain__ ); - - // Other plans - const otherPlans = supportedPlans.filter( - ( plan ) => plan.periodAgnosticSlug !== primaryPlan?.periodAgnosticSlug - ); - - // Handle toggling of all plan items - const defaultOpenPlans = [ primaryPlan?.periodAgnosticSlug ]; - const [ openPlans, setOpenPlans ] = useState( defaultOpenPlans ); - const allPlansOpened = isLoading ? false : openPlans.length >= supportedPlans.length; - - const handleToggle = ( slug: Plans.PlanSlug, isOpen: boolean ) => { - setOpenPlans( isOpen ? [ ...openPlans, slug ] : openPlans.filter( ( s ) => s !== slug ) ); - }; - - const handleToggleAll = () => { - setOpenPlans( - allPlansOpened ? defaultOpenPlans : supportedPlans.map( ( plan ) => plan.periodAgnosticSlug ) - ); - }; - - const plansToggleExpanded = __( 'Collapse all plans', __i18n_text_domain__ ); - const plansToggleCollapsed = __( 'Show all plans', __i18n_text_domain__ ); - - return ( -
-
- { isLoading ? ( - - ) : ( - primaryPlan && ( - <> - { recommendedPlan && ( -
- - - { - // translators: tooltip explaining why a particular plan has been recommended - __( 'Based on the features you selected.', __i18n_text_domain__ ) - } - -
- ) } - - - ) - ) } -
- -
- -
- -
- { isLoading - ? placeholderPlans.map( ( placeholder ) => ( - - ) ) - : otherPlans.map( ( plan ) => ( - -1 && - ! disabledPlans?.[ plan.periodAgnosticSlug ] - } - isSelected={ - !! selectedPlanProductId && - selectedPlanProductId === - getPlanProduct( plan.periodAgnosticSlug, billingPeriod )?.productId - } - onSelect={ onPlanSelect } - onPickDomainClick={ onPickDomainClick } - onToggle={ handleToggle } - disabledLabel={ disabledPlans?.[ plan.periodAgnosticSlug ] } - > - ) ) } -
-
- ); -}; - -export default PlansAccordion; diff --git a/packages/plans-grid/src/plans-accordion/style.scss b/packages/plans-grid/src/plans-accordion/style.scss deleted file mode 100644 index 6bca1e162c963..0000000000000 --- a/packages/plans-grid/src/plans-accordion/style.scss +++ /dev/null @@ -1,51 +0,0 @@ -@import "@wordpress/base-styles/breakpoints"; -@import "@automattic/onboarding/styles/mixins"; -@import "@automattic/typography/styles/variables"; -@import "../variables.scss"; - -.plans-accordion__actions { - text-align: center; -} - -.plans-accordion__plan-item-group { - width: 100%; - display: flex; - flex-direction: column; -} - -.plans-accordion__toggle-all-button.components-button.is-link { - margin: 22px auto; - color: $gray-700; - - @include break-medium { - margin: 32px auto; - } -} - -.plans-accordion__recommend-hint { - color: var(--studio-gray-40); - font-size: $font-body-small; - text-align: right; - margin-bottom: 16px; - - svg { - fill: var(--studio-yellow-30); - margin-right: $grid-unit-10; - position: relative; - top: 2px; - } -} - -.plans-accordion__placeholder { - @include onboarding-placeholder(); - display: inline-block; - width: 64px; - - &--narrow { - width: 32px; - } - - &--wide { - width: 96px; - } -} diff --git a/packages/plans-grid/src/plans-details/index.tsx b/packages/plans-grid/src/plans-details/index.tsx deleted file mode 100644 index 655f7c5cdf400..0000000000000 --- a/packages/plans-grid/src/plans-details/index.tsx +++ /dev/null @@ -1,218 +0,0 @@ -import { Button } from '@wordpress/components'; -import { useSelect } from '@wordpress/data'; -import { Icon, check, close } from '@wordpress/icons'; -import { useI18n } from '@wordpress/react-i18n'; -import classnames from 'classnames'; -import * as React from 'react'; -import { PLANS_STORE } from '../stores'; -import type { Plans, PlansSelect } from '@automattic/data-stores'; - -import './style.scss'; - -const TickIcon = ; -const CrossIcon = ; - -type Props = { - onSelect: ( planProductId: number | undefined ) => void; - billingPeriod: Plans.PlanBillingPeriod; - locale: string; -}; - -const PlansDetails: React.FunctionComponent< Props > = ( { onSelect, locale, billingPeriod } ) => { - const { __, hasTranslation } = useI18n(); - - const { supportedPlans, planProducts, features, featuresByType } = useSelect( - ( select ) => { - const { getPlanProduct, getFeatures, getFeaturesByType, getSupportedPlans }: PlansSelect = - select( PLANS_STORE ); - const supportedPlans = getSupportedPlans( locale ); - const planProducts = supportedPlans.map( ( plan ) => - getPlanProduct( plan.periodAgnosticSlug, billingPeriod ) - ); - - return { - supportedPlans, - planProducts, - features: getFeatures( locale ), - featuresByType: getFeaturesByType( locale ), - }; - }, - [ locale, billingPeriod ] - ); - - const isLoading = ! supportedPlans?.length; - const placeholderPlans = [ 1, 2, 3, 4, 5 ]; - - // @TODO: clean this up when translations are done and we don't need fallbackAnnualBillingLabel - const newAnnualBillingLabel = __( 'Monthly price (billed yearly)', __i18n_text_domain__ ); - const fallbackAnnualBillingLabel = __( - 'Monthly subscription (billed yearly)', - __i18n_text_domain__ - ); - const annualBillingLabel = - locale === 'en' || hasTranslation?.( 'Monthly price (billed yearly)' ) - ? newAnnualBillingLabel - : fallbackAnnualBillingLabel; - - const monthlyBillingLabel = __( 'Monthly subscription', __i18n_text_domain__ ); - - const annualNudgeTextAnnually = __( 'Included with annual plans', __i18n_text_domain__ ); - const annualNudgeTextMonthly = __( 'Only included with annual plans', __i18n_text_domain__ ); - - return ( -
- - - - - { isLoading - ? placeholderPlans.map( ( placeholder ) => ( - - ) ) - : supportedPlans.map( ( plan ) => ( - - ) ) } - - - - { isLoading ? ( - - { placeholderPlans.map( ( placeholder, i ) => ( - - - { placeholderPlans.map( ( j ) => ( - - ) ) } - - ) ) } - - ) : ( - featuresByType.map( ( featureType ) => ( - - { featureType.name && ( - - - - ) } - { featureType.features?.map( ( feature: string, i ) => ( - - - { supportedPlans.map( ( plan, j ) => - feature === 'storage' ? ( - - ) : ( - - ) - ) } - - ) ) } - - ) ) - ) } - - - - - - - - { isLoading - ? placeholderPlans.map( ( placeholder ) => ( - - ) ) - : supportedPlans.map( ( plan, i ) => ( - - ) ) } - - - - - { isLoading - ? placeholderPlans.map( ( placeholder ) => ( - - ) ) - : supportedPlans.map( ( plan, i ) => ( - - ) ) } - - -
{ __( 'Feature', __i18n_text_domain__ ) } - - { plan.title }
- -
{ featureType.name }
- { features[ feature ].requiresAnnuallyBilledPlan && ( - - { __( 'Included with annual plans', __i18n_text_domain__ ) } - - ) } - { features[ feature ].name } - { plan.storage } - { plan.featuresSlugs?.[ feature ] ? ( - <> - { features[ feature ].requiresAnnuallyBilledPlan && - billingPeriod !== 'ANNUALLY' ? ( - <> - { /* eslint-disable-next-line wpcalypso/jsx-classname-namespace */ } - - { __( 'Unavailable', __i18n_text_domain__ ) } - - { CrossIcon } - - ) : ( - <> - { /* eslint-disable-next-line wpcalypso/jsx-classname-namespace */ } - - { __( 'Available', __i18n_text_domain__ ) } - - { TickIcon } - - ) } - - ) : ( - <> - { /* eslint-disable-next-line wpcalypso/jsx-classname-namespace */ } - - { __( 'Unavailable', __i18n_text_domain__ ) } - - - ) } -
{ __( 'Sign up', __i18n_text_domain__ ) }
{ billingPeriod === 'ANNUALLY' ? annualBillingLabel : monthlyBillingLabel } - - { planProducts[ i ]?.price }
- { ' ' } - - -
-
- ); -}; - -export default PlansDetails; diff --git a/packages/plans-grid/src/plans-details/style.scss b/packages/plans-grid/src/plans-details/style.scss deleted file mode 100644 index 1d45a7ad35d6d..0000000000000 --- a/packages/plans-grid/src/plans-details/style.scss +++ /dev/null @@ -1,148 +0,0 @@ -@import "@wordpress/base-styles/breakpoints"; -@import "@wordpress/base-styles/mixins"; -@import "@automattic/onboarding/styles/mixins"; -@import "@automattic/typography/styles/variables"; -@import "../variables"; - -// Used to "counter" the negative margin set on the container, while allowing the -// table to scroll horizontally in case it doesn't fit in the viewport. -@mixin plans-grid-edge2edge-padding { - padding-left: $onboarding-block-margin-mobile; - padding-right: $onboarding-block-margin-mobile; - - @include break-small { - padding-left: $onboarding-block-margin-small; - padding-right: $onboarding-block-margin-small; - } - - @include break-medium { - padding-left: $onboarding-block-margin-medium; - padding-right: $onboarding-block-margin-medium; - } - - @media ( min-width: $plans-grid-max-page-width ) { - padding-left: 0; - padding-right: 0; - } -} - -.plans-grid__details-heading { - margin-bottom: 20px; -} - -.plans-details__table { - @include plans-grid-edge2edge-padding; - - width: 100%; - border-spacing: 0; - - th, - td { - padding: 13px 24px; - - &:first-child { - padding-left: 0; - width: 20%; - - @include break-mobile { - width: 40%; - } - } - - &:not(:first-child) { - white-space: nowrap; - } - } - - // TODO: Deal with a11y later. - .hidden { - display: none; - } -} - -.plans-details__header-row { - th { - font-weight: 600; - font-size: $font-body-small; - line-height: 20px; - text-transform: uppercase; - color: var(--studio-gray-20); - padding-top: 5px; - padding-bottom: 5px; - border-bottom: 1px solid #eaeaeb; - text-align: left; - } - - thead & { - th:not(:first-child) { - text-align: center; - } - } -} - -.plans-details__feature-row { - th, - td { - font-size: $font-body-small; - font-weight: normal; - line-height: 17px; - letter-spacing: 0.2px; - border-bottom: 1px solid #eaeaeb; - vertical-align: middle; - } - - th { - text-align: left; - } - - td { - text-align: center; - } -} - -.plans-details__placeholder { - @include onboarding-placeholder(); - display: inline-block; - width: 64px; - - &--narrow { - width: 32px; - } - - &--wide { - width: 96px; - } -} - -.plans-details__select-button.components-button { - height: 36px; - padding: 0 18px; - - @include break-small { - height: 40px; - padding: 0 24px; - } -} - -.plans-details__feature-annual-nudge { - display: block; - text-transform: uppercase; - /* stylelint-disable-next-line declaration-property-unit-allowed-list */ - font-size: 10px; - font-weight: 700; - letter-spacing: 0.02em; - line-height: 1; - margin-bottom: 6px; - - .plans-details__feature-row--enabled & { - color: var(--studio-green-60); - } - - .plans-details__feature-row--disabled & { - color: var(--studio-orange-40); - } - - .plans-details__feature-row--disabled & + span { - text-decoration: line-through; - } -} diff --git a/packages/plans-grid/src/plans-feature-list/plans-feature-list-placeholder.tsx b/packages/plans-grid/src/plans-feature-list/plans-feature-list-placeholder.tsx deleted file mode 100644 index 73d7b3cf1e867..0000000000000 --- a/packages/plans-grid/src/plans-feature-list/plans-feature-list-placeholder.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import classnames from 'classnames'; -import * as React from 'react'; - -import '../types-patch'; - -import './style.scss'; - -export interface Props { - isOpen?: boolean; - multiColumn?: boolean; -} - -const PlansFeatureListPlaceholder: React.FunctionComponent< Props > = ( { - isOpen = false, - multiColumn = false, -} ) => { - const features = Array.from( Array( 10 ).keys() ); - - return ( - - ); -}; - -export default PlansFeatureListPlaceholder; diff --git a/packages/plans-grid/src/plans-feature-list/style.scss b/packages/plans-grid/src/plans-feature-list/style.scss index 743cf99316c6c..24db6a1735ce1 100644 --- a/packages/plans-grid/src/plans-feature-list/style.scss +++ b/packages/plans-grid/src/plans-feature-list/style.scss @@ -208,9 +208,3 @@ ul.plans-feature-list__item-group { .plans-feature-list__item-url { word-break: break-all; } - -.plans-feature-list__placeholder { - @include onboarding-placeholder(); - display: inline-block; - width: 200px; -} diff --git a/packages/plans-grid/src/plans-grid/index.tsx b/packages/plans-grid/src/plans-grid/index.tsx deleted file mode 100644 index 32ef538bb7f85..0000000000000 --- a/packages/plans-grid/src/plans-grid/index.tsx +++ /dev/null @@ -1,146 +0,0 @@ -import { Title } from '@automattic/onboarding'; -import { useSelect } from '@wordpress/data'; -import { useI18n } from '@wordpress/react-i18n'; -import debugFactory from 'debug'; -import * as React from 'react'; -import { useSupportedPlans } from '../hooks'; -import PlansAccordion from '../plans-accordion'; -import PlansDetails from '../plans-details'; -import PlansIntervalToggle from '../plans-interval-toggle'; -import PlansTable from '../plans-table'; -import { PLANS_STORE } from '../stores'; -import type { - CTAVariation, - CustomTagLinesMap, - DisabledPlansMap, - PopularBadgeVariation, -} from '../plans-table/types'; -import type { DomainSuggestions, WPCOMFeatures, Plans, PlansSelect } from '@automattic/data-stores'; - -import './style.scss'; - -type FeatureId = WPCOMFeatures.FeatureId; - -const debug = debugFactory( 'plans-grid' ); - -export interface Props { - header?: React.ReactElement; - selectedFeatures?: FeatureId[]; - currentPlanProductId: number | undefined; - onPlanSelect: ( planProductId: number | undefined ) => void; - onPickDomainClick?: () => void; - currentDomain?: DomainSuggestions.DomainSuggestion; - disabledPlans?: DisabledPlansMap; - isAccordion?: boolean; - locale: string; - showPlanTaglines?: boolean; - CTAVariation?: CTAVariation; - popularBadgeVariation?: PopularBadgeVariation; - customTagLines?: CustomTagLinesMap; - hidePlansComparison?: boolean; - defaultAllPlansExpanded?: boolean; - onBillingPeriodChange?: ( billingPeriod: Plans.PlanBillingPeriod ) => void; -} - -const PlansGrid: React.FunctionComponent< Props > = ( { - header, - selectedFeatures, - currentPlanProductId, - currentDomain, - onPlanSelect, - onPickDomainClick, - disabledPlans, - isAccordion, - locale, - showPlanTaglines = false, - CTAVariation = 'NORMAL', - popularBadgeVariation = 'ON_TOP', - customTagLines, - hidePlansComparison = false, - defaultAllPlansExpanded = false, - onBillingPeriodChange, -} ) => { - const { __ } = useI18n(); - - const selectedPlanBillingPeriod = useSelect( - ( select ) => - ( select( PLANS_STORE ) as PlansSelect ).getPlanProductById( currentPlanProductId ) - ?.billingPeriod, - [ currentPlanProductId ] - ); - - const [ billingPeriod, setBillingPeriod ] = React.useState< Plans.PlanBillingPeriod >( - selectedPlanBillingPeriod || 'ANNUALLY' - ); - - React.useEffect( () => { - if ( onBillingPeriodChange ) { - onBillingPeriodChange( billingPeriod ); - } - }, [ billingPeriod, onBillingPeriodChange ] ); - - const { maxAnnualDiscount } = useSupportedPlans( locale, billingPeriod ); - - isAccordion && debug( 'PlansGrid accordion version is active' ); - - return ( -
- { header &&
{ header }
} - - - -
-
- { isAccordion ? ( - - ) : ( - - ) } -
-
- { ! hidePlansComparison && ( -
-
- { __( 'Detailed comparison', __i18n_text_domain__ ) } -
-
- -
-
- ) } -
- ); -}; - -export default PlansGrid; diff --git a/packages/plans-grid/src/plans-table/index.tsx b/packages/plans-grid/src/plans-table/index.tsx deleted file mode 100644 index 08ee9e10f2a17..0000000000000 --- a/packages/plans-grid/src/plans-table/index.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import { useSelect } from '@wordpress/data'; -import { useState } from 'react'; -import * as React from 'react'; -import { useSupportedPlans } from '../hooks'; -import { PLANS_STORE } from '../stores'; -import PlanItem from './plan-item'; -import type { - CTAVariation, - PopularBadgeVariation, - CustomTagLinesMap, - DisabledPlansMap, -} from './types'; -import type { DomainSuggestions, Plans, PlansSelect } from '@automattic/data-stores'; - -import './style.scss'; - -export interface Props { - selectedPlanProductId: number | undefined; - onPlanSelect: ( planProductId: number | undefined ) => void; - onPickDomainClick?: () => void; - currentDomain?: DomainSuggestions.DomainSuggestion; - disabledPlans?: DisabledPlansMap; - locale: string; - showTaglines?: boolean; - CTAVariation?: CTAVariation; - popularBadgeVariation: PopularBadgeVariation; - customTagLines?: CustomTagLinesMap; - defaultAllPlansExpanded?: boolean; - billingPeriod: Plans.PlanBillingPeriod; -} - -const PlansTable: React.FunctionComponent< Props > = ( { - selectedPlanProductId, - onPlanSelect, - onPickDomainClick, - currentDomain, - disabledPlans, - locale, - billingPeriod, - showTaglines = false, - CTAVariation = 'NORMAL', - popularBadgeVariation = 'ON_TOP', - customTagLines, - defaultAllPlansExpanded = false, -} ) => { - const { supportedPlans } = useSupportedPlans( locale, billingPeriod ); - - const [ allPlansExpanded, setAllPlansExpanded ] = useState( defaultAllPlansExpanded ); - - const getPlanProduct = useSelect( - ( select ) => ( select( PLANS_STORE ) as PlansSelect ).getPlanProduct, - [] - ); - - return ( -
- { supportedPlans - .filter( ( plan ) => !! plan ) - .map( ( plan ) => ( - setAllPlansExpanded( ( expand ) => ! expand ) } - disabledLabel={ disabledPlans?.[ plan.periodAgnosticSlug ] } - > - ) ) } -
- ); -}; - -export default PlansTable; From fcf835ca718ed1863d17581e01d7606103bf7d24 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Thu, 6 Apr 2023 14:54:18 +0300 Subject: [PATCH 2/5] Cleanup unused dependencies --- packages/plans-grid/package.json | 6 +----- yarn.lock | 4 ---- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/plans-grid/package.json b/packages/plans-grid/package.json index 83510395661fb..92d28579955de 100644 --- a/packages/plans-grid/package.json +++ b/packages/plans-grid/package.json @@ -35,13 +35,9 @@ "@wordpress/components": "^22.1.0", "@wordpress/compose": "^5.20.0", "@wordpress/icons": "^9.13.0", - "@wordpress/primitives": "^3.20.0", "@wordpress/react-i18n": "^3.20.0", "classnames": "^2.3.1", - "debug": "^4.3.3", - "lodash": "^4.17.21", - "tslib": "^2.3.0", - "uuid": "^8.3.2" + "tslib": "^2.3.0" }, "devDependencies": { "@automattic/calypso-typescript-config": "workspace:^", diff --git a/yarn.lock b/yarn.lock index 0a9b5d942a5af..13ee124303930 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1279,15 +1279,11 @@ __metadata: "@wordpress/components": ^22.1.0 "@wordpress/compose": ^5.20.0 "@wordpress/icons": ^9.13.0 - "@wordpress/primitives": ^3.20.0 "@wordpress/react-i18n": ^3.20.0 classnames: ^2.3.1 - debug: ^4.3.3 - lodash: ^4.17.21 prop-types: ^15.7.2 tslib: ^2.3.0 typescript: ^4.7.4 - uuid: ^8.3.2 peerDependencies: "@wordpress/data": ^7.6.0 "@wordpress/element": ^4.20.0 From 74bec3e2f5be089bd88d5ff4360f1fe93477f5a7 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Thu, 6 Apr 2023 14:56:47 +0300 Subject: [PATCH 3/5] Remove unused WPCOMFeatures data store --- packages/data-stores/src/index.ts | 2 - .../src/wpcom-features/constants.tsx | 1 - .../src/wpcom-features/features-data.tsx | 44 ------------------- .../data-stores/src/wpcom-features/index.ts | 19 -------- .../data-stores/src/wpcom-features/reducer.ts | 11 ----- .../src/wpcom-features/selectors.ts | 26 ----------- .../data-stores/src/wpcom-features/types.ts | 16 ------- .../onboarding/src/feature-icon/index.tsx | 15 +++++-- 8 files changed, 12 insertions(+), 122 deletions(-) delete mode 100644 packages/data-stores/src/wpcom-features/constants.tsx delete mode 100644 packages/data-stores/src/wpcom-features/features-data.tsx delete mode 100644 packages/data-stores/src/wpcom-features/index.ts delete mode 100644 packages/data-stores/src/wpcom-features/reducer.ts delete mode 100644 packages/data-stores/src/wpcom-features/selectors.ts delete mode 100644 packages/data-stores/src/wpcom-features/types.ts diff --git a/packages/data-stores/src/index.ts b/packages/data-stores/src/index.ts index 9bae0b878b2d3..9f77644eaf9c5 100644 --- a/packages/data-stores/src/index.ts +++ b/packages/data-stores/src/index.ts @@ -10,7 +10,6 @@ import * as Site from './site'; import * as StepperInternal from './stepper-internal'; import * as Subscriber from './subscriber'; import * as User from './user'; -import * as WPCOMFeatures from './wpcom-features'; import * as WpcomPlansUI from './wpcom-plans-ui'; export { useHappinessEngineersQuery } from './queries/use-happiness-engineers-query'; export { useHas3PC } from './queries/use-has-3rd-party-cookies'; @@ -40,7 +39,6 @@ export { Site, Plans, WpcomPlansUI, - WPCOMFeatures, Onboard, ProductsList, AutomatedTransferEligibility, diff --git a/packages/data-stores/src/wpcom-features/constants.tsx b/packages/data-stores/src/wpcom-features/constants.tsx deleted file mode 100644 index 03a517e6d5405..0000000000000 --- a/packages/data-stores/src/wpcom-features/constants.tsx +++ /dev/null @@ -1 +0,0 @@ -export const STORE_KEY = 'automattic/wpcom-features'; diff --git a/packages/data-stores/src/wpcom-features/features-data.tsx b/packages/data-stores/src/wpcom-features/features-data.tsx deleted file mode 100644 index da1415e050c26..0000000000000 --- a/packages/data-stores/src/wpcom-features/features-data.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import * as Plans from '../plans'; -import type { FeatureId, Feature } from './types'; - -const { - TIMELESS_PLAN_PERSONAL, - TIMELESS_PLAN_PREMIUM, - TIMELESS_PLAN_BUSINESS, - TIMELESS_PLAN_ECOMMERCE, -} = Plans; - -export const featuresList: Record< FeatureId, Feature > = { - domain: { - id: 'domain', - minSupportedPlan: TIMELESS_PLAN_PERSONAL, - }, - store: { - id: 'store', - minSupportedPlan: TIMELESS_PLAN_ECOMMERCE, - }, - seo: { - id: 'seo', - minSupportedPlan: TIMELESS_PLAN_BUSINESS, - }, - plugins: { - id: 'plugins', - minSupportedPlan: TIMELESS_PLAN_BUSINESS, - }, - 'ad-free': { - id: 'ad-free', - minSupportedPlan: TIMELESS_PLAN_PERSONAL, - }, - 'image-storage': { - id: 'image-storage', - minSupportedPlan: TIMELESS_PLAN_PREMIUM, - }, - 'video-storage': { - id: 'video-storage', - minSupportedPlan: TIMELESS_PLAN_PREMIUM, - }, - support: { - id: 'support', - minSupportedPlan: TIMELESS_PLAN_BUSINESS, - }, -}; diff --git a/packages/data-stores/src/wpcom-features/index.ts b/packages/data-stores/src/wpcom-features/index.ts deleted file mode 100644 index 5b2fa8221f0b0..0000000000000 --- a/packages/data-stores/src/wpcom-features/index.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { register, createReduxStore } from '@wordpress/data'; -import { controls } from '@wordpress/data-controls'; -import { STORE_KEY } from './constants'; -import reducer, { State } from './reducer'; -import * as selectors from './selectors'; -import type { Reducer, AnyAction } from 'redux'; - -export type { State }; -export type { FeatureId, Feature } from './types'; - -export { featuresList } from './features-data'; - -export const store = createReduxStore( STORE_KEY, { - controls, - reducer: reducer as Reducer< State, AnyAction >, - selectors, -} ); - -register( store ); diff --git a/packages/data-stores/src/wpcom-features/reducer.ts b/packages/data-stores/src/wpcom-features/reducer.ts deleted file mode 100644 index 3824386312f19..0000000000000 --- a/packages/data-stores/src/wpcom-features/reducer.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { featuresList } from './features-data'; -import type { Feature, FeatureId } from './types'; -import type { AnyAction, Reducer } from 'redux'; - -export type State = Record< FeatureId, Feature >; - -const reducer: Reducer< State, AnyAction > = ( state = featuresList ) => { - return state; -}; - -export default reducer; diff --git a/packages/data-stores/src/wpcom-features/selectors.ts b/packages/data-stores/src/wpcom-features/selectors.ts deleted file mode 100644 index 27430ddd04f9e..0000000000000 --- a/packages/data-stores/src/wpcom-features/selectors.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { plansOrder } from '../plans/constants'; -import type { State } from './reducer'; -import type { FeatureId } from './types'; -import type { PlanSlug } from '../plans'; - -export const getAllFeatures = ( state: State ) => state; - -export const getRecommendedPlanSlug = ( - state: State, - selectedFeatures: FeatureId[] -): PlanSlug | undefined => { - const allFeatures = getAllFeatures( state ); - - if ( ! selectedFeatures.length ) { - return undefined; - } - - return selectedFeatures.reduce( ( currentMinSupportedPlan, featureId ) => { - const featureMinSupportedPlan = allFeatures[ featureId ].minSupportedPlan; - - return plansOrder.indexOf( featureMinSupportedPlan as never ) > - plansOrder.indexOf( currentMinSupportedPlan as never ) - ? featureMinSupportedPlan - : currentMinSupportedPlan; - }, allFeatures[ selectedFeatures[ 0 ] ].minSupportedPlan ); -}; diff --git a/packages/data-stores/src/wpcom-features/types.ts b/packages/data-stores/src/wpcom-features/types.ts deleted file mode 100644 index 603b2f0df4c79..0000000000000 --- a/packages/data-stores/src/wpcom-features/types.ts +++ /dev/null @@ -1,16 +0,0 @@ -import type { PlanSlug } from '../plans'; - -export type FeatureId = - | 'domain' - | 'store' - | 'seo' - | 'plugins' - | 'ad-free' - | 'image-storage' - | 'video-storage' - | 'support'; - -export interface Feature { - id: FeatureId; - minSupportedPlan: PlanSlug; -} diff --git a/packages/onboarding/src/feature-icon/index.tsx b/packages/onboarding/src/feature-icon/index.tsx index 8f4653bd08a57..c2d8b3efa8b29 100644 --- a/packages/onboarding/src/feature-icon/index.tsx +++ b/packages/onboarding/src/feature-icon/index.tsx @@ -1,9 +1,18 @@ import { SVG, Path } from '@wordpress/components'; import { Icon } from '@wordpress/icons'; import * as React from 'react'; -import type { WPCOMFeatures } from '@automattic/data-stores'; -export const iconList: Record< WPCOMFeatures.FeatureId, React.ReactElement > = { +type FeatureId = + | 'domain' + | 'store' + | 'seo' + | 'plugins' + | 'ad-free' + | 'image-storage' + | 'video-storage' + | 'support'; + +export const iconList: Record< FeatureId, React.ReactElement > = { domain: ( = { }; interface Props { - featureId: WPCOMFeatures.FeatureId; + featureId: FeatureId; } const FeatureIcon: React.FunctionComponent< Props > = ( { featureId } ) => ( From c19cccd0f73dea36b20d29d81925298d15f78e79 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Thu, 6 Apr 2023 15:18:46 +0300 Subject: [PATCH 4/5] Cleanup some unused styles and constants --- packages/data-stores/src/plans/constants.ts | 3 -- .../src/plans-feature-list/style.scss | 28 -------------- packages/plans-grid/src/plans-grid/style.scss | 37 +------------------ packages/plans-grid/src/variables.scss | 9 ----- 4 files changed, 1 insertion(+), 76 deletions(-) diff --git a/packages/data-stores/src/plans/constants.ts b/packages/data-stores/src/plans/constants.ts index 0fd7ac48d9dee..461243ca6c448 100644 --- a/packages/data-stores/src/plans/constants.ts +++ b/packages/data-stores/src/plans/constants.ts @@ -17,9 +17,6 @@ export const plansSlugs = [ TIMELESS_PLAN_ECOMMERCE, ] as const; -// order of the plans used to determine recommended plan based on features -export const plansOrder = plansSlugs; - export const DEFAULT_PAID_PLAN = TIMELESS_PLAN_PREMIUM; // plan products constants diff --git a/packages/plans-grid/src/plans-feature-list/style.scss b/packages/plans-grid/src/plans-feature-list/style.scss index 24db6a1735ce1..290e0294fb3b4 100644 --- a/packages/plans-grid/src/plans-feature-list/style.scss +++ b/packages/plans-grid/src/plans-feature-list/style.scss @@ -7,14 +7,6 @@ @include break-small { margin-top: 24px; } - - .plans-accordion & { - margin-top: 24px; - - @include break-small { - margin-top: 36px; - } - } } ul.plans-feature-list__item-group { @@ -78,10 +70,6 @@ ul.plans-feature-list__item-group { color: var(--studio-gray-100); - .plans-accordion & { - color: var(--studio-green-60); - } - .plans-feature-list__item-content-wrapper--domain-button.is-unavailable &, .plans-feature-list__item--disabled-message &, .plans-feature-list__item--requires-annual-disabled & { @@ -152,22 +140,6 @@ ul.plans-feature-list__item-group { } } - // When it's the accordion variation, the feature button has grey text. - .plans-accordion - .plans-feature-list__item-content-wrapper--domain-button:not(.is-unavailable) - & { - color: var(--studio-gray-70); - - &.is-cta { - color: var(--studio-gray-100); - } - - &:hover, - &:focus { - color: var(--studio-gray-50); - } - } - // When the feature is unavailable (in case of button), // or disabled (in case of custom domain on a free plan), text color is orange .plans-feature-list__item-content-wrapper--domain-button.is-unavailable &, diff --git a/packages/plans-grid/src/plans-grid/style.scss b/packages/plans-grid/src/plans-grid/style.scss index 30355ec9a089b..15ab266fa6568 100644 --- a/packages/plans-grid/src/plans-grid/style.scss +++ b/packages/plans-grid/src/plans-grid/style.scss @@ -5,7 +5,7 @@ @import "../variables.scss"; .plans-grid { - // Space to accomadate sticky footer + // Space to accomodate sticky footer margin-bottom: 85px; // @TODO: replace with a variable @include break-small { @@ -13,13 +13,6 @@ } } -.plans-grid__header { - @include onboarding-heading-padding; - display: flex; - justify-content: space-between; - align-items: center; -} - .plans-grid__toggle { margin: -24px 0 32px; @@ -27,31 +20,3 @@ margin-bottom: 40px; } } - -.plans-grid__details { - margin-top: 70px; -} - -.plans-grid__details-container { - // -1px is becuase this is a `max-width` media query, instead of the usual `min-width` - @media ( max-width: $plans-grid-max-page-width - 1px ) { - overflow-x: auto; - width: 100%; - position: absolute; - left: 0; - } - // this is needed on mobiles to uncover the CTA button - // without it, it's covered by the sticky bottom bar - padding-bottom: 120px; -} - -.plans-grid__details-heading { - .plans-ui-title { - color: var(--studio-black); - margin-bottom: 40px; - /* stylelint-disable-next-line declaration-property-unit-allowed-list */ - font-size: 32px; - line-height: 40px; - letter-spacing: 0.2px; - } -} diff --git a/packages/plans-grid/src/variables.scss b/packages/plans-grid/src/variables.scss index 86afc47c7c1ef..79fadb4af378d 100644 --- a/packages/plans-grid/src/variables.scss +++ b/packages/plans-grid/src/variables.scss @@ -16,14 +16,5 @@ $plans-table-total-content-width: #{( to-number($plan-item-min-width) * $plan-it $plan-item-gutter * ( $plan-item-count - 1 ) )}; -// Plans Details -$plans-details-min-width-desktop-mobile: #{to-number( $plans-table-total-content-width ) + - $onboarding-block-margin-mobile * 2}; -$plans-details-min-width-desktop-small: #{to-number( $plans-table-total-content-width ) + - $onboarding-block-margin-small * 2}; -$plans-details-min-width-desktop-medium: #{to-number( $plans-table-total-content-width ) + - $onboarding-block-margin-medium * 2}; -$plans-details-min-width-mobile: 700px; - // $break-wide defined in @wordpress/base-styles/_breakpoints.scss $plans-grid-max-page-width: $break-huge; From 94cc712a638f7c4e8fa4f96b2379d1536058dc75 Mon Sep 17 00:00:00 2001 From: Marin Atanasov Date: Thu, 6 Apr 2023 15:25:35 +0300 Subject: [PATCH 5/5] Move types along --- packages/data-stores/src/onboard/actions.ts | 2 +- packages/data-stores/src/onboard/reducer.ts | 2 +- packages/data-stores/src/shared-types.ts | 10 ++++++++++ packages/data-stores/src/site/types.ts | 2 +- 4 files changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/data-stores/src/onboard/actions.ts b/packages/data-stores/src/onboard/actions.ts index 6f00e7241ead9..ba8b20912eba9 100644 --- a/packages/data-stores/src/onboard/actions.ts +++ b/packages/data-stores/src/onboard/actions.ts @@ -3,11 +3,11 @@ import { dispatch, select } from '@wordpress/data-controls'; import { __ } from '@wordpress/i18n'; import { STORE_KEY as SITE_STORE } from '../site'; import { CreateSiteParams, Visibility, NewSiteBlogDetails } from '../site/types'; -import { FeatureId } from '../wpcom-features/types'; import { SiteGoal, STORE_KEY } from './constants'; import { ProfilerData } from './types'; import type { State } from '.'; import type { DomainSuggestion } from '../domain-suggestions'; +import type { FeatureId } from '../shared-types'; // somewhat hacky, but resolves the circular dependency issue import type { Design, FontPair, StyleVariation } from '@automattic/design-picker/src/types'; import type { MinimalRequestCartProduct } from '@automattic/shopping-cart'; diff --git a/packages/data-stores/src/onboard/reducer.ts b/packages/data-stores/src/onboard/reducer.ts index a4ba0d713b91c..344988a0f7902 100644 --- a/packages/data-stores/src/onboard/reducer.ts +++ b/packages/data-stores/src/onboard/reducer.ts @@ -3,7 +3,7 @@ import { SiteGoal } from './constants'; import type { OnboardAction } from './actions'; import type { DomainForm, ProfilerData } from './types'; import type { DomainSuggestion } from '../domain-suggestions'; -import type { FeatureId } from '../wpcom-features/types'; +import type { FeatureId } from '../shared-types'; // somewhat hacky, but resolves the circular dependency issue import type { Design, FontPair, StyleVariation } from '@automattic/design-picker/src/types'; import type { MinimalRequestCartProduct } from '@automattic/shopping-cart'; diff --git a/packages/data-stores/src/shared-types.ts b/packages/data-stores/src/shared-types.ts index 75ea6ed40a582..b79390ea144c1 100644 --- a/packages/data-stores/src/shared-types.ts +++ b/packages/data-stores/src/shared-types.ts @@ -3,6 +3,16 @@ export interface WpcomClientCredentials { client_secret: string; } +export type FeatureId = + | 'domain' + | 'store' + | 'seo' + | 'plugins' + | 'ad-free' + | 'image-storage' + | 'video-storage' + | 'support'; + declare global { interface Window { _currentSiteId: number; diff --git a/packages/data-stores/src/site/types.ts b/packages/data-stores/src/site/types.ts index e2c186fca08c4..0f79d87813da9 100644 --- a/packages/data-stores/src/site/types.ts +++ b/packages/data-stores/src/site/types.ts @@ -1,7 +1,7 @@ import * as selectors from './selectors'; import type { ActionCreators } from './actions'; import type { DispatchFromMap, SelectFromMap } from '../mapped-types'; -import type { FeatureId } from '../wpcom-features'; +import type { FeatureId } from '../shared-types'; export interface Dispatch { dispatch: DispatchFromMap< ActionCreators >;