diff --git a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs index ac101c6583..c49d7faebb 100644 --- a/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs +++ b/packages/cli/templates/default-plugin/src/components/ExampleComponent/ExampleComponent.tsx.hbs @@ -8,6 +8,7 @@ import { Content, ContentHeader, HeaderLabel, + SupportButton, } from '@spotify-backstage/core'; import ExampleFetchComponent from '../ExampleFetchComponent'; @@ -18,7 +19,9 @@ const ExampleComponent: FC<{}> = () => ( - + + A description of your plugin goes here. + ({ + leftIcon: { + marginRight: theme.spacing(1), + }, + popoverList: { + minWidth: 260, + maxWidth: 320, + }, +})); + +const SupportButton: FC = ({ + slackChannel = '#backstage', + email = [], + children, + // plugin, +}) => { + // TODO: get plugin manifest with hook + + const [popoverOpen, setPopoverOpen] = useState(false); + const [anchorEl, setAnchorEl] = useState(null); + const classes = useStyles(); + + const onClickHandler = event => { + setAnchorEl(event.currentTarget); + setPopoverOpen(true); + }; + + const popoverCloseHandler = () => { + setPopoverOpen(false); + }; + + // const tags = plugin ? plugin.stackoverflowTags : undefined; + const slackChannels = Array.isArray(slackChannel) + ? slackChannel + : [slackChannel]; + const contactEmails = Array.isArray(email) ? email : [email]; + + return ( + + + + + {React.Children.map(children, (child, i) => ( + + {child} + + ))} + {/* {tags && tags.length > 0 && ( + + + {tags.map((tag, i) => ( + + ))} + + + )} */} + {slackChannels && ( + + + + + + {slackChannels.map((channel, i) => ( + {channel} + ))} + + } + /> + + )} + {contactEmails.length > 0 && ( + + + + + + {contactEmails.map((email, index) => ( + + {email} + + ))} + + )} + + + + ); +}; + +export default SupportButton; diff --git a/packages/core/src/components/SupportButton/index.ts b/packages/core/src/components/SupportButton/index.ts new file mode 100644 index 0000000000..1e0974b2a2 --- /dev/null +++ b/packages/core/src/components/SupportButton/index.ts @@ -0,0 +1 @@ +export { default } from './SupportButton'; diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 41f193853d..9c84e12416 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -18,5 +18,6 @@ export { default as HorizontalScrollGrid } from './components/HorizontalScrollGr export { default as ProgressCard } from './components/ProgressCard'; export { default as CircleProgress } from './components/CircleProgress'; export { default as Progress } from './components/Progress'; +export { default as SupportButton } from './components/SupportButton'; export { default as SortableTable } from './components/SortableTable'; export { default as TemplateList } from './components/TemplateList/TemplateList';