IBX-7880: Badge

Author: albozek

packages/assets/src/scss/_badge.scss

@@ -0,0 +1,27 @@
+@use 'variables' as *;
+@use 'functions' as *;
+
+.ids-badge {
+    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;
+
+    &--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

@@ -15,6 +15,7 @@
 @use 'input';
 @use 'inputs-list';
 @use 'label';
+@use 'badge';
 
 @use 'inputs/checkbox';
 @use 'inputs/input-text';

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

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

packages/components/src/Badge/Badge.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { createCssClassNames } from '@ibexa/ids-core/helpers/cssClassNames';
+
+import type { BadgeProps } from './Badge.types';
+
+const MAX_BADGE_VALUE = 99;
+
+const formatBadgeValue = (value: number): string => {
+    return value > MAX_BADGE_VALUE ? '99+' : value.toString();
+};
+
+const Badge = ({ value, size = 'medium', className = '' }: BadgeProps) => {
+    const isExpanded = value > MAX_BADGE_VALUE;
+
+    const componentClassName = createCssClassNames({
+        'ids-badge': true,
+        [`ids-badge--${size}`]: true,
+        'ids-badge--expanded': isExpanded,
+        [className]: !!className,
+    });
+
+    return (
+        <div className={componentClassName}>
+            {formatBadgeValue(value)}
+        </div>
+    );
+};
+
+export default Badge;

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

@@ -0,0 +1,10 @@
+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 {
+    value: number;
+    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 };