Merge branch 'main' into VIV-1518-module-formats

.github/workflows/pre-release.yml

@@ -0,0 +1,106 @@
+# Publishes a branch as a pre-release version to npm
+
+on:
+  workflow_dispatch:
+    inputs:
+      change_type:
+        description: 'Determines which part of the version to increment (major, minor, patch)'
+        required: true
+        default: 'minor'
+        type: choice
+        options:
+          - major
+          - minor
+          - patch
+
+      preview_version:
+        description: 'Number at the end of the version string (3.0.0-preview.X). Increment by 1 for each pre-release version.'
+        required: true
+        type: string
+        default: '0'
+
+name: pre-release
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: set-vivid-version
+        working-directory: ./libs/components
+        run: |
+          npm version ${{ github.event.inputs.change_type }} --no-git-tag-version
+          VERSION=$(node -p "require('./package.json').version")-preview.${{ github.event.inputs.preview_version }}
+          npm version $VERSION --no-git-tag-version
+
+      - name: sync-vivid-vue-version
+        working-directory: ./libs/vue-wrappers
+        run: |
+          npm version $(node -p "require('../components/package.json').version") --no-git-tag-version
+
+      - name: build
+        run: |
+          npm ci --ignore-scripts
+          npx nx run components:build
+          npx nx run components:generateMeta
+          npx nx run vue-wrappers:build
+
+      - name: upload-artifacts
+        uses: actions/upload-artifact@v3
+        with:
+          name: release-artifacts
+          path: dist/
+
+  npm-publish:
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Download Build
+        uses: actions/download-artifact@v3
+        with:
+          name: release-artifacts
+          path: dist/
+
+      - name: publish vivid npm package
+        run: npm publish --tag preview dist/libs/components --//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_VVD_VNG_AUTOMATION_TOKEN }}
+
+      - name: publish vivid-vue npm package
+        run: npm publish --tag preview dist/libs/vue-wrappers --//registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_VVD_VNG_AUTOMATION_TOKEN }}
+
+  github-publish:
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          registry-url: 'https://registry.npmjs.org'
+
+      - name: Download Build
+        uses: actions/download-artifact@v3
+        with:
+          name: release-artifacts
+          path: dist/
+
+      - name: publish vivid to github packages
+        run: npm publish --tag preview ./dist/libs/components --registry=https://npm.pkg.github.com --//npm.pkg.github.com/:_authToken=$NODE_AUTH_TOKEN
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.VNG_VVD_PAT }}
+
+      - name: publish vivid-vue to github packages
+        run: npm publish --tag preview ./dist/libs/vue-wrappers --registry=https://npm.pkg.github.com --//npm.pkg.github.com/:_authToken=$NODE_AUTH_TOKEN
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.VNG_VVD_PAT }}

.stylelintrc.json

@@ -21,6 +21,7 @@
 				"plugin/no-unsupported-browser-features": [
 					true,
 					{
+						"ignore": ["rem", "multicolumn", "css3-cursors", "css-touch-action"],
 						"severity": "warning"
 					}
 				],

apps/docs/_data/components.json

@@ -23,9 +23,17 @@
 		"title": "Alert",
 		"markdown": "./libs/components/src/lib/alert/README.md"
 	},
+	{
+		"title": "Breadcrumb",
+		"markdown": "./libs/components/src/lib/breadcrumb/README.md",
+		"children": [
+			"Breadcrumb Item"
+		]
+	},
 	{
 		"title": "Breadcrumb Item",
-		"markdown": "./libs/components/src/lib/breadcrumb-item/README.md"
+		"markdown": "./libs/components/src/lib/breadcrumb-item/README.md",
+		"parent": "Breadcrumb"
 	},
 	{
 		"title": "Button",

libs/components/src/lib/breadcrumb-item/README.md

@@ -1,21 +1,19 @@
 # Breadcrumb item
 
-Breadcrumbs helps users navigate through a website or web application by showing the current location within the hierarchy of pages,
-and by providing links to navigate back to pages higher in the hierarchy.
-
 `vwc-breadcrum-item`s should be placed inside a `vwc-breadcrumb` element.
 
 ```js
 <script type="module">
-  import '@vonage/vivid/breadcrumb';
   import '@vonage/vivid/breadcrumb-item';
 </script>
 ```
 
 ## Members
 
+
 ### Href
 
+
 Use the `href` attribute to set the breadcrumb-item's link.
 
 - Type: `string`
@@ -42,33 +40,3 @@ Use the `text` attribute to set the breadcrumb-item's text.
 		text="Breadcrumb"></vwc-breadcrumb-item>
 </vwc-breadcrumb>
 ```
-
-## Use Cases
-
-### Common Usage
-
-```html preview
-<vwc-breadcrumb>
-  <vwc-breadcrumb-item href="#" text="Breadcrumb"></vwc-breadcrumb-item>
-  <vwc-breadcrumb-item href="#" text="Breadcrumb"></vwc-breadcrumb-item>
-  <vwc-breadcrumb-item href="#" text="Breadcrumb"></vwc-breadcrumb-item>
-  <vwc-breadcrumb-item text="Breadcrumb"></vwc-breadcrumb-item>
-</vwc-breadcrumb>
-```
-
-### Multiple hidden crumbs
-
-```html preview
-<vwc-breadcrumb>
-	<vwc-breadcrumb-item
-		text="Breadcrumb"
-		href="#"></vwc-breadcrumb-item>
-
-	<vwc-breadcrumb-item
-		text="..."></vwc-breadcrumb-item>
-
-	<vwc-breadcrumb-item
-		text="Breadcrumb" ></vwc-breadcrumb-item>
-	</div>
-</vwc-breadcrumb>
-```

libs/components/src/lib/breadcrumb/README.md

@@ -0,0 +1,33 @@
+# Breadcrumb
+
+Breadcrumbs helps users navigate through a website or web application by showing the current location within the hierarchy of pages,
+and by providing links to navigate back to pages higher in the hierarchy.
+
+```js
+<script type="module">
+  import '@vonage/vivid/breadcrumb';
+</script>
+```
+
+## Use Cases
+
+### Common Usage
+
+```html preview
+<vwc-breadcrumb>
+  <vwc-breadcrumb-item href="#" text="Breadcrumb"></vwc-breadcrumb-item>
+  <vwc-breadcrumb-item href="#" text="Breadcrumb"></vwc-breadcrumb-item>
+  <vwc-breadcrumb-item href="#" text="Breadcrumb"></vwc-breadcrumb-item>
+  <vwc-breadcrumb-item text="Breadcrumb"></vwc-breadcrumb-item>
+</vwc-breadcrumb>
+```
+
+### Multiple hidden crumbs
+
+```html preview
+<vwc-breadcrumb>
+	<vwc-breadcrumb-item text="Breadcrumb" href="#"></vwc-breadcrumb-item>
+	<vwc-breadcrumb-item text="..."></vwc-breadcrumb-item>
+	<vwc-breadcrumb-item text="Breadcrumb"></vwc-breadcrumb-item>
+</vwc-breadcrumb>
+```

libs/components/src/lib/breadcrumb/ui.test.ts

@@ -1,61 +1,43 @@
+import * as path from 'path';
 import { expect, test } from '@playwright/test';
 import type { Page } from '@playwright/test';
 import {
+	extractHTMLBlocksFromReadme,
 	loadComponents,
 	loadTemplate,
 } from '../../visual-tests/visual-tests-utils.js';
 
 const components = ['breadcrumb', 'breadcrumb-item'];
 
-function runBreadcrumbsTest() {
-	return async ({page}: { page: Page }) => {
-		const template = [
-			`<vwc-breadcrumb>
-  <vwc-breadcrumb-item href="#" text="breadcrumb"></vwc-breadcrumb-item>
-  <vwc-breadcrumb-item href="#" text="breadcrumb"></vwc-breadcrumb-item>
-  <vwc-breadcrumb-item href="#" text="breadcrumb"></vwc-breadcrumb-item>
-  <vwc-breadcrumb-item text="breadcrumb"></vwc-breadcrumb-item>
-</vwc-breadcrumb>`,
-			`<vwc-breadcrumb>
-  <vwc-breadcrumb-item href="#" text="breadcrumb"></vwc-breadcrumb-item>
-  <vwc-breadcrumb-item text="..."></vwc-breadcrumb-item>
-  <vwc-breadcrumb-item href="#" text="breadcrumb"></vwc-breadcrumb-item>
-</vwc-breadcrumb>`
-		].reduce(
-			(htmlString: string, block: string) =>
-				`${htmlString} <div style="margin: 5px;">${block}</div>`,
-			''
-		);
-
-		page.setViewportSize({
-			width: 500,
-			height: 720
-		});
-
-		await loadComponents({
-			page,
-			components,
-		});
-		await loadTemplate({
-			page,
-			template,
-		});
-
-		const testWrapper = await page.$('#wrapper');
-
-		await page.waitForLoadState('networkidle');
-
-		await page.waitForSelector('vwc-breadcrumb-item:last-child');
-		await page.waitForSelector('div:nth-child(2) vwc-breadcrumb-item:last-child');
-
-		await page.evaluate(() => document.querySelector('vwc-breadcrumb-item:last-child').separator = false);
-		await page.evaluate(() => document.querySelector('div:nth-child(2) vwc-breadcrumb-item:last-child').separator = false);
-
-		expect(await testWrapper?.screenshot())
-			.toMatchSnapshot(
-				'./snapshots/breadcrumb.png'
-			);
-	};
-}
-
-test('should show the component', runBreadcrumbsTest());
+test('should show the component', async ({ page }: { page: Page }) => {
+	const template = extractHTMLBlocksFromReadme(
+		path.join(new URL('.', import.meta.url).pathname, 'README.md')
+	).reduce(
+		(htmlString: string, block: string) =>
+			`${htmlString} <div style="margin: 5px;">${block}</div>`,
+		''
+	);
+
+	page.setViewportSize({ width: 500, height: 720 });
+
+
+	await loadComponents({
+		page,
+		components,
+	});
+
+	await loadTemplate({
+		page,
+		template,
+	});
+
+	const testWrapper = await page.$('#wrapper');
+
+	await page.keyboard.press('Tab');
+
+	await page.waitForLoadState('networkidle');
+
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/breadcrumb.png'
+	);
+});

libs/components/src/lib/button/README.md

@@ -199,7 +199,7 @@ If set, the `icon` attribute is ignored.
 			}
 	}
 </style>
-<vwc-button>
+<vwc-button aria-label="Mute">
   <vwc-icon slot="icon">
   	<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
   		<g>
@@ -213,6 +213,11 @@ If set, the `icon` attribute is ignored.
 ```
 
 ## Accessibility 
+
+Add an `aria-label` or `title` attribute if the button does not have a label or the label is not descriptive enough.
+
+Icons are purely decorative and are hidden from assistive technology. Ensure that the button's purpose is still clear without the icon.
+
 When deciding between `aria-label` or `title`, keep in mind that `aria-label` is better for accessibility.  
 The assistive technology will read the `aria-label` text rather than the `title` if both are set.