[Home] first homepage template to storybook + two more home components (#8434)

* add new toolkit component Signed-off-by: Emma Indal <emmai@spotify.com> * add toolkit content test Signed-off-by: Emma Indal <emmai@spotify.com> * add key to toolkit items Signed-off-by: Emma Indal <emmai@spotify.com> * add reusable company logo component Signed-off-by: Emma Indal <emmai@spotify.com> * export root ref from search plugin Signed-off-by: Emma Indal <emmai@spotify.com> * add homepage template to storybook Signed-off-by: Emma Indal <emmai@spotify.com> * export new homepage components from plugin Signed-off-by: Emma Indal <emmai@spotify.com> * fix imports Signed-off-by: Emma Indal <emmai@spotify.com> * add search plugin to dependencies Signed-off-by: Emma Indal <emmai@spotify.com> * add home plugin changeset Signed-off-by: Emma Indal <emmai@spotify.com> * add storybook changeset Signed-off-by: Emma Indal <emmai@spotify.com> * delete changeset for storybook Signed-off-by: Emma Indal <emma.indahl@gmail.com> * delete duplicated search context provider Signed-off-by: Emma Indal <emmai@spotify.com> * use list item text props Signed-off-by: Emma Indal <emmai@spotify.com> * update home plugin documentation + add customize app docs Signed-off-by: Emma Indal <emmai@spotify.com> * named exports Signed-off-by: Emma Indal <emmai@spotify.com> * add homepage components to storybook Signed-off-by: Emma Indal <emmai@spotify.com> * use app config as default for company logo Signed-off-by: Emma Indal <emmai@spotify.com> * rename homepage template Signed-off-by: Emma Indal <emmai@spotify.com> * use props instead of context for tools, update Content component of card extension to accept props Signed-off-by: Emma Indal <emmai@spotify.com> * fix api reports + docstrings + markers Signed-off-by: Emma Indal <emmai@spotify.com> * export ToolkitContentProps instead of Tool Signed-off-by: Emma Indal <emmai@spotify.com> * docs and stories fixups Signed-off-by: Emma Indal <emmai@spotify.com> * do not export rootRouteRef from search plugin Signed-off-by: Emma Indal <emmai@spotify.com> * update docs links Signed-off-by: Emma Indal <emmai@spotify.com> * change unpacking of props Signed-off-by: Emma Indal <emmai@spotify.com> * delete extra fragment Signed-off-by: Emma Indal <emmai@spotify.com> * fixup searchbar border styles Signed-off-by: Emma Indal <emmai@spotify.com>
2022-01-10 11:40:07 +01:00
parent 5b516c1395
commit bdf1419d20
23 changed files with 833 additions and 33 deletions
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2021 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { rootRouteRef, HomePageSearchBar } from '../../plugin';
+import { searchApiRef } from '../../apis';
+import { wrapInTestApp, TestApiProvider } from '@backstage/test-utils';
+import { Grid, makeStyles } from '@material-ui/core';
+import React, { ComponentType } from 'react';
+
+export default {
+  title: 'Plugins/Home/Components/SearchBar',
+  decorators: [
+    (Story: ComponentType<{}>) =>
+      wrapInTestApp(
+        <>
+          <TestApiProvider
+            apis={[
+              [searchApiRef, { query: () => Promise.resolve({ results: [] }) }],
+            ]}
+          >
+            <Story />
+          </TestApiProvider>
+        </>,
+        {
+          mountedRoutes: { '/hello-search': rootRouteRef },
+        },
+      ),
+  ],
+};
+
+const useStyles = makeStyles(theme => ({
+  search: {
+    backgroundColor: theme.palette.background.paper,
+    boxShadow: theme.shadows[1],
+    maxWidth: '60vw',
+    display: 'flex',
+    justifyContent: 'space-between',
+    padding: '8px 0',
+    borderColor: 'transparent',
+    borderRadius: '50px',
+    margin: 'auto',
+  },
+}));
+
+export const Default = () => {
+  const { search } = useStyles();
+
+  return (
+    <Grid container justifyContent="center" spacing={6}>
+      <Grid container item xs={12} alignItems="center" direction="row">
+        <HomePageSearchBar className={search} placeholder="Search" />
+      </Grid>
+    </Grid>
+  );
+};