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

package/src/lib/button/button.scss

@@ -0,0 +1,142 @@
+@use '../../../../shared/src/lib/sass/mixins/typography' as typography;
+@use 'partials/variables' as variables;
+@use '../focus/partials/variables' as focus-variables;
+
+@use '../../../../shared/src/lib/sass/mixins/connotation/config' with (
+	$subset: primary cta success alert,
+	$shades: contrast fierce strong soft pale,
+	$default: primary,
+);
+@use '../../../../shared/src/lib/sass/mixins/connotation' as connotation;
+
+@use '../../../../shared/src/lib/sass/mixins/appearance/config' as appearance-config with (
+	$appearances: filled outlined ghost,
+	$states: idle hover disabled active,
+	$default: ghost,
+);
+@use '../../../../shared/src/lib/sass/mixins/appearance' as appearance;
+
+:host {
+	outline: 0 none;
+}
+
+.control {
+	@include connotation.connotation;
+	@include appearance.appearance;
+
+	position: relative;
+	display: inline-flex;
+	box-sizing: border-box;
+	align-items: center;
+	border: 0 none;
+	background-color: var(#{appearance.get-variable(fill)});
+	block-size: var(#{variables.$block-size});
+	box-shadow: inset 0 0 0 1px var(#{appearance.get-variable(outline)});
+	color: var(#{appearance.get-variable(text)});
+	cursor: pointer;
+	outline: 0 none;
+	vertical-align: middle;
+
+	&.icon-only {
+		padding-inline: 0;
+		place-content: center;
+		@supports (aspect-ratio: 1) {
+			aspect-ratio: 1;
+		}
+		@supports not (aspect-ratio: 1) {
+			inline-size: var(#{variables.$block-size});
+		}
+	}
+
+}
+
+/* Size */
+
+.control.size-base-small {
+	#{variables.$block-size}: 32px;
+	@include typography.typography-cat-shorthand('caption-bold');
+
+	&:not(.icon-only) {
+		#{variables.$icon-gap}: 8px;
+
+		padding-inline: 12px;
+	}
+
+	.icon {
+		font-size: 16px;
+	}
+}
+
+.control.size-base-large {
+	#{variables.$block-size}: 48px;
+	@include typography.typography-cat-shorthand('body-1-bold');
+
+	&:not(.icon-only) {
+		#{variables.$icon-gap}: 10px;
+
+		padding-inline: 20px;
+	}
+
+	.icon {
+		font-size: 24px;
+	}
+}
+
+.control:not(.size-base-small):not(.size-base-large) {
+	#{variables.$block-size}: 40px;
+	@include typography.typography-cat-shorthand('button');
+
+	&:not(.icon-only) {
+		#{variables.$icon-gap}: 8px;
+
+		padding-inline: 16px;
+	}
+
+	.icon {
+		font-size: 20px;
+	}
+}
+
+/* Shape */
+
+// stylelint-disable-next-line no-descending-specificity
+.control:not(.shape-pill) {
+	border-radius: 6px;
+}
+
+.control.shape-pill {
+	&:not(.icon-only) {
+		border-radius: 24px;
+	}
+
+	&.icon-only {
+		border-radius: 50%;
+	}
+}
+
+/* Icon */
+
+// stylelint-disable-next-line no-descending-specificity
+.icon {
+	// stylelint-disable-next-line no-descending-specificity
+	:not(.icon-trailing) & {
+		margin-inline-end: var(#{variables.$icon-gap});
+	}
+
+	// stylelint-disable-next-line no-descending-specificity
+	.icon-trailing & {
+		order: 1;
+		margin-inline-start: var(#{variables.$icon-gap});
+	}
+}
+
+.focus-indicator {
+	:not(:focus) & {
+		display: none;
+	}
+
+	.appearance-outlined &,
+	.appearance-ghost & {
+		#{focus-variables.$focus-stroke-gap-color}: transparent;
+	}
+}

package/src/lib/button/button.spec.ts

@@ -0,0 +1,131 @@
+import { elementUpdated, fixture } from '@vivid-nx/shared';
+import type { Icon } from '../icon/icon';
+import { Button } from './button';
+import '.';
+
+const COMPONENT_TAG = 'vwc-button';
+const ICON_SELECTOR = 'vwc-icon';
+
+describe('vwc-button', () => {
+	let element: Button;
+
+	beforeEach(async () => {
+		element = await fixture(`<${COMPONENT_TAG}></${COMPONENT_TAG}>`) as Button;
+	});
+
+	describe('basic', () => {
+		it('initializes as a vwc-button', async () => {
+			expect(element).toBeInstanceOf(Button);
+			expect(element.label).toEqual('');
+			expect(element.icon).toBeUndefined();
+			expect(element.iconTrailing).toBeFalsy();
+			expect(element.connotation).toBeUndefined();
+			expect(element.shape).toBeUndefined();
+			expect(element.appearance).toBeUndefined();
+			expect(element.size).toBeUndefined();
+		});
+	});
+
+	describe('icon', () => {
+		it('adds an icon to the button', async () => {
+			element.icon = 'home';
+			await elementUpdated(element);
+
+			const icon = element.shadowRoot?.querySelector(ICON_SELECTOR) as Icon;
+			expect(icon).toBeInstanceOf(HTMLElement);
+			expect(icon.type).toEqual('home');
+		});
+
+		it('setting `iconTrailing` set the order of element', async () => {
+			element.icon = 'home';
+			element.iconTrailing = true;
+			await elementUpdated(element);
+
+			const trailingIcon = element.shadowRoot?.querySelector(
+				`.icon-trailing ${ICON_SELECTOR}`,
+			);
+			expect(trailingIcon).toBeInstanceOf(HTMLElement);
+		});
+	});
+
+	describe('label', () => {
+		it('set label property to node', async () => {
+			const label = 'lorem';
+			element.label = label;
+			await elementUpdated(element);
+
+			const control = element.shadowRoot?.querySelector('.control');
+			expect(control?.textContent?.trim()).toEqual(label);
+		});
+	});
+
+	describe('connotation', () => {
+		it('sets correct internal connotation style', async () => {
+			const connotation = 'cta';
+			(element as any).connotation = connotation;
+			await elementUpdated(element);
+
+			const control = element.shadowRoot?.querySelector(`.control.connotation-${connotation}`);
+			expect(control).toBeInstanceOf(Element);
+		});
+	});
+
+	describe('shape', () => {
+		it('sets correct internal shape style', async () => {
+			const shape = 'pill';
+			(element as any).shape = shape;
+			await elementUpdated(element);
+
+			const control = element.shadowRoot?.querySelector(`.control.shape-${shape}`);
+			expect(control).toBeInstanceOf(Element);
+		});
+	});
+
+	describe('appearance', () => {
+		it('sets correct internal appearance style', async () => {
+			const appearance = 'filled';
+			(element as any).appearance = appearance;
+			await elementUpdated(element);
+
+			const control = element.shadowRoot?.querySelector(`.control.appearance-${appearance}`);
+			expect(control).toBeInstanceOf(Element);
+		});
+	});
+
+	describe('size', () => {
+		it('sets correct internal size style', async () => {
+			const size = 'small';
+			(element as any).size = size;
+			await elementUpdated(element);
+
+			const control = element.shadowRoot?.querySelector(`.control.size-${size}`);
+			expect(control).toBeInstanceOf(Element);
+		});
+	});
+
+	describe('icon-only', () => {
+		it('sets correct internal icon-only style', async () => {
+			const getControlIconOnly = () => element.shadowRoot?.querySelector('.control.icon-only');
+			const controlIconOnlyBefore = getControlIconOnly();
+
+			element.icon = 'home';
+			await elementUpdated(element);
+
+			const controlIconOnlyAfter = getControlIconOnly();
+			expect(controlIconOnlyBefore).toBeNull();
+			expect(controlIconOnlyAfter).toBeInstanceOf(Element);
+		});
+	});
+
+	describe('disabled', function () {
+		it('should set disabled class when disabled is true', async () => {
+			const appearance = 'filled';
+			(element as any).appearance = appearance;
+			element.toggleAttribute('disabled', true);
+			await elementUpdated(element);
+
+			const control = element.shadowRoot?.querySelector(`.control.appearance-${appearance}.disabled`);
+			expect(control).toBeInstanceOf(Element);
+		});
+	});
+});

package/src/lib/button/button.template.ts

@@ -0,0 +1,89 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import { html, ref } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { Focus } from '../focus/focus';
+import { affixIconTemplateFactory } from '../../shared/patterns/affix';
+import type { Button, ButtonAppearance } from './button';
+
+
+const getAppearanceClassName = (appearance: ButtonAppearance, disabled: boolean) => {
+	let className = `appearance-${appearance}`;
+	disabled && (className += ' disabled');
+	return className;
+};
+
+const getClasses = ({
+	connotation, appearance, shape, size, icon, label, disabled, iconTrailing
+}: Button) => classNames(
+	'control',
+	[`connotation-${connotation}`, Boolean(connotation)],
+	[getAppearanceClassName(appearance as ButtonAppearance, disabled), Boolean(appearance)],
+	[`shape-${shape}`, Boolean(shape)],
+	[`size-${size}`, Boolean(size)],
+	['icon-only', !label && !!icon],
+	['icon-trailing', iconTrailing],
+);
+
+const focusTemplate = (context: ElementDefinitionContext) => {
+	const focusTag = context.tagFor(Focus);
+
+	return html`<${focusTag} class="focus-indicator"></${focusTag}>`;
+};
+
+/**
+ * The template for the {@link @microsoft/fast-foundation#(Button:class)} component.
+ *
+ * @param context
+ * @param definition
+ * @public
+ */
+export const buttonTemplate: (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => ViewTemplate<Button> = (context: ElementDefinitionContext) => {
+	const affixIconTemplate = affixIconTemplateFactory(context);
+
+	return html`
+    <button
+        class="${getClasses}"
+        ?autofocus="${(x) => x.autofocus}"
+        ?disabled="${(x) => x.disabled}"
+        form="${(x) => x.formId}"
+        formaction="${(x) => x.formaction}"
+        formenctype="${(x) => x.formenctype}"
+        formmethod="${(x) => x.formmethod}"
+        formnovalidate="${(x) => x.formnovalidate}"
+        formtarget="${(x) => x.formtarget}"
+        name="${(x) => x.name}"
+        type="${(x) => x.type}"
+        value="${(x) => x.value}"
+        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-pressed="${(x) => x.ariaPressed}"
+        aria-relevant="${(x) => x.ariaRelevant}"
+        aria-roledescription="${(x) => x.ariaRoledescription}"
+        ${ref('control')}
+    >
+        ${() => focusTemplate(context)}
+        ${x => affixIconTemplate(x.icon)}
+        ${(x) => x.label}
+    </button>
+`;
+};

package/src/lib/button/button.ts

@@ -0,0 +1,95 @@
+import { applyMixins, Button as FoundationButton } from '@microsoft/fast-foundation';
+import { attr } from '@microsoft/fast-element';
+
+import type {
+	Appearance, Connotation, Shape, Size,
+} from '../enums.js';
+import { AffixIconWithTrailing } from '../../shared/patterns/affix';
+
+/**
+ * Types of button connotation.
+ *
+ * @public
+ */
+type ButtonConnotation = Extract<Connotation,
+| Connotation.Primary
+| Connotation.CTA
+| Connotation.Success
+| Connotation.Alert>;
+
+/**
+ * Types of button appearance.
+ *
+ * @public
+ */
+export type ButtonAppearance = Extract<Appearance,
+Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
+
+/**
+ * Types of button shape.
+ *
+ * @public
+ */
+type ButtonShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+
+/**
+ * Types of button size.
+ *
+ * @public
+ */
+type ButtonSize = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
+
+/**
+ * Base class for button
+ *
+ * @public
+ */
+export class Button extends FoundationButton {
+	/**
+	 * The connotation the button should have.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: connotation
+	 */
+	@attr connotation?: ButtonConnotation;
+
+	/**
+	 * The shape the button should have.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: shape
+	 */
+	@attr shape?: ButtonShape;
+
+	/**
+	 * The appearance the button should have.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: appearance
+	 */
+	@attr appearance?: ButtonAppearance;
+
+	/**
+	 * The size the button should have.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: size
+	 */
+	@attr size?: ButtonSize;
+
+	/**
+	 * Indicates the button's label.
+	 *
+	 * @public
+	 * @remarks
+	 * HTML Attribute: label
+	 */
+	@attr({ mode: 'fromView' }) label = '';
+}
+
+export interface Button extends AffixIconWithTrailing {}
+applyMixins(Button, AffixIconWithTrailing);

package/src/lib/button/index.ts

@@ -0,0 +1,25 @@
+import '../icon';
+import '../focus';
+
+
+import { Button as FastButton } from '@microsoft/fast-foundation';
+import { designSystem } from '../../shared/design-system';
+import { Button } from './button';
+import styles from './button.scss';
+import { buttonTemplate as template } from './button.template';
+
+/**
+ * Represents a button custom element.
+ */
+
+export const vividButton = Button.compose({
+	baseName: 'button',
+	baseClass: FastButton,
+	template: template as any,
+	styles,
+	shadowOptions: {
+		delegatesFocus: true,
+	},
+});
+
+designSystem.register(vividButton());

package/src/lib/button/partials/variables.scss

@@ -0,0 +1,2 @@
+$icon-gap: --button-icon-gap;
+$block-size: --button-block-size;

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

@@ -0,0 +1,32 @@
+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 = ['button'];
+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/button.png',
+		);
+});

package/src/lib/calendar/README.md

@@ -0,0 +1,70 @@
+# calendar
+
+Represents a calendar custom element.
+
+```js
+<script type="module">
+    import '@vonage/vivid/calendar';
+</script>
+```
+
+```html preview
+<vwc-calendar></vwc-calendar>
+```
+
+## Datetime
+
+Use the `datetime` attribute to set date within a week of choice.
+
+- Type: any [`Date()` constructor acceptable parameter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/Date#parameters)
+- Default: `undefined` (will use the current date)
+
+```html preview
+<vwc-calendar datetime="2022-01-01"></vwc-calendar>
+```
+
+## Start Day
+
+Use the `start-day` attribute (or `startDay` property) to set the first day of the week (e.g. work week starts on Monday).
+
+
+- Type: `'sunday'` | `'monday'`
+- Default: `undefined` (programmatically defaults to `'monday'` if not specified)
+
+```html preview
+<vwc-calendar start-day="sunday"></vwc-calendar>
+```
+
+## Locales
+
+Use `locales` to set a locale string or array of locale strings that contain one or more language or locale tags. If you include more than one locale string, list them in descending order of priority so that the first entry is the preferred locale. If you omit this parameter, the default locale of the JavaScript runtime is used. This parameter must conform to BCP 47 standards; see the [Intl.Collator object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator) for details. e.g. `en-US` | `en-US, he-IL`
+
+- Type: `String` | `String[]`
+- Default: `undefined` (will use the current locale)
+
+```html preview
+<vwc-calendar locales="he-IL" start-day="sunday" style="direction: rtl"></vwc-calendar>
+```
+
+## Hour 12
+
+`hour12` sets the convention of displayed time in which the day runs from midnight to midnight and is divided into 24 or 12 hours.
+Unless provided, choice will be set according to local time preference (e.g. US = 12, IL = 24).
+
+- Type: `Boolean`
+- Default: `false`
+
+```html preview
+<vwc-calendar hour12></vwc-calendar>
+```
+
+## Methods
+
+### Event Context
+
+- Type: function
+- Returns: `{ day: number, hour: number }` | `null`
+
+Accepts event reference and returns an object containing _day_ & _hour_  if applicable.
+
+