@vonage/vivid-react 2.10.47 → 2.10.58

package/src/patches/VwcCard/vwcCardWithMenu.js

@@ -0,0 +1,14 @@
+/**
+ * Patches provided `VwcCard` (styles) to allow a sub menu triggered from an
+ * action in the card to appear over the card and not inside of it
+ *
+ * @param {HTMLElement} element - target `VwcCard` element containing the action
+ * that triggers the menu
+ * @example <VwcCard ref={vwcCardWithMenu}><VwcMenu slot='actions' /></VwcCard>
+ */
+export const vwcCardWithMenu = (element) => setTimeout(() => {
+  const card = element?.shadowRoot.querySelector('.vwc-card')
+  if (card) {
+    card.style.overflow = 'unset'
+  }
+}, 0)

package/src/patches/index.js

@@ -0,0 +1,6 @@
+export * from './vwcDataGrid'
+export * from './vwcTooltip'
+export * from './VwcCard'
+export * from './vwcNoteContentOverflow'
+export * from './vwcSnackBarHtmlMessage'
+export * from './vwcSetAttributeValue'

package/src/patches/vwcDataGrid.js

@@ -0,0 +1,26 @@
+const createVaadinGridStylePatchElement = () => {
+    const styleElement = document.createElement('style')
+    styleElement.innerHTML = `
+      #header {
+        z-index: 0;
+      }
+      [part~='cell'] ::slotted(vaadin-grid-cell-content) {
+        overflow: visible;
+      }`
+    return styleElement
+}
+
+/**
+ * Patches `VwcDataGrid` (styles) to allow cell overflow to show
+ * - `VwcSlider` tooltips off the cell boundaries uncropped by the grid
+ *
+ * @param {HTMLElement} gridElement - target datagrid element to mount the CSS into
+ * @example <VwcDataGrid ref={vwcDataGridElementCellOverflowDecorator} />
+ */
+export const vwcDataGridElementCellOverflowDecorator = gridElement =>
+    setTimeout(() => {
+        const component = gridElement?.shadowRoot
+            .querySelector('vaadin-grid')?.shadowRoot
+
+        component && component.append(createVaadinGridStylePatchElement())
+    }, 0)

package/src/patches/vwcNoteContentOverflow.js

@@ -0,0 +1,20 @@
+const createStyleElement = () => {
+  const styleElement = document.createElement('style')
+  styleElement.innerHTML = `
+      .vwc-note {
+        contain: inherit !important;
+      }`
+  return styleElement
+}
+
+/**
+ * Patches `VwcNote` (styles) to allow content overflow
+ *
+ * @param {HTMLElement} noteElement - target element to mount the CSS into
+ * @example <VwcNote ref={vwcNoteContentOverflowDecorator} />
+ */
+export const vwcNoteContentOverflowDecorator = noteElement =>
+  setTimeout(() => {
+    const component = noteElement?.shadowRoot
+    component && component.append(createStyleElement())
+  }, 0)

package/src/patches/vwcSetAttributeValue.js

@@ -0,0 +1,12 @@
+/**
+ * Patches attribute value. You can pass now a `value` to the `VwcIconButton` as
+ * in normal buttons
+ *
+ * @param {any} attribute
+ * @param {any} value
+ * @param {HTMLElement} element
+ * @returns
+ */
+export const vwcSetAttributeValue = (attribute, value) => (element) => {
+  element?.setAttribute(attribute, value)
+}

package/src/patches/vwcSnackBarHtmlMessage.js

@@ -0,0 +1,21 @@
+const createHtmlMessageElement = (html) => {
+  const element = document.createElement('div')
+  element.setAttribute('class', 'mdc-snackbar__label')
+  element.setAttribute('role', 'status')
+  element.setAttribute('aria-live', 'polite')
+  element.innerHTML = html
+  return element
+}
+
+/**
+ * Patches `VwcSnackbar` to allow html message text
+ *
+ * @param {HTMLElement} element - target element to patch
+ * @example <VwcSnackbar ref={vwcSnackBarHtmlMessageDecorator('<b>bold</b>')} />
+ */
+export const vwcSnackBarHtmlMessageDecorator = (htmlMessage = '<b>bold</b>') => element =>
+  setTimeout(() => {
+    const component = element?.shadowRoot.querySelector('.header-and-label')
+    component?.style.setProperty('width', '100%')
+    component?.append(createHtmlMessageElement(htmlMessage))
+  }, 0)

package/src/patches/vwcTooltip.js

@@ -0,0 +1,46 @@
+/**
+ * Patches provided HTMLElement (styles) to crop long text and
+ * shows browser tooltip when actually cropped
+ *
+ * @param {HTMLElement} element - target element to apply the text cropping logic to
+ * @example <span ref={vwcTooltipEllipsisDecorator(text)} >{text}</span>
+ */
+export const vwcTooltipEllipsisDecorator = fullText => element =>
+    setTimeout(() => {
+        const isTextCropped = element?.clientHeight < element?.scrollHeight
+        if (isTextCropped && element) {
+            element.setAttribute('title', fullText)
+        }
+    }, 0)
+
+/**
+* Patches provided VwcTooltip instance to open/close tooltip on mouse hover
+*
+* @param {HTMLElement} tooltipElement - target element to apply behavior to
+* @param {number} timeout - timeout before showing tooltip, default: 1000
+* @param {string} minWidth - min width in pixels, default: 'none'
+* @example <VwcTooltip ref={vwcTooltipShowOnHoverDecorator()} />
+*/
+export const vwcTooltipShowOnHoverDecorator = (minWidth = 'none', timeout = 1000) => tooltipElement =>
+    setTimeout(() => {
+        if (!tooltipElement) {
+            return
+        }
+        const anchorElement = document.getElementById(tooltipElement.anchor)
+        if (!anchorElement) {
+            return
+        }
+        anchorElement.style.setProperty('pointer-events', 'auto')
+        tooltipElement.style.setProperty('--tooltip-inline-size', minWidth)
+
+        let showTimeoutHandler
+        anchorElement.addEventListener("mouseover", () => {
+            showTimeoutHandler = setTimeout(() => {
+                tooltipElement.open = true
+            }, timeout)
+        })
+        anchorElement.addEventListener("mouseout", () => {
+            clearTimeout(showTimeoutHandler)
+            tooltipElement.open = false
+        })
+    }, 0)

package/stories/v2/VwcAccordion/VwcAccordion.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcAccordion from '../../../dist/VwcAccordion'
+
+export const Default = () => <VwcAccordion />
+export default {
+  title: 'V2/VwcAccordion',
+  argTypes: {
+      //
+      // Example values
+      // numberValue: { control: 'number', defaultValue: 123 },
+      // booleanValue: { control: 'boolean', defaultValue: true },
+      // objectValue: { control: 'object', defaultValue: {} },
+      // stringValue: { control: 'string', defaultValue: 'string' },
+      // colorValue: { control: 'color' },
+      // dateValue: { control: 'date' }
+      //
+    }
+}

package/stories/v2/VwcActionGroup/VwcActionGroup.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcActionGroup from '../../../dist/VwcActionGroup'
+
+export const Default = () => <VwcActionGroup />
+export default {
+  title: 'V2/VwcActionGroup',
+  argTypes: {
+      //
+      // Example values
+      // numberValue: { control: 'number', defaultValue: 123 },
+      // booleanValue: { control: 'boolean', defaultValue: true },
+      // objectValue: { control: 'object', defaultValue: {} },
+      // stringValue: { control: 'string', defaultValue: 'string' },
+      // colorValue: { control: 'color' },
+      // dateValue: { control: 'date' }
+      //
+    }
+}

package/stories/v2/VwcBadge/VwcBadge.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcBadge from '../../../dist/VwcBadge'
+
+export const Default = () => <VwcBadge />
+export default {
+  title: 'V2/VwcBadge',
+  argTypes: {
+      //
+      // Example values
+      // numberValue: { control: 'number', defaultValue: 123 },
+      // booleanValue: { control: 'boolean', defaultValue: true },
+      // objectValue: { control: 'object', defaultValue: {} },
+      // stringValue: { control: 'string', defaultValue: 'string' },
+      // colorValue: { control: 'color' },
+      // dateValue: { control: 'date' }
+      //
+    }
+}

package/stories/v2/VwcBanner/VwcBanner.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcBanner from '../../../dist/VwcBanner'
+
+export const Default = () => <VwcBanner />
+export default {
+  title: 'V2/VwcBanner',
+  argTypes: {
+      //
+      // Example values
+      // numberValue: { control: 'number', defaultValue: 123 },
+      // booleanValue: { control: 'boolean', defaultValue: true },
+      // objectValue: { control: 'object', defaultValue: {} },
+      // stringValue: { control: 'string', defaultValue: 'string' },
+      // colorValue: { control: 'color' },
+      // dateValue: { control: 'date' }
+      //
+    }
+}

package/stories/v2/VwcButton/VwcButton.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcButton from '../../../dist/VwcButton'
+
+export const Default = () => <VwcButton />
+export default {
+  title: 'V2/VwcButton',
+  argTypes: {
+      //
+      // Example values
+      // numberValue: { control: 'number', defaultValue: 123 },
+      // booleanValue: { control: 'boolean', defaultValue: true },
+      // objectValue: { control: 'object', defaultValue: {} },
+      // stringValue: { control: 'string', defaultValue: 'string' },
+      // colorValue: { control: 'color' },
+      // dateValue: { control: 'date' }
+      //
+    }
+}

package/stories/v2/VwcButtonToggleGroup/VwcButtonToggleGroup.stories.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import VwcButtonToggleGroup from '../../../dist/VwcButtonToggleGroup'
+import VwcButton from '../../../dist/VwcButton'
+
+export const Default = () => {
+  return (
+    <VwcButtonToggleGroup required values={['foo']}>
+      <VwcButton value='foo'>Foo</VwcButton>
+      <VwcButton value='bar'>Bar</VwcButton>
+    </VwcButtonToggleGroup>
+  )
+}
+
+export const RealtimeValuesSet = () => {
+  return (
+    <VwcButtonToggleGroup
+      values={[]}
+      ref={btnGroupElement =>
+        setTimeout(() => {
+          if (!btnGroupElement) {
+            return
+          }
+          btnGroupElement.values = ['bar']
+        }, 0)
+      }
+      required
+    >
+      <VwcButton value='foo'>Foo</VwcButton>
+      <VwcButton value='bar'>Bar</VwcButton>
+    </VwcButtonToggleGroup>
+  )
+}
+
+export default {
+  title: 'V2/VwcButtonToggleGroup',
+  argTypes: {
+    //
+    // Example values
+    // numberValue: { control: 'number', defaultValue: 123 },
+    // booleanValue: { control: 'boolean', defaultValue: true },
+    // objectValue: { control: 'object', defaultValue: {} },
+    // stringValue: { control: 'string', defaultValue: 'string' },
+    // colorValue: { control: 'color' },
+    // dateValue: { control: 'date' }
+    //
+  }
+}

package/stories/v2/VwcCalendar/VwcCalendar.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcCalendar from '../../../dist/VwcCalendar'
+
+export const Default = () => <VwcCalendar />
+export default {
+  title: 'V2/VwcCalendar',
+  argTypes: {
+      //
+      // Example values
+      // numberValue: { control: 'number', defaultValue: 123 },
+      // booleanValue: { control: 'boolean', defaultValue: true },
+      // objectValue: { control: 'object', defaultValue: {} },
+      // stringValue: { control: 'string', defaultValue: 'string' },
+      // colorValue: { control: 'color' },
+      // dateValue: { control: 'date' }
+      //
+    }
+}

package/stories/v2/VwcCalendarEvent/VwcCalendarEvent.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcCalendarEvent from '../../../dist/VwcCalendarEvent'
+
+export const Default = () => <VwcCalendarEvent />
+export default {
+  title: 'V2/VwcCalendarEvent',
+  argTypes: {
+      //
+      // Example values
+      // numberValue: { control: 'number', defaultValue: 123 },
+      // booleanValue: { control: 'boolean', defaultValue: true },
+      // objectValue: { control: 'object', defaultValue: {} },
+      // stringValue: { control: 'string', defaultValue: 'string' },
+      // colorValue: { control: 'color' },
+      // dateValue: { control: 'date' }
+      //
+    }
+}

package/stories/v2/VwcCard/VwcCard.stories.jsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import VwcCard from '../../../dist/VwcCard'
+import VwcIconButton from '../../../dist/VwcIconButton'
+import { vwcCardHeadingCropDecorator } from '../../../src'
+
+const originalText = 'very loooooo ngt te eeex tkjhn klhkjg hlkjh kjuhk jhkjh kjhk jhk jhjk'
+const damnLoongWordText = 'veryloooooongtteeeextkjhnklhkjghlkjhkjuhkjhkjhkjhk jhk jhjk'
+
+export const Default = () => (
+  <>
+    <div
+      style={{
+        width: '200px'
+      }}
+    >
+      <VwcCard
+        style={{
+          '--title-line-clamp': 2
+        }}
+        heading={originalText}
+        ref={vwcCardHeadingCropDecorator(originalText)}
+        subtitle='Subtitle'
+      ></VwcCard>
+    </div>
+
+    <div
+      style={{
+        width: '200px'
+      }}
+    >
+      <VwcCard
+        style={{
+          '--title-line-clamp': 2
+        }}
+        heading={damnLoongWordText}
+        ref={vwcCardHeadingCropDecorator(damnLoongWordText)}
+        subtitle='Subtitle'
+      ></VwcCard>
+    </div>
+
+    <VwcCard
+      label='All Options'
+      heading='All Options on Deck'
+      icon='chat-line'
+      subtitle='Subtitle'
+      text="Use the 'footer' slot in order to add actionable items."
+    >
+      <VwcIconButton
+        slot='graphic'
+        connotation='alert'
+        icon='bin'
+        shape='circled'
+      />
+      <div
+        style={{
+          height: '150px',
+          width: '100%',
+          backgroundColor: '#871EFF'
+        }}
+        slot='media'
+      ></div>
+      <VwcIconButton
+        slot='meta'
+        connotation='alert'
+        icon='bin'
+        shape='circled'
+      />
+      <VwcIconButton
+        slot='footer'
+        connotation='alert'
+        icon='bin'
+        shape='circled'
+      />
+    </VwcCard>
+  </>
+)
+export default {
+  title: 'V2/VwcCard',
+  argTypes: {
+    //
+    // Example values
+    // numberValue: { control: 'number', defaultValue: 123 },
+    // booleanValue: { control: 'boolean', defaultValue: true },
+    // objectValue: { control: 'object', defaultValue: {} },
+    // stringValue: { control: 'string', defaultValue: 'string' },
+    // colorValue: { control: 'color' },
+    // dateValue: { control: 'date' }
+    //
+  }
+}

package/stories/v2/VwcCarousel/VwcCarousel.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcCarousel from '../../../dist/VwcCarousel'
+
+export const Default = () => <VwcCarousel />
+export default {
+  title: 'V2/VwcCarousel',
+  argTypes: {
+      //
+      // Example values
+      // numberValue: { control: 'number', defaultValue: 123 },
+      // booleanValue: { control: 'boolean', defaultValue: true },
+      // objectValue: { control: 'object', defaultValue: {} },
+      // stringValue: { control: 'string', defaultValue: 'string' },
+      // colorValue: { control: 'color' },
+      // dateValue: { control: 'date' }
+      //
+    }
+}

package/stories/v2/VwcCarouselItem/VwcCarouselItem.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcCarouselItem from '../../../dist/VwcCarouselItem'
+
+export const Default = () => <VwcCarouselItem />
+export default {
+  title: 'V2/VwcCarouselItem',
+  argTypes: {
+      //
+      // Example values
+      // numberValue: { control: 'number', defaultValue: 123 },
+      // booleanValue: { control: 'boolean', defaultValue: true },
+      // objectValue: { control: 'object', defaultValue: {} },
+      // stringValue: { control: 'string', defaultValue: 'string' },
+      // colorValue: { control: 'color' },
+      // dateValue: { control: 'date' }
+      //
+    }
+}

package/stories/v2/VwcCheckListItem/VwcCheckListItem.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcCheckListItem from '../../../dist/VwcCheckListItem'
+
+export const Default = () => <VwcCheckListItem />
+export default {
+  title: 'V2/VwcCheckListItem',
+  argTypes: {
+      //
+      // Example values
+      // numberValue: { control: 'number', defaultValue: 123 },
+      // booleanValue: { control: 'boolean', defaultValue: true },
+      // objectValue: { control: 'object', defaultValue: {} },
+      // stringValue: { control: 'string', defaultValue: 'string' },
+      // colorValue: { control: 'color' },
+      // dateValue: { control: 'date' }
+      //
+    }
+}

package/stories/v2/VwcCheckbox/VwcCheckbox.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcCheckbox from '../../../dist/VwcCheckbox'
+
+export const Default = () => <VwcCheckbox />
+export default {
+  title: 'V2/VwcCheckbox',
+  argTypes: {
+      //
+      // Example values
+      // numberValue: { control: 'number', defaultValue: 123 },
+      // booleanValue: { control: 'boolean', defaultValue: true },
+      // objectValue: { control: 'object', defaultValue: {} },
+      // stringValue: { control: 'string', defaultValue: 'string' },
+      // colorValue: { control: 'color' },
+      // dateValue: { control: 'date' }
+      //
+    }
+}

package/stories/v2/VwcChip/VwcChip.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcChip from '../../../dist/VwcChip'
+
+export const Default = () => <VwcChip />
+export default {
+  title: 'V2/VwcChip',
+  argTypes: {
+      //
+      // Example values
+      // numberValue: { control: 'number', defaultValue: 123 },
+      // booleanValue: { control: 'boolean', defaultValue: true },
+      // objectValue: { control: 'object', defaultValue: {} },
+      // stringValue: { control: 'string', defaultValue: 'string' },
+      // colorValue: { control: 'color' },
+      // dateValue: { control: 'date' }
+      //
+    }
+}

package/stories/v2/VwcChipSet/VwcChipSet.stories.jsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import VwcChipSet from '../../../dist/VwcChipSet'
+import VwcChip from '../../../dist/VwcChip'
+
+export const Default = (argTypes) =>
+  <VwcChipSet {...argTypes}>
+    <VwcChip label='Chip one' />
+    <VwcChip label='Chip two' />
+    <VwcChip label='Chip three' />
+  </VwcChipSet>
+
+export const Filter = (argTypes) =>
+  <VwcChipSet {...argTypes}>
+    <VwcChip label='Chip one' selected />
+    <VwcChip label='Chip two' />
+    <VwcChip label='Chip three' />
+  </VwcChipSet>
+
+export default {
+  title: 'V2/VwcChipSet',
+  argTypes: {
+    type: {
+      options: ['action', 'input', 'choice', 'filter'],
+      control: { type: 'select' },
+      defaultValue: 'filter'
+    },
+    onSelection: { action: 'onSelection' },
+
+    //
+    // Example values
+    // numberValue: { control: 'number', defaultValue: 123 },
+    // booleanValue: { control: 'boolean', defaultValue: true },
+    // objectValue: { control: 'object', defaultValue: {} },
+    // stringValue: { control: 'string', defaultValue: 'string' },
+    // colorValue: { control: 'color' },
+    // dateValue: { control: 'date' }
+  }
+}

package/stories/v2/VwcCircularProgress/VwcCircularProgress.stories.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import VwcCircularProgress from '../../../dist/VwcCircularProgress'
+
+export const Default = () => <VwcCircularProgress />
+export default {
+  title: 'V2/VwcCircularProgress',
+  argTypes: {
+      //
+      // Example values
+      // numberValue: { control: 'number', defaultValue: 123 },
+      // booleanValue: { control: 'boolean', defaultValue: true },
+      // objectValue: { control: 'object', defaultValue: {} },
+      // stringValue: { control: 'string', defaultValue: 'string' },
+      // colorValue: { control: 'color' },
+      // dateValue: { control: 'date' }
+      //
+    }
+}