@vonage/vivid 3.0.0-next.6 → 3.0.0-next.7

package/project.json

@@ -0,0 +1,122 @@
+{
+  "root": "libs/components",
+  "sourceRoot": "libs/components/src",
+  "projectType": "library",
+  "targets": {
+    "e2e": {
+      "executor": "@nrwl/workspace:run-commands",
+      "options": {
+        "commands": ["./scripts/visual-tests/run.tests.in.container.sh {args.task}"],
+        "parallel": false
+      },
+      "configurations": {
+        "watch": {
+          "commands": [
+            {
+              "command": "npx nx run components:build --watch"
+            },
+            {
+              "command":"npx nx run styles:serve"
+            },
+            {
+              "command":"npx http-server -s"
+            },
+            {
+              "command":"npx -y nodemon --watch dist/libs/components/ --watch dist/libs/styles/ --watch 'libs/components/**/*.test.ts' -e js,css,ts --signal SIGHUP --exec 'npx playwright test -c ./libs/components/playwright.config.dev.ts'"
+            }
+          ],
+          "parallel": true
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/components/**/*.ts"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/libs/components"],
+      "options": {
+        "jestConfig": "libs/components/jest.config.cjs",
+        "passWithNoTests": true
+      }
+    },
+    "build": {
+      "executor": "@nrwl/web:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "entryFile": "libs/components/src/index.ts",
+        "outputPath": "dist/libs/components",
+        "tsConfig": "libs/components/tsconfig.lib.json",
+        "project": "libs/components/package.json",
+        "rollupConfig": "libs/components/rollup.config.prod.ts",
+        "assets": [
+          {
+            "input": "./libs/components",
+            "glob": "README.md",
+            "output": "."
+          },
+          {
+            "input": "./dist/libs/styles/themes/**",
+            "glob": "*.css",
+            "output": "./styles/themes"
+          },
+          {
+            "input": "./dist/libs/styles/fonts/**",
+            "glob": "*.css",
+            "output": "./styles/fonts"
+          }
+        ],
+        "buildableProjectDepsInPackageJsonType": "dependencies",
+        "updateBuildableProjectDepsInPackageJson": true,
+        "format": ["esm"],
+        "extractCss": false
+      }
+    },
+    "serve": {
+      "executor": "@nrwl/web:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "entryFile": "libs/components/src/index.ts",
+        "outputPath": "dist/libs/components",
+        "tsConfig": "libs/components/tsconfig.lib.json",
+        "project": "libs/components/package.json",
+        "rollupConfig": "libs/components/rollup.config.prod.ts",
+        "watch": true,
+        "buildableProjectDepsInPackageJsonType": "dependencies",
+        "updateBuildableProjectDepsInPackageJson": true,
+        "assets": [
+          {
+            "input": "./libs/components",
+            "glob": "README.md",
+            "output": "."
+          },
+          {
+            "input": "./dist/libs/styles/themes/**",
+            "glob": "*.css",
+            "output": "./styles/themes"
+          },
+          {
+            "input": "./dist/libs/styles/fonts/**",
+            "glob": "*.css",
+            "output": "./styles/fonts"
+          }
+        ],
+        "format": ["esm"],
+        "extractCss": false
+      }
+    },
+    "stylelint": {
+      "executor": "nx-stylelint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["libs/components/**/*.scss"]
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["styles"]
+}

package/rollup.config.prod.ts

@@ -0,0 +1,50 @@
+
+const fs = require('fs');
+const path = require('path');
+const replace = require('@rollup/plugin-replace');
+
+/**
+ * @param workingFolder
+ */
+function getFoldersInAFolder(workingFolder = './src/lib/') {
+	const folders = [];
+	const testsFolder = path.join(__dirname, workingFolder);
+	fs.readdirSync(testsFolder).forEach((testFolder) => {
+		if (testFolder === 'common') return;
+		const absolutePath = path.join(testsFolder, testFolder);
+		if (fs.statSync(absolutePath).isDirectory()) {
+			folders.push(testFolder);
+		}
+	});
+	return folders;
+}
+
+const components = getFoldersInAFolder();
+const input = components.reduce((inputObject, componentName) => {
+	inputObject[`${componentName}/index`] = path.join(
+		process.cwd(),
+		`libs/components/src/lib/${componentName}/index.ts`
+	);
+	return inputObject;
+}, {});
+
+module.exports = function setVividRollupConfig(config) {
+
+	input.index = config.input;
+
+	const output = config.output;
+	output.chunkFileNames = 'shared/[name].js';
+	delete output.name;
+	delete output.entryFileNames;
+
+
+	const plugins = [...config.plugins,
+		replace({
+			'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+		})];
+	return {
+		input,
+		output,
+		plugins
+	};
+};

package/setupJestTests.js

@@ -0,0 +1,17 @@
+import * as jestFetchMock from 'jest-fetch-mock';
+
+jestFetchMock.enableFetchMocks();
+
+Object.defineProperty(window, 'matchMedia', {
+	writable: true,
+	value: jest.fn().mockImplementation((query: any) => ({
+		matches: false,
+		media: query,
+		onchange: null,
+		addListener: jest.fn(), // deprecated
+		removeListener: jest.fn(), // deprecated
+		addEventListener: jest.fn(),
+		removeEventListener: jest.fn(),
+		dispatchEvent: jest.fn(),
+	})),
+});

package/{index.d.ts → src/index.ts}

@@ -1,2 +1,2 @@
-export * from './lib/components';
-export * from './shared/design-system';
+export * from './lib/components';
+export * from './shared/design-system';

package/src/lib/accordion/README.md

@@ -0,0 +1,55 @@
+# accordion
+
+```js
+<script type="module">
+    import '@vonage/vivid/accordion';
+</script>
+```
+
+```html preview
+<vwc-accordion>
+    <vwc-accordion-item heading="accordion item with heading">
+        <vwc-text>content</vwc-text>
+    </vwc-accordion-item>
+    <vwc-accordion-item heading="accordion item with heading">
+        <vwc-text>content</vwc-text>
+    </vwc-accordion-item>
+    <vwc-accordion-item heading="accordion item with heading">
+        <vwc-text>content</vwc-text>
+    </vwc-accordion-item>
+    <vwc-accordion-item heading="accordion item with heading">
+        <vwc-text>content</vwc-text>
+    </vwc-accordion-item>
+</vwc-accordion>
+```
+## Multi
+Add the `multi` attribute to the accordion to allow multiple items to be open at once.
+
+- Type: `boolean`
+- Default: `false`
+
+```html preview
+<vwc-accordion multi>
+    <vwc-accordion-item heading="accordion item with heading">
+        <vwc-text>content</vwc-text>
+    </vwc-accordion-item>
+    <vwc-accordion-item heading="accordion item with heading">
+        <vwc-text>content</vwc-text>
+    </vwc-accordion-item>
+    <vwc-accordion-item heading="accordion item with heading">
+        <vwc-text>content</vwc-text>
+    </vwc-accordion-item>
+    <vwc-accordion-item heading="accordion item with heading">
+        <vwc-text>content</vwc-text>
+    </vwc-accordion-item>
+</vwc-accordion>
+```
+
+## Methods
+
+### CloseAll
+
+- Type: function
+- Returns: `void`
+
+ Closes all the accordion items from the open state.

package/src/lib/accordion/accordion.scss

@@ -0,0 +1,10 @@
+@use '../../../../../node_modules/@vonage/vivid-tokens/dist/sass/themes/consts' as theme-consts;
+
+.control {
+	display: flex;
+	flex-direction: column;
+}
+
+::slotted(vwc-accordion-item:not(:only-of-type)) {
+	border-bottom: 1px solid var(#{theme-consts.$vvd-color-neutral-30});
+}

package/src/lib/accordion/accordion.spec.ts

@@ -0,0 +1,91 @@
+import { elementUpdated, fixture } from '@vivid-nx/shared';
+import type { AccordionItem } from '../accordion-item/accordion-item';
+import { Accordion } from './accordion';
+import '.';
+import '../accordion-item';
+
+const COMPONENT_TAG = 'vwc-accordion';
+
+describe('vwc-accordion', () => {
+	let element: Accordion;
+	let accordionItem1: AccordionItem;
+	let accordionItem2: AccordionItem;
+
+	beforeEach(async () => {
+		element = (await fixture(
+			`<${COMPONENT_TAG}>
+				<vwc-accordion-item heading="accordion item" id="item1"><p>content</p></vwc-accordion-item>
+				<vwc-accordion-item heading="accordion item" id="item2"><p>content</p></vwc-accordion-item>
+			</${COMPONENT_TAG}>`
+		)) as Accordion;
+		await elementUpdated(element);
+
+		accordionItem1 = element.querySelector('#item1') as AccordionItem;
+		accordionItem2 = element.querySelector('#item2') as AccordionItem;
+		await elementUpdated(accordionItem1);
+		await elementUpdated(accordionItem2);
+	});
+
+	describe('basic', () => {
+		it('should be initialized as a vwc-accordion', async () => {
+			expect(element).toBeInstanceOf(Accordion);
+			expect(element.multi).toBeFalsy();
+		});
+	});
+
+	describe('non multi', () => {
+		it('should only allow one accordion items open at a time', async () => {
+			expect(accordionItem1.open).toBeFalsy();
+			expect(accordionItem2.open).toBeFalsy();
+
+			accordionItem1.open = true;
+			await elementUpdated(element);
+			accordionItem2.open = true;
+			await elementUpdated(element);
+
+			expect(accordionItem1.open).toBeFalsy();
+			expect(accordionItem2.open).toBeTruthy();
+		});
+	});
+
+	describe('multi', () => {
+		it('should allow all accordion items open when multi', async () => {
+			element.multi = true;
+			await elementUpdated(element);
+
+			expect(accordionItem1.open).toBeFalsy();
+			expect(accordionItem2.open).toBeFalsy();
+
+			accordionItem1.open = true;
+			await elementUpdated(element);
+			accordionItem2.open = true;
+			await elementUpdated(element);
+
+			expect(accordionItem1.open).toBeTruthy();
+			expect(accordionItem2.open).toBeTruthy();
+		});
+	});
+
+
+	describe('close all', () => {
+		it('should close all accordion items', async () => {
+			element.multi = true;
+			await elementUpdated(element);
+			
+			accordionItem1.open = true;
+			await elementUpdated(element);
+			accordionItem2.open = true;
+			await elementUpdated(element);
+
+			expect(accordionItem1.open).toBeTruthy();
+			expect(accordionItem2.open).toBeTruthy();
+
+			element.closeAll();
+			await elementUpdated(element);
+
+			expect(accordionItem1.open).toBeFalsy();
+			expect(accordionItem2.open).toBeFalsy();
+		});
+	});
+
+});

package/src/lib/accordion/accordion.template.ts

@@ -0,0 +1,23 @@
+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';
+import type { Accordion } from './accordion';
+
+const getClasses = (_: Accordion) => classNames('control');
+
+/**
+ *
+ * @param context
+ * @public
+ */
+export const AccordionTemplate: (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => ViewTemplate<Accordion> = (
+) => html`<div class="${getClasses}">
+	<slot></slot>
+</div>`;

package/src/lib/accordion/accordion.ts

@@ -0,0 +1,49 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { attr } from '@microsoft/fast-element';
+import type { AccordionItem } from '../accordion-item/accordion-item';
+
+/**
+ * Base class for accordion
+ *
+ * @public
+ */
+export class Accordion extends FoundationElement {
+	private accordionItems: HTMLCollectionOf<AccordionItem> | undefined = undefined;
+
+	/**
+	 *
+	 * @public
+	 * HTML Attribute: multi
+	 */
+	@attr({
+		mode: 'boolean',
+	}) multi = false;
+
+	constructor() {
+		super();
+		this.addEventListener('opened', this.handleOpened);
+	}
+
+	override connectedCallback(): void {
+		super.connectedCallback();
+		this.accordionItems = this.children as HTMLCollectionOf<AccordionItem>;
+	}
+
+	private handleOpened(e: Event): any {
+		if (!this.multi && this.accordionItems) {
+			for (let i = 0; i < this.accordionItems.length; i++) {
+				if (this.accordionItems[i] !== e.target) {
+					this.accordionItems[i].open = false;
+				}
+			}
+		}
+	}
+
+	closeAll(): void {
+		if (this.accordionItems) {
+			for (let i = 0; i < this.accordionItems.length; i++) {
+				this.accordionItems[i].open = false;
+			}
+		}
+	}
+}

package/src/lib/accordion/index.ts

@@ -0,0 +1,14 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+import { designSystem } from '../../shared/design-system';
+import styles from './accordion.scss';
+
+import { Accordion } from './accordion';
+import { AccordionTemplate as template } from './accordion.template';
+
+export const vividAccordion = Accordion.compose<FoundationElementDefinition>({
+	baseName: 'accordion',
+	template: template as any,
+	styles,
+});
+
+designSystem.register(vividAccordion());

package/src/lib/accordion/ui.test.ts

@@ -0,0 +1,37 @@
+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.ts';
+
+const components = ['accordion','accordion-item'];
+
+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>`,
+		''
+	);
+
+	await loadComponents({
+		page,
+		components,
+	});
+	await loadTemplate({
+		page,
+		template,
+	});
+
+	const testWrapper = await page.$('#wrapper');
+
+	await page.waitForLoadState('networkidle');
+
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/accordion.png'
+	);
+});

package/src/lib/accordion-item/README.md

@@ -0,0 +1,113 @@
+# accordion-item
+
+```js
+<script type="module">
+    import '@vonage/vivid/accordion-item';
+</script>
+```
+## Heading
+Add the `heading` attribute to set the heading text.
+
+- Type: `string`
+- Default: `''`
+  
+```html preview
+  <vwc-accordion-item heading="accordion item with heading">
+    <vwc-text font-face="body-1">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    </vwc-text>
+  </vwc-accordion-item>
+```
+
+## Heading-Level
+
+Use the `heading-level` attribute (or `headingLevel` property) to set the accordion heading level so it fits correctly within the outline of the page. Read more on [heading elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements).
+
+- Type: `2` | `3` | `4` | `5` | `6`
+- Default: `3`
+
+The following sets the heading of accordion-item to level 2
+
+```
+<vwc-accordion-item heading="my heading" heading-level="2"></vwc-accordion-item>
+```
+
+which will output the shadow tree heading element to be rendered as a `<h2>` tag
+
+e.g.
+
+```
+<h2 class="header">
+  <button>
+    <!-- ... -->
+  </button>
+</h2>
+```
+
+## Open
+Use the `open` attribute to set the accordion-item's open state.
+
+- Type: `boolean`
+- Default: `false`
+
+```html preview
+ <vwc-accordion-item heading="Click to toggle accordion item" open>
+    <vwc-text font-face="body-1">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    </vwc-text>
+  </vwc-accordion-item>
+```
+## No-Indicator
+Add the `no-indicator` attribute (or `noIndicator` property) to remove the indicator icon from the heading.
+
+- Type: `boolean`
+- Default: `false`
+
+```html preview
+ <vwc-accordion-item heading="accordion item without indicator" no-indicator>
+    <vwc-text font-face="body-1">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    </vwc-text>
+  </vwc-accordion-item>
+```
+## Meta
+Add the `meta` attribute to add metadata to the heading. 
+
+- Type: `string`
+- Default: `''`
+
+```html preview
+ <vwc-accordion-item heading="accordion item with metadata" meta="meta-data">
+    <vwc-text font-face="body-1">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    </vwc-text>
+  </vwc-accordion-item>
+```
+
+## Icon
+Add the `icon` attribute to add an icon to the heading. 
+
+- Type: `string`
+- Default: `''`
+
+```html preview
+ <vwc-accordion-item heading="accordion item with icon" icon="chat-solid">
+    <vwc-text font-face="body-1">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    </vwc-text>
+  </vwc-accordion-item>
+```
+
+## Icon-Trailing
+Add the `icon-trailing` attribute (or `iconTrailing` property) to add an icon to the right of the heading text.  Mind that `icon-trailing` will override the Indicator.
+
+- Type: `boolean`
+- Default: `false`
+
+```html preview
+ <vwc-accordion-item heading="accordion item with icon-trailing" icon="chat-solid" icon-trailing>
+    <vwc-text font-face="body-1">
+      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+    </vwc-text>
+  </vwc-accordion-item>
+```