Skip to content

Commit a4ce342

Browse files
AlsasaAmmarEszter Hofmannandrentk
authored
feat(StatusBadge): new component (#1309)
--------- Co-authored-by: Eszter Hofmann <hofmann@textkernel.nl> Co-authored-by: André Nogueira <nogueira@textkernel.nl>
1 parent d6de87c commit a4ce342

19 files changed

Lines changed: 233 additions & 67 deletions

File tree

‎src/components/Badges/StatusBadge/StatusBadge.scss‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
@use 'sass:list';
2+
@import '../../../themes/oneui/constants/colors';
3+
4+
$contexts: list.join($contexts, ('info', 'neutral'));
5+
$variants: (subtle, bold);
6+
7+
.StatusBadge {
8+
display: flex;
9+
align-items: center;
10+
border-radius: var(--border-radius);
11+
padding: var(--space-0) var(--space-75);
12+
height: var(--space-250);
13+
width: fit-content;
14+
max-width: 200px;
15+
min-width: var(--space-250);
16+
composes: OneUI-caption-text from global;
17+
18+
&__text {
19+
overflow: hidden;
20+
text-overflow: ellipsis;
21+
white-space: nowrap;
22+
}
23+
24+
&__icon {
25+
height: var(--space-150);
26+
width: var(--space-150);
27+
padding-right: var(--space-50);
28+
}
29+
30+
@each $context in $contexts {
31+
@each $variant in $variants {
32+
&--context_#{$context}.StatusBadge--variant_#{$variant} {
33+
@if $variant == bold {
34+
background-color: var(--color-background-#{$context}-bold-default);
35+
color: var(--color-text-inverse);
36+
@if $context == cautious {
37+
color: var(--color-text-cautious-inverse-default, #1a1a1a);
38+
}
39+
} @else {
40+
background: var(--color-background-#{$context}-subtlest-default);
41+
color: var(--color-text-#{$context}-default);
42+
@if $context == neutral {
43+
background: var(--color-background-neutral-subtle-default, #e6e6e6);
44+
color: var(--color-text-subtle);
45+
}
46+
}
47+
}
48+
}
49+
}
50+
}

‎src/components/Badges/StatusBadge/StatusBadge.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from 'react';
2+
import { bem } from '../../../utils';
3+
import { BadgeVariant, Context } from '../../../constants';
4+
import styles from './StatusBadge.scss';
5+
6+
export interface Props extends React.HTMLAttributes<HTMLSpanElement> {
7+
/** Content to be rendered inside the container */
8+
children: string | number;
9+
/** The Callout context (e.g. info, critical, success etc. - defaults to info) */
10+
context?: Context | 'neutral';
11+
/** Icon before text, optional */
12+
leadingIcon?: React.ReactElement;
13+
/** Define the badge variant, eg. subtle, bold */
14+
variant?: BadgeVariant;
15+
}
16+
17+
const { block, elem } = bem('StatusBadge', styles);
18+
19+
export const StatusBadge: React.FC<Props> = ({
20+
context = 'info',
21+
variant = 'bold',
22+
leadingIcon,
23+
children,
24+
...rest
25+
}) => {
26+
if (typeof children !== 'number' && !children) {
27+
return null;
28+
}
29+
30+
return (
31+
<div title={children} {...rest} {...block({ context, variant, ...rest })}>
32+
{leadingIcon && <span {...elem('icon')}>{leadingIcon}</span>}
33+
<span {...elem('text')}>{children}</span>
34+
</div>
35+
);
36+
};
37+
38+
StatusBadge.displayName = 'StatusBadge';

‎src/components/Badges/StatusBadge/__tests__/StatusBadge.spec.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react';
2+
import '@testing-library/jest-dom';
3+
import { render } from '@testing-library/react';
4+
import { StatusBadge } from '../StatusBadge';
5+
6+
describe('StatusBadge', () => {
7+
it('should render correctly', () => {
8+
const view = render(<StatusBadge>some text</StatusBadge>);
9+
10+
expect(view.container).toMatchSnapshot();
11+
});
12+
13+
it('should render children when it is 0', () => {
14+
const { container } = render(<StatusBadge>{0}</StatusBadge>);
15+
expect(container).not.toBeEmptyDOMElement();
16+
});
17+
18+
it('renders with default props', () => {
19+
const { container } = render(<StatusBadge>Default Badge</StatusBadge>);
20+
21+
expect(container.firstChild).toHaveClass('StatusBadge--context_info');
22+
expect(container.firstChild).toHaveClass('StatusBadge--variant_bold');
23+
});
24+
25+
it('should apply correctly cautious context', () => {
26+
const view = render(<StatusBadge context="cautious">some text</StatusBadge>);
27+
expect(view.container.firstChild).toHaveClass('StatusBadge--context_cautious');
28+
});
29+
30+
it('should apply correctly subtle variant', () => {
31+
const view = render(<StatusBadge variant="subtle">some text</StatusBadge>);
32+
expect(view.container.firstChild).toHaveClass('StatusBadge--variant_subtle');
33+
});
34+
});

‎src/components/Badges/StatusBadge/__tests__/__snapshots__/StatusBadge.spec.tsx.snap‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`StatusBadge should render correctly 1`] = `
4+
<div>
5+
<div
6+
class="StatusBadge StatusBadge--context_info StatusBadge--variant_bold"
7+
title="some text"
8+
>
9+
<span
10+
class="StatusBadge__text"
11+
>
12+
some text
13+
</span>
14+
</div>
15+
</div>
16+
`;

‎src/components/Badges/StatusBadge/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { StatusBadge, Props as StatusBadgeProps } from './StatusBadge';

‎src/components/Badges/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { StatusBadge, StatusBadgeProps } from './StatusBadge';

‎src/components/Buttons/Button/Button.scss‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ $contextMap: (
4747
background-color: var(--color-background-critical-bold-pressed);
4848
}
4949
&:focus-visible {
50-
box-shadow: 0px 0px 0px 2px var(--color-background-information-subtlest-pressed);
50+
box-shadow: 0px 0px 0px 2px var(--color-background-info-subtlest-pressed);
5151
}
5252

5353
&[disabled],
@@ -175,11 +175,7 @@ $contextMap: (
175175
}
176176

177177
&:focus-visible {
178-
box-shadow: 0px
179-
0px
180-
0px
181-
2px
182-
var(--color-background-information-subtlest-pressed);
178+
box-shadow: 0px 0px 0px 2px var(--color-background-info-subtlest-pressed);
183179
}
184180

185181
&[disabled],

‎src/components/Link/Link.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
text-decoration: underline;
44

55
&:focus-visible {
6-
outline: 2px solid var(--color-border-information-subtle-default, #66AFFF);
6+
outline: 2px solid var(--color-border-info-subtle-default, #66afff);
77
}
88

99
&:hover {
@@ -16,7 +16,7 @@
1616
&:hover {
1717
color: var(--color-link-visited-pressed, #001833);
1818
}
19-
}
19+
}
2020

2121
&__icon {
2222
fill: currentColor;

‎src/components/MatchingIndicator/MatchingIndicator.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export const MatchingIndicator: React.FC<Props> = ({ percentage, ...rest }) => {
2525
return 'var(--color-icon-critical-default)';
2626
}
2727
if (value <= COLORS_MAX_VALUES.YELLOW) {
28-
return 'var(--color-icon-caution-default)';
28+
return 'var(--color-icon-cautious-default)';
2929
}
3030
return 'var(--color-icon-success-default)';
3131
};

‎src/components/SelectedItemBadge/SelectedItemBadge.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ $icon-status-colors: (
5252
disabled: var(--color-icon-success-disabled),
5353
),
5454
important: (
55-
normal: var(--color-icon-caution-default),
56-
disabled: var(--color-icon-caution-disabled),
55+
normal: var(--color-icon-cautious-default),
56+
disabled: var(--color-icon-cautious-disabled),
5757
),
5858
optional: (
5959
normal: var(--color-icon-subtle),
@@ -100,7 +100,7 @@ $icon-status-colors: (
100100
&__optionText {
101101
max-width: var(--space-600);
102102
min-width: var(--space-200);
103-
color: var(--color-text-information-default);
103+
color: var(--color-text-info-default);
104104
overflow: hidden;
105105
text-overflow: ellipsis;
106106
white-space: nowrap;
@@ -116,7 +116,7 @@ $icon-status-colors: (
116116

117117
&[disabled] {
118118
.SelectedItemBadge__optionText {
119-
color: var(--color-text-information-disabled);
119+
color: var(--color-text-info-disabled);
120120
}
121121
}
122122

0 commit comments

Comments
 (0)