[docs] Add clipboard paste to popular features demo (#9029)

mui · Jun 15, 2023 · e0ef81c · e0ef81c
1 parent 33411d8
commit e0ef81c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 2 deletions.
diff --git a/docs/data/data-grid/clipboard/clipboard.md b/docs/data/data-grid/clipboard/clipboard.md
@@ -17,6 +17,16 @@ The priority of the data copied to the clipboard is the following, from highest
 
 ## Clipboard paste [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan)
 
+:::info
+
+<details style="margin: 0">
+  <summary markdown="span">Video preview</summary>
+  <video muted loop playsinline controls style="margin-top: 8px">
+    <source src="https://github-production-user-asset-6210df.s3.amazonaws.com/13808724/237996024-abfcb5c6-9db6-4677-9ba7-ae97de441080.mov" type="video/mp4" />
+  </video>
+</details>
+:::
+
 :::warning
 This feature is experimental, it needs to be explicitly activated using the `clipboardPaste` experimental feature flag.
 

diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.js b/docs/data/data-grid/demo/PopularFeaturesDemo.js
@@ -32,6 +32,7 @@ import EditingWithDatePickers from '../recipes-editing/EditingWithDatePickers';
 import CellSelectionGrid from '../cell-selection/CellSelectionRangeStyling';
 import AddNewColumnMenuGrid from '../column-menu/AddNewColumnMenuGrid';
 import HeaderFiltering from '../filtering/HeaderFilteringDataGridPro';
+import ClipboardPaste from '../clipboard/ClipboardPaste';
 
 export const featuresSet = [
   {
@@ -186,6 +187,16 @@ export const featuresSet = [
     demo: <AddNewColumnMenuGrid />,
     newBadge: true,
   },
+  {
+    id: 19,
+    name: 'Clipboard paste',
+    description:
+      'Copy and paste the selected cells and rows using the copy/paste keyboard shortcuts.',
+    plan: 'Premium',
+    detailPage: '/clipboard/#clipboard-paste',
+    demo: <ClipboardPaste />,
+    newBadge: true,
+  },
   {
     id: 20,
     name: 'Header filters',

diff --git a/docs/data/data-grid/demo/PopularFeaturesDemo.tsx b/docs/data/data-grid/demo/PopularFeaturesDemo.tsx
@@ -37,6 +37,7 @@ import EditingWithDatePickers from '../recipes-editing/EditingWithDatePickers';
 import CellSelectionGrid from '../cell-selection/CellSelectionRangeStyling';
 import AddNewColumnMenuGrid from '../column-menu/AddNewColumnMenuGrid';
 import HeaderFiltering from '../filtering/HeaderFilteringDataGridPro';
+import ClipboardPaste from '../clipboard/ClipboardPaste';
 
 type Row = {
   id: number;
@@ -201,6 +202,16 @@ export const featuresSet: Row[] = [
     demo: <AddNewColumnMenuGrid />,
     newBadge: true,
   },
+  {
+    id: 19,
+    name: 'Clipboard paste',
+    description:
+      'Copy and paste the selected cells and rows using the copy/paste keyboard shortcuts.',
+    plan: 'Premium',
+    detailPage: '/clipboard/#clipboard-paste',
+    demo: <ClipboardPaste />,
+    newBadge: true,
+  },
   {
     id: 20,
     name: 'Header filters',

diff --git a/docs/data/pages.ts b/docs/data/pages.ts
@@ -88,11 +88,11 @@ const pages: MuiPage[] = [
         pathname: '/x/react-data-grid/selection',
         children: [
           { pathname: '/x/react-data-grid/row-selection' },
-          { pathname: '/x/react-data-grid/cell-selection', plan: 'premium' },
+          { pathname: '/x/react-data-grid/cell-selection', plan: 'premium', newFeature: true },
         ],
       },
       { pathname: '/x/react-data-grid/export' },
-      { pathname: '/x/react-data-grid/clipboard', title: 'Copy and paste' },
+      { pathname: '/x/react-data-grid/clipboard', title: 'Copy and paste', newFeature: true },
       { pathname: '/x/react-data-grid/components' },
       { pathname: '/x/react-data-grid/style' },
       { pathname: '/x/react-data-grid/localization' },