Merge branch 'main' into VIV-2081-audio-player-docs

apps/docs/assets/styles/main.scss

@@ -5,6 +5,66 @@
 @forward './footer';
 @forward './component-page';
 
+/* stylelint-disable */
+@font-face {
+	font-family: SpeziaCompleteVariableUpright;
+	font-stretch: 50% 200%;
+	font-display: block;
+	font-weight: 1 1000;
+	src: url('../fonts/SpeziaCompleteVariableUprightWeb.woff2') format('woff2');
+}
+
+@font-face {
+	font-family: SpeziaMonoCompleteVariable;
+	font-stretch: 50% 200%;
+	font-display: block;
+	font-weight: 1 1000;
+	src: url('../fonts/SpeziaMonoCompleteVariableWeb.woff2') format('woff2');
+}
+
+.vvd-root {
+	--vvd-typography-headline: 500 condensed
+		calc(var(--vvd-size-font-scale-base, 16px) * 4.125) / 1.3333333333333333
+		SpeziaCompleteVariableUpright;
+	--vvd-typography-subtitle: 500 condensed
+		calc(var(--vvd-size-font-scale-base, 16px) * 3.25) / 1.3076923076923077
+		SpeziaCompleteVariableUpright;
+	--vvd-typography-heading-1: 500 condensed
+		calc(var(--vvd-size-font-scale-base, 16px) * 2.5) / 1.3
+		SpeziaCompleteVariableUpright;
+	--vvd-typography-heading-2: 500 condensed
+		calc(var(--vvd-size-font-scale-base, 16px) * 2) / 1.375
+		SpeziaCompleteVariableUpright;
+	--vvd-typography-heading-3: 500 condensed
+		calc(var(--vvd-size-font-scale-base, 16px) * 1.625) / 1.3846153846153846
+		SpeziaCompleteVariableUpright;
+	--vvd-typography-heading-4: 500 condensed
+		calc(var(--vvd-size-font-scale-base, 16px) * 1.25) / 1.4
+		SpeziaCompleteVariableUpright;
+	--vvd-typography-base: 400 ultra-condensed
+		calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
+		SpeziaCompleteVariableUpright;
+	--vvd-typography-base-bold: 600 ultra-condensed
+		calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
+		SpeziaCompleteVariableUpright;
+	--vvd-typography-base-code: 400 ultra-condensed
+		calc(var(--vvd-size-font-scale-base, 16px) * 0.875) / 1.4285714285714286
+		SpeziaMonoCompleteVariable;
+	--vvd-typography-base-condensed: 400 ultra-condensed
+		calc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333
+		SpeziaCompleteVariableUpright;
+	--vvd-typography-base-condensed-bold: 600 ultra-condensed
+		calc(var(--vvd-size-font-scale-base, 16px) * 0.75) / 1.3333333333333333
+		SpeziaCompleteVariableUpright;
+	--vvd-typography-base-extended: 400 ultra-condensed
+		calc(var(--vvd-size-font-scale-base, 16px)) / 1.5
+		SpeziaCompleteVariableUpright;
+	--vvd-typography-base-extended-bold: 600 ultra-condensed
+		calc(var(--vvd-size-font-scale-base, 16px)) / 1.5
+		SpeziaCompleteVariableUpright;
+}
+/* stylelint-enable */
+
 /* #region document */
 
 html {

apps/docs/content/_layouts/base.njk

@@ -20,16 +20,27 @@
     <title>Vivid</title>
     <link rel="icon" href="{{ '/assets/images/vivid-logo.svg' | url }}" type="image/svg+xml">
 
-		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-		<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet">
-
-		<link rel="stylesheet" href="/docs/assets/styles/main.scss">
+		<link
+    		rel="preload"
+    		href="{{ '/assets/fonts/SpeziaCompleteVariableUprightWeb.woff2' | url }}"
+    		type="font/woff2"
+    		as="font"
+    		crossorigin="anonymous"
+    	/>
+    	<link
+    		rel="preload"
+    		href="{{ '/assets/fonts/SpeziaMonoCompleteVariableWeb.woff2' | url }}"
+    		type="font/woff2"
+    		as="font"
+    		crossorigin="anonymous"
+    	/>
 		<style>
 			:not(:defined), .page-not-ready {
 				visibility: hidden;
 			}
 		</style>
 		<style id="vivid-theme"></style>
+		<link rel="stylesheet" href="/docs/assets/styles/main.scss">
 
 		{% set inlinedJs %}
 			{% include "../../assets/scripts/buffer-loaded-iframes.inline.js" %}

apps/docs/content/nav-groups/blog.md

@@ -0,0 +1,5 @@
+---
+permalink: false
+title: Blog
+parent: What's New
+---

apps/docs/content/whats-new/blog/blog.11tydata.js

@@ -0,0 +1,15 @@
+const slugify = require('slugify');
+
+const permalink = (data) =>
+	`/whats-new/${slugify(data.title, { lower: true })}/`;
+
+module.exports = {
+	parent: 'Blog',
+	eleventyComputed: {
+		permalink,
+		order: (data) => -parseInt(data.month.replace('-', '')),
+		eleventyNavigation: {
+			url: permalink,
+		},
+	},
+};

apps/docs/content/whats-new/blog/vivid-live.md

@@ -0,0 +1,139 @@
+---
+title: Figma - Vivid Live
+month: 2025-01
+---
+
+13th January 2025
+
+# Introducing Vivid-Live: Figma Component Library
+
+We're thrilled to announce our new Figma component library – a significant upgrade to our previous design system that takes our Vivid components to the next level. If you've been using our existing library, get ready for a transformative design experience.
+
+## Why a New Library?
+
+Our previous Figma library served us well, but we knew we could do better. This new library isn't just an update – it's a complete reimagination of how design components should work.
+
+## What Has Changed In Vivid-Live Library?
+
+### Perfect Alignment with Our Vivid API
+
+Every component is now precisely synchronized with our Vivid API web components. What you design is exactly what developers will implement – eliminating any discrepancies between design and final product.
+
+### Advanced Figma Token Support
+
+We've fully embraced the latest Figma token features, providing:
+
+- Seamless dark and light mode implementations
+- Consistent color management across design states
+- Enhanced design flexibility
+
+### Improved Organization and Usability
+
+We've completely restructured the library to make:
+
+- Component selection more intuitive
+- Navigation smoother and more logical
+- Design workflow more efficient
+
+### Advanced Customization
+
+Full control through side panel options
+
+- Easily choose component appearances
+- Toggle features on and off
+- Set multiple component states with a few clicks
+- Component description, extra explanation if needed and link to the docs page
+
+### Smart Compositions
+
+Pre-built, interconnected component setups
+
+- Expertly configured component combinations
+- Examples include fully-configured select dropdowns with correct options
+- Ready-to-use menu components with pre-populated menu items
+- Intuitive connections between related components
+
+## Key Improvements
+
+- **Complete API Synchronization:** 100% alignment with Vivid API components
+- **Thoroughly Tested:** We've gone the extra mile to make sure everything works perfectly ([Components QA](https://docs.google.com/spreadsheets/d/1-R6p9tJa6agJRDUkpfDNZ8kS4bXjfm7YcVZY4KoZAqg/edit?gid=0#gid=0))
+- **Expanded Component Set:** New components and enhanced features like:
+
+  - Searchable select
+  - Video-player
+  - Side-Drawer
+  - Tabs - vertical tabs, removable tab
+
+- **Flexible Color Systems:** Full support for dark and light modes
+- **Unparalleled Customization:** Granular control over component design
+
+## How to use Vivid-Live
+
+### #1 - adding the library
+
+[Vivid Live](https://www.figma.com/design/vDH2AytCxEvOulJ7olf9cS/Vivid-Live?node-id=0-1&p=f&t=UZaEYgO1lCigebt5-0) comes with 2 additional assets:
+
+- [Vivid Live Tokens](https://www.figma.com/design/l7PH4EhGm3SXH9FJQBBPZG/Vivid-Live-Tokens?node-id=33646-138859&t=AZY0LVVL7Qe15zCI-1)
+- [Vivid Live Icons](https://www.figma.com/design/isdKI406usLCxZ2U8ljDrn/Vivid-Live-Icons?node-id=274-7267&t=YWWxn3L71PA9Hfuf-1)
+
+Make sure you are adding all 3 of them :)
+
+![adding vivid-live, live-tokens and live-icons](../../../../assets/images/blog-images/add-components.png)
+
+### #2 - adding components
+
+All components are ordered alphabetically.  
+Choose your component and add it.
+
+![component icons guide - OK for vivid QA, ! for designers QA](../../../../assets/images/blog-images/components-icon.png)
+
+### #3 - Dark / Light Theme
+
+Most of the components now are not declared as dark / light and can be configured under figma appearance section to meet your theme:
+
+![](../../../../assets/images/blog-images/dark-light-switch.png)
+
+However - when there’s drop-shadow - the tokens are not changing - so you’ll find a component for dark & light.
+
+![light-dart theme switcher](../../../../assets/images/blog-images/dark-and-light-variations.png)
+
+### #4 - Customize the components
+
+After adding the component - you’ll find all its options in the side panel.  
+From size to appearance to stats and text customization.
+
+![button component customization](../../../../assets/images/blog-images/customize-button.png)
+
+#### Known issues in customizing components
+
+- We did our best to keep the order of the properties reasonable and intuitive but using inner templates sometimes limited that option.
+- We are using inner templates for component variation.
+  - Variation options are not always in the right order, although we did our best to keep the order of the properties reasonable and intuitive
+  - Some variations re-sets the component data. Make sure you pick the upper options before other customization.
+    ![nested and main component options](../../../../assets/images/blog-images/nested-options.png)
+- In order to simplify and light components and for better maintenance we separated some components to different components. For example:
+  - **Button** has lots of variation - button basic, button basic transparent, stacked button and more:
+    ![buttons components](../../../../assets/images/blog-images/buttons-components.png)
+  - **Time Picker** (and same for all components with open drop-downs), we have a component for the input and a component that is composition of the input and a dropdown with the option set that fits for it.
+    ![time-picker](../../../../assets/images/blog-images/time-picker.png)
+
+### #5 - Slots
+
+Vivid-Live is synced to the API, which means, like the actual components, it uses Slots.
+For each slot you can either show / hide the slot and swap the default slot with your content.
+
+![slot swap](../../../../assets/images/blog-images/slot-swap.png)
+
+### #6 - Composition
+
+Components like select, menu, tabs and more have a component that is built with composition.
+You can configure the composition when entering the layer in the layers panel, you’ll see its options in the right panel.
+
+![composition-inside-components](../../../../assets/images/blog-images/composition-inside-components.png)
+
+## We're Listening
+
+This library is a living, breathing resource. We're committed to continuous improvement and value your feedback.  
+Spot something that could be even better?  
+We want to [hear from you](https://vonage.enterprise.slack.com/archives/G0169E0RF6K)!
+❤

libs/components/src/lib/menu/README.md

@@ -269,6 +269,11 @@ Use the `--menu-max-inline-size` variable to set the menu's inline size.
 
 - Default: `max-content`
 
+<vwc-note connotation="information" icon="info-solid">
+<p>When setting a value to the <code>max-inline-size</code> - make sure the menu is OK in small resolutions as well. </p>
+<p>In mobile, the <code>max-inline-size</code> is <code>300px</code> by default, but can be changed with the css-variable. </p>
+</vwc-note>
+
 ```html preview 150px
 <style>
 	vwc-menu {

libs/components/src/lib/menu/menu.scss

@@ -15,9 +15,16 @@
 	gap: 8px;
 	inline-size: max-content;
 	max-block-size: var(#{variables.$menu-block-size}, 408px);
-	max-inline-size: var(#{variables.$menu-max-inline-size});
 	min-inline-size: var(#{variables.$menu-min-inline-size});
 	padding-block: 8px;
+
+	@media not all and (width >= 600px) {
+		max-inline-size: var(#{variables.$menu-max-inline-size}, 300px);
+	}
+
+	@media (width >= 600px) {
+		max-inline-size: var(#{variables.$menu-max-inline-size});
+	}
 }
 
 ::slotted(a) {

libs/components/src/lib/menu/ui.test.ts

@@ -46,6 +46,44 @@ async function testAbsolutStrategy({ page }: { page: Page }) {
 	);
 }
 
+async function testMobileInlineSize({ page }: { page: Page }) {
+	const template = `
+<style>
+			.wrapper {
+				width: 360px;
+				height: 400px;
+			}
+		</style>
+<div class="wrapper">
+ <vwc-menu open placement="bottom-start" >
+	<vwc-button slot="anchor" label="Menu" appearance="outlined"></vwc-button>
+  <vwc-menu-item text="Menu item 1 with long text that gets ellipsis"></vwc-menu-item>
+  <vwc-menu-item text="Menu item 2 with long text that gets ellipsis"></vwc-menu-item>
+  <vwc-menu-item text="Menu item 3 with long text that gets ellipsis"></vwc-menu-item>
+ </vwc-menu>
+</div>`;
+
+	page.setViewportSize({ width: 360, height: 400 });
+
+	await loadComponents({
+		page,
+		components,
+	});
+	await loadTemplate({
+		page,
+		template,
+	});
+
+	const testWrapper = await page.$('#wrapper');
+
+	await page.waitForLoadState('networkidle');
+
+	expect(await testWrapper?.screenshot()).toMatchSnapshot(
+		'snapshots/mobile-menu.png',
+		{ maxDiffPixelRatio: 0.01 }
+	);
+}
+
 test('should show the component', async ({ page }: { page: Page }) => {
 	const template = `
 		<style>
@@ -89,3 +127,4 @@ test('should show the component', async ({ page }: { page: Page }) => {
 });
 
 test('menu with absolute strategy', testAbsolutStrategy);
+test('menu with max-inline-size in mobile', testMobileInlineSize);

libs/components/src/lib/video-player/partials/variables.scss

@@ -0,0 +1,8 @@
+// setting variables with hard-coded color, since design required both dark & light be the same
+$video-player-neutral-900: #1a1a1a;
+$video-player-neutral-950: --vvd-color-neutral-950;
+$video-player-neutral-800: #333;
+$video-player-canvas-text: #fff;
+$video-player-canvas: #0d0d0d;
+$video-player-canvas-opacity: #0d0d0dcc;
+$video-player-color-surface-4dp: linear-gradient(#ffffff14, #ffffff14), #0d0d0d;

libs/components/src/lib/video-player/ui.test.ts

@@ -11,7 +11,7 @@ test('should show the component', async ({ page }: { page: Page }) => {
 	const template = `
 		<style>
 			.layout {
-				max-width: 800px;
+				max-width: 760px;
 				padding: 8px;
 			}
 			.spacer {