UHF-9708 & UHF-10171: Survey styling and javascript functionalities

[hyrsky]

UHF-9708 and UHF-10171

What was done

• Styling for the survey component.
• Javascript functionalities for the survey component.

How to install

• Check installation instructions from the helfi_platform_config PR

How to test

• After successfully installing the feature and adding your first survey it should appear where you have configured it to appear. There is currently 2 second delay configured in the code to make testing easier. This delay needs to be adjusted to the correct one later. Make sure the survey pops up after the timer is done.
• The popup is configured so that it doesn't come up again after you have closed it so to get it back go to empty local-storages helfi-settings row.
• The survey should look similar to what in these designs: https://www.figma.com/file/KzpwV4jzKnAgk7gy6x8Yfz/Kysely-pop-up?type=design&node-id=2501-94&mode=design
• Make sure the translations work (remember to run make drush-locale-update drush-cr if it hasn't been mentioned elsewhere)
• When the popup comes up make sure that the focus is moved to the survey title. If you close the popup the focus should return to where it was before the popup opened.
• You should be able to close the popup with Esc button.
• You shouldn't be able to scroll or move focus to the content on the back while the popup is in place.
• When the popup appears the background shouldn't move about 15px because the scrollbar disappears but should remain exactly in the same place. The scrollbar is offset with padding on body.
• Check that code follows our standards

Continuous documentation

• This feature has been documented/the documentation has been updated
• This change doesn't require updates to the documentation

Translations

• Translations have been added to .po -files and included in this PR

Other PRs

• UHF-9708 & UHF-10171: Survey styling and javascript functionalities #1009
• UHF-9708: Survey content type drupal-helfi-platform-config#773
• UHF-9708: Survey content type drupal-helfi-etusivu#642

[github-actions]

⚠️ Visual regression found! Please check if this change is wanted or accidental. You can check the output here: https://city-of-helsinki.github.io/drupal-hdbt/pull/1009/html_report/

[teroelonen]

This should be reviewed again since it now has UHF-10171 tasks changes in it.

[teroelonen]

Very nice 🦖

stale