feat(TopBar): initial

e2e/__tests__/top-bar-test.js

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

src/components/TopBar/TopBar.js

@@ -0,0 +1,39 @@
+// @flow
+
+import React from 'react';
+import { theme, TopBarTag, TopBarCloseTag } from './TopBar.theme';
+
+import { Row } from '../FlexLayout';
+import { Icon } from '../Icon';
+
+type TopBarProps = {
+  isOpen?: boolean,
+  onClose?: Function,
+  children: React$Node,
+  color: string,
+};
+
+const TopBar = ({ children, isOpen, onClose, ...rest }: TopBarProps) => {
+  let rendered = null;
+
+  if (isOpen) {
+    rendered = (
+      <TopBarTag tagName={ Row } alignItems="center" justifyContent="center" gap="lg" { ...rest }>
+        <If condition={ typeof onClose === 'function' }>
+          <TopBarCloseTag onClick={ onClose }>
+            <Icon name="Delete" color="WHITE" />
+          </TopBarCloseTag>
+        </If>
+        { children }
+      </TopBarTag>
+    );
+  }
+
+  return rendered;
+};
+
+TopBar.defaultProps = {
+  isOpen: true,
+};
+
+export { TopBar, theme };

src/components/TopBar/TopBar.stories.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-alert */
+
+import React, { useState } from 'react';
+
+export default (asStory) => {
+  asStory('Components/TopBar', module, (story, { TopBar, Column, Icon, Text, Button }) => {
+
+    const TopBarWithState = (props) => {
+      const [isOpen, setIsOpen] = useState(true);
+
+      return <TopBar isOpen={ isOpen } onClose={ () => setIsOpen(false) } { ...props } />;
+    };
+
+    story
+      .add('common', () => (
+        <Column gap="lg">
+          <TopBar color="DSM_HOME_SELECTED">
+            <Text color="WHITE" weight="semibold">You have 7 days until your FREE TRIAL ends.</Text>
+            <Button color="white" variant="ghost" size="sm">Update</Button>
+          </TopBar>
+          <TopBarWithState color="RED">
+            <Icon color="YELLOW" name="Alert" />
+            <Text color="WHITE" weight="semibold">Oh no! Your FREE TRIAL has ended, please update your payment details.</Text>
+            <Button color="white" variant="ghost" size="sm">Update</Button>
+          </TopBarWithState>
+          <TopBar color="RED">
+            <Icon color="YELLOW" name="Alert" />
+            <Text color="WHITE" weight="semibold">Oh no! Your FREE TRIAL has ended, please update your payment details.</Text>
+            <Button color="white" variant="ghost" size="sm">Update</Button>
+          </TopBar>
+        </Column>
+      ));
+  });
+};

src/components/TopBar/TopBar.theme.js

@@ -0,0 +1,34 @@
+//@flow
+
+import { createThemeTag } from '../../theme/createThemeTag';
+
+const name = 'topBar';
+
+const [TopBarTag, themeTopBar] = createThemeTag(name, ({ COLORS }: *) => ({
+  root: (props) => ({
+    width: '100%',
+    height: '52px',
+    backgroundColor: COLORS[props.color],
+    position: 'relative',
+  }),
+}));
+
+const [TopBarCloseTag, themeTopBarClose] = createThemeTag(`${name}Close`, () => ({
+  root: {
+    position: 'absolute',
+    right: 24,
+    height: '100%',
+    display: 'flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    marginRight: '0 !important',
+  },
+}));
+
+const theme = {
+  ...themeTopBar,
+  ...themeTopBarClose,
+};
+
+export { theme, TopBarTag, TopBarCloseTag };
+

src/components/TopBar/index.js

@@ -0,0 +1 @@
+export * from './TopBar';

src/components/components.js

@@ -47,6 +47,7 @@ export { TextAreaField } from './TextAreaField';
 export { TreeSelect } from './TreeSelect';
 export { TreeSelectField } from './TreeSelectField';
 export { Tooltip } from './Tooltip';
+export { TopBar } from './TopBar';
 export { NoData } from './NoData';
 export { Pagination } from './Pagination';
 export { Indicator } from './Indicator';

src/components/theme.js

@@ -34,6 +34,7 @@ import { theme as tagTheme } from './Tag';
 import { theme as textAreaTheme } from './TextArea';
 import { theme as textTheme } from './Text';
 import { theme as tooltipTheme } from './Tooltip';
+import { theme as topBarTheme } from './TopBar';
 import { theme as treeSelectTheme } from './TreeSelect';
 import { theme as menuTheme } from './Menu';
 import { theme as dateInputTheme } from './DateInput';
@@ -77,6 +78,7 @@ export const theme = {
   ...textAreaTheme,
   ...textTheme,
   ...tooltipTheme,
+  ...topBarTheme,
   ...treeSelectTheme,
   ...menuTheme,
   ...dateInputTheme,