-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* style(notice): add new colors for notice states * feat: add feature flag to show/hide the notice * feat(notice): add notice component Shows a message in 4 possible states: info, success, error, warning * feat(tou prompt): add caretaker notice behind FF * feat(storybook): add notice component to storybook * chore: translations * chore: regen css * fix(notice): only allow h1-h3, default to div if param omitted/invalid * fix(notice): use `caller()` syntax; add `testids`; * fix(tou-prompt): update notice component syntax * test(notice): update storybook page * test(notice): add ui tests * chore: formatting; move test to the write directory * fix(test): update notice import * fix(storybook): update test page * chore: update FF default
- Loading branch information
1 parent
7b2d14c
commit bbd5c41
Showing
11 changed files
with
206 additions
and
3 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| {# | ||
| @param type - One of: 'info', 'success', 'error', 'warning' | ||
| @param message - Text to display in notice (can include HTML) | ||
| #} | ||
| {% macro notice(type, title, headingLevel) %} | ||
| {# set icon/colors based on type #} | ||
| {% | ||
| set display = { | ||
| 'info': { | ||
| 'icon': 'fa-circle-info', | ||
| 'color': 'text-blue-500', | ||
| 'border': 'border-blue-500', | ||
| 'bg': 'bg-blue-100' | ||
| }, | ||
| 'success': { | ||
| 'icon': 'fa-circle-check', | ||
| 'color': 'text-green', | ||
| 'border': 'border-green', | ||
| 'bg': 'bg-green-light' | ||
| }, | ||
| 'error': { | ||
| 'icon': 'fa-triangle-exclamation', | ||
| 'color': 'text-red', | ||
| 'border': 'border-red', | ||
| 'bg': 'bg-red-light' | ||
| }, | ||
| 'warning': { | ||
| 'icon': 'fa-circle-exclamation', | ||
| 'color': 'text-orange', | ||
| 'border': 'border-orange', | ||
| 'bg': 'bg-orange-light' | ||
| } | ||
| } | ||
| %} | ||
| {# Text for screen readers instead of icon #} | ||
| {% | ||
| set screen_reader_text = { | ||
| 'info': _('Information'), | ||
| 'success': _('Success'), | ||
| 'error': _('Error'), | ||
| 'warning': _('Warning'), | ||
| } | ||
| %} | ||
| <div class="notice notice-{{ type }} overflow-hidden rounded-lg px-12 pt-12 border-4 {{display[type]['border']}} {{display[type]['bg']}}" role="alert" data-testid="notice"> | ||
| <div class="flex gap-4 items-baseline"> | ||
| <div class="notice-icon {{ display[type]['color'] }}" data-testid="notice-icon"> | ||
| <i aria-hidden="true" class="mb-2 fa-solid fa-lg {{ display[type]['icon'] }}"></i> | ||
| <span class="sr-only" data-testid="notice-icon-text">{{ screen_reader_text[type] }}: </span> | ||
| </div> | ||
| <div class="notice-content ml-6 pb-12"> | ||
| {% if headingLevel is defined and headingLevel is number and headingLevel >= 1 and headingLevel <= 3 %} | ||
| <h{{ headingLevel }} class="notice-heading heading-small md:heading-large mt-4" >{{ title }}</h{{ headingLevel }} data-testid="notice-heading"> | ||
| {% else %} | ||
| <div data-testid="notice-heading">{{ title }}</div> | ||
| {% endif %} | ||
| <div data-testid="notice-message">{{ caller() }}</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% endmacro %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| {% from "components/notice.html" import notice %} | ||
|
|
||
| <div class="heading-large">Notice Component Examples</div> | ||
|
|
||
| <hr /> | ||
|
|
||
| <h2 class="heading-medium">Info Notice - Basic</h2> | ||
| {% call notice(type="info", title="System Maintenance Scheduled", headingLevel=3) %} | ||
| Scheduled maintenance will occur on July 1st from 2:00 AM to 4:00 AM EDT. | ||
| {% endcall %} | ||
|
|
||
| <h2 class="heading-medium">Success Notice - with HTML</h2> | ||
| {% call notice(type="success", title="API Documentation Updated", headingLevel=3) %} | ||
| New endpoints are available. Visit the <a href="#">API documentation</a> to learn more. | ||
| {% endcall %} | ||
|
|
||
| <h2 class="heading-medium">Warning Notice - Long Content</h2> | ||
| {% call notice(type="warning", title="Trial Mode Limitations", headingLevel=3) %} | ||
| <p>Your service is in trial mode, which means:</p> | ||
| <ul class="list list-bullet ml-10"> | ||
| <li>You can only send messages to registered team members</li> | ||
| <li>Daily message limit is capped at 50 messages</li> | ||
| <li>Templates are limited to test content only</li> | ||
| </ul> | ||
| {% endcall %} | ||
|
|
||
| <h2 class="heading-medium">Error Notice - Multiple Paragraphs</h2> | ||
| {% call notice(type="error", title="Failed to Upload Template", headingLevel=3) %} | ||
| <p>The CSV file could not be processed due to formatting errors.</p> | ||
| <p>Common issues include:</p> | ||
| <ul class="list list-bullet ml-10"> | ||
| <li>Missing required columns</li> | ||
| <li>Invalid phone numbers</li> | ||
| <li>Duplicate entries</li> | ||
| </ul> | ||
| <p>Please review the <a href="#">template guide</a> and try again.</p> | ||
| {% endcall %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| // Root element for scoping component interactions | ||
| const Root = (selector = '') => { | ||
| if (typeof selector === 'number') { | ||
| return cy.getByTestId('notice').eq(selector); | ||
| } | ||
| return cy.get(`[data-testid="notice"].notice-${selector}`); | ||
| }; | ||
|
|
||
|
|
||
| // Parts of the component a user can interact with | ||
| let Components = { | ||
| Root, | ||
| Icon: (selector) => Root(selector).find('[data-testid="notice-icon"] svg'), | ||
| IconText: (selector) => Root(selector).find('[data-testid="notice-icon-text"]'), | ||
| Heading: (selector) => Root(selector).find('[data-testid="notice-heading"]'), | ||
| Message: (selector) => Root(selector).find('[data-testid="notice-message"]'), | ||
| }; | ||
|
|
||
| // Actions users can take on the component | ||
| let Actions = { | ||
| }; | ||
|
|
||
| let Notice = { | ||
| Components, | ||
| ...Actions | ||
| }; | ||
|
|
||
| export default Notice; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| import Notice from "../../../Notify/Admin/Components/Notice"; | ||
|
|
||
| let PageURL = "/_storybook?component=notice"; | ||
|
|
||
| describe("Notice component", () => { | ||
| it("Should pass a11y checks", () => { | ||
| cy.a11yScan(PageURL, { | ||
| a11y: true, | ||
| htmlValidate: true, | ||
| deadLinks: false, | ||
| mimeTypes: false, | ||
| }); | ||
| }); | ||
|
|
||
| it("Should use the correct icon depending on type", () => { | ||
| cy.visit(PageURL); | ||
|
|
||
| // info notice component should be info | ||
| Notice.Components.Icon("info").should("have.class", "fa-circle-info"); | ||
|
|
||
| // success notice component should be success | ||
| Notice.Components.Icon("success").should("have.class", "fa-circle-check"); | ||
|
|
||
| // warning notice component should be warning | ||
| Notice.Components.Icon("warning").should( | ||
| "have.class", | ||
| "fa-circle-exclamation", | ||
| ); | ||
|
|
||
| // error notice component should be error | ||
| Notice.Components.Icon("error").should( | ||
| "have.class", | ||
| "fa-triangle-exclamation", | ||
| ); | ||
| }); | ||
|
|
||
| it("Should the correct alternative text for the icon", () => { | ||
| cy.visit(PageURL); | ||
|
|
||
| // info notice component should have alt text "Information" | ||
| Notice.Components.IconText("info").should("have.text", "Information: "); | ||
|
|
||
| // success notice component should have alt text "Success" | ||
| Notice.Components.IconText("success").should("have.text", "Success: "); | ||
|
|
||
| // warning notice component should have alt text "Warning" | ||
| Notice.Components.IconText("warning").should("have.text", "Warning: "); | ||
|
|
||
| // error notice component should have alt text "Error" | ||
| Notice.Components.IconText("error").should("have.text", "Error: "); | ||
| }); | ||
| }); |