From e90ad931046204ef6d318106d06c074683dc6d7f Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 16 Jul 2023 00:09:48 +0200 Subject: [PATCH] [website] Polish pricing page --- docs/pages/pricing.tsx | 6 +- .../{block-green.svg => x-plan-community.svg} | 0 .../{block-gold.svg => x-plan-premium.svg} | 0 .../{block-blue.svg => x-plan-pro.svg} | 0 docs/src/components/icon/IconImage.tsx | 30 +- .../components/pricing/LicenseTypeContext.tsx | 20 -- .../pricing/LicensingModelContext.tsx | 20 ++ ...ypeWidget.tsx => LicensingModelWidget.tsx} | 26 +- docs/src/components/pricing/PricingList.tsx | 8 +- docs/src/components/pricing/PricingTable.tsx | 40 +-- .../pricing/PricingWhatToExpect.tsx | 321 +++++++++--------- 11 files changed, 234 insertions(+), 237 deletions(-) rename docs/public/static/branding/pricing/{block-green.svg => x-plan-community.svg} (100%) rename docs/public/static/branding/pricing/{block-gold.svg => x-plan-premium.svg} (100%) rename docs/public/static/branding/pricing/{block-blue.svg => x-plan-pro.svg} (100%) delete mode 100644 docs/src/components/pricing/LicenseTypeContext.tsx create mode 100644 docs/src/components/pricing/LicensingModelContext.tsx rename docs/src/components/pricing/{LicenseTypeWidget.tsx => LicensingModelWidget.tsx} (84%) diff --git a/docs/pages/pricing.tsx b/docs/pages/pricing.tsx index 99a784ab86d131..a51fc75156b941 100644 --- a/docs/pages/pricing.tsx +++ b/docs/pages/pricing.tsx @@ -13,7 +13,7 @@ import HeroEnd from 'docs/src/components/home/HeroEnd'; import AppFooter from 'docs/src/layouts/AppFooter'; import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider'; import AppHeaderBanner from 'docs/src/components/banner/AppHeaderBanner'; -import { LicenseTypeProvider } from 'docs/src/components/pricing/LicenseTypeContext'; +import { LicensingModelProvider } from 'docs/src/components/pricing/LicensingModelContext'; export default function Pricing() { return ( @@ -27,7 +27,7 @@ export default function Pricing() {
- + {/* Mobile, Tablet */} @@ -36,7 +36,7 @@ export default function Pricing() { - + diff --git a/docs/public/static/branding/pricing/block-green.svg b/docs/public/static/branding/pricing/x-plan-community.svg similarity index 100% rename from docs/public/static/branding/pricing/block-green.svg rename to docs/public/static/branding/pricing/x-plan-community.svg diff --git a/docs/public/static/branding/pricing/block-gold.svg b/docs/public/static/branding/pricing/x-plan-premium.svg similarity index 100% rename from docs/public/static/branding/pricing/block-gold.svg rename to docs/public/static/branding/pricing/x-plan-premium.svg diff --git a/docs/public/static/branding/pricing/block-blue.svg b/docs/public/static/branding/pricing/x-plan-pro.svg similarity index 100% rename from docs/public/static/branding/pricing/block-blue.svg rename to docs/public/static/branding/pricing/x-plan-pro.svg diff --git a/docs/src/components/icon/IconImage.tsx b/docs/src/components/icon/IconImage.tsx index 89de0cadfe7c53..01862609e166f7 100644 --- a/docs/src/components/icon/IconImage.tsx +++ b/docs/src/components/icon/IconImage.tsx @@ -11,9 +11,9 @@ export type IconImageProps = { | 'product-toolpad' | 'product-templates' | 'product-designkits' - | 'block-green' - | 'block-blue' - | 'block-gold' + | 'x-plan-pro' + | 'x-plan-premium' + | 'x-plan-community' | 'yes' | 'no' | 'time' @@ -59,22 +59,20 @@ export default function IconImage(props: IconImageProps) { let defaultHeight; let category = ''; let mode = `-${theme.palette.mode}`; + if (name.startsWith('product-')) { defaultWidth = 36; defaultHeight = 36; - } - if (name.startsWith('block-')) { + } else if (name.startsWith('x-plan-')) { category = 'pricing/'; mode = ''; defaultWidth = 13; defaultHeight = 15; - } - if (['yes', 'no', 'time'].indexOf(name) !== -1) { + } else if (['yes', 'no', 'time'].indexOf(name) !== -1) { category = 'pricing/'; defaultWidth = 18; defaultHeight = 18; - } - if ( + } else if ( [ 'spotify', 'amazon', @@ -99,14 +97,16 @@ export default function IconImage(props: IconImageProps) { ) { category = 'companies/'; } + const width = widthProp ?? defaultWidth; const height = heightProp ?? defaultHeight; - if (!mounted && neverHydrated && !!theme.vars) { + if (!mounted && neverHydrated && !!theme.vars && mode !== '') { // Prevent hydration mismatch between the light and dark mode image source. return ; } - const element = ( + + const child = ( ); - if (!title) { - return element; + + if (title) { + return {child}; } - return {element}; + + return child; } diff --git a/docs/src/components/pricing/LicenseTypeContext.tsx b/docs/src/components/pricing/LicenseTypeContext.tsx deleted file mode 100644 index 6648a49525a9aa..00000000000000 --- a/docs/src/components/pricing/LicenseTypeContext.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react'; - -const LicenseType = React.createContext({}); - -if (process.env.NODE_ENV !== 'production') { - LicenseType.displayName = 'LicenseType'; -} - -export function LicenseTypeProvider(props: any) { - const [licenseType, setLicenseType] = React.useState('Annual'); - const value = React.useMemo( - () => ({ licenseType, setLicenseType }), - [licenseType, setLicenseType], - ); - return {props.children}; -} - -export function useLicenseType() { - return React.useContext(LicenseType); -} diff --git a/docs/src/components/pricing/LicensingModelContext.tsx b/docs/src/components/pricing/LicensingModelContext.tsx new file mode 100644 index 00000000000000..8fcc8d0c0612a2 --- /dev/null +++ b/docs/src/components/pricing/LicensingModelContext.tsx @@ -0,0 +1,20 @@ +import * as React from 'react'; + +const LicenseModel = React.createContext({}); + +if (process.env.NODE_ENV !== 'production') { + LicenseModel.displayName = 'LicenseModel'; +} + +export function LicensingModelProvider(props: any) { + const [licensingModel, setLicensingModel] = React.useState('annual'); + const value = React.useMemo( + () => ({ licensingModel, setLicensingModel }), + [licensingModel, setLicensingModel], + ); + return {props.children}; +} + +export function useLicensingModel() { + return React.useContext(LicenseModel); +} diff --git a/docs/src/components/pricing/LicenseTypeWidget.tsx b/docs/src/components/pricing/LicensingModelWidget.tsx similarity index 84% rename from docs/src/components/pricing/LicenseTypeWidget.tsx rename to docs/src/components/pricing/LicensingModelWidget.tsx index e60683863f5de7..e678fce0b0faa8 100644 --- a/docs/src/components/pricing/LicenseTypeWidget.tsx +++ b/docs/src/components/pricing/LicensingModelWidget.tsx @@ -4,7 +4,7 @@ import Tooltip from '@mui/material/Tooltip'; import { styled } from '@mui/material/styles'; import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; -import { useLicenseType } from 'docs/src/components/pricing/LicenseTypeContext'; +import { useLicensingModel } from 'docs/src/components/pricing/LicensingModelContext'; const StyledTabs = styled(Tabs)(({ theme }) => ({ margin: '14px auto 4px', @@ -16,7 +16,11 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({ border: '1px solid', borderColor: (theme.vars || theme).palette.grey[200], backgroundColor: (theme.vars || theme).palette.grey[50], - '& .MuiTabs-scroller': { + '&:has(.Mui-focusVisible)': { + outline: `2px solid ${(theme.vars || theme).palette.primary.main}`, + }, + '& .MuiTabs-scroller, & .MuiTab-root': { + // Override inline-style to see the box-shadow overflow: 'visible!important', }, '& span': { @@ -33,10 +37,6 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({ '&:hover': { color: (theme.vars || theme).palette.grey[800], }, - '&.Mui-focusVisible': { - outline: `2px solid ${(theme.vars || theme).palette.primary.main}`, - outlineOffset: 2, - }, '&.Mui-selected': { color: (theme.vars || theme).palette.grey[900], fontWeight: 600, @@ -90,24 +90,24 @@ const tooltipProps = { }, }; -export default function LicenseTypeWidget() { - const { licenseType, setLicenseType } = useLicenseType(); +export default function LicenseModelWidget() { + const { licensingModel, setLicensingModel } = useLicensingModel(); const handleChange = (event: React.SyntheticEvent, newValue: number) => { - setLicenseType(newValue); + setLicensingModel(newValue); }; return ( Perpetual @@ -116,7 +116,7 @@ export default function LicenseTypeWidget() { /> Annual diff --git a/docs/src/components/pricing/PricingList.tsx b/docs/src/components/pricing/PricingList.tsx index ccdb32ce1bc2e1..70f6499a5e9a4d 100644 --- a/docs/src/components/pricing/PricingList.tsx +++ b/docs/src/components/pricing/PricingList.tsx @@ -10,7 +10,7 @@ import Tab from '@mui/material/Tab'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; import Link from 'docs/src/modules/components/Link'; import PricingTable, { PlanName, PlanPrice } from 'docs/src/components/pricing/PricingTable'; -import { useLicenseType } from 'docs/src/components/pricing/LicenseTypeContext'; +import { useLicensingModel } from 'docs/src/components/pricing/LicensingModelContext'; const Plan = React.forwardRef< HTMLDivElement, @@ -22,7 +22,7 @@ const Plan = React.forwardRef< >(function Plan({ plan, benefits, unavailable, sx, ...props }, ref) { const globalTheme = useTheme(); const mode = globalTheme.palette.mode; - const { licenseType } = useLicenseType(); + const { licensingModel } = useLicensingModel(); return ( - {title} + {title} {!disableDescription && ( { if (!annual) { return `$${displayedValue}/dev billed once.`; @@ -132,7 +132,7 @@ export function PlanPrice(props: PlanPriceProps) { return ( - + {formatCurrency(mainDisplayValue)} @@ -149,7 +149,7 @@ export function PlanPrice(props: PlanPriceProps) { )} - No additional fee beyond 10 devs. + {'No additional fee beyond 10 devs.'} @@ -171,7 +171,7 @@ export function PlanPrice(props: PlanPriceProps) { return ( - + ) { function PricingTableDevelopment(props: any) { const { renderRow } = props; - const { licenseType } = useLicenseType(); + const { licensingModel } = useLicensingModel(); - return licenseType === 'Annual' + return licensingModel === 'annual' ? renderRow('mui-x-development') : renderRow('mui-x-development-perpetual'); } function PricingTableBuyPro() { - const { licenseType } = useLicenseType(); + const { licensingModel } = useLicensingModel(); return (