@vonage/vivid 3.0.0-next.7 → 3.0.0-test.0

package/project.json

@@ -1,122 +0,0 @@
-{
-  "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

@@ -1,50 +0,0 @@
-
-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

@@ -1,17 +0,0 @@
-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/src/lib/accordion/README.md

@@ -1,55 +0,0 @@
-# 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

@@ -1,10 +0,0 @@
-@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

@@ -1,91 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,113 +0,0 @@
-# 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>
-```

package/src/lib/accordion-item/accordion-item.scss

@@ -1,91 +0,0 @@
-@use 'partials/variables' as variables;
-@use '../../../../shared/src/lib/sass/mixins/typography' as typography;
-@use '../../../../../node_modules/@vonage/vivid-tokens/dist/sass/themes/consts' as theme-consts;
-
-.body {
-	@include typography.typography-cat-shorthand('body-2');
-    
-	padding: 8px 32px 24px 16px;
-	.icon:not(.icon-trailing) &{
-		padding-left: 48px;
-	}
-}
-
-.control {
-	display: flex;
-	flex-direction: column;
-
-	&:not(.open) {
-		.toggle-close,
-		.body {
-			display: none;
-		}
-	}
-	&.open{
-		.toggle-open {
-			display: none;
-		}
-		.toggle-close {
-			display: initial;
-		}
-	}
-}
-
-.header {
-	padding: 0;
-	margin: 0;
-}
-
-.button {
-	@include typography.typography-cat-shorthand('subtitle-2');
-
-	position: relative;
-	display: flex;
-	width: 100%;
-	align-items: center;
-	padding: 16px;
-	border: 0 none;
-	background: transparent;
-	cursor: pointer;
-
-	&:hover {
-		background: var(#{theme-consts.$vvd-color-neutral-10});
-	}
-
-	.heading-text {
-		flex-grow: 1;
-		margin-inline-end: auto;
-		text-align: left;
-	}
-
-	.meta {
-		@include typography.typography-cat-shorthand('body-2-bold');
-
-		overflow: hidden;
-		max-width: 20%;
-		flex-shrink: 0;
-		color: var(#{theme-consts.$vvd-color-neutral-70});
-		margin-inline-start: 1rem;
-		text-align: end;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.indicator {
-		display: flex;
-		vwc-icon,
-		slot[name="indicator"i]::slotted(vwc-icon) {
-			margin-inline-start: 16px;
-		}
-	}
-
-	.icon { 
-		margin-inline-end: 16px;
-	}
-}
-
-/* Icon */
-
-.icon-trailing .icon {
-	order: 1;
-}