feat(docs): update search page to use new layout (#736)

* feat(docs): update search page to use new layout * feat(docs): update code based on code review
bigcommerce · Feb 24, 2022 · e1a3698 · e1a3698
1 parent 60117f6
commit e1a3698
Showing 1 changed file with 61 additions and 55 deletions.
diff --git a/packages/docs/pages/search.tsx b/packages/docs/pages/search.tsx
@@ -1,7 +1,7 @@
-import { Box, H1, Panel, Search, Table } from '@bigcommerce/big-design';
+import { Box, H1, Panel, Search, Table, Text } from '@bigcommerce/big-design';
 import React, { useState } from 'react';
 
-import { CodePreview, PageNavigation } from '../components';
+import { CodePreview, GuidelinesTable, List } from '../components';
 import { SearchPropTable } from '../PropTables';
 
 const data = [
@@ -15,64 +15,70 @@ const data = [
 ];
 
 const SearchPage = () => {
-  const items = [
-    {
-      id: 'examples',
-      title: 'Examples',
-      render: () => (
-        <>
-          <Panel>
-            <CodePreview scope={{ data }}>
-              {/* jsx-to-string:start */}
-              {function Example() {
-                const [items, setItems] = useState(data);
-                const [searchValue, setSearchValue] = useState('');
-                const onChange = (event: React.ChangeEvent<HTMLInputElement>) => setSearchValue(event.target.value);
+  return (
+    <>
+      <H1>Search</H1>
 
-                const onSubmit = () => {
-                  setItems((prevItems) => {
-                    if (searchValue) {
-                      return prevItems.filter((item) => item.name.includes(searchValue));
-                    }
+      <Panel header="Overview" headerId="overview">
+        <Text>The search bar allows a user to easily find information within columns.</Text>
+        <Text bold>When to use:</Text>
+        <List>
+          <List.Item>To search a list or create filters within a table.</List.Item>
+          <List.Item>Find specific information within a page.</List.Item>
+        </List>
+      </Panel>
 
-                    return data;
-                  });
-                };
+      <Panel header="Implementation" headerId="implementation">
+        <CodePreview scope={{ data }}>
+          {/* jsx-to-string:start */}
+          {function Example() {
+            const [items, setItems] = useState(data);
+            const [searchValue, setSearchValue] = useState('');
+            const onChange = (event: React.ChangeEvent<HTMLInputElement>) => setSearchValue(event.target.value);
 
-                return (
-                  <>
-                    <Box marginBottom="medium">
-                      <Search value={searchValue} onChange={onChange} onSubmit={onSubmit} />
-                    </Box>
-                    <Table
-                      columns={[
-                        { header: 'Sku', hash: 'sku', render: ({ sku }) => sku },
-                        { header: 'Name', hash: 'name', render: ({ name }) => name },
-                        { header: 'Stock', hash: 'stock', render: ({ stock }) => stock },
-                      ]}
-                      items={items}
-                    />
-                  </>
-                );
-              }}
-              {/* jsx-to-string:end */}
-            </CodePreview>
-          </Panel>
-        </>
-      ),
-    },
-    {
-      id: 'props',
-      title: 'Props',
-      render: () => <SearchPropTable />,
-    },
-  ];
+            const onSubmit = () => {
+              setItems((prevItems) => {
+                if (searchValue) {
+                  return prevItems.filter((item) => item.name.includes(searchValue));
+                }
 
-  return (
-    <>
-      <H1>Search</H1>
+                return data;
+              });
+            };
+
+            return (
+              <>
+                <Box marginBottom="medium">
+                  <Search value={searchValue} onChange={onChange} onSubmit={onSubmit} />
+                </Box>
+                <Table
+                  columns={[
+                    { header: 'Sku', hash: 'sku', render: ({ sku }) => sku },
+                    { header: 'Name', hash: 'name', render: ({ name }) => name },
+                    { header: 'Stock', hash: 'stock', render: ({ stock }) => stock },
+                  ]}
+                  items={items}
+                />
+              </>
+            );
+          }}
+          {/* jsx-to-string:end */}
+        </CodePreview>
+      </Panel>
+
+      <Panel header="Props" headerId="props">
+        <SearchPropTable renderPanel={false} />
+      </Panel>
 
-      <PageNavigation items={items} />
+      <Panel header="Do's and Don'ts" headerId="guidelines">
+        <GuidelinesTable
+          recommended={[
+            'Make the search bar easily noticable.',
+            'Always use a search icon within the input box to indicate search functionality.',
+          ]}
+          discouraged={['Avoid using a search bar when there is small, easily navigable amount of data on a page.']}
+        />
+      </Panel>
     </>
   );
 };