feat(NoData): adds NoData component

e2e/__tests__/no-data.test.js

@@ -0,0 +1,12 @@
+import { baisy } from '../setup/TestSuiter';
+
+
+const SUITES = [
+  baisy.suite('Components/NoData', 'default'),
+];
+
+
+SUITES.map(suite => {
+  it(suite.getTestName(), suite.testStory, 20000);
+});
+

src/components/NoData/NoData.js

@@ -0,0 +1,22 @@
+// @flow
+
+import React from 'react';
+
+import { Icon } from '../Icon';
+import { Column } from '../FlexLayout';
+import {
+  NoDataIconContainerTag,
+  NoDataTextTag,
+} from './NoData.theme';
+
+const NoData = (props: *) => (
+  <Column stretch justifyContent="center" alignItems="center" gap="lg" offsetY="lg">
+    <NoDataIconContainerTag modifiers={ props }>
+      <Icon size="stretch" name="DismissData" color="LIGHT_GRAY1" />
+    </NoDataIconContainerTag>
+    <NoDataTextTag modifiers={ props }>no data</NoDataTextTag>
+  </Column>
+);
+
+export { NoData };
+

src/components/NoData/NoData.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default (asStory) => {
+  asStory('Components/NoData', module, (story, { NoData }) => {
+    story
+      .add('default', () => (
+        <NoData />
+      ));
+  });
+};
+

src/components/NoData/NoData.theme.js

@@ -0,0 +1,38 @@
+//@flow
+
+import { createThemeTag } from '../../theme/createThemeTag';
+
+const name = 'noData';
+
+const [NoDataIconContainerTag, themeIconContainer] = createThemeTag(
+  `${name}IconContainer`,
+  {
+    root: {
+      height: '80px',
+    },
+  },
+);
+
+const [NoDataTextTag, themeText] = createThemeTag(
+  `${name}Text`,
+  ({ COLORS }: *) => ({
+    root: {
+      color: COLORS.DISABLED_TEXT_COLOR,
+      fontSize: '32px',
+      fontWeight: 500,
+      textTransform: 'uppercase',
+    },
+  }),
+);
+
+const theme = {
+  ...themeIconContainer,
+  ...themeText,
+};
+
+export {
+  NoDataIconContainerTag,
+  NoDataTextTag,
+  theme,
+};
+

src/components/NoData/index.js

@@ -0,0 +1,7 @@
+// @flow
+
+import { NoData } from './NoData';
+import { theme } from './NoData.theme';
+
+export { NoData, theme };
+

src/components/Table/Table.js

@@ -6,7 +6,6 @@ import { createThemeTag } from '../../theme/createThemeTag';
 
 
 import { theme as tableActionTheme } from './TableAction';
-import { theme as tableNoDataTheme } from './TableNoData';
 import { TableHeader, theme as tableHeaderTheme } from './TableHeader';
 import { TableBody, theme as tableBodyTheme } from './TableBody';
 import { TableBodyRow, theme as tableBodyRowTheme } from './TableBodyRow';
@@ -28,7 +27,6 @@ const [TableTag, tableTheme] = createThemeTag(name, {
 const theme = {
   ...tableTheme,
   ...tableActionTheme,
-  ...tableNoDataTheme,
   ...tableHeaderTheme,
   ...tableBodyTheme,
   ...tableBodyRowTheme,

src/components/Table/TableBody.js

@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 
 import { AsyncContent } from '../AsyncContent';
-import { TableNoData } from './TableNoData';
+import { NoData } from '../NoData';
 import { TableAction } from './TableAction';
 import { Grid } from '../Grid';
 import { Button } from '../Button';
@@ -81,7 +81,7 @@ class TableBody extends PureComponent<TableBodyProps<*>> {
                   { React.Children.toArray(data && children && data.map(children)) }
                 </TableBodyInnerTag>
               )
-              : <TableNoData />
+              : <NoData />
           }
         </AsyncContent>
         { this.renderTableAction() }

src/components/components.js

@@ -43,3 +43,5 @@ export { Text } from './Text';
 export { TextArea } from './TextArea';
 export { TextAreaField } from './TextAreaField';
 export { Tooltip } from './Tooltip';
+export { NoData } from './NoData';
+

src/components/theme.js

@@ -35,6 +35,7 @@ import { theme as textTheme } from './Text';
 import { theme as tooltipTheme } from './Tooltip';
 import { theme as menuTheme } from './Menu';
 import { theme as dateInputTheme } from './DateInput';
+import { theme as noDataTheme } from './NoData';
 
 
 export const theme = {
@@ -73,4 +74,5 @@ export const theme = {
   ...tooltipTheme,
   ...menuTheme,
   ...dateInputTheme,
+  ...noDataTheme,
 };