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

package/src/lib/progress-ring/progress-ring.template.ts

@@ -0,0 +1,82 @@
+import {html, when} 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 { ProgressRing } from './progress-ring';
+
+const getClasses = (_: ProgressRing) => classNames(
+	'base',
+	[`connotation-${_.connotation}`, !!_.connotation],
+);
+const progressSegments: number = 44;
+
+/**
+ * The template for the {@link @microsoft/fast-foundation#ProgressRing} component.
+ *
+ * @param context
+ * @param _
+ * @param definition
+ * @public
+ */
+export const ProgressRingTemplate: (
+	context: ElementDefinitionContext,
+	definition: FoundationElementDefinition
+) => ViewTemplate<ProgressRing> = (
+	_: ElementDefinitionContext
+) => html`
+<div
+        role="progressbar"
+        aria-valuenow="${x => x.value}"
+        aria-valuemin="${x => x.min}"
+        aria-valuemax="${x => x.max}"
+        class="${x => (x.paused ? 'paused' : '')} ${getClasses}"
+    >
+        ${when(
+		x => typeof x.value === 'number',
+		html<ProgressRing>`
+                <svg
+                    class="progress"
+                    viewBox="0 0 16 16"
+                >
+                    <circle
+                        class="background"
+                        cx="8px"
+                        cy="8px"
+                        r="7px"
+                    ></circle>
+                    <circle
+                        class="determinate"
+                        style="stroke-dasharray: ${x =>
+		(progressSegments * x.percentComplete) /
+    100}px ${progressSegments}px"
+                        cx="8px"
+                        cy="8px"
+                        r="7px"
+                    ></circle>
+                </svg>
+            `
+	)}
+        ${when(
+		x => typeof x.value !== 'number', html<ProgressRing>`
+            <svg class="progress" viewBox="0 0 16 16">
+              <circle
+                class="background"
+                cx="8px"
+                cy="8px"
+                r="7px"
+              ></circle>
+              <circle
+                class="indeterminate-indicator-1"
+                cx="8px"
+                cy="8px"
+                r="7px"
+              ></circle>
+            </svg>
+            `
+	)}
+    </div>
+`;
+

package/src/lib/progress-ring/progress-ring.ts

@@ -0,0 +1,18 @@
+import {BaseProgress} from '@microsoft/fast-foundation';
+import {attr} from '@microsoft/fast-element';
+import type {Connotation} from '../enums';
+
+export type ProgressRingConnotation =
+	Connotation.Primary |
+	Connotation.Success |
+	Connotation.Alert |
+	Connotation.CTA;
+
+/**
+ * Base class for progress-ring
+ *
+ * @public
+ */
+export class ProgressRing extends BaseProgress {
+	@attr() connotation?: ProgressRingConnotation;
+}

package/src/lib/progress-ring/ui.test.ts

@@ -0,0 +1,35 @@
+import { expect, test } from '@playwright/test'; 
+import type { Page } from '@playwright/test';
+import {
+	loadComponents,
+	loadTemplate,
+} from '../../visual-tests/visual-tests-utils.ts';
+
+const components = ['progress-ring'];
+
+test('should show the component', async ({ page }: { page: Page }) => {
+	const template = `
+	  <vwc-progress-ring min="0" max="100" value="50" connotation="primary"></vwc-progress-ring>
+	  <vwc-progress-ring min="0" max="100" value="50" connotation="cta"></vwc-progress-ring>
+	  <vwc-progress-ring min="0" max="100" value="33" connotation="alert"></vwc-progress-ring>
+	  <vwc-progress-ring min="0" max="100" value="66" connotation="success"></vwc-progress-ring>
+	  <vwc-progress-ring min="0" max="100" value="77" paused></vwc-progress-ring>
+	`;
+
+	await loadComponents({
+		page,
+		components,
+	});
+	await loadTemplate({
+		page,
+		template,
+	});
+
+	const testWrapper = await page.$('#wrapper');
+
+	await page.waitForLoadState('networkidle');
+
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'./snapshots/progress-ring.png'
+	);
+});

package/src/lib/side-drawer/README.md

@@ -0,0 +1,304 @@
+# side-drawer
+
+```js
+<script type='module'>
+    import '@vonage/vivid/side-drawer';
+</script>
+```
+
+## Open
+Use the `open` attribute to indicate whether the side drawer is open.
+You can also close the side drawer by pressing the `ESC` key.
+
+- Type: `Boolean`
+- Default: `false`
+
+```html preview
+<style>
+    vwc-side-drawer#sideDrawer{
+        --side-drawer-background-color: var(--vvd-color-neutral-10);
+        --side-drawer-inline-size: 200px;
+    }
+</style>
+<vwc-side-drawer id="sideDrawer" open>
+	<div>
+		<vwc-sidenav-item href="#" text="1st level item" icon="home-line"></vwc-sidenav-item>
+        <p><vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text></p>
+        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
+        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
+	</div>
+	<div slot="app-content">
+        <vwc-button id="button" shape="pill" icon='menu-solid'></vwc-button>
+        <vwc-text font-face="body-1">
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
+            a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
+            of Lorem Ipsum.
+        </vwc-text>
+	</div>
+</vwc-side-drawer>
+<script>
+  button.addEventListener('click', toggleOpen);
+  function toggleOpen() {
+	  sideDrawer.open = !sideDrawer.open;
+  }
+</script>
+```
+
+## Modal
+
+Use the `modal` attribute to set the side drawer's type to modal.
+Click on the `scrim` or the `ESC` key to close the modal side-drawer.
+
+- Type: `Boolean`
+- Default: `false`
+
+```html preview
+<style>
+    vwc-side-drawer#sideDrawer{
+        --side-drawer-background-color: var(--vvd-color-neutral-10);
+        --side-drawer-inline-size: 200px;
+    }
+</style>
+<vwc-side-drawer id="sideDrawer" open modal>
+	<div>
+		<vwc-sidenav-item href="#" text="1st level item" icon="home-line"></vwc-sidenav-item>
+        <p><vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text></p>
+        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
+        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
+	</div>
+	<div slot="app-content">
+        <vwc-button id="button" shape="pill" icon='menu-solid'></vwc-button>
+        <vwc-text font-face="body-1">
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
+            a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
+            of Lorem Ipsum.
+        </vwc-text>
+	</div>
+</vwc-side-drawer>
+<script>
+  button.addEventListener('click', toggleOpen);
+  function toggleOpen() {
+	  sideDrawer.open = !sideDrawer.open;
+  }
+</script>
+```
+## Alternate
+
+Use the `alternate` attribute to apply scheme alternate region.
+
+- Type: `Boolean`
+- Default: `false`
+
+```html preview
+<style>
+    vwc-side-drawer#sideDrawer{
+        --side-drawer-background-color: var(--vvd-color-neutral-10);
+        --side-drawer-inline-size: 200px;
+    }
+</style>
+<vwc-side-drawer id="sideDrawer" open alternate>
+	<div>
+		<vwc-sidenav-item href="#" text="1st level item" icon="home-line"></vwc-sidenav-item>
+        <p><vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text></p>
+        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
+        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
+	</div>
+	<div slot="app-content">
+        <vwc-button id="button" shape="pill" icon='menu-solid'></vwc-button>
+        <vwc-text font-face="body-1">
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
+            a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
+            of Lorem Ipsum.
+        </vwc-text>
+	</div>
+</vwc-side-drawer>
+<script>
+  button.addEventListener('click', toggleOpen);
+  function toggleOpen() {
+	  sideDrawer.open = !sideDrawer.open;
+  }
+</script>
+```
+## Position
+
+Use the `position` attribute to set the side of the side drawer.
+
+- Type: `"start" | "end"`
+- Default: `"start"`
+
+```html preview
+<style>
+    vwc-side-drawer#sideDrawer{
+        --side-drawer-background-color: var(--vvd-color-neutral-10);
+        --side-drawer-inline-size: 200px;
+    }
+    vwc-button#button{
+        margin-left: calc(100% - 40px);
+    }
+</style>
+<vwc-side-drawer id="sideDrawer" open position="end">
+	<div>
+		<vwc-sidenav-item href="#" text="1st level item" icon="home-line"></vwc-sidenav-item>
+        <p><vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text></p>
+        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
+        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
+	</div>
+	<div slot="app-content">
+        <vwc-button id="button" shape="pill" icon='menu-solid'></vwc-button>
+        <vwc-text font-face="body-1">
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
+            a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
+            of Lorem Ipsum.
+        </vwc-text>
+	</div>
+</vwc-side-drawer>
+<script>
+  button.addEventListener('click', toggleOpen);
+  function toggleOpen() {
+	  sideDrawer.open = !sideDrawer.open;
+  }
+</script>
+```
+## Slots
+
+### Top Bar
+
+To add a top bar to the side drawer, add a slot called `top-bar`.
+
+```js
+<div slot="top-bar">
+    <vwc-text>VIVID</vwc-text>
+</div>
+```
+```html preview
+<style>
+    vwc-side-drawer#sideDrawer{
+        --side-drawer-background-color: var(--vvd-color-neutral-10);
+        --side-drawer-inline-size: 200px;
+    }
+</style>
+<vwc-side-drawer id="sideDrawer" open>
+	<div slot="top-bar">
+        <vwc-text font-face="subtitle-1">VIVID</vwc-text>
+    </div>
+	<div>
+		<vwc-sidenav-item href="#" text="1st level item" icon="home-line"></vwc-sidenav-item>
+        <p><vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text></p>
+        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
+        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
+	</div>
+	<div slot="app-content">
+        <vwc-button id="button" shape="pill" icon='menu-solid'></vwc-button>
+        <vwc-text font-face="body-1">
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
+            standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
+            a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+            remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
+            Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
+            of Lorem Ipsum.
+        </vwc-text>
+	</div>
+</vwc-side-drawer>
+<script>
+  button.addEventListener('click', toggleOpen);
+  function toggleOpen() {
+	  sideDrawer.open = !sideDrawer.open;
+  }
+</script>
+```
+
+### App-content
+
+To add content aside the side-drawer, add a slot called `app-content`.
+
+```js
+<div slot="app-content">
+    <vwc-text font-face="body-1">
+        This is the app-content slot!!!!
+    </vwc-text>
+</div>
+```
+```html preview
+<style>
+    vwc-side-drawer#sideDrawer{
+        --side-drawer-background-color: var(--vvd-color-neutral-10);
+        --side-drawer-inline-size: 200px;
+    }
+</style>
+<vwc-side-drawer id="sideDrawer" open>
+	<div>
+		<vwc-sidenav-item href="#" text="1st level item" icon="home-line"></vwc-sidenav-item>
+        <p><vwc-text font-face="body-2-bold">SECTION TITLE</vwc-text></p>
+        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
+        <vwc-sidenav-item href="#" text="1st level item" icon="chat-line"></vwc-sidenav-item>
+	</div>
+	<div slot="app-content">
+        <vwc-button id="button" shape="pill" icon='menu-solid'></vwc-button>
+        <vwc-text font-face="body-1">
+          This is the app-content slot!!!!
+        </vwc-text>
+	</div>
+</vwc-side-drawer>
+<script>
+  button.addEventListener('click', toggleOpen);
+  function toggleOpen() {
+	  sideDrawer.open = !sideDrawer.open;
+  }
+</script>
+```
+
+## CSS Custom Properties
+
+### Background-color
+- `--side-drawer-background-color`
+- Type: `String`
+- Default: Current theme's canvas (background) color
+
+Controls the background of the side drawer.
+
+### Color
+- `--side-drawer-color`
+- Type: `String`
+- Default: Current theme's on-canvas (text) color
+
+Controls the color of the side drawer.    
+
+### Inline-size
+- `--side-drawer-inline-size`
+- Type: `Number`
+- Default: `280px`
+
+Controls the inline size of the side drawer.   
+
+### Padding-body
+- `--side-drawer-padding-body`
+- Type: `Number`
+- Default: `16px`
+
+Controls the padding of the side drawer's body.   
+
+### Padding-top-bar
+- `--side-drawer-padding-top-bar`
+- Type: `Number`
+- Default: `16px`
+
+Controls the padding of the side drawer's top bar.   
+
+### Z-index
+- `--side-drawer-z-index`
+- Type: `Number`
+- Default: `6`
+
+Controls the z-index of the side drawer.   

package/src/lib/side-drawer/index.ts

@@ -0,0 +1,16 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+import { designSystem } from '../../shared/design-system';
+import { SideDrawer } from './side-drawer';
+import styles from './side-drawer.scss';
+import { sideDrawerTemplate as template } from './side-drawer.template';
+
+/**
+ * Represents a side-drawer custom element.
+ */
+export const VIVIDSideDrawer = SideDrawer.compose<FoundationElementDefinition>({
+	baseName: 'side-drawer',
+	template: template as any,
+	styles,
+});
+
+designSystem.register(VIVIDSideDrawer());

package/src/lib/side-drawer/partials/variables.scss

@@ -0,0 +1,6 @@
+$side-drawer-padding-top-bar: --side-drawer-padding-top-bar;
+$side-drawer-padding-body: --side-drawer-padding-body;
+$side-drawer-inline-size: --side-drawer-inline-size;
+$side-drawer-z-index: --side-drawer-z-index;
+$side-drawer-background-color: --side-drawer-background-color;
+$side-drawer-color: --side-drawer-color;

package/src/lib/side-drawer/side-drawer.scss

@@ -0,0 +1,109 @@
+@use 'sass:map';
+
+@use 'partials/variables' as variables;
+@use '../../../../../node_modules/@vonage/vivid-tokens/dist/sass/themes/consts' as theme-consts;
+@use '../../../../shared/src/lib/sass/mixins/typography' as typography;
+@use '../../../../shared/src/lib/sass/mixins/scrim' as scrim-mixins;
+
+$z-index-default: 6;
+$padding-default: 16px;
+$inline-size: var(#{variables.$side-drawer-inline-size}, 280px);
+
+
+:host {
+	display: flex;
+	block-size: 100vh;
+}
+
+:host([position='end']) {
+	flex-direction: row-reverse;
+}
+
+.control {
+	position: fixed;
+	z-index: var(#{variables.$side-drawer-z-index}, #{$z-index-default});
+	top: auto;
+	bottom: 0;
+	display: flex;
+	overflow: auto;
+	flex-direction: column;
+	flex-shrink: 0;
+	background-color: var(#{variables.$side-drawer-background-color}, var(#{theme-consts.$vvd-color-canvas}));
+	block-size: inherit;
+	color: var(#{variables.$side-drawer-color}, var(#{theme-consts.$vvd-color-on-canvas}));
+	inline-size: #{$inline-size};
+
+	&.alternate {
+		background-color: var(#{theme-consts.$vvd-color-canvas});
+	}
+	&:not(.open) {
+		&.end {
+			transform: translateX(100%);
+		}
+		&:not(.end) {
+			transform: translateX(-100%);
+		}
+	}
+
+	&.control.open:not(.modal) {
+		+ .side-drawer-app-content {
+			@include typography.typography-cat-shorthand(body-1);
+			
+			margin-inline-start: #{$inline-size};
+			::slotted(vwc-top-app-bar),
+			::slotted(vwc-top-app-bar-fixed) {
+				--mdc-top-app-bar-width: calc(100% - #{$inline-size});
+			}
+		}
+		&.end {
+			+ .side-drawer-app-content {
+				margin-inline-end: var(--side-drawer-inline-size, 280px);
+				margin-inline-start: 0;
+			}
+		}
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	}
+}
+
+.side-drawer-top-bar {
+	@include typography.typography-cat-shorthand(subtitle-1);
+
+	$gutter: var(#{variables.$side-drawer-padding-top-bar}, #{$padding-default});
+	
+	display: flex;
+	flex-shrink: 0;
+	align-items: center;
+	padding-inline-end: #{$gutter};
+	padding-inline-start: #{$gutter};
+}
+
+.side-drawer-content {
+	$gutter: var(#{variables.$side-drawer-padding-body}, #{$padding-default});
+	
+	background-color: inherit;
+	overflow-y: auto;
+	padding-inline-end: #{$gutter};
+	padding-inline-start: #{$gutter};
+}
+
+.modal {
+	&:not(.end) {
+		inset-inline-start: 0;
+	}
+	&.end {
+		inset-inline-end: 0;
+	}
+}
+
+.scrim {
+	@include scrim-mixins.scrim-variables;
+	
+	position: fixed;
+	z-index: calc(#{$z-index-default} - 1);
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+}