feat(Navigation): add label preview when icon not exist

8base · Mar 8, 2019 · feb4b7a · feb4b7a
1 parent 0450b9b
commit feb4b7a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/src/components/Navigation/Navigation.stories.js b/src/components/Navigation/Navigation.stories.js
@@ -9,6 +9,13 @@ export default (asStory) => {
           <Navigation.Item icon="Mail" label="Posted" to="/posted" />
           <Navigation.Item icon="Search" label="My Active Jobs" to="/my-active-jobs" />
         </Navigation>
+      ))
+      .add('without icons', () => (
+        <Navigation color="GREEN" data-e2e-id="default-navigation">
+          <Navigation.Item label="Jobs" to="/jobs" />
+          <Navigation.Item label="Posted" to="/posted" />
+          <Navigation.Item label="My Active Jobs" to="/my-active-jobs" />
+        </Navigation>
       ));
   });
 };

diff --git a/src/components/Navigation/Navigation.theme.js b/src/components/Navigation/Navigation.theme.js
@@ -72,11 +72,21 @@ const [NavigationItemLabel, themeItemLabel] = createThemeTag(`${name}ItemLabel`,
 });
 
 
+const [NavigationItemLabelPreview, themeItemLabelPreview] = createThemeTag(`${name}ItemLabelPreview`, {
+  root: {
+    alignItems: 'center',
+    textTransform: 'uppercase',
+    fontWeight: 600,
+  },
+});
+
+
 const theme = {
   ...themeNavigation,
   ...themeItemMain,
   ...themeItemLabel,
   ...themeItemIcon,
+  ...themeItemLabelPreview,
 };
 
 export {
@@ -85,5 +95,6 @@ export {
   NavigationItemTag,
   NavigationItemLabel,
   NavigationItemIcon,
+  NavigationItemLabelPreview,
 };
 
diff --git a/src/components/Navigation/NavigationItem.js b/src/components/Navigation/NavigationItem.js
@@ -3,7 +3,7 @@
 import React from 'react';
 
 import { Icon } from '../Icon';
-import { NavigationItemTag, NavigationItemLabel, NavigationItemIcon } from './Navigation.theme';
+import { NavigationItemTag, NavigationItemLabel, NavigationItemIcon, NavigationItemLabelPreview } from './Navigation.theme';
 import { PALETTE } from '../../theme';
 
 type NavigationItemProps = {
@@ -19,7 +19,12 @@ type NavigationItemProps = {
 const NavigationItem = ({ icon, label, ...rest }: NavigationItemProps) => (
   <NavigationItemTag { ...rest }>
     <NavigationItemIcon modifiers={ rest }>
-      <Icon name={ icon || '' } color="WHITE" />
+      <If condition={ icon === undefined && typeof label === 'string' }>
+        <NavigationItemLabelPreview>{ label && label.charAt(0).toUpperCase() }</NavigationItemLabelPreview>
+      </If>
+      <If condition={ typeof icon === 'string' }>
+        <Icon name={ icon || '' } color="WHITE" />
+      </If>
     </NavigationItemIcon>
     { label && <NavigationItemLabel modifiers={ rest } className="NavigationItem-label">{ label }</NavigationItemLabel> }
   </NavigationItemTag>