added basic functionality to Tag component

src/components/Tag/Tag.scss

@@ -0,0 +1,26 @@
+.Tag {
+    display: inline-flex;
+    padding: var(--spacing-normal) var(--spacing-2x);
+    border-radius: var(--border-radius);
+    box-sizing: border-box;
+
+    &:focus, .selected {
+        box-shadow: 0 0 0 2px var(--color-brand);
+    }
+
+    .tagText{
+        margin: 0 var(--spacing-normal) 0px 0px;
+
+        white-space:nowrap;
+        overflow:hidden;
+        text-overflow:ellipsis;
+    }
+
+    .iconWrapper {
+        display: flex;
+        align-items: center;
+
+        min-width: 15px;
+        min-height: 15px;
+    }
+}

src/components/Tag/Tag.tsx

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { MdClose } from 'react-icons/md';
+import { bem } from '../../utils';
+import { Text } from '../Text';
+
+import styles from './Tag.scss';
+
+interface Props extends React.HTMLAttributes<HTMLDivElement> {
+    /** Tag content */
+    label: string;
+    /** Value that helps us to understand if the component is currently selected or not. */
+    isSelected?: boolean;
+    /** Color is assigned to a background color of a wrapper */
+    bgColor?: string;
+    /** Max-width of a component */
+    maxWidth?: string;
+    /** Size of the text */
+    size?: 'small' | 'normal' | 'large';
+    /** Callback, that is fired when a user clicks on a delete icon */
+    onDelete?: () => void;
+    /** Callback, that is fired when a user clicks on an element */
+    onClick?: () => void;
+}
+
+const { block, elem } = bem('Tag', styles);
+
+export const Tag: React.FC<Props> = (props) => {
+    const { label, bgColor, maxWidth, size, onDelete, onClick, isSelected } = props;
+
+    const handleTagClick = (event: Event) => {
+        event.stopPropagation();
+
+        onClick?.();
+    };
+
+    return (
+        <div
+            {...block({ className: isSelected && 'selected' })}
+            onClick={onClick && handleTagClick}
+            onKeyDown={() => {}}
+            role="button"
+            tabIndex={0}
+            style={{
+                backgroundColor: bgColor,
+                boxShadow: isSelected ? '0 0 0 2px var(--color-brand)' : 'none',
+                maxWidth,
+            }}
+        >
+            <Text size={size} {...elem('Text', { elemClassName: styles.tagText })}>
+                {label}
+            </Text>
+            {onDelete && (
+                <div className={styles.iconWrapper}>
+                    <MdClose onClick={onDelete} size="15px" />
+                </div>
+            )}
+        </div>
+    );
+};
+
+Tag.displayName = 'Tag';
+
+Tag.defaultProps = {
+    isSelected: false,
+    bgColor: 'var(--color-background)',
+    maxWidth: 'fit-content',
+    size: 'normal',
+    onDelete: undefined,
+    onClick: undefined,
+};

src/components/Tag/index.ts

@@ -0,0 +1 @@
+export { Tag } from './Tag';

src/index.ts

@@ -28,6 +28,7 @@ export { Text, MarkedText } from './components/Text';
 export { TextArea } from './components/TextArea';
 export { PageWidthRestrictor, BlockWidthRestrictor } from './components/WidthRestrictor';
 export { PopupBase } from './components/PopupBase';
+export { Tag } from './components/Tag';
 // Molecules
 export * from './components/BulkActionsToolbar';
 export { ButtonGroup } from './components/ButtonGroup';

stories/Tag.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { storiesOf } from '@storybook/react'; // eslint-disable-line import/no-extraneous-dependencies
+import { boolean, text, select, withKnobs } from '@storybook/addon-knobs'; // eslint-disable-line import/no-extraneous-dependencies
+import { Tag } from '@textkernel/oneui';
+
+storiesOf('Atoms|Tag', module)
+    .addDecorator(withKnobs)
+    .add(
+        'Tag',
+        () => {
+            const onDelete = () => {
+                console.log('onDelete was called');
+            };
+            const onClick = () => {
+                console.log('onClick was called');
+            };
+
+            return (
+                <div
+                    style={{
+                        padding: '5px',
+                    }}
+                >
+                    <Tag
+                        bgColor={select(
+                            'bgColor',
+                            ['#3eff2b', '#ffa139', 'var(--color-background)'],
+                            'var(--color-background)'
+                        )}
+                        label="This is an extremely long long text!"
+                        isSelected={boolean('isSelected', false)}
+                        maxWidth={text('max-width', 'fit-content')}
+                        onDelete={onDelete}
+                        onClick={onClick}
+                        size={select('size', ['small', 'normal', 'large'], 'normal')}
+                    />
+                </div>
+            );
+        },
+        {
+            info: {
+                text: `
+                  Tag
+                `,
+            },
+        }
+    );

stories/index.ts

@@ -25,6 +25,7 @@ import './Tabs';
 import './Text';
 import './TextArea';
 import './WidthRestrictor';
+import './Tag';
 // Molecules
 import './BulkActionsToolbar';
 import './ButtonGroup';