@vonage/vivid - npm Package Compare versions

Comparing version 3.0.0-next.44 to 3.0.0-next.45

index.js

@@ -21,4 +21,5 @@ export { vividAccordion } from './accordion/index.js';
 export { vividSideDrawer } from './side-drawer/index.js';
-export { vividSidenav } from './sidenav/index.js';
-export { vividSidenavItem } from './sidenav-item/index.js';
+export { vividNav } from './nav/index.js';
+export { vividNavItem } from './nav-item/index.js';
+export { vividNavDisclosure } from './nav-disclosure/index.js';
 export { vividText } from './text/index.js';
@@ -25,0 +26,0 @@ export { vividTextfield } from './text-field/index.js';

lib/components.d.ts

@@ -21,4 +21,5 @@ export * from './accordion';
 export * from './side-drawer';
-export * from './sidenav';
-export * from './sidenav-item';
+export * from './nav';
+export * from './nav-item';
+export * from './nav-disclosure';
 export * from './text';
@@ -25,0 +26,0 @@ export * from './text-field';

package.json

 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.44",
+  "version": "3.0.0-next.45",
   "type": "module",
   "module": "./index.esm.js",
   "main": "./index.js",
+  "homepage": "https://vivid.deno.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vonage/vivid-3",
+    "directory": "libs/components"
+  },
+  "bugs": {
+    "url": "https://github.com/Vonage/vivid-3/issues"
+  },
+  "license": "Apache-2.0",
   "exports": {
@@ -28,5 +38,5 @@ "./accordion": "./accordion",
     "./side-drawer": "./side-drawer",
-    "./sidenav": "./sidenav",
-    "./sidenav-item": "./sidenav-item",
-    "./sidenav-disclosure": "./sidenav-disclosure",
+    "./nav": "./nav",
+    "./nav-item": "./nav-item",
+    "./nav-disclosure": "./nav-disclosure",
     "./text": "./text",
@@ -33,0 +43,0 @@ "./text-field": "./text-field",

README.md

@@ -1,36 +0,21 @@
-<div class="home-page-hero">
-  <a href="https://github.com/vonage/vivid-3">
-    <img src="/vivid-logo.svg" style="" alt="Vivid Logo" width="120">
-  </a>
-  <h1>Welcome to Vivid</h1>
 
-[![codecov][codecov-shield]][codecov-url]
-[![Contributors][contributors-shield]][contributors-url]
-[![Forks][forks-shield]][forks-url]
-[![Stargazers][stars-shield]][stars-url]
-[![Issues][issues-shield]][issues-url]
-[![Apache 2.0 License][license-shield]][license-url]
+# Vivid UI
 
+Essential UI **web components** for building modern web applications, bound to provide a **safe**, **simple** and **intuitive** interface.
 
-  <h6>
-    Vonage's design system platform targeted to provide </br>incorporated, battery-charged web components.
-  </h6>
-  <a class="home-page-hero-docs-btn" href="https://vivid.deno.dev"><strong>Explore the docs</strong></a>
-  <div class="home-page-hero-docs-links">
-    <a href="https://github.com/Vonage/vivid-3/issues/new?assignees=&labels=&template=bug_report.md&title=">Report Bug</a>
-    <span>|</span>    
-    <a href="https://github.com/Vonage/vivid-3/issues/new?assignees=&labels=&template=feature_request.md&title=">Request Feature</a>
-  </div>
-</div>
+<!-- ! TODO add visual - GIF or image reflecting an easy integration of vivid in code and page result -->
+![the Vivid logo](/assets/images/vivid-cover-wide.avif)
 
-### Installation
+## Installation
 
-run:
+To integrate Vivid components into your project, run:
 
 ```bash
-npm install @vonage/vivid
+npm install @vonage/vivid # or yarn add @vonage/vivid
 ```
 
-use:
+## Usage
 
+Import components in your project via [side effect imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_a_module_for_its_side_effects_only):
+
 ```js
@@ -40,2 +25,4 @@ import '@vonage/vivid/button';
 
+And include in HTML:
+
 ```html
@@ -45,10 +32,81 @@ <vwc-button label="Click me"></vwc-button>
 
+For a full list of components and API, explore the [components docs](https://vivid.deno.dev/components/accordion/) 📚.
+
+### Prerequisites
+
+The Vivid components library rely on a set of **core styles** to:
+
+- Be present in the DOM
+
+- Be shared across all components
+
+- Apply common design identities (such as colors, typography, spacing etc')
+
+- Ensure the components look as intended.
+
+As the task of loading css is not trivial, and may vary from project to project, this library does not provide any way to load the css. It is up to the author to load the css in the most appropriate manner for their project.
+
+To **include the styles**, css files must be loaded into the project from the `node_modules/@vonage/vivid/styles` folder.
+
+The folder contains the following files:
+
+- Fonts
+
+  - `fonts/spezia.css` - Loads the *Spezia* variable font and specifies its font face definition. *Spezia* is Vonage's branded font and is required by most Vivid components
+
+- Themes - only one theme can apply at a time. thus, only one is required to be loaded
+
+  - `themes/light.css` - Light theme
+
+  - `themes/dark.css` - Dark theme
+
+Note: scss users can simply [forward](https://sass-lang.com/documentation/at-rules/forward) the styles to their scss project:
+
+```css
+@forward 'node_modules/@vonage/vivid/styles/fonts/spezia';
+@forward 'node_modules/@vonage/vivid/styles/themes/light';
+```
+
+## Support
+
+This library is open source, developed and maintained by the [Vonage Vivid team](Vonage/vivid).
+
+For any questions, please open a [bug report](https://github.com/Vonage/vivid-3/issues/new?assignees=&labels=&template=bug_report.md&title=) or [feature request](https://github.com/Vonage/vivid-3/issues/new?assignees=&labels=&template=feature_request.md&title=).
+
 ## Roadmap
 
-[view components status](https://github.com/orgs/Vonage/projects/6)
+- View [components status](https://github.com/orgs/Vonage/projects/6)
 
-Follow our API planning on the [Vivid project components' view](https://github.com/orgs/Vonage/projects/3/views/13)
+- [What's on our plate](https://github.com/orgs/Vonage/projects/3/views/7)
 
-We publish a _next_ release on every successful merge to main, so you never need to wait for a new stable version to make use of any updates.
+- See the [open issues](https://github.com/vonage/vivid-3/issues) for a full list of proposed features (and known issues).
 
-See the [open issues](https://github.com/vonage/vivid-3/issues) for a full list of proposed features (and known issues).
+We publish a *next* release on every successful merge to main, so you never need to wait for a new stable version to make use of any updates.
+
+## Contributing
+
+Please read [CONTRIBUTING.md](.github/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
+
+## Versioning
+
+We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [npm page](https://www.npmjs.com/package/@vonage/vivid).
+
+## Authors
+
+See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.
+
+## License
+
+This project is licensed under the Apache 2.0 License - see the [LICENSE.md](LICENSE.md) file for details
+
+<!-- ## Acknowledgments
+
+- Hat tip to anyone whose code was used
+- Inspiration
+- etc -->
+
+## Built With
+
+- [Fast](https://www.fast.design) - to extend element classes and compile code to native web components
+- [Typescript](https://www.typescriptlang.org) - for ergonomic and type-safe code
+- [Sass](https://sass-lang.com) - for styles authoring extensibility and consistency

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

715691

increased by0.33%

Number of low license alerts

0

decreased by-100%

Lines of code

16960

increased by0.01%

Number of low maintenance alerts

1

decreased by-50%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

111

increased by109.43%

Number of low supply chain risk alerts

21

decreased by-4.55%

No dependency changes