diff --git a/packages/core/src/components/NavButton/NavButton.stories.tsx b/packages/core/src/components/NavButton/NavButton.stories.tsx new file mode 100644 index 0000000000..10ed2286cb --- /dev/null +++ b/packages/core/src/components/NavButton/NavButton.stories.tsx @@ -0,0 +1,95 @@ +/* + * Copyright 2020 Spotify AB + * + * 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, { FunctionComponentFactory } from 'react'; +import { NavButton } from './NavButton'; +import { + MemoryRouter, + Route, + useLocation, + NavLink as RouterNavLink, +} from 'react-router-dom'; +import { createRouteRef } from '@backstage/core-api'; + +const Location = () => { + const location = useLocation(); + return 
Current location: {location.pathname}
; +}; + +export default { + title: 'NavButton', + component: NavButton, + decorators: [ + (storyFn: FunctionComponentFactory<{}>) => ( + +
+
+ +
+ {storyFn()} +
+ + ), + ], +}; + +export const Default = () => { + const routeRef = createRouteRef({ + icon: () => null, + path: '/hello', + title: 'Hi there!', + }); + + return ( + <> + This button will utilise + the react-router MemoryRouter's navigation + +

{routeRef.title}

+ + + ); +}; + +export const PassProps = () => { + const routeRef = createRouteRef({ + icon: () => null, + path: '/hello', + title: 'Hi there!', + }); + + return ( + <> + + This link + +  has props for both material-ui's component as well as for + react-router-dom's + +

{routeRef.title}

+ + + ); +}; +PassProps.story = { + name: `Accepts material-ui Button's and react-router-dom Link's props`, +}; diff --git a/packages/core/src/components/NavButton/NavButton.test.jsx b/packages/core/src/components/NavButton/NavButton.test.jsx new file mode 100644 index 0000000000..7562b70b0e --- /dev/null +++ b/packages/core/src/components/NavButton/NavButton.test.jsx @@ -0,0 +1,40 @@ +/* + * Copyright 2020 Spotify AB + * + * 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'; +import { render, fireEvent } from '@testing-library/react'; +import { wrapInTestApp } from '@backstage/test-utils'; +import { NavButton } from './NavButton'; +import { MemoryRouter, Route } from 'react-router'; +import { act } from 'react-dom/test-utils'; + +describe('', () => { + it('navigates using react-router', async () => { + const testString = 'This is test string'; + const buttonLabel = 'Navigate!'; + const { getByText } = render( + wrapInTestApp( + + {buttonLabel} + {testString}{' '} + , + ), + ); + expect(() => getByText(testString)).toThrow(); + await act(async () => fireEvent.click(getByText(buttonLabel))); + expect(getByText(testString)).toBeInTheDocument(); + }); +}); diff --git a/packages/core/src/components/NavButton/NavButton.tsx b/packages/core/src/components/NavButton/NavButton.tsx new file mode 100644 index 0000000000..a2bca07934 --- /dev/null +++ b/packages/core/src/components/NavButton/NavButton.tsx @@ -0,0 +1,29 @@ +/* + * Copyright 2020 Spotify AB + * + * 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, { ComponentProps } from 'react'; +import { Button } from '@material-ui/core'; +import { Link as RouterLink } from 'react-router-dom'; + +type Props = ComponentProps & ComponentProps; + +/** + * Thin wrapper on top of material-ui's Button component + * Makes the Button to utilise react-router + */ +export const NavButton = React.forwardRef((props, ref) => ( +