From 42a5d499c4137841e3986af61bcba0a1dce66f92 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Mon, 26 Nov 2018 17:11:49 -0800 Subject: [PATCH 01/15] Fix spelling --- .github/DEVELOPMENT.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/DEVELOPMENT.md b/.github/DEVELOPMENT.md index 4c325e6c950..bf120692d0d 100644 --- a/.github/DEVELOPMENT.md +++ b/.github/DEVELOPMENT.md @@ -46,7 +46,7 @@ yarn start --scope @zendeskgarden/react-buttons All elements must -* Be implemented with associated `Conatiner` and `View` components +* Be implemented with associated `Container` and `View` components * Provide `uncontrolled` and `controlled` state management if necessary * Be implemented with the `ControlledComponent` state abstractions if necessary * Create an abstraction to benefit a majority of use cases From 03b8dba64c40021d3a98ce08511d84b8aa0efa26 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Mon, 26 Nov 2018 17:13:08 -0800 Subject: [PATCH 02/15] Prettier markdown format --- packages/autocomplete/src/examples/multiselect.md | 4 ++-- packages/textfields/src/elements/TextField.example.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/autocomplete/src/examples/multiselect.md b/packages/autocomplete/src/examples/multiselect.md index 4e5e88b9796..decc4e4b62c 100644 --- a/packages/autocomplete/src/examples/multiselect.md +++ b/packages/autocomplete/src/examples/multiselect.md @@ -283,8 +283,8 @@ const MoreAnchor = styled(Anchor)` style: Object.assign( { margin: '0 2px', flexGrow: 1, width: 60 }, Object.keys(state.selectedKeys).length !== 0 && - (!state.isFocused || tagFocusedKey !== undefined) && - !isOpen + (!state.isFocused || tagFocusedKey !== undefined) && + !isOpen ? { opacity: 0, height: 0, minHeight: 0 } : {} ) diff --git a/packages/textfields/src/elements/TextField.example.md b/packages/textfields/src/elements/TextField.example.md index 6f9eca2f1aa..5d6682ad228 100644 --- a/packages/textfields/src/elements/TextField.example.md +++ b/packages/textfields/src/elements/TextField.example.md @@ -24,8 +24,8 @@ getValidationMessage = value => value.length === 0 ? 'Text must be greater than 0 characters' : value.length < 10 - ? 'Text must be greater than 10 characters' - : 'You have enough characters'; + ? 'Text must be greater than 10 characters' + : 'You have enough characters'; From 76754b064b1e9a76440d047e6b81e97df0ce5427 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Mon, 26 Nov 2018 17:15:02 -0800 Subject: [PATCH 03/15] Initial breacrumb components --- packages/breadcrumbs/CHANGELOG.md | 1 + packages/breadcrumbs/README.md | 40 ++++++++++++++ packages/breadcrumbs/package.json | 46 ++++++++++++++++ .../containers/BreadcrumbContainer.example.md | 17 ++++++ .../src/containers/BreadcrumbContainer.js | 39 ++++++++++++++ .../src/elements/Breadcrumb.example.md | 9 ++++ .../breadcrumbs/src/elements/Breadcrumb.js | 53 +++++++++++++++++++ packages/breadcrumbs/src/index.js | 11 ++++ .../src/views/BreadcrumbView.example.md | 16 ++++++ .../breadcrumbs/src/views/BreadcrumbView.js | 31 +++++++++++ packages/breadcrumbs/src/views/Item.js | 34 ++++++++++++ packages/breadcrumbs/styleguide.config.js | 31 +++++++++++ utils/styleguide/styleguide.base.config.js | 1 + 13 files changed, 329 insertions(+) create mode 100644 packages/breadcrumbs/CHANGELOG.md create mode 100644 packages/breadcrumbs/README.md create mode 100644 packages/breadcrumbs/package.json create mode 100644 packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md create mode 100644 packages/breadcrumbs/src/containers/BreadcrumbContainer.js create mode 100644 packages/breadcrumbs/src/elements/Breadcrumb.example.md create mode 100644 packages/breadcrumbs/src/elements/Breadcrumb.js create mode 100644 packages/breadcrumbs/src/index.js create mode 100644 packages/breadcrumbs/src/views/BreadcrumbView.example.md create mode 100644 packages/breadcrumbs/src/views/BreadcrumbView.js create mode 100644 packages/breadcrumbs/src/views/Item.js create mode 100644 packages/breadcrumbs/styleguide.config.js diff --git a/packages/breadcrumbs/CHANGELOG.md b/packages/breadcrumbs/CHANGELOG.md new file mode 100644 index 00000000000..8b137891791 --- /dev/null +++ b/packages/breadcrumbs/CHANGELOG.md @@ -0,0 +1 @@ + diff --git a/packages/breadcrumbs/README.md b/packages/breadcrumbs/README.md new file mode 100644 index 00000000000..a2ada6107ea --- /dev/null +++ b/packages/breadcrumbs/README.md @@ -0,0 +1,40 @@ +# @zendeskgarden/react-breadcrumbs [![npm version](https://img.shields.io/npm/v/@zendeskgarden/react-breadcrumbs.svg?style=flat-square)](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 { Example } from '@zendeskgarden/react-breadcrumbs'; + +/** + * Place a `ThemeProvider` at the root of your React application + */ + + Lorem ipsum dolor sit amet, consectetur adipiscing elit...; +; +``` + + diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json new file mode 100644 index 00000000000..27b4d5d4410 --- /dev/null +++ b/packages/breadcrumbs/package.json @@ -0,0 +1,46 @@ +{ + "name": "@zendeskgarden/react-breadcrumbs", + "description": "Components relating to breadcrumbs in the Garden Design System", + "license": "Apache-2.0", + "author": "Zendesk Garden ", + "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.0", + "@zendeskgarden/react-theming": "^3.1.3" + }, + "keywords": [ + "components", + "garden", + "react", + "zendesk" + ], + "publishConfig": { + "access": "public" + }, + "zendeskgarden:library": "GardenBreadcrumbs", + "zendeskgarden:src": "src/index.js" +} diff --git a/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md b/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md new file mode 100644 index 00000000000..67dbfb3a047 --- /dev/null +++ b/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md @@ -0,0 +1,17 @@ +```jsx +const { Anchor } = require('@zendeskgarden/react-buttons/src'); + + + {({ getContainerProps }) => ( + + + One + + + Two + + Three + + )} +; +``` diff --git a/packages/breadcrumbs/src/containers/BreadcrumbContainer.js b/packages/breadcrumbs/src/containers/BreadcrumbContainer.js new file mode 100644 index 00000000000..4210ab58ee7 --- /dev/null +++ b/packages/breadcrumbs/src/containers/BreadcrumbContainer.js @@ -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', + ...other + }; + }; + + render() { + const { children, render = children } = this.props; + + return render({ + getContainerProps: this.getContainerProps + }); + } +} diff --git a/packages/breadcrumbs/src/elements/Breadcrumb.example.md b/packages/breadcrumbs/src/elements/Breadcrumb.example.md new file mode 100644 index 00000000000..f90370d6680 --- /dev/null +++ b/packages/breadcrumbs/src/elements/Breadcrumb.example.md @@ -0,0 +1,9 @@ +```jsx +const { Anchor } = require('@zendeskgarden/react-buttons/src'); + + + Home + React Components + Breadcrumbs +; +``` diff --git a/packages/breadcrumbs/src/elements/Breadcrumb.js b/packages/breadcrumbs/src/elements/Breadcrumb.js new file mode 100644 index 00000000000..9077ac4e50c --- /dev/null +++ b/packages/breadcrumbs/src/elements/Breadcrumb.js @@ -0,0 +1,53 @@ +/** + * 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 BreadcrumbContainer from '../containers/BreadcrumbContainer'; +import BreadcrumbView from '../views/BreadcrumbView'; +import Item from '../views/Item'; + +export default class Breadcrumb extends Component { + static propTypes = { + children: PropTypes.any + }; + + renderItems = items => { + const retVal = []; + const total = Children.count(items); + + Children.forEach(items, (item, index) => { + const itemProps = { + current: index === total - 1, + key: index + }; + + if (item.type === Item) { + retVal.push(cloneElement(item, itemProps)); + } else { + retVal.push({item}); + } + }); + + return retVal; + }; + + render() { + const { children, ...breadcrumbProps } = this.props; + + return ( + + {({ getContainerProps }) => ( + + {this.renderItems(children)} + + )} + + ); + } +} diff --git a/packages/breadcrumbs/src/index.js b/packages/breadcrumbs/src/index.js new file mode 100644 index 00000000000..3f274799458 --- /dev/null +++ b/packages/breadcrumbs/src/index.js @@ -0,0 +1,11 @@ +/** + * 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. + */ + +export { default as Breadcrumb } from './elements/Breadcrumb'; +export { default as BreadcrumbContainer } from './containers/BreadcrumbContainer'; +export { default as BreadcrumbView } from './views/BreadcrumbView'; +export { default as Item } from './views/Item'; diff --git a/packages/breadcrumbs/src/views/BreadcrumbView.example.md b/packages/breadcrumbs/src/views/BreadcrumbView.example.md new file mode 100644 index 00000000000..64e40ed2b2c --- /dev/null +++ b/packages/breadcrumbs/src/views/BreadcrumbView.example.md @@ -0,0 +1,16 @@ +The `BreadcrumbView` is a presentation component used to wrap breadcrumb +`Item` components. + +```jsx +const { Anchor } = require('@zendeskgarden/react-buttons/src'); + + + + Alpha + + + Beta + + Gamma +; +``` diff --git a/packages/breadcrumbs/src/views/BreadcrumbView.js b/packages/breadcrumbs/src/views/BreadcrumbView.js new file mode 100644 index 00000000000..708b6b508cc --- /dev/null +++ b/packages/breadcrumbs/src/views/BreadcrumbView.js @@ -0,0 +1,31 @@ +/** + * 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 styled from 'styled-components'; +import classNames from 'classnames'; +import BreadcrumbStyles from '@zendeskgarden/css-breadcrumbs'; +import { retrieveTheme, isRtl } from '@zendeskgarden/react-theming'; + +const COMPONENT_ID = 'breadcrumbs.breadcrumb_view'; + +/** + * Accepts all `
    ` props + */ +const BreadcrumbView = styled.ol.attrs({ + 'data-garden-id': COMPONENT_ID, + 'data-garden-version': PACKAGE_VERSION, + className: props => + classNames(BreadcrumbStyles['c-breadcrumb'], { + // RTL + [BreadcrumbStyles['is-rtl']]: isRtl(props) + }) +})` + ${props => retrieveTheme(COMPONENT_ID, props)}; +`; + +/** @component */ +export default BreadcrumbView; diff --git a/packages/breadcrumbs/src/views/Item.js b/packages/breadcrumbs/src/views/Item.js new file mode 100644 index 00000000000..fb61960ac8c --- /dev/null +++ b/packages/breadcrumbs/src/views/Item.js @@ -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 PropTypes from 'prop-types'; +import styled from 'styled-components'; +import classNames from 'classnames'; +import { retrieveTheme } from '@zendeskgarden/react-theming'; +import BreadcrumbStyles from '@zendeskgarden/css-breadcrumbs'; + +const COMPONENT_ID = 'breadcrumbs.item'; + +/** + * Accepts all `
  1. ` props + */ +const Item = styled.li.attrs({ + 'data-garden-id': COMPONENT_ID, + 'data-garden-version': PACKAGE_VERSION, + className: props => + classNames(BreadcrumbStyles['c-breadcrumb__item'], { + // State + [BreadcrumbStyles['is-current']]: props.current + }) +})` + ${props => retrieveTheme(COMPONENT_ID, props)}; +`; + +Item.propTypes = { current: PropTypes.bool }; + +/** @component */ +export default Item; diff --git a/packages/breadcrumbs/styleguide.config.js b/packages/breadcrumbs/styleguide.config.js new file mode 100644 index 00000000000..cf8625d3e16 --- /dev/null +++ b/packages/breadcrumbs/styleguide.config.js @@ -0,0 +1,31 @@ +/** + * 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. + */ + +/** + * Package specific styleguide configuration + * https://github.com/styleguidist/react-styleguidist/blob/master/docs/Configuration.md + */ +module.exports = { + sections: [ + { + name: '', + content: '../../packages/breadcrumbs/README.md' + }, + { + name: 'Elements', + components: '../../packages/breadcrumbs/src/elements/[A-Z]*.js' + }, + { + name: 'Containers', + components: '../../packages/breadcrumbs/src/containers/[A-Z]*.js' + }, + { + name: 'Views', + components: '../../packages/breadcrumbs/src/views/[A-Z]*.js' + } + ] +}; diff --git a/utils/styleguide/styleguide.base.config.js b/utils/styleguide/styleguide.base.config.js index 30846ef96df..4f202c7f774 100644 --- a/utils/styleguide/styleguide.base.config.js +++ b/utils/styleguide/styleguide.base.config.js @@ -188,6 +188,7 @@ const defaultStyleguideConfig = { 'CHANGELOG.md': path.resolve('CHANGELOG.md'), '@zendeskgarden/react-autocomplete': path.resolve('..', 'autocomplete'), '@zendeskgarden/react-avatars': path.resolve('..', 'avatars'), + '@zendeskgarden/react-breadcrumbs': path.resolve('..', 'breadcrumbs'), '@zendeskgarden/react-buttons': path.resolve('..', 'buttons'), '@zendeskgarden/react-checkboxes': path.resolve('..', 'checkboxes'), '@zendeskgarden/react-chrome': path.resolve('..', 'chrome'), From 096bc7798811b56134fc0a7cd0e6d6df9c5c59dd Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Tue, 27 Nov 2018 13:30:57 -0800 Subject: [PATCH 04/15] Update documentation --- README.md | 17 ++++++++++------- demo/index.html | 7 +++++-- packages/breadcrumbs/README.md | 17 +++++++---------- .../src/elements/Breadcrumb.example.md | 4 ++++ packages/breadcrumbs/src/elements/Breadcrumb.js | 4 ++++ 5 files changed, 30 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index b52d75a4efc..f461655a07d 100644 --- a/README.md +++ b/README.md @@ -9,10 +9,6 @@ components are packaged and published individually, but combined under this single repository. Components rely on [Garden CSS](https://github.com/zendeskgarden/css-components) for styling. -Try out the Garden React Components in a mock product environment with CodeSandbox - -[![Edit Garden Create-React-App](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/43nwpkn717) - ## Installation See the individual package README for the React component you would like @@ -22,6 +18,7 @@ Package | Version | Dependencies ------- | ------- | ------------ [`@zendeskgarden/react-autocomplete`](packages/autocomplete) | [![npm version][autocomplete npm version]][autocomplete npm link] | [![Dependency Status][autocomplete dependency status]][autocomplete dependency link] [`@zendeskgarden/react-avatars`](packages/avatars) | [![npm version][avatars npm version]][avatars npm link] | [![Dependency Status][avatars dependency status]][avatars dependency link] +[`@zendeskgarden/react-breadcrumbs`](packages/breadcrumbs) | [![npm version][breadcrumbs npm version]][breadcrumbs npm link] | [![Dependency Status][breadcrumbs dependency status]][breadcrumbs dependency link] [`@zendeskgarden/react-buttons`](packages/buttons) | [![npm version][buttons npm version]][buttons npm link] | [![Dependency Status][buttons dependency status]][buttons dependency link] [`@zendeskgarden/react-checkboxes`](packages/checkboxes) | [![npm version][checkboxes npm version]][checkboxes npm link] | [![Dependency Status][checkboxes dependency status]][checkboxes dependency link] [`@zendeskgarden/react-chrome`](packages/chrome) | [![npm version][chrome npm version]][chrome npm link] | [![Dependency Status][chrome dependency status]][chrome dependency link] @@ -54,6 +51,10 @@ Package | Version | Dependencies [avatars npm link]: https://www.npmjs.com/package/@zendeskgarden/react-avatars [avatars dependency status]: https://img.shields.io/david/zendeskgarden/react-components.svg?path=packages/avatars&style=flat-square [avatars dependency link]: https://david-dm.org/zendeskgarden/react-components?path=packages/avatars +[breadcrumbs npm version]: https://img.shields.io/npm/v/@zendeskgarden/react-breadcrumbs.svg?style=flat-square +[breadcrumbs npm link]: https://www.npmjs.com/package/@zendeskgarden/react-breadcrumbs +[breadcrumbs dependency status]: https://img.shields.io/david/zendeskgarden/react-components.svg?path=packages/breadcrumbs&style=flat-square +[breadcrumbs dependency link]: https://david-dm.org/zendeskgarden/react-components?path=packages/breadcrumbs [buttons npm version]: https://img.shields.io/npm/v/@zendeskgarden/react-buttons.svg?style=flat-square [buttons npm link]: https://www.npmjs.com/package/@zendeskgarden/react-buttons [buttons dependency status]: https://img.shields.io/david/zendeskgarden/react-components.svg?path=packages/buttons&style=flat-square @@ -150,9 +151,7 @@ Package | Version | Dependencies ## Usage Our packages are easily consumable with [create-react-app](https://github.com/facebook/create-react-app) -and standard webpack configs. - -All packages follow a similar installation process. Below is an example of +and standard webpack configs. All packages follow a similar installation process. Below is an example of consuming our [react-buttons](https://www.npmjs.com/package/@zendeskgarden/react-buttons) package. @@ -194,6 +193,10 @@ class App extends Component { render(, document.getElementById('root')); ``` +Try out Garden React components in a mock product environment. + +[![Edit Garden Create-React-App](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/43nwpkn717) + ## Contribution Thanks for your interest in Garden! Community involvement helps make our diff --git a/demo/index.html b/demo/index.html index 65e851ced3d..1f67e2ec735 100644 --- a/demo/index.html +++ b/demo/index.html @@ -91,6 +91,9 @@

    React Components

    Avatars
    +
    + Breadcrumbs +
    Buttons
    @@ -109,11 +112,11 @@

    React Components

    Menus
    + +
    Modals
    -
    -
    Notifications
    diff --git a/packages/breadcrumbs/README.md b/packages/breadcrumbs/README.md index a2ada6107ea..9492a7531f3 100644 --- a/packages/breadcrumbs/README.md +++ b/packages/breadcrumbs/README.md @@ -21,20 +21,17 @@ npm install react react-dom prop-types styled-components @zendeskgarden/react-th import '@zendeskgarden/react-breadcrumbs/dist/styles.css'; import { ThemeProvider } from '@zendeskgarden/react-theming'; -import { Example } from '@zendeskgarden/react-breadcrumbs'; +import { Breadcrumb, Item } from '@zendeskgarden/react-breadcrumbs'; +import { Anchor } from '@zendeskgarden/react-buttons'; /** * Place a `ThemeProvider` at the root of your React application */ - Lorem ipsum dolor sit amet, consectetur adipiscing elit...; + + Root + Parent + Self + ; ``` - - diff --git a/packages/breadcrumbs/src/elements/Breadcrumb.example.md b/packages/breadcrumbs/src/elements/Breadcrumb.example.md index f90370d6680..1ccdc533df5 100644 --- a/packages/breadcrumbs/src/elements/Breadcrumb.example.md +++ b/packages/breadcrumbs/src/elements/Breadcrumb.example.md @@ -1,3 +1,7 @@ +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. + ```jsx const { Anchor } = require('@zendeskgarden/react-buttons/src'); diff --git a/packages/breadcrumbs/src/elements/Breadcrumb.js b/packages/breadcrumbs/src/elements/Breadcrumb.js index 9077ac4e50c..b65c808e473 100644 --- a/packages/breadcrumbs/src/elements/Breadcrumb.js +++ b/packages/breadcrumbs/src/elements/Breadcrumb.js @@ -12,6 +12,10 @@ import BreadcrumbContainer from '../containers/BreadcrumbContainer'; import BreadcrumbView from '../views/BreadcrumbView'; import Item from '../views/Item'; +/** + * High-level abstraction for basic Breadcrumb implementations. Accepts all + * `
    ` props. + */ export default class Breadcrumb extends Component { static propTypes = { children: PropTypes.any From dd2041743125a61fa8d3f0fb34721d4e1ee376d2 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Wed, 28 Nov 2018 09:20:17 -0800 Subject: [PATCH 05/15] Alphabetical is hard --- demo/index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/demo/index.html b/demo/index.html index 1f67e2ec735..6040c846c56 100644 --- a/demo/index.html +++ b/demo/index.html @@ -136,10 +136,10 @@

    React Components

    Selection
    - Tabs + Tables
    - Tables + Tabs
    From e3f8cde3ef3202eff5448be127f01f10a7d508ac Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Wed, 28 Nov 2018 09:22:51 -0800 Subject: [PATCH 06/15] CI for prettier formatting (prevent commits that have been slipping through) --- .travis.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.travis.yml b/.travis.yml index f05662cd518..4775e47048b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -13,6 +13,7 @@ install: yarn --frozen-lockfile script: - yarn lint + - yarn format - yarn test:all --coverage --runInBand after_success: yarn coveralls < demo/coverage/lcov.info From dc180a85bf60fb97763082451f076ce8e7984570 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Wed, 28 Nov 2018 09:43:49 -0800 Subject: [PATCH 07/15] Add breadcrumb testing --- README.md | 8 ++- .../containers/BreadcrumbContainer.spec.js | 34 +++++++++++ .../src/elements/Breadcrumb.spec.js | 57 +++++++++++++++++++ .../src/views/BreadcrumbView.spec.js | 25 ++++++++ packages/breadcrumbs/src/views/Item.spec.js | 24 ++++++++ .../__snapshots__/BreadcrumbView.spec.js.snap | 17 ++++++ .../src/views/__snapshots__/Item.spec.js.snap | 17 ++++++ 7 files changed, 179 insertions(+), 3 deletions(-) create mode 100644 packages/breadcrumbs/src/containers/BreadcrumbContainer.spec.js create mode 100644 packages/breadcrumbs/src/elements/Breadcrumb.spec.js create mode 100644 packages/breadcrumbs/src/views/BreadcrumbView.spec.js create mode 100644 packages/breadcrumbs/src/views/Item.spec.js create mode 100644 packages/breadcrumbs/src/views/__snapshots__/BreadcrumbView.spec.js.snap create mode 100644 packages/breadcrumbs/src/views/__snapshots__/Item.spec.js.snap diff --git a/README.md b/README.md index f461655a07d..aa4e728e0d8 100644 --- a/README.md +++ b/README.md @@ -150,9 +150,11 @@ Package | Version | Dependencies ## Usage -Our packages are easily consumable with [create-react-app](https://github.com/facebook/create-react-app) -and standard webpack configs. All packages follow a similar installation process. Below is an example of -consuming our [react-buttons](https://www.npmjs.com/package/@zendeskgarden/react-buttons) +Our packages are easily consumable with +[create-react-app](https://github.com/facebook/create-react-app) +and standard webpack configs. All packages follow a similar installation process. +Below is an example of consuming our +[react-buttons](https://www.npmjs.com/package/@zendeskgarden/react-buttons) package. ### Install dependencies diff --git a/packages/breadcrumbs/src/containers/BreadcrumbContainer.spec.js b/packages/breadcrumbs/src/containers/BreadcrumbContainer.spec.js new file mode 100644 index 00000000000..8b5bd5a45e8 --- /dev/null +++ b/packages/breadcrumbs/src/containers/BreadcrumbContainer.spec.js @@ -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( + + {({ getContainerProps }) =>
    } + + ); + }); + + 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'); + }); + }); +}); diff --git a/packages/breadcrumbs/src/elements/Breadcrumb.spec.js b/packages/breadcrumbs/src/elements/Breadcrumb.spec.js new file mode 100644 index 00000000000..1bf330980d6 --- /dev/null +++ b/packages/breadcrumbs/src/elements/Breadcrumb.spec.js @@ -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 from 'react'; +import { mountWithTheme } from '@zendeskgarden/react-testing'; + +import Breadcrumb from './Breadcrumb'; +import BreadcrumbView from '../views/BreadcrumbView'; +import Item from '../views/Item'; + +describe('Breadcrumb', () => { + let wrapper; + + beforeEach(() => { + wrapper = mountWithTheme( + + One + + Two + + Three + + ); + }); + + describe('BreadcrumbView', () => { + it('receives BreadcrumbContainer props', () => { + expect(wrapper.find(BreadcrumbView)).toHaveProp('role', 'navigation'); + }); + + it('receives Breadcrumb props', () => { + expect(wrapper.find(BreadcrumbView)).toHaveProp('data-test-breadcrumb', true); + }); + }); + + describe('Item', () => { + it('receives Item props', () => { + expect(wrapper.find(Item).at(2)).toHaveProp('data-test-item', true); + }); + + it('does not receive non-Item props', () => { + expect(wrapper.find(Item).at(1)).not.toHaveProp('data-test-anchor', true); + }); + + it('receives current styling if last', () => { + expect(wrapper.find(Item).at(2)).toHaveProp('current', true); + }); + + it('does not receive current styling if not last', () => { + expect(wrapper.find(Item).at(0)).not.toHaveProp('current', true); + }); + }); +}); diff --git a/packages/breadcrumbs/src/views/BreadcrumbView.spec.js b/packages/breadcrumbs/src/views/BreadcrumbView.spec.js new file mode 100644 index 00000000000..686cb0ef5a4 --- /dev/null +++ b/packages/breadcrumbs/src/views/BreadcrumbView.spec.js @@ -0,0 +1,25 @@ +/** + * 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 { shallow } from 'enzyme'; +import { shallowWithTheme } from '@zendeskgarden/react-testing'; +import BreadcrumbView from './BreadcrumbView'; + +describe('BreadcrumbView', () => { + it('renders default styling correctly', () => { + const wrapper = shallow(); + + expect(wrapper).toMatchSnapshot(); + }); + + it('renders RTL styling correctly', () => { + const wrapper = shallowWithTheme(, { rtl: true }); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/packages/breadcrumbs/src/views/Item.spec.js b/packages/breadcrumbs/src/views/Item.spec.js new file mode 100644 index 00000000000..6314e573e47 --- /dev/null +++ b/packages/breadcrumbs/src/views/Item.spec.js @@ -0,0 +1,24 @@ +/** + * 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 { shallow } from 'enzyme'; +import Item from './Item'; + +describe('Item', () => { + it('renders default styling', () => { + const wrapper = shallow(); + + expect(wrapper).toMatchSnapshot(); + }); + + it('renders current styling', () => { + const wrapper = shallow(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/packages/breadcrumbs/src/views/__snapshots__/BreadcrumbView.spec.js.snap b/packages/breadcrumbs/src/views/__snapshots__/BreadcrumbView.spec.js.snap new file mode 100644 index 00000000000..d70c04ca4be --- /dev/null +++ b/packages/breadcrumbs/src/views/__snapshots__/BreadcrumbView.spec.js.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BreadcrumbView renders RTL styling correctly 1`] = ` +
      +`; + +exports[`BreadcrumbView renders default styling correctly 1`] = ` +
        +`; diff --git a/packages/breadcrumbs/src/views/__snapshots__/Item.spec.js.snap b/packages/breadcrumbs/src/views/__snapshots__/Item.spec.js.snap new file mode 100644 index 00000000000..b663b8794f3 --- /dev/null +++ b/packages/breadcrumbs/src/views/__snapshots__/Item.spec.js.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Item renders current styling 1`] = ` +
      1. +`; + +exports[`Item renders default styling 1`] = ` +
      2. +`; From be94b0354f32b9b52d8db4b6b0ba4b59c719c715 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Thu, 29 Nov 2018 11:07:26 -0800 Subject: [PATCH 08/15] Update css-breadcrumbs dependency --- packages/breadcrumbs/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/breadcrumbs/package.json b/packages/breadcrumbs/package.json index 27b4d5d4410..825668ec376 100644 --- a/packages/breadcrumbs/package.json +++ b/packages/breadcrumbs/package.json @@ -29,7 +29,7 @@ "styled-components": "^3.2.6" }, "devDependencies": { - "@zendeskgarden/css-breadcrumbs": "0.1.0", + "@zendeskgarden/css-breadcrumbs": "0.1.1", "@zendeskgarden/react-theming": "^3.1.3" }, "keywords": [ From 683c0c0356903738c666e8c81d14bd696f6d41a8 Mon Sep 17 00:00:00 2001 From: Jonathan Zempel Date: Thu, 29 Nov 2018 17:10:33 -0800 Subject: [PATCH 09/15] Add breadcrumb `List` component to satisfy expected navigation landmark structure and pass axe testing --- .../containers/BreadcrumbContainer.example.md | 18 ++++++----- .../breadcrumbs/src/elements/Breadcrumb.js | 6 ++-- .../src/elements/Breadcrumb.spec.js | 15 ++++++--- packages/breadcrumbs/src/index.js | 1 + .../breadcrumbs/src/views/BreadcrumbView.js | 15 +++------ .../src/views/BreadcrumbView.spec.js | 9 +----- ...adcrumbView.example.md => List.example.md} | 8 ++--- packages/breadcrumbs/src/views/List.js | 31 +++++++++++++++++++ packages/breadcrumbs/src/views/List.spec.js | 25 +++++++++++++++ .../__snapshots__/BreadcrumbView.spec.js.snap | 14 ++------- .../src/views/__snapshots__/List.spec.js.snap | 17 ++++++++++ 11 files changed, 111 insertions(+), 48 deletions(-) rename packages/breadcrumbs/src/views/{BreadcrumbView.example.md => List.example.md} (60%) create mode 100644 packages/breadcrumbs/src/views/List.js create mode 100644 packages/breadcrumbs/src/views/List.spec.js create mode 100644 packages/breadcrumbs/src/views/__snapshots__/List.spec.js.snap diff --git a/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md b/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md index 67dbfb3a047..498af06e520 100644 --- a/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md +++ b/packages/breadcrumbs/src/containers/BreadcrumbContainer.example.md @@ -3,14 +3,16 @@ const { Anchor } = require('@zendeskgarden/react-buttons/src'); {({ getContainerProps }) => ( - - - One - - - Two - - Three + + + + One + + + Two + + Three + )} ; diff --git a/packages/breadcrumbs/src/elements/Breadcrumb.js b/packages/breadcrumbs/src/elements/Breadcrumb.js index b65c808e473..10b7c2477e0 100644 --- a/packages/breadcrumbs/src/elements/Breadcrumb.js +++ b/packages/breadcrumbs/src/elements/Breadcrumb.js @@ -10,6 +10,7 @@ import PropTypes from 'prop-types'; import BreadcrumbContainer from '../containers/BreadcrumbContainer'; import BreadcrumbView from '../views/BreadcrumbView'; +import List from '../views/List'; import Item from '../views/Item'; /** @@ -47,8 +48,9 @@ export default class Breadcrumb extends Component { return ( {({ getContainerProps }) => ( - - {this.renderItems(children)} + /* role not needed as `BreadcrumbView` is a navigation landmark. */ + + {this.renderItems(children)} )} diff --git a/packages/breadcrumbs/src/elements/Breadcrumb.spec.js b/packages/breadcrumbs/src/elements/Breadcrumb.spec.js index 1bf330980d6..ca4deb155de 100644 --- a/packages/breadcrumbs/src/elements/Breadcrumb.spec.js +++ b/packages/breadcrumbs/src/elements/Breadcrumb.spec.js @@ -10,6 +10,7 @@ import { mountWithTheme } from '@zendeskgarden/react-testing'; import Breadcrumb from './Breadcrumb'; import BreadcrumbView from '../views/BreadcrumbView'; +import List from '../views/List'; import Item from '../views/Item'; describe('Breadcrumb', () => { @@ -18,8 +19,8 @@ describe('Breadcrumb', () => { beforeEach(() => { wrapper = mountWithTheme( - One - + One + Two Three @@ -29,11 +30,17 @@ describe('Breadcrumb', () => { describe('BreadcrumbView', () => { it('receives BreadcrumbContainer props', () => { - expect(wrapper.find(BreadcrumbView)).toHaveProp('role', 'navigation'); + expect(wrapper.find(BreadcrumbView)).toHaveProp('aria-label', 'Breadcrumb navigation'); }); + it('does not receive BreadcrumbContainer `role` prop', () => { + expect(wrapper.find(BreadcrumbView)).not.toHaveProp('role', 'navigation'); + }); + }); + + describe('List', () => { it('receives Breadcrumb props', () => { - expect(wrapper.find(BreadcrumbView)).toHaveProp('data-test-breadcrumb', true); + expect(wrapper.find(List)).toHaveProp('data-test-breadcrumb', true); }); }); diff --git a/packages/breadcrumbs/src/index.js b/packages/breadcrumbs/src/index.js index 3f274799458..45e1b1902ce 100644 --- a/packages/breadcrumbs/src/index.js +++ b/packages/breadcrumbs/src/index.js @@ -8,4 +8,5 @@ export { default as Breadcrumb } from './elements/Breadcrumb'; export { default as BreadcrumbContainer } from './containers/BreadcrumbContainer'; export { default as BreadcrumbView } from './views/BreadcrumbView'; +export { default as List } from './views/List'; export { default as Item } from './views/Item'; diff --git a/packages/breadcrumbs/src/views/BreadcrumbView.js b/packages/breadcrumbs/src/views/BreadcrumbView.js index 708b6b508cc..7781b34c3e9 100644 --- a/packages/breadcrumbs/src/views/BreadcrumbView.js +++ b/packages/breadcrumbs/src/views/BreadcrumbView.js @@ -6,23 +6,16 @@ */ import styled from 'styled-components'; -import classNames from 'classnames'; -import BreadcrumbStyles from '@zendeskgarden/css-breadcrumbs'; -import { retrieveTheme, isRtl } from '@zendeskgarden/react-theming'; +import { retrieveTheme } from '@zendeskgarden/react-theming'; const COMPONENT_ID = 'breadcrumbs.breadcrumb_view'; /** - * Accepts all `
          ` props + * Accepts all `