@gemeente-denhaag/alert
Advanced tools
@gemeente-denhaag/alert - npm Package Compare versions
Comparing version 0.1.1-alpha.16 to 0.1.1-alpha.17
| { | ||
| "name": "@gemeente-denhaag/alert", | ||
| "version": "0.1.1-alpha.16", | ||
| "version": "0.1.1-alpha.17", | ||
| "description": "An alert component", | ||
@@ -25,7 +25,7 @@ "bugs": "https://github.com/Gemeente-DenHaag/denhaag-component-library/issues", | ||
| "dependencies": { | ||
| "@gemeente-denhaag/baseprops": "^0.2.3-alpha.46", | ||
| "@gemeente-denhaag/button": "^0.2.3-alpha.46", | ||
| "@gemeente-denhaag/iconbutton": "^0.2.3-alpha.46", | ||
| "@gemeente-denhaag/icons": "^0.2.3-alpha.46", | ||
| "@gemeente-denhaag/typography": "^0.2.3-alpha.46" | ||
| "@gemeente-denhaag/baseprops": "^0.2.3-alpha.47", | ||
| "@gemeente-denhaag/button": "^0.2.3-alpha.47", | ||
| "@gemeente-denhaag/iconbutton": "^0.2.3-alpha.47", | ||
| "@gemeente-denhaag/icons": "^0.2.3-alpha.47", | ||
| "@gemeente-denhaag/typography": "^0.2.3-alpha.47" | ||
| }, | ||
@@ -35,3 +35,3 @@ "peerDependencies": { | ||
| }, | ||
| "gitHead": "0eeb4b12b229ca543fbbb9011acbd779b607cf7a" | ||
| "gitHead": "430bf8268c4b0b19ff884ad483787aae8dd4979d" | ||
| } |
@@ -20,2 +20,3 @@ # Alerts | ||
| ## Anatomy | ||
| The alert consists of: | ||
@@ -27,7 +28,9 @@ | ||
| 4. Text: provides additional details and actionable steps the user can take. | ||
| 6. Button (optional): button that allows users to perform an action that pertains to the notification or navigate to a page with more details. | ||
| 5. Container | ||
| 5. Button (optional): button that allows users to perform an action that pertains to the notification or navigate to a page with more details. | ||
| 6. Container | ||
| ## Design properties | ||
| **Typography** | ||
| - Title: TheSans/lg/400 | ||
@@ -48,2 +51,3 @@ - Text: TheSans/md/400 | ||
| **Structure** | ||
| - Support icon: height and width 24px, padding-top and padding-right 24px, margin-left 24px | ||
@@ -56,2 +60,3 @@ - Title: margin-top 24px | ||
| ## Accessibility | ||
| - Alerts use a combination of icons and colors to show their meaning and importance. | ||
@@ -62,6 +67,6 @@ - [technical accessibility requirements] | ||
| *Error alerts* | ||
| _Error alerts_ | ||
| If users submit long or complex forms with errors, use an error alert to summarize what went wrong. Place the alert at the top of the form and move the focus to the banner when the form is submitted. This will allow all users to scroll through the form in a logical order to resolve the issues. | ||
| *Inline errors* | ||
| _Inline errors_ | ||
| Always include inline error messages for specific form fields so that users know what to do in context while correcting their errors. | ||
@@ -90,12 +95,12 @@ | ||
| ## Best practices | ||
| ### Do's | ||
| Alerts should: | ||
| - Put in the right context: | ||
| - Alerts relevant to an entire page should be placed at the top of that page, below the page header. They should occupy the full width of the content area. | ||
| - Alerts pertaining to a section of a page (such as a map, popover, or modal) should be placed in that section, under a section heading. These banners have less spacing and a simple design to fit a content context. | ||
| - Alerts pertaining to an element that is more specific than a section should be placed directly above or below that element. | ||
| - Alerts relevant to an entire page should be placed at the top of that page, below the page header. They should occupy the full width of the content area. | ||
| - Alerts pertaining to a section of a page (such as a map, popover, or modal) should be placed in that section, under a section heading. These banners have less spacing and a simple design to fit a content context. | ||
| - Alerts pertaining to an element that is more specific than a section should be placed directly above or below that element. | ||
| - Focus on one theme, piece of information, or required action. | ||
@@ -109,2 +114,3 @@ - Admissible unless they contain critical information or are an important step that users need to take. | ||
| ### Don'ts | ||
| Alerts should: | ||
@@ -118,6 +124,4 @@ | ||
| ## Pattern | ||
| **Notification status** | ||
@@ -127,2 +131,3 @@ Notification status helps convey the information being communicated. These statuses correspond with a color and icon to provide a consistent, universal experience for users. | ||
| **Usage** | ||
| - Error: Inform users of an error or critical failure and optionally block the user from proceeding until the issue has been resolved | ||
@@ -132,2 +137,1 @@ - Info: Provide additional information to users that may not be tied to their current action or task | ||
| - Warning: Inform users that they are taking actions that are not desirable or might have unexpected results | ||
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
89620
- Number of lines in readme file
- increased by3.23%
128