[OUI DOCS] Updated the content in the section Datagrid and schema (#288)

* Updated the content in the section Datagrid and schema Signed-off-by: AbhishekReddy1127 <[email protected]> * Updated the text Signed-off-by: AbhishekReddy1127 <[email protected]> --------- Signed-off-by: AbhishekReddy1127 <[email protected]> Co-authored-by: Sean Neumann <[email protected]> (cherry picked from commit 3b186da)
opensearch-project · Feb 27, 2023 · f05f6ec · f05f6ec
1 parent 2c7bc75
commit f05f6ec
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 23 deletions.
diff --git a/src-docs/src/views/datagrid/datagrid_example.js b/src-docs/src/views/datagrid/datagrid_example.js
@@ -120,29 +120,29 @@ const gridSnippet = `
       header: 'shade',
     }}
     // Optional. Provide additional schemas to use in the grid.
-    // This schema 'franchise' essentially acts like a boolean, looking for Star Wars or Star Trek in a column.
+    // This schema 'franchise' essentially acts like a boolean, looking for Oranges or Apples in a column.
     schemaDetectors={[
       {
         type: 'franchise',
         // Try to detect if column data is this schema. A value of 1 is the highest possible. A (mean_average - standard_deviation) of .5 will be good enough for the autodetector to assign.
         detector(value) {
-          return value.toLowerCase() === 'star wars' ||
-            value.toLowerCase() === 'star trek'
+          return value.toLowerCase() === 'oranges' ||
+            value.toLowerCase() === 'apples'
             ? 1
             : 0;
         },
         // How we should sort data matching this schema. Again, a value of 1 is the highest value.
         comparator(a, b, direction) {
-          const aValue = a.toLowerCase() === 'star wars';
-          const bValue = b.toLowerCase() === 'star wars';
+          const aValue = a.toLowerCase() === 'oranges';
+          const bValue = b.toLowerCase() === 'oranges';
           if (aValue < bValue) return direction === 'asc' ? 1 : -1;
           if (aValue > bValue) return direction === 'asc' ? -1 : 1;
           return 0;
         },
         // Text for what the ASC sort does.
-        sortTextAsc: 'Star Wars-Star Trek',
+        sortTextAsc: 'Oranges-Apples',
         // Text for what the DESC sort does.
-        sortTextDesc: 'Star Trek-Star Wars',
+        sortTextDesc: 'Apples-Oranges',
         // OuiIcon or Token to signify this schema.
         icon: 'star',
         // The color to use for the icon token.

diff --git a/src-docs/src/views/datagrid/schema.js b/src-docs/src/views/datagrid/schema.js
@@ -52,7 +52,7 @@ for (let i = 1; i < 5; i++) {
   let json;
   let franchise;
   if (i < 3) {
-    franchise = 'Star Wars';
+    franchise = 'Oranges';
     json = JSON.stringify([
       {
         default: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
@@ -64,7 +64,7 @@ for (let i = 1; i < 5; i++) {
       },
     ]);
   } else {
-    franchise = 'Star Trek';
+    franchise = 'Apples';
     json = JSON.stringify([
       {
         name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
@@ -87,26 +87,26 @@ const Franchise = (props) => {
   return (
     <div>
       <OuiTitle size="s">
-        <h3>{props.name} is the best!</h3>
+        <h3>{props.name}</h3>
       </OuiTitle>
       <OuiSpacer size="s" />
-      {props.name === 'Star Wars' ? (
+      {props.name === 'Oranges' ? (
         <OuiImage
           allowFullScreen
           size="m"
           hasShadow
-          caption="Random star wars image"
-          alt="Random star wars image"
-          url="https://source.unsplash.com/600x600/?starwars"
+          caption="Random Oranges image"
+          alt="Random Oranges image"
+          url="https://source.unsplash.com/600x600/?oranges"
         />
       ) : (
         <OuiImage
           allowFullScreen
           size="m"
           hasShadow
-          caption="Random star trek image"
-          alt="Random trek image"
-          url="https://source.unsplash.com/600x600/?startrek"
+          caption="Random Apples image"
+          alt="Random Apples image"
+          url="https://source.unsplash.com/600x600/?apples"
         />
       )}
     </div>
@@ -193,20 +193,20 @@ const DataGridSchema = () => {
           type: 'favoriteFranchise',
           textTransform: 'capitalize',
           detector(value) {
-            return value.toLowerCase() === 'star wars' ||
-              value.toLowerCase() === 'star trek'
+            return value.toLowerCase() === 'oranges' ||
+              value.toLowerCase() === 'apples'
               ? 1
               : 0;
           },
           comparator(a, b, direction) {
-            const aValue = a.toLowerCase() === 'star wars';
-            const bValue = b.toLowerCase() === 'star wars';
+            const aValue = a.toLowerCase() === 'oranges';
+            const bValue = b.toLowerCase() === 'oranges';
             if (aValue < bValue) return direction === 'asc' ? 1 : -1;
             if (aValue > bValue) return direction === 'asc' ? -1 : 1;
             return 0;
           },
-          sortTextAsc: 'Star wars-Star trek',
-          sortTextDesc: 'Star trek-Star wars',
+          sortTextAsc: 'Oranges-Apples',
+          sortTextDesc: 'Apples-Oranges',
           icon: 'starFilled',
           color: '#800080',
         },