v0.2.8

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sha-el-design",
-  "version": "0.2.7",
+  "version": "0.2.8",
   "description": "React Components",
   "main": "./lib/",
   "typings": "./lib/",

src/components/NavBar/NavBar.stories.tsx

@@ -3,6 +3,7 @@ import { Story, Meta } from '@storybook/react';
 
 import { NavBar, NavBarProps } from './NavBar';
 import { Md3DRotation } from 'react-icons/md';
+import { Col, Row } from '../Grid';
 
 export default {
   title: 'Navigation/NavBar',
@@ -12,19 +13,27 @@ export default {
 
 export const Basic: Story<NavBarProps> = (args) => <NavBar {...args} />;
 Basic.args = {
-  icon: (
-    <img
-      style={{ width: '55px' }}
-      src="https://camo.githubusercontent.com/7a51cd44a596528ddc34146d843b405827a011d095dc7ed2446f05302d1eb72a/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f69643d317878376244776865394e4e6c39336a4a76794552627433556b79335862666356"
-    />
-  ),
-  title: 'Title',
   style: {
     position: 'fixed',
     top: 0,
     left: 0,
     right: 0,
     width: '100%',
   },
-  action: <Md3DRotation />,
+  children: (
+    <Row style={{ padding: '0 10px' }} alignItems="center" gutter={10}>
+      <Col flex="0">
+        <img
+          style={{ width: '55px' }}
+          src="https://camo.githubusercontent.com/7a51cd44a596528ddc34146d843b405827a011d095dc7ed2446f05302d1eb72a/68747470733a2f2f64726976652e676f6f676c652e636f6d2f75633f69643d317878376244776865394e4e6c39336a4a76794552627433556b79335862666356"
+        />
+      </Col>
+      <Col flex="1" />
+      <Col flex="0">Title</Col>
+      <Col flex="1" />
+      <Col flex="0">
+        <Md3DRotation />
+      </Col>
+    </Row>
+  ),
 };

src/components/NavBar/NavBar.tsx

@@ -1,16 +1,10 @@
 import React from 'react';
 import { classes } from '../../helpers';
 import { elevationCss } from '../../helpers/elevations';
-import { Col, Row } from '../Grid';
 import { Theme, useTheme } from '../Theme/Theme';
 import { style } from './style';
 
 export interface NavBarProps {
-  /**
-   * Brand Icon
-   */
-  icon?: React.ReactNode;
-
   /**
    * Style
    */
@@ -22,47 +16,29 @@ export interface NavBarProps {
    */
   bgColor?: keyof Theme | string;
 
-  /**
-   * action to be displayed on right
-   */
-  action?: React.ReactNode;
-
-  /**
-   * Title
-   */
-  title?: React.ReactNode;
-
   /**
    * Elevation for shadow
    */
   elevation?: number;
 
   /**
-   * Title text align
+   * Nav bar content
    */
-  alignTitle?: React.CSSProperties['textAlign'];
+  children?: React.ReactNode;
 }
 
 export const NavBar: React.FC<NavBarProps> = (props) => {
-  const { icon, title, action } = props;
   const theme = useTheme();
   const css = style(theme, props);
 
   return (
     <header style={props.style} className={classes(css.container, elevationCss(props.elevation), 'sha-el-nav-bar')}>
-      <Row gutter={32} alignItems="center" className={classes(css.container)} style={{ margin: 0 }}>
-        <Col flex="0 1">{icon}</Col>
-        <Col className={css.title} flex="1 0">
-          {title}
-        </Col>
-        <Col flex="0 1">{action}</Col>
-      </Row>
+      {props.children}
     </header>
   );
 };
 
 NavBar.defaultProps = {
   bgColor: 'primary',
   elevation: 12,
-  alignTitle: 'center',
 };

src/components/NavBar/style.ts

@@ -12,10 +12,5 @@ export const style = (theme: Theme, props: NavBarProps) => {
       color: getColor(theme[props.bgColor] || props.bgColor),
       fontSize: '24px',
     }),
-    title: css({
-      textAlign: props.alignTitle,
-      fontSize: '36px',
-      fontWeight: 300,
-    }),
   };
 };