Contextual survey

Examples
Typescript ❤️

A React component used to ask the user for feedback

Install
yarn add @atlaskit/contextual-survey
npm
@atlaskit/contextual-survey
Source
Bitbucket
Bundle
unpkg.com
Changelog
Latest

3.0.2

Patch Changes

  • #120533 f1bec731e278f - Adds a sideEffects field to ensure this package does not have Compiled styles tree-shaken in the future to avoid an accidental regression.

    This is related to https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953

Note: This component is designed for internal Atlassian development.

External contributors will be able to use this component but will not be able to submit issues.

Note: This component is currently in developer preview.

Please experiment with and test this package, but be aware that the API may change at any time. Use at your own risk, preferably not in production.

This component is used to ask for feedback from the user, without affecting their usage of the page. It is styled similar to a flag.

The user flow for this component is:

Phase 1: Feedback

  • Choosing a feedback score
  • (Optional) Writing extra feedback in a textarea
  • (Optional) User selects if they can be contacted about their feedback. This is automatically set to true on the first change event for the textarea. It is set to false by default.

Phase 2 (Optional): Atlassian Research Signup

This phase will be entered when:

  1. The user has selected they want to be contacted about their feedback
  2. getUserHasAnsweredMailingList() has resolved to false

If this phase is not entered then a thank you message is displayed.

In this phase a prompt is opened which asks the user if they want to join the Atlassian Research Group.

After onMailingListAnswer() has resolved:

  • If the user selected yes a thank you message is displayed
  • If the user selected no the survey is closed.

Dismissing

onDismiss will be called when the survey is finished. This can happen when:

  • The user explicitly closes the survey
  • The user finishes the survey. The survey will be auto dismissed after a small delay
  • The <SurveyComponent/> is unmounted

onDismiss will only ever be called once

onDismiss is called with arguments: { trigger: DismissTrigger }. This can be used to distinguish between different rationales for dismissing

// Types export enum DismissTrigger { AutoDismiss = 'AUTO_DISMISS', Manual = 'MANUAL', Finished = 'FINISHED', Unmount = 'UNMOUNT', } export type OnDismissArgs = { trigger: DismissTrigger }; onDismiss: (args: OnDismissArgs) => void; // These types are exported publicly for you to use import {DismissTrigger, OnDismissArgs} from '@atlaskit/contextual-survey';

Responsibilities

  • <SurveyMarshal/>: Responsible for placement and animation for the survey.
  • <ContextualSurvey/>: Renders the survey questions

Usage

import { ContextualSurvey, SurveyMarshal } from '@atlaskit/avatar';

Basic example

Contextual Survey Props

statement string

Optional statement, to be used in conjunction with the question for the survey Example: "How strongly do you agree or disagree with this statement"

question string required

Question used for the survey Example: "It is easy to find what I am looking for in Jira"

textLabel string

Accessible label text for the survey text area

textPlaceholder string

Text placeholder for the survey text area Example: "Tell us why"

onDismiss function required

Callback that is triggered when the survey should be dismissed

args => undefined

getUserHasAnsweredMailingList function required

Gets whether user has already signed up to the Atlassian Research Group list. If true is returned then the user will not be prompted to sign up to the Research Group.

=> Promiseboolean

onSubmit function required

Callback that is triggered when the survey is submitted, it will get the survey data as a parameter

formValues => Promiseundefined

onMailingListAnswer function required

Callback that is triggered when the user clicks 'Yes' or 'No' to sign up to the Atlassian Research Group

answer => Promiseundefined

Survey Marshal Props

shouldShow boolean required

Whether the form should be rendered

children function required

A function that returns Node to be rendered (<ContextualSurvey/>) Using a function as child so that the child node does not need to be evaluated if it is not mounted

=> react.ReactNode