Skip to content

Commit

Permalink
Merge pull request tomalaforge#794 from svenson95/docs-c48-update
Browse files Browse the repository at this point in the history
docs(c48): update docs content
  • Loading branch information
tomalaforge authored Apr 19, 2024
2 parents 4ddab50 + 19c9e4e commit f0597bd
Showing 1 changed file with 8 additions and 9 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,25 +18,24 @@ As a member of the development team, you need to address a specific request from

## User Story

Here's the feature expressed as a user story (functional expectation) :
Here's the feature expressed as a user story with a functional expectation:

"As a user, I would like to have an alert dialog box that appears when I attempt to navigate away from the /form page after I have started entering information into the form."
> As a user, I would like to have an alert dialog box that appears when
> I attempt to navigate away from the page, after I have started
> entering information into the form.
## Acceptance Criteria

1. On the /form page:
1. If one of the form fields is not empty and the user tries to navigate to a different route or page, or wants to reload the page, show an alert dialog to _avoid losing form data_.

- If the input text has been pre-filled, then an alert dialog box opens.
- Otherwise, the user navigates normally.

2. The content of `dialog.component.ts` must be use for your dialog box content.
2. The content of `dialog.component.ts` must be used for your alert.
3. The appearance and behavior of the alert dialog box must comply with W3C conventions, see [alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).
4. Maximize the use of the new concepts and syntax in the latest version of Angular.

<details>
<summary>Tips 🤫 (if you really need it and after careful consideration)</summary>
<ul>
<li>Use the Material CDK Dialog or Overlay - https://material.angular.io/cdk/ (dont forget to add @import '@angular/cdk/overlay-prebuilt.css' in style.sccss)</li>
<li>Use the CanDeactivate guard - https://angular.io/api/router/CanDeactivate (use new functionnal approach).</li>
<li>Use the <a href="https://material.angular.io/cdk/">Material CDK</a> Dialog or Overlay - don't forget to add <code>@import '@angular/cdk/overlay-prebuilt.css'</code> in <code>styles.scss</code></li>
<li>Use the <a href="https://angular.io/api/router/CanDeactivate">CanDeactivate</a> guard in the new functional approach.</li>
</ul>
</details>

0 comments on commit f0597bd

Please sign in to comment.