;
+
+const person = 'Charles Darwin';
+const email = faker.internet.email(...person.split(' '));
+const personImg = faker.internet.avatar();
+
+export const Default: Story = {
+ args: {
+ children: person,
+ },
+};
+
+export const Image: Story = {
+ args: {
+ avatar: {
+ imgUrl: personImg,
+ },
+ children: person,
+ },
+};
+
+export const Email: Story = {
+ args: {
+ type: 'email',
+ children: email,
+ },
+};
+
+export const Empty: Story = {
+ args: {
+ type: 'empty',
+ children: person,
+ },
+};
+
+export const LongChildren: Story = {
+ args: {
+ children: person.repeat(100),
+ },
+};
+
+export const Clickable: Story = {
+ args: {
+ children: person,
+ onClick: (value) => console.log('clicked', value),
+ },
+};
+
+export const Closable: Story = {
+ args: {
+ children: person,
+ onClose: (value) => console.log('closed', value),
+ },
+};
diff --git a/src/components/Persona/__tests__/Persona.test.tsx b/src/components/UserLabel/__tests__/UserLabel.test.tsx
similarity index 54%
rename from src/components/Persona/__tests__/Persona.test.tsx
rename to src/components/UserLabel/__tests__/UserLabel.test.tsx
index e88b998c13..e945c95f25 100644
--- a/src/components/Persona/__tests__/Persona.test.tsx
+++ b/src/components/UserLabel/__tests__/UserLabel.test.tsx
@@ -4,41 +4,33 @@ import userEvent from '@testing-library/user-event';
import {queryByAttribute, render, screen} from '../../../../test-utils/utils';
import {getAvatarDisplayText} from '../../Avatar';
-import {Persona} from '../Persona';
+import {UserLabel} from '../UserLabel';
import i18n from '../i18n';
-import type {PersonaProps} from '../types';
-import {extractTextValue} from '../utils';
const MOCKED_TEXT = 'text';
-const MOCKED_TEXT_NODE_CONTENT_VALUE = 'Some view';
-const MOCKED_TEXT_NODE: PersonaProps['text'] = {
- value: MOCKED_TEXT,
- content: {MOCKED_TEXT_NODE_CONTENT_VALUE}
,
-};
+const MOCKED_TEXT_NODE = {MOCKED_TEXT}
;
-describe('Persona', () => {
+describe('UserLabel', () => {
describe('text property', () => {
- test.each([MOCKED_TEXT, MOCKED_TEXT_NODE])(
+ test.each([MOCKED_TEXT])(
'should return text value as onClick argument',
async (text) => {
const onClick = jest.fn();
- render();
+ render({text});
const user = userEvent.setup();
- const textValue = extractTextValue(text);
- const displayText = getAvatarDisplayText(textValue);
+ const displayText = getAvatarDisplayText(text);
const personaNode = screen.getByText(displayText);
await user.click(personaNode);
- expect(onClick).toBeCalledWith(textValue);
+ expect(onClick).toHaveBeenCalled();
},
);
- test.each([MOCKED_TEXT, MOCKED_TEXT_NODE])(
+ test.each([MOCKED_TEXT])(
'should return text value as onClose argument',
async (text) => {
const onClose = jest.fn();
- const {container} = render();
+ const {container} = render({text});
const user = userEvent.setup();
- const textValue = extractTextValue(text);
- const ariaLabelValue = i18n('label_remove-button', {persona: textValue});
+ const ariaLabelValue = i18n('label_remove-button');
const closeButtonNode = queryByAttribute('aria-label', container, ariaLabelValue);
if (!closeButtonNode) {
@@ -46,16 +38,16 @@ describe('Persona', () => {
}
await user.click(closeButtonNode);
- expect(onClose).toBeCalledWith(textValue);
+ expect(onClose).toHaveBeenCalled();
},
);
test('should render text as string', () => {
- render();
+ render({MOCKED_TEXT});
screen.getByText(MOCKED_TEXT);
});
test('should render text as react node', () => {
- render();
- screen.getByText(MOCKED_TEXT_NODE_CONTENT_VALUE);
+ render({MOCKED_TEXT_NODE});
+ screen.getByText(MOCKED_TEXT);
});
});
});
diff --git a/src/components/UserLabel/i18n/en.json b/src/components/UserLabel/i18n/en.json
new file mode 100644
index 0000000000..b6a8fa13a9
--- /dev/null
+++ b/src/components/UserLabel/i18n/en.json
@@ -0,0 +1,3 @@
+{
+ "label_remove-button": "Remove"
+}
diff --git a/src/components/Persona/i18n/index.ts b/src/components/UserLabel/i18n/index.ts
similarity index 67%
rename from src/components/Persona/i18n/index.ts
rename to src/components/UserLabel/i18n/index.ts
index 8e73ff64a0..89f3a7da33 100644
--- a/src/components/Persona/i18n/index.ts
+++ b/src/components/UserLabel/i18n/index.ts
@@ -4,4 +4,4 @@ import {NAMESPACE} from '../../utils/cn';
import en from './en.json';
import ru from './ru.json';
-export default addComponentKeysets({en, ru}, `${NAMESPACE}persona-remove-button`);
+export default addComponentKeysets({en, ru}, `${NAMESPACE}user-label`);
diff --git a/src/components/UserLabel/i18n/ru.json b/src/components/UserLabel/i18n/ru.json
new file mode 100644
index 0000000000..3e39c36c18
--- /dev/null
+++ b/src/components/UserLabel/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+ "label_remove-button": "Удалить"
+}
diff --git a/src/components/UserLabel/index.ts b/src/components/UserLabel/index.ts
new file mode 100644
index 0000000000..fcb9ee276f
--- /dev/null
+++ b/src/components/UserLabel/index.ts
@@ -0,0 +1,2 @@
+export {UserLabel} from './UserLabel';
+export type {UserLabelType, UserLabelView, UserLabelProps} from './types';
diff --git a/src/components/UserLabel/types.ts b/src/components/UserLabel/types.ts
new file mode 100644
index 0000000000..020b5cd981
--- /dev/null
+++ b/src/components/UserLabel/types.ts
@@ -0,0 +1,20 @@
+import type React from 'react';
+
+import type {DistributiveOmit} from '../../types/utils';
+import type {AvatarProps} from '../Avatar';
+import type {DOMProps, QAProps} from '../types';
+
+export type UserLabelType = 'person' | 'email' | 'empty';
+export type UserLabelView = 'outlined' | 'clear';
+
+export interface UserLabelProps extends DOMProps, QAProps {
+ type?: UserLabelType;
+ avatar?:
+ | DistributiveOmit
+ | string
+ | React.ReactElement;
+ children: React.ReactNode;
+ view?: UserLabelView;
+ onClick?: React.MouseEventHandler;
+ onClose?: React.MouseEventHandler;
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index d9b69db807..04407d597d 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -25,7 +25,7 @@ export * from './Loader';
export * from './Menu';
export * from './Modal';
export * from './Pagination';
-export * from './Persona';
+export * from './UserLabel';
export * from './Popover';
export * from './Popup';
export * from './Portal';