diff --git a/plugins/stack-overflow/src/home/StackOverflowQuestions/Content.tsx b/plugins/stack-overflow/src/home/StackOverflowQuestions/Content.tsx index c347399474..fbc3a90a9d 100644 --- a/plugins/stack-overflow/src/home/StackOverflowQuestions/Content.tsx +++ b/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 ( {value.map(question => ( - - + + + {props.icon && {props.icon}} { - - + + ))} ); diff --git a/plugins/stack-overflow/src/home/StackOverflowQuestions/StackOverflowQuestions.stories.tsx b/plugins/stack-overflow/src/home/StackOverflowQuestions/StackOverflowQuestions.stories.tsx index e19e0f807b..35ace44c14 100644 --- a/plugins/stack-overflow/src/home/StackOverflowQuestions/StackOverflowQuestions.stories.tsx +++ b/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 = () => { ); }; + +export const WithIcon = () => { + return ( + + } + /> + + ); +}; diff --git a/plugins/stack-overflow/src/icons/StackOverflowIcon.tsx b/plugins/stack-overflow/src/icons/StackOverflowIcon.tsx new file mode 100644 index 0000000000..5e2139b4a8 --- /dev/null +++ b/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 ( + + + + + ); +}; diff --git a/plugins/stack-overflow/src/icons/index.ts b/plugins/stack-overflow/src/icons/index.ts new file mode 100644 index 0000000000..141d87d7b1 --- /dev/null +++ b/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'; diff --git a/plugins/stack-overflow/src/index.ts b/plugins/stack-overflow/src/index.ts index 264a0d5d7c..5965d66983 100644 --- a/plugins/stack-overflow/src/index.ts +++ b/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, diff --git a/plugins/stack-overflow/src/types.ts b/plugins/stack-overflow/src/types.ts index c3fa08cc4f..8f2d8847ec 100644 --- a/plugins/stack-overflow/src/types.ts +++ b/plugins/stack-overflow/src/types.ts @@ -34,6 +34,7 @@ export type StackOverflowQuestion = { */ export type StackOverflowQuestionsContentProps = { requestParams: StackOverflowQuestionsRequestParams; + icon?: React.ReactNode; }; /**