Merge branch 'main' into VIV-2118-numberfield-docs

Vonage · Dec 1, 2024 · 1d4c0ed · 1d4c0ed
2 parents 3eeb188 + 02a22cd
commit 1d4c0ed
Show file tree

Hide file tree

Showing 61 changed files with 1,821 additions and 408 deletions.
diff --git a/.whitesource b/.whitesource
@@ -0,0 +1,3 @@
+{
+  "settingsInheritedFrom": "Vonage/whitesource-config@main"
+}
diff --git a/apps/docs/assets/scripts/components/do-dont.ts b/apps/docs/assets/scripts/components/do-dont.ts
@@ -56,15 +56,15 @@ import {
 			}
 		}
 	`,
-	template: html<DocsDo>`
+	template: html<DocsDoDont>`
 		<div class="description">
 			<h3>${(x) => x.headline}</h3>
 			<slot name="description"></slot>
 		</div>
 		<div class="examples"><slot></slot></div>
 	`,
 })
-export class DocsDo extends FASTElement {
+export class DocsDoDont extends FASTElement {
 	@attr headline = '';
 	@attr({
 		mode: 'boolean',

diff --git a/apps/docs/code-example-preview/createCodeExample.js b/apps/docs/code-example-preview/createCodeExample.js
@@ -100,7 +100,7 @@ const createiFrameContent = (code, classList, index) => {
 		numberWithPx = match ? match[0] : 'auto';
 	}
 	const document = `<!DOCTYPE html>
-		 <html class="vvd-root" lang="en-US" style="block-size: ${numberWithPx};">
+		 <html class="vvd-root vvd-scrollbar" lang="en-US" style="block-size: ${numberWithPx};">
 			<head>
 				${IFRAME_STYLE}
 				${IFRAME_INLINE_STYLE}

diff --git a/apps/docs/content/_data/components.json b/apps/docs/content/_data/components.json
@@ -26,8 +26,13 @@
 	},
 	{
 		"title": "Alert",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/alert/README.md"
+		"description": "Alerts display short-lived important information to the user, usually at the top or bottom of the screen.",
+		"variations": "./libs/components/src/lib/alert/VARIATIONS.md",
+		"guidelines": "./libs/components/src/lib/alert/GUIDELINES.md",
+		"hideGuidelines": "true",
+		"code": "./libs/components/src/lib/alert/README.md",
+		"accessibility": "./libs/components/src/lib/alert/ACCESSIBILITY.md",
+		"useCases": "./libs/components/src/lib/alert/USE-CASES.md"
 	},
 	{
 		"title": "Breadcrumb",

diff --git a/apps/docs/content/_layouts/base.njk b/apps/docs/content/_layouts/base.njk
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="vvd-root">
+<html lang="en" class="vvd-root vvd-scrollbar">
   <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">

diff --git a/apps/docs/content/guides/styles.md b/apps/docs/content/guides/styles.md
@@ -73,6 +73,10 @@ The tokens will be scoped to the `vvd-root` class selector.
 
 The core theme styles will apply the appropriate `color`, `background-color` and `color-scheme` for the chosen theme to the `vvd-root` class selector.
 
+#### Scrollbar
+
+Vivid component has a custom scrollbar. It can be added to the entire app/page by adding the class `vvd-scrollbar` to `:root.`
+
 ### Core Typography
 
 **Stylesheet:**

diff --git a/libs/components/src/lib/alert/ACCESSIBILITY.md b/libs/components/src/lib/alert/ACCESSIBILITY.md
@@ -0,0 +1,8 @@
+## Implementation
+
+Use the `timeoutms` attribute with care. Users with disabilities may need more time to read the content. If the Alert contains interactive elements, such as links or buttons, you should avoid using `timeoutms`. See also [WCAG SC 2.2.3 No Timing](https://www.w3.org/WAI/WCAG22/Understanding/no-timing).
+
+## Resources
+
+- [Alert: Manual accessibility test](https://docs.google.com/spreadsheets/d/1Jo0Vn2V-A2K_NKSBwE78-Pn-P_l7VDzQwZ0rD1CNo-0/edit?gid=1175911860#gid=1175911860)
+- [ARIA APG Alert Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/)
diff --git a/libs/components/src/lib/alert/GUIDELINES.md b/libs/components/src/lib/alert/GUIDELINES.md
@@ -0,0 +1,33 @@
+## When to Use
+
+Use Alerts to display short-lived messages in response to user actions. Alerts may inform users that:
+
+- A process was initiated
+- An action was successful
+- An action requires attention
+- An action failed
+
+## Closing Alerts
+
+<docs-do-dont>
+<docs-do slot="description" headline="Provide the close button" caption="The close button allows users to dismiss the Alert to access content behind it.">
+
+```html preview example 100px
+<vwc-alert
+	connotation="success"
+	text="Data saved successfully."
+	open
+	removable
+></vwc-alert>
+```
+
+</docs-do>
+
+<docs-do dont headline="Don't automatically close interactive Alerts" caption="Users with disabilities may need more time to interact with the Alert.">
+</docs-do>
+</docs-do-dont>
+
+## Related Components
+
+- [Note](/components/note/)
+- [Banner](/components/banner/)