feat(components): tags

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

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 => <ThemeProvider>{storyFn()}</ThemeProvider>);
 addDecorator(storyFn => (
 	<>
 		<IconsProvider

packages/components/__mocks__/@talend/design-system.js

@@ -0,0 +1,37 @@
+import React from 'react';
+
+const mocks = {};
+
+const Coral = jest.requireActual('@talend/design-system');
+
+function startsWithUpperCase(name) {
+	return name[0] === name[0].toUpperCase();
+}
+
+function getFakeJSX(name) {
+	return props => (
+		<div data-mock-module="@talend/design-system" data-mock-component={name} {...props} />
+	);
+}
+
+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;

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",

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 && <Icon key="icon" name={item.icon} />}
 			{!item.hideLabel && item.label}
 			{item.badge && (
-				<Label
+				<Tag
 					className={classNames(theme['tc-dropdown-item-badge'], 'tc-dropdown-item-badge')}
 					bsStyle={item.badge.bsStyle || 'default'}
 				>
 					{getTabBarBadgeLabel(item.badge.label)}
-				</Label>
+				</Tag>
 			)}
 		</Renderers.MenuItem>
 	);
@@ -219,12 +219,12 @@ class ActionDropdown extends React.Component {
 				</span>
 			),
 			badge && (
-				<Label
+				<Tag
 					className={classNames(theme['tc-dropdown-item-badge'], 'tc-dropdown-item-badge')}
 					bsStyle={badge.bsStyle || 'default'}
 				>
 					{getTabBarBadgeLabel(badge.label)}
-				</Label>
+				</Tag>
 			),
 			<Icon
 				key="caret"

packages/components/src/CollapsiblePanel/CollapsiblePanel.component.js

@@ -1,12 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { Label, OverlayTrigger, Panel, Button } from 'react-bootstrap';
+import { OverlayTrigger, Panel, Button } from 'react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
 import Action from '../Actions/Action';
 import ActionIconToggle from '../Actions/ActionIconToggle';
 import Status from '../Status';
+import Tag from '../Tag';
 import TooltipTrigger from '../TooltipTrigger';
 
 import css from './CollapsiblePanel.scss';
@@ -76,9 +77,9 @@ function renderHeaderItem({ displayMode, className, ...headerItem }, key) {
 			const { label, tooltipLabel, tooltipPlacement, ...rest } = headerItem;
 			return (
 				<TooltipTrigger key={key} label={tooltipLabel || label} tooltipPlacement={tooltipPlacement}>
-					<Label {...rest} className={css[className]}>
+					<Tag {...rest} className={css[className]}>
 						{label}
-					</Label>
+					</Tag>
 				</TooltipTrigger>
 			);
 		}
@@ -182,7 +183,7 @@ function getKeyValueContent(content) {
 		<dl className={css.content}>
 			{content.map((item, index) => [
 				<dt className={css.label} key={`${index}_label`}>
-					<Label>{item.label}</Label>
+					<Tag>{item.label}</Tag>
 				</dt>,
 				<dd className={css.description} key={`${index}_desc`}>
 					{item.description}

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(<CollapsiblePanel {...props} />).toJSON();
+		const wrapper = mount(<CollapsiblePanel {...props} />);
 
 		// then
-		expect(wrapper).toMatchSnapshot();
+		expect(wrapper.html()).toMatchSnapshot();
 	});
 
 	it('should render default with expanded key/value content', () => {
 		// when
-		const wrapper = renderer.create(<CollapsiblePanel {...props} expanded />).toJSON();
+		const wrapper = mount(<CollapsiblePanel {...props} expanded />);
 
 		// then
-		expect(wrapper).toMatchSnapshot();
+		expect(wrapper.html()).toMatchSnapshot();
 	});
 
 	it('should render default without content', () => {
 		// when
-		const wrapper = renderer.create(<CollapsiblePanel {...props} content={null} />).toJSON();
+		const wrapper = mount(<CollapsiblePanel {...props} content={null} />);
 
 		// then
-		expect(wrapper).toMatchSnapshot();
+		expect(wrapper.html()).toMatchSnapshot();
 	});
 
 	it('should render themed with textual content', () => {
 		// when
-		const wrapper = renderer.create(<CollapsiblePanel {...propsDescriptivePanel} />).toJSON();
+		const wrapper = mount(<CollapsiblePanel {...propsDescriptivePanel} />);
 
 		// then
-		expect(wrapper).toMatchSnapshot();
+		expect(wrapper.html()).toMatchSnapshot();
 	});
 
 	it('should render themed without textual content', () => {
 		// when
-		const wrapper = renderer
-			.create(<CollapsiblePanel {...propsDescriptivePanelWithoutContent} content={null} />)
-			.toJSON();
-
+		const wrapper = mount(
+			<CollapsiblePanel {...propsDescriptivePanelWithoutContent} content={null} />,
+		);
 		// then
-		expect(wrapper).toMatchSnapshot();
+		expect(wrapper.html()).toMatchSnapshot();
 	});
 
 	it('should render panel with custom element', () => {
 		// when
-		const wrapper = renderer
-			.create(<CollapsiblePanel {...propsPanelWithCustomElement} content={null} />)
-			.toJSON();
-
+		const wrapper = mount(<CollapsiblePanel {...propsPanelWithCustomElement} content={null} />);
 		// then
-		expect(wrapper).toMatchSnapshot();
+		expect(wrapper.html()).toMatchSnapshot();
 	});
 });