Add slide up / down animation to User Feedback survey

Feature Description

The User Feedback survey is missing the slide up / down animation to show / hide the survey.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The user input survey box should not just appear, it should have an animation when it appears and disappears:
  • When it appears, it should slide up into view from the bottom of the screen.
  • When it disappears (e.g. completion or dismissal), it should slide down out of view back “into” the bottom of the screen.
• Potentially this can technically use https://material-ui.com/components/transitions/ - this is not a requirement though, just a note.

Implementation Brief

• Install the @material-ui/core package.
• Using assets/js/components/surveys/CurrentSurvey.js,
  • Create a new state variable, animateSurvey which is a boolean, with false as default value.
  • Use the useMount hook to set the animateSurvey to true.
  • Create new function handleAnimationOnExited which calls the setValues action (which can be found in the dismissSurvey function) to hide the form. Basically the form is hidden and unmounted when the animation is complete.
  • Wrap the markup for the survey questions (not when it has been completed) within the Slide component, imported from @material-ui/core with the following props:
    • direction="up"
    • in={ animateSurvey }
    • onExited={ handleAnimationOnExited }
  • Update the dismissSurvey function to :
    • set animateSurvey to false.
    • Remove the setValues call since we moved it to the handleAnimationOnExited function.

Test Coverage

• No new tests to be added.

Visual Regression Changes

• N/A

QA Brief

• Run storybook locally via the npm run storybook command.
• Visit the “Surveys -> Current Survey” story.
• The user feedback survey should slide up upon page load and slide down when closed.

Changelog entry

• Enhance user survey display with added animation on enter and exit.

[asvinb]

@eugene-manuilov That’s what I thought initially while working on this task. As per the docs:

Direction: the child node will enter from.

So the direction is only for entering, and when exiting the animation, it’ll just do the reverse.

[asvinb]

Thanks for catching that @tofumatt . Actually when I read your comment, am like it’s weird that we don’t have any callbacks when the animation starts or ends. I checked the docs and voila, we do have the onExited callback, which is called when the animation ends 😃 I’ve updated the IB to reflect that change. Also the Slide component does have the unmountOnExit prop which like the name says, unmounts the children when existing, which we could have used. But then the form data store will not be in sync with that’s visible/unmounted on the page. So I guess we can leave that to the data store to handle.