diff --git a/packages/docs/pages/search.tsx b/packages/docs/pages/search.tsx index 6cc0dfb5f..7011570b7 100644 --- 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> </> ); };