kits-core/docs/ui-elements/PStepper.md

Kits core module

# PToolTip
A stepper has combine steps ability.

## When To Use
- When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier. 

## How to use
 - Import
```
import PStepper from 'components/p-elements/PStepper';
```
 - Examples
```
 <PStepper
    notAllowSwitchStep
    isShowValid={true}
    checkValidStep={campaignCheckValidStep}
    data={dataStep}
    active={activeStep}
    onDiscardChangeStep={onDiscardChangeStep}
    onChangeStep={handleChangeStep}
  />
```

- Data step examples:
```
export const CampaignStepData = [
  {
    id: 1,
    key: CAMPAIGN_CREATE_STEP.TIMELINE_INFO_STEP,
    title: 'Step 1: Strategy & Timing',
    description: 'Name your campaign and set the timing.',
    mounted: true,
    valid: false
  },
  {
    id: 2,
    key: CAMPAIGN_CREATE_STEP.TARGET_KPI_STEP,
    title: 'Step 2: Targeting & KPIs',
    description: 'Choose your target segment & set the campaign KPI/Goals.',
    mounted: false,
    valid: false
  },
  {
    id: 3,
    key: CAMPAIGN_CREATE_STEP.CONTENT_TACTIC_STEP,
    title: 'Step 3:  Content Tactics',
    description: 'Set up content tactic with uplift and A/B tests.',
    mounted: false,
    valid: false
  },
  {
    id: 4,
    key: CAMPAIGN_CREATE_STEP.ACTIVATION_CHANNEL_STEP,
    title: 'Step 4: Activation Channel',
    description: 'Set up activation channel for campaign delivery.',
    mounted: false,
    valid: false
  },
  {
    id: 5,
    key: CAMPAIGN_CREATE_STEP.URL_BUILDER_STEP,
    title: 'Step 5: Tracking URL',
    description: 'Set up tracking URL for campaign attribution.',
    mounted: false,
    valid: false
  },
  {
    id: 6,
    key: 'campaign_review_step',
    title: 'Step 6: Campaign Review',
    description: 'Final review and bring your campaign to life.',
    mounted: false,
    valid: true
  },
];
```

 ## API
 
|Property               |Description                                        |Type                                   |Default  Value  |
|---                    |---                                                |---                                    |---             |
|notAllowSwitchStep     |Can click step item to switch ste                  |`boolean`              |`false`               |
|isShowValid            |Show step status                                   |`boolean`              |`false`               |
|data                   |Step data (Please view example at top)             |`Object[]`             |`[]`               |
|onChangeStep           |Trigger when Step is clicked.                      |`(currentStep) => void`|-               |
|onDiscardChangeStep    |Trigger when Discard button is clicked.            |`() => void`           |-               |
|active                 |Current active step.                               |`number`               |-               |
|checkValidStep         |Trigger when Step is changed.                      |`(currentStep) => void`|-               |


## Notes
Step will be combined automatically to fixing with width of screen.