@vonage/vivid-react 2.10.56 → 2.10.59

package/README.md

@@ -88,13 +88,8 @@ Adding the `resolutions` field when using `yarn` might help get the correct vers
 
 If the one you're looking for is missing, just [add a new one](#adding-a-component), so everyone can access them.
 
-# Usage
-
-## Artifactory
-To use this package, you need to have Artifactory setup for your project. See how to do it [here](https://confluence.vonage.com/pages/viewpage.action?pageId=123601806) and [here](https://github.com/newvoicemedia/vonage-cli/blob/master/pipeline-guide/how-to/NODEJS-NPM-DEVELOPMENT.md).
-
 ## Installation
-Once you have Artifactory configured, just run:
+Just run:
 ```shell
 $ yarn add @vonage/vivid-react
 ```
@@ -103,7 +98,6 @@ No need for importing `vivid` directly. The dependencies will be installed for y
 ## Initialization
 
 ```javascript
-// Function
 import ReactDOM from 'react-dom'
 import { initVivid } from '@vonage/vivid-react'
 const rootElement = document.getElementById('react-root')
@@ -115,16 +109,32 @@ const renderApp = () => {
   )
 }
 
+// for Vivid 2.x
 initVivid(rootElement).then(renderApp)
+
+// OR
+
+// for Vivid 2.x + Vivid 3.x
+initVivid(rootElement, () => {}, {
+  font: 'oss',
+  theme: 'light'
+}).then(renderApp)
 ```
 
 ## Importing
+For vivid **2.x**
 Instead of importing each `vivid` component from `@vonage/vwc-*`, import them from `@vonage/vivid-react` instead.
 ```javascript
 import VwcCheckbox from '@vonage/vivid-react/VwcCheckbox'
 import VwcSlider from '@vonage/vivid-react/VwcSlider'
 ```
 
+For vivid **3.x**
+```javascript
+import VwcCheckbox from '@vonage/vivid-react/v3/VwcCheckbox'
+import VwcSlider from '@vonage/vivid-react/v3/VwcSlider'
+```
+
 ## Bundling
 This package is an ES module, so you might need to add some configuration to your bundling process.
 

package/VwcAccordion/index.d.ts

@@ -0,0 +1,14 @@
+import React, { ReactNode } from 'react';
+import '@vonage/vwc-accordion';
+/**
+* @param {boolean} multi  attribute: <VwcAccordion multi />
+*/
+declare const VwcAccordion: (props: {
+    children?: ReactNode;
+    slot?: string | undefined;
+    id?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+    multi?: boolean | undefined;
+}) => JSX.Element;
+export default VwcAccordion;

package/VwcAccordion/index.js

@@ -0,0 +1,59 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "name": "vwc-accordion",
+ "path": "./../node_modules/@vonage/vwc-accordion/src/vwc-accordion.ts",
+ "attributes": [
+  {
+   "name": "multi",
+   "type": "boolean",
+   "default": "false"
+  }
+ ],
+ "properties": [
+  {
+   "name": "styles",
+   "type": "CSSResult",
+   "default": "\"style\""
+  },
+  {
+   "name": "multi",
+   "attribute": "multi",
+   "type": "boolean",
+   "default": "false",
+   "bindable": false
+  }
+ ],
+ "events": []
+}
+*/
+import PropTypes from 'prop-types'
+import wrapper from '@vonage/vivid-react-wrapper'
+import '@vonage/vwc-accordion'
+
+
+/**  
+* @param {boolean} multi  attribute: <VwcAccordion multi />
+*/
+const VwcAccordion = wrapper('vwc-accordion',  {
+    events: [],
+    attributes: [],
+    properties: []
+});
+
+VwcAccordion.propTypes = {
+  multi: PropTypes.bool/* default: false *//* attribute: multi */
+}
+
+VwcAccordion.defaultProps = {
+  multi: false
+}
+
+VwcAccordion.displayName = 'VwcAccordion'
+
+
+
+export default VwcAccordion

package/VwcAccordion/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vonage/vivid-react-vwc-accordion",
+  "version": "2.10.59",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "@vonage/vwc-accordion": "2.42.0"
+  }
+}

package/VwcActionGroup/index.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import '@vonage/vwc-action-group';
+/** Represents an action-group custom element.
+* @param {ActionGroupShape | undefined} shape  attribute: <VwcActionGroup shape />
+* @param {ActionGroupLayout | undefined} layout  attribute: <VwcActionGroup layout />
+* @param {boolean} tight  attribute: <VwcActionGroup tight />
+*/
+declare const VwcActionGroup: (props: {
+    children?: ReactNode;
+    slot?: string | undefined;
+    id?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+    shape?: any;
+    layout?: any;
+    tight?: boolean | undefined;
+}) => JSX.Element;
+export default VwcActionGroup;

package/VwcActionGroup/index.js

@@ -0,0 +1,90 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "name": "vwc-action-group",
+ "path": "./../node_modules/@vonage/vwc-action-group/src/vwc-action-group.ts",
+ "description": "Represents an action-group custom element.",
+ "attributes": [
+  {
+   "name": "shape",
+   "type": "ActionGroupShape | undefined"
+  },
+  {
+   "name": "layout",
+   "type": "ActionGroupLayout | undefined"
+  },
+  {
+   "name": "tight",
+   "type": "boolean",
+   "default": "false"
+  }
+ ],
+ "properties": [
+  {
+   "name": "styles",
+   "type": "CSSResult",
+   "default": "\"style\""
+  },
+  {
+   "name": "shape",
+   "attribute": "shape",
+   "type": "ActionGroupShape | undefined",
+   "bindable": false
+  },
+  {
+   "name": "layout",
+   "attribute": "layout",
+   "type": "ActionGroupLayout | undefined",
+   "bindable": false
+  },
+  {
+   "name": "tight",
+   "attribute": "tight",
+   "type": "boolean",
+   "default": "false",
+   "bindable": false
+  }
+ ],
+ "slots": [
+  {
+   "name": "",
+   "description": "This is a default/unnamed slot to assign text content. *deprecated* please use _text_ property instead"
+  }
+ ],
+ "events": []
+}
+*/
+import PropTypes from 'prop-types'
+import wrapper from '@vonage/vivid-react-wrapper'
+import '@vonage/vwc-action-group'
+
+
+/** Represents an action-group custom element. 
+* @param {ActionGroupShape | undefined} shape  attribute: <VwcActionGroup shape />
+* @param {ActionGroupLayout | undefined} layout  attribute: <VwcActionGroup layout />
+* @param {boolean} tight  attribute: <VwcActionGroup tight />
+*/
+const VwcActionGroup = wrapper('vwc-action-group',  {
+    events: [],
+    attributes: [],
+    properties: []
+});
+
+VwcActionGroup.propTypes = {
+  shape: PropTypes.any /* ActionGroupShape | undefined *//* attribute: shape */,
+  layout: PropTypes.any /* ActionGroupLayout | undefined *//* attribute: layout */,
+  tight: PropTypes.bool/* default: false *//* attribute: tight */
+}
+
+VwcActionGroup.defaultProps = {
+  tight: false
+}
+
+VwcActionGroup.displayName = 'VwcActionGroup'
+
+
+
+export default VwcActionGroup

package/VwcActionGroup/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vonage/vivid-react-vwc-action-group",
+  "version": "2.10.59",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "@vonage/vwc-action-group": "2.42.0"
+  }
+}

package/VwcBadge/index.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactNode } from 'react';
+import '@vonage/vwc-badge';
+/** Represents a badge custom element.
+badge is a label that holds small amounts of information. A badge can be used to display unread notifications, or to label a block of text. Badges don’t work for navigation because they can't include a hyperlink.
+* @param {BadgeConnotation | undefined} connotation  attribute: <VwcBadge connotation />
+* @param {BadgeShape | undefined} shape  attribute: <VwcBadge shape />
+* @param {BadgeLayout | undefined} layout  attribute: <VwcBadge layout />
+* @param {boolean} dense  attribute: <VwcBadge dense />
+* @param {boolean} enlarged  attribute: <VwcBadge enlarged />
+* @param {string | undefined} text  attribute: <VwcBadge text />
+* @param {string | undefined} icon  attribute: <VwcBadge icon />
+* @param {string | undefined} iconTrailing  attribute: <VwcBadge iconTrailing />
+*/
+declare const VwcBadge: (props: {
+    children?: ReactNode;
+    slot?: string | undefined;
+    id?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+    connotation?: any;
+    shape?: any;
+    layout?: any;
+    dense?: boolean | undefined;
+    enlarged?: boolean | undefined;
+    text?: string | undefined;
+    icon?: string | undefined;
+    iconTrailing?: string | undefined;
+}) => JSX.Element;
+export default VwcBadge;

package/VwcBadge/index.js

@@ -0,0 +1,154 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "name": "vwc-badge",
+ "path": "./../node_modules/@vonage/vwc-badge/src/vwc-badge.ts",
+ "description": "Represents a badge custom element.\nbadge is a label that holds small amounts of information. A badge can be used to display unread notifications, or to label a block of text. Badges don’t work for navigation because they can't include a hyperlink.",
+ "attributes": [
+  {
+   "name": "connotation",
+   "type": "BadgeConnotation | undefined"
+  },
+  {
+   "name": "shape",
+   "type": "BadgeShape | undefined"
+  },
+  {
+   "name": "layout",
+   "type": "BadgeLayout | undefined"
+  },
+  {
+   "name": "dense",
+   "type": "boolean",
+   "default": "false"
+  },
+  {
+   "name": "enlarged",
+   "type": "boolean",
+   "default": "false"
+  },
+  {
+   "name": "text",
+   "type": "string | undefined"
+  },
+  {
+   "name": "icon",
+   "type": "string | undefined"
+  },
+  {
+   "name": "iconTrailing",
+   "type": "string | undefined"
+  }
+ ],
+ "properties": [
+  {
+   "name": "styles",
+   "type": "CSSResult",
+   "default": "\"style\""
+  },
+  {
+   "name": "connotation",
+   "attribute": "connotation",
+   "type": "BadgeConnotation | undefined",
+   "bindable": false
+  },
+  {
+   "name": "shape",
+   "attribute": "shape",
+   "type": "BadgeShape | undefined",
+   "bindable": false
+  },
+  {
+   "name": "layout",
+   "attribute": "layout",
+   "type": "BadgeLayout | undefined",
+   "bindable": false
+  },
+  {
+   "name": "dense",
+   "attribute": "dense",
+   "type": "boolean",
+   "default": "false",
+   "bindable": false
+  },
+  {
+   "name": "enlarged",
+   "attribute": "enlarged",
+   "type": "boolean",
+   "default": "false",
+   "bindable": false
+  },
+  {
+   "name": "text",
+   "attribute": "text",
+   "type": "string | undefined",
+   "bindable": false
+  },
+  {
+   "name": "icon",
+   "attribute": "icon",
+   "type": "string | undefined",
+   "bindable": false
+  },
+  {
+   "name": "iconTrailing",
+   "attribute": "iconTrailing",
+   "type": "string | undefined",
+   "bindable": false
+  }
+ ],
+ "slots": [
+  {
+   "name": "",
+   "description": "This is a default/unnamed slot to assign text content. *deprecated* please use _text_ property instead"
+  }
+ ],
+ "events": []
+}
+*/
+import PropTypes from 'prop-types'
+import wrapper from '@vonage/vivid-react-wrapper'
+import '@vonage/vwc-badge'
+
+
+/** Represents a badge custom element.
+badge is a label that holds small amounts of information. A badge can be used to display unread notifications, or to label a block of text. Badges don’t work for navigation because they can't include a hyperlink. 
+* @param {BadgeConnotation | undefined} connotation  attribute: <VwcBadge connotation />
+* @param {BadgeShape | undefined} shape  attribute: <VwcBadge shape />
+* @param {BadgeLayout | undefined} layout  attribute: <VwcBadge layout />
+* @param {boolean} dense  attribute: <VwcBadge dense />
+* @param {boolean} enlarged  attribute: <VwcBadge enlarged />
+* @param {string | undefined} text  attribute: <VwcBadge text />
+* @param {string | undefined} icon  attribute: <VwcBadge icon />
+* @param {string | undefined} iconTrailing  attribute: <VwcBadge iconTrailing />
+*/
+const VwcBadge = wrapper('vwc-badge',  {
+    events: [],
+    attributes: [],
+    properties: []
+});
+
+VwcBadge.propTypes = {
+  connotation: PropTypes.any /* BadgeConnotation | undefined *//* attribute: connotation */,
+  shape: PropTypes.any /* BadgeShape | undefined *//* attribute: shape */,
+  layout: PropTypes.any /* BadgeLayout | undefined *//* attribute: layout */,
+  dense: PropTypes.bool/* default: false *//* attribute: dense */,
+  enlarged: PropTypes.bool/* default: false *//* attribute: enlarged */,
+  text: PropTypes.string/* attribute: text */,
+  icon: PropTypes.string/* attribute: icon */,
+  iconTrailing: PropTypes.string/* attribute: iconTrailing */
+}
+
+VwcBadge.defaultProps = {
+  dense: false,
+  enlarged: false
+}
+
+VwcBadge.displayName = 'VwcBadge'
+
+
+
+export default VwcBadge

package/VwcBadge/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vonage/vivid-react-vwc-badge",
+  "version": "2.10.59",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "@vonage/vwc-badge": "2.42.0"
+  }
+}

package/VwcBanner/index.d.ts

@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react';
+import '@vonage/vwc-banner';
+/**
+* @param {string} message
+* @param {boolean} dismissible
+* @param {BannerConnotation | undefined} connotation
+* @param {string | undefined} icon
+* @param {boolean} open
+* @param {BannerRole} role
+* @param {BannerAriaLive} ariaLive
+*/
+declare const VwcBanner: (props: {
+    children?: ReactNode;
+    slot?: string | undefined;
+    id?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+    message?: string | undefined;
+    dismissible?: boolean | undefined;
+    connotation?: any;
+    icon?: string | undefined;
+    open?: boolean | undefined;
+    role?: any;
+    ariaLive?: any;
+}) => JSX.Element;
+export default VwcBanner;

package/VwcBanner/index.js

@@ -0,0 +1,91 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "name": "vwc-banner",
+ "path": "./../node_modules/@vonage/vwc-banner/vwc-banner.d.ts",
+ "properties": [
+  {
+   "name": "styles",
+   "type": "CSSResult[]"
+  },
+  {
+   "name": "message",
+   "type": "string",
+   "bindable": false
+  },
+  {
+   "name": "dismissible",
+   "type": "boolean",
+   "bindable": false
+  },
+  {
+   "name": "connotation",
+   "type": "BannerConnotation | undefined",
+   "bindable": false
+  },
+  {
+   "name": "icon",
+   "type": "string | undefined",
+   "bindable": false
+  },
+  {
+   "name": "open",
+   "type": "boolean",
+   "bindable": false
+  },
+  {
+   "name": "role",
+   "type": "BannerRole",
+   "bindable": false
+  },
+  {
+   "name": "ariaLive",
+   "type": "BannerAriaLive",
+   "bindable": false
+  }
+ ],
+ "events": []
+}
+*/
+import PropTypes from 'prop-types'
+import wrapper from '@vonage/vivid-react-wrapper'
+import '@vonage/vwc-banner'
+
+
+/**  
+* @param {string} message  
+* @param {boolean} dismissible  
+* @param {BannerConnotation | undefined} connotation  
+* @param {string | undefined} icon  
+* @param {boolean} open  
+* @param {BannerRole} role  
+* @param {BannerAriaLive} ariaLive  
+*/
+const VwcBanner = wrapper('vwc-banner',  {
+    events: [],
+    attributes: [],
+    properties: []
+});
+
+VwcBanner.propTypes = {
+  message: PropTypes.string,
+  dismissible: PropTypes.bool,
+  connotation: PropTypes.any /* BannerConnotation | undefined */,
+  icon: PropTypes.string,
+  open: PropTypes.bool,
+  role: PropTypes.any /* BannerRole */,
+  ariaLive: PropTypes.any /* BannerAriaLive */
+}
+
+VwcBanner.defaultProps = {
+
+}
+
+VwcBanner.displayName = 'VwcBanner'
+
+
+
+export default VwcBanner

package/VwcBanner/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@vonage/vivid-react-vwc-banner",
+  "version": "2.10.59",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "private": true,
+  "license": "MIT",
+  "dependencies": {
+    "@vonage/vwc-banner": "2.42.0"
+  }
+}

package/VwcButton/index.d.ts

@@ -0,0 +1,55 @@
+import React, { ReactNode, SyntheticEvent } from 'react';
+import '@vonage/vwc-button';
+/**
+* @param {string | undefined} name
+* @param {string | undefined} value
+* @param {boolean} enlarged
+* @param {ButtonLayout | undefined} layout
+* @param {ButtonConnotation | undefined} connotation
+* @param {ButtonShape | undefined} shape
+* @param {string} type
+* @param {string | null} formId
+* @param {boolean} stacked
+* @param {HTMLFormElement | null} form
+* @param {ShadowRootInit} shadowRootOptions
+* @param {boolean} raised
+* @param {boolean} unelevated
+* @param {boolean} outlined
+* @param {boolean} dense
+* @param {boolean} disabled
+* @param {boolean} trailingIcon
+* @param {boolean} fullwidth
+* @param {string} icon
+* @param {string} label
+* @param {boolean} expandContent
+*/
+declare const VwcButton: (props: {
+    children?: ReactNode;
+    slot?: string | undefined;
+    id?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+    onClick?: ((event: SyntheticEvent) => void) | undefined;
+    name?: string | undefined;
+    value?: string | undefined;
+    enlarged?: boolean | undefined;
+    layout?: any;
+    connotation?: any;
+    shape?: any;
+    type?: string | undefined;
+    formId?: string | null | undefined;
+    stacked?: boolean | undefined;
+    form?: any;
+    shadowRootOptions?: any;
+    raised?: boolean | undefined;
+    unelevated?: boolean | undefined;
+    outlined?: boolean | undefined;
+    dense?: boolean | undefined;
+    disabled?: boolean | undefined;
+    trailingIcon?: boolean | undefined;
+    fullwidth?: boolean | undefined;
+    icon?: string | undefined;
+    label?: string | undefined;
+    expandContent?: boolean | undefined;
+}) => JSX.Element;
+export default VwcButton;