IBX-7880: Badge

Author: albozek

packages/assets/src/scss/_badge.scss

@@ -0,0 +1,29 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
+.ids-badge {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: $badge-size-medium;
+    height: $badge-size-medium;
+    border-radius: $badge-size-medium;
+    background: $color-error-80;
+    opacity: 1;
+    cursor: pointer;
+    color: $color-neutral-10;
+    font-size: $text-font-size-xs;
+    transition: all 0.2s ease-in-out;
+    font-size: $text-font-size-xs;
+
+    &--small {
+        min-width: $badge-size-small;
+        height: $badge-size-small;
+        border-radius: $badge-size-small;
+    }
+
+    &--expanded {
+        padding: 0 calculateRem(3px);
+    }
+}

packages/assets/src/scss/_variables.scss

@@ -15,4 +15,7 @@ $base-line-height: 1.5 !default;
 $border-radius-medium: calculateRem(8px) !default;
 $border-radius-large: calculateRem(12px) !default;
 
+$badge-size-small: calculateRem(12px) !default;
+$badge-size-medium: calculateRem(18px) !default;
+
 $assets-base-path: '/' !default;

packages/assets/src/scss/styles.scss

@@ -10,6 +10,7 @@
 @use 'input';
 @use 'label';
 @use 'helper-text';
+@use 'badge';
 
 @use 'inputs/input-text';
 

packages/components/src/Badge/Badge.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Badge from './Badge';
+
+const meta: Meta<typeof Badge> = {
+    component: Badge,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        className: {
+            control: 'text',
+        },
+        title: {
+            control: 'text',
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+    name: 'Default',
+    args: {
+        children: '1',
+        size: 'medium',
+    },
+};
+
+export const Small: Story = {
+    name: 'Small',
+    args: {
+        children: '1',
+        size: 'small',
+    },
+};
+
+export const LongContent: Story = {
+    name: 'LongContent',
+    args: {
+        children: '99+',
+        size: 'medium',
+    },
+};

packages/components/src/Badge/Badge.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { createCssClassNames } from '@ids-internal/shared/css.class.names';
+
+import { BadgeProps } from './Badge.types';
+
+const MAX_CIRCULAR_LENGTH = 2;
+
+const Badge = ({ children, size = 'medium', className = '', title = '' }: BadgeProps) => {
+const content = typeof children === 'string' ? children : '';
+    const isExpanded = content.length > MAX_CIRCULAR_LENGTH;
+
+    const componentClassName = createCssClassNames({
+        'ids-badge': true,
+        [`ids-badge--${size}`]: !!size,
+        'ids-badge--expanded': isExpanded,
+        [className]: !!className,
+    });
+
+    return (
+        <div className={componentClassName} title={title}>
+            {children}
+        </div>
+    );
+};
+
+export default Badge;

packages/components/src/Badge/Badge.types.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+import { BaseComponentAttributes } from '@ids-types/general';
+
+export const BADGE_SIZE_VALUES = ['medium', 'small'] as const;
+
+export type BadgeSizeType = (typeof BADGE_SIZE_VALUES)[number];
+
+export interface BadgeProps extends BaseComponentAttributes {
+    children: ReactNode;
+    size?: BadgeSizeType;
+}

packages/components/src/Badge/index.ts

@@ -0,0 +1,5 @@
+import Badge from './Badge';
+import { BadgeProps } from './Badge.types';
+
+export default Badge;
+export type { BadgeProps };