From 245bd8d01ecc0189030b35abafe69d349b454aeb Mon Sep 17 00:00:00 2001
From: Riya Lohia <riyalh1997@gmail.com>
Date: Fri, 4 Sep 2020 02:41:35 +0530
Subject: [PATCH] feat(pageHeader): adds stepper component in pageHeader

---
 core/components/molecules/stepper/Stepper.tsx |  21 +--
 .../organisms/pageHeader/PageHeader.tsx       |  13 +-
 .../variants/withStepper.story.tsx            | 119 ++++++++++++
 .../variants/withStepperL1.story.tsx          | 177 ++++++++++++++++++
 4 files changed, 315 insertions(+), 15 deletions(-)
 create mode 100644 core/components/organisms/pageHeader/__stories__/variants/withStepper.story.tsx
 create mode 100644 core/components/organisms/pageHeader/__stories__/variants/withStepperL1.story.tsx

diff --git a/core/components/molecules/stepper/Stepper.tsx b/core/components/molecules/stepper/Stepper.tsx
index 9d7f090a0d..aa2ac45f37 100644
--- a/core/components/molecules/stepper/Stepper.tsx
+++ b/core/components/molecules/stepper/Stepper.tsx
@@ -8,19 +8,19 @@ export interface StepProp {
   value?: React.ReactText;
 }
 
-export interface CompProps extends BaseProps {
+export interface StepperProps extends BaseProps {
   /**
    * Set the active step (zero based index).
    *
    * Set to -1 to disable all the steps.
    */
-  active?: number;
+  active: number;
   /**
    * Set the completed steps (zero based index).
    *
    * **Number of completed steps <= completed index**
    */
-  completed?: number;
+  completed: number;
   /**
    * <pre className="docPage-codeBlock">
    * StepProp {
@@ -47,15 +47,6 @@ export interface CompProps extends BaseProps {
   ) => void;
 }
 
-const defaultProps = {
-  completed: -1,
-  active: 0,
-};
-
-type DefaultProps = Readonly<typeof defaultProps>;
-
-export type StepperProps = CompProps & DefaultProps;
-
 export const Stepper = (props: StepperProps) => {
   const {
     steps,
@@ -109,6 +100,10 @@ export const Stepper = (props: StepperProps) => {
   );
 };
 
-Stepper.defaultProps = defaultProps;
+Stepper.defaultProps = {
+  completed: -1,
+  active: 0,
+  steps: []
+};
 
 export default Stepper;
diff --git a/core/components/organisms/pageHeader/PageHeader.tsx b/core/components/organisms/pageHeader/PageHeader.tsx
index ce32b4cd5b..5c122a7252 100644
--- a/core/components/organisms/pageHeader/PageHeader.tsx
+++ b/core/components/organisms/pageHeader/PageHeader.tsx
@@ -14,6 +14,10 @@ export interface PageHeaderProps extends BaseProps {
    * `Navigation` component
    */
   navigation?: React.ReactNode;
+  /**
+   * `Stepper` component
+   */
+  stepper?: React.ReactNode;
   /**
    * Actions composed of `Button` and meta data
    */
@@ -53,6 +57,7 @@ export const PageHeader = (props: PageHeaderProps) => {
   const {
     title,
     navigation,
+    stepper,
     actions,
     tabs,
     breadcrumbs,
@@ -75,6 +80,10 @@ export const PageHeader = (props: PageHeaderProps) => {
     PageHeader: true
   });
 
+  const renderCenter = () => {
+    return navigation ? navigation : stepper;
+  };
+
   return (
     <div {...baseProps} className={wrapperClasses}>
       {breadcrumbs && breadcrumbs}
@@ -88,7 +97,7 @@ export const PageHeader = (props: PageHeaderProps) => {
           </Column>
           <Column size="4" sizeXL="4" sizeM="4">
             <div className="PageHeader-navigationWrapper">
-              {(!breadcrumbs || navigationPosition === 'center') && navigation}
+              {(!breadcrumbs || navigationPosition === 'center') && renderCenter()}
             </div>
           </Column>
           <Column size="4" sizeXL="4" sizeM="4">
@@ -103,7 +112,7 @@ export const PageHeader = (props: PageHeaderProps) => {
         </div>
       )}
       {breadcrumbs && navigationPosition === 'bottom' && (
-        <div className="PageHeader-navigationWrapper">{navigation}</div>)}
+        <div className="PageHeader-navigationWrapper">{renderCenter()}</div>)}
       {tabs && <div>{tabs}</div>}
     </div>
   );
diff --git a/core/components/organisms/pageHeader/__stories__/variants/withStepper.story.tsx b/core/components/organisms/pageHeader/__stories__/variants/withStepper.story.tsx
new file mode 100644
index 0000000000..cf23f04ec8
--- /dev/null
+++ b/core/components/organisms/pageHeader/__stories__/variants/withStepper.story.tsx
@@ -0,0 +1,119 @@
+import * as React from 'react';
+import PageHeader from '../..//PageHeader';
+import { Stepper, Button, Text } from '@/index';
+import { text, boolean } from '@storybook/addon-knobs';
+
+export const withStepper = () => {
+  const title = text(
+    'title',
+    'Page title'
+  );
+
+  const stepperData = [
+    {
+      value: 'step_1',
+      label: 'Step 1',
+    },
+    {
+      value: 'step_2',
+      label: 'Step 2'
+    },
+    {
+      value: 'step_3',
+      label: 'Step 3',
+    }
+  ];
+
+  const seperator = boolean('seperator', true);
+
+  const [active, setActive] = React.useState(0);
+  const [completed, setCompleted] = React.useState(-1);
+
+  const onChangeHandler = (activeStep: number) => {
+    setActive(activeStep);
+  };
+
+  const onClickHandler = () => {
+    if (active > completed) setCompleted(active);
+    active > completed ? setActive(active + 1) : setActive(completed + 1);
+  };
+
+  const options = {
+    title,
+    seperator,
+    stepper: <Stepper steps={stepperData} onChange={onChangeHandler} active={active} completed={completed} />,
+    actions: (
+      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+        <span className="mr-4"><Text appearance="subtle">Meta data</Text></span>
+        <Button appearance="primary" onClick={onClickHandler}>Next</Button>
+      </div>
+    )
+  };
+
+  return (
+    <div className="w-100 p-6" style={{ background: '#f4f4f4' }}>
+      <PageHeader {...options} />
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const title = 'Page title';
+
+   const stepperData = [
+    {
+      value: 'step_1',
+      label: 'Step 1',
+    },
+    {
+      value: 'step_2',
+      label: 'Step 2'
+    },
+    {
+      value: 'step_3',
+      label: 'Step 3',
+    }
+  ];
+
+  const [active, setActive] = React.useState(0);
+  const [completed, setCompleted] = React.useState(-1);
+
+  const onChangeHandler = (activeStep) => {
+    setActive(activeStep)
+  };
+
+  const onClickHandler = () => {
+    if (active > completed) setCompleted(active);
+    active > completed ? setActive(active + 1) : setActive(completed + 1);
+  }
+
+  const options = {
+    title,
+    seperator: true,
+    stepper: <Stepper steps={stepperData} onChange={onChangeHandler} active={active} completed={completed} />,
+    actions: (
+      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+        <span className="mr-4"><Text appearance="subtle">Meta data</Text></span>
+        <Button appearance="primary" onClick={onClickHandler}>Primary</Button>
+      </div>
+    )
+  };
+
+  return (
+    <div className="w-100 p-6" style={{ background: '#f4f4f4' }}>
+      <PageHeader {...options} />
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Organisms|PageHeader/Level 0/Variants',
+  component: PageHeader,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode
+      }
+    }
+  }
+};
diff --git a/core/components/organisms/pageHeader/__stories__/variants/withStepperL1.story.tsx b/core/components/organisms/pageHeader/__stories__/variants/withStepperL1.story.tsx
new file mode 100644
index 0000000000..97e59503e1
--- /dev/null
+++ b/core/components/organisms/pageHeader/__stories__/variants/withStepperL1.story.tsx
@@ -0,0 +1,177 @@
+import * as React from 'react';
+import PageHeader from '../../PageHeader';
+import { select, text, boolean } from '@storybook/addon-knobs';
+import { Stepper, Button, Breadcrumbs, Badge, StatusHint } from '@/index';
+import { action } from '@storybook/addon-actions';
+
+export const withStepper = () => {
+  const navigationPosition = select(
+    'navigationPosition',
+    ['center', 'bottom'],
+    'center'
+  );
+  const seperator = boolean('seperator', true);
+  const title = text(
+    'title',
+    'Page title'
+  );
+
+  const stepperData = [
+    {
+      value: 'step_1',
+      label: 'Step 1',
+    },
+    {
+      value: 'step_2',
+      label: 'Step 2'
+    },
+    {
+      value: 'step_3',
+      label: 'Step 3',
+    }
+  ];
+
+  const breadcrumbData = [
+    {
+      label: 'Level 0',
+      link: '/level0'
+    },
+    {
+      label: 'Level 1',
+      link: '/level1'
+    }
+  ];
+
+  const [active, setActive] = React.useState(0);
+  const [completed, setCompleted] = React.useState(-1);
+
+  const onChangeHandler = (activeStep: number) => {
+    setActive(activeStep);
+  };
+
+  const onClickHandler = () => {
+    if (active > completed) setCompleted(active);
+    active > completed ? setActive(active + 1) : setActive(completed + 1);
+  };
+
+  const options = {
+    navigationPosition,
+    title,
+    seperator,
+    stepper: <Stepper steps={stepperData} onChange={onChangeHandler} active={active} completed={completed} />,
+    actions: (
+      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+        <Button appearance="primary" onClick={onClickHandler}>Next</Button>
+      </div>
+    ),
+    breadcrumbs: (
+      <Breadcrumbs
+        list={breadcrumbData}
+        onClick={link => action(`on-click: ${link}`)}
+      />
+    ),
+    badge: (
+      <Badge appearance="secondary">Badge</Badge>
+    ),
+    status: (
+      <StatusHint appearance="alert">Alert</StatusHint>
+    ),
+    meta: (
+      <StatusHint appearance="default">Meta Data</StatusHint>
+    )
+  };
+
+  return (
+    <div className="w-100 p-6" style={{ background: '#f4f4f4' }}>
+      <PageHeader {...options} />
+    </div>
+  );
+};
+
+const customCode = `() => {
+  const navigationPosition = 'center';
+
+  const title = 'Page title';
+
+  const stepperData = [
+    {
+      value: 'step_1',
+      label: 'Step 1',
+    },
+    {
+      value: 'step_2',
+      label: 'Step 2'
+    },
+    {
+      value: 'step_3',
+      label: 'Step 3',
+    }
+  ];
+
+  const breadcrumbData = [
+    {
+      label: 'Level 0',
+      link: '/level0'
+    },
+    {
+      label: 'Level 1',
+      link: '/level1'
+    }
+  ];
+
+  const [active, setActive] = React.useState(0);
+  const [completed, setCompleted] = React.useState(-1);
+
+  const onChangeHandler = (activeStep) => {
+    setActive(activeStep)
+  };
+
+  const onClickHandler = () => {
+    if (active > completed) setCompleted(active);
+    active > completed ? setActive(active + 1) : setActive(completed + 1);
+  };
+
+   const options = {
+    navigationPosition,
+    title,
+    seperator: true,
+    stepper: <Stepper steps={stepperData} onChange={onChangeHandler} active={active} completed={completed} />,
+    actions: (
+      <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+        <Button appearance="primary" onClick={onClickHandler}>Next</Button>
+      </div>
+    ),
+    breadcrumbs: (
+      <Breadcrumbs
+        list={breadcrumbData}
+      />
+    ),
+    badge: (
+      <Badge appearance="secondary">Badge</Badge>
+    ),
+    status: (
+      <StatusHint appearance="alert">Alert</StatusHint>
+    ),
+    meta: (
+      <StatusHint appearance="default">Meta Data</StatusHint>
+    )
+  };
+
+  return (
+    <div className="w-100 p-6" style={{ background: '#f4f4f4' }}>
+      <PageHeader {...options} />
+    </div>
+  );
+}`;
+
+export default {
+  title: 'Organisms|PageHeader/Level 1/Variants',
+  component: PageHeader,
+  parameters: {
+    docs: {
+      docPage: {
+        customCode
+      }
+    }
+  }
+};