Merge pull request #15 from react-storefront-community/feature/breadcrumbs

feat: Add Breadcrumbs component

Author: markbrocato

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-storefront",
-  "version": "7.0.0-alpha.8",
+  "version": "7.0.0",
   "description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.",
   "module": "./index.js",
   "license": "Apache-2.0",

src/Breadcrumbs.js

@@ -0,0 +1,75 @@
+import React from 'react'
+import { KeyboardArrowRight as ArrowRight } from '@material-ui/icons'
+import Link from './link/Link'
+import clsx from 'clsx'
+import { Typography, Container } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core/styles'
+import PropTypes from 'prop-types'
+
+export const styles = theme => ({
+  breadcrumbs: {
+    backgroundColor: '#F4F2F1',
+    padding: '12px 0',
+
+    '& a': {
+      color: theme.palette.text.primary,
+      textDecoration: 'none',
+    },
+  },
+
+  separator: {
+    height: '12px',
+    position: 'relative',
+    top: '2px',
+    width: '16px',
+  },
+
+  current: {
+    fontWeight: 'bold',
+    color: theme.palette.text.primary,
+  },
+})
+
+const useStyles = makeStyles(styles, 'RSFBreadcrumbs')
+
+export default function Breadcrumbs({ items, classes }) {
+  classes = useStyles({ classes })
+
+  return (
+    <Typography display="block" className={classes.breadcrumbs} variant="caption">
+      <Container>
+        {items &&
+          items.map((item, i) => {
+            const arrow = i > 0 ? <ArrowRight className={classes.separator} /> : null
+            const isLastItem = items.length - 1 === i
+
+            if (item.href) {
+              return (
+                <span key={i} className={clsx(isLastItem && classes.current)}>
+                  {arrow}
+                  <Link href={item.href} as={item.as}>
+                    {item.text}
+                  </Link>
+                </span>
+              )
+            } else {
+              return (
+                <span key={i} className={clsx(isLastItem && classes.current)}>
+                  {arrow}
+                  {item.text}
+                </span>
+              )
+            }
+          })}
+        <span>&nbsp;</span>
+      </Container>
+    </Typography>
+  )
+}
+
+Breadcrumbs.propTypes = {
+  /**
+   * The items to display, each with url, text, and state.
+   */
+  items: PropTypes.arrayOf(PropTypes.objectOf),
+}

test/BreadCrumbs.test.js

@@ -0,0 +1,36 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import Breadcrumbs from 'react-storefront/Breadcrumbs'
+import { Typography, Container } from '@material-ui/core'
+
+describe('Breadcrumbs', () => {
+  let wrapper
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('should render empty span when no items provided', () => {
+    wrapper = mount(<Breadcrumbs items={null} />)
+
+    expect(wrapper.find(Container).children.length).toBe(1)
+  })
+
+  it('should apply bold style to last item', () => {
+    const items = [{ text: 'test1' }, { text: 'test2' }]
+    wrapper = mount(<Breadcrumbs items={items} />)
+
+    expect(
+      wrapper
+        .findWhere(item => item.type() === 'span' && item.text() === 'test2')
+        .prop('className'),
+    ).toContain('current')
+  })
+
+  it('should render items with href as a link', () => {
+    const items = [{ text: 'test1', href: '/test' }]
+    wrapper = mount(<Breadcrumbs items={items} />)
+
+    expect(wrapper.find('a').text()).toBe('test1')
+  })
+})