vonage/vivid

Vonage's web UI 🎨 toolbelt

For VIVID@3 please visit vivid-3

Meet VIVID,

Vonage's design system

Vivid provides components and tools to help product teams work more efficiently, deliver faster and safer, while providing end-users single Vonage unique look & feel.

Vivid delivers a Design System built along Vonage's branding guidelines - all this by providing a ready-to-use web components and services.

Striving to stick to the best practices and most up to date standards, Vivid's goal is to provide high quality, easy to use, well-maintained and well documented UI platform for all Vonage products.

---

Documentation

For your convenience, we've organized all our documentation under the following topics.

Introductory

• Getting started
• Architecture
• Roadmap
• Contact us

Guides

• Installation
• Contribution

Browsers support matrix

We are continuously running our tests on 3 major browsers in accordance to browserslist query to match Chrome, FireFox and Safari last 2 versions. The below matrix reflects a thorough verified browsers / versions. There are a good chances that any Chromium based browser is supported as well.

87+ ✔	83+ ✔	88+ ✔	13+ ✔

Attention! This is an initial matrix we've tested so far. While any greater versions are supported for sure, we are working on getting this 'waterline' even lower.

vivid's Issues

follow open-wc guidelines on testing

https://open-wc.org/testing/testing.html

improve carousel's consumer experience

Is your feature request related to a problem? Please describe.
Make carousel using embedded pointers to remove dependency on material icons
Update docs around the consumption

viv-119 carousel buttons accessibility

Describe the bug
Carousel's buttons are not accessible in their stale state - should be accessible.
See also VIV-119.

VIV-67 - remove develop branch

Is your feature request related to a problem? Please describe.
We are presently working in a GitHub flow flavour - develop branch, master for releases, feature branches.

Describe the solution you'd like
We'd like to move over to as fully automated process as possible, therefore we'd like to adopt more of a trunk like approach - feature branches merged directly to the master, which is being published / released from time to time; manually first and automatically later.

Related the this Jira ticket: https://jira.vonage.com/browse/VIV-67

viv-36/extending mwc list items components

Is your feature request related to a problem? Please describe.
mwc team has provided a few opional list items to be used in the list, like list radio button etc. We need to get to feature parity with them here.

VIV-82 - aligning fonts package according to the current design

Is your feature request related to a problem? Please describe.
Right now our fonts service ships much more fonts than the design system is willing to use.
There is a penalty for all those ones, when working in embedded mode.

Describe the solution you'd like
Narrow a list of fonts definitions only to the ones used in the design system.

feat(vwc-button): support button types (submit, reset)

Is your feature request related to a problem? Please describe.
Vonage AI (and probably others) use buttons to submit forms. We should at least support submit and reset types for vwc-button

Describe the solution you'd like
Add a type attribute to the vwc-button and on click activate the parent form's submit/reset methods.

Describe alternatives you've considered
Another alternative would be to re-render the button element with the type selected.

improve loading of fonts (get rid of base64) - explore possibility

Is your feature request related to a problem? Please describe.
right now we are using a base64 encoded fonts injected into the js files to load the fonts

Describe the solution you'd like
Since base64 is raising up the traffic and non-efficient, we'd like to try to load the fonts as binaries.
Since we are still willing to provide consumers an ability to know when the fonts are ready, we'd like to do a verification manually.

Steps proposed:

• V - upload assets to a secured S3 bucket
• V - configure CloudFront distribution with origin rules to serve to known origins
• V - define paths in provided CSS

Migrate documentations from docs folder to WIKI

as the amount of readmes pile up in the docs folder we should probably move all documentation to our wiki.

this can be later consumed as a submodule in a different website (using hugo, 11ty etc'...) and be featured in a website in vivid.vonage.com

storybook - showroom and playground in one place

Is your feature request related to a problem? Please describe.
We'd like to have a demo site of all our components with as rich as possible range of available functionalities showoff.
We also would like to have some playground on the dev-machines that would allow kind of TDD development process.

It would be best to have those 2 in one tech stack, albeit they are serving separate concerns.

Describe the solution you'd like
Seemingly, the product of Storybook can be leveraged to supply both of those needs (while the playground part might be solved via plugins).

Describe alternatives you've considered
There was an attempt to create own custom made web site, which was found to be quite a big effort for many things which are already written and available as open-source.
Previous attempt to use Storybook should be taken into to the notice and further evolved.

Additional context
Add any other context or screenshots about the feature request here.

do base64 conversion of the fonts automatically

Is your feature request related to a problem? Please describe.
When/If we'll update the font binaries, we'll need again to do replacement of the base64 representation of them in the css - this is time-consuming and fragile

Describe the solution you'd like
We'd like it to be a part of a build flow that updates base64 fonts representation

Describe alternatives you've considered
None, it is done once and manually, as of now

Additional context
Add any other context or screenshots about the feature request here.

no documentation for vwc-chip

add documentation for chip / chipset
expose methods, properties

VIV-94: buttons with state/context capabilities

Is your feature request related to a problem? Please describe.
Related to Jira VIV-94.
Right now we have a dual colouring of a buttons. We need to extend it to be capable to express few more states - CallToAction, for example (more possibilities are now in discussion - Error, Success, Warning, Info).

Describe the solution you'd like
Proposed solution is to work on a filled attribute - reflected, which will be accepting the context values, being normal black as a default fallback.

Release date planned?

Just curious if there was a date for a release to the public, even if it's beta?

I'm writing blog posts on Web Components and it would be nice to include Vivid components.

Thanks.

Embed assets as base64 within our design tokens

https://github.com/amzn/style-dictionary/tree/master/examples/advanced/assets-base64-embed

vv-fonts documentation error

Describe the bug
The documentation for the vvd-fonts in the stroy book is wrong.
I'd add:

1. The npm command to install it
2. The consuming part is also wrong. Currently it is: import fonts from 'vvd-fonts.js'; Should be: import fonts from '@vonage/vvd-fonts';.

Inconsistent packages versions

Master (live) branch should bump and publish packages upon release. explore the this process to prevent wrongly published inconsistent packages versions

deploy to the S3 (of storybook, as of now) should be versioned

Is your feature request related to a problem? Please describe.
Our storybook is served from S3 via CloudFront cache. This cache is set to 24H TTL, which is okay, but this get us latency on seeing newly deployed stuff.

Describe the solution you'd like
There are 2 solutions to solve it:

• invalidate cache
• deploy versioned content
  The preferred solutions would be to deploy out content in a versioned manner. This will allow us to immediately see the new content and also allow us to have some backup of the content in case of disaster.
  This requires:
• automation to update CloudFront distribution root object to the new folder
• preferably, auto cleanup (this one will be manual at the beginning due to quite a few deploys that we do and quite a small amount of data we hold)

Describe alternatives you've considered
Cache invalidation might be much more costy and probably more complicated to automate. The other approach is also has a benefits of having versioned fallback in case of disaster.

Additional context
Add any other context or screenshots about the feature request here.

Align with density guideline

Describe the bug
The MDC Density system currently relies completely on Sass mixins, which makes it difficult to customize.
We need to hardcode density properties/attributes until material-components/material-web#841 resolves.

e.g button isn't aligned with Vivid design system dense button

Design tokens

Having application-design inconsistencies can be a frustrating issue and repeatedly rises. In a large organization where are multiple, cross origin, teams of design and engineering, design can easily get lost in the pile of variables.

Having a tokens based contract helps providing a unified look.

Consider using salesforce’s theo or amazon’s style-dictionary.

Take notes on https://youtu.be/OCMt-aA8XBA

vwc-chip styling

hardcode styles on vwc so it looks as in volta designs. afterwards we refer prop values to our root variables. try to keep styling as minimal as possible, align with mwc docs and use as much variable as exposed by mwc

Add usage sample story to vwc-icon

Add a story to demonstrate usage of the vwc-icon component
As per @yinonov's request

replace temporary fonts with permanent ones

Describe the bug
Right now Vivid uses temporary fonts.

To Reproduce
Not relevant.

Expected behavior
Vivid should use production fonts.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

ensure autogenerated stuff is committed properly

Is your feature request related to a problem? Please describe.
As of now, one may update dependencies or change things that affects autogenerated stuff and not commit them.
Anything that is autogenerated and committed, should always be up to date.
Examples of such a files: yarn.lock, readme.md files per component.

Describe the solution you'd like
I'd like to add a validation on PR submitted to develop, that runs any autogeneration script and then tests that the changeset of the GIT is clean (nothing to commit, means no changes, means all autogenerated stuff is committed).

Add icon categories to the `vwc-icon` component's story

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Arrange icons according to categories on vwc-icon's story. As per Juella's request.

Describe alternatives you've considered
None

The demo page link is broken in the contributor page

Describe the bug
The link to the demo page here: https://github.com/Vonage/vivid/blob/develop/docs/contributing.md is broken. It leads to: https://github.com/Vonage/vivid/blob/develop/docs/vivid.vonage.com which does not exist.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://github.com/Vonage/vivid/blob/develop/docs/contributing.md
2. Click on demo page link
3. See error

Expected behavior
Should show the demo page

Screenshots

Desktop (please complete the following information):

• OS: Mac
• Browser chrome

we should add the testing and the linting to CI

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

add support for slider

Is your feature request related to a problem? Please describe.
MWC component has a slider component - we would like to have our implementation of that

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

vwc-menu-cascade

Composing <mwc-menu-surface> with <mwc-list>/<mwc-list-item> can be the right direction for a cascade menu as such menu should act behave as links do.
Should be triggered on hover rather than click while click calls for action on the hovered list-item

fonts-redenifintions-and-storybook

Is your feature request related to a problem? Please describe.
We'll need to redefine the font families that will include constants like width/stretch (3 fonts we'll be using) and also show this thing in storybook.

Customize ripple effect

Ripple effect is a great feature to indicate states (hover, active etc'...).
1 of our goals is to distinguish our brand and create our own identities to assemble a full design system guidelines.
ripple effect is part of that process and identity.
Ripple also associates with the Google Material design brand.

suggested solutions:

1. customize ripple component itself.
2. create our own effect component and override the integration of ripple within all components
3. disabling ripple effect and use paint API (if supported) to add some sort of animation effect with a css property. paint API can be added as a module and fits our modular strategy.

add demo for fonts usage and examples

Is your feature request related to a problem? Please describe.
add demo page for fonts and how to use them

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

migrate vivid assets/demo to dedicated AWS account

Right now our storybook and the rest of the AWS assets (IAM, IPGroup et) are located in the V1 API account - we should move our resources to our dedicated account recently created:

• V create S3 bucket DEV
• V create CloudFront distribution DEV
• V setup IAM (Atmos) pipeline to create automation user (secret key) DEV
• V add a deployment step to the pipelines to deploy storybook to both locations at first DEV
• V direct dev.vivid.vonage.com to the new DEV location
• V create another S3 bucket PROD
• V create another distribution PROD
• V setup IAM (Atmos) entities to get secret for automation user PROD
• V automate deploy of the release to the new PROD account
• V redirect vivid.vonage.com to the new PROD location
• V remove anything related to us from V1 API account

Extend circular progress component

Extend mwc circular progress to vwc-circular-progress...

dh

https://github.com/vonage/vivid/blob/8be72d3639edecec38bf812e165c6f2589168c21/components/menu/stories/menu-basic.stories.js#L24-L28

independent repo for vivid design tokens

set design tokens properties as submodule (vivid-design-tokens)

auto-starter for new component/service

Is your feature request related to a problem? Please describe.
New component or service creation within Vivid already involves quite a number of steps to perform and quite a number of places to remember to touch in order to get up and running.
We'd like to consider an automation script that will generate a folder for a new component/service, with predefined things that are available to be known ahead of time.

Describe the solution you'd like
Writing script which will looks like API below or something like this, that will generate a folder with few essential files so that it is ready to start actually coding the new component/service.
Examples of how can creation of stub for a new component may looks like:

yarn init:component -n my-new-cool-timer -f ts
yarn init:service -n my-next-storage-api -f js

The APIs self should be discussed, especially the -f / --flavor - should or should not we support/allow TS and JS and alike.

carousel - slide's own logic (clicks) malfunction upon sliding

Describe the bug
If consumer has some events logic bound to the slide component (click for example), and once the carousel is being slided - the logic get lost.

To Reproduce
Steps to reproduce the behavior:

1. Create carousel with single slide
2. Bind click event to that slide
3. Scroll carousel once
4. Do the click and see there is no effect

Expected behavior
BL events should be preserved

viv-132: select, textfield and textarea should have a correct border radius

Describe the bug
See VIV-132 form details.
In general: select, textarea and textfield should have a correct border radius, which is now incorrect.

viv-115 fixing slider pin font

Describe the bug
In the slider component the font of the pin looks wide.

Expected behavior
The font should be SemiBold 14px ('normal' width).

Form fields are not associated with the form

Is your feature request related to a problem? Please describe.
When creating forms, most developers would expect the fields to be associated with the form both for submission, reset and validation.
Currently, because our form fields are custom elements, they are not being associated.

Describe the solution you'd like
Implement the spec for custom elements association such that when it is supported in the browser, we can decide to switch.

Describe alternatives you've considered
We could use a polyfill: https://github.com/calebdwilliams/element-internals-polyfill
This adds another not-necessarily-needed dependency to our codebase.

Additional context
Add any other context or screenshots about the feature request here.
There are various tickets on this in MWC. They all evolve around this one:
material-components/material-web#289

Add masking to a textfield

I want to be able to use textfield as a formatted and validated masked input by a pattern such as phone number.

The can be represented like <vwc-maskfield type=“phone”> and use <vwc-textfield> under its hood.

p.s.
Dynamically load libs (such as libphonenumber-js/ alternative) according to the type attribute set.

keypad should maintain a cursor/caret position

Describe the bug
When entering a number and moving the caret to the mid of the test to fix it, hitting the next num will append it, instead of inserting into the caret position.

To Reproduce
Steps to reproduce the behavior:

1. Input few numbers
2. Mover the cursor in the dial number to some mid point
3. Hit another number
4. See, that the number is appended to the end, not in the cursor position

Expected behavior
Component should preserve the caret position.

fix fab design (viv-107)

Describe the bug
Fab fixes according to the QA.
See here the details: https://www.figma.com/file/VVRCQf1BjftlS6pXQmhxiP/Vivid-Storybook-QA?node-id=2%3A648
Counterpart Jira issue: https://jira.vonage.com/browse/VIV-107

prepare/fix the rollup build for the demo app

Describe the bug
We should have a demo app built and deployable instead of storybook.

To Reproduce
Steps to reproduce the behavior:
not relevant

Expected behavior
Build process should create a distribution of demo.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

deliver components in a bundled and minified way

Is your feature request related to a problem? Please describe.
As of now we are delivering a components as a compiled js files (with CSS files if relevant etc)

Describe the solution you'd like
We were required to provide a minified and bundled (if the component consists of several files) unit that would be easier for the consumers to take.

The solution that seems to be taken / investigated is:

• use rollup for each and every component
• wrap up, minify and bundle component's modules/css/assets into a deliverable "dist" folder
• this folder will become a published package

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

fix font definitions in the component

Describe the bug
Our own element should have stable independent definition of the font (formfield) and also some of the elements should have font definition on their input inner elements (textarea, textfield).

SASS font combo defs: Switch to "font"

As per @gullerya request, change the individual font properties set by the font-combo definitions to a single "font:" definition

Replace sass-node-import with sass

It appears that sass supports import and use out of the box. Can replace the deprecated sass-node-import with sass.
Need to make sure there are no unexpected glitches after migrating.

viv-103 initial quality remarks and adjustments on buttons

Describe the bug
There are quite a few remarks from designers perspective on the buttons look and feel, all needs to be fixed or at least triaged.

https://www.figma.com/file/VVRCQf1BjftlS6pXQmhxiP/Vivid-Storybook-QA?node-id=0%3A1

Items related:
1/5 - done (fixed font issue, currently hardcoded values)
2 - done (verified trailing icon supported and added demo part)
3 - done (warning button removed - accessibility issue)
4/47 - done (decided to stay with the black color)
6 - triaged - won't be implemented right now as it's another full story of change
48 - done (CTA background color fixed)