diff --git a/packages/core/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx b/packages/core/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx new file mode 100644 index 0000000000..18569a8dad --- /dev/null +++ b/packages/core/src/layout/Breadcrumbs/Breadcrumbs.stories.tsx @@ -0,0 +1,45 @@ +/* + * 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 { Breadcrumbs } from '.'; + +export default { + title: 'Layout/Breadcrumbs', + component: Breadcrumbs, +}; + +const pages = [ + { + href: '/', + name: 'A', + }, + { + href: '/', + name: 'B', + }, + { + href: '/', + name: 'C', + }, + { + href: '/', + name: 'D', + }, +]; + +// export const InHeader = () => ; +export const OutsideOfHeader = () => ; +// export const ExampleUsage = () => ; diff --git a/packages/core/src/layout/Breadcrumbs/Breadcrumbs.test.tsx b/packages/core/src/layout/Breadcrumbs/Breadcrumbs.test.tsx new file mode 100644 index 0000000000..f3b69cc361 --- /dev/null +++ b/packages/core/src/layout/Breadcrumbs/Breadcrumbs.test.tsx @@ -0,0 +1,15 @@ +/* + * 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. + */ diff --git a/packages/core/src/layout/Breadcrumbs/Breadcrumbs.tsx b/packages/core/src/layout/Breadcrumbs/Breadcrumbs.tsx new file mode 100644 index 0000000000..78761d9db2 --- /dev/null +++ b/packages/core/src/layout/Breadcrumbs/Breadcrumbs.tsx @@ -0,0 +1,93 @@ +/* + * 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 { + Link, + Typography, + Breadcrumbs as MUIBreadcrumbs, + Popover, + withStyles, +} from '@material-ui/core'; + +type BreadcrumbPage = { + href: string; + name: string; +}; + +type BreadcrumbsProps = { + pages: (BreadcrumbPage | BreadcrumbPage)[]; +}; + +const UnderlinedText = withStyles({ root: { textDecoration: 'underline' } })( + Typography, +); + +const Breadcrumb = ({ page }: { page: BreadcrumbPage }) => ( + + {page.name} + +); + +// Should propbably take Routes instead, to work with the react-router +export const Breadcrumbs = ({ pages }: BreadcrumbsProps) => { + const [anchorEl, setAnchorEl] = React.useState( + null, + ); + const hasHiddenBreadcrumbs = pages.length > 3; + const [firstPage, secondPage, ...expandablePages] = pages; + const currentPage = pages[pages.length - 1]; + + const handleClick = (event: React.MouseEvent) => { + setAnchorEl(event.currentTarget); + }; + + const handleClose = () => { + setAnchorEl(null); + }; + + const open = Boolean(anchorEl); + + return ( + + {firstPage && pages.length > 1 && } + {secondPage && pages.length > 2 && } + {hasHiddenBreadcrumbs && ( + ... + )} + {currentPage && {currentPage.name}} + + The content of the Popover. + + + ); +}; diff --git a/packages/core/src/layout/Breadcrumbs/index.ts b/packages/core/src/layout/Breadcrumbs/index.ts new file mode 100644 index 0000000000..6c5c2539df --- /dev/null +++ b/packages/core/src/layout/Breadcrumbs/index.ts @@ -0,0 +1,17 @@ +/* + * 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. + */ + +export { Breadcrumbs } from './Breadcrumbs'; diff --git a/packages/core/src/layout/index.ts b/packages/core/src/layout/index.ts index d97d30982e..2ab1ebaf5b 100644 --- a/packages/core/src/layout/index.ts +++ b/packages/core/src/layout/index.ts @@ -28,3 +28,4 @@ export * from './Page'; export * from './Sidebar'; export * from './SignInPage'; export * from './TabbedCard'; +export * from './Breadcrumbs';