feat(components): Add notAvailable component (#23089)

Author: priscilawebdev

docs-ui/components/notAvailable.stories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import {withInfo} from '@storybook/addon-info';
+
+import NotAvailable from 'app/components/notAvailable';
+import PanelTable from 'app/components/panels/panelTable';
+
+export default {
+  title: 'Core/NotAvailable',
+};
+
+export const Default = withInfo(
+  "When you don't have data to display, but don't want to display an empty space. It's commonly used in a table."
+)(() => (
+  <div>
+    <div className="section">
+      <h3>Alone</h3>
+      <NotAvailable />
+    </div>
+    <div className="section">
+      <h3>In a Table</h3>
+      <PanelTable headers={['Header #1', 'Header #2']}>
+        <div>Panel Item with really long content</div>
+        <div>
+          <NotAvailable />
+        </div>
+      </PanelTable>
+    </div>
+  </div>
+));
+
+Default.story = {
+  name: 'default',
+};

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+function NotAvailable() {
+  return <Wrapper>{'\u2014'}</Wrapper>;
+}
+
+const Wrapper = styled('div')`
+  color: ${p => p.theme.gray200};
+`;
+
+export default NotAvailable;

tests/js/spec/components/notAvailable.spec.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import {mountWithTheme} from 'sentry-test/enzyme';
+
+import NotAvailable from 'app/components/notAvailable';
+
+describe('NotAvailable', function () {
+  it('renders', function () {
+    const wrapper = mountWithTheme(<NotAvailable />);
+    expect(wrapper.text()).toEqual('\u2014');
+  });
+});