feat(Indicator): adds Indicator component

e2e/__tests__/indicator.test.js

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

src/components/Indicator/Indicator.js

@@ -0,0 +1,28 @@
+// @flow
+
+import React from 'react';
+
+import { IndicatorContainerTag, IndicatorTag } from './Indicator.theme';
+import { Text } from '../Text';
+
+type IndicatorProps = {
+  status: 'enabled' | 'disabled',
+  children: React$Node,
+};
+
+const Indicator = ({ children, status }: IndicatorProps) => (
+  <IndicatorContainerTag tagName="span">
+    <IndicatorTag tagName="span" status={ status } />
+    <Text>
+      { children }
+    </Text>
+  </IndicatorContainerTag>
+);
+
+Indicator.defaultProps = {
+  status: 'disabled',
+};
+
+export { Indicator };
+
+

src/components/Indicator/Indicator.stories.js

@@ -0,0 +1,20 @@
+// @flow
+
+import React from 'react';
+
+export default (asStory: *) => {
+  asStory(
+    'Components/Indicator',
+    module,
+    (story, { Indicator, Column }) => {
+      story
+        .add('common', () => (
+          <Column>
+            <Indicator>Disabled</Indicator>
+            <Indicator status="enabled">Enabled</Indicator>
+          </Column>
+        ));
+    },
+  );
+};
+

src/components/Indicator/Indicator.theme.js

@@ -0,0 +1,46 @@
+// @flow
+
+import { createThemeTag } from '../../theme/createThemeTag';
+
+const name = 'indicator';
+
+const [IndicatorContainerTag, themeContainer] = createThemeTag(
+  `${name}Container`,
+  () => ({
+    root: {
+      display: 'flex',
+      alignItems: 'center',
+    },
+  }),
+);
+
+const [IndicatorTag, themeIndicator] = createThemeTag(
+  name,
+  ({ COLORS }) => ({
+    root: {
+      width: '12px',
+      height: '12px',
+      borderRadius: '50%',
+      marginRight: '8px',
+    },
+
+    modifiers: {
+      status: {
+        enabled: { backgroundColor: COLORS.GREEN },
+        disabled: { backgroundColor: COLORS.LIGHT_GRAY1 },
+      },
+    },
+  }),
+);
+
+const theme = {
+  ...themeContainer,
+  ...themeIndicator,
+};
+
+export {
+  IndicatorContainerTag,
+  IndicatorTag,
+  theme,
+};
+

src/components/Indicator/index.js

@@ -0,0 +1,5 @@
+// @flow
+
+export { Indicator } from './Indicator';
+export { theme } from './Indicator.theme';
+

src/components/components.js

@@ -47,4 +47,5 @@ export { TreeSelectField } from './TreeSelectField';
 export { Tooltip } from './Tooltip';
 export { NoData } from './NoData';
 export { Pagination } from './Pagination';
+export { Indicator } from './Indicator';
 

src/components/theme.js

@@ -38,6 +38,7 @@ import { theme as menuTheme } from './Menu';
 import { theme as dateInputTheme } from './DateInput';
 import { theme as noDataTheme } from './NoData';
 import { theme as paginationTheme } from './Pagination';
+import { theme as indicatorTheme } from './Indicator';
 
 
 export const theme = {
@@ -79,4 +80,5 @@ export const theme = {
   ...dateInputTheme,
   ...noDataTheme,
   ...paginationTheme,
+  ...indicatorTheme,
 };