feat(breadcrumb): add the breadcrumb component

__snapshots__/Breadcrumb-item.md

@@ -0,0 +1,16 @@
+# `Breadcrumb-item`
+
+#### `should internal contents`
+
+```html
+<div
+  class="breadcrumb-item control"
+  part="listitem"
+  roll="listitem"
+>
+  <vwc-icon type="chevron-right-line">
+  </vwc-icon>
+</div>
+
+```
+

__snapshots__/Breadcrumb.md

@@ -0,0 +1,16 @@
+# `Breadcrumb`
+
+#### `should internal contents`
+
+```html
+<div
+  class="list"
+  part="list"
+  role="list"
+>
+  <slot>
+  </slot>
+</div>
+
+```
+

__snapshots__/snackbar.md

@@ -156,6 +156,7 @@
     </div>
   </div>
 </div>
+
 ```
 
 #### `should have internal contents (header) - flavor = 'legacy'`
@@ -180,6 +181,7 @@
     </div>
   </div>
 </div>
+
 ```
 
 #### `should have internal contents (message) - flavor = 'legacy'`
@@ -198,6 +200,7 @@
     </div>
   </div>
 </div>
+
 ```
 
 #### `should have internal contents (icon) - flavor = 'legacy'`
@@ -221,6 +224,7 @@
     </div>
   </div>
 </div>
+
 ```
 
 #### `should have internal contents (dismissible) - flavor = 'legacy'`
@@ -248,6 +252,7 @@
     </div>
   </div>
 </div>
+
 ```
 
 #### `should have internal contents (slotted action) - flavor = 'legacy'`
@@ -266,5 +271,6 @@
     </div>
   </div>
 </div>
+
 ```
 

common/umbrella/tools/style-modules/index.js

@@ -10,20 +10,22 @@ const
 
 const DEFAULT_PATH = "./src/**/";
 const DEFAULT_SOURCE = "*.s[ac]ss";
+const DEFAULT_CSS_LIB = 'lit-element';
 
 const {
 	path: basePath = DEFAULT_PATH,
-	source: sourcePattern = DEFAULT_SOURCE
+	source: sourcePattern = DEFAULT_SOURCE,
+	cssLib: cssLib = DEFAULT_CSS_LIB
 } = parseArgs(process.argv.slice(2));
 
 console.time('Total');
 
 const
 	fileStreamFromGlob = (path)=> kefir.fromNodeCallback(fp.partial(glob, [path])).flatten(),
 	tsTemplate = (css)=> [
-		"// autogenerated module",
-		"import {css} from 'lit-element';",
-		["export const style = css`", css, "`;"].join('')
+		'// autogenerated module',
+		`import {css} from '${cssLib}';`,
+		['export const style = css`', css, '`;'].join('')
 	].join('\n'),
 	prefixWith = (path)=> (pre)=> joinPath(...[getDir(path), [pre, getBase(path)].join('')]),
 	suffixWith = (path)=> (suf)=> joinPath(...[getDir(path), [getBase(path), suf].filter(Boolean).join('.')]);

components/breadcrumb-item/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "@vonage/vwc-breadcrumb-item",
+	"version": "2.28.2",
+	"description": "breadcrumb-item component",
+	"homepage": "https://github.com/Vonage/vivid/tree/master/components/breadcrumb-item#readme",
+	"license": "ISC",
+	"main": "vwc-breadcrumb-item.js",
+	"module": "vwc-breadcrumb-item.js",
+	"files": [
+		"*.js",
+		"*.ts",
+		"*.map"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/vonage/vivid.git",
+		"directory": "components/breadcrumb-item"
+	},
+	"scripts": {
+		"build:typescript": "tsc -b",
+		"build:styles": "umbrella-style-modules --cssLib '@microsoft/fast-element'",
+		"build": "yarn run build:styles && yarn run build:typescript"
+	},
+	"bugs": {
+		"url": "https://github.com/Vonage/vivid/issues"
+	},
+	"dependencies": {
+		"@microsoft/fast-element": "^1.10.1",
+		"@microsoft/fast-foundation": "^2.46.2",
+		"tslib": "^2.3.0"
+	},
+	"devDependencies": {
+		"@vonage/vvd-design-tokens": "2.29.0",
+		"@vonage/vvd-typography": "2.29.0",
+		"@vonage/vvd-umbrella": "2.29.0",
+		"typescript": "^4.3.2"
+	}
+}

components/breadcrumb-item/readme.md

@@ -0,0 +1,15 @@
+# vwc-breadcrumb-item
+
+Add a description of vwc-breadcrumb-item.
+
+## Properties
+
+| Property                  | Type                                      |
+|---------------------------|-------------------------------------------|
+| `prop         `           | `propType`                                |
+
+## Methods
+
+| Method  | Type       |
+|---------|------------|
+| `method`| `(): void` |

components/breadcrumb-item/src/text-anchor.template.ts

@@ -0,0 +1,49 @@
+import { html } from '@microsoft/fast-element';
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
+import { classNames } from '@microsoft/fast-web-utilities';
+
+const getClasses = () => classNames(
+	'control',
+);
+
+export const textAnchorTemplate: (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => ViewTemplate<any> = () => html`<a
+        class="${getClasses}"
+        download="${x => x.download}"
+        href="${x => x.href}"
+        hreflang="${x => x.hreflang}"
+        ping="${x => x.ping}"
+        referrerpolicy="${x => x.referrerpolicy}"
+        rel="${x => x.rel}"
+        target="${x => x.target}"
+        type="${x => x.type}"
+        aria-atomic="${x => x.ariaAtomic}"
+        aria-busy="${x => x.ariaBusy}"
+        aria-controls="${x => x.ariaControls}"
+        aria-current="${x => x.ariaCurrent}"
+        aria-describedby="${x => x.ariaDescribedby}"
+        aria-details="${x => x.ariaDetails}"
+        aria-disabled="${x => x.ariaDisabled}"
+        aria-errormessage="${x => x.ariaErrormessage}"
+        aria-expanded="${x => x.ariaExpanded}"
+        aria-flowto="${x => x.ariaFlowto}"
+        aria-haspopup="${x => x.ariaHaspopup}"
+        aria-hidden="${x => x.ariaHidden}"
+        aria-invalid="${x => x.ariaInvalid}"
+        aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+        aria-label="${x => x.ariaLabel}"
+        aria-labelledby="${x => x.ariaLabelledby}"
+        aria-live="${x => x.ariaLive}"
+        aria-owns="${x => x.ariaOwns}"
+        aria-relevant="${x => x.ariaRelevant}"
+        aria-roledescription="${x => x.ariaRoledescription}"
+    >
+      ${x => x.text}
+    </a>
+`;

components/breadcrumb-item/src/vwc-breadcrumb-item.scss

@@ -0,0 +1,27 @@
+@use '@vonage/vvd-typography/scss/typography' as typography;
+@use '@vonage/vvd-design-tokens/build/scss/semantic-variables/scheme-variables' as theme-consts;
+
+.breadcrumb-item {
+	--icon-size: 12px;
+	@include typography.typography-cat-shorthand('body-2');
+
+	display: flex;
+	align-items: center;
+	color: var(#{theme-consts.$vvd-color-on-canvas});
+
+	a {
+		color: var(--vvd-color-cta-70);
+		font: inherit;
+		text-decoration: none;
+	}
+
+	a:hover {
+		text-decoration: underline;
+	}
+
+	vwc-icon {
+		margin: 0 16px;
+		color: var(#{theme-consts.$vvd-color-neutral-70});
+		font-size: 12px;
+	}
+}

components/breadcrumb-item/src/vwc-breadcrumb-item.template.ts

@@ -0,0 +1,37 @@
+import {html, when} from '@microsoft/fast-element';
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type {
+	ElementDefinitionContext,
+	FoundationElementDefinition,
+} from '@microsoft/fast-foundation';
+import { classNames } from '@microsoft/fast-web-utilities';
+import {textAnchorTemplate} from './text-anchor.template.js';
+import type { BreadcrumbItem } from './vwc-breadcrumb-item.js';
+
+const getClasses = (_: BreadcrumbItem) =>
+	classNames(
+		'control', 'breadcrumb-item'
+	);
+
+/**
+ * The template for the {@link @microsoft/fast-foundation#BreadcrumbItem} component.
+ *
+ * @param context
+ * @param definition
+ * @public
+ */
+export const BreadcrumbItemTemplate: (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => ViewTemplate<BreadcrumbItem> =
+	(context: ElementDefinitionContext, definition: FoundationElementDefinition) => html`
+      <div roll="listitem" part="listitem" class="${getClasses}">
+        ${when(x => x.text && !x.href,
+		html<BreadcrumbItem>`${x => x.text}`)}
+
+  ${when(x => x.text && x.href && x.href.length > 0,
+		html<BreadcrumbItem>`${textAnchorTemplate(context, definition)}`)}
+
+        ${when(x => x.separator,
+		html<BreadcrumbItem>`<vwc-icon type="chevron-right-solid"></vwc-icon>`)}
+      </div>`;

components/breadcrumb-item/src/vwc-breadcrumb-item.ts

@@ -0,0 +1,27 @@
+
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+import { DesignSystem, BreadcrumbItem as FastBreadcrumbItem } from '@microsoft/fast-foundation';
+import { attr } from '@microsoft/fast-element';
+import {BreadcrumbItemTemplate as template} from './vwc-breadcrumb-item.template.js';
+import { style as styles } from './vwc-breadcrumb-item.css.js';
+
+/**
+ * Base class for breadcrumb-item
+ *
+ * @public
+ */
+export class BreadcrumbItem extends FastBreadcrumbItem {
+	@attr	text?: string;
+
+	constructor() {
+		super();
+	}
+}
+
+export const vividBreadcrumbItem = BreadcrumbItem.compose<FoundationElementDefinition>({
+	baseName: 'breadcrumb-item',
+	template: template as any,
+	styles,
+});
+
+DesignSystem.getOrCreate().withPrefix('vwc').register(vividBreadcrumbItem());

components/breadcrumb-item/test/breadcrumb-item.test.js

@@ -0,0 +1,21 @@
+import '../vwc-breadcrumb-item.js';
+import {
+	waitNextTask,
+	textToDomToParent,
+	isolatedElementsCreation
+} from '../../../test/test-helpers.js';
+import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
+
+chai.use(chaiDomDiff);
+
+const COMPONENT_NAME = 'vwc-breadcrumb-item';
+
+describe('Breadcrumb-item', () => {
+	let addElement = isolatedElementsCreation();
+
+	it(`${COMPONENT_NAME} is defined as a custom element`, async () => {
+		assert.exists(
+			customElements.get(COMPONENT_NAME)
+		);
+	});
+});

components/breadcrumb-item/tsconfig.json

@@ -0,0 +1,16 @@
+{
+	"extends": "@vonage/vvd-umbrella/configs/tsconfig.json",
+	"compilerOptions": {
+		"module": "ESNext",
+		"composite": true,
+		"rootDir": "src",
+		"outDir": ".",
+		"tsBuildInfoFile": ".tsbuildinfo"
+	},
+	"include": [
+		"src/*.ts"
+	],
+	"exclude": [
+		"src/test/*.ts"
+	]
+}

components/breadcrumb/package.json

@@ -0,0 +1,38 @@
+{
+	"name": "@vonage/vwc-breadcrumb",
+	"version": "2.28.2",
+	"description": "breadcrumb component",
+	"homepage": "https://github.com/Vonage/vivid/tree/master/components/breadcrumb#readme",
+	"license": "ISC",
+	"main": "vwc-breadcrumb.js",
+	"module": "vwc-breadcrumb.js",
+	"files": [
+		"*.js",
+		"*.ts",
+		"*.map"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/vonage/vivid.git",
+		"directory": "components/breadcrumb"
+	},
+	"scripts": {
+		"build:typescript": "tsc -b",
+		"build:styles": "umbrella-style-modules",
+		"build": "yarn run build:styles && yarn run build:typescript"
+	},
+	"bugs": {
+		"url": "https://github.com/Vonage/vivid/issues"
+	},
+	"dependencies": {
+		"@microsoft/fast-element": "^1.10.1",
+		"@microsoft/fast-foundation": "^2.46.2",
+		"@vonage/vvd-core": "2.29.0",
+		"@vonage/vwc-icon": "2.29.0",
+		"tslib": "^2.3.0"
+	},
+	"devDependencies": {
+		"@vonage/vvd-umbrella": "2.29.0",
+		"typescript": "^4.3.2"
+	}
+}