add support for icon property for StackOverflowQuestions homepage component

Signed-off-by: Emma Indal <emma.indahl@gmail.com>

plugins/stack-overflow/src/home/StackOverflowQuestions/Content.tsx

@@ -22,6 +22,7 @@ import {
   ListItem,
   ListItemText,
   ListItemSecondaryAction,
+  ListItemIcon,
 } from '@material-ui/core';
 import OpenInNewIcon from '@material-ui/icons/OpenInNew';
 import useAsync from 'react-use/lib/useAsync';
@@ -68,8 +69,9 @@ export const Content = (props: StackOverflowQuestionsContentProps) => {
   return (
     <List>
       {value.map(question => (
-        <ListItem key={question.link}>
-          <Link to={question.link}>
+        <Link to={question.link}>
+          <ListItem key={question.link}>
+            {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
             <ListItemText
               primary={question.title}
               secondary={getSecondaryText(question.answer_count)}
@@ -79,8 +81,8 @@ export const Content = (props: StackOverflowQuestionsContentProps) => {
                 <OpenInNewIcon />
               </IconButton>
             </ListItemSecondaryAction>
-          </Link>
-        </ListItem>
+          </ListItem>
+        </Link>
       ))}
     </List>
   );

plugins/stack-overflow/src/home/StackOverflowQuestions/StackOverflowQuestions.stories.tsx

@@ -20,6 +20,7 @@ import { configApiRef } from '@backstage/core-plugin-api';
 import { ConfigReader } from '@backstage/config';
 import { Grid } from '@material-ui/core';
 import React, { ComponentType } from 'react';
+import { StackOverflowIcon } from '../../icons';
 
 export default {
   title: 'Plugins/Home/Components/StackOverflow',
@@ -60,3 +61,18 @@ export const Default = () => {
     </Grid>
   );
 };
+
+export const WithIcon = () => {
+  return (
+    <Grid item xs={12} md={6}>
+      <HomePageStackOverflowQuestions
+        requestParams={{
+          tagged: 'backstage',
+          site: 'stackoverflow',
+          pagesize: 5,
+        }}
+        icon={<StackOverflowIcon />}
+      />
+    </Grid>
+  );
+};

plugins/stack-overflow/src/icons/StackOverflowIcon.tsx

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2022 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 React from 'react';
+
+export const StackOverflowIcon = () => {
+  return (
+    <svg
+      viewBox="0 0 125 125"
+      width="25"
+      height="25"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M84.021 75.825v31H11v-31H0v42h95v-42H84.021z" fill="#BCBBBB" />
+      <path
+        d="M21.057 96.825H74v-10H21.057v10zm1.058-23.915l51.428 10.794 2.117-10.265L24.23 62.645 22.115 72.91zm6.773-24.656l47.618 22.222 4.445-9.524L33.33 38.73l-4.444 9.524zm13.227-23.386l40.423 33.65 6.773-8.042-40.53-33.65-6.666 8.042zM68.147 0L59.68 6.243l31.323 42.222 8.465-6.243L68.147 0z"
+        fill="#F48024"
+      />
+    </svg>
+  );
+};

plugins/stack-overflow/src/icons/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2022 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.
+ */
+export * from './StackOverflowIcon';

plugins/stack-overflow/src/index.ts

@@ -18,11 +18,13 @@
  *
  * @packageDocumentation
  */
+
 export {
   stackOverflowPlugin,
   StackOverflowSearchResultListItem,
   HomePageStackOverflowQuestions,
 } from './plugin';
+export { StackOverflowIcon } from './icons';
 export type {
   StackOverflowQuestion,
   StackOverflowQuestionsContentProps,

plugins/stack-overflow/src/types.ts

@@ -34,6 +34,7 @@ export type StackOverflowQuestion = {
  */
 export type StackOverflowQuestionsContentProps = {
   requestParams: StackOverflowQuestionsRequestParams;
+  icon?: React.ReactNode;
 };
 
 /**