diff --git a/src/tedi/components/tags/status-badge/status-badge.module.scss b/src/tedi/components/tags/status-badge/status-badge.module.scss index e5d3826e..7e20a99d 100644 --- a/src/tedi/components/tags/status-badge/status-badge.module.scss +++ b/src/tedi/components/tags/status-badge/status-badge.module.scss @@ -88,13 +88,5 @@ $badge-status-colors: ('inactive', 'success', 'danger', 'warning'); line-height: var(--body-small-regular-line-height); } - &__icon-primary { - color: var(--status-badge-icon-primary); - } - - &__icon-accent { - color: var(--status-badge-icon-secondary); - } - @include mixins.print-grayscale; } diff --git a/src/tedi/components/tags/status-badge/status-badge.spec.tsx b/src/tedi/components/tags/status-badge/status-badge.spec.tsx index 14e764ff..8b680e75 100644 --- a/src/tedi/components/tags/status-badge/status-badge.spec.tsx +++ b/src/tedi/components/tags/status-badge/status-badge.spec.tsx @@ -22,7 +22,6 @@ describe('StatusBadge component', () => { expect(badge).toHaveTextContent('Default Badge'); expect(badge).toHaveClass('tedi-status-badge'); expect(badge).toHaveClass('tedi-status-badge--variant-filled'); - expect(badge).toHaveClass('tedi-status-badge--color-neutral'); expect(badge).not.toHaveAttribute('role'); }); @@ -35,7 +34,6 @@ describe('StatusBadge component', () => { const badge = container.querySelector('.tedi-status-badge'); expect(badge).toHaveTextContent('Primary Bordered Badge'); expect(badge).toHaveClass('tedi-status-badge--variant-bordered'); - expect(badge).toHaveClass('tedi-status-badge--color-brand'); }); it('renders with large size', () => { @@ -114,7 +112,6 @@ describe('StatusBadge component', () => { const { container } = render(All Props Badge); const badge = container.querySelector('.tedi-status-badge'); expect(badge).toHaveClass('tedi-status-badge--variant-filled-bordered'); - expect(badge).toHaveClass('tedi-status-badge--color-accent'); expect(badge).toHaveClass('tedi-status-badge--status-success'); expect(badge).toHaveClass('tedi-status-badge--large'); expect(badge).toHaveClass('custom-class'); diff --git a/src/tedi/components/tags/status-badge/status-badge.stories.tsx b/src/tedi/components/tags/status-badge/status-badge.stories.tsx index 309b89b6..b764bf02 100644 --- a/src/tedi/components/tags/status-badge/status-badge.stories.tsx +++ b/src/tedi/components/tags/status-badge/status-badge.stories.tsx @@ -31,14 +31,14 @@ export default meta; type Story = StoryObj; -const colors: StatusBadgeColor[] = ['neutral', 'brand', 'accent', 'success', 'danger', 'warning']; +const colors: StatusBadgeColor[] = ['neutral', 'brand', 'accent', 'warning', 'danger', 'success']; const variants: StatusBadgeProps['variant'][] = ['filled', 'filled-bordered', 'bordered']; const statuses: StatusBadgeStatus[] = ['inactive', 'success', 'warning', 'danger']; const colorToIconMap: Record = { neutral: 'edit', brand: 'send', accent: 'sync', - success: 'check_circle', + success: 'check', danger: 'error', warning: 'warning', transparent: 'edit', diff --git a/src/tedi/components/tags/status-badge/status-badge.tsx b/src/tedi/components/tags/status-badge/status-badge.tsx index 60cf62ac..a2ee589c 100644 --- a/src/tedi/components/tags/status-badge/status-badge.tsx +++ b/src/tedi/components/tags/status-badge/status-badge.tsx @@ -1,7 +1,7 @@ import cn from 'classnames'; import { BreakpointSupport, useBreakpointProps } from '../../../helpers'; -import { Icon, IconColor } from '../../base/icon/icon'; +import { Icon } from '../../base/icon/icon'; import styles from './status-badge.module.scss'; export type StatusBadgeColor = 'neutral' | 'brand' | 'accent' | 'success' | 'danger' | 'warning' | 'transparent'; @@ -78,23 +78,6 @@ export const StatusBadge = (props: StatusBadgeProps): JSX.Element => { const BadgeElement = title ? 'abbr' : 'div'; - const mapBadgeColorToIconColor = (badgeColor: StatusBadgeColor): IconColor => { - switch (badgeColor) { - case 'brand': - return 'brand-dark'; - case 'success': - return 'success'; - case 'accent': - return 'secondary'; - case 'danger': - return 'danger'; - case 'warning': - return 'warning-dark'; - default: - return 'primary'; - } - }; - const badgeClass = cn( styles['tedi-status-badge'], styles[`tedi-status-badge--variant-${variant}`], @@ -117,14 +100,7 @@ export const StatusBadge = (props: StatusBadgeProps): JSX.Element => { aria-live={role ? ariaLive : undefined} {...rest} > - {icon && ( - - )} + {icon && } {children && {children}} );