feat(breadcrumb): add the breadcrumb component (#1260)

__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"
+ }
+}