Merge pull request #255 from stutirao/fix-pageHeader

feat(PageHeader): adds separator prop for border-bottom
innovaccer · Aug 20, 2020 · bc187a3 · bc187a3
2 parents 298dec4 + 6cb317a
commit bc187a3
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 16 deletions.
diff --git a/core/components/organisms/pageHeader/PageHeader.tsx b/core/components/organisms/pageHeader/PageHeader.tsx
@@ -42,14 +42,32 @@ export interface PageHeaderProps extends BaseProps {
    * Page header layout type
    */
   navigationPosition?: navigationPositionType;
+  /**
+   * provides a border at bottom
+   * @default true;
+   */
+  seperator?: boolean;
 }
 
 export const PageHeader = (props: PageHeaderProps) => {
-  const { title, navigation, actions, tabs, breadcrumbs, badge, status, meta, navigationPosition, className } = props;
+  const {
+    title,
+    navigation,
+    actions,
+    tabs,
+    breadcrumbs,
+    badge,
+    seperator,
+    status,
+    meta,
+    navigationPosition,
+    className
+  } = props;
   const baseProps = extractBaseProps(props);
 
   const wrapperClasses = classNames({
     'PageHeader-wrapper': true,
+    ['PageHeader-wrapper--separator']: seperator,
     ['PageHeader-wrapper--withTabs']: tabs
   }, className);
 
@@ -66,7 +84,7 @@ export const PageHeader = (props: PageHeaderProps) => {
             <div className="PageHeader-titleWrapper">
               <Heading className="PageHeader-title">{title}</Heading>
               {badge}
-          </div>
+            </div>
           </Column>
           <Column size="4" sizeXL="4" sizeM="4">
             <div className="PageHeader-navigationWrapper">

diff --git a/core/components/organisms/pageHeader/__stories__/variants/withNavigation.story.tsx b/core/components/organisms/pageHeader/__stories__/variants/withNavigation.story.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import PageHeader from '../..//PageHeader';
 import { Navigation, Button, Text } from '@/index';
 import { action } from '@storybook/addon-actions';
-import { text } from '@storybook/addon-knobs';
+import { text, boolean } from '@storybook/addon-knobs';
 
 export const withNavigation = () => {
   const title = text(
@@ -26,9 +26,11 @@ export const withNavigation = () => {
       disabled: true
     }
   ];
+  const seperator = boolean('seperator', true);
 
   const options = {
     title,
+    seperator,
     navigation: <Navigation menus={navigationData} onClick={action('menu-clicked')} active={{ name: 'menu_1' }} />,
     actions: (
       <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>

diff --git a/core/components/organisms/pageHeader/__stories__/variants/withNavigationL1.story.tsx b/core/components/organisms/pageHeader/__stories__/variants/withNavigationL1.story.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PageHeader from '../..//PageHeader';
-import { select, text } from '@storybook/addon-knobs';
+import { select, text, boolean } from '@storybook/addon-knobs';
 import { Navigation, Button, Breadcrumbs, Badge, StatusHint } from '@/index';
 import { action } from '@storybook/addon-actions';
 
@@ -10,7 +10,7 @@ export const withNavigation = () => {
     ['center', 'bottom'],
     'center'
   );
-
+  const seperator = boolean('seperator', true);
   const title = text(
     'title',
     'Page title'
@@ -47,6 +47,7 @@ export const withNavigation = () => {
   const options = {
     navigationPosition,
     title,
+    seperator,
     navigation: <Navigation menus={navigationData} onClick={action('menu-clicked')} active={{ name: 'menu_1' }} />,
     actions: (
       <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>

diff --git a/core/components/organisms/pageHeader/__stories__/variants/withTabs.story.tsx b/core/components/organisms/pageHeader/__stories__/variants/withTabs.story.tsx
@@ -3,14 +3,14 @@ import PageHeader from '../../PageHeader';
 import { Button, Text, Tab, TabsWrapper, Badge } from '@/index';
 import { action } from '@storybook/addon-actions';
 import { updateKnob } from '@/utils/storybookEventEmitter';
-import { number, text } from '@storybook/addon-knobs';
+import { number, text, boolean } from '@storybook/addon-knobs';
 
 export const withTabs = () => {
   const active = number(
     'active',
     1
   );
-
+  const seperator = boolean('seperator', true);
   const title = text(
     'title',
     'Page title'
@@ -23,6 +23,7 @@ export const withTabs = () => {
 
   const options = {
     title,
+    seperator,
     tabs: (
       <TabsWrapper
         active={active}

diff --git a/core/components/organisms/pageHeader/__stories__/variants/withTabsL1.story.tsx b/core/components/organisms/pageHeader/__stories__/variants/withTabsL1.story.tsx
@@ -3,14 +3,14 @@ import PageHeader from '../../PageHeader';
 import { Button, Breadcrumbs, Badge, StatusHint, Tab, TabsWrapper, Text } from '@/index';
 import { action } from '@storybook/addon-actions';
 import { updateKnob } from '@/utils/storybookEventEmitter';
-import { number, text } from '@storybook/addon-knobs';
+import { number, text, boolean } from '@storybook/addon-knobs';
 
 export const withTabs = () => {
   const active = number(
     'active',
     1
   );
-
+  const seperator = boolean('seperator', true);
   const title = text(
     'title',
     'Page title'
@@ -34,6 +34,7 @@ export const withTabs = () => {
 
   const options = {
     title,
+    seperator,
     tabs: (
       <TabsWrapper
         active={active}

diff --git a/css/src/components/pageHeader.css b/css/src/components/pageHeader.css
@@ -1,7 +1,9 @@
 .PageHeader-wrapper {
-  border-bottom: var(--border);
   padding: var(--spacing) var(--spacing-2);
 }
+.PageHeader-wrapper--separator{
+  border-bottom: var(--border);
+}
 
 .PageHeader-wrapper--withTabs {
   padding-bottom: 0;
@@ -11,12 +13,6 @@
   border-bottom: none;
 }
 
-.PageHeader {
-  /* display: flex;
-  justify-content: space-between;
-  align-items: center; */
-}
-
 .PageHeader .Row {
   width: 100%;
 }