reset branch

__snapshots__/accordion.md

@@ -0,0 +1,12 @@
+# `accordion`
+
+#### `should have internal contents`
+
+```html
+<div class="accordion">
+  <slot>
+  </slot>
+</div>
+
+```
+

components/accordion/CHANGELOG.md

@@ -0,0 +1,9 @@
+# [2.9.0](https://github.com/vonage/vivid/compare/v2.8.0...v2.9.0) (2021-05-24)
+
+
+### Features
+
+* **vwc-accordion:** viv-388 accordion ([#683](https://github.com/vonage/vivid/issues/683)) ([8b597ab](https://github.com/vonage/vivid/commit/8b597ab2f800b4d9c954e829b62e52d667012cee))
+
+
+

components/accordion/package.json

@@ -0,0 +1,39 @@
+{
+	"name": "@vonage/vwc-accordion",
+	"version": "2.9.0",
+	"description": "accordion component",
+	"homepage": "https://github.com/Vonage/vivid/tree/master/components/accordion#readme",
+	"license": "ISC",
+	"main": "vwc-accordion.js",
+	"module": "vwc-accordion.js",
+	"files": [
+		"src",
+		"*.js",
+		"*.ts",
+		"*.map"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/vonage/vivid.git",
+		"directory": "components/accordion"
+	},
+	"scripts": {
+		"test": "echo \"Error: run tests from root\" && exit 1",
+		"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-core": "2.9.0",
+		"@vonage/vwc-expansion-panel": "2.9.0",
+		"lit-element": "^2.4.0",
+		"tslib": "^2.0.3"
+	},
+	"devDependencies": {
+		"@vonage/vvd-umbrella": "2.9.0",
+		"typescript": "^4.1.3"
+	}
+}

components/accordion/src/vwc-accordion-base.ts

@@ -0,0 +1,47 @@
+import { LitElement, property } from 'lit-element';
+import { VWCExpansionPanelBase } from '@vonage/vwc-expansion-panel/vwc-expansion-panel-base';
+
+export abstract class VWCAccordionBase extends LitElement {
+	@property({ type: Boolean, reflect: true })
+	multi = false;
+
+	private expansionPanels: HTMLCollectionOf<VWCExpansionPanelBase> | undefined = undefined;
+
+	constructor() {
+		super();
+		this.addEventListener('opened', this.handleOpened);
+	}
+
+	connectedCallback(): void {
+		super.connectedCallback();
+		this.expansionPanels = this.children as HTMLCollectionOf<VWCExpansionPanelBase>;
+	}
+
+	handleOpened(e: Event): any {
+		if (!this.multi && this.expansionPanels) {
+			for (const expansionPanel of this.expansionPanels) {
+				if (expansionPanel !== e.target) expansionPanel.close();
+			}
+		}
+	}
+
+	getOpened(): Array<VWCExpansionPanelBase> {
+		const opened = [];
+
+		if (this.expansionPanels) {
+			for (const expansionPanel of this.expansionPanels) {
+				if (expansionPanel.open === true) opened.push(expansionPanel);
+			}
+		}
+
+		return opened;
+	}
+
+	closeAll(): void {
+		if (this.expansionPanels) {
+			for (const expansionPanel of this.expansionPanels) {
+				expansionPanel.close();
+			}
+		}
+	}
+}

components/accordion/src/vwc-accordion.scss

@@ -0,0 +1,4 @@
+:host {
+	display: flex;
+	flex-direction: column;
+}

components/accordion/src/vwc-accordion.ts

@@ -0,0 +1,27 @@
+import '@vonage/vvd-core';
+import {
+	customElement,
+	html,
+	TemplateResult
+} from 'lit-element';
+import { VWCAccordionBase } from './vwc-accordion-base.js';
+import { style } from './vwc-accordion.css.js';
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'vwc-accordion': VWCAccordion;
+	}
+}
+
+@customElement('vwc-accordion')
+export class VWCAccordion extends VWCAccordionBase {
+	static styles = style;
+
+	protected render(): TemplateResult {
+		return html`
+			<div class="accordion">
+				<slot></slot>
+			</div>
+		`;
+	}
+}

components/accordion/stories/accordion.stories.js

@@ -0,0 +1,25 @@
+import '@vonage/vwc-accordion/vwc-accordion.js';
+import '@vonage/vwc-expansion-panel/vwc-expansion-panel.js';
+import { html } from 'lit-element';
+import { spread } from '@open-wc/lit-helpers';
+import { argTypes } from './arg-types.js';
+
+export default {
+  title: 'Alpha/Components/Accordion',
+  component: 'vwc-accordion',
+  argTypes
+};
+
+const Template = args => html`
+  <vwc-accordion ...=${spread(args)}>
+    <vwc-expansion-panel header="Item 1">Content</vwc-expansion-panel>
+    <vwc-expansion-panel header="Item 2">Content</vwc-expansion-panel>
+    <vwc-expansion-panel header="Item 3">Content</vwc-expansion-panel>
+    <vwc-expansion-panel header="Item 4">Content</vwc-expansion-panel>
+  </vwc-accordion>
+`;
+
+export const Basic = Template.bind({});
+
+export const Multi = Template.bind({});
+Multi.args = { multi: '' };

components/accordion/stories/arg-types.js

@@ -0,0 +1,9 @@
+export const argTypes = {
+	multi: {
+		control: {
+			type: 'inline-radio',
+			options: { 'true': '', 'false': undefined }
+		}
+	},
+	styles: { table: { disable: true } }
+}

components/accordion/test/accordion.a11y.test.js

@@ -0,0 +1,24 @@
+import '../vwc-accordion.js';
+import {
+	isolatedElementsCreation,
+	waitNextTask,
+	textToDomToParent
+} from '../../../test/test-helpers.js';
+import { chaiA11yAxe } from 'chai-a11y-axe';
+
+chai.use(chaiA11yAxe);
+
+const COMPONENT_NAME = 'vwc-accordion';
+
+describe('accordion a11y', () => {
+	const addElement = isolatedElementsCreation();
+
+	it('should have 0 accessibility violations', async () => {
+		const [actualElement] = addElement(
+			textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
+		);
+		await waitNextTask();
+
+		await expect(actualElement).shadowDom.to.be.accessible();
+	});
+});

components/accordion/test/accordion.test.js

@@ -0,0 +1,77 @@
+import '@vonage/vwc-accordion/vwc-accordion';
+import '@vonage/vwc-expansion-panel/vwc-expansion-panel';
+import {
+	textToDomToParent,
+	waitNextTask,
+	isolatedElementsCreation,
+} from '../../../test/test-helpers.js';
+import { chaiDomDiff } from '@open-wc/semantic-dom-diff';
+
+chai.use(chaiDomDiff);
+
+const COMPONENT_NAME = 'vwc-accordion';
+
+describe('accordion', () => {
+	let addElement = isolatedElementsCreation();
+
+	it('should be defined as a custom element', () => {
+		assert.exists(
+			customElements.get(COMPONENT_NAME, 'vwc-accordion element is not defined')
+		);
+	});
+
+	it('should have internal contents', async () => {
+		const [actualElement] = addElement(
+			textToDomToParent(`
+				<${COMPONENT_NAME}></${COMPONENT_NAME}>
+			`)
+		);
+		await waitNextTask();
+		expect(actualElement.shadowRoot.innerHTML).to.equalSnapshot();
+	});
+
+	describe(`accordion visibility`, function () {
+		it('should only allow one expansion panel open at a time', async () => {
+			const [actualElement] = addElement(
+				textToDomToParent(`
+					<${COMPONENT_NAME}>
+						<vwc-expansion-panel header="panel 1" open></vwc-expansion-panel>
+						<vwc-expansion-panel header="panel 2" open></vwc-expansion-panel>
+					</${COMPONENT_NAME}>
+				`)
+			);
+			await waitNextTask();
+			const openExpansionPanels = actualElement.getOpened();
+			expect(openExpansionPanels.length).to.equal(1);
+		});
+
+		it('should have all expansion panels open when set to multi', async () => {
+			const [actualElement] = addElement(
+				textToDomToParent(`
+					<${COMPONENT_NAME} multi>
+						<vwc-expansion-panel open header="panel 1"></vwc-expansion-panel>
+						<vwc-expansion-panel open header="panel 2"></vwc-expansion-panel>
+					</${COMPONENT_NAME}>
+				`)
+			);
+			await waitNextTask();
+			const openExpansionPanels = actualElement.getOpened();
+			expect(openExpansionPanels.length).to.equal(2);
+		});
+
+		it('should have all expansion panels closed', async () => {
+			const [actualElement] = addElement(
+				textToDomToParent(`
+					<${COMPONENT_NAME}>
+						<vwc-expansion-panel header="panel 1" open></vwc-expansion-panel>
+						<vwc-expansion-panel header="panel 2"></vwc-expansion-panel>
+					</${COMPONENT_NAME}>
+				`)
+			);
+			await waitNextTask();
+			actualElement.closeAll();
+			const openExpansionPanels = actualElement.getOpened();
+			expect(openExpansionPanels.length).to.equal(0);
+		});
+	});
+});

components/accordion/tsconfig.json

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

components/list/src/vwc-list-text-parts.scss

@@ -0,0 +1,40 @@
+@use '@vonage/vvd-style-coupling/scss/vvd-formfield' as vvd-formfield;
+@use '@vonage/vvd-typography/scss/typography' as typography;
+
+:host {
+	@include vvd-formfield.coupling;
+}
+
+:host,
+:host([twoline]) {
+	.mdc-deprecated-list-item__text {
+		align-self: center;
+		margin-inline-end: 4px;
+	}
+}
+
+:host([twoline]) {
+	.mdc-deprecated-list-item__primary-text {
+		@include typography.typography-cat-shorthand('body-2-bold');
+		margin-bottom: 4px;
+
+		&::before,
+		&::after {
+			display: none;
+		}
+	}
+
+	.mdc-deprecated-list-item__secondary-text {
+		@include typography.typography-cat-shorthand('caption');
+
+		&::before {
+			display: none;
+		}
+	}
+}
+
+:host([disabled]) {
+	.mdc-deprecated-list-item__text {
+		color: var(#{vvd-formfield.$formfield-disabled-ink});
+	}
+}

components/list/test/list-items-utils.test.js

@@ -0,0 +1,26 @@
+import {
+	assertComputedStyle,
+	textToDomToParent,
+} from '../../../test/test-helpers.js';
+
+export function assertListItemDimensions(items, expectedTotal, expectedHeight) {
+	expect(items).exist;
+	expect(items.length).equal(expectedTotal);
+	for (const item of items) {
+		assertComputedStyle(item, {
+			marginTop: '0px',
+			marginLeft: '0px',
+			marginRight: '0px',
+			marginBottom: '0px',
+			height: `${expectedHeight}px`
+		});
+	}
+}
+
+export function buildListOfNItems(n, itemElement) {
+	const itemsHTML = new Array(n)
+		.fill(undefined)
+		.map((_, index) => `<${itemElement}>Item ${index + 1}</${itemElement}>`)
+		.join('');
+	return textToDomToParent(`<vwc-list>${itemsHTML}</vwc-list>`);
+}