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

[pricing] Add tooltip to pricing icon #28959

Merged
merged 2 commits into from
Oct 18, 2021
Merged

[pricing] Add tooltip to pricing icon #28959

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5b70820
Add tooltip to pricing icon
siriwatknp Oct 10, 2021
78f2e78
available → included
danilo-leal Oct 18, 2021
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
10 changes: 8 additions & 2 deletions docs/src/components/icon/IconImage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react';
import { useTheme, styled, Theme } from '@mui/material/styles';
import { SxProps } from '@mui/system';
import Tooltip from '@mui/material/Tooltip';

export type IconImageProps = {
name:
Expand All @@ -26,11 +27,12 @@ export type IconImageProps = {
| 'deloitte'
| 'volvo';
sx?: SxProps<Theme>;
title?: string;
} & JSX.IntrinsicElements['img'];

const Img = styled('img')({ display: 'inline-block', verticalAlign: 'bottom' });

export default function IconImage({ name, ...props }: IconImageProps) {
export default function IconImage({ name, title, ...props }: IconImageProps) {
const theme = useTheme();
let width = '';
let height = '';
Expand Down Expand Up @@ -68,7 +70,7 @@ export default function IconImage({ name, ...props }: IconImageProps) {
) {
category = 'companies/';
}
return (
const element = (
<Img
src={`/static/branding/${category}${name}${mode}.svg`}
alt=""
Expand All @@ -78,4 +80,8 @@ export default function IconImage({ name, ...props }: IconImageProps) {
{...props}
/>
);
if (!title) {
return element;
}
return <Tooltip title={title}>{element}</Tooltip>;
}
270 changes: 138 additions & 132 deletions docs/src/components/pricing/PricingTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -528,158 +528,164 @@ const rowHeaders: Record<string, React.ReactNode> = {

const communityData: Record<string, React.ReactNode> = {
// Core
'@mui/core': <IconImage name="yes" />,
'@mui/material': <IconImage name="yes" />,
'@mui/system': <IconImage name="yes" />,
'@mui/core': <IconImage name="yes" title="Included" />,
'@mui/material': <IconImage name="yes" title="Included" />,
'@mui/system': <IconImage name="yes" title="Included" />,
// Advanced
'data-grid/column-groups': <IconImage name="time" />,
'data-grid/column-spanning': <IconImage name="time" />,
'data-grid/column-resizing': <IconImage name="no" />,
'data-grid/column-reorder': <IconImage name="no" />,
'data-grid/column-pinning': <IconImage name="no" />,
'data-grid/row-sorting': <IconImage name="yes" />,
'data-grid/row-height': <IconImage name="yes" />,
'data-grid/row-spanning': <IconImage name="time" />,
'data-grid/row-reordering': <IconImage name="no" />,
'data-grid/row-selection': <IconImage name="yes" />,
'data-grid/row-multiselection': <IconImage name="no" />,
'data-grid/row-rangeselection': <IconImage name="no" />,
'data-grid/filter-quick': <IconImage name="time" />,
'data-grid/filter-column': <IconImage name="yes" />,
'data-grid/filter-multicolumn': <IconImage name="no" />,
'data-grid/pagination': <IconImage name="yes" />,
'data-grid/pagination-large': <IconImage name="no" />,
'data-grid/edit-row': <IconImage name="yes" />,
'data-grid/edit-cell': <IconImage name="yes" />,
'data-grid/file-csv': <IconImage name="yes" />,
'data-grid/file-print': <IconImage name="time" />,
'data-grid/file-clipboard': <IconImage name="no" />,
'data-grid/file-excel': <IconImage name="no" />,
'data-grid/customizable-components': <IconImage name="yes" />,
'data-grid/virtualize-column': <IconImage name="yes" />,
'data-grid/virtualize-row': <IconImage name="no" />,
'data-grid/tree-data': <IconImage name="no" />,
'data-grid/master-detail': <IconImage name="no" />,
'data-grid/grouping': <IconImage name="no" />,
'data-grid/aggregation': <IconImage name="no" />,
'data-grid/pivoting': <IconImage name="no" />,
'data-grid/accessibility': <IconImage name="yes" />,
'data-grid/keyboard-nav': <IconImage name="yes" />,
'data-grid/localization': <IconImage name="yes" />,
'data-grid-pro': <IconImage name="no" />,
'date-range-picker': <IconImage name="no" />,
'data-grid/column-groups': <IconImage name="time" title="Work in progress" />,
'data-grid/column-spanning': <IconImage name="time" title="Work in progress" />,
'data-grid/column-resizing': <IconImage name="no" title="Not included" />,
'data-grid/column-reorder': <IconImage name="no" title="Not included" />,
'data-grid/column-pinning': <IconImage name="no" title="Not included" />,
'data-grid/row-sorting': <IconImage name="yes" title="Included" />,
'data-grid/row-height': <IconImage name="yes" title="Included" />,
'data-grid/row-spanning': <IconImage name="time" title="Work in progress" />,
'data-grid/row-reordering': <IconImage name="no" title="Not included" />,
'data-grid/row-selection': <IconImage name="yes" title="Included" />,
'data-grid/row-multiselection': <IconImage name="no" title="Not included" />,
'data-grid/row-rangeselection': <IconImage name="no" title="Not included" />,
'data-grid/filter-quick': <IconImage name="time" title="Work in progress" />,
'data-grid/filter-column': <IconImage name="yes" title="Included" />,
'data-grid/filter-multicolumn': <IconImage name="no" title="Not included" />,
'data-grid/pagination': <IconImage name="yes" title="Included" />,
'data-grid/pagination-large': <IconImage name="no" title="Not included" />,
'data-grid/edit-row': <IconImage name="yes" title="Included" />,
'data-grid/edit-cell': <IconImage name="yes" title="Included" />,
'data-grid/file-csv': <IconImage name="yes" title="Included" />,
'data-grid/file-print': <IconImage name="time" title="Work in progress" />,
'data-grid/file-clipboard': <IconImage name="no" title="Not included" />,
'data-grid/file-excel': <IconImage name="no" title="Not included" />,
'data-grid/customizable-components': <IconImage name="yes" title="Included" />,
'data-grid/virtualize-column': <IconImage name="yes" title="Included" />,
'data-grid/virtualize-row': <IconImage name="no" title="Not included" />,
'data-grid/tree-data': <IconImage name="no" title="Not included" />,
'data-grid/master-detail': <IconImage name="no" title="Not included" />,
'data-grid/grouping': <IconImage name="no" title="Not included" />,
'data-grid/aggregation': <IconImage name="no" title="Not included" />,
'data-grid/pivoting': <IconImage name="no" title="Not included" />,
'data-grid/accessibility': <IconImage name="yes" title="Included" />,
'data-grid/keyboard-nav': <IconImage name="yes" title="Included" />,
'data-grid/localization': <IconImage name="yes" title="Included" />,
'data-grid-pro': <IconImage name="no" title="Not included" />,
'date-range-picker': <IconImage name="no" title="Not included" />,
// Support
community: <IconImage name="yes" />,
'bugs/features': <IconImage name="yes" />,
'tech-advisory': <IconImage name="no" />,
'support-duration': <IconImage name="no" />,
'response-time': <IconImage name="no" />,
'pre-screening': <IconImage name="no" />,
'issue-escalation': <IconImage name="no" />,
community: <IconImage name="yes" title="Included" />,
'bugs/features': <IconImage name="yes" title="Included" />,
'tech-advisory': <IconImage name="no" title="Not included" />,
'support-duration': <IconImage name="no" title="Not included" />,
'response-time': <IconImage name="no" title="Not included" />,
'pre-screening': <IconImage name="no" title="Not included" />,
'issue-escalation': <IconImage name="no" title="Not included" />,
};

const proData: Record<string, React.ReactNode> = {
// Core
'@mui/core': <IconImage name="yes" />,
'@mui/material': <IconImage name="yes" />,
'@mui/system': <IconImage name="yes" />,
'@mui/core': <IconImage name="yes" title="Included" />,
'@mui/material': <IconImage name="yes" title="Included" />,
'@mui/system': <IconImage name="yes" title="Included" />,
// Advanced
'data-grid/column-groups': <IconImage name="time" />,
'data-grid/column-spanning': <IconImage name="time" />,
'data-grid/column-resizing': <IconImage name="yes" />,
'data-grid/column-reorder': <IconImage name="yes" />,
'data-grid/column-pinning': <IconImage name="time" />,
'data-grid/row-sorting': <IconImage name="yes" />,
'data-grid/row-height': <IconImage name="yes" />,
'data-grid/row-spanning': <IconImage name="time" />,
'data-grid/row-reordering': <IconImage name="time" />,
'data-grid/row-selection': <IconImage name="yes" />,
'data-grid/row-multiselection': <IconImage name="yes" />,
'data-grid/row-rangeselection': <IconImage name="no" />,
'data-grid/filter-quick': <IconImage name="time" />,
'data-grid/filter-column': <IconImage name="yes" />,
'data-grid/filter-multicolumn': <IconImage name="yes" />,
'data-grid/pagination': <IconImage name="yes" />,
'data-grid/pagination-large': <IconImage name="yes" />,
'data-grid/edit-row': <IconImage name="yes" />,
'data-grid/edit-cell': <IconImage name="yes" />,
'data-grid/file-csv': <IconImage name="yes" />,
'data-grid/file-print': <IconImage name="time" />,
'data-grid/file-clipboard': <IconImage name="time" />,
'data-grid/file-excel': <IconImage name="no" />,
'data-grid/customizable-components': <IconImage name="yes" />,
'data-grid/virtualize-column': <IconImage name="yes" />,
'data-grid/virtualize-row': <IconImage name="yes" />,
'data-grid/tree-data': <IconImage name="time" />,
'data-grid/master-detail': <IconImage name="time" />,
'data-grid/grouping': <IconImage name="no" />,
'data-grid/aggregation': <IconImage name="no" />,
'data-grid/pivoting': <IconImage name="no" />,
'data-grid/accessibility': <IconImage name="yes" />,
'data-grid/keyboard-nav': <IconImage name="yes" />,
'data-grid/localization': <IconImage name="yes" />,
'data-grid/column-groups': <IconImage name="time" title="Work in progress" />,
'data-grid/column-spanning': <IconImage name="time" title="Work in progress" />,
'data-grid/column-resizing': <IconImage name="yes" title="Included" />,
'data-grid/column-reorder': <IconImage name="yes" title="Included" />,
'data-grid/column-pinning': <IconImage name="time" title="Work in progress" />,
'data-grid/row-sorting': <IconImage name="yes" title="Included" />,
'data-grid/row-height': <IconImage name="yes" title="Included" />,
'data-grid/row-spanning': <IconImage name="time" title="Work in progress" />,
'data-grid/row-reordering': <IconImage name="time" title="Work in progress" />,
'data-grid/row-selection': <IconImage name="yes" title="Included" />,
'data-grid/row-multiselection': <IconImage name="yes" title="Included" />,
'data-grid/row-rangeselection': <IconImage name="no" title="Not included" />,
'data-grid/filter-quick': <IconImage name="time" title="Work in progress" />,
'data-grid/filter-column': <IconImage name="yes" title="Included" />,
'data-grid/filter-multicolumn': <IconImage name="yes" title="Included" />,
'data-grid/pagination': <IconImage name="yes" title="Included" />,
'data-grid/pagination-large': <IconImage name="yes" title="Included" />,
'data-grid/edit-row': <IconImage name="yes" title="Included" />,
'data-grid/edit-cell': <IconImage name="yes" title="Included" />,
'data-grid/file-csv': <IconImage name="yes" title="Included" />,
'data-grid/file-print': <IconImage name="time" title="Work in progress" />,
'data-grid/file-clipboard': <IconImage name="time" title="Work in progress" />,
'data-grid/file-excel': <IconImage name="no" title="Not included" />,
'data-grid/customizable-components': <IconImage name="yes" title="Included" />,
'data-grid/virtualize-column': <IconImage name="yes" title="Included" />,
'data-grid/virtualize-row': <IconImage name="yes" title="Included" />,
'data-grid/tree-data': <IconImage name="time" title="Work in progress" />,
'data-grid/master-detail': <IconImage name="time" title="Work in progress" />,
'data-grid/grouping': <IconImage name="no" title="Not included" />,
'data-grid/aggregation': <IconImage name="no" title="Not included" />,
'data-grid/pivoting': <IconImage name="no" title="Not included" />,
'data-grid/accessibility': <IconImage name="yes" title="Included" />,
'data-grid/keyboard-nav': <IconImage name="yes" title="Included" />,
'data-grid/localization': <IconImage name="yes" title="Included" />,
'data-grid-pro': <Info value="1 year" />,
'date-range-picker': <IconImage name="time" />,
'date-range-picker': <IconImage name="time" title="Work in progress" />,
// Support
community: <IconImage name="yes" />,
'bugs/features': <Info value={<IconImage name="yes" />} metadata="Priority over Community" />,
'tech-advisory': <IconImage name="no" />,
community: <IconImage name="yes" title="Included" />,
'bugs/features': (
<Info value={<IconImage name="yes" title="Included" />} metadata="Priority over Community" />
),
'tech-advisory': <IconImage name="no" title="Not included" />,
'support-duration': <Info value="1 year" />,
'response-time': <IconImage name="no" />,
'pre-screening': <IconImage name="no" />,
'issue-escalation': <IconImage name="no" />,
'response-time': <IconImage name="no" title="Not included" />,
'pre-screening': <IconImage name="no" title="Not included" />,
'issue-escalation': <IconImage name="no" title="Not included" />,
};

const premiumData: Record<string, React.ReactNode> = {
// Core
'@mui/core': <IconImage name="yes" />,
'@mui/material': <IconImage name="yes" />,
'@mui/system': <IconImage name="yes" />,
'@mui/core': <IconImage name="yes" title="Included" />,
'@mui/material': <IconImage name="yes" title="Included" />,
'@mui/system': <IconImage name="yes" title="Included" />,
// Advanced
'data-grid/column-groups': <IconImage name="time" />,
'data-grid/column-spanning': <IconImage name="time" />,
'data-grid/column-resizing': <IconImage name="yes" />,
'data-grid/column-reorder': <IconImage name="yes" />,
'data-grid/column-pinning': <IconImage name="time" />,
'data-grid/row-sorting': <IconImage name="yes" />,
'data-grid/row-height': <IconImage name="yes" />,
'data-grid/row-spanning': <IconImage name="time" />,
'data-grid/row-reordering': <IconImage name="time" />,
'data-grid/row-selection': <IconImage name="yes" />,
'data-grid/row-multiselection': <IconImage name="yes" />,
'data-grid/row-rangeselection': <IconImage name="time" />,
'data-grid/filter-quick': <IconImage name="time" />,
'data-grid/filter-column': <IconImage name="yes" />,
'data-grid/filter-multicolumn': <IconImage name="yes" />,
'data-grid/pagination': <IconImage name="yes" />,
'data-grid/pagination-large': <IconImage name="yes" />,
'data-grid/edit-row': <IconImage name="yes" />,
'data-grid/edit-cell': <IconImage name="yes" />,
'data-grid/file-csv': <IconImage name="yes" />,
'data-grid/file-print': <IconImage name="time" />,
'data-grid/file-clipboard': <IconImage name="time" />,
'data-grid/file-excel': <IconImage name="no" />,
'data-grid/customizable-components': <IconImage name="yes" />,
'data-grid/virtualize-column': <IconImage name="yes" />,
'data-grid/virtualize-row': <IconImage name="yes" />,
'data-grid/tree-data': <IconImage name="time" />,
'data-grid/master-detail': <IconImage name="time" />,
'data-grid/grouping': <IconImage name="time" />,
'data-grid/aggregation': <IconImage name="time" />,
'data-grid/pivoting': <IconImage name="time" />,
'data-grid/accessibility': <IconImage name="yes" />,
'data-grid/keyboard-nav': <IconImage name="yes" />,
'data-grid/localization': <IconImage name="yes" />,
'data-grid/column-groups': <IconImage name="time" title="Work in progress" />,
'data-grid/column-spanning': <IconImage name="time" title="Work in progress" />,
'data-grid/column-resizing': <IconImage name="yes" title="Included" />,
'data-grid/column-reorder': <IconImage name="yes" title="Included" />,
'data-grid/column-pinning': <IconImage name="time" title="Work in progress" />,
'data-grid/row-sorting': <IconImage name="yes" title="Included" />,
'data-grid/row-height': <IconImage name="yes" title="Included" />,
'data-grid/row-spanning': <IconImage name="time" title="Work in progress" />,
'data-grid/row-reordering': <IconImage name="time" title="Work in progress" />,
'data-grid/row-selection': <IconImage name="yes" title="Included" />,
'data-grid/row-multiselection': <IconImage name="yes" title="Included" />,
'data-grid/row-rangeselection': <IconImage name="time" title="Work in progress" />,
'data-grid/filter-quick': <IconImage name="time" title="Work in progress" />,
'data-grid/filter-column': <IconImage name="yes" title="Included" />,
'data-grid/filter-multicolumn': <IconImage name="yes" title="Included" />,
'data-grid/pagination': <IconImage name="yes" title="Included" />,
'data-grid/pagination-large': <IconImage name="yes" title="Included" />,
'data-grid/edit-row': <IconImage name="yes" title="Included" />,
'data-grid/edit-cell': <IconImage name="yes" title="Included" />,
'data-grid/file-csv': <IconImage name="yes" title="Included" />,
'data-grid/file-print': <IconImage name="time" title="Work in progress" />,
'data-grid/file-clipboard': <IconImage name="time" title="Work in progress" />,
'data-grid/file-excel': <IconImage name="no" title="Not included" />,
'data-grid/customizable-components': <IconImage name="yes" title="Included" />,
'data-grid/virtualize-column': <IconImage name="yes" title="Included" />,
'data-grid/virtualize-row': <IconImage name="yes" title="Included" />,
'data-grid/tree-data': <IconImage name="time" title="Work in progress" />,
'data-grid/master-detail': <IconImage name="time" title="Work in progress" />,
'data-grid/grouping': <IconImage name="time" title="Work in progress" />,
'data-grid/aggregation': <IconImage name="time" title="Work in progress" />,
'data-grid/pivoting': <IconImage name="time" title="Work in progress" />,
'data-grid/accessibility': <IconImage name="yes" title="Included" />,
'data-grid/keyboard-nav': <IconImage name="yes" title="Included" />,
'data-grid/localization': <IconImage name="yes" title="Included" />,
'data-grid-pro': <Info value="1 year" />,
'date-range-picker': <IconImage name="time" />,
'date-range-picker': <IconImage name="time" title="Work in progress" />,
// Support
community: <IconImage name="yes" />,
'bugs/features': <Info value={<IconImage name="yes" />} metadata="Priority over Pro" />,
'tech-advisory': <IconImage name="time" />,
community: <IconImage name="yes" title="Included" />,
'bugs/features': (
<Info value={<IconImage name="yes" title="Included" />} metadata="Priority over Pro" />
),
'tech-advisory': <IconImage name="time" title="Work in progress" />,
'support-duration': <Info value="1 year" />,
'response-time': <Info value="2 business days" metadata="1 business day (priority only)" />,
'pre-screening': <Info value="4 hours" metadata="priority only" />,
'issue-escalation': <Info value={<IconImage name="time" />} metadata="priority only" />,
'issue-escalation': (
<Info value={<IconImage name="time" title="Work in progress" />} metadata="priority only" />
),
};

const RowCategory = (props: BoxProps) => (
Expand Down