@vonage/vivid-react 2.10.56 → 2.10.59

package/stories/VwcCheckbox/VwcCheckbox.stories.jsx

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

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

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

package/stories/VwcDataGridColumn/VwcDataGridColumn.stories.jsx

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

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

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

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

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

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

package/stories/VwcExpansionPanel/VwcExpansionPanel.stories.jsx

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

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

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

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

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

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

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

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

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

@@ -1,63 +0,0 @@
-import React from 'react'
-import VwcLayout from '../../dist/VwcLayout'
-import VwcCard from '../../dist/VwcCard'
-
-const testData = [
-  'understand cognitive dangerous child consistent efficient temperature limit silver viewer ',
-  'capital wet aware executive anyone typically cow bother apart reduce bother cow ',
-  'song chef crop need permanent management drawing pure likely competitor competitor ',
-  'global chemical flight demonstration sigh highway gradually threat introduce than global ',
-  'whereas birth finish maker chest ourselves celebrate different routine serve different ',
-  'bedroom act another military count team tight aspect die anymore tight tight count ',
-  'everyday tomato landscape ahead soft spend ensure overcome earn letter ensure ',
-  'recognize bomb meter solve engineering breakfast nonetheless habit physician consist recognize ',
-  'soft document limitation replace asleep exhibition faculty accident big study exhibition ',
-  'explode inflation lift clue certainly practice accompany choose beneath cope cope '
-]
-
-export const Default = () => {
-  return (
-    <>
-      <VwcLayout>
-        {testData.map((d, i) => (
-          <VwcCard key={i} text={d} />
-        ))}
-      </VwcLayout>
-      <VwcLayout columnBasis='sm' columnSpacing='xs'>
-        {testData.map((d, i) => (
-          <VwcCard key={i} text={d} />
-        ))}
-      </VwcLayout>
-      <VwcLayout columnBasis='md' columnSpacing='md'>
-        {testData.map((d, i) => (
-          <VwcCard key={i} text={d} />
-        ))}
-      </VwcLayout>
-      <VwcLayout columnBasis='lg' columnSpacing='md'>
-        {testData.map((d, i) => (
-          <VwcCard key={i} text={d} />
-        ))}
-      </VwcLayout>
-      <VwcLayout columnBasis='block'>
-        {testData.map((d, i) => (
-          <VwcCard key={i} text={d} />
-        ))}
-      </VwcLayout>
-    </>
-  )
-}
-
-export default {
-  title: 'VwcLayout',
-  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/VwcLinearProgress/VwcLinearProgress.stories.jsx

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

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

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