DApp-1804 tag component added in blocks (#1805)

* tag in progress

* implemented tag component

* Tag component implemented in blocks

src/blocks/index.ts

@@ -12,6 +12,7 @@ export { ProgressBar, type ProgressBarProps } from './progressBar';
 export { Separator, type SeparatorProps } from './separator';
 export { Skeleton, type SkeletonProps } from './skeleton';
 export { Tabs, type TabsProps, type TabItem } from './tabs';
+export { Tag } from './tag';
 export { Text, type TextProps } from './text';
 export { Tooltip, type TooltipProps } from './tooltip';
 export { TextArea, type TextAreaProps } from './textarea';

src/blocks/tag/Tag.tsx

@@ -0,0 +1,43 @@
+import { getTextVariantStyles } from 'blocks/Blocks.utils';
+import { FC } from 'react';
+import styled from 'styled-components';
+
+export type TagVariant = 'default' | 'success' | 'danger' | 'warning' | 'info' | 'disabled';
+
+export type TagProps = {
+ label: string;
+ variant?: TagVariant;
+};
+
+const StyledTagContainer = styled.div<{ variant: TagVariant }>`
+ align-items: center;
+ border-radius: var(--radius-xs);
+ background: var(--components-tag-background-${({ variant }) => variant});
+ display: flex;
+ gap: var(--spacing-xxxs);
+ padding: var(--spacing-none) var(--spacing-xxxs);
+ width: max-content;
+`;
+
+const StyledTagText = styled.span<{ variant: TagVariant }>`
+ ${({ variant }) => getTextVariantStyles('bes-semibold', `components-tag-text-${variant}`)}
+`;
+
+const StyledTagIcon = styled.div<{ variant: TagVariant }>`
+ background: var(--components-tag-icon-${({ variant }) => variant});
+ border-radius: var(--radius-lg);
+ flex-shrink: 0;
+ height: 10px;
+ width: 10px;
+`;
+
+const Tag: FC<TagProps> = ({ label, variant = 'default' }) => {
+ return (
+ <StyledTagContainer variant={variant}>
+ <StyledTagIcon variant={variant} />
+ <StyledTagText variant={variant}>{label}</StyledTagText>
+ </StyledTagContainer>
+ );
+};
+
+export { Tag };

src/blocks/tag/index.ts

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

src/blocks/theme/colors/colors.semantics.ts

@@ -19,6 +19,7 @@ import { skeletonSemantics } from '../semantics/semantics.skeleton';
 import { strokeSemantics } from '../semantics/semantics.stroke';
 import { surfaceSemantics } from '../semantics/semantics.surface';
 import { switchSemantics } from '../semantics/semantics.switch';
+import { tagSemantics } from '../semantics/semantics.tag';
 import { textSemantics } from '../semantics/semantics.text';
 import { textAreaSemantics } from '../semantics/semantics.textarea';
 import { toastSemantics } from '../semantics/semantics.toast';
@@ -45,6 +46,7 @@ type SemanticKeys = {
  surface: 'surface';
  stroke: 'stroke';
  skeleton: 'components-skeleton-loader';
+ tag: 'components-tag';
  text: 'text';
  textArea: 'components-textarea';
  toast: 'components-toast';
@@ -72,6 +74,7 @@ export const semanticKeys: SemanticKeys = {
  surface: 'surface',
  stroke: 'stroke',
  skeleton: 'components-skeleton-loader',
+ tag: 'components-tag',
  text: 'text',
  textArea: 'components-textarea',
  toast: 'components-toast',
@@ -99,6 +102,7 @@ export const colorSemantics = {
  [semanticKeys.surface]: surfaceSemantics,
  [semanticKeys.stroke]: strokeSemantics,
  [semanticKeys.skeleton]: skeletonSemantics,
+ [semanticKeys.tag]: tagSemantics,
  [semanticKeys.text]: textSemantics,
  [semanticKeys.textArea]: textAreaSemantics,
  [semanticKeys.toast]: toastSemantics,

src/blocks/theme/semantics/semantics.surface.ts

@@ -19,16 +19,16 @@ export const surfaceSemantics = {
 
  // surface states
 
- 'state-success-subtle': { light: colorBrands['success-100'], dark: colorBrands['success-500'] },
+ 'state-success-subtle': { light: colorBrands['success-100'], dark: colorBrands['success-900'] },
  'state-success-bold': { light: colorBrands['success-500'], dark: colorBrands['success-200'] },
 
- 'state-info-subtle': { light: colorBrands['info-100'], dark: colorBrands['info-500'] },
+ 'state-info-subtle': { light: colorBrands['info-100'], dark: colorBrands['info-900'] },
  'state-info-bold': { light: colorBrands['info-500'], dark: colorBrands['info-200'] },
 
- 'state-warning-subtle': { light: colorBrands['warning-100'], dark: colorBrands['warning-500'] },
+ 'state-warning-subtle': { light: colorBrands['warning-100'], dark: colorBrands['warning-900'] },
  'state-warning-bold': { light: colorBrands['warning-500'], dark: colorBrands['warning-200'] },
 
- 'state-danger-subtle': { light: colorBrands['danger-100'], dark: colorBrands['danger-800'] },
+ 'state-danger-subtle': { light: colorBrands['danger-100'], dark: colorBrands['danger-900'] },
  'state-danger-bold': { light: colorBrands['danger-500'], dark: colorBrands['danger-200'] },
 
  'state-disabled': { light: colorBrands['neutral-200'], dark: colorBrands['neutral-800'] },

src/blocks/theme/semantics/semantics.tag.ts

@@ -0,0 +1,44 @@
+import { iconSemantics } from './semantics.icon';
+import { strokeSemantics } from './semantics.stroke';
+import { surfaceSemantics } from './semantics.surface';
+import { textSemantics } from './semantics.text';
+
+export const tagSemantics = {
+ 'background-default': { light: surfaceSemantics['tertiary'].light, dark: surfaceSemantics['tertiary'].dark },
+ 'background-success': {
+ light: surfaceSemantics['state-success-subtle'].light,
+ dark: surfaceSemantics['state-success-subtle'].dark,
+ },
+ 'background-danger': {
+ light: surfaceSemantics['state-danger-subtle'].light,
+ dark: surfaceSemantics['state-danger-subtle'].dark,
+ },
+ 'background-warning': {
+ light: surfaceSemantics['state-warning-subtle'].light,
+ dark: surfaceSemantics['state-warning-subtle'].dark,
+ },
+ 'background-info': {
+ light: surfaceSemantics['state-info-subtle'].light,
+ dark: surfaceSemantics['state-info-subtle'].dark,
+ },
+ 'background-disabled': {
+ light: surfaceSemantics['state-disabled'].light,
+ dark: surfaceSemantics['state-disabled'].dark,
+ },
+
+ 'stroke-bg': { light: strokeSemantics['secondary'].light, dark: strokeSemantics['secondary'].dark },
+
+ 'text-default': { light: textSemantics['primary'].light, dark: textSemantics['primary'].dark },
+ 'text-success': { light: textSemantics['state-success-bold'].light, dark: textSemantics['state-success-bold'].dark },
+ 'text-warning': { light: textSemantics['state-warning-bold'].light, dark: textSemantics['state-warning-bold'].dark },
+ 'text-danger': { light: textSemantics['state-danger-bold'].light, dark: textSemantics['state-danger-bold'].dark },
+ 'text-info': { light: textSemantics['state-info-bold'].light, dark: textSemantics['state-info-bold'].dark },
+ 'text-disabled': { light: textSemantics['state-disabled'].light, dark: textSemantics['state-disabled'].dark },
+
+ 'icon-default': { light: iconSemantics['primary'].light, dark: iconSemantics['primary'].dark },
+ 'icon-success': { light: iconSemantics['state-success-bold'].light, dark: iconSemantics['state-success-bold'].dark },
+ 'icon-warning': { light: iconSemantics['state-warning-bold'].light, dark: iconSemantics['state-warning-bold'].dark },
+ 'icon-danger': { light: iconSemantics['state-danger-bold'].light, dark: iconSemantics['state-danger-bold'].dark },
+ 'icon-info': { light: iconSemantics['state-info-bold'].light, dark: iconSemantics['state-info-bold'].dark },
+ 'icon-disabled': { light: iconSemantics['state-disabled'].light, dark: iconSemantics['state-disabled'].dark },
+};

src/blocks/theme/semantics/semantics.text.ts

@@ -26,7 +26,7 @@ export const textSemantics = {
  'state-info-bold': { light: colorBrands['info-700'], dark: colorBrands['info-100'] },
 
  'state-warning-subtle': { light: colorBrands['warning-100'], dark: colorBrands['warning-700'] },
- 'warning-bold': { light: colorBrands['warning-700'], dark: colorBrands['warning-100'] },
+ 'state-warning-bold': { light: colorBrands['warning-700'], dark: colorBrands['warning-100'] },
 
  'state-danger-subtle': { light: colorBrands['danger-100'], dark: colorBrands['danger-700'] },
  'state-danger-bold': { light: colorBrands['danger-700'], dark: colorBrands['danger-300'] },