@navinc/base-react-components/src/user-feedback.readme.md

Nav's Pattern Library

Include this in a feature to collect user feedback. Once one has been interacted with it will hide for 30 days.
There can be as many per page as you would like as long as they all use different `trackingLabel` values.

`trackingLabel` should follow the [FE Tracking Standards](https://docs.google.com/document/d/1lo82s9spvkpuQwhT3W30hpIh-QKSnmk9oWuicqCktLE/edit)

Props:

- trackingLabel (Required)
- initialPrompt (Optional)
- thumbsUpThankYouText (Optional)
- thumbsDownThankYouText (Optional)
- thumbsUpAdditionalFeedbackPrompt (Optional)
- thumbsDownAdditionalFeedbackPrompt (Optional)
- additionalFeedbackQuestion (Optional)

Note: If you are not seeing the demo above then clear your cookies.

There are four track calls that get fired:

1. When the feedback component is in view:

```
{
  payload: {
    label: `${trackingLabel}: was seen.`,
    name: `${trackingLabel}: was seen.`
  },
  type: 'user_feedback'
}
```

2. When they click the thumbs up or thumbs down icon:

```
{
  payload: {
    label: `${trackingLabel}: ${userReaction}`,
    name: `${trackingLabel}: ${userReaction}`
  },
  type: 'user_feedback'
}
```

3. When they click the link to give additional feedback:

```
{
  payload: {
    label: `${trackingLabel}: ${userReaction} - Clicked Additional Feedback`,
    name: `${trackingLabel}: ${userReaction} - Clicked Additional Feedback`
  },
  type: 'user_feedback'
}
```

4. When they submit additional feedback:

```
{
  payload: {
    label: `${trackingLabel}: ${userReaction} - Additional Feedback Given`,
    name: `${trackingLabel}: ${userReaction} - Additional Feedback Given`,
    feedBack: userFeedback
  },
  type: 'user_feedback'
}
```

`trackingLabel`: Tracking label form props.
`userReaction`: 'Thumbs Up' || 'Thumbs Down'
`userFeedback`: Feedback typed by the user.