A system for you! With Vivid packages, libraries and web components you won't have to build and style from scratch ever again.
We are working hard to make our consumers' experience as smooth as possible.
Vivid team produces contents for and with both, the designers team and the Web developers.
Design System is maintained by the designers team across Vonage in Figma tool. Many of those 'raw' materials are automatically pulled into the Vivid's components implementation - so that we'll all rely on a single source of truth. We are constantly working to make that automation process more robust, while still widening the automated area.
See more on this aspect in the Design System documentation section.
Developing over Vivid is to actually use our services and components in the business applications. Indeed, we can primarily split our product into services and components.
Some of the generic functionalities are provided as services.
For example, one can user vvd-scheme service to manage the scheme, be notified of scheme changes etc.
Another noticeable service is vvd-context, which is responsible for setting up a Vivid's styling of the generic HTML elements (h1, p, code etc).
Most of the Vivid's value can be achieved via directly using our components.
Encapsulated by means of ShadowDOM, scrutinely styles and functionalized according to the Design System UI/UX and thoroughly tested - those are a solid building blocks for any Vonage web application.
We are set first to deliver the simple building blocks - atom components, like vwc-button, vwc- icon, vwc-select etc.
On top of those, we are going to deliver, and actually already have some, of the complex components - composite ones, like vwc-carousel ,vwc-file-picker, vwc-media-controller etc.
We are using Storybook platform to document and exemplify our deliveries. There are several Storybooks available, each for its own sake:
- the latest production version is shown here: vivid.vonage.com
- the current development state (reflecting our main branch) is here: dev.vivid.vonage.com
- each pull-request also has its own deployment, so that any feature in progress can be reviewed instantly - those dynamic deployments can be found in the GitHub's PR pages
Additionally, we maintain the following showcases: