;
+
+const person = 'Charles Darwin';
+const email = faker.internet.email(...person.split(' '));
+const personImg = faker.internet.avatar();
+
+export const Default: Story = {
+ args: {
+ text: person,
+ },
+};
+
+export const Image: Story = {
+ args: {
+ avatar: {
+ imgUrl: personImg,
+ },
+ text: person,
+ },
+};
+
+export const Email: Story = {
+ args: {
+ type: 'email',
+ text: email,
+ },
+};
+
+export const Empty: Story = {
+ args: {
+ type: 'empty',
+ text: person,
+ },
+};
+
+export const Clickable: Story = {
+ args: {
+ text: person,
+ onClick: (value) => console.log('clicked', value),
+ },
+};
+
+export const Closable: Story = {
+ args: {
+ text: 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 75%
rename from src/components/Persona/__tests__/Persona.test.tsx
rename to src/components/UserLabel/__tests__/UserLabel.test.tsx
index e88b998c13..2257f6e1cc 100644
--- a/src/components/Persona/__tests__/Persona.test.tsx
+++ b/src/components/UserLabel/__tests__/UserLabel.test.tsx
@@ -4,25 +4,25 @@ 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 type {UserLabelProps} from '../types';
import {extractTextValue} from '../utils';
const MOCKED_TEXT = 'text';
const MOCKED_TEXT_NODE_CONTENT_VALUE = 'Some view';
-const MOCKED_TEXT_NODE: PersonaProps['text'] = {
+const MOCKED_TEXT_NODE: UserLabelProps['text'] = {
value: MOCKED_TEXT,
content: {MOCKED_TEXT_NODE_CONTENT_VALUE}
,
};
-describe('Persona', () => {
+describe('UserLabel', () => {
describe('text property', () => {
- test.each([MOCKED_TEXT, MOCKED_TEXT_NODE])(
+ test.each([MOCKED_TEXT, MOCKED_TEXT_NODE])(
'should return text value as onClick argument',
async (text) => {
const onClick = jest.fn();
- render();
+ render();
const user = userEvent.setup();
const textValue = extractTextValue(text);
const displayText = getAvatarDisplayText(textValue);
@@ -31,14 +31,14 @@ describe('Persona', () => {
expect(onClick).toBeCalledWith(textValue);
},
);
- test.each([MOCKED_TEXT, MOCKED_TEXT_NODE])(
+ test.each([MOCKED_TEXT, MOCKED_TEXT_NODE])(
'should return text value as onClose argument',
async (text) => {
const onClose = jest.fn();
- const {container} = render();
+ const {container} = render();
const user = userEvent.setup();
const textValue = extractTextValue(text);
- const ariaLabelValue = i18n('label_remove-button', {persona: textValue});
+ const ariaLabelValue = i18n('label_remove-button', {text: textValue});
const closeButtonNode = queryByAttribute('aria-label', container, ariaLabelValue);
if (!closeButtonNode) {
@@ -50,11 +50,11 @@ describe('Persona', () => {
},
);
test('should render text as string', () => {
- render();
+ render();
screen.getByText(MOCKED_TEXT);
});
test('should render text as react node', () => {
- render();
+ render();
screen.getByText(MOCKED_TEXT_NODE_CONTENT_VALUE);
});
});
diff --git a/src/components/UserLabel/i18n/en.json b/src/components/UserLabel/i18n/en.json
new file mode 100644
index 0000000000..e7cf5f7775
--- /dev/null
+++ b/src/components/UserLabel/i18n/en.json
@@ -0,0 +1,3 @@
+{
+ "label_remove-button": "Remove {{text}}"
+}
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..16a3d8957c 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`);
\ No newline at end of file
diff --git a/src/components/UserLabel/i18n/ru.json b/src/components/UserLabel/i18n/ru.json
new file mode 100644
index 0000000000..966e87e9f7
--- /dev/null
+++ b/src/components/UserLabel/i18n/ru.json
@@ -0,0 +1,3 @@
+{
+ "label_remove-button": "Удалить {{text}}"
+}
diff --git a/src/components/UserLabel/index.ts b/src/components/UserLabel/index.ts
new file mode 100644
index 0000000000..7d8560c997
--- /dev/null
+++ b/src/components/UserLabel/index.ts
@@ -0,0 +1,2 @@
+export {UserLabel} from './UserLabel';
+export type {UserLabelProps} from './types';
diff --git a/src/components/UserLabel/types.ts b/src/components/UserLabel/types.ts
new file mode 100644
index 0000000000..5148c43798
--- /dev/null
+++ b/src/components/UserLabel/types.ts
@@ -0,0 +1,23 @@
+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 UserLabelText = {value: string; content: React.ReactNode} | string;
+export type UserLabelSize = 's' | 'm';
+export type UserLabelView = 'outlined' | 'clear';
+
+export interface UserLabelProps extends DOMProps, QAProps {
+ type?: UserLabelType;
+ avatar?:
+ | DistributiveOmit
+ | string
+ | React.ReactElement;
+ text: UserLabelText;
+ size?: UserLabelSize;
+ view?: UserLabelView;
+ onClick?: (value: string) => void;
+ onClose?: (value: string) => void;
+}
diff --git a/src/components/UserLabel/utils.ts b/src/components/UserLabel/utils.ts
new file mode 100644
index 0000000000..d9697d8a3c
--- /dev/null
+++ b/src/components/UserLabel/utils.ts
@@ -0,0 +1,17 @@
+import type {UserLabelText} from './types';
+
+export const extractTextValue = (text: UserLabelText) => {
+ if (typeof text === 'object') {
+ return text.value;
+ }
+
+ return text;
+};
+
+export const extractTextView = (text: UserLabelText) => {
+ if (typeof text === 'object') {
+ return text.content;
+ }
+
+ return text;
+};
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';