From cbd23814b97baf0bc23c6b09e6fe34a836891a43 Mon Sep 17 00:00:00 2001 From: Rohit Malhotra Date: Wed, 14 Aug 2024 16:15:00 +0530 Subject: [PATCH] DApp-1804 tag component added in blocks (#1805) * tag in progress * implemented tag component * Tag component implemented in blocks --- src/blocks/index.ts | 1 + src/blocks/tag/Tag.tsx | 43 ++++++++++++++++++ src/blocks/tag/index.ts | 1 + src/blocks/theme/colors/colors.semantics.ts | 4 ++ .../theme/semantics/semantics.surface.ts | 8 ++-- src/blocks/theme/semantics/semantics.tag.ts | 44 +++++++++++++++++++ src/blocks/theme/semantics/semantics.text.ts | 2 +- 7 files changed, 98 insertions(+), 5 deletions(-) create mode 100644 src/blocks/tag/Tag.tsx create mode 100644 src/blocks/tag/index.ts create mode 100644 src/blocks/theme/semantics/semantics.tag.ts diff --git a/src/blocks/index.ts b/src/blocks/index.ts index 48a2060dc8..15f33c6435 100644 --- a/src/blocks/index.ts +++ b/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'; diff --git a/src/blocks/tag/Tag.tsx b/src/blocks/tag/Tag.tsx new file mode 100644 index 0000000000..af77617eef --- /dev/null +++ b/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 = ({ label, variant = 'default' }) => { + return ( + + + {label} + + ); +}; + +export { Tag }; diff --git a/src/blocks/tag/index.ts b/src/blocks/tag/index.ts new file mode 100644 index 0000000000..9790fcbf11 --- /dev/null +++ b/src/blocks/tag/index.ts @@ -0,0 +1 @@ +export * from './Tag'; diff --git a/src/blocks/theme/colors/colors.semantics.ts b/src/blocks/theme/colors/colors.semantics.ts index 9a42011d24..a392a8f8b2 100644 --- a/src/blocks/theme/colors/colors.semantics.ts +++ b/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, diff --git a/src/blocks/theme/semantics/semantics.surface.ts b/src/blocks/theme/semantics/semantics.surface.ts index 2930a9c14c..be0356f612 100644 --- a/src/blocks/theme/semantics/semantics.surface.ts +++ b/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'] }, diff --git a/src/blocks/theme/semantics/semantics.tag.ts b/src/blocks/theme/semantics/semantics.tag.ts new file mode 100644 index 0000000000..31a21011d7 --- /dev/null +++ b/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 }, +}; diff --git a/src/blocks/theme/semantics/semantics.text.ts b/src/blocks/theme/semantics/semantics.text.ts index f59a2f9230..41b91ba406 100644 --- a/src/blocks/theme/semantics/semantics.text.ts +++ b/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'] },