feat(ui): Add label component (#20857)

docs-ui/components/label.stories.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import {withInfo} from '@storybook/addon-info';
+
+import Label from 'app/components/label';
+
+export default {
+  title: 'UI/Label',
+};
+
+export const Default = withInfo(
+  'A label to use for example in Issues to indicate Unhandled error'
+)(() => {
+  return (
+    <React.Fragment>
+      <Label
+        text="Unhandled"
+        tooltip="An unhandled error was detected in this Issue."
+        type="error"
+      />{' '}
+      <Label text="Texttext" type="success" /> <Label text="Texttext" type="warning" />{' '}
+      <Label text="Texttext" type="info" />
+    </React.Fragment>
+  );
+});
+
+Default.story = {
+  name: 'default',
+};

src/sentry/static/sentry/app/components/label.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+import space from 'app/styles/space';
+import Tooltip from 'app/components/tooltip';
+import {Color} from 'app/utils/theme';
+
+function getColors(type: Props['type']): [Color, Color] {
+  switch (type) {
+    case 'warning':
+      return ['orange100', 'orange300'];
+    case 'success':
+      return ['green100', 'green300'];
+    case 'error':
+      return ['red100', 'red300'];
+    case 'info':
+    default:
+      return ['blue100', 'blue300'];
+  }
+}
+
+type Props = {
+  text: React.ReactNode;
+  type?: 'info' | 'warning' | 'success' | 'error' | 'muted';
+  tooltip?: React.ReactNode;
+  className?: string;
+};
+
+function Label({text, type = 'info', tooltip, className}: Props) {
+  const [backgroundColor, textColor] = getColors(type);
+  return (
+    <Wrapper className={className}>
+      <Tooltip title={tooltip} disabled={!tooltip}>
+        <Background color={backgroundColor}>
+          <Text color={textColor}>{text}</Text>
+        </Background>
+      </Tooltip>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled('div')`
+  display: inline-block;
+  line-height: ${p => p.theme.fontSizeExtraSmall};
+`;
+
+const Background = styled('div')<{color: Color}>`
+  background-color: ${p => p.theme[p.color]};
+  padding: ${space(0.25)} ${space(0.5)};
+  border-radius: ${p => p.theme.borderRadius};
+`;
+
+const Text = styled('span')<{color: Color}>`
+  color: ${p => p.theme[p.color]};
+  font-size: ${p => p.theme.fontSizeExtraSmall};
+`;
+
+export default Label;

tests/js/spec/components/label.spec.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {mountWithTheme} from 'sentry-test/enzyme';
+
+import Label from 'app/components/label';
+
+describe('Label', function() {
+  it('renders', function() {
+    const wrapper = mountWithTheme(
+      <Label
+        text="Unhandled"
+        tooltip="An unhandled error was detected in this Issue."
+        type="error"
+      />
+    );
+
+    expect(wrapper.text()).toBe('Unhandled');
+    expect(wrapper.find('Background').prop('color')).toBe('red100');
+    expect(wrapper.find('Text').prop('color')).toBe('red300');
+    expect(wrapper.find('Tooltip').prop('title')).toBe(
+      'An unhandled error was detected in this Issue.'
+    );
+  });
+});