Merge pull request #8646 from backstage/feat/search-facet-by-type

[Search] Introduce a <SearchType.Accordion /> Variant

packages/create-app/templates/default-app/packages/app/src/components/search/SearchPage.tsx

@@ -11,7 +11,13 @@ import {
   SearchType,
   DefaultResultListItem,
 } from '@backstage/plugin-search';
-import { Content, Header, Page } from '@backstage/core-components';
+import {
+  CatalogIcon,
+  Content,
+  DocsIcon,
+  Header,
+  Page,
+} from '@backstage/core-components';
 
 const useStyles = makeStyles((theme: Theme) => ({
   bar: {
@@ -19,6 +25,7 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   filters: {
     padding: theme.spacing(2),
+    marginTop: theme.spacing(2),
   },
   filter: {
     '& + &': {
@@ -41,12 +48,23 @@ const SearchPage = () => {
             </Paper>
           </Grid>
           <Grid item xs={3}>
+            <SearchType.Accordion
+              name="Result Type"
+              defaultValue="software-catalog"
+              types={[
+                {
+                  value: 'software-catalog',
+                  name: 'Software Catalog',
+                  icon: <CatalogIcon />,
+                },
+                {
+                  value: 'techdocs',
+                  name: 'Documentation',
+                  icon: <DocsIcon />,
+                },
+              ]}
+            />
             <Paper className={classes.filters}>
-              <SearchType
-                values={['techdocs', 'software-catalog']}
-                name="type"
-                defaultValue="software-catalog"
-              />
               <SearchFilter.Select
                 className={classes.filter}
                 name="kind"