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>
+
+```
+

components/breadcrumb-item/package.json

@@ -0,0 +1,36 @@
+{
+ "name": "@vonage/vwc-breadcrumb-item",
+ "version": "2.26.0",
+ "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",
+ "build": "yarn run build:styles && yarn run build:typescript"
+ },
+ "bugs": {
+ "url": "https://github.com/Vonage/vivid/issues"
+ },
+ "dependencies": {
+ "@vonage/vvd-foundation": "^2.26.0",
+ "lit-element": "^2.4.0",
+ "tslib": "^2.3.0"
+ },
+ "devDependencies": {
+ "@vonage/vvd-umbrella": "2.26.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/vwc-breadcrumb-item.ts

@@ -0,0 +1 @@
+import '@vonage/vivid/breadcrumb-item/index.js';

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

@@ -0,0 +1,30 @@
+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)
+ );
+ });
+
+ it('should internal contents', async () => {
+ const addedElements = addElement(
+ textToDomToParent(`<${COMPONENT_NAME}>Button Text</${COMPONENT_NAME}>`)
+ );
+ const actualElement = addedElements[0];
+ await waitNextTask();
+ expect(actualElement.shadowRoot.innerHTML).to.equalSnapshot();
+ });
+});

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,37 @@
+{
+ "name": "@vonage/vwc-breadcrumb",
+ "version": "2.26.0",
+ "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": {
+ "@vonage/vivid": "^3.0.0-next.2",
+ "@vonage/vvd-foundation": "^2.26.0",
+ "lit-element": "^2.4.0",
+ "tslib": "^2.3.0"
+ },
+ "devDependencies": {
+ "@vonage/vvd-umbrella": "2.26.0",
+ "typescript": "^4.3.2"
+ }
+}

components/breadcrumb/readme.md

@@ -0,0 +1,39 @@
+# breadcrumb
+
+In order to use `breadcrumb` you'll need to import both `breadcrumb` and `breadcrumb-item`:
+```js
+import '@vonage/vwc-breadcrumb-item/vwc-breadcrumb-item.js';
+import '@vonage/vwc-breadcrumb/vwc-breadcrumb.js';
+```
+
+## Common Usage
+### Code
+```html
+<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 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
+### Code
+```html
+<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>
+```
+<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>

components/breadcrumb/src/vwc-breadcrumb.ts

@@ -0,0 +1 @@
+import '@vonage/vivid/breadcrumb/index.js';

components/breadcrumb/stories/arg-types.js

@@ -0,0 +1,15 @@
+export const argTypes = {
+ connotation: {
+ control: {
+ type: 'select',
+ options: ['primary', 'cta', 'success', 'error', 'info', 'announcement'],
+ }
+ },
+ disabled: {
+ control: {
+ type: 'inline-radio',
+ options: { 'true': '', 'false': undefined }
+ }
+ },
+ styles: { table: { disable: true } },
+}

components/breadcrumb/stories/breadcrumb-introduction.config.mjs

@@ -0,0 +1,14 @@
+export default {
+ sourcePath: '../readme.md',
+ outputName: 'breadcrumb-introduction',
+ story: {
+ title: 'Alpha/Components/Breadcrumb',
+ name: 'Introduction',
+ parameters: {
+ options: {
+ showPanel: false,
+ isToolshown: false
+ }
+ }
+ }
+};

components/breadcrumb/stories/breadcrumb.stories.js

@@ -0,0 +1,21 @@
+import '@vonage/vwc-breadcrumb-item/vwc-breadcrumb-item.js';
+import '@vonage/vwc-breadcrumb/vwc-breadcrumb.js';
+import { html } from 'lit-element';
+import { spread } from '@open-wc/lit-helpers';
+import { argTypes } from './arg-types.js';
+
+export default {
+ title: 'Alpha/Components/Breadcrumb',
+ component: 'vwc-breadcrumb',
+ argTypes
+};
+
+const Template = args => html`<vwc-breadcrumb ...=${spread(args)}>
+ <vwc-breadcrumb-item text="breadcrumb" href="#"></vwc-breadcrumb-item>
+ <vwc-breadcrumb-item text="breadcrumb" href="#"></vwc-breadcrumb-item>
+ <vwc-breadcrumb-item text="breadcrumb" href="#"></vwc-breadcrumb-item>
+ <vwc-breadcrumb-item text="breadcrumb"></vwc-breadcrumb-item>
+</vwc-breadcrumb>`;
+
+export const Basic = Template.bind({});
+Basic.args = { label: 'Basic', disabled: 'false' };

components/breadcrumb/test/breadcrumb.test.js

@@ -0,0 +1,30 @@
+import '../vwc-breadcrumb.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';
+
+describe('Breadcrumb', () => {
+ let addElement = isolatedElementsCreation();
+
+ it(`${COMPONENT_NAME} is defined as a custom element`, async () => {
+ assert.exists(
+ customElements.get(COMPONENT_NAME)
+ );
+ });
+
+ it('should internal contents', async () => {
+ const addedElements = addElement(
+ textToDomToParent(`<${COMPONENT_NAME}>Button Text</${COMPONENT_NAME}>`)
+ );
+ const actualElement = addedElements[0];
+ await waitNextTask();
+ expect(actualElement.shadowRoot.innerHTML).to.equalSnapshot();
+ });
+});

components/breadcrumb/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"
+ ]
+}

ui-tests/tests/vwc-breadcrumb/index.js

@@ -0,0 +1,24 @@
+import '@vonage/vwc-breadcrumb';
+import '@vonage/vwc-breadcrumb-item';
+
+export async function createElementVariations(wrapper) {
+ const elementWrapper = document.createElement('div');
+ elementWrapper.innerHTML =
+ `
+ <vwc-breadcrumb>
+ <vwc-breadcrumb-item text="breadcrumb" href="#"></vwc-breadcrumb-item>
+ <vwc-breadcrumb-item text="breadcrumb" href="#"></vwc-breadcrumb-item>
+ <vwc-breadcrumb-item text="breadcrumb" href="#"></vwc-breadcrumb-item>
+ <vwc-breadcrumb-item text="breadcrumb"></vwc-breadcrumb-item>
+ </vwc-breadcrumb>
+
+ <vwc-breadcrumb>
+ <vwc-breadcrumb-item text="breadcrumb" href="#"></vwc-breadcrumb-item>
+ <vwc-breadcrumb-item text="..."></vwc-breadcrumb-item>
+ <vwc-breadcrumb-item text="breadcrumb" href="#"></vwc-breadcrumb-item>
+ </vwc-breadcrumb>
+ `;
+ wrapper.appendChild(elementWrapper);
+}
+
+