diff --git a/output/components.eslint.txt b/output/components.eslint.txt index e345d071fbe..9e13fda11d0 100644 --- a/output/components.eslint.txt +++ b/output/components.eslint.txt @@ -6,7 +6,7 @@ 40:10 error Elements with the ARIA role "heading" must have the following attributes defined: aria-level jsx-a11y/role-has-required-aria-props /home/travis/build/Talend/ui/packages/components/src/CollapsiblePanel/CollapsiblePanel.component.js - 146:4 error Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events + 147:4 error Visible, non-interactive elements with click handlers must have at least one keyboard listener jsx-a11y/click-events-have-key-events /home/travis/build/Talend/ui/packages/components/src/DataViewer/Core/Tree/Tree.component.js 4:1 error Dependency cycle via ./TreeNode.component:1=>../Tree:4 import/no-cycle diff --git a/packages/components/.storybook/config.js b/packages/components/.storybook/config.js index 4197858ca4a..157907b2d28 100644 --- a/packages/components/.storybook/config.js +++ b/packages/components/.storybook/config.js @@ -1,6 +1,7 @@ import '@talend/bootstrap-theme/src/theme/theme.scss'; import React from 'react'; +import { ThemeProvider } from '@talend/design-system'; import { configure, addDecorator } from '@storybook/react'; import { withA11y } from '@storybook/addon-a11y'; @@ -21,7 +22,7 @@ addDecorator( }), ); addDecorator(withA11y); - +addDecorator(storyFn => {storyFn()}); addDecorator(storyFn => ( <> ( +
+ ); +} + +function mockComponentVariation(name) { + return variation => { + const variationName = `${name}.${variation}`; + mocks[name][variation] = getFakeJSX(variationName); + mocks[name][variation].displayName = variationName; + }; +} + +function mockComponent(name) { + mocks[name] = getFakeJSX(name); + mocks[name].displayName = name; + Object.keys(Coral[name]) + .filter(startsWithUpperCase) + .forEach(mockComponentVariation(name)); +} + +Object.keys(Coral) + .filter(startsWithUpperCase) + .forEach(mockComponent); + +module.exports = mocks; diff --git a/packages/components/package.json b/packages/components/package.json index 83a8660a4c3..d2db0d626e7 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -35,6 +35,7 @@ }, "dependencies": { "@popperjs/core": "^2.6.0", + "@talend/design-system": "^1.0.7", "ally.js": "^1.4.1", "classnames": "^2.2.5", "d3": "^6.3.0", diff --git a/packages/components/src/Actions/ActionDropdown/ActionDropdown.component.js b/packages/components/src/Actions/ActionDropdown/ActionDropdown.component.js index 1596ba714d3..3810dd1d31c 100644 --- a/packages/components/src/Actions/ActionDropdown/ActionDropdown.component.js +++ b/packages/components/src/Actions/ActionDropdown/ActionDropdown.component.js @@ -5,12 +5,12 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import get from 'lodash/get'; import classNames from 'classnames'; import { Iterable } from 'immutable'; -import Label from 'react-bootstrap/lib/Label'; import { DropdownButton, MenuItem, OverlayTrigger } from 'react-bootstrap'; import { withTranslation } from 'react-i18next'; import omit from 'lodash/omit'; import Inject from '../../Inject'; import theme from './ActionDropdown.scss'; +import Tag from '../../Tag'; import TooltipTrigger from '../../TooltipTrigger'; import Icon from '../../Icon'; import wrapOnClick from '../wrapOnClick'; @@ -83,12 +83,12 @@ function renderMutableMenuItem(item, index, getComponent) { {item.icon && } {!item.hideLabel && item.label} {item.badge && ( - + )} ); @@ -219,12 +219,12 @@ class ActionDropdown extends React.Component { ), badge && ( - + ), - + ); } @@ -182,7 +183,7 @@ function getKeyValueContent(content) {
{content.map((item, index) => [
- + {item.label}
,
{item.description} diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.snapshot.test.js b/packages/components/src/CollapsiblePanel/CollapsiblePanel.snapshot.test.js index 4639a55d5d9..be9f30fbd51 100644 --- a/packages/components/src/CollapsiblePanel/CollapsiblePanel.snapshot.test.js +++ b/packages/components/src/CollapsiblePanel/CollapsiblePanel.snapshot.test.js @@ -1,10 +1,8 @@ import React from 'react'; -import renderer from 'react-test-renderer'; +import { mount } from 'enzyme'; import CollapsiblePanel from './CollapsiblePanel.component'; -jest.mock('react-dom'); - const props = { header: [ { @@ -132,53 +130,49 @@ const propsPanelWithCustomElement = { describe('CollapsiblePanel', () => { it('should render default with key/value content', () => { // when - const wrapper = renderer.create().toJSON(); + const wrapper = mount(); // then - expect(wrapper).toMatchSnapshot(); + expect(wrapper.html()).toMatchSnapshot(); }); it('should render default with expanded key/value content', () => { // when - const wrapper = renderer.create().toJSON(); + const wrapper = mount(); // then - expect(wrapper).toMatchSnapshot(); + expect(wrapper.html()).toMatchSnapshot(); }); it('should render default without content', () => { // when - const wrapper = renderer.create().toJSON(); + const wrapper = mount(); // then - expect(wrapper).toMatchSnapshot(); + expect(wrapper.html()).toMatchSnapshot(); }); it('should render themed with textual content', () => { // when - const wrapper = renderer.create().toJSON(); + const wrapper = mount(); // then - expect(wrapper).toMatchSnapshot(); + expect(wrapper.html()).toMatchSnapshot(); }); it('should render themed without textual content', () => { // when - const wrapper = renderer - .create() - .toJSON(); - + const wrapper = mount( + , + ); // then - expect(wrapper).toMatchSnapshot(); + expect(wrapper.html()).toMatchSnapshot(); }); it('should render panel with custom element', () => { // when - const wrapper = renderer - .create() - .toJSON(); - + const wrapper = mount(); // then - expect(wrapper).toMatchSnapshot(); + expect(wrapper.html()).toMatchSnapshot(); }); }); diff --git a/packages/components/src/CollapsiblePanel/__snapshots__/CollapsiblePanel.snapshot.test.js.snap b/packages/components/src/CollapsiblePanel/__snapshots__/CollapsiblePanel.snapshot.test.js.snap index bd738b70450..6cf7c9c3e2b 100644 --- a/packages/components/src/CollapsiblePanel/__snapshots__/CollapsiblePanel.snapshot.test.js.snap +++ b/packages/components/src/CollapsiblePanel/__snapshots__/CollapsiblePanel.snapshot.test.js.snap @@ -1,86 +1,51 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`CollapsiblePanel should render default with expanded key/value content 1`] = ` -
-
-
-
-