@vonage/vivid-react 2.10.58 → 2.10.59

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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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' }
-      //
-    }
-}

package/stories/v2/VwcDataGrid/VwcDataGrid.stories.jsx

@@ -1,109 +0,0 @@
-import React from 'react'
-import VwcSwitch from '../../../dist/VwcSwitch'
-import VwcButton from '../../../dist/VwcButton'
-import VwcDataGrid from '../../../dist/VwcDataGrid'
-import VwcDataGridColumn from '../../../dist/VwcDataGridColumn'
-import { cellRendererFactory } from '../../../src/dataGrid'
-
-const sequentalData = (rowBlueprint, totalRows) => {
-  const result = new Array(totalRows)
-  const bpMap = Object.entries(rowBlueprint)
-  for (let i = 0; i < totalRows; i++) {
-    const row = {}
-    for (const [key, value] of bpMap) {
-      if (typeof value === 'string') {
-        row[key] = `${value.replace('{i}', i)}`
-      } else {
-        row[key] = value
-      }
-    }
-    result[i] = row
-  }
-  return result
-}
-
-const dataSourceSimulated = sequentalData(
-  { fname: 'A-{i}', active: false },
-  5000
-)
-
-const dataProvider = ({ page, pageSize }, callback) => {
-  const startIndex = page * pageSize
-  const pageItems = dataSourceSimulated.slice(startIndex, startIndex + pageSize)
-  callback(pageItems, dataSourceSimulated.length)
-}
-
-const switchCellRenderer = (container, { grid }, { item }) =>
-  cellRendererFactory(
-    <VwcSwitch
-      connotation='cta'
-      onChange={() => {
-        item.active = !item.active
-        grid.refreshData()
-      }}
-      checked={item.active}
-    />,
-    container
-  )
-
-const actionCellRenderer = (container, configuration, { item }) =>
-  cellRendererFactory(
-    <VwcButton.CallToAction
-      disabled={item.active}
-      label='Run'
-      onClick={() => alert('Run!')}
-    />,
-    container
-  )
-
-const actionHeaderRenderer = (container, configuration) => {
-  container.style.display = 'flex'
-  container.firstElementChild.style.margin = '0 auto'
-}
-
-export const Default = () => {
-  const setDataGridRef = gridElement => {
-    // Please refere to grid API at this document
-    // https://vivid.vonage.com/?path=/story/components-beta-datagrid-introduction--introduction
-    console.log(gridElement)
-    // gridElement.refreshData()
-    // gridElement.selectItem()
-    // .selectAll()
-    // .deselectAll()
-  }
-
-  return (
-    <VwcDataGrid
-      ref={setDataGridRef}
-      dataProvider={dataProvider}
-      multiSort
-      reordering={false}
-    >
-      <VwcDataGridColumn
-        path='fname'
-        header='First Name'
-        resizable
-        autoWidth
-        footer=''
-      />
-      <VwcDataGridColumn
-        header='Active'
-        resizable
-        cellRenderer={switchCellRenderer}
-        footer=''
-      />
-      <VwcDataGridColumn
-        header='Action'
-        autoWidth
-        resizable
-        headerRenderer={actionHeaderRenderer}
-        cellRenderer={actionCellRenderer}
-        footer=''
-      />
-    </VwcDataGrid>
-  )
-}
-
-export default {
-  title: 'V2/VwcDataGrid'
-}

package/stories/v2/VwcDataGridColumn/VwcDataGridColumn.stories.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import VwcDataGridColumn from '../../../dist/VwcDataGridColumn'
-
-export const Default = () => <VwcDataGridColumn />
-export default {
-  title: 'V2/VwcDataGridColumn',
-  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/VwcDatepicker/VwcDatepicker.stories.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import VwcDatepicker from '../../../dist/VwcDatepicker'
-
-export const Default = () => <VwcDatepicker />
-export default {
-  title: 'V2/VwcDatepicker',
-  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/VwcDialog/VwcDialog.stories.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import VwcDialog from '../../../dist/VwcDialog'
-
-export const Default = () => <VwcDialog />
-export default {
-  title: 'V2/VwcDialog',
-  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/VwcDrawer/VwcDrawer.stories.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import VwcDrawer from '../../../dist/VwcDrawer'
-
-export const Default = () => <VwcDrawer />
-export default {
-  title: 'V2/VwcDrawer',
-  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/VwcDropdown/VwcDropdown.stories.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import VwcDropdown from '../../../dist/VwcDropdown'
-
-export const Default = () => <VwcDropdown />
-export default {
-  title: 'V2/VwcDropdown',
-  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/VwcElevation/VwcElevation.stories.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import VwcElevation from '../../../dist/VwcElevation'
-
-export const Default = () => <VwcElevation />
-export default {
-  title: 'V2/VwcElevation',
-  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/VwcEmptyState/VwcEmptyState.stories.jsx

@@ -1,18 +0,0 @@
-import React from 'react'
-import VwcEmptyState from '../../../dist/VwcEmptyState'
-
-export const Default = () => <VwcEmptyState body="body" icon="chat-line" heading="heading" />
-export default {
-  title: 'V2/VwcEmptyState',
-  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' }
-      //
-    }
-}