Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[website] Improve pricing page #35767

Merged
merged 6 commits into from
Jan 15, 2023
Merged

[website] Improve pricing page #35767

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
37b2ce5
[website] Improve pricing page
oliviertassinari Jan 8, 2023
19f6496
reduce hero's height
danilo-leal Jan 9, 2023
ac9099e
easier to scan
oliviertassinari Jan 13, 2023
92d4781
Sam's review
oliviertassinari Jan 14, 2023
0d7afa1
Progressive change
oliviertassinari Jan 14, 2023
c23181e
yarn prettier
oliviertassinari Jan 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/components/pricing/HeroPricing.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export default function HeroPricing() {
<Container>
<Box
sx={{
height: '40vh',
height: '28vh',
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
Expand Down
52 changes: 32 additions & 20 deletions docs/src/components/pricing/PricingTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Divider from '@mui/material/Divider';
import Typography from '@mui/material/Typography';
import Tooltip from '@mui/material/Tooltip';
import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
import { useRouter } from 'next/router';
import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded';
import Link from 'docs/src/modules/components/Link';
import IconImage, { IconImageProps } from 'docs/src/components/icon/IconImage';
Expand Down Expand Up @@ -107,7 +108,7 @@ export function PlanPrice(props: PlanPriceProps) {
Billed annually at $180/dev.
</Typography>
<Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
Price capped at 10 developers.
No additional fee beyond 10 devs.
</Typography>
</div>
);
Expand Down Expand Up @@ -922,14 +923,30 @@ export default function PricingTable({
columnHeaderHidden?: boolean;
plans?: Array<'community' | 'pro' | 'premium'>;
}) {
const router = useRouter();
const [dataGridCollapsed, setDataGridCollapsed] = React.useState(false);

React.useEffect(() => {
if (router.query['expand-path'] === 'all') {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

copy

material-ui/docs/data/material/customization/default-theme/DefaultTheme.js

Line 245 in 27f1c28

if (name === 'expand-path') {

setDataGridCollapsed(true);
}
}, [router.query]);

const tableRef = React.useRef<HTMLDivElement | null>(null);
const gridSx = {
display: 'grid',
gridTemplateColumns: `minmax(160px, 1fr) repeat(${plans.length}, minmax(${
columnHeaderHidden ? '0px' : '240px'
}, 1fr))`,
};

const unfoldMore = (
<UnfoldMoreRounded
fontSize="small"
sx={{ color: 'grey.600', opacity: dataGridCollapsed ? 0 : 1 }}
/>
);

function renderRow(key: string) {
return (
<Box
Expand Down Expand Up @@ -1042,26 +1059,21 @@ export default function PricingTable({
<RowHead startIcon={<IconImage name="product-advanced" width="28" height="28" />}>
MUI X (open-core)
</RowHead>
<Box sx={{ position: 'relative', minHeight: 58, '& svg': { transition: '0.3s' }, ...gridSx }}>
<Box
sx={{
position: 'relative',
minHeight: 58,
'& svg': { transition: '0.3s' },
'&:hover svg': { color: 'primary.main' },
...gridSx,
}}
>
<Cell />
<Cell sx={{ minHeight: 60 }}>
<UnfoldMoreRounded
fontSize="small"
sx={{ color: 'grey.600', opacity: dataGridCollapsed ? 0 : 1 }}
/>
</Cell>
<Cell sx={{ minHeight: 60 }}>{unfoldMore}</Cell>
<Cell highlighted sx={{ display: { xs: 'none', md: 'flex' }, minHeight: 60 }}>
<UnfoldMoreRounded
fontSize="small"
sx={{ color: 'grey.600', opacity: dataGridCollapsed ? 0 : 1 }}
/>
</Cell>
<Cell sx={{ display: { xs: 'none', md: 'flex' }, minHeight: 60 }}>
<UnfoldMoreRounded
fontSize="small"
sx={{ color: 'grey.600', opacity: dataGridCollapsed ? 0 : 1 }}
/>
{unfoldMore}
</Cell>
<Cell sx={{ display: { xs: 'none', md: 'flex' }, minHeight: 60 }}>{unfoldMore}</Cell>
<Button
fullWidth
onClick={() => setDataGridCollapsed((bool) => !bool)}
Expand All @@ -1087,7 +1099,7 @@ export default function PricingTable({
width: '100%',
height: '100%',
'&:hover': {
bgcolor: alpha(theme.palette.grey[50], 0.4),
bgcolor: alpha(theme.palette.primary.main, 0.06),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Change a bit the look & feel to improve the expand button affordance.

'@media (hover: none)': {
bgcolor: 'initial',
},
Expand All @@ -1096,7 +1108,7 @@ export default function PricingTable({
(theme) =>
theme.applyDarkStyles({
'&:hover': {
bgcolor: alpha(theme.palette.primaryDark[900], 0.3),
bgcolor: alpha(theme.palette.primary.main, 0.06),
},
}),
]}
Expand Down
6 changes: 3 additions & 3 deletions docs/src/components/pricing/WhatToExpect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,9 +58,9 @@ export default function WhatToExpect() {
</Box>
<Typography variant="body2" color="text.secondary">
The licenses are sold on a per front-end developer basis. The Pro plan includes is
capped at ten licenses; you do not need to pay for additional licenses for more than
ten developers. You can contact <Link href="mailto:[email protected]">sales</Link> for a
volume discount when licensing over 50 developers under the Premium plan.
capped at 10 licenses; you do not need to pay for additional licenses for more than
10 developers. You can contact <Link href="mailto:[email protected]">sales</Link> for a
volume discount when licensing over 25 developers under the Premium plan.
Copy link
Member Author

@oliviertassinari oliviertassinari Jan 8, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fix to match with the behavior in https://mui.com/store/items/mui-x-premium/.

</Typography>
</Paper>
</Grid>
Expand Down