feat: add new breadcrumbs component
#215
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| # @zendeskgarden/react-breadcrumbs [](https://www.npmjs.com/package/@zendeskgarden/react-breadcrumbs) | ||
|
|
||
| This package includes components relating to breadcrumbs in the | ||
| [Garden Design System](https://zendeskgarden.github.io/). | ||
|
|
||
| ## Installation | ||
|
|
||
| ```sh | ||
| npm install @zendeskgarden/react-breadcrumbs | ||
|
|
||
| # Peer Dependencies - Also Required | ||
| npm install react react-dom prop-types styled-components @zendeskgarden/react-theming | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| ```jsx static | ||
| /** | ||
| * Include breadcrumbs styling at the root of your application | ||
| */ | ||
| import '@zendeskgarden/react-breadcrumbs/dist/styles.css'; | ||
|
|
||
| import { ThemeProvider } from '@zendeskgarden/react-theming'; | ||
| import { Breadcrumb, Item } from '@zendeskgarden/react-breadcrumbs'; | ||
| import { Anchor } from '@zendeskgarden/react-buttons'; | ||
|
|
||
| /** | ||
| * Place a `ThemeProvider` at the root of your React application | ||
| */ | ||
| <ThemeProvider> | ||
| <Breadcrumb> | ||
| <Anchor href="/">Root</Anchor> | ||
| <Anchor href="..">Parent</Anchor> | ||
| <Item>Self</Item> | ||
| </Breadcrumb> | ||
| </ThemeProvider>; | ||
| ``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| { | ||
| "name": "@zendeskgarden/react-breadcrumbs", | ||
| "description": "Components relating to breadcrumbs in the Garden Design System", | ||
| "license": "Apache-2.0", | ||
| "author": "Zendesk Garden <garden@zendesk.com>", | ||
| "homepage": "https://garden.zendesk.com/", | ||
| "repository": "https://github.com/zendeskgarden/react-components", | ||
| "bugs": { | ||
| "url": "https://github.com/zendeskgarden/react-components/issues" | ||
| }, | ||
| "version": "0.0.0", | ||
| "main": "./dist/index.js", | ||
| "files": [ | ||
| "dist" | ||
| ], | ||
| "scripts": { | ||
| "build": "../../utils/scripts/build.sh", | ||
| "build:demo": "../../utils/scripts/build-demo.sh", | ||
| "start": "../../utils/scripts/start.sh" | ||
| }, | ||
| "dependencies": { | ||
| "classnames": "^2.2.5" | ||
| }, | ||
| "peerDependencies": { | ||
| "@zendeskgarden/react-theming": "^1.0.0 || ^2.0.0 || ^3.0.0", | ||
| "prop-types": "^15.6.1", | ||
| "react": "^0.14.0 || ^15.0.0 || ^16.0.0", | ||
| "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0", | ||
| "styled-components": "^3.2.6" | ||
| }, | ||
| "devDependencies": { | ||
| "@zendeskgarden/css-breadcrumbs": "0.1.2", | ||
| "@zendeskgarden/react-theming": "^3.1.3", | ||
| "@zendeskgarden/react-utilities": "^0.2.2" | ||
| }, | ||
| "keywords": [ | ||
| "components", | ||
| "garden", | ||
| "react", | ||
| "zendesk" | ||
| ], | ||
| "publishConfig": { | ||
| "access": "public" | ||
| }, | ||
| "zendeskgarden:library": "GardenBreadcrumbs", | ||
| "zendeskgarden:src": "src/index.js" | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| ```jsx | ||
| const { Anchor } = require('@zendeskgarden/react-buttons/src'); | ||
|
|
||
| <BreadcrumbContainer> | ||
| {({ getContainerProps }) => ( | ||
| /* role not needed as `BreadcrumbView` is a navigation landmark. */ | ||
| <BreadcrumbView {...getContainerProps({ role: null })}> | ||
jzempel marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| <List> | ||
| <Item> | ||
| <Anchor>One</Anchor> | ||
| </Item> | ||
| <Item> | ||
| <Anchor>Two</Anchor> | ||
| </Item> | ||
| <Item current>Three</Item> | ||
| </List> | ||
| </BreadcrumbView> | ||
| )} | ||
| </BreadcrumbContainer>; | ||
| ``` | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /** | ||
| * Copyright Zendesk, Inc. | ||
| * | ||
| * Use of this source code is governed under the Apache License, Version 2.0 | ||
| * found at http://www.apache.org/licenses/LICENSE-2.0. | ||
| */ | ||
|
|
||
| import { Component } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| export default class BreadcrumbContainer extends Component { | ||
| static propTypes = { | ||
| /** | ||
| * @param {Object} renderProps | ||
| * @param {Function} renderProps.getContainerProps - Props to be spread onto containing element | ||
| */ | ||
| children: PropTypes.func, | ||
| /** | ||
| * Identical to children | ||
| */ | ||
| render: PropTypes.func | ||
| }; | ||
|
|
||
| getContainerProps = ({ role = 'navigation', ...other } = {}) => { | ||
| return { | ||
| role, | ||
| 'aria-label': 'Breadcrumb navigation', | ||
|
Contributor
There was a problem hiding this comment. Should we default this like role in the argument destructuring to make it more obvious to teams that they'll need to translate this? Should we mention in the readme example that we hard code an english value?
Contributor
There was a problem hiding this comment.
Not sure how clean this would be since we would be destructuring a hyphenated value?
Definitely.
Member
Author
There was a problem hiding this comment. @ryanseddon I added copy to the element example about expected override. But I don't think I can move |
||
| ...other | ||
| }; | ||
| }; | ||
|
|
||
| render() { | ||
| const { children, render = children } = this.props; | ||
|
|
||
| return render({ | ||
| getContainerProps: this.getContainerProps | ||
| }); | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| /** | ||
| * Copyright Zendesk, Inc. | ||
| * | ||
| * Use of this source code is governed under the Apache License, Version 2.0 | ||
| * found at http://www.apache.org/licenses/LICENSE-2.0. | ||
| */ | ||
|
|
||
| import React from 'react'; | ||
| import { mountWithTheme } from '@zendeskgarden/react-testing'; | ||
|
|
||
| import BreadcrumbContainer from './BreadcrumbContainer'; | ||
|
|
||
| describe('BreadcrumbContainer', () => { | ||
| let wrapper; | ||
|
|
||
| beforeEach(() => { | ||
| wrapper = mountWithTheme( | ||
| <BreadcrumbContainer> | ||
| {({ getContainerProps }) => <div {...getContainerProps({ 'data-test-id': 'container' })} />} | ||
| </BreadcrumbContainer> | ||
| ); | ||
| }); | ||
|
|
||
| const findContainer = enzymeWrapper => enzymeWrapper.find('[data-test-id="container"]'); | ||
|
|
||
| describe('getContainerProps()', () => { | ||
| it('applies correct accessibility attributes', () => { | ||
| const container = findContainer(wrapper); | ||
|
|
||
| expect(container).toHaveProp('role', 'navigation'); | ||
| expect(container).toHaveProp('aria-label', 'Breadcrumb navigation'); | ||
| }); | ||
| }); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| The `Breadcrumb` component follows the | ||
| [W3C breadcrumb accessibility design pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb) | ||
| and applies the correct accessibility attributes to the `BreadcrumbView` listed below. | ||
| Implementations are expected to override `aria-label` with a translated value describing usage. | ||
|
|
||
| ```jsx | ||
| const { Anchor } = require('@zendeskgarden/react-buttons/src'); | ||
|
|
||
| <Breadcrumb aria-label="navegación"> | ||
| <Anchor href="/">Home</Anchor> | ||
| <Anchor href="..">React Components</Anchor> | ||
| <Item>Breadcrumbs</Item> | ||
| </Breadcrumb>; | ||
| ``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| /** | ||
| * Copyright Zendesk, Inc. | ||
| * | ||
| * Use of this source code is governed under the Apache License, Version 2.0 | ||
| * found at http://www.apache.org/licenses/LICENSE-2.0. | ||
| */ | ||
|
|
||
| import React, { Component, Children, cloneElement } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { hasType } from '@zendeskgarden/react-utilities'; | ||
|
|
||
| import BreadcrumbContainer from '../containers/BreadcrumbContainer'; | ||
| import BreadcrumbView from '../views/BreadcrumbView'; | ||
| import List from '../views/List'; | ||
| import Item from '../views/Item'; | ||
|
|
||
| /** | ||
| * High-level abstraction for basic Breadcrumb implementations. Accepts all | ||
jzempel marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| * `<ol>` props. | ||
| */ | ||
| export default class Breadcrumb extends Component { | ||
| static propTypes = { | ||
| children: PropTypes.any | ||
| }; | ||
|
|
||
| renderItems = items => { | ||
| const total = Children.count(items); | ||
|
|
||
| return Children.map(items, (item, index) => { | ||
| const itemProps = { | ||
| current: index === total - 1, | ||
| key: index | ||
| }; | ||
|
|
||
| return hasType(item, Item) ? ( | ||
| cloneElement(item, itemProps) | ||
| ) : ( | ||
| <Item {...itemProps}>{item}</Item> | ||
| ); | ||
| }); | ||
| }; | ||
|
|
||
| render() { | ||
| const { children, ...breadcrumbProps } = this.props; | ||
|
|
||
| return ( | ||
| <BreadcrumbContainer> | ||
| {({ getContainerProps }) => ( | ||
| /* role not needed as `BreadcrumbView` is a navigation landmark. */ | ||
| <BreadcrumbView {...getContainerProps({ role: null })}> | ||
| <List {...breadcrumbProps}>{this.renderItems(children)}</List> | ||
| </BreadcrumbView> | ||
| )} | ||
| </BreadcrumbContainer> | ||
| ); | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@jzempel What prompted this change?
I would be concerned if Travis was testing and deploying code that was transformed by a
formatwithout it being visible in Github.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We seem to continue to let non-formatted code slip through (misconfigured husky?). The travis build will fail if the git tree isn't clean after test.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh that's perfect 💯