Merge pull request #270 from lesha1201/chore_Navigation_icon_size

chore(Navigation): add ability to change icon size
8base · May 28, 2019 · 7131239 · 7131239
2 parents 5acce0c + a61b8de
commit 7131239
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 6 deletions.
diff --git a/src/components/Icon/Icon.js b/src/components/Icon/Icon.js
@@ -7,7 +7,7 @@ import { IconsConsumer } from './IconsProvider';
 import { COLORS } from '../../theme';
 import * as glyphs from './glyphs';
 
-type IconProps = {
+export type IconProps = {
   /** icon name */
   name: string,
   /** icon color */

diff --git a/src/components/Navigation/Navigation.stories.js b/src/components/Navigation/Navigation.stories.js
@@ -10,6 +10,13 @@ export default (asStory) => {
           <Navigation.Item icon="Search" label="My Active Jobs" to="/my-active-jobs" />
         </Navigation>
       ))
+      .add('with icon size', () => (
+        <Navigation color="GREEN">
+          <Navigation.Item iconSize="lg" icon="Trashcan" label="Jobs" to="/jobs" />
+          <Navigation.Item iconSize="lg" icon="Mail" label="Posted" to="/posted" />
+          <Navigation.Item iconSize="lg" 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" />
@@ -19,4 +26,3 @@ export default (asStory) => {
       ));
   });
 };
-
diff --git a/src/components/Navigation/NavigationItem.js b/src/components/Navigation/NavigationItem.js
@@ -5,6 +5,7 @@ import React from 'react';
 import { Icon } from '../Icon';
 import { NavigationItemTag, NavigationItemLabel, NavigationItemIcon, NavigationItemLabelPreview } from './Navigation.theme';
 import { COLORS } from '../../theme';
+import type { IconProps } from '../Icon/Icon';
 
 type NavigationItemProps = {
   exact?: boolean,
@@ -13,20 +14,24 @@ type NavigationItemProps = {
   color?: $Keys<typeof COLORS>,
   icon?: string,
   label?: string,
+  iconSize?: $PropertyType<IconProps, 'size'>,
 };
 
-
-const NavigationItem = ({ icon, label, ...rest }: NavigationItemProps) => (
+const NavigationItem = ({ icon, label, iconSize, ...rest }: NavigationItemProps) => (
   <NavigationItemTag { ...rest }>
     <NavigationItemIcon modifiers={ rest }>
       <If condition={ icon === undefined && typeof label === 'string' && label.length > 0 }>
         <NavigationItemLabelPreview>{ label && label.charAt(0).toUpperCase() }</NavigationItemLabelPreview>
       </If>
       <If condition={ typeof icon === 'string' }>
-        <Icon name={ icon || '' } color="WHITE" />
+        <Icon name={ icon || '' } color="WHITE" size={ iconSize } />
       </If>
     </NavigationItemIcon>
-    { label && <NavigationItemLabel modifiers={ rest } className="NavigationItem-label">{ label }</NavigationItemLabel> }
+    { label && (
+      <NavigationItemLabel modifiers={ rest } className="NavigationItem-label">
+        { label }
+      </NavigationItemLabel>
+    ) }
   </NavigationItemTag>
 );