[docs] Clarify feature split between pro and premium (mui#779)

docs/pages/_app.js

@@ -25,6 +25,7 @@ import pages from 'docsx/src/pages';
 import initRedux from 'docs/src/modules/redux/initRedux';
 import PageContext from 'docs/src/modules/components/PageContext';
 import GoogleAnalytics from 'docs/src/modules/components/GoogleAnalytics';
+import XWrapper from 'docsx/src/modules/XWrapper';
 import loadScript from 'docs/src/modules/utils/loadScript';
 import { ThemeProvider } from 'docs/src/modules/components/ThemeContext';
 import { pathnameToLanguage, getCookie } from 'docs/src/modules/utils/helpers';
@@ -365,7 +366,9 @@ function AppWrapper(props) {
       <ReduxProvider store={redux}>
         <PageContext.Provider value={{ activePage, pages, versions: pageProps.versions }}>
           <StylesProvider jss={jss}>
-            <ThemeProvider>{children}</ThemeProvider>
+            <ThemeProvider>
+              <XWrapper>{children}</XWrapper>
+            </ThemeProvider>
           </StylesProvider>
         </PageContext.Provider>
         <LanguageNegotiation />

docs/src/modules/XWrapper.js

@@ -0,0 +1,28 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles({
+  '@global': {
+    '.pro, .premium': {
+      display: 'inline-block',
+      height: '1em',
+      verticalAlign: 'middle',
+      marginLeft: 2,
+      marginRight: 2,
+      backgroundSize: 'contain',
+      backgroundRepeat: 'no-repeat',
+    },
+    '.pro': {
+      width: `${24 / 18}em`,
+      backgroundImage: 'url(/static/x/pro.svg)',
+    },
+    '.premium': {
+      width: `${33 / 18}em`,
+      backgroundImage: 'url(/static/x/premium.svg)',
+    },
+  },
+});
+
+export default function XWrapper(props) {
+  useStyles();
+  return props.children;
+}

docs/src/pages/components/data-grid/columns/columns.md

@@ -65,7 +65,7 @@ In addition, `flex` does not work if the combined width of the columns that have
 
 {{"demo": "pages/components/data-grid/columns/ColumnFluidWidthGrid.js", "bg": "inline"}}
 
-## Column resizing [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
+## Column resizing [<span class="pro"></span>](https://material-ui.com/store/items/material-ui-x/)
 
 By default, `XGrid` allows all columns to be resized by dragging the right portion of the column separator.
 
@@ -128,12 +128,14 @@ By default, each column header displays a column menu. The column menu allows ac
 ## Column selector
 
 To enable the column selector in the toolbar you need to add the `showToolbar` prop to the data grid.
+
 In addition, the column selector can be shown by using the "Show columns" menu item in the column menu.
+
 The user can choose which columns are visible using the column selector from the toolbar.
 
 {{"demo": "pages/components/data-grid/columns/ColumnSelectorGrid.js", "bg": "inline"}}
 
-## Column reorder [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
+## Column reorder [<span class="pro"></span>](https://material-ui.com/store/items/material-ui-x/)
 
 By default, `XGrid` allows all column reordering by dragging the header cells and moving them left or right.
 
@@ -157,7 +159,7 @@ In addition, column reordering emits the following events that can be imported:
 
 Grouping columns allows you to have multiple levels of columns in your header and the ability, if needed, to 'open and close' column groups to show and hide additional columns.
 
-## 🚧 Column pinning [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
+## 🚧 Column pinning [<span class="pro"></span>](https://material-ui.com/store/items/material-ui-x/)
 
 > ⚠️ This feature isn't implemented yet. It's coming.
 >

docs/src/pages/components/data-grid/export/export.md

@@ -23,15 +23,15 @@ You will be able to export the displayed data to CSV with an API call, or using
 
 Optimization of the layout of the grid for print mode. It can also be used to export to PDF.
 
-## 🚧 Excel export [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
+## 🚧 Excel export [<span class="premium"></span>](https://material-ui.com/store/items/material-ui-x/)
 
 > ⚠️ This feature isn't implemented yet. It's coming.
 >
 > 👍 Upvote [issue #198](https://github.com/mui-org/material-ui-x/issues/198) if you want to see it land faster.
 
 You will be able to export the displayed data to Excel with an API call, or using the grid UI.
 
-## 🚧 Clipboard [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
+## 🚧 Clipboard [<span class="premium"></span>](https://material-ui.com/store/items/material-ui-x/)
 
 > ⚠️ This feature isn't implemented yet. It's coming.
 >

docs/src/pages/components/data-grid/filtering/filtering.md

@@ -64,7 +64,7 @@ WIP
 
 WIP
 
-### Multi-column filtering ⚡️
+### Multi-column filtering <span class="pro"></span>
 
 `XGrid` supports filtering by multiple columns.
 The default operator that will be applied between filters is an And.
@@ -85,7 +85,7 @@ const filterModel: FilterModel = {
 
 {{"demo": "pages/components/data-grid/filtering/MultiFilteringWithOrGrid.js", "bg": "inline"}}
 
-### apiRef ⚡️
+### apiRef <span class="pro"></span>
 
 <!-- https://master--material-ui-x.netlify.app/components/data-grid/rows/#apiref -->