@vonage/vivid-react 2.10.58 → 2.10.59

package/v3/VwcButton/index.d.ts

@@ -0,0 +1,29 @@
+import React, { ReactNode, SyntheticEvent } from 'react';
+/** Base class for button
+* @param {ButtonConnotation | undefined} connotation - The connotation the button should have. **attribute** `connotation`
+* @param {ButtonShape | undefined} shape - The shape the button should have. **attribute** `shape`
+* @param {ButtonAppearance | undefined} appearance - The appearance the button should have. **attribute** `appearance`
+* @param {ButtonSize | undefined} size - The size the button should have. **attribute** `size`
+* @param {boolean} stacked - Indicates the icon is stacked. **attribute** `stacked`
+* @param {boolean} pending - Displays the button in pending state. **attribute** `pending`
+* @param {string | undefined} label - Indicates the button's label. **attribute** `label`
+*/
+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;
+        connotation?: any;
+        shape?: any;
+        appearance?: any;
+        size?: any;
+        stacked?: boolean | undefined;
+        pending?: boolean | undefined;
+        label?: string | undefined;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcButton;

package/v3/VwcButton/index.js

@@ -0,0 +1,286 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "Base class for button",
+ "name": "Button",
+ "cssProperties": [
+  {
+   "name": "--vvd-button-cta-primary",
+   "default": "var(--vvd-color-cta-500)"
+  },
+  {
+   "name": "--vvd-button-cta-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-button-cta-primary-increment",
+   "default": "var(--vvd-color-cta-600)"
+  },
+  {
+   "name": "--vvd-button-cta-contrast",
+   "default": "var(--vvd-color-cta-800)"
+  },
+  {
+   "name": "--vvd-button-cta-fierce",
+   "default": "var(--vvd-color-cta-700)"
+  },
+  {
+   "name": "--vvd-button-cta-firm",
+   "default": "var(--vvd-color-cta-600)"
+  },
+  {
+   "name": "--vvd-button-cta-soft",
+   "default": "var(--vvd-color-cta-100)"
+  },
+  {
+   "name": "--vvd-button-cta-faint",
+   "default": "var(--vvd-color-cta-50)"
+  },
+  {
+   "name": "--vvd-button-success-primary",
+   "default": "var(--vvd-color-success-500)"
+  },
+  {
+   "name": "--vvd-button-success-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-button-success-primary-increment",
+   "default": "var(--vvd-color-success-600)"
+  },
+  {
+   "name": "--vvd-button-success-contrast",
+   "default": "var(--vvd-color-success-800)"
+  },
+  {
+   "name": "--vvd-button-success-fierce",
+   "default": "var(--vvd-color-success-700)"
+  },
+  {
+   "name": "--vvd-button-success-firm",
+   "default": "var(--vvd-color-success-600)"
+  },
+  {
+   "name": "--vvd-button-success-soft",
+   "default": "var(--vvd-color-success-100)"
+  },
+  {
+   "name": "--vvd-button-success-faint",
+   "default": "var(--vvd-color-success-50)"
+  },
+  {
+   "name": "--vvd-button-alert-primary",
+   "default": "var(--vvd-color-alert-500)"
+  },
+  {
+   "name": "--vvd-button-alert-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-button-alert-primary-increment",
+   "default": "var(--vvd-color-alert-600)"
+  },
+  {
+   "name": "--vvd-button-alert-contrast",
+   "default": "var(--vvd-color-alert-800)"
+  },
+  {
+   "name": "--vvd-button-alert-fierce",
+   "default": "var(--vvd-color-alert-700)"
+  },
+  {
+   "name": "--vvd-button-alert-firm",
+   "default": "var(--vvd-color-alert-600)"
+  },
+  {
+   "name": "--vvd-button-alert-soft",
+   "default": "var(--vvd-color-alert-100)"
+  },
+  {
+   "name": "--vvd-button-alert-faint",
+   "default": "var(--vvd-color-alert-50)"
+  },
+  {
+   "name": "--vvd-button-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-button-accent-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-button-accent-primary-increment",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-button-accent-contrast",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-button-accent-fierce",
+   "default": "var(--vvd-color-neutral-700)"
+  },
+  {
+   "name": "--vvd-button-accent-firm",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-button-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
+  },
+  {
+   "name": "--vvd-button-accent-faint",
+   "default": "var(--vvd-color-neutral-50)"
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "connotation",
+   "type": {
+    "text": "ButtonConnotation | undefined"
+   },
+   "description": "The connotation the button should have.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "shape",
+   "type": {
+    "text": "ButtonShape | undefined"
+   },
+   "description": "The shape the button should have.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "appearance",
+   "type": {
+    "text": "ButtonAppearance | undefined"
+   },
+   "description": "The appearance the button should have.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "size",
+   "type": {
+    "text": "ButtonSize | undefined"
+   },
+   "description": "The size the button should have.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "stacked",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates the icon is stacked.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "pending",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Displays the button in pending state.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "label",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "Indicates the button's label.",
+   "privacy": "public"
+  }
+ ],
+ "attributes": [
+  {
+   "name": "connotation",
+   "type": {
+    "text": "ButtonConnotation | undefined"
+   },
+   "description": "The connotation the button should have.",
+   "fieldName": "connotation"
+  },
+  {
+   "name": "shape",
+   "type": {
+    "text": "ButtonShape | undefined"
+   },
+   "description": "The shape the button should have.",
+   "fieldName": "shape"
+  },
+  {
+   "name": "appearance",
+   "type": {
+    "text": "ButtonAppearance | undefined"
+   },
+   "description": "The appearance the button should have.",
+   "fieldName": "appearance"
+  },
+  {
+   "name": "size",
+   "type": {
+    "text": "ButtonSize | undefined"
+   },
+   "description": "The size the button should have.",
+   "fieldName": "size"
+  },
+  {
+   "name": "stacked",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Indicates the icon is stacked.",
+   "fieldName": "stacked"
+  },
+  {
+   "name": "pending",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Displays the button in pending state.",
+   "fieldName": "pending"
+  },
+  {
+   "name": "label",
+   "type": {
+    "text": "string | undefined"
+   },
+   "description": "Indicates the button's label.",
+   "fieldName": "label"
+  }
+ ],
+ "superclass": {
+  "name": "FoundationButton",
+  "package": "@microsoft/fast-foundation"
+ }
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerButton } from '@vonage/vivid'
+
+registerButton('vvd3')
+
+const VwcButton = wrapper(`vvd3-button`,  {
+    events: [{"name":"click","propName":"onClick"}],
+    attributes: [],
+    properties: ['connotation', 'shape', 'appearance', 'size', 'stacked', 'pending', 'label']
+})
+
+VwcButton.displayName = 'VwcButton'
+
+export default VwcButton

package/v3/VwcButton/package.json

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

package/v3/VwcCalendar/index.d.ts

@@ -0,0 +1,35 @@
+import React, { ReactNode } from 'react';
+/** Base class for calendar
+* @param {Date | string | undefined} datetime - The date within a week of choice.
+Accepts any parameter acceptable by the `Date()` constructor. **attribute** `datetime`
+* @param {'sunday' | 'monday' | undefined} startDay - The day to show as the first within a work week.
+Accepts either Sunday or Monday
+Calendar will - programmatically - default to Monday if not specified
+
+(only applicable for views of more than a single day) **attribute** `start-day`
+* @param {string | string[] | undefined | undefined} locales - A locale string or array of locale strings that contain one or more language or locale tags.
+If you include more than one locale string,
+list them in descending order of priority so that the first entry is the preferred locale.
+If you omit this parameter, the default locale of the JavaScript runtime is used.
+This parameter must conform to BCP 47 standards; see the Intl.Collator object for details.
+e.g. en-US | en-US, he-IL **attribute** `locales`
+* @param {boolean} hour12 - The convention of displayed time in which the day runs from midnight to midnight and is divided into 24 or 12 hours.
+Unless provided, choice will be set according to local time preference (e.g. US = 12, IL = 24) **attribute** `hour12`
+* @param  getEventContext - Fire an event
+*/
+declare const VwcCalendar: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        datetime?: any;
+        startDay?: any;
+        locales?: any;
+        hour12?: boolean | undefined;
+        getEventContext?: any;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcCalendar;

package/v3/VwcCalendar/index.js

@@ -0,0 +1,224 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "Base class for calendar",
+ "name": "Calendar",
+ "slots": [
+  {
+   "description": "Default slot.",
+   "name": ""
+  },
+  {
+   "description": "Assign elements to corresponding day column using this slot.",
+   "name": "day-0"
+  },
+  {
+   "description": "Assign elements to corresponding day column using this slot.",
+   "name": "day-1"
+  },
+  {
+   "description": "Assign elements to corresponding day column using this slot.",
+   "name": "day-2"
+  },
+  {
+   "description": "Assign elements to corresponding day column using this slot.",
+   "name": "day-3"
+  },
+  {
+   "description": "Assign elements to corresponding day column using this slot.",
+   "name": "day-4"
+  },
+  {
+   "description": "Assign elements to corresponding day column using this slot.",
+   "name": "day-5"
+  },
+  {
+   "description": "Assign elements to corresponding day column using this slot.",
+   "name": "day-6"
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "datetime",
+   "type": {
+    "text": "Date | string | undefined"
+   },
+   "description": "The date within a week of choice.\nAccepts any parameter acceptable by the `Date()` constructor.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "startDay",
+   "type": {
+    "text": "'sunday' | 'monday' | undefined"
+   },
+   "description": "The day to show as the first within a work week.\nAccepts either Sunday or Monday\nCalendar will - programmatically - default to Monday if not specified\n\n(only applicable for views of more than a single day)",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "locales",
+   "type": {
+    "text": "string | string[] | undefined | undefined"
+   },
+   "description": "A locale string or array of locale strings that contain one or more language or locale tags.\nIf you include more than one locale string,\nlist them in descending order of priority so that the first entry is the preferred locale.\nIf you omit this parameter, the default locale of the JavaScript runtime is used.\nThis parameter must conform to BCP 47 standards; see the Intl.Collator object for details.\ne.g. en-US | en-US, he-IL",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "hour12",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "The convention of displayed time in which the day runs from midnight to midnight and is divided into 24 or 12 hours.\nUnless provided, choice will be set according to local time preference (e.g. US = 12, IL = 24)",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "#activeCalendarEvent",
+   "privacy": "private",
+   "type": {
+    "text": "CalendarEvent | null"
+   },
+   "readonly": true
+  },
+  {
+   "kind": "field",
+   "name": "getEventContext",
+   "default": "getEventContext",
+   "description": "Fire an event",
+   "parameters": [
+    {
+     "description": "event name",
+     "name": "event",
+     "type": {
+      "text": "string"
+     }
+    },
+    {
+     "description": "optional event detail object",
+     "name": "detail",
+     "optional": true,
+     "type": {
+      "text": "Object"
+     }
+    }
+   ],
+   "return": {
+    "type": {
+     "text": "boolean"
+    }
+   }
+  },
+  {
+   "kind": "method",
+   "name": "getCalendarEventContainingCell",
+   "privacy": "private",
+   "parameters": [
+    {
+     "name": "calendarEvent",
+     "type": {
+      "text": "CalendarEvent"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "arrowKeysInteractions",
+   "privacy": "private",
+   "parameters": [
+    {
+     "name": "key",
+     "type": {
+      "text": "PredefindKeys"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "activateElement",
+   "privacy": "private",
+   "parameters": [
+    {
+     "name": "el",
+     "type": {
+      "text": "HTMLElement | null | undefined"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "onKeydown",
+   "parameters": [
+    {
+     "name": "{ key }",
+     "type": {
+      "text": "KeyboardEvent"
+     }
+    }
+   ]
+  }
+ ],
+ "attributes": [
+  {
+   "name": "datetime",
+   "type": {
+    "text": "Date | string | undefined"
+   },
+   "description": "The date within a week of choice.\nAccepts any parameter acceptable by the `Date()` constructor.",
+   "fieldName": "datetime"
+  },
+  {
+   "name": "start-day",
+   "type": {
+    "text": "'sunday' | 'monday' | undefined"
+   },
+   "description": "The day to show as the first within a work week.\nAccepts either Sunday or Monday\nCalendar will - programmatically - default to Monday if not specified\n\n(only applicable for views of more than a single day)",
+   "fieldName": "startDay"
+  },
+  {
+   "name": "locales",
+   "type": {
+    "text": "string | string[] | undefined | undefined"
+   },
+   "description": "A locale string or array of locale strings that contain one or more language or locale tags.\nIf you include more than one locale string,\nlist them in descending order of priority so that the first entry is the preferred locale.\nIf you omit this parameter, the default locale of the JavaScript runtime is used.\nThis parameter must conform to BCP 47 standards; see the Intl.Collator object for details.\ne.g. en-US | en-US, he-IL",
+   "fieldName": "locales"
+  },
+  {
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "The convention of displayed time in which the day runs from midnight to midnight and is divided into 24 or 12 hours.\nUnless provided, choice will be set according to local time preference (e.g. US = 12, IL = 24)",
+   "fieldName": "hour12"
+  }
+ ],
+ "superclass": {
+  "name": "FoundationElement",
+  "package": "@microsoft/fast-foundation"
+ }
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerCalendar } from '@vonage/vivid'
+
+registerCalendar('vvd3')
+
+const VwcCalendar = wrapper(`vvd3-calendar`,  {
+    events: [],
+    attributes: [],
+    properties: ['datetime', 'startDay', 'locales', 'hour12', 'getEventContext']
+})
+
+VwcCalendar.displayName = 'VwcCalendar'
+
+export default VwcCalendar

package/v3/VwcCalendar/package.json

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

package/v3/VwcCalendarEvent/index.d.ts

@@ -0,0 +1,28 @@
+import React, { ReactNode } from 'react';
+/** Base class for calendar-event
+* @param {string | undefined} heading - the heading of the event **attribute** `heading`
+* @param {string | undefined} description - the description of the event **attribute** `description`
+* @param {CalendarEventConnotation | undefined} connotation - The connotation the calendar event should have. **attribute** `connotation`
+* @param {CalendarEventAppearance | undefined} appearance - The appearance the calendar event should have. **attribute** `appearance`
+* @param {number | undefined} overlapCount - sets card display precendence and indentation **attribute** `overlap-count`
+* @param {number | undefined} start - time of day event starts **attribute** `start`
+* @param {number | undefined} duration - event's time duration in hours **attribute** `duration`
+*/
+declare const VwcCalendarEvent: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        heading?: string | undefined;
+        description?: string | undefined;
+        connotation?: any;
+        appearance?: any;
+        overlapCount?: any;
+        start?: any;
+        duration?: any;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcCalendarEvent;