Handle significant whitespace

Vonage · Mar 6, 2024 · b9953d9 · b9953d9
1 parent 41a5f1c
commit b9953d9
Show file tree

Hide file tree

Showing 28 changed files with 367 additions and 305 deletions.
diff --git a/docs/design/customization.md b/docs/design/customization.md
@@ -241,18 +241,16 @@ Click on "Edit code" to be able to modify the variables.
 		text="1st level item"
 		onclick="onClick(event)"
 	></vwc-nav-item>
-	<vwc-nav>
-		<script>
-			function onClick(event) {
-				currentNavItem = document.querySelector(
-					'vwc-nav-item[aria-current="page"]'
-				);
-				currentNavItem?.removeAttribute('aria-current');
-				event.currentTarget.setAttribute('aria-current', 'page');
-			}
-		</script></vwc-nav
-	></vwc-nav
->
+</vwc-nav>
+<script>
+	function onClick(event) {
+		currentNavItem = document.querySelector(
+			'vwc-nav-item[aria-current="page"]'
+		);
+		currentNavItem?.removeAttribute('aria-current');
+		event.currentTarget.setAttribute('aria-current', 'page');
+	}
+</script>
 ```
 
 ### Nav Disclosure
@@ -262,8 +260,8 @@ Click on "Edit code" to be able to modify the variables.
 	<vwc-nav-disclosure label="1st level item">
 		<vwc-nav-item href="#" text="2nd level item"></vwc-nav-item>
 	</vwc-nav-disclosure>
-	<vwc-nav></vwc-nav
-></vwc-nav>
+	<vwc-nav></vwc-nav>
+</vwc-nav>
 ```
 
 ### Nav Item

diff --git a/docs/design/typography.md b/docs/design/typography.md
@@ -75,8 +75,14 @@ All headings and `p` elements also receive a `margin-block`. Use the `tight` cla
 	<figcaption>figcaption text</figcaption>
 	<figcaption><b>figcaption + bold text</b></figcaption>
 	<figcaption><strong>figcaption + strong text</strong></figcaption>
-	<p>text with <sub>sub text</sub></p>
-	<p>text with <sup>sup text</sup></p>
+	<p>
+		text with
+		<sub>sub text</sub>
+	</p>
+	<p>
+		text with
+		<sup>sup text</sup>
+	</p>
 </div>
 ```
 
@@ -122,7 +128,7 @@ Note that when using the [core typography](/guides/styles/#core-typography) styl
 	}
 </style>
 
-<vwc-header> This header's title is 30% larger </vwc-header>
+<vwc-header>This header's title is 30% larger</vwc-header>
 
 <pre>
 /*

diff --git a/docs/getting-started/web-components.md b/docs/getting-started/web-components.md
@@ -173,11 +173,8 @@ The following snippet fully renders a Vivid Button component:
 
 ```html
 <!-- import Montserrat & Roboto-Mono fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com" /><link
-	rel="preconnect"
-	href="https://fonts.gstatic.com"
-	crossorigin
-/>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 <link
 	href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap"
 	rel="stylesheet"

diff --git a/libs/components/src/lib/avatar/README.md b/libs/components/src/lib/avatar/README.md
@@ -77,7 +77,8 @@ Use the `shape` attribute to change the avatar's edges.
 - Default: `'rounded'`
 
 ```html preview
-<vwc-avatar shape="rounded"></vwc-avatar> <vwc-avatar shape="pill"></vwc-avatar>
+<vwc-avatar shape="rounded"></vwc-avatar>
+<vwc-avatar shape="pill"></vwc-avatar>
 ```
 
 ### Size

diff --git a/libs/components/src/lib/button/README.md b/libs/components/src/lib/button/README.md
@@ -346,8 +346,7 @@ The assistive technology will read the `aria-label` text rather than the `title`
 	shape="pill"
 	icon="microphone-solid"
 	aria-label="Mute"
->
-</vwc-button>
+></vwc-button>
 
 <script>
 	document.getElementById('button').addEventListener('click', () => {
@@ -372,6 +371,5 @@ The assistive technology will read the `aria-label` text rather than the `title`
 	icon="message-sent-line"
 	shape="pill"
 	appearance="filled"
->
-</vwc-button>
+></vwc-button>
 ```
diff --git a/libs/components/src/lib/card/README.md b/libs/components/src/lib/card/README.md
@@ -208,8 +208,7 @@ The number of lines is controlled by the css variable `--headline-line-clamp`.
 	}
 </style>
 
-<vwc-card headline="Vivid Card Component with long headline to trim">
-</vwc-card>
+<vwc-card headline="Vivid Card Component with long headline to trim"></vwc-card>
 ```
 
 ### Trim subtitle
@@ -228,8 +227,7 @@ The number of lines is controlled by css variable `--subtitle-line-clamp`.
 <vwc-card
 	headline="Vivid Card Component"
 	subtitle="This subtitle is extremely long and will be trimmed after 2 lines. This way you can control the size of the card."
->
-</vwc-card>
+></vwc-card>
 ```
 
 ## Use case

diff --git a/libs/components/src/lib/checkbox/README.md b/libs/components/src/lib/checkbox/README.md
@@ -159,9 +159,9 @@ The default slot allows you to use rich content as the checkbox's label.
 ```html preview
 <vwc-checkbox error-text="You need to accept the Terms of service">
 	I agree to
-	<a href="https://www.vonage.com/legal/" target="_blank"
-		>Vonage Terms of Service</a
-	>
+	<a href="https://www.vonage.com/legal/" target="_blank">
+		Vonage Terms of Service
+	</a>
 </vwc-checkbox>
 ```
 

diff --git a/libs/components/src/lib/data-grid/README.md b/libs/components/src/lib/data-grid/README.md
@@ -321,7 +321,8 @@ The index of the column that will be focused the next time the grid is focused i
 
 ```html preview
 <div>Column Index (starts from 0)</div>
-<vwc-number-field id="col-number"></vwc-number-field><br />
+<vwc-number-field id="col-number"></vwc-number-field>
+<br />
 <vwc-button
 	appearance="filled"
 	connotation="cta"
@@ -400,7 +401,7 @@ The grid also adds the `aria-selected` attribute to the row when it is selected
 		<vwc-data-grid-cell cell-type="columnheader" role="columnheader">
 			data1
 		</vwc-data-grid-cell>
-		<vwc-data-grid-cell cell-type="columnheader"> data2 </vwc-data-grid-cell>
+		<vwc-data-grid-cell cell-type="columnheader">data2</vwc-data-grid-cell>
 	</vwc-data-grid-row>
 	<vwc-data-grid-row aria-selected="true">
 		<vwc-data-grid-cell>Cell 1</vwc-data-grid-cell>
@@ -438,18 +439,18 @@ For more information regarding `aria-sort` you can reference [the W3C spec](http
 ```html preview
 <vwc-data-grid>
 	<vwc-data-grid-row role="row">
-		<vwc-data-grid-cell cell-type="columnheader" aria-sort="ascending"
-			>ascending</vwc-data-grid-cell
-		>
-		<vwc-data-grid-cell cell-type="columnheader" aria-sort="descending"
-			>descending</vwc-data-grid-cell
-		>
-		<vwc-data-grid-cell cell-type="columnheader" aria-sort="none"
-			>none</vwc-data-grid-cell
-		>
-		<vwc-data-grid-cell cell-type="columnheader" aria-sort="other"
-			>other</vwc-data-grid-cell
-		>
+		<vwc-data-grid-cell cell-type="columnheader" aria-sort="ascending">
+			ascending
+		</vwc-data-grid-cell>
+		<vwc-data-grid-cell cell-type="columnheader" aria-sort="descending">
+			descending
+		</vwc-data-grid-cell>
+		<vwc-data-grid-cell cell-type="columnheader" aria-sort="none">
+			none
+		</vwc-data-grid-cell>
+		<vwc-data-grid-cell cell-type="columnheader" aria-sort="other">
+			other
+		</vwc-data-grid-cell>
 	</vwc-data-grid-row>
 </vwc-data-grid>
 ```
@@ -465,9 +466,9 @@ The grid also adds the `aria-selected` attribute to the cell when it is selected
 	<vwc-data-grid-row>
 		<vwc-data-grid-cell aria-selected="true">Cell 1</vwc-data-grid-cell>
 		<vwc-data-grid-cell aria-selected="false">Cell 2</vwc-data-grid-cell>
-		<vwc-data-grid-cell
-			>Cell 3 with long text, all cells has ellipsis</vwc-data-grid-cell
-		>
+		<vwc-data-grid-cell>
+			Cell 3 with long text, all cells has ellipsis
+		</vwc-data-grid-cell>
 	</vwc-data-grid-row>
 </vwc-data-grid>
 ```
@@ -638,7 +639,7 @@ In order for the select popup to show correctly in the grid, use the `fixed-drop
 		<vwc-data-grid-cell cell-type="columnheader" role="columnheader">
 			data1
 		</vwc-data-grid-cell>
-		<vwc-data-grid-cell cell-type="columnheader"> data2 </vwc-data-grid-cell>
+		<vwc-data-grid-cell cell-type="columnheader">data2</vwc-data-grid-cell>
 	</vwc-data-grid-row>
 	<vwc-data-grid-row>
 		<vwc-data-grid-cell>
@@ -808,11 +809,11 @@ If you cell contains multiple focusable elements or elements that require arrow
 ```html preview
 <vwc-data-grid>
 	<vwc-data-grid-row row-type="header">
-		<vwc-data-grid-cell cell-type="columnheader"> Column 1 </vwc-data-grid-cell>
-		<vwc-data-grid-cell cell-type="columnheader"> Column 2 </vwc-data-grid-cell>
+		<vwc-data-grid-cell cell-type="columnheader">Column 1</vwc-data-grid-cell>
+		<vwc-data-grid-cell cell-type="columnheader">Column 2</vwc-data-grid-cell>
 	</vwc-data-grid-row>
 	<vwc-data-grid-row>
-		<vwc-data-grid-cell> Cell 1.1 </vwc-data-grid-cell>
+		<vwc-data-grid-cell>Cell 1.1</vwc-data-grid-cell>
 		<vwc-data-grid-cell id="single-action">
 			<vwc-button
 				appearance="outlined"
@@ -822,7 +823,7 @@ If you cell contains multiple focusable elements or elements that require arrow
 		</vwc-data-grid-cell>
 	</vwc-data-grid-row>
 	<vwc-data-grid-row>
-		<vwc-data-grid-cell> Cell 2.1 </vwc-data-grid-cell>
+		<vwc-data-grid-cell>Cell 2.1</vwc-data-grid-cell>
 		<vwc-data-grid-cell id="multiple-actions">
 			<vwc-button
 				appearance="outlined"

diff --git a/libs/components/src/lib/date-range-picker/README.md b/libs/components/src/lib/date-range-picker/README.md
@@ -150,8 +150,7 @@ Set the `max` attribute to configure the latest date to accept. The user will be
 	max="2023-06-20"
 	start="2023-06-10"
 	end="2023-06-15"
->
-</vwc-date-range-picker>
+></vwc-date-range-picker>
 ```
 
 ## Events

diff --git a/libs/components/src/lib/dialog/README.md b/libs/components/src/lib/dialog/README.md
@@ -153,7 +153,10 @@ Use `returnValue` to get or set the return value. Often used to indicate which b
 		label="Action"
 	></vwc-button>
 </vwc-dialog>
-<div>Returned Value: <span id="dialog-output"></span></div>
+<div>
+	Returned Value:
+	<span id="dialog-output"></span>
+</div>
 <vwc-button label="Open Dialog" onclick="openDialog()"></vwc-button>
 <script>
 	(function handleReturnValue() {
@@ -265,8 +268,8 @@ To remove the body inline padding use `full-width-body`.
 						placeholder="Search for an agent"
 						icon="search-line"
 					></vwc-text-field>
-					<vwc-text-area label="Additional Note (Optional)"></vwc-text-area
-				></vwc-layout>
+					<vwc-text-area label="Additional Note (Optional)"></vwc-text-area>
+				</vwc-layout>
 			</form>
 		</vwc-layout>
 	</div>

diff --git a/libs/components/src/lib/empty-state/README.md b/libs/components/src/lib/empty-state/README.md
@@ -49,7 +49,7 @@ Use the `icon` attribute to set the icon of the empty state.
 Use the default slot to set the content of the empty state.
 
 ```html preview
-<vwc-empty-state> No results match your search criteria. </vwc-empty-state>
+<vwc-empty-state>No results match your search criteria.</vwc-empty-state>
 ```
 
 ### Graphic

diff --git a/libs/components/src/lib/fab/README.md b/libs/components/src/lib/fab/README.md
@@ -88,8 +88,8 @@ If set, the `icon` attribute is ignored.
 
 ```html preview
 <vwc-fab icon="thumbs-up-line" size="normal" label="ask-vivid">
-	<vwc-icon slot="icon"
-		><svg
+	<vwc-icon slot="icon">
+		<svg
 			xmlns="http://www.w3.org/2000/svg"
 			xmlns:cc="http://creativecommons.org/ns#"
 			xmlns:dc="http://purl.org/dc/elements/1.1/"
@@ -219,7 +219,8 @@ If set, the `icon` attribute is ignored.
 					<stop stop-color="#fff" offset="0" />
 					<stop stop-color="#fff" stop-opacity="0" offset="1" />
 				</linearGradient>
-			</defs></svg
-	></vwc-icon>
+			</defs>
+		</svg>
+	</vwc-icon>
 </vwc-fab>
 ```