feat: New gcds-page-feedback component

[duboisp]

This is a work in progress, further changes, code review, writing test, documentation, stories, detaching changes in another PR... are on it's way. The main intent with this draft PR is to give you an early opportunity to see my progress and to benefit from your early feedback if you have some.

Also, I created and published a working demo here: https://duboisp.github.io/gcds-components/src/index.html

Summary | Résumé

This add to GCDS a new Page Feedback Tool component to collect in-page user feedback which are going to be compatible with the current way that DTO are collecting feedback on Canada.ca. It does also provide a very similar but different user experience when compared with the current Canada.ca implementation that leverage the WET-BOEW/GCWeb framework.

However, considering all the override complexity (which was kind of almost exponential, up to be impossible without a lot of rewrite), this page feedback tool are not compliant with the DTO design specification as specified here: https://design.canada.ca/common-design-patterns/page-feedback.html . IMHO this GCDS Page Feedback Tool proposal are going to provide an equivalent behaviour, an equivalent structure, an equivalent style and the same technical user feedback information which, in my opinion, would meet the desired user experience and desired outcome expressed by the page feedback tool DTO guidance.

It does support a few way to customize the feedback form (inline <slot> and via fetch), a way to customize the form submission end point and it should technically work well with a single page application.

It is primarily designed to be located inside the page details section, along where is located the date modified which is the footer of the main page section.

Test instructions | Instructions pour tester la modification

I am going to create more refined example with every configurable possibility via the story book.

Note: The button "RESET the previous PFT" is only there to facilitate development and for quick testing. The intend is to remove it along with its preceding and succeeding horizontal line.

Positive feedback

1. Click "Yes"
2. See your browser console/network tab, you will see a 404 post request containing the collected data.
3. An success alert is displayed regardless of the submission result.
4. Click on the "RESET the previous PFT" to restart the process without reloading the page.

Negative feedback

1. Click "No"
2. Fill up the feedback form
3. Click "Submit"
4. An success alert is displayed regardless of the submission result.
5. Click on the "RESET the previous PFT" to restart the process without reloading the page.

Single page application

1. Start to provide feedback (filling the form or seing the success alert)
2. Either following way, the PFT should reset. In your browser console, run:
   • history.pushState({},"", "page-feedback.html");
   • history.back(); (You should have pushed a state before)

Override the default form submission end point

1. Add or update the attribute action on the <gcds-page-feedback> component by using the live browser DOM editor.
2. Specify a end point where you do want the feedback form to be submitted
3. You can validate that override by looking at the browser console or the network tab, you should see the specified location along with the form data.

Override of the feedback form on runtime

1. Add or update the attribute feedback-form on the <gcds-page-feedback> component by using the live browser DOM editor.
2. Specify a custom submission end point by either:
   a. via the <gcds-page-feedback> component : Configure the attribute action with the end point URL
   b. via the fetched html fragment: Add anywhere an attribute named data-feedback-form-action containing the end point URL
   c. There is a test file located here ../src/components/gcds-page-feedback/ajax/custom-feedback-alternate.html in my working demo
3. The feedback form would update automatically.

Note: It also work if the custom feedback form contain field requiring validation. It is also compatible with native HTML form field and GCDS form capable component.

Responsive

1. Resize the width of the test page
2. The page feedback form should adapt.

Known issue

• There is a rendering issue with the gcds-alert when it is placed inside a container or a grid. The content of the alert are linearised when it shouldn't.
• When closing the gcds-alert by using the keyboard, the user lost its location because the focus are lost and need to navigate through the whole page.

[daine]

Love the comments! Could we remove all the # at the start of variables and function names? It's not a common pattern in this codebase and it would be great if we can keep the consistency

[duboisp]

Could we remove all the # at the start of variables and function names?

Yes I will replace them by the declaration private pageTitle.

FYI - Those variable prefixed with # was private properties as per how it is defined in the JS language. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Private_properties