(
-
-
+
+
{label}
-
+
);
BadgeCategory.propTypes = {
diff --git a/packages/components/src/Badge/BadgeComposition/BadgeIcon/BadgeIcon.component.js b/packages/components/src/Badge/BadgeComposition/BadgeIcon/BadgeIcon.component.js
index 4db429e1cbf..f07f619cd3b 100644
--- a/packages/components/src/Badge/BadgeComposition/BadgeIcon/BadgeIcon.component.js
+++ b/packages/components/src/Badge/BadgeComposition/BadgeIcon/BadgeIcon.component.js
@@ -1,5 +1,5 @@
import PropTypes from 'prop-types';
-import Icon from '../../../Icon';
+import { Icon } from '@talend/design-system';
import badgeCssModule from '../../Badge.module.scss';
import { getTheme } from '../../../theme';
diff --git a/packages/components/src/Badge/BadgeComposition/BadgeLabel/BadgeLabel.component.js b/packages/components/src/Badge/BadgeComposition/BadgeLabel/BadgeLabel.component.js
index 16e03a81bcc..9d6d0c51045 100644
--- a/packages/components/src/Badge/BadgeComposition/BadgeLabel/BadgeLabel.component.js
+++ b/packages/components/src/Badge/BadgeComposition/BadgeLabel/BadgeLabel.component.js
@@ -1,22 +1,14 @@
import PropTypes from 'prop-types';
-import TooltipTrigger from '../../../TooltipTrigger';
+import { Badge } from '@talend/design-system';
import badgeCssModule from '../../Badge.module.scss';
import { getTheme } from '../../../theme';
const theme = getTheme(badgeCssModule);
const BadgeLabel = ({ aslink, category, label, children }) => {
- const labelTextClasses = theme({
- 'tc-badge-label-text': !(!aslink && category),
- 'tc-badge-label-text-with-categ': !aslink && category,
- });
return (
-
-
- {label}
-
-
+
{children}
);
diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.component.js b/packages/components/src/Breadcrumbs/Breadcrumbs.component.js
deleted file mode 100644
index 70ea4806ff6..00000000000
--- a/packages/components/src/Breadcrumbs/Breadcrumbs.component.js
+++ /dev/null
@@ -1,172 +0,0 @@
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import { withTranslation } from 'react-i18next';
-import { randomUUID } from '@talend/utils';
-
-import theme from './Breadcrumbs.module.scss';
-import { Action, ActionDropdown } from '../Actions';
-import Skeleton from '../Skeleton/Skeleton.component';
-import I18N_DOMAIN_COMPONENTS from '../constants';
-import getDefaultT from '../translate';
-
-/**
- * Default max items to display
- * @type {number}
- */
-const DEFAULT_MAX_ITEMS = 4;
-
-/**
- * Default number of items before adding an ellipsis
- * @type {number}
- */
-const DEFAULT_NB_ITEMS_BEFORE_ELLIPSIS = 1;
-
-const BREADCRUMB_SKELETON = [
- { type: Skeleton.TYPES.text, size: Skeleton.SIZES.large },
- { type: Skeleton.TYPES.circle, size: Skeleton.SIZES.small },
- { type: Skeleton.TYPES.text, size: Skeleton.SIZES.large },
-];
-
-/**
- * Indicate the current page location within a navigational hierarchy.
- * @param {object} props react props
- * @example
-
- */
-export function BreadcrumbsComponent({ loading, id, items, maxItems, t }) {
- if (loading) {
- return (
-
- {BREADCRUMB_SKELETON.map(({ size, type }, index) => (
-
- ))}
-
- );
- }
- const nbItems = items.length;
- const maxItemsReached = nbItems > maxItems;
- const ellipsisIndex = nbItems - maxItems + DEFAULT_NB_ITEMS_BEFORE_ELLIPSIS;
- const hiddenItems = items
- .slice(DEFAULT_NB_ITEMS_BEFORE_ELLIPSIS, ellipsisIndex + 1)
- .map((hiddenItem, index) => ({
- id: `${id}-item-${index + DEFAULT_NB_ITEMS_BEFORE_ELLIPSIS}`,
- label: hiddenItem.text,
- title: hiddenItem.title,
- onClick: event => hiddenItem.onClick(event, hiddenItem),
- }));
-
- /**
- * Render breadcrumb item
- * @param item Plain object representative of breadcrumb item
- * @param index Item position
- * @returns {*} Breadcrumb item rendering depending of its position
- */
- function renderBreadcrumbItem(item, index) {
- const { text, title, onClick } = item;
- const isActive = index === nbItems - 1;
- const itemId = `${id}-item-${index}`;
-
- /**
- * Wrapper for onClick in order to return item
- * @param args Arguments of default onClick callback
- * @returns {Function} New callback with the item
- */
- let wrappedOnClick;
- if (onClick) {
- wrappedOnClick = event => onClick(event, item);
- }
- function getItemContent() {
- if (!isActive && onClick) {
- return (
-
- );
- }
- const ariaCurrent = isActive ? 'page' : undefined;
- return (
- // bug in eslint a11y plugin, fixed in version 6.
- // But to upgrade we need to upgrade the whole package (eslint, airbnb, a11y, react)
- // eslint-disable-next-line jsx-a11y/aria-props
-
- {text}
-
- );
- }
- if (maxItemsReached && index > 0 && index < ellipsisIndex) {
- return undefined;
- }
- if (maxItemsReached && index === ellipsisIndex) {
- return (
-
-
-
- );
- }
- return (
-
- {getItemContent()}
-
- );
- }
-
- return (
-
- );
-}
-
-BreadcrumbsComponent.displayName = 'Breadcrumbs';
-
-if (process.env.NODE_ENV !== 'production') {
- BreadcrumbsComponent.propTypes = {
- id: PropTypes.string,
- loading: PropTypes.bool,
- items: PropTypes.arrayOf(
- PropTypes.shape({
- text: PropTypes.string.isRequired,
- title: PropTypes.string,
- onClick: PropTypes.func,
- }),
- ),
- maxItems: PropTypes.number,
- t: PropTypes.func,
- };
-}
-
-BreadcrumbsComponent.defaultProps = {
- id: randomUUID(),
- items: [],
- maxItems: DEFAULT_MAX_ITEMS,
- t: getDefaultT(),
-};
-
-export default withTranslation(I18N_DOMAIN_COMPONENTS)(BreadcrumbsComponent);
diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.module.scss b/packages/components/src/Breadcrumbs/Breadcrumbs.module.scss
deleted file mode 100644
index ce89774837d..00000000000
--- a/packages/components/src/Breadcrumbs/Breadcrumbs.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-////
-/// Breadcrumb
-/// @group Custom widgets
-////
-.tc-breadcrumb {
- :global(.tc-dropdown-button) {
- padding: 0;
- }
-
- &.loading {
- display: flex;
- align-items: center;
- justify-content: flex-start;
- padding: $padding-small;
- height: $breadcrumb-height;
-
- :global(.tc-skeleton) {
- margin: 0 $padding-smaller;
- }
- }
-}
diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.snapshot.test.js b/packages/components/src/Breadcrumbs/Breadcrumbs.snapshot.test.js
deleted file mode 100644
index 71b32cddbf1..00000000000
--- a/packages/components/src/Breadcrumbs/Breadcrumbs.snapshot.test.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { screen, render } from '@testing-library/react';
-import { BreadcrumbsComponent } from './Breadcrumbs.component';
-
-describe('Breadcrumbs', () => {
- it('should do nothing if items property is empty', () => {
- render();
- expect(screen.getByLabelText('breadcrumb')).toBeInTheDocument();
- expect(screen.queryByRole('button')).not.toBeInTheDocument();
- });
-
- it('should render all items without a dropdown menu if default max items is not reached', () => {
- const items = [
- { text: 'Text A', title: 'Go to Page Text A' },
- { text: 'Text B', title: 'Go to Page Text B' },
- { text: 'Text C', title: 'Go to Page Text C' },
- { text: 'Text D', title: 'Go to Page Text D' },
- ];
- render();
- expect(screen.getByLabelText('breadcrumb')).toBeInTheDocument();
- expect(screen.getByText('Text A')).toBeInTheDocument();
- expect(screen.getByText('Text B')).toBeInTheDocument();
- expect(screen.getByText('Text C')).toBeInTheDocument();
- expect(screen.getByText('Text D')).toBeInTheDocument();
- });
-
- it('should render items with a dropdown menu if default max items is reached', () => {
- const items = [
- { text: 'Text A', title: 'Go to Page Text A' },
- { text: 'Text B', title: 'Go to Page Text B' },
- { text: 'Text C', title: 'Go to Page Text C' },
- { text: 'Text D', title: 'Go to Page Text D' },
- { text: 'Text E', title: 'Go to Page Text E' },
- ];
-
- render();
- expect(screen.getByLabelText('breadcrumb')).toBeInTheDocument();
- expect(screen.getByText('Text A')).toBeInTheDocument();
- });
-});
diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.stories.js b/packages/components/src/Breadcrumbs/Breadcrumbs.stories.js
deleted file mode 100644
index be5a9252f74..00000000000
--- a/packages/components/src/Breadcrumbs/Breadcrumbs.stories.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import Breadcrumbs from './Breadcrumbs.component';
-
-export default {
- title: 'Components/Navigation/Breadcrumbs',
-};
-
-export const Default = () => {
- const items = [
- { text: 'Text A', title: 'Text title A', onClick: action('Text A clicked') },
- { text: 'Text B', title: 'Text title B', onClick: action('Text B clicked') },
- { text: 'text c in lower case', title: 'Text title C', onClick: action('Text C clicked') },
- ];
- return ;
-};
-
-export const Loading = () => ;
-
-export const WithMaxItemsReached = () => {
- const items = [
- {
- text: 'item very very very very long that we have to display',
- title: 'item very very very very long that we have to display',
- onClick: action('item very very very very long that we have to display clicked'),
- },
- { text: 'Text B', title: 'Text title B', onClick: action('Text B clicked') },
- { text: 'Text C', title: 'Text title C', onClick: action('Text C clicked') },
- { text: 'Text D', title: 'Text title D', onClick: action('Text D clicked') },
- ];
- return ;
-};
-
-export const WithMoreThanDefaultMaxItemsValue = () => {
- const items = [
- {
- text: 'item very very very very long that we have to display',
- title: 'item very very very very long that we have to display',
- onClick: action('item very very very very long that we have to display clicked'),
- },
- { text: 'Text B', title: 'Text title B', onClick: action('Text B clicked') },
- { text: 'Text C', title: 'Text title C', onClick: action('Text C clicked') },
- { text: 'Text D', title: 'Text title D', onClick: action('Text D clicked') },
- { text: 'Text E', title: 'Text title E', onClick: action('Text E clicked') },
- ];
- return ;
-};
-
-export const WithMoreThanASpecifiedMaxItemsValue = () => {
- const items = [
- {
- text: 'item very very very very long that we have to display',
- title: 'item very very very very long that we have to display',
- onClick: action('item very very very very long that we have to display clicked'),
- },
- { text: 'Text B', title: 'Text title B', onClick: action('Text B clicked') },
- { text: 'Text C', title: 'Text title C', onClick: action('Text C clicked') },
- { text: 'Text D', title: 'Text title D', onClick: action('Text D clicked') },
- { text: 'Text E', title: 'Text title E', onClick: action('Text E clicked') },
- { text: 'Text F', title: 'Text title F', onClick: action('Text F clicked') },
- ];
- return ;
-};
diff --git a/packages/components/src/Breadcrumbs/Breadcrumbs.test.js b/packages/components/src/Breadcrumbs/Breadcrumbs.test.js
deleted file mode 100644
index 1300a33e673..00000000000
--- a/packages/components/src/Breadcrumbs/Breadcrumbs.test.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import { screen, render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import Breadcrumbs from './Breadcrumbs.component';
-
-jest.unmock('@talend/design-system');
-
-describe('Breadcrumbs', () => {
- describe('render', () => {
- const items = [
- { text: 'Text A', title: 'Go to Page Text A' },
- { text: 'Text B', title: 'Go to Page Text B' },
- { text: 'Text C', title: 'Go to Page Text C' },
- { text: 'Text D', title: 'Go to Page Text D' },
- { text: 'Text E', title: 'Go to Page Text E' },
- ];
-
- it('should render all items without a dropdown menu when setting enough maxItems to display', () => {
- const customItems = [
- { text: 'Text A' },
- { text: 'Text B' },
- { text: 'Text C' },
- { text: 'Text D' },
- { text: 'Text E' },
- ];
- render();
- expect(screen.getAllByRole('listitem')).toHaveLength(5);
- expect(screen.queryByText('Show breadcrumb links')).not.toBeInTheDocument();
- });
-
- it('should render a dropdown menu containing 4 items by setting maxItems at 2', () => {
- const customItems = [
- { text: 'Text A' },
- { text: 'Text B' },
- { text: 'Text C' },
- { text: 'Text D' },
- { text: 'Text E' },
- ];
- render();
- expect(screen.getAllByRole('listitem')).toHaveLength(2);
- expect(screen.getByLabelText('Show breadcrumb links')).toBeInTheDocument();
- expect(screen.getAllByRole('menuitem')).toHaveLength(4);
- });
-
- it('should compute id for each item when provided', () => {
- render();
- expect(screen.getByRole('list')).toBeInTheDocument(); // only 1
- const breadcrumbMenuItems = screen.getAllByRole('menuitem');
- expect(breadcrumbMenuItems).toHaveLength(2);
- breadcrumbMenuItems.forEach((breadcrumbMenuItem, index) => {
- expect(breadcrumbMenuItem).toHaveAttribute('id', `my-breadcrumb-item-${index + 1}`);
- });
- const breadcrumbItems = screen.getAllByRole('listitem');
- expect(breadcrumbItems).toHaveLength(4);
- breadcrumbItems.forEach((breadcrumbItem, index) => {
- expect(screen.getByText(items[index].text)).toHaveAttribute(
- 'id',
- `my-breadcrumb-item-${index}`,
- );
- });
- });
- });
-
- describe('interactions', () => {
- const onTextAClick = jest.fn();
- const onTextBClick = jest.fn();
- const onTextCClick = jest.fn();
- const actions = [
- { text: 'Text A', onClick: onTextAClick },
- { text: 'Text B', onClick: onTextBClick },
- { text: 'Text C', onClick: onTextCClick },
- ];
-
- it('should trigger action callback on item click', () => {
- // given
- const clickedElementIndex = 1;
-
- // when
- const breadcrumbs = ;
- render(breadcrumbs);
- userEvent.click(screen.getByText(actions[clickedElementIndex].text));
-
- // then
- expect(onTextAClick).not.toBeCalled();
- expect(onTextBClick).toBeCalled();
- expect(onTextCClick).not.toBeCalled();
-
- const callArgs = onTextBClick.mock.calls[0];
- expect(callArgs[1]).toBe(actions[clickedElementIndex]);
- });
- });
-});
diff --git a/packages/components/src/Breadcrumbs/index.js b/packages/components/src/Breadcrumbs/index.js
deleted file mode 100644
index 1536d9e22cc..00000000000
--- a/packages/components/src/Breadcrumbs/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Breadcrumbs from './Breadcrumbs.component';
-
-export default Breadcrumbs;
diff --git a/packages/components/src/Checkbox/Checkbox.js b/packages/components/src/Checkbox/Checkbox.js
deleted file mode 100644
index d52bde6301c..00000000000
--- a/packages/components/src/Checkbox/Checkbox.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import omit from 'lodash/omit';
-
-export default function Checkbox({ id, className, label, intermediate, ...props }) {
- let dataFeature;
- let dataChecked = 0;
-
- if (!props.disabled && props['data-feature']) {
- dataFeature = props['data-feature'];
- dataFeature += props.checked ? '.disable' : '.enable';
- }
-
- if (intermediate) {
- dataChecked = 1;
- } else if (props.checked) {
- dataChecked = 2;
- }
-
- return (
-
-
-
- );
-}
-
-Checkbox.displayName = 'Checkbox';
-
-Checkbox.defaultProps = {
- disabled: false,
- checked: false,
- intermediate: false,
- label: '',
-};
-
-Checkbox.propTypes = {
- id: PropTypes.string.isRequired,
- label: PropTypes.node,
- checked: PropTypes.bool,
- autoFocus: PropTypes.bool,
- disabled: PropTypes.bool,
- intermediate: PropTypes.bool,
- className: PropTypes.string,
- 'data-feature': PropTypes.string,
-};
diff --git a/packages/components/src/Checkbox/Checkbox.stories.js b/packages/components/src/Checkbox/Checkbox.stories.js
deleted file mode 100644
index 2f24b30bb79..00000000000
--- a/packages/components/src/Checkbox/Checkbox.stories.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { action } from '@storybook/addon-actions';
-
-import Checkbox from '.';
-
-const onChange = action('onChange');
-
-const defaultProps = {
- id: 'id1',
- onChange,
-};
-const intermediate = {
- id: 'id2',
- onChange,
- intermediate: true,
-};
-const checked = {
- id: 'id3',
- onChange,
- checked: true,
-};
-const disabled = {
- id: 'id4',
- onChange,
- disabled: true,
-};
-const withLabel = {
- id: 'id5',
- onChange,
- label: 'Some label',
-};
-
-export default {
- title: 'Components/Form - Controls/Checkbox',
-};
-
-export const Default = () => (
-
-
Checkbox
-
Definition
-
The Checkbox component is basically a fancy checkbox like you have in your iphone
-
Examples
-
-
{element || label}
-
- );
- }
- return {element || label}
;
- }
- }
-}
-renderHeaderItem.propTypes = PropTypes.oneOfType([
- PropTypes.shape(statusPropTypes),
- PropTypes.shape(actionPropTypes),
- PropTypes.shape(simplePropTypes),
- PropTypes.arrayOf(
- PropTypes.oneOfType([
- PropTypes.shape(statusPropTypes),
- PropTypes.shape(actionPropTypes),
- PropTypes.shape(simplePropTypes),
- ]),
- ),
-]);
-
-function CollapsiblePanelHeader(props) {
- const { t } = useTranslation(I18N_DOMAIN_COMPONENTS);
- const { header, content, id, onSelect, onToggle, expanded, dataFeature } = props;
- const headerColumnClass = `col-${header.length}`;
- const headerItems = header.map((headerItem, index) => {
- const isHeaderItemArray = Array.isArray(headerItem);
- const elements = isHeaderItemArray
- ? headerItem.map(renderHeaderItem)
- : renderHeaderItem(headerItem);
-
- const selectors = isHeaderItemArray
- ? classNames(css.group, css[headerColumnClass])
- : classNames(css[headerItem.className], css[headerColumnClass]);
-
- return (
-
- {elements}
-
- );
- });
-
- // Panel component needs an array for header props
- const wrappedHeader = [
- onSelect ? (
-
- ) : (
- /* eslint-disable jsx-a11y/no-static-element-interactions */
- // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-
- {headerItems}
-
- ),
- ];
-
- if (content || props.children) {
- const caretText = expanded
- ? t('COLLAPSIBLE_PANEL_COLLAPSE', { defaultValue: 'Collapse panel' })
- : t('COLLAPSIBLE_PANEL_EXPAND', { defaultValue: 'Expand panel' });
-
- const defaultCaret = (
-
- {caretText}
-
- );
- wrappedHeader.push(defaultCaret);
- }
- return (
-
- {wrappedHeader}
-
- );
-}
-
-function getKeyValueContent(content) {
- return (
-
- {content.map((item, index) => [
- -
- {item.label}
-
,
- -
- {item.description}
-
,
- ])}
-
- );
-}
-
-function getTextualContent(content) {
- return (
-
-
- {content.head.map((item, index) => {
- const { label, tooltipPlacement, tooltipLabel, className } = item;
- return (
-
- {label}
-
- );
- })}
-
-
- {content.description}
-
-
Custom element can be here
,
-};
-
-const descriptiveTitle = {
- label: 'Panel with descriptive-panel theme',
- bsStyle: 'default',
- tooltipPlacement: 'top',
- className: 'title',
-};
-const descriptiveTag = {
- label: '(Tag element)',
- bsStyle: 'default',
- tooltipPlacement: 'top',
- className: 'tag',
-};
-const descriptiveDetail = {
- label: 'Detail element',
- bsStyle: 'default',
- tooltipPlacement: 'top',
- className: 'detail',
-};
-
-const element = (
-
- {' '}
- my custom element
-
-
Collapsible Panel
-
- Coucou
-
-
- Coucou
-
-
- Coucou
-
-
- Coucou
-
-
-
-);
-
-export const Header = () => (
-
-
Collapsible Panel Headers
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-);
-
-export const Body = () => (
-
-
Collapsible Panel
-
- Coucou from children
-
-
-
-);
-
-export const ThemeDescriptivePanel = () => (
-
-
Theme : descriptive-panel
-
-
-
-);
-
-export const Selection = () => (
-
-
Selection
-
- Coucou
-
-
- Coucou
-
-
-
-
-
-);
-
-export const Nested = () => (
-
-
Nested
-
-
-
- Lorem ipsum dolor sit amet.
-
-
-
-
-);
diff --git a/packages/components/src/CollapsiblePanel/CollapsiblePanel.test.js b/packages/components/src/CollapsiblePanel/CollapsiblePanel.test.js
deleted file mode 100644
index d0c1fd7b714..00000000000
--- a/packages/components/src/CollapsiblePanel/CollapsiblePanel.test.js
+++ /dev/null
@@ -1,122 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import CollapsiblePanel from './CollapsiblePanel.component';
-
-const version1 = {
- label: 'Version 1 94a06b6a3a85bc415add5fdb31dcceebf96b8182',
- bsStyle: 'default',
- tooltipPlacement: 'top',
-};
-const readOnlyLabel = {
- label: '(Read Only)',
- bsStyle: 'default',
- tooltipPlacement: 'top',
-};
-const timeStamp = {
- label: '03/02/2017 14:44:55',
- bsStyle: 'default',
- tooltipPlacement: 'top',
-};
-
-const propsPanelWithActions = {
- header: [{ actions: [], status: 'successful', label: 'Successful', icon: 'talend-check' }],
- content: [
- {
- label: 'Content1',
- description: 'Description1',
- },
- {
- label: 'Content2',
- description: 'Description2',
- },
- ],
- onToggle: jest.fn(),
-};
-
-describe('CollapsiblePanel', () => {
- it('should trigger onSelect callback on header click', () => {
- // given
- const propsDescriptivePanel = {
- header: [[version1, readOnlyLabel], timeStamp],
- content: {
- head: [
- {
- label: '21 step',
- bsStyle: 'default',
- tooltipPlacement: 'top',
- },
- {
- label: 'by Abdelaziz Maalej test 1 test 2 test 1 test 2',
- bsStyle: 'default',
- tooltipPlacement: 'top',
- },
- ],
- description: 'Lorem ipsum dolor',
- },
- theme: 'descriptive-panel',
- onSelect: jest.fn(),
- };
-
- const panelInstance = ;
-
- // when
- render(panelInstance);
- userEvent.click(screen.getByText('Version 1 94a06b6a3a85bc415add5fdb31dcceebf96b8182'));
-
- // then
- expect(propsDescriptivePanel.onSelect).toBeCalled();
- });
-
- it('should trigger onToggle callback on header click', () => {
- // given
- const panelInstance = ;
-
- // when
- render(panelInstance);
- userEvent.click(screen.getByText('Successful'));
-
- // then
- expect(propsPanelWithActions.onToggle).toBeCalled();
- });
-
- it('should render custom content in panel body', () => {
- // given
- const propsPanelWithCustomContent = {
- header: [{ actions: [], status: 'successful', label: 'Successful', icon: 'talend-check' }],
- onToggle: jest.fn(),
- };
- const customContent = custom title
;
- const panelInstance = (
- {customContent}
- );
- // when
- render(panelInstance);
-
- // then
- expect(screen.getByText('custom title')).toBeVisible();
- });
-
- it('should render custom element in panel header', async () => {
- // given
- const customElement = Custom label
;
- const propsPanelWithCustomElement = {
- ...propsPanelWithActions,
- header: [
- {
- element: customElement,
- label: 'Custom',
- tooltipLabel: 'Tooltip label',
- className: 'custom-col',
- },
- ...propsPanelWithActions.header,
- ],
- };
-
- const panelInstance = ;
- // when
- render(panelInstance);
-
- // then
- expect(screen.getByText('Custom label')).toBeVisible();
- });
-});
diff --git a/packages/components/src/CollapsiblePanel/index.js b/packages/components/src/CollapsiblePanel/index.js
deleted file mode 100644
index 61f43e824da..00000000000
--- a/packages/components/src/CollapsiblePanel/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import CollapsiblePanel from './CollapsiblePanel.component';
-
-export default CollapsiblePanel;
diff --git a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.component.js b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.component.js
index 0d9bda06d42..39654090c43 100644
--- a/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.component.js
+++ b/packages/components/src/DataViewer/Icons/TreeBranchIcon/TreeBranchIcon.component.js
@@ -2,10 +2,10 @@ import { PureComponent } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withTranslation } from 'react-i18next';
-import Icon from '../../../Icon';
import theme from './TreeBranchIcon.module.scss';
import I18N_DOMAIN_COMPONENTS from '../../../constants';
import getDefaultT from '../../../translate';
+import { Icon } from '@talend/design-system';
/**
* Allow to use custom get icon function.
diff --git a/packages/components/src/DataViewer/RecordsViewer/Branch/RecordsViewerBranch.component.js b/packages/components/src/DataViewer/RecordsViewer/Branch/RecordsViewerBranch.component.js
index a017c8f5f21..664797820d7 100644
--- a/packages/components/src/DataViewer/RecordsViewer/Branch/RecordsViewerBranch.component.js
+++ b/packages/components/src/DataViewer/RecordsViewer/Branch/RecordsViewerBranch.component.js
@@ -3,10 +3,10 @@ import get from 'lodash/get';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import keycode from 'keycode';
-import Skeleton from '../../../Skeleton';
import { LengthBadge } from '../../Badges';
import { TreeBranchIcon } from '../../Icons';
import theme from '../RecordsViewer.module.scss';
+import { SkeletonParagraph } from '@talend/design-system';
/**
* Used with the lazy loading to allow the render of the skeleton.
@@ -73,7 +73,7 @@ export class RecordsViewerBranch extends Component {
className,
)}
>
-
+
);
}
diff --git a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.component.js b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.component.js
index 7bf11ef35a4..16ff89095c1 100644
--- a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.component.js
+++ b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.component.js
@@ -2,10 +2,10 @@ import { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import has from 'lodash/has';
-import TooltipTrigger from '../../../TooltipTrigger';
import FormatValue from '../../../FormatValue/FormatValue.component';
import theme from './DefaultValueRenderer.module.scss';
+import { Tooltip } from '@talend/design-system';
export const DEFAULT_VALUE_PROP_TYPES = PropTypes.oneOfType([
PropTypes.string,
@@ -50,11 +50,7 @@ export default class DefaultValueRenderer extends Component {
);
if (this.props.isValueOverflown) {
- return (
-
- {content}
-
- );
+ return {content};
}
return content;
diff --git a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.test.js b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.test.js
index cee34cc639d..9cf21809ffc 100644
--- a/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.test.js
+++ b/packages/components/src/DataViewer/Text/SimpleTextKeyValue/DefaultValueRenderer.test.js
@@ -9,14 +9,6 @@ jest.mock('../../../FormatValue/FormatValue.component', () => {
));
});
-jest.mock('../../../TooltipTrigger', () => {
- return jest.fn(props => (
-
- {props.label}
- {props.children}
-
- ));
-});
describe('#DefaultValueRenderer', () => {
it('should render without the tooltip', () => {
diff --git a/packages/components/src/Datalist/Datalist.component.js b/packages/components/src/Datalist/Datalist.component.js
index 5a1872cf056..201db89e937 100644
--- a/packages/components/src/Datalist/Datalist.component.js
+++ b/packages/components/src/Datalist/Datalist.component.js
@@ -8,9 +8,9 @@ import get from 'lodash/get';
import Typeahead from '../Typeahead';
import theme from './Datalist.module.scss';
import FocusManager from '../FocusManager';
-import Icon from '../Icon';
import { useTranslation } from 'react-i18next';
import I18N_DOMAIN_COMPONENTS from '../constants';
+import { Icon } from '@talend/design-system';
export function escapeRegexCharacters(str) {
return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
diff --git a/packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.component.js b/packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.component.js
index bad5242cc02..94588e20e22 100644
--- a/packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.component.js
+++ b/packages/components/src/DateTimePickers/InputDateRangePicker/InputDateRangePicker.component.js
@@ -6,7 +6,6 @@ import { usePopper } from 'react-popper';
import FocusManager from '../../FocusManager';
import { focus } from '@talend/react-a11y';
-import Icon from '../../Icon';
import DateRange from '../DateRange';
import { DateRangeContext } from '../DateRange/Context';
@@ -15,6 +14,7 @@ import useInputPickerHandlers from '../hooks/useInputPickerHandlers';
import getDefaultT from '../../translate';
import theme from './InputDateRangePicker.module.scss';
+import { Icon } from '@talend/design-system';
const PROPS_TO_OMIT_FOR_INPUT = [
'id',
diff --git a/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.js b/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.js
index 0eaa380a01d..9125696a9f4 100644
--- a/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.js
+++ b/packages/components/src/DateTimePickers/InputDateTimeRangePicker/InputDateTimeRangePicker.component.js
@@ -4,8 +4,6 @@ import classnames from 'classnames';
import debounce from 'lodash/debounce';
import omit from 'lodash/omit';
-import Icon from '../../Icon';
-
import InputDateTimePicker from '../InputDateTimePicker';
import DateTimeRange from '../DateTimeRange';
import { DateTimeRangeContext } from '../DateTimeRange/Context';
@@ -13,6 +11,7 @@ import { DateTimeRangeContext } from '../DateTimeRange/Context';
import getDefaultT from '../../translate';
import theme from './InputDateTimeRangePicker.module.scss';
+import { Icon } from '@talend/design-system';
const PROPS_TO_OMIT_FOR_INPUT = [
'id',
diff --git a/packages/components/src/DateTimePickers/TimeZone/TimeZone.component.js b/packages/components/src/DateTimePickers/TimeZone/TimeZone.component.js
index 69494e7662e..8d5acbd2967 100644
--- a/packages/components/src/DateTimePickers/TimeZone/TimeZone.component.js
+++ b/packages/components/src/DateTimePickers/TimeZone/TimeZone.component.js
@@ -1,17 +1,15 @@
import PropTypes from 'prop-types';
-import Icon from '../../Icon';
-import TooltipTrigger from '../../TooltipTrigger';
-
import theme from './TimeZone.module.scss';
+import { Icon, Tooltip } from '@talend/design-system';
function TimeZone(props) {
return (
-
+
-
+
);
}
diff --git a/packages/components/src/DateTimePickers/TimeZone/TimeZone.component.test.js b/packages/components/src/DateTimePickers/TimeZone/TimeZone.component.test.js
index abd42e4a577..2fcebcb7a71 100644
--- a/packages/components/src/DateTimePickers/TimeZone/TimeZone.component.test.js
+++ b/packages/components/src/DateTimePickers/TimeZone/TimeZone.component.test.js
@@ -3,10 +3,9 @@
import { render } from '@testing-library/react';
import TimeZone from './TimeZone.component';
-jest.mock('../../TooltipTrigger', () => props => (
- {props.children}
-));
+
jest.unmock('@talend/design-system');
+
describe('TimeZone', () => {
it('should render', () => {
// when
diff --git a/packages/components/src/Drawer/Drawer.component.js b/packages/components/src/Drawer/Drawer.component.js
deleted file mode 100644
index 28c7fbd4d90..00000000000
--- a/packages/components/src/Drawer/Drawer.component.js
+++ /dev/null
@@ -1,393 +0,0 @@
-import PropTypes from 'prop-types';
-import { useState } from 'react';
-import get from 'lodash/get';
-import omit from 'lodash/omit';
-import noop from 'lodash/noop';
-import { Transition } from 'react-transition-group';
-import classnames from 'classnames';
-import { StackHorizontal, Tag, TagVariantsNames, Tooltip } from '@talend/design-system';
-import ActionBar from '../ActionBar';
-import Action from '../Actions/Action';
-import TabBar from '../TabBar';
-import Inject from '../Inject';
-import EditableText from '../EditableText';
-import { getTheme } from '../theme';
-import { randomUUID } from '@talend/utils';
-
-import theme from './Drawer.module.scss';
-
-const css = getTheme(theme);
-const DEFAULT_TRANSITION_DURATION = 350;
-
-const STYLES = {
- entering: { transform: 'translateX(0%)' },
- entered: { transform: 'translateX(0%)' },
- exiting: { transform: 'translateX(100%)' },
- exited: { transform: 'translateX(100%)' },
-};
-
-function DrawerAnimation(props) {
- const { children, withTransition, ...rest } = props;
- const timeout = withTransition ? DEFAULT_TRANSITION_DURATION : 0;
-
- return (
-
- {transitionState => {
- const style = {
- transition: `transform ${timeout}ms ease-in-out`,
- transform: 'translateX(100%)',
- ...STYLES[transitionState],
- };
- return children({ style, transitioned: transitionState === 'entered', transitionState });
- }}
-
- );
-}
-
-DrawerAnimation.propTypes = {
- children: PropTypes.func,
- withTransition: PropTypes.bool,
- onTransitionComplete: PropTypes.func,
-};
-DrawerAnimation.defaultProps = {
- withTransition: true,
- onTransitionComplete: () => {},
-};
-
-function DrawerContainer({
- drawerId,
- stacked,
- className,
- children,
- withTransition = true,
- ...rest
-}) {
- const drawerContainerClasses = css(
- className,
- 'tc-drawer',
- {
- 'tc-drawer-transition': withTransition,
- },
- {
- [theme['drawer-stacked']]: stacked,
- stacked,
- },
- );
- return (
-
- );
-}
-
-DrawerContainer.propTypes = {
- drawerId: PropTypes.string,
- stacked: PropTypes.bool,
- withTransition: PropTypes.bool,
- className: PropTypes.string,
- children: PropTypes.node.isRequired,
-};
-
-export function cancelActionComponent(onCancelAction, getComponent) {
- if (!onCancelAction) {
- return null;
- }
-
- const ActionComponent = Inject.get(getComponent, 'Action', Action);
- const enhancedCancelAction = {
- icon: 'talend-cross',
- hideLabel: true,
- link: true,
- ...onCancelAction,
- };
- return (
-
- );
-}
-
-function renderSubtitleTag(subtitleTagLabel, subtitleTagTooltip, subtitleTagVariant = 'default') {
- if (subtitleTagTooltip) {
- return (
-
- {subtitleTagLabel}
-
- );
- }
-
- return {subtitleTagLabel};
-}
-export function SubtitleComponent({ subtitle, ...rest }) {
- if (!subtitle || !subtitle.length) {
- return null;
- }
-
- const { subtitleTag } = rest;
-
- return (
-
-
- {subtitle}
- {subtitleTag &&
- subtitleTag.label &&
- renderSubtitleTag(subtitleTag.label, subtitleTag.tooltip, subtitleTag.variant)}
-
-
- );
-}
-
-SubtitleComponent.propTypes = {
- subtitle: PropTypes.string,
- subtitleTag: PropTypes.shape({
- label: PropTypes.string,
- tooltip: PropTypes.string,
- variant: PropTypes.oneOf(TagVariantsNames),
- }),
-};
-
-export function subtitleComponent(subtitle) {
- // backward compatibility
- return ;
-}
-
-function DrawerTitle({
- title,
- subtitle,
- drawerId,
- children,
- onCancelAction,
- getComponent,
- editable,
- inProgress,
- subtitleTag,
- onEdit,
- onSubmit,
- onCancel,
- renderTitleActions = noop,
- ...props
-}) {
- const [isEditMode, setIsEditMode] = useState(false);
- function handleEdit(...args) {
- setIsEditMode(true);
- if (onEdit) {
- onEdit(...args);
- }
- }
- function handleCancel(...args) {
- setIsEditMode(false);
- if (onCancel) {
- onCancel(...args);
- }
- }
- function handleSubmit(...args) {
- setIsEditMode(false);
- if (onSubmit) {
- onSubmit(...args);
- }
- }
-
- if (!title && !children) {
- return null;
- }
- const InjectedEditableText = Inject.get(getComponent, 'EditableText', EditableText);
- return (
-
-
-
- {!editable ? (
-
- {title}
-
- ) : (
-
- )}
-
- {!isEditMode ? : null}
-
-
- {renderTitleActions()}
- {cancelActionComponent(onCancelAction, getComponent)}
-
-
-
{children}
-
{children}
;
-}
-
-DrawerFooter.propTypes = {
- children: PropTypes.node,
-};
-
-export function combinedFooterActions(onCancelAction, footerActions, activeTabItem = {}) {
- const enhancedFooterActions = { ...omit(footerActions, 'actions') };
- enhancedFooterActions.actions = {};
- ['left', 'center', 'right'].forEach(item => {
- enhancedFooterActions.actions[item] = [
- ...get(footerActions, `actions.${item}`, []),
- ...get(activeTabItem, `actions.${item}`, []),
- ];
- });
-
- if (onCancelAction && !onCancelAction.hideInFooter) {
- enhancedFooterActions.actions.left.unshift(onCancelAction);
- }
-
- return enhancedFooterActions;
-}
-
-function Drawer({
- stacked,
- title,
- className,
- style,
- children,
- footerActions,
- onCancelAction,
- tabs,
- withTransition,
- getComponent,
- selectedTabKey,
- editableTitle,
- renderTitleActions,
-}) {
- const [drawerId] = useState(randomUUID());
- if (!children) {
- return null;
- }
-
- const TabBarComponent = Inject.get(getComponent, 'TabBar', TabBar);
-
- let activeTab = {};
- let activeTabItem = [];
- let customTabs;
- if (tabs && tabs.items.length > 0) {
- customTabs = {
- ...tabs,
- items: tabs.items && tabs.items.map(({ footerActions: _, ...item }) => item),
- };
-
- if (selectedTabKey) {
- customTabs.selectedKey = selectedTabKey;
- activeTab = tabs.items.find(tab => tab.key === selectedTabKey);
- }
- activeTabItem = get(activeTab, 'footerActions', {});
- }
-
- return (
-
-
- {tabs && (
-
-
-
- )}
-
-
- );
-}
-
-Drawer.displayName = 'Drawer';
-
-Drawer.propTypes = {
- stacked: PropTypes.bool,
- title: PropTypes.string,
- editableTitle: PropTypes.bool,
- children: PropTypes.node,
- style: PropTypes.object, // eslint-disable-line react/forbid-prop-types
- className: PropTypes.string,
- // footer action, see action bar for api
- footerActions: PropTypes.shape(ActionBar.propTypes),
- onCancelAction: PropTypes.shape(Action.propTypes),
- tabs: PropTypes.shape(TabBar.propTypes),
- withTransition: PropTypes.bool,
- renderTitleActions: PropTypes.func,
- getComponent: PropTypes.func,
- selectedTabKey: PropTypes.string,
-};
-
-Drawer.defaultProps = {
- withTransition: true,
-};
-
-Drawer.Animation = DrawerAnimation;
-Drawer.Container = DrawerContainer;
-Drawer.Title = DrawerTitle;
-Drawer.Content = DrawerContent;
-Drawer.Footer = DrawerFooter;
-Drawer.FooterStyle = theme['tc-drawer-footer'];
-
-export default Drawer;
diff --git a/packages/components/src/Drawer/Drawer.module.scss b/packages/components/src/Drawer/Drawer.module.scss
deleted file mode 100644
index 86fcd68f33e..00000000000
--- a/packages/components/src/Drawer/Drawer.module.scss
+++ /dev/null
@@ -1,195 +0,0 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-// rewrite using design tokens
-@use '~@talend/design-tokens/lib/tokens';
-
-$tc-drawer-initial-offset: 1000px !default;
-$tc-drawer-bgcolor: tokens.$coral-color-neutral-background !default;
-$tc-drawer-transition-duration: 230ms !default;
-$tc-drawer-transition-easing: cubic-bezier(0.18, 0.89, 0.32, 1.28) !default;
-$tc-drawer-padding: $padding-large !default;
-$tc-drawer-header-height: 5.5rem !default;
-$tc-drawer-header-color: tokens.$coral-color-neutral-text !default;
-$tc-drawer-header-background: tokens.$coral-color-neutral-background !default;
-$tc-drawer-header-border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-weak !default;
-$tc-drawer-tabs-background: tokens.$coral-color-accent-background-weak !default;
-$tc-drawer-content-max-width: 65rem !default;
-$tc-action-bar-background-color: tokens.$coral-color-neutral-background-medium !default;
-$tc-drawer-z-index: $drawer-z-index !default;
-
-.tc-drawer {
- pointer-events: all;
- background-color: $tc-drawer-bgcolor;
- box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.3);
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- width: 50vw;
- z-index: $tc-drawer-z-index;
-}
-
-@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
- .tc-drawer {
- width: 40vw;
- }
-}
-
-@media (min-width: $screen-lg-min) {
- .tc-drawer {
- width: 30vw;
- }
-}
-
-.tc-drawer-container {
- display: flex;
- flex-direction: column;
- height: 100%;
-}
-
-.tc-drawer-tabs-container {
- background-color: $tc-drawer-tabs-background;
-}
-
-.tc-drawer-actionbar {
- padding: 0;
-}
-
-.drawer-stacked {
- width: 100%;
-}
-
-@media screen and (min-width: $screen-xs-max) {
- .drawer-stacked {
- .tc-drawer-header-title,
- .tc-drawer-tabs,
- .tc-drawer-content-wrapper,
- .tc-drawer-actionbar,
- .tc-drawer-footer > nav {
- width: $tc-drawer-content-max-width;
- margin: 0 auto;
- }
-
- :global {
- .tc-actionbar-container {
- margin: 0 auto;
- padding: 0 $tc-drawer-padding;
- width: $tc-drawer-content-max-width;
- }
- }
- }
-}
-
-.tc-drawer-header {
- background-color: $tc-drawer-header-background;
- border-bottom: $tc-drawer-header-border;
-
- :global {
- .tc-editable-text {
- min-width: 0;
- }
-
- .tc-editable-text-pencil {
- color: $tc-drawer-header-color;
- }
- }
-
- &-menu {
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- height: $tc-drawer-header-height;
- padding: $tc-drawer-padding;
-
- .tc-drawer-header-title {
- display: flex;
- flex: 1;
- flex-direction: column;
- justify-content: center;
-
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
-
- h1 {
- font: tokens.$coral-heading-m;
- flex: 1;
- margin: 0;
- color: $tc-drawer-header-color;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- }
-
- :global(.tc-editable-text) {
- flex: 1;
- }
-
- > .tc-editable-text {
- width: unset;
- }
- }
-
- .tc-drawer-close-action {
- flex: 0;
- margin-right: -$tc-drawer-padding;
- color: $tc-drawer-header-color;
- }
-
- .drawer-close-action-tooltip {
- position: absolute;
- right: 0;
- bottom: calc(#{$tc-drawer-padding} / 2);
- }
- }
-
- &-subtitle {
- padding-top: $padding-smaller;
- }
-}
-
-.tc-drawer-header-with-tabs {
- padding: 0;
- background-color: tokens.$coral-color-neutral-background;
-}
-
-.tc-drawer-content {
- flex-grow: 1;
- min-height: 0;
- overflow-y: auto;
-
- &-wrapper {
- padding: $tc-drawer-padding;
- flex-grow: 1;
- min-height: 0;
- }
-}
-
-.tc-drawer-footer,
-.tc-drawer-actionbar-container {
- padding: $padding-small $tc-drawer-padding;
- background: $tc-action-bar-background-color;
-
- :global {
- .navbar-left,
- .navbar-right {
- > * {
- margin-top: 0;
- margin-bottom: 0;
- }
- }
- }
-}
-
-:global(.tc-with-drawer-wrapper) :global(.tc-drawer.stacked)::after {
- background: rgba(0, 0, 0, 0.4);
- content: ' ';
- height: 100%;
- width: 100%;
- position: absolute;
- top: 0;
-}
-
-:global(.tc-with-drawer-wrapper:last-child) :global(.tc-drawer.stacked)::after {
- content: none;
-}
diff --git a/packages/components/src/Drawer/Drawer.stories.js b/packages/components/src/Drawer/Drawer.stories.js
deleted file mode 100644
index c63b1856347..00000000000
--- a/packages/components/src/Drawer/Drawer.stories.js
+++ /dev/null
@@ -1,670 +0,0 @@
-import { useState } from 'react';
-import { action } from '@storybook/addon-actions';
-import { TagVariantsNames } from '@talend/design-system';
-import { Nav, NavItem, Tab } from '@talend/react-bootstrap';
-
-import Drawer from './Drawer.component';
-
-import ActionBar from '../ActionBar';
-import HeaderBar from '../HeaderBar';
-import Layout from '../Layout';
-import SidePanel from '../SidePanel';
-import { ActionButton } from '../Actions';
-
-const header = ;
-
-const actions = [
- {
- label: 'Preparations',
- icon: 'talend-dataprep',
- onClick: action('Preparations clicked'),
- },
- {
- label: 'Datasets',
- icon: 'talend-folder',
- onClick: action('Datasets clicked'),
- },
- {
- label: 'Favorites',
- icon: 'talend-star',
- onClick: action('Favorites clicked'),
- },
-];
-
-const cancel = {
- label: 'Cancel',
- onClick: action('You clicked me'),
- className: 'btn-inverse',
-};
-
-const primary = {
- label: 'Primary',
- bsStyle: 'primary',
- onClick: action('You clicked me'),
-};
-
-const onCancelAction = {
- label: 'Cancel',
- onClick: action('You clicked on cancel action'),
- className: 'btn-inverse',
-};
-
-const panelActions = {
- left: [cancel],
- right: [primary],
-};
-
-const multi3 = {
- label: 'multi3',
- icon: 'talend-cog',
- onClick: action('You clicked me'),
-};
-
-const multiSelectActions = {
- left: [
- {
- label: 'multi1',
- icon: 'talend-cog',
- onClick: action('You clicked me'),
- },
- {
- label: 'multi2',
- icon: 'talend-cog',
- onClick: action('You clicked me'),
- },
- ],
- right: [
- multi3,
- {
- label: 'multi4',
- icon: 'talend-cog',
- onClick: action('You clicked me'),
- },
- ],
-};
-
-const basicProps = {
- actions: panelActions,
- multiSelectActions,
-};
-
-const tabs = {
- id: 'tabs',
- items: [
- {
- key: 'info',
- label: 'Info',
- },
- {
- key: 'navigator',
- label: 'Navigator',
- },
- {
- key: 'profile',
- label: 'Profile',
- },
- {
- key: 'metrics',
- label: 'Metrics',
- },
- ],
- onSelect: action('Tab clicked'),
- selectedKey: 'navigator',
-};
-
-const tabsActionFooter = {
- id: 'tabs',
- items: [
- {
- key: 'info',
- label: 'Info',
- footerActions: {
- actions: {
- left: [
- {
- id: 'view-left',
- key: 'view-left',
- label: 'ActionRight',
- },
- ],
- center: [
- {
- id: 'view-center',
- key: 'view-center',
- label: 'ActionCenter',
- },
- ],
- right: [
- {
- id: 'view-right',
- key: 'view-right',
- label: 'ActionRight',
- },
- ],
- },
- },
- },
- {
- key: 'navigator',
- label: 'Navigator',
- footerActions: {
- actions: {
- left: [
- {
- id: 'view-left-hidden',
- key: 'view-left-hidden',
- bsStyle: 'danger',
- label: 'Action not visible in the tab "info"',
- },
- ],
- },
- },
- },
- ],
- onSelect: action('Tab clicked'),
-};
-
-function scrollableContent() {
- const content = [];
- for (let i = 1; i <= 42; i += 1) {
- content.push(The scroll is defined by the content {i}
);
- }
- return content;
-}
-
-const titleActions = () => (
-
-);
-
-const drawers = [
-
- Hello drawer 1
- You should not being able to read this because I'm first
- ,
-
- Hello drawer 2
- The scroll is defined by the content
- Hello drawer 3
- {scrollableContent()}
- ,
-];
-
-const editableDrawers = [
-
- Hello drawer 1
- You should not being able to read this because I'm first
- ,
-
- Hello drawer 2
- The scroll is defined by the content
- Hello drawer 3
- {scrollableContent()}
- ,
-];
-
-const longEditableDrawers = [
-
- Hello drawer 1
- You should not being able to read this because I'm first
- ,
-
- Hello drawer 2
- The scroll is defined by the content
- Hello drawer 3
- {scrollableContent()}
- ,
-];
-
-const drawersNoTransition = [
-
- Hello drawer 1
- You should not being able to read this because I'm first
- ,
-
- Hello drawer 2
- The scroll is defined by the content
- Hello drawer 3
- {scrollableContent()}
- ,
-];
-
-const sidePanel = ;
-const twentyRows = [];
-for (let index = 0; index < 20; index++) {
- twentyRows.push(The content dictate the width
);
-}
-
-export default {
- title: 'Components/Layout/Drawer',
-};
-
-export const Layout1Column = () => (
-
- zone with drawer
- {twentyRows}
-
-);
-
-export const Layout2Columns = () => (
-
- zone with drawer
- {twentyRows}
-
-);
-
-export const WithEditableHeader = () => (
-
- zone with drawer
- {twentyRows}
-
-);
-
-export const WithLongEditableHeader = () => (
-
- zone with drawer
- {twentyRows}
-
-);
-
-export const DefaultWithNoTransition = () => (
-
- zone with drawer
- {twentyRows}
-
-);
-
-export const StackedDrawers = () => {
- const stackedDrawers = [
-
- Hello drawer 1
- You should not being able to read this because I'm first
- ,
-
- Hello drawer 2
- The scroll is defined by the content
- {scrollableContent()}
- ,
-
- Hello drawer 3
- The scroll is defined by the content
- {scrollableContent()}
- ,
- ];
- const fiftyRows = [];
- for (let index = 0; index < 50; index++) {
- fiftyRows.push(The content dictate the width
);
- }
- return (
-
- zone with drawer
- {fiftyRows}
-
- );
-};
-
-export const WithTabs = () => {
- const drawersWithTabs = [
-
- The content
- ,
-
- The content
- ,
- ];
- return (
-
- zone with drawer
-
- );
-};
-
-export const WithTabsWithSpecificFooters = () => {
- const drawersWithTabs = [
-
- This tab contain specific actions in left, center and right parts of the footer.
-
- An other specific action with the label "Action not visible in the tab 'info'" is define in
- the tab "navigator" but not visible in the tab "info".
-
- ,
-
- This tab contain specific actions in left, center and right parts of the footer.
-
- An other specific action with the label "Action not visible in the tab 'info'" is define in
- the tab "navigator" but not visible in the tab "info".
-
- ,
- ];
- return (
-
- zone with drawer
-
- );
-};
-
-export const Custom = () => {
- function CustomDrawer() {
- return (
-
-
-
-
-
-
-
-
- {scrollableContent()}
- Test
-
-
- {scrollableContent()}
-
-
-
- {scrollableContent()}
-
-
-
- {scrollableContent()}
-
-
-
-
-
-
- );
- }
- return (
- ]}
- >
- zone with drawer
-
- );
-};
-
-export const CustomStacked = () => {
- // Use same cancel action props with className for Title and Footer
- const sameCancelAction = panelActions.left[0];
- function CustomDrawer() {
- return (
-
-
-
-
-
- {scrollableContent()}
-
-
-
-
-
Hello drawer 1
- You should not being able to read this because I'm first
-
- ),
- second: (
- remove('second') }}
- >
- Hello drawer 2
- The scroll is defined by the content
- {scrollableContent()}
-
- ),
- third: (
- remove('third') }}
- >
- No transition on this one
- Coucou
-
- ),
- };
- const [displayedDrawers, setDisplayedDrawers] = useState(allDrawers);
-
- function remove(id) {
- setDisplayedDrawers(oldDrawers =>
- Object.entries(oldDrawers)
- .filter(([key]) => key !== id)
- .reduce((accu, [key, value]) => {
- accu[key] = value;
- return accu;
- }, {}),
- );
- }
-
- return (
-
-
-
-
-
- );
-};
-
-export const _Interactive = () => {
- const allDrawers = {
- first: (
- remove('first') }}
- >
- Hello drawer 1
- You should not being able to read this because I'm first
-
- ),
- second: (
- remove('second') }}
- >
- Hello drawer 2
- The scroll is defined by the content
- {scrollableContent()}
-
- ),
- third: (
- remove('third') }}
- >
- No transition on this one
- Coucou
-
- ),
- };
- const [displayedDrawers, setDisplayedDrawers] = useState(allDrawers);
-
- function remove(id) {
- setDisplayedDrawers(oldDrawers =>
- Object.entries(oldDrawers)
- .filter(([key]) => key !== id)
- .reduce((accu, [key, value]) => {
- accu[key] = value;
- return accu;
- }, {}),
- );
- }
-
- return (
-
-
-
-
-
- );
-};
-
-export const WithSubtitleComponent = () => {
- const [variant, setVariant] = useState('default');
-
- return (
-
-
- Hello drawer 1
- You should not being able to read this because I'm first
- ,
- ]}
- >
- Select subtitle tag variants
-
-
- );
-};
diff --git a/packages/components/src/Drawer/Drawer.test.js b/packages/components/src/Drawer/Drawer.test.js
deleted file mode 100644
index afadd0cc250..00000000000
--- a/packages/components/src/Drawer/Drawer.test.js
+++ /dev/null
@@ -1,407 +0,0 @@
-import { render, screen } from '@testing-library/react';
-
-import Drawer, { cancelActionComponent, combinedFooterActions } from './Drawer.component';
-
-describe('Drawer', () => {
- it('should render', () => {
- const { container } = render(
-
- Hello world
- ,
- );
- expect(container.firstChild).toMatchSnapshot();
- });
- it('should render without tc-drawer-transition class', () => {
- render(
-
- Hello world
- ,
- );
- expect(screen.getByRole('dialog')).not.toHaveClass('tc-drawer-transition');
- expect(screen.getByRole('dialog')).toHaveClass('tc-drawer');
- });
- it('should render using custom styles', () => {
- render(
-
- Hello world
- ,
- );
- expect(screen.getByRole('dialog')).toHaveStyle('top: 45px;');
- });
- it('should render using custom className', () => {
- render(
-
- Hello world
- ,
- );
- expect(screen.getByRole('dialog')).toHaveClass('my-custom-drawer');
- });
- it('should render stacked', () => {
- render(
-
- Hello world
- ,
- );
- expect(screen.getByRole('dialog')).toHaveClass('stacked');
- expect(screen.getByRole('dialog')).toHaveClass('theme-drawer-stacked');
- });
- it('should not render if no children', () => {
- render();
- expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
- });
- it('should render cancelActionComponent', () => {
- render(cancelActionComponent({ id: 'test' }));
- expect(screen.getByRole('link')).toBeInTheDocument();
- });
- it('should not render cancelActionComponent', () => {
- render(cancelActionComponent());
- expect(screen.queryByRole('link')).not.toBeInTheDocument();
- });
- it('should render with tabs', () => {
- const tabs = {
- id: 'my-tabs',
- items: [
- {
- key: '1',
- label: 'Tab 1',
- },
- {
- key: '2',
- label: 'Tab 2',
- },
- ],
- onSelect: jest.fn(),
- selectedKey: '2',
- };
- render(
-
- Hello world
- ,
- );
- expect(screen.getByRole('tablist')).toBeInTheDocument();
- expect(screen.getAllByRole('tab').length).toBe(2);
- expect(screen.getAllByRole('tab')[0]).toHaveAttribute('aria-selected', 'false');
- expect(screen.getAllByRole('tab')[1]).toHaveAttribute('aria-selected', 'true');
-
- expect(screen.getByText('Tab 1')).toBeInTheDocument();
- expect(screen.getByText('Tab 2')).toBeInTheDocument();
- });
-
- it('should render with tabs specific actions by tab with selectedTabKey', () => {
- const tabs = {
- id: 'my-tabs',
- items: [
- {
- key: '1',
- label: 'Tab 1',
- footerActions: {
- actions: {
- left: [
- {
- id: 'view-left-tab-1',
- key: 'view-left-tab-1',
- label: 'ActionLeft-tab-1',
- },
- ],
- center: [
- {
- id: 'view-center',
- key: 'view-center',
- label: 'ActionCenter',
- },
- ],
- right: [
- {
- id: 'view-right',
- key: 'view-right',
- label: 'ActionRight',
- },
- ],
- },
- },
- },
- {
- key: '2',
- label: 'Tab 2',
- footerActions: {
- actions: {
- center: [
- {
- id: 'view-center-tab-2',
- key: 'view-center-tab-2',
- label: 'ActionCenter-tab-2',
- },
- ],
- },
- },
- },
- {
- key: '3',
- label: 'Tab 3',
- footerActions: {
- actions: {
- center: [
- {
- id: 'view-center-tab-3',
- key: 'view-center-tab-3',
- label: 'ActionCenter-tab-3',
- },
- ],
- },
- },
- },
- ],
- onSelect: jest.fn(),
- };
- render(
-
- Hello world
- ,
- );
-
- expect(screen.getByText('Tab 1')).toBeInTheDocument();
- expect(screen.getByText('Tab 2')).toBeInTheDocument();
- expect(screen.getByText('Tab 3')).toBeInTheDocument();
-
- expect(screen.getByText('Hello world')).toBeInTheDocument();
- expect(screen.getByText('ActionCenter-tab-2')).toBeInTheDocument();
-
- expect(screen.queryByText('ActionLeft-tab-1')).not.toBeInTheDocument();
- expect(screen.queryByText('ActionCenter-tab-3')).not.toBeInTheDocument();
- });
-
- it('render drawer content without extra className', () => {
- render(
-
- Hello world
- ,
- );
- expect(screen.getByText('Hello world')).toBeInTheDocument();
- });
-
- it('render drawer content with extra className', () => {
- const { container } = render(
-
- Hello world
- ,
- );
- expect(container.firstChild).toHaveClass('extraClass');
- });
-
- it('render with injected TabBar or Action if provided', () => {
- function getComponent(name) {
- if (name === 'TabBar') {
- return function CustomTabBar() {
- return injected tabbar
;
- };
- } else if (name === 'Action') {
- return function CustomAction() {
- return ;
- };
- }
- return null;
- }
-
- const props = {
- getComponent,
- title: 'test',
- tabs: { items: [{ item: { key: 'tab1', label: 'tab1' }, onClick: jest.fn() }] },
- onCancelAction: { id: 'cacel-button-id' },
- footerActions: { actions: { left: [] } },
- };
-
- render(
-
- simple drawer
- ,
- );
-
- expect(screen.getByText('injected tabbar')).toBeInTheDocument();
- expect(screen.getByText('custom')).toBeInTheDocument();
- });
-
- it('render children even if there is no title', () => {
- function getComponent(name) {
- if (name === 'EditableText') {
- return function EditableText() {
- return ;
- };
- } else if (name === 'TabBar') {
- return function CustomTabBar() {
- return injected tabbar
;
- };
- } else if (name === 'Action') {
- return function CustomAction() {
- return ;
- };
- }
- return null;
- }
-
- const props = {
- getComponent,
- tabs: { items: [{ item: { key: 'tab1', label: 'tab1' }, onClick: jest.fn() }] },
- };
-
- render(
-
- simple drawer
- ,
- );
-
- expect(screen.getByText('simple drawer')).toBeInTheDocument();
- });
-
- it('test combinedFooterActions with existing actions left and onCancelAction', () => {
- const onCancelAction = {
- actionId: 'drawer:closeDrawer',
- };
- const footerActions = {
- actions: {
- left: [
- {
- id: 'action-left-id',
- key: 'action-left-key',
- label: 'action-left-label',
- },
- ],
- },
- };
-
- const result = {
- actions: {
- left: [
- {
- actionId: 'drawer:closeDrawer',
- },
- {
- id: 'action-left-id',
- key: 'action-left-key',
- label: 'action-left-label',
- },
- ],
- center: [],
- right: [],
- },
- };
-
- expect(combinedFooterActions(onCancelAction, footerActions)).toEqual(result);
- });
-
- it('test combinedFooterActions with onCancelAction and without actions left', () => {
- const onCancelAction = {
- actionId: 'drawer:closeDrawer',
- };
- const footerActions = {
- actions: {
- left: [],
- },
- };
-
- const result = {
- actions: {
- left: [
- {
- actionId: 'drawer:closeDrawer',
- },
- ],
- center: [],
- right: [],
- },
- };
-
- expect(combinedFooterActions(onCancelAction, footerActions)).toEqual(result);
- });
-
- it('test combinedFooterActions without actions left and onCancelAction', () => {
- const footerActions = {
- actions: {
- left: [
- {
- id: 'action-left-id',
- key: 'action-left-key',
- label: 'action-left-label',
- },
- ],
- center: [],
- right: [],
- },
- };
-
- expect(combinedFooterActions(undefined, footerActions)).toEqual(footerActions);
- });
-
- it('test combinedFooterActions save good object references', () => {
- const onCancelAction = {
- actionId: 'drawer:closeDrawer',
- };
- const footerActions = {
- actions: {
- left: [
- {
- id: 'action-left-id',
- key: 'action-left-key',
- label: 'action-left-label',
- },
- ],
- },
- };
-
- const result = {
- actions: {
- left: [
- {
- actionId: 'drawer:closeDrawer',
- },
- {
- id: 'action-left-id',
- key: 'action-left-key',
- label: 'action-left-label',
- },
- ],
- center: [],
- right: [],
- },
- };
-
- expect(combinedFooterActions(onCancelAction, footerActions)).toEqual(result);
- expect(combinedFooterActions(onCancelAction, footerActions)).toEqual(result);
- });
-});
-
-describe('Drawer title', () => {
- function getComponent(name) {
- if (name === 'EditableText') {
- return function EditableText() {
- return ;
- };
- }
- return null;
- }
-
- const tagTitleProps = {
- getComponent,
- title: 'test',
- subtitle: 'subtitle test',
- subtitleTag: {
- label: 'BETA',
- tooltip: 'This is a BETA tag',
- variant: 'beta',
- },
- };
- it('should render drawer title with a tag', () => {
- render();
- expect(screen.getByText('test')).toBeInTheDocument();
- });
- it('should render drawer title with a tag and a tooltip', () => {
- const tooltipAndTagTitleProps = {
- ...tagTitleProps,
- subtitleTagTooltip: 'It might work :D',
- };
-
- render();
-
- expect(screen.getByText('test')).toBeInTheDocument();
- expect(screen.getByText('BETA')).toBeInTheDocument();
- });
-});
diff --git a/packages/components/src/Drawer/__snapshots__/Drawer.test.js.snap b/packages/components/src/Drawer/__snapshots__/Drawer.test.js.snap
deleted file mode 100644
index 7495e505f62..00000000000
--- a/packages/components/src/Drawer/__snapshots__/Drawer.test.js.snap
+++ /dev/null
@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Drawer should render 1`] = `
-
-`;
diff --git a/packages/components/src/Drawer/index.js b/packages/components/src/Drawer/index.js
deleted file mode 100644
index a52be145ae1..00000000000
--- a/packages/components/src/Drawer/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Drawer from './Drawer.component';
-
-export default Drawer;
diff --git a/packages/components/src/EditableText/EditableText.component.js b/packages/components/src/EditableText/EditableText.component.js
index 5e00d2c8a68..86a139fef4d 100644
--- a/packages/components/src/EditableText/EditableText.component.js
+++ b/packages/components/src/EditableText/EditableText.component.js
@@ -2,17 +2,17 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import { withTranslation } from 'react-i18next';
-import Skeleton from '../Skeleton';
import InlineForm from './InlineForm.component';
import { PlainTextTitle } from './PlainTextTitle.component';
import theme from './EditableText.module.scss';
import getDefaultT from '../translate';
import I18N_DOMAIN_COMPONENTS from '../constants';
+import { SkeletonParagraph } from '@talend/design-system';
export function EditableTextComponent({ editMode, loading, inProgress, ...rest }) {
if (loading) {
- return ;
+ return ;
}
const Component = editMode ? InlineForm : PlainTextTitle;
const allyProps = {};
diff --git a/packages/components/src/EditableText/PlainTextTitle.component.tsx b/packages/components/src/EditableText/PlainTextTitle.component.tsx
index 2d6192fa860..942aa25eccf 100644
--- a/packages/components/src/EditableText/PlainTextTitle.component.tsx
+++ b/packages/components/src/EditableText/PlainTextTitle.component.tsx
@@ -1,10 +1,10 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import classNames from 'classnames';
import { TFunction } from 'i18next';
-import TooltipTrigger from '../TooltipTrigger';
import { Action } from '../Actions';
import getDefaultT from '../translate';
import theme from './PlainTextTitle.module.scss';
+import { Tooltip } from '@talend/design-system';
type PlainTextTitleProps = {
id?: string;
@@ -31,11 +31,7 @@ export function PlainTextTitle({
const ComponentClass = componentClass;
return (
-
+
{text}
-
+
{actualLabel}
{item.icon && (
-
+
-
+
)}
);
diff --git a/packages/components/src/Enumeration/Items/Item/Item.propTypes.js b/packages/components/src/Enumeration/Items/Item/Item.propTypes.js
index a192fdf8605..bfbdb10d4a2 100644
--- a/packages/components/src/Enumeration/Items/Item/Item.propTypes.js
+++ b/packages/components/src/Enumeration/Items/Item/Item.propTypes.js
@@ -1,6 +1,5 @@
import PropTypes from 'prop-types';
import Action from '../../../Actions/Action';
-import Icon from '../../../Icon';
export default {
id: PropTypes.string,
@@ -8,7 +7,6 @@ export default {
item: PropTypes.shape({
values: PropTypes.arrayOf(PropTypes.string),
error: PropTypes.string,
- icon: PropTypes.shape(Icon.propTypes),
className: PropTypes.string,
itemsProp: PropTypes.shape({
key: PropTypes.string,
diff --git a/packages/components/src/FilterBar/FilterBar.component.js b/packages/components/src/FilterBar/FilterBar.component.js
index dad3344a2d3..3b07313647c 100644
--- a/packages/components/src/FilterBar/FilterBar.component.js
+++ b/packages/components/src/FilterBar/FilterBar.component.js
@@ -6,9 +6,9 @@ import { FormControl } from '@talend/react-bootstrap';
import keycode from 'keycode';
import { useTranslation } from 'react-i18next';
import { Action } from '../Actions';
-import Icon from '../Icon';
import I18N_DOMAIN_COMPONENTS from '../constants';
import theme from './FilterBar.module.scss';
+import { Icon } from '@talend/design-system';
function forceBlur(event) {
event.target.blur();
diff --git a/packages/components/src/FormatValue/FormatValue.component.js b/packages/components/src/FormatValue/FormatValue.component.js
index b9b67c5de55..5d7b0fc9142 100644
--- a/packages/components/src/FormatValue/FormatValue.component.js
+++ b/packages/components/src/FormatValue/FormatValue.component.js
@@ -3,10 +3,10 @@ import { useTranslation } from 'react-i18next';
import classNames from 'classnames';
import PropTypes from 'prop-types';
-import Icon from '../Icon';
import I18N_DOMAIN_COMPONENTS from '../constants';
import theme from './FormatValue.module.scss';
+import { Icon } from '@talend/design-system';
export const REG_EXP_LEADING_TRAILING_WHITE_SPACE_CHARACTERS = /(^\s*)?([\s\S]*?)(\s*$)/;
const REG_EXP_REPLACED_WHITE_SPACE_CHARACTERS = /(\t| |\n)/g;
diff --git a/packages/components/src/GridLayout/Tile/Skeleton/SkeletonTile.component.tsx b/packages/components/src/GridLayout/Tile/Skeleton/SkeletonTile.component.tsx
index 9e0cd93c0d6..8754d72d30c 100644
--- a/packages/components/src/GridLayout/Tile/Skeleton/SkeletonTile.component.tsx
+++ b/packages/components/src/GridLayout/Tile/Skeleton/SkeletonTile.component.tsx
@@ -1,4 +1,4 @@
-import Skeleton from '../../../Skeleton';
+import { SkeletonParagraph } from '@talend/design-system';
import Tile from '../Tile.component';
import TileBody from '../Body/TileBody.component';
@@ -6,7 +6,7 @@ export default function SkeletonTile() {
return (
-
+
);
diff --git a/packages/components/src/HeaderBar/HeaderBar.stories.js b/packages/components/src/HeaderBar/HeaderBar.stories.js
index b7e2e8b1011..cf077376462 100644
--- a/packages/components/src/HeaderBar/HeaderBar.stories.js
+++ b/packages/components/src/HeaderBar/HeaderBar.stories.js
@@ -1,12 +1,11 @@
import { action } from '@storybook/addon-actions';
-import { makeDecorator } from '@storybook/addons';
import Immutable from 'immutable'; // eslint-disable-line import/no-extraneous-dependencies
-import Icon from '../Icon';
import HeaderBar from './HeaderBar.component';
import AppSwitcher from '../AppSwitcher';
import assetsApi from '@talend/assets-api';
+import { Icon } from '@talend/design-system';
const props = {
brand: {
diff --git a/packages/components/src/Icon/index.ts b/packages/components/src/Icon/index.ts
deleted file mode 100644
index 97f564d2cd7..00000000000
--- a/packages/components/src/Icon/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Icon } from '@talend/design-system';
-
-Icon.displayName = 'Icon';
-
-export default Icon;
diff --git a/packages/components/src/IconsProvider/README.md b/packages/components/src/IconsProvider/README.md
deleted file mode 100644
index 64756410de6..00000000000
--- a/packages/components/src/IconsProvider/README.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# IconsProvider
-
-The IconsProvider is a component used to render an svg document
-which is the collection of icons ready to use in the App.
-
-It is not a Provider in the sens of [React context](https://reactjs.org/docs/context.html)
-
-## How to use
-
-You should drop it in your App as any React provider
-
-```javascript
-import React from 'react';
-import IconsProvider from '@talend/react-components/lib/IconsProvider';
-
-export function App(props) {
- return (
-
-
- {props.children}
-
- );
-}
-```
-
-## Props
-
-| name | type | default | description |
-| ------------ | -------- | ---------------------------- | --------------------------------------------------------------------------- |
-| bundles | array | [ '/all.svg' ] |
-| defaultIcons | object | DEPRECATED: all talend icons | the default icons provided |
-| icons | object | DEPRECATED: {} | use to add icons to the default ones |
-
-## How to customize bundles
-
-Bundles are available through ui-scripts in your assets.
-By default assets are copied in the root of the webapp. This is why the iconsprovider refer to `/all.svg`.
-
-No panic if you have changed it or want to add another bundle you just have to use the bundles props.
-
-```javascript
-
-
-
-```
-
-By default UI will switch to bundles so you can see your icons comes fetched by the browser using urls like `core.svg`.
diff --git a/packages/components/src/IconsProvider/index.ts b/packages/components/src/IconsProvider/index.ts
deleted file mode 100644
index 8d37d921968..00000000000
--- a/packages/components/src/IconsProvider/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { IconsProvider } from '@talend/design-system';
-
-IconsProvider.displayName = 'IconsProvider';
-
-export default IconsProvider;
diff --git a/packages/components/src/Layout/AppLayout.stories.js b/packages/components/src/Layout/AppLayout.stories.js
index 661d0935dde..0aa9b055423 100644
--- a/packages/components/src/Layout/AppLayout.stories.js
+++ b/packages/components/src/Layout/AppLayout.stories.js
@@ -1,11 +1,11 @@
import { action } from '@storybook/addon-actions';
-import Drawer from '../Drawer';
import HeaderBar from '../HeaderBar';
import Layout from '.';
import SidePanel from '../SidePanel';
import SubHeaderBar from '../SubHeaderBar';
import List from '../List/ListComposition';
+import { FloatingDrawer } from '@talend/design-system';
const actions = [
{
@@ -26,12 +26,12 @@ const actions = [
];
const drawers = [
-
+
You should not being able to read this because I'm first
- ,
-
+ ,
+
The content dictate the width
- ,
+ ,
];
const content = (
diff --git a/packages/components/src/Layout/Layout.component.js b/packages/components/src/Layout/Layout.component.js
index 6e3d9703663..884055ab6da 100644
--- a/packages/components/src/Layout/Layout.component.js
+++ b/packages/components/src/Layout/Layout.component.js
@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
import classnames from 'classnames';
import { ThemeProvider } from '@talend/design-system';
import Inject from '../Inject';
-import TabBar from '../TabBar';
import OneColumn from './OneColumn';
import TwoColumns from './TwoColumns';
import SkipLinks from './SkipLinks';
@@ -116,7 +115,6 @@ Layout.propTypes = {
subHeader: Inject.getReactElement.propTypes,
mode: PropTypes.oneOf([DISPLAY_MODES.ONE_COLUMN, DISPLAY_MODES.TWO_COLUMNS]),
drawers: PropTypes.arrayOf(PropTypes.element),
- tabs: PropTypes.shape(TabBar.propTypes),
hasTheme: PropTypes.bool,
theme: PropTypes.string,
children: PropTypes.node,
diff --git a/packages/components/src/Layout/OneColumn/OneColumn.component.js b/packages/components/src/Layout/OneColumn/OneColumn.component.js
index 99d2847ab81..b1930295a8f 100644
--- a/packages/components/src/Layout/OneColumn/OneColumn.component.js
+++ b/packages/components/src/Layout/OneColumn/OneColumn.component.js
@@ -3,15 +3,14 @@ import classnames from 'classnames';
import omit from 'lodash/omit';
import theme from './OneColumn.module.scss';
-import TabBar from '../../TabBar';
-import WithDrawer from '../../WithDrawer';
+import { FloatingDrawer, Tabs } from '@talend/design-system';
/**
* @param {object} props react props
* @example
*/
-function OneColumn({ drawers, children, tabs, ...props }) {
+function OneColumn({ drawers = [], children, tabs, ...props }) {
const container = classnames('tc-layout-one-column', theme.main);
const style = {
overflow: 'auto',
@@ -27,10 +26,15 @@ function OneColumn({ drawers, children, tabs, ...props }) {
className={container}
{...omit(props, 'getComponent')}
>
-
- {tabs && }
+
+ {tabs && }
{children}
-
+ {drawers.map((drawer, index) => (
+
+ {drawer}
+
+ ))}
+
-
- {tabs && }
+
+ {tabs && }
{children}
-
+ {drawers.map((drawer, index) => (
+
+ {drawer}
+
+ ))}
+
{props.label}
;
- TooltipTriggerMock.displayName = 'TooltipTriggerMock';
- TooltipTriggerMock.propTypes = {
- label: PropTypes.string.isRequired,
- };
- return TooltipTriggerMock;
-});
jest.mock('react', () => {
const realReact = jest.requireActual('react');
diff --git a/packages/components/src/OverlayTrigger/OverlayTrigger.component.js b/packages/components/src/OverlayTrigger/OverlayTrigger.component.js
deleted file mode 100644
index 59712fb5806..00000000000
--- a/packages/components/src/OverlayTrigger/OverlayTrigger.component.js
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Component, cloneElement } from 'react';
-import PropTypes from 'prop-types';
-import { Popover } from '@talend/react-bootstrap';
-import classNames from 'classnames';
-import BaseOverlayTrigger from './OverlayTrigger.forked';
-import Inject from '../Inject';
-import { getOverlayElement, getContainerElement, getAdaptedPlacement } from './overlay';
-
-import theme from './OverlayTrigger.module.scss';
-
-export const overlayPropTypes = {
- ...BaseOverlayTrigger.propTypes,
- overlayComponent: Inject.getReactElement.propTypes,
- overlayId: PropTypes.string,
- overlayPlacement: BaseOverlayTrigger.propTypes.placement,
- overlayRef: PropTypes.func,
- preventScrolling: PropTypes.bool,
-};
-
-function getPlacement(initialOverlayElement, triggerElement, currentPlacement) {
- const overlayElement = getOverlayElement(initialOverlayElement);
- const containerElement = getContainerElement(overlayElement);
-
- const containerRect = containerElement.getBoundingClientRect();
- const overlayRect = overlayElement.getBoundingClientRect();
- const triggerRect = triggerElement.getBoundingClientRect();
-
- return getAdaptedPlacement(triggerRect, overlayRect, containerRect, currentPlacement);
-}
-
-export default class OverlayTrigger extends Component {
- constructor(props) {
- super(props);
-
- this.setTriggerElement = this.setTriggerElement.bind(this);
- this.onEntering = this.onEntering.bind(this);
- this.onExited = this.onExited.bind(this);
-
- this.state = {
- placement: this.props.overlayPlacement,
- };
- }
-
- onExited() {
- this.setState({
- placement: this.props.overlayPlacement,
- });
- }
-
- onEntering(initialOverlayElement) {
- this.setState(previousState => {
- const adaptedPlacement = getPlacement(
- initialOverlayElement,
- this.triggerElement,
- previousState.placement,
- );
- if (adaptedPlacement === previousState.placement) {
- return null;
- }
-
- return {
- placement: adaptedPlacement,
- };
- });
- }
-
- setTriggerElement(element) {
- this.triggerElement = element;
- }
-
- render() {
- const popoverContent = this.props.getComponent
- ? Inject.getReactElement(this.props.getComponent, this.props.overlayComponent)
- : this.props.overlayComponent;
- const props = {
- placement: this.state.placement,
- onClick: this.props.onClick,
- onEntering: this.onEntering,
- onExited: this.onExited,
- overlay: {popoverContent},
- ref: this.props.overlayRef,
- rootClose: true,
- trigger: this.props.trigger,
- };
- const tooltipProps = {
- onMouseOver: this.props.onMouseOver,
- onMouseOut: this.props.onMouseOut,
- onFocus: this.props.onFocus,
- onBlur: this.props.onBlur,
- };
-
- if (this.props.preventScrolling) {
- props.container = this;
- }
-
- return (
-
-
- {cloneElement(this.props.children, tooltipProps)}
-
-
- );
- }
-}
-OverlayTrigger.propTypes = {
- children: PropTypes.element,
- getComponent: PropTypes.func,
- onClick: PropTypes.func,
- trigger: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
- ...overlayPropTypes,
-};
-
-OverlayTrigger.defaultProps = {
- // eslint-disable-next-line react/default-props-match-prop-types
- preventScrolling: false,
- trigger: 'click',
-};
diff --git a/packages/components/src/OverlayTrigger/OverlayTrigger.forked.js b/packages/components/src/OverlayTrigger/OverlayTrigger.forked.js
deleted file mode 100644
index 8bb5ef89ce0..00000000000
--- a/packages/components/src/OverlayTrigger/OverlayTrigger.forked.js
+++ /dev/null
@@ -1,301 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-/* eslint-disable react/no-find-dom-node */
-/* eslint-disable no-underscore-dangle */
-import contains from 'dom-helpers/query/contains';
-import { Children, Component, cloneElement } from 'react';
-import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import warning from 'warning';
-import { Overlay, utils } from '@talend/react-bootstrap';
-
-/**
- * Check if value one is inside or equal to the of value
- *
- * @param {string} one
- * @param {string|array} of
- * @returns {boolean}
- */
-function isOneOf(one, of) {
- if (Array.isArray(of)) {
- return of.indexOf(one) >= 0;
- }
- return one === of;
-}
-
-const triggerType = PropTypes.oneOf(['click', 'hover', 'focus']);
-
-const propTypes = {
- ...Overlay.propTypes,
-
- /**
- * Specify which action or actions trigger Overlay visibility
- */
- trigger: PropTypes.oneOfType([triggerType, PropTypes.arrayOf(triggerType)]),
-
- /**
- * A millisecond delay amount to show and hide the Overlay once triggered
- */
- delay: PropTypes.number,
- /**
- * A millisecond delay amount before showing the Overlay once triggered.
- */
- delayShow: PropTypes.number,
- /**
- * A millisecond delay amount before hiding the Overlay once triggered.
- */
- delayHide: PropTypes.number,
-
- // FIXME: This should be `defaultShow`.
- /**
- * The initial visibility state of the Overlay. For more nuanced visibility
- * control, consider using the Overlay component directly.
- */
- defaultOverlayShown: PropTypes.bool,
-
- /**
- * An element or text to overlay next to the target.
- */
- overlay: PropTypes.node.isRequired,
-
- /**
- * @private
- */
- onBlur: PropTypes.func,
- /**
- * @private
- */
- onClick: PropTypes.func,
- /**
- * @private
- */
- onFocus: PropTypes.func,
- /**
- * @private
- */
- onMouseOut: PropTypes.func,
- /**
- * @private
- */
- onMouseOver: PropTypes.func,
-
- // Overridden props from ``.
- /**
- * @private
- */
- target: PropTypes.oneOf([null]),
- /**
- * @private
- */
- onHide: PropTypes.oneOf([null]),
- /**
- * @private
- */
- show: PropTypes.oneOf([null]),
-};
-
-const defaultProps = {
- defaultOverlayShown: false,
- trigger: ['hover', 'focus'],
-};
-
-class OverlayTrigger extends Component {
- constructor(props, context) {
- super(props, context);
-
- this.handleToggle = this.handleToggle.bind(this);
- this.handleDelayedShow = this.handleDelayedShow.bind(this);
- this.handleDelayedHide = this.handleDelayedHide.bind(this);
- this.handleHide = this.handleHide.bind(this);
-
- this.handleMouseOver = e => this.handleMouseOverOut(this.handleDelayedShow, e, 'fromElement');
- this.handleMouseOut = e => this.handleMouseOverOut(this.handleDelayedHide, e, 'toElement');
-
- this._mountNode = document.createElement('div');
- document.body.appendChild(this._mountNode);
- this.state = {
- show: props.defaultOverlayShown,
- };
- }
-
- componentWillUnmount() {
- document.body.removeChild(this._mountNode);
- clearTimeout(this._hoverShowDelay);
- clearTimeout(this._hoverHideDelay);
- }
-
- handleDelayedHide() {
- if (this._hoverShowDelay != null) {
- clearTimeout(this._hoverShowDelay);
- this._hoverShowDelay = null;
- return;
- }
-
- if (!this.state.show || this._hoverHideDelay != null) {
- return;
- }
-
- const delay = this.props.delayHide != null ? this.props.delayHide : this.props.delay;
-
- if (!delay) {
- this.hide();
- return;
- }
-
- this._hoverHideDelay = setTimeout(() => {
- this._hoverHideDelay = null;
- this.hide();
- }, delay);
- }
-
- handleDelayedShow() {
- if (this._hoverHideDelay != null) {
- clearTimeout(this._hoverHideDelay);
- this._hoverHideDelay = null;
- return;
- }
-
- if (this.state.show || this._hoverShowDelay != null) {
- return;
- }
-
- const delay = this.props.delayShow != null ? this.props.delayShow : this.props.delay;
-
- if (!delay) {
- this.show();
- return;
- }
-
- this._hoverShowDelay = setTimeout(() => {
- this._hoverShowDelay = null;
- this.show();
- }, delay);
- }
-
- handleHide() {
- this.hide();
- }
-
- // Simple implementation of mouseEnter and mouseLeave.
- // React's built version is broken: https://github.com/facebook/react/issues/4251
- // for cases when the trigger is disabled and mouseOut/Over can cause flicker
- // moving from one child element to another.
- // eslint-disable-next-line class-methods-use-this
- handleMouseOverOut(handler, e, relatedNative) {
- const target = e.currentTarget;
- const related = e.relatedTarget || e.nativeEvent[relatedNative];
-
- if ((!related || related !== target) && !contains(target, related)) {
- handler(e);
- }
- }
-
- handleToggle() {
- if (this.state.show) {
- this.hide();
- } else {
- this.show();
- }
- }
-
- hide() {
- this.setState({ show: false });
- }
-
- makeOverlay(overlay, props) {
- return (
-
- {overlay}
-
- );
- }
-
- show() {
- this.setState({ show: true });
- }
-
- renderOverlay(overlay, props) {
- return ReactDOM.createPortal(this.makeOverlay(overlay, props), this._mountNode);
- }
-
- render() {
- const {
- trigger,
- overlay,
- children,
- onBlur,
- onClick,
- onFocus,
- onMouseOut,
- onMouseOver,
- ...props
- } = this.props;
-
- delete props.delay;
- delete props.delayShow;
- delete props.delayHide;
- delete props.defaultOverlayShown;
-
- const child = Children.only(children);
- const childProps = child.props;
- const triggerProps = {};
-
- if (this.state.show) {
- triggerProps['aria-describedby'] = overlay.props.id;
- }
-
- // FIXME: The logic here for passing through handlers on this component is
- // inconsistent. We shouldn't be passing any of these props through.
-
- triggerProps.onClick = utils.createChainedFunction(childProps.onClick, onClick);
-
- if (isOneOf('click', trigger)) {
- triggerProps.onClick = utils.createChainedFunction(triggerProps.onClick, this.handleToggle);
- }
-
- if (isOneOf('hover', trigger)) {
- warning(
- !(trigger === 'hover'),
- '[react-bootstrap] Specifying only the `"hover"` trigger limits the ' +
- 'visibility of the overlay to just mouse users. Consider also ' +
- 'including the `"focus"` trigger so that touch and keyboard only ' +
- 'users can see the overlay as well.',
- );
-
- triggerProps.onMouseOver = utils.createChainedFunction(
- childProps.onMouseOver,
- onMouseOver,
- this.handleMouseOver,
- );
- triggerProps.onMouseOut = utils.createChainedFunction(
- childProps.onMouseOut,
- onMouseOut,
- this.handleMouseOut,
- );
- }
-
- if (isOneOf('focus', trigger)) {
- triggerProps.onFocus = utils.createChainedFunction(
- childProps.onFocus,
- onFocus,
- this.handleDelayedShow,
- );
- triggerProps.onBlur = utils.createChainedFunction(
- childProps.onBlur,
- onBlur,
- this.handleDelayedHide,
- );
- }
-
- return (
- <>
- {cloneElement(child, triggerProps)}
- {this.renderOverlay(overlay, props)}
-
- );
- }
-}
-
-OverlayTrigger.propTypes = propTypes;
-OverlayTrigger.defaultProps = defaultProps;
-OverlayTrigger.displayName = 'OverlayTriggerForked';
-export default OverlayTrigger;
diff --git a/packages/components/src/OverlayTrigger/OverlayTrigger.module.scss b/packages/components/src/OverlayTrigger/OverlayTrigger.module.scss
deleted file mode 100644
index 589814f50f8..00000000000
--- a/packages/components/src/OverlayTrigger/OverlayTrigger.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-
-.tc-action-button-positionned {
- position: relative;
- display: inline-block;
-}
diff --git a/packages/components/src/OverlayTrigger/OverlayTrigger.test.js b/packages/components/src/OverlayTrigger/OverlayTrigger.test.js
deleted file mode 100644
index 4a1a2fc78bb..00000000000
--- a/packages/components/src/OverlayTrigger/OverlayTrigger.test.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import OverlayTrigger from './OverlayTrigger.component';
-
-jest.mock('./overlay', () => ({
- getAdaptedPlacement: () => 'top',
- getOverlayElement: () => ({
- getBoundingClientRect: () => ({
- bottom: 290,
- height: 100,
- top: 190,
- }),
- }),
- getContainerElement: () => ({
- getBoundingClientRect: () => ({
- bottom: 270,
- top: 0,
- }),
- }),
-}));
-
-const Overlay = Overlay
;
-
-describe('OverlayTrigger', () => {
- it('should wrap the children with an overlay', () => {
- const overlayPlacement = 'top';
- render(
- {}}
- overlayComponent={Overlay}
- overlayPlacement={overlayPlacement}
- >
- wrap me
- ,
- );
- expect(screen.queryByTestId('TestOverlay')).not.toBeInTheDocument();
- userEvent.click(screen.getByText('wrap me'));
- expect(screen.getByTestId('TestOverlay')).toBeInTheDocument();
- });
-
- it('should determinate the adapted position when the overlay is open', () => {
- render(
- {}}
- overlayComponent={Overlay}
- overlayPlacement="bottom"
- >
- wrap me
- ,
- );
- userEvent.click(screen.getByText('wrap me'));
- expect(screen.getByRole('tooltip')).toHaveClass('top');
- });
-});
diff --git a/packages/components/src/OverlayTrigger/index.js b/packages/components/src/OverlayTrigger/index.js
deleted file mode 100644
index 1439737ce48..00000000000
--- a/packages/components/src/OverlayTrigger/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import OverlayTrigger, { overlayPropTypes } from './OverlayTrigger.component';
-
-export { overlayPropTypes };
-export default OverlayTrigger;
diff --git a/packages/components/src/OverlayTrigger/overlay.js b/packages/components/src/OverlayTrigger/overlay.js
deleted file mode 100644
index a93cd2b67f5..00000000000
--- a/packages/components/src/OverlayTrigger/overlay.js
+++ /dev/null
@@ -1,109 +0,0 @@
-const OVERLAY_PLACEMENT_TOP = 'top';
-const OVERLAY_PLACEMENT_BOTTOM = 'bottom';
-const BODY = 'BODY';
-const OVERLAY_CONTAINER_CLASS_NAME = 'tc-dropdown-container';
-const REACT_BOOSTRAP_OVERLAY_CLASS_NAME = 'popover';
-
-/**
- * getOverlayElement - return the overlay element
- *
- * @param {Element} innerElement the root element of the action
- * @return {Element} return the overlay component
- */
-export function getOverlayElement(innerElement) {
- let overlayElement = innerElement;
- while (!overlayElement.classList.contains(REACT_BOOSTRAP_OVERLAY_CLASS_NAME)) {
- overlayElement = overlayElement.parentElement;
- }
- return overlayElement;
-}
-
-/**
- * getContainerElement - Look up the container in the parent overlay
- *
- * @param {Element} overlayElement overlay element
- * @return {Element} return the container if exists
- */
-export function getContainerElement(overlayElement) {
- let containerElement = overlayElement;
- do {
- containerElement = containerElement.parentElement;
- } while (
- containerElement &&
- containerElement.tagName !== BODY &&
- !containerElement.classList.contains(OVERLAY_CONTAINER_CLASS_NAME)
- );
- return containerElement;
-}
-
-/**
- * canInsertElementInWrapper - check if the element is correctly inserted in the wrapper
- *
- * @param {DOMRect} insertRect element to insert
- * @param {DOMRect} containerRect container of the element
- * @return {boolean} return true if the element is correctly
- */
-export function canInsertElementInWrapper(insertRect, containerRect) {
- return containerRect.top <= insertRect.top && containerRect.bottom >= insertRect.bottom;
-}
-
-/**
- * getReverseElement - Return the bound of the reversed element with the
- * height of the arrow on the bound of the reversed element
- *
- * @param {DOMRect} triggerRect bound of the trigger element
- * @param {DOMRect} overlayRect bound of the overlay element
- * @param {string} initialPlacement initial placement top or bottom
- * @return {DOMRect} bound of the reversed element
- */
-export function getReverseElement(triggerRect, overlayRect, initialPlacement) {
- let top;
- let bottom;
-
- if (initialPlacement === OVERLAY_PLACEMENT_BOTTOM) {
- top = triggerRect.top - overlayRect.height - (overlayRect.top - triggerRect.bottom);
- bottom = top + overlayRect.height;
- } else {
- bottom = triggerRect.bottom + overlayRect.height + (triggerRect.top - overlayRect.bottom);
- top = bottom - overlayRect.height;
- }
-
- return {
- top,
- bottom,
- };
-}
-
-/**
- * getAdaptedPlacement - return the adapted placement for the overlay
- * @param {DOMRect} triggerRect bound of the trigger element
- * @param {DOMRect} overlayRect bound of the overlay element
- * @param {DOMRect} containerRect bound of the container element
- * @param {string} currentPlacement current placement of the overlay
- * @return {string} return the adapted placement
- * - if enough space in the current placement: return the current placement
- * - if placement is top and enough space to the bottom: return bottom
- * - if placement is bottom and enough space to the top: return top
- * - if no space to the top or the bottom return the current placement
- */
-export function getAdaptedPlacement(triggerRect, overlayRect, containerRect, currentPlacement) {
- if (canInsertElementInWrapper(overlayRect, containerRect)) return currentPlacement;
-
- const reversedElementRect = getReverseElement(triggerRect, overlayRect, currentPlacement);
-
- if (
- currentPlacement === OVERLAY_PLACEMENT_BOTTOM &&
- canInsertElementInWrapper(reversedElementRect, containerRect)
- ) {
- return OVERLAY_PLACEMENT_TOP;
- }
-
- if (
- currentPlacement === OVERLAY_PLACEMENT_TOP &&
- canInsertElementInWrapper(reversedElementRect, containerRect)
- ) {
- return OVERLAY_PLACEMENT_BOTTOM;
- }
-
- return currentPlacement;
-}
diff --git a/packages/components/src/OverlayTrigger/overlay.test.js b/packages/components/src/OverlayTrigger/overlay.test.js
deleted file mode 100644
index 8346a90e254..00000000000
--- a/packages/components/src/OverlayTrigger/overlay.test.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import { JSDOM } from 'jsdom';
-import {
- getReverseElement,
- canInsertElementInWrapper,
- getAdaptedPlacement,
- getOverlayElement,
- getContainerElement,
-} from './overlay';
-
-function getDOMRect(top, bottom, height) {
- return {
- bottom,
- height,
- top,
- };
-}
-
-const dom = new JSDOM(
- '',
-);
-
-describe('getOverlayElement', () => {
- it('should return the overlay element in the parent', () => {
- expect(
- getOverlayElement(dom.window.document.querySelector('span')).classList.contains('popover'),
- ).toBe(true);
- });
-});
-
-describe('getOverlayElement', () => {
- it('should return the container element in the parent', () => {
- expect(
- getContainerElement(dom.window.document.querySelector('span')).classList.contains(
- 'tc-dropdown-container',
- ),
- ).toBe(true);
- });
-});
-
-describe('getAdaptedPlacement', () => {
- it('should return the current placement when the element get in the container', () => {
- const triggerElementRect = getDOMRect(100, 150, 50);
- const overlayElementRect = getDOMRect(170, 270, 100);
- const containerElementRect = getDOMRect(0, 270);
- const currentPlacement = 'bottom';
-
- expect(
- getAdaptedPlacement(
- triggerElementRect,
- overlayElementRect,
- containerElementRect,
- currentPlacement,
- ),
- ).toBe('bottom');
- });
-
- it('should return the adapted placement to top', () => {
- const triggerElementRect = getDOMRect(120, 170, 50);
- const overlayElementRect = getDOMRect(190, 290, 100);
- const containerElementRect = getDOMRect(0, 270);
- const currentPlacement = 'bottom';
-
- expect(
- getAdaptedPlacement(
- triggerElementRect,
- overlayElementRect,
- containerElementRect,
- currentPlacement,
- ),
- ).toBe('top');
- });
-
- it('should return the adapted placement to bottom', () => {
- const triggerElementRect = getDOMRect(100, 150, 50);
- const overlayElementRect = getDOMRect(-20, 80, 100);
- const containerElementRect = getDOMRect(0, 270);
- const currentPlacement = 'top';
-
- expect(
- getAdaptedPlacement(
- triggerElementRect,
- overlayElementRect,
- containerElementRect,
- currentPlacement,
- ),
- ).toBe('bottom');
- });
-
- it(`should return the current placement when the element
- and the reverse element do not get in the container`, () => {
- const triggerElementRect = getDOMRect(100, 150, 50);
- const overlayElementRect = getDOMRect(-20, 80, 100);
- const containerElementRect = getDOMRect(0, 220);
- const currentPlacement = 'top';
-
- expect(
- getAdaptedPlacement(
- triggerElementRect,
- overlayElementRect,
- containerElementRect,
- currentPlacement,
- ),
- ).toBe('top');
- });
-});
-
-describe('canInsert', () => {
- it('should insert the element', () => {
- const insertElementRect = getDOMRect(0, 200);
- const wrapperElementRect = getDOMRect(0, 200);
- expect(canInsertElementInWrapper(insertElementRect, wrapperElementRect)).toBe(true);
- });
-
- it('should not insert the element when overflow in the bottom', () => {
- const insertElementRect = getDOMRect(150, 201);
- const wrapperElementRect = getDOMRect(0, 200);
- expect(canInsertElementInWrapper(insertElementRect, wrapperElementRect)).toBe(false);
- });
-
- it('should not insert the element when overflow in the top', () => {
- const insertElementRect = getDOMRect(-1, 150);
- const wrapperElementRect = getDOMRect(0, 200);
- expect(canInsertElementInWrapper(insertElementRect, wrapperElementRect)).toBe(false);
- });
-});
-
-describe('getReverse', () => {
- it('should return the reversed component to up', () => {
- const triggerElementRect = getDOMRect(100, 150, 50);
- const overlayElementRect = getDOMRect(170, 270, 100);
- expect(getReverseElement(triggerElementRect, overlayElementRect, 'bottom')).toEqual({
- top: -20,
- bottom: 80,
- });
- });
- it('should return the reversed component to bottom', () => {
- const triggerElementRect = getDOMRect(100, 150, 50);
- const overlayElementRect = getDOMRect(-20, 80, 100);
- expect(getReverseElement(triggerElementRect, overlayElementRect, 'top')).toEqual({
- top: 170,
- bottom: 270,
- });
- });
-});
diff --git a/packages/components/src/PieChart/PieChart.component.js b/packages/components/src/PieChart/PieChart.component.js
index 4ca84950106..883fbec8708 100644
--- a/packages/components/src/PieChart/PieChart.component.js
+++ b/packages/components/src/PieChart/PieChart.component.js
@@ -1,8 +1,7 @@
import PropTypes from 'prop-types';
import PieChartIcon from './PieChartIcon.component';
import PieChartButton from './PieChartButton.component';
-import TooltipTrigger from '../TooltipTrigger';
-import OverlayTrigger from '../OverlayTrigger';
+import { Tooltip } from '@talend/design-system';
/**
* This function wrap the button with a TooltipTrigger
@@ -11,17 +10,17 @@ import OverlayTrigger from '../OverlayTrigger';
* @param {string} label the label to show on the tooltip
* @param {string} tooltipPlacement the tooltip placement
*/
-function decorateWithTooltip(tooltip, label, tooltipPlacement, Component, props) {
+function decorateWithTooltip(tooltip, label, Component, props) {
if (!tooltip || !label) {
return ;
}
return (
-
+
-
+
);
}
@@ -30,24 +29,13 @@ function getPieChartComponent(onClick) {
}
export default function PieChart({ tooltip, tooltipPlacement, ...props }) {
- return decorateWithTooltip(
- tooltip,
- props.label,
- tooltipPlacement,
- getPieChartComponent(props.onClick),
- props,
- );
+ return decorateWithTooltip(tooltip, props.label, getPieChartComponent(props.onClick), props);
}
PieChart.propTypes = {
label: PropTypes.string,
onClick: PropTypes.func,
tooltip: PropTypes.bool,
- tooltipPlacement: OverlayTrigger.propTypes.placement,
-};
-
-PieChart.defaultProps = {
- tooltipPlacement: 'top',
};
PieChart.displayName = 'PieChart';
diff --git a/packages/components/src/PieChart/PieChart.test.js b/packages/components/src/PieChart/PieChart.test.js
index 773a3f0c413..a5a25fc6d7d 100644
--- a/packages/components/src/PieChart/PieChart.test.js
+++ b/packages/components/src/PieChart/PieChart.test.js
@@ -2,24 +2,6 @@
/* eslint-disable react/display-name */
import { render, screen } from '@testing-library/react';
import PieChart from './PieChart.component';
-jest.mock('../TooltipTrigger', () => {
- const TooltipTrigger = ({ children, ...props }) => (
-
- {children}
-
- );
- TooltipTrigger.propTypes = {};
- return TooltipTrigger;
-});
-jest.mock('../OverlayTrigger', () => {
- const OverlayTrigger = ({ children, ...props }) => (
-
- {children}
-
- );
- OverlayTrigger.propTypes = {};
- return OverlayTrigger;
-});
describe('PieChart', () => {
it('should render a PieChartButton', () => {
diff --git a/packages/components/src/PieChart/PieChartButton.component.js b/packages/components/src/PieChart/PieChartButton.component.js
index 94552b78064..a7481dc4b55 100644
--- a/packages/components/src/PieChart/PieChartButton.component.js
+++ b/packages/components/src/PieChart/PieChartButton.component.js
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
-import { Button, Popover } from '@talend/react-bootstrap';
+import { Button } from '@talend/react-bootstrap';
+import { Popover } from '@talend/design-system';
import PieChartIcon, { pieChartIconPropTypes } from './PieChartIcon.component';
import pieChartCssModule from './PieChart.module.scss';
-import OverlayTrigger from '../OverlayTrigger';
import { getTheme } from '../theme';
const theme = getTheme(pieChartCssModule);
@@ -27,15 +27,9 @@ export function decorateWithOverlay(
}
return (
- {overlayComponent}}
- ref={overlayRef}
- >
- {btn}
-
+
+ {overlayComponent}
+
);
}
@@ -119,7 +113,6 @@ PieChartButtonComponent.propTypes = {
onMouseDown: PropTypes.func,
overlayComponent: PropTypes.element,
overlayId: PropTypes.string,
- overlayPlacement: OverlayTrigger.propTypes.placement,
overlayRef: PropTypes.func,
};
diff --git a/packages/components/src/PieChart/PieChartIcon.component.js b/packages/components/src/PieChart/PieChartIcon.component.js
index 050755d214d..a81054cff0a 100644
--- a/packages/components/src/PieChart/PieChartIcon.component.js
+++ b/packages/components/src/PieChart/PieChartIcon.component.js
@@ -4,9 +4,9 @@ import { withTranslation } from 'react-i18next';
import omit from 'lodash/omit';
import I18N_DOMAIN_COMPONENTS from '../constants';
import getDefaultT from '../translate';
-import Skeleton from '../Skeleton';
import pieChartCssModule from './PieChart.module.scss';
import { getTheme } from '../theme';
+import { SkeletonButton, SkeletonParagraph } from '@talend/design-system';
const theme = getTheme(pieChartCssModule);
export const PIECHART_CONSTANTS = {
@@ -279,13 +279,8 @@ export function PieChartIconComponent({
aria-busy="true"
aria-label={t('PIE_CHART_LOADING', { defaultValue: 'Loading chart' })}
>
-
- {!hideLabel && }
+
+ {!hideLabel && }
);
}
diff --git a/packages/components/src/Progress/Progress.component.js b/packages/components/src/Progress/Progress.component.js
index bb4e0327ce4..1c858318697 100644
--- a/packages/components/src/Progress/Progress.component.js
+++ b/packages/components/src/Progress/Progress.component.js
@@ -1,9 +1,8 @@
import PropTypes from 'prop-types';
import classNames from 'classnames';
-import TooltipTrigger from '../TooltipTrigger';
-
import theme from './Progress.module.scss';
+import { Tooltip } from '@talend/design-system';
function normalize(percent) {
if (percent > 100) {
@@ -32,11 +31,7 @@ function Progress({ id, percent, tooltip, infinite, contained }) {
);
if (tooltip) {
- progress = (
-
- {progress}
-
- );
+ progress = {progress};
}
let a11yProps;
diff --git a/packages/components/src/ResourceList/Resource/Resource.component.js b/packages/components/src/ResourceList/Resource/Resource.component.js
index 7ed7143a156..69888bc03a5 100644
--- a/packages/components/src/ResourceList/Resource/Resource.component.js
+++ b/packages/components/src/ResourceList/Resource/Resource.component.js
@@ -2,12 +2,12 @@ import { Fragment } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import { Icon } from '@talend/design-system';
import { withTranslation } from 'react-i18next';
import { getRowData } from '../../VirtualizedList/utils/gridrow';
import I18N_DOMAIN_COMPONENTS from '../../constants';
import getDefaultT from '../../translate';
import getLocale from '../../i18n/DateFnsLocale/locale';
-import Icon from '../../Icon';
import theme from './Resource.module.scss';
diff --git a/packages/components/src/ResourceList/ResourceList.component.js b/packages/components/src/ResourceList/ResourceList.component.js
index 930320dde5a..7d3899bec74 100644
--- a/packages/components/src/ResourceList/ResourceList.component.js
+++ b/packages/components/src/ResourceList/ResourceList.component.js
@@ -12,7 +12,7 @@ import VirtualizedList from '../VirtualizedList';
import getRowSelectionRenderer from '../VirtualizedList/RowSelection';
import cssModule from './ResourceList.module.scss';
-import Icon from '../Icon';
+import { Icon } from '@talend/design-system';
const theme = getTheme(cssModule);
diff --git a/packages/components/src/ResourceList/ResourceList.stories.js b/packages/components/src/ResourceList/ResourceList.stories.js
index c4e7bffffa4..a52470f99be 100644
--- a/packages/components/src/ResourceList/ResourceList.stories.js
+++ b/packages/components/src/ResourceList/ResourceList.stories.js
@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
import { action } from '@storybook/addon-actions';
import ResourceList from './ResourceList.component';
-import Icon from '../Icon';
+import { Icon } from '@talend/design-system';
const collection = [
{
diff --git a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.component.js b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.component.js
index 5fc66d24332..a7f693127ea 100644
--- a/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.component.js
+++ b/packages/components/src/ResourceList/Toolbar/SortOptions/OrderChooser/OrderChooser.component.js
@@ -1,16 +1,14 @@
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Button } from '@talend/react-bootstrap';
-import Icon from '../../../../Icon';
-import TooltipTrigger from '../../../../TooltipTrigger';
-import OverlayTrigger from '../../../../OverlayTrigger';
import getPropsFrom from '../../../../utils/getPropsFrom';
import theme from './OrderChooser.module.scss';
+import { Icon, Tooltip } from '@talend/design-system';
-function OrderChooser({ icon, asc, label, tooltipPlacement, onClick, ...rest }) {
+function OrderChooser({ icon, asc, label, onClick, ...rest }) {
return (
-
+
-
+
);
}
@@ -43,7 +41,6 @@ OrderChooser.propTypes = {
asc: PropTypes.bool,
label: PropTypes.string,
onClick: PropTypes.func.isRequired,
- tooltipPlacement: OverlayTrigger.propTypes.overlayPlacement,
};
OrderChooser.defaultProps = {
diff --git a/packages/components/src/Rich/Error/RichError.component.js b/packages/components/src/Rich/Error/RichError.component.js
index 4b94d4bb7f0..8be7200b293 100644
--- a/packages/components/src/Rich/Error/RichError.component.js
+++ b/packages/components/src/Rich/Error/RichError.component.js
@@ -1,8 +1,8 @@
import PropTypes from 'prop-types';
import classNames from 'classnames';
-import Icon from '../../Icon';
import theme from './RichError.module.scss';
+import { Icon } from '@talend/design-system';
export default function RichError(props) {
return (
diff --git a/packages/components/src/Skeleton/Skeleton.component.tsx b/packages/components/src/Skeleton/Skeleton.component.tsx
deleted file mode 100644
index 39f8a27c90c..00000000000
--- a/packages/components/src/Skeleton/Skeleton.component.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import Icon from '../Icon';
-import skeletonCssModule from './Skeleton.module.scss';
-import { getTheme } from '../theme';
-import I18N_DOMAIN_COMPONENTS from '../constants';
-import { TFunction } from 'i18next';
-
-const theme = getTheme(skeletonCssModule);
-const TYPES = {
- icon: 'icon',
- text: 'text',
- button: 'button',
- circle: 'circle',
-};
-
-const SIZES = {
- xlarge: 'xlarge',
- large: 'large',
- medium: 'medium',
- small: 'small',
-};
-
-function getTranslatedType(t: TFunction, type: (typeof TYPES)[keyof typeof TYPES]) {
- switch (type) {
- case TYPES.button:
- return t('SKELETON_TYPE_BUTTON', { defaultValue: 'button' });
- case TYPES.circle:
- return t('SKELETON_TYPE_CIRCLE', { defaultValue: 'circle' });
- case TYPES.icon:
- return t('SKELETON_TYPE_ICON', { defaultValue: 'icon' });
- case TYPES.text:
- return t('SKELETON_TYPE_TEXT', { defaultValue: 'text' });
- default:
- return type;
- }
-}
-export type SkeletonProps = {
- heartbeat?: boolean;
- type?: (typeof TYPES)[keyof typeof TYPES];
- size?: (typeof SIZES)[keyof typeof SIZES];
- width: number | string;
- height: number | string;
- name?: string;
- className?: string;
-};
-
-/**
- * This component show some skeleton stuff
- * @param {object} props the react props
- * @param {string} props.size the wanted size
- * @param {string} props.type the type of skeleton
- * @param {number} props.width width to override size's width
- * @param {number} props.height height to override size's height
- * @param {string} props.className classes to apply on skeleton
- */
-function Skeleton({
- heartbeat = true,
- type = TYPES.text,
- size = SIZES.medium,
- width,
- height,
- name,
- className,
-}: SkeletonProps) {
- const { t } = useTranslation(I18N_DOMAIN_COMPONENTS);
- const classes = theme(
- 'tc-skeleton',
- `tc-skeleton-${type}`,
- `tc-skeleton-${type}-${size}`,
- className,
- { 'tc-skeleton-heartbeat': heartbeat },
- );
-
- const ariaLabel = t('SKELETON_LOADING', {
- defaultValue: '{{type}} Loading...',
- type: getTranslatedType(t, type),
- });
-
- if (type === 'icon' && name) {
- return ;
- }
- return ;
-}
-
-Skeleton.displayName = 'Skeleton';
-Skeleton.TYPES = TYPES;
-Skeleton.SIZES = SIZES;
-
-export default Skeleton;
diff --git a/packages/components/src/Skeleton/Skeleton.md b/packages/components/src/Skeleton/Skeleton.md
deleted file mode 100644
index dd83b2269f5..00000000000
--- a/packages/components/src/Skeleton/Skeleton.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# **Skeleton**
-
-# How to use the skeleton on your component
-
-To use this component, you have to give a type and a size
-
-```html
-
-```
-
-The types / sizes are :
-| Type | Size Available |
-|---|---|
-| circle | small / medium / large |
-| text | small / medium / large / xlarge |
-| button | NA |
-| icon | NA |
-
-You can also override css default sizes by
-- Pass a className & define it
-- Pass width & height props
-
-```html
-
-```
diff --git a/packages/components/src/Skeleton/Skeleton.module.scss b/packages/components/src/Skeleton/Skeleton.module.scss
deleted file mode 100644
index c1d8ea901c4..00000000000
--- a/packages/components/src/Skeleton/Skeleton.module.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@use '~@talend/bootstrap-theme/src/theme/guidelines' as *;
-@use '@talend/design-tokens/lib/tokens';
-@import '~@talend/bootstrap-theme/src/theme/animation';
-
-$tc-skeleton-border-radius: 4px !default;
-$tc-skeleton-icon-size: 24px !default;
-$tc-skeleton-circle-small-size: 16px !default;
-$tc-skeleton-circle-medium-size: 20px !default;
-$tc-skeleton-circle-large-size: 24px !default;
-$tc-skeleton-circle-xlarge-size: 66px !default;
-$tc-skeleton-text-height: 14px !default;
-$tc-skeleton-text-width-small: 30px !default;
-$tc-skeleton-text-width-medium: 60px !default;
-$tc-skeleton-text-width-large: 130px !default;
-$tc-skeleton-text-width-extra-large: 160px !default;
-$tc-skeleton-button-height: 35px !default;
-$tc-skeleton-button-width: 80px !default;
-$tc-skeleton-color: tokens.$coral-color-neutral-text !default;
-
-:global(.tc-skeleton-heartbeat) {
- @include heartbeat(skeleton-blink);
-}
-
-.tc-skeleton {
- background-color: $tc-skeleton-color;
- display: inline-block;
-
- &-icon {
- background-color: transparent;
- height: $tc-skeleton-icon-size;
- width: $tc-skeleton-icon-size;
- }
-
- &-circle {
- border-radius: 50%;
-
- &-small {
- width: $tc-skeleton-circle-small-size;
- height: $tc-skeleton-circle-small-size;
- }
-
- &-medium {
- width: $tc-skeleton-circle-medium-size;
- height: $tc-skeleton-circle-medium-size;
- }
-
- &-large {
- width: $tc-skeleton-circle-large-size;
- height: $tc-skeleton-circle-large-size;
- }
-
- &-xlarge {
- width: $tc-skeleton-circle-xlarge-size;
- height: $tc-skeleton-circle-xlarge-size;
- }
- }
-
- &-text {
- border-radius: $tc-skeleton-border-radius;
- height: $tc-skeleton-text-height;
-
- &-small {
- width: $tc-skeleton-text-width-small;
- }
-
- &-medium {
- width: $tc-skeleton-text-width-medium;
- }
-
- &-large {
- width: $tc-skeleton-text-width-large;
- }
-
- &-xlarge {
- width: $tc-skeleton-text-width-extra-large;
- }
- }
-
- &-button {
- border-radius: $tc-skeleton-border-radius;
- height: $tc-skeleton-button-height;
- width: $tc-skeleton-button-width;
- }
-}
diff --git a/packages/components/src/Skeleton/Skeleton.stories.js b/packages/components/src/Skeleton/Skeleton.stories.js
deleted file mode 100644
index c2591dfb72c..00000000000
--- a/packages/components/src/Skeleton/Skeleton.stories.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import Skeleton from './Skeleton.component';
-
-export default {
- title: 'Components/Design Principles/Loading Feedback/Skeleton',
- decorators: [story => {story()}
],
-};
-
-export const Default = () => (
-
-
Circles :
-
small
-
-
medium
-
-
large
-
-
custom size override class definition
-
-
-
Texts :
-
small:
-
-
medium:
-
-
large:
-
-
extra-large:
-
-
custom width:
-
-
-
Button:
-
-
-
Icons :
-
-
Icons with custom css:
-
-
-
{renderIcon(status, icon, progress)}
-
- {labelText}
-
-
-
-
Status
-
Definition
-
- The status component displays a label with icon and when the mouse is over the label, the
- component displays a button to let the user dispatch
-
-
Examples
-
- Status is successful
-
-
-
- Status is inProgress
-
-
-
- Status is warning
-
-
-
- Status is failed
-
-
-
- Status is canceled
-
-
-
- Status is skeleton
-
-
-
Status without actions
-
-
- Status is inProgress with progress
-
-
-
- Status with tooltip
-
-
-
-
-
-
-
-
- Successful
-
-
-
-
-
-
{title}
-
+
)}
{!isEditMode ? : null}
diff --git a/packages/components/src/TabBar/TabBar.component.js b/packages/components/src/TabBar/TabBar.component.js
deleted file mode 100644
index dc834f79821..00000000000
--- a/packages/components/src/TabBar/TabBar.component.js
+++ /dev/null
@@ -1,257 +0,0 @@
-/* eslint-disable react/jsx-no-bind */
-/* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable react/no-find-dom-node */
-import { useState, useEffect, useRef } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import get from 'lodash/get';
-import { Tab, Nav, NavItem } from '@talend/react-bootstrap';
-import keycode from 'keycode';
-import debounce from 'lodash/debounce';
-import classnames from 'classnames';
-
-import Tag from '../Tag';
-import Icon from '../Icon';
-import TooltipTrigger from '../TooltipTrigger';
-import OverlayTrigger from '../OverlayTrigger';
-import { ActionDropdown } from '../Actions';
-import getTabBarBadgeLabel from '../utils/getTabBarBadgeLabel';
-
-import theme from './TabBar.module.scss';
-
-function TabBar(props) {
- const tabBarContainerRef = useRef();
- const tabBarRef = useRef();
- const needsRefocus = useRef();
-
- const [showDropdown, setShowDropDown] = useState(false);
-
- const { responsive = true } = props;
-
- function tryShowDropdown() {
- const tabContainer = tabBarContainerRef.current;
- if (tabContainer) {
- // There is a TabBar, test if the right boundary point of this TabBar
- // is closer than the right boundary point of its last nav item.
- const lastChild = tabContainer.querySelector('li:last-child');
- if (lastChild) {
- if (tabContainer.getBoundingClientRect().right < lastChild.getBoundingClientRect().right) {
- setShowDropDown(true);
- }
- }
- } else {
- // There is no TabBar, show it to test if dropdown is needed
- setShowDropDown(false);
- }
- }
-
- /**
- * Just show the tabBar and test if there is enough width.
- */
- function showTabBarAndTest() {
- setShowDropDown(false);
- tryShowDropdown();
- }
-
- useEffect(() => {
- if (responsive) {
- const resizeListener = window.addEventListener('resize', debounce(showTabBarAndTest, 200));
- return () => window.removeEventListener('resize', resizeListener);
- }
- return undefined;
- }, []);
-
- useEffect(() => {
- if (!needsRefocus.current || !tabBarRef.current) {
- return;
- }
- const tabBarRefNode = ReactDOM.findDOMNode(tabBarRef.current);
- if (tabBarRefNode && typeof tabBarRefNode.querySelector === 'function') {
- const activeChild = tabBarRefNode.querySelector('[aria-selected=true]');
- if (activeChild) {
- activeChild.focus({ preventScroll: true });
- needsRefocus.current = false;
- }
- }
- });
-
- useEffect(() => {
- if (responsive) {
- tryShowDropdown();
- }
- }, []);
-
- const { onSelect } = props; // to avoid react/no-unused-prop-types
- function handleSelect(selectedKey, event) {
- if (selectedKey !== props.selectedKey) {
- if (event) {
- event.preventDefault();
- }
- onSelect(
- event,
- props.items.find(({ key }) => selectedKey === key),
- );
- }
- }
-
- function handleKeyDown(event) {
- const { items } = props;
- switch (event.which) {
- case keycode.codes.home:
- needsRefocus.current = true;
- handleSelect(items[0].key, event);
- break;
- case keycode.codes.end:
- needsRefocus.current = true;
- handleSelect(items[items.length - 1].key, event);
- break;
- default:
- break;
- }
- }
-
- const { className, id, items, selectedKey, children, generateChildId, tooltipPlacement, right } =
- props;
- const hasChildren = children || items.some(item => item.children);
- const tabContent = hasChildren && (
-
- {items.map(item => (
-
- {item.children}
- {selectedKey === item.key ? children : null}
-
- ))}
-
- );
-
- let tabMenu;
- if (responsive && showDropdown) {
- const selectedItem = items.find(item => item.key === selectedKey) || items[0];
- const badgeLabel = get(selectedItem, 'badge.label', '');
- tabMenu = (
- handleSelect(key, event)}
- items={items.map(item => ({
- ...item,
- icon: item.icon && item.icon.name,
- }))}
- link
- />
- );
- } else {
- tabMenu = (
-
- );
- }
-
- return (
-
-
-
- {tabMenu}
- {right}
-
- {tabContent}
-
child {index}
,
- }));
-
- // when
- render();
-
- // then only tab3 is visible
- expect(screen.getByRole('tabpanel')).toHaveTextContent('child 2');
- });
-
- it('should select item on click', () => {
- // given
- const onSelect = jest.fn();
- render();
-
- // when
- userEvent.click(screen.getByText('Tab1'));
-
- // then
- expect(onSelect).toHaveBeenCalledWith(expect.anything(), tabProps.items[0]);
- });
-
- it('should select first item on home keydown', async () => {
- // given
- const onSelect = jest.fn();
- render();
-
- // when
- const root = document.querySelector('#my-tabs > div');
- fireEvent.keyDown(root, {
- keyCode: keycode.codes.home,
- });
-
- // then
- expect(onSelect).toHaveBeenCalledWith(expect.anything(), tabProps.items[0]);
- });
-
- it('should select last item on end keydown', () => {
- // given
- const onSelect = jest.fn();
- render();
-
- // when
- const root = document.querySelector('#my-tabs > div');
- fireEvent.keyDown(root, {
- keyCode: keycode.codes.end,
- });
-
- // then
- expect(onSelect).toHaveBeenCalledWith(expect.anything(), tabProps.items[4]);
- });
-
- it('should render with badges', () => {
- const props = {
- ...tabProps,
- selectedKey: '1',
- items: [
- {
- key: '1',
- label: 'Tab1',
- badge: {
- label: '967',
- className: 'custom-class-name',
- },
- 'data-feature': 'action.1',
- },
- {
- key: '2',
- label: 'Tab2',
- badge: {
- label: '1287',
- bsStyle: 'info',
- },
- 'data-feature': 'action.2',
- },
- ],
- };
-
- render(I'm the content);
- expect(screen.getByText('967')).toHaveClass('tc-tab-bar-item-badge custom-class-name');
- });
-});
diff --git a/packages/components/src/TabBar/Tabs.stories.js b/packages/components/src/TabBar/Tabs.stories.js
deleted file mode 100644
index 41d7bbceddb..00000000000
--- a/packages/components/src/TabBar/Tabs.stories.js
+++ /dev/null
@@ -1,241 +0,0 @@
-import { useState } from 'react';
-import { action } from '@storybook/addon-actions';
-
-import { ActionButton } from '../Actions';
-import TabBar from './TabBar.component';
-
-const tabProps = {
- id: 'my-tabs',
- items: [
- {
- key: '1',
- label: 'Tab1',
- 'data-feature': 'action.1',
- },
- {
- key: '2',
- label: 'Tab2',
- 'data-feature': 'action.2',
- icon: {
- name: 'talend-empty-calendar',
- },
- badge: {
- label: 85,
- },
- },
- {
- key: '3',
- label: 'Tab3 and very very long text that should be truncated',
- 'data-feature': 'action.3',
- icon: {
- name: 'talend-user-circle',
- },
- badge: {
- label: '1105',
- bsStyle: 'danger',
- },
- },
- {
- key: '4',
- label: 'Tab4',
- 'data-feature': 'action.4',
- icon: {
- name: 'talend-arrow-right',
- },
- },
- {
- key: '5',
- label: 'Tab5',
- badge: {
- label: '975',
- bsStyle: 'warning',
- },
- 'data-feature': 'action.5',
- },
- {
- key: '6',
- label: 'Tab6',
- 'data-feature': 'action.6',
- icon: {
- name: 'fa fa-asterisk',
- },
- },
- {
- key: '7',
- label: 'Tab7',
- 'data-feature': 'action.7',
- icon: {
- name: 'talend-star',
- },
- badge: {
- label: '5275',
- bsStyle: 'success',
- },
- },
- {
- key: '8',
- label: 'Tab8',
- 'data-feature': 'action.8',
- icon: {
- name: 'fa fa-file-excel-o',
- },
- },
- {
- key: '9',
- label: 'Tab9',
- 'data-feature': 'action.9',
- disabled: true,
- },
- ],
- onSelect: action('onSelect'),
- selectedKey: '2',
-};
-
-const rightProps = {
- ...tabProps,
- right: (
-
- ),
-};
-
-function generateChildId(key, kind) {
- if (kind === 'tab') {
- return `my-custom-id-${key}`;
- }
- return null;
-}
-
-const InteractiveTabs = props => {
- const [selectedKey, setSelectedKey] = useState('2');
-
- return (
- setSelectedKey(item.key)}
- >
- I'm the child of tab {selectedKey}
-
- );
-};
-
-const InteractiveResponsiveTabs = props => {
- const [selectedKey, setSelectedKey] = useState('2');
- return (
- setSelectedKey(item.key)}>
- I'm the child of responsive tab {selectedKey}
-
- );
-};
-
-function renderContent() {
- return (
-
- );
-}
-
-export default {
- title: 'Components/Navigation/Tabs',
-};
-
-export const Default = () => (
-
-);
-
-export const CustomIdGenerator = () => (
-
-);
-
-export const WithExistingContent = () => (
-
-);
-
-export const FullyInteractive = () => (
-
-);
diff --git a/packages/components/src/TabBar/index.js b/packages/components/src/TabBar/index.js
deleted file mode 100644
index 0b12309f3b9..00000000000
--- a/packages/components/src/TabBar/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import TabBar from './TabBar.component';
-
-export default TabBar;
diff --git a/packages/components/src/Tag/Tag.component.js b/packages/components/src/Tag/Tag.component.js
deleted file mode 100644
index 33f62fb20a5..00000000000
--- a/packages/components/src/Tag/Tag.component.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import PropTypes from 'prop-types';
-import {
- Tag as CoralTag,
- TagInformation as CoralTagInformation,
- TagSuccess as CoralTagSuccess,
- TagWarning as CoralTagWarning,
- TagDestructive as CoralTagDestructive,
-} from '@talend/design-system';
-
-/**
- * Proxy to https://design.talend.com/?path=/docs/components-tag--default-story#tag
- */
-const Tag = ({ bsStyle, ...rest }) => {
- let StyledTag = CoralTag;
- switch (bsStyle?.toLowerCase()) {
- case 'info':
- StyledTag = CoralTagInformation;
- break;
- case 'success':
- StyledTag = CoralTagSuccess;
- break;
- case 'warning':
- StyledTag = CoralTagWarning;
- break;
- case 'danger':
- StyledTag = CoralTagDestructive;
- break;
- default:
- break;
- }
- return ;
-};
-
-Tag.displayName = 'Tag';
-
-Tag.propTypes = {
- bsStyle: PropTypes.string,
-};
-
-export default Tag;
diff --git a/packages/components/src/Tag/Tag.test.js b/packages/components/src/Tag/Tag.test.js
deleted file mode 100644
index 852df2542ba..00000000000
--- a/packages/components/src/Tag/Tag.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { render } from '@testing-library/react';
-
-import Tag from './Tag.component';
-
-jest.unmock('@talend/design-system');
-
-describe('Tag', () => {
- const props = {
- children: 'The lazy quick brown fox jumps over the lazy dog',
- };
-
- it('should render', () => {
- const { container } = render();
- expect(container.firstChild).toMatchSnapshot();
- });
-});
diff --git a/packages/components/src/Tag/__snapshots__/Tag.test.js.snap b/packages/components/src/Tag/__snapshots__/Tag.test.js.snap
deleted file mode 100644
index 424fff27a2d..00000000000
--- a/packages/components/src/Tag/__snapshots__/Tag.test.js.snap
+++ /dev/null
@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tag should render 1`] = `
-
- The lazy quick brown fox jumps over the lazy dog
-
-`;
diff --git a/packages/components/src/Tag/index.js b/packages/components/src/Tag/index.js
deleted file mode 100644
index b525a635e51..00000000000
--- a/packages/components/src/Tag/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Tag from './Tag.component';
-
-export default Tag;
diff --git a/packages/components/src/Toggle/LabelToggle/LabelToggle.component.js b/packages/components/src/Toggle/LabelToggle/LabelToggle.component.js
deleted file mode 100644
index 05362194c00..00000000000
--- a/packages/components/src/Toggle/LabelToggle/LabelToggle.component.js
+++ /dev/null
@@ -1,81 +0,0 @@
-import PropTypes from 'prop-types';
-import get from 'lodash/get';
-import { randomUUID } from '@talend/utils';
-import { getTheme } from '../../theme';
-
-import css from './LabelToggle.module.scss';
-
-const theme = getTheme(css);
-
-const getAutoFocusValue = (autoFocus, values, value) => {
- if (!autoFocus) {
- return null;
- }
- if (value) {
- return get(value, 'value');
- }
- return get(values, ['0', 'value']);
-};
-
-/**
- *
- * @param {Array.