@vonage/vivid-react 2.10.56 → 2.10.59

package/stories/VwcListItem/VwcListItem.stories.jsx

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

@@ -1,41 +0,0 @@
-import React from 'react'
-import VwcMenu from '../../dist/VwcMenu'
-import VwcButton from '../../dist/VwcButton'
-import VwcListItem from '../../dist/VwcListItem'
-
-function anchorClickHandler () {
-  const anchor = document.querySelector('#button')
-  const menu = document.querySelector('#menu')
-  menu.anchor = anchor
-  menu.open = true
-}
-
-export const Default = () => (
-  <>
-    <VwcButton
-      id='button'
-      label='Open menu'
-      onClick={() => anchorClickHandler()}
-    ></VwcButton>
-    <VwcMenu
-      id='menu'
-      corner='BOTTOM_RIGHT'
-      onSelected={e => console.log(`Selected: `, e)}
-      onAction={e => console.log(`Action: `, e)}
-      onOpened={e => console.log(`Opened: `, e)}
-      onClosed={e => console.log(`Closed: `, e)}
-    >
-      <VwcListItem>
-        <div>Basic item 1</div>
-      </VwcListItem>
-      <VwcListItem>
-        <div>Basic item 2</div>
-      </VwcListItem>
-    </VwcMenu>
-  </>
-)
-
-export default {
-  title: 'VwcMenu',
-  argTypes: {}
-}

package/stories/VwcNotchedOutline/VwcNotchedOutline.stories.jsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,63 +0,0 @@
-import React, { useState } from 'react'
-import VwcTabBar from '../../dist/VwcTabBar'
-import VwcTab from '../../dist/VwcTab'
-
-export const Default = () => <VwcTabBar/>
-
-export const SwitchingContent = () => {
-  const [activeTab, switchTab] = useState(0)
-  const onActivatedTab = ({ detail: { index } }) => switchTab(index)
-
-  return <React.Fragment>
-    <VwcTabBar
-      activeIndex={activeTab}
-      onActivated={onActivatedTab}
-    >
-      <VwcTab
-        label='Tab 1'
-      />
-      <VwcTab
-        label='Tab 2'
-      />
-    </VwcTabBar>
-    {activeTab === 0 && <div>Tab 1 contents</div>}
-    {activeTab === 1 && <div>Tab 2 contents</div>}
-  </React.Fragment>
-}
-export const LimitWidth = () => {
-  const [activeTab, switchTab] = useState(0)
-  const onActivatedTab = ({ detail: { index } }) => switchTab(index)
-
-  return <React.Fragment>
-    <div style={{ display: 'inline-block' }}>
-      <VwcTabBar
-        activeIndex={activeTab}
-        onActivated={onActivatedTab}
-      >
-        <VwcTab
-          label='Tab 1'
-        />
-        <VwcTab
-          label='Tab 2'
-        />
-      </VwcTabBar>
-    </div>
-    {activeTab === 0 && <div>Tab 1 contents</div>}
-    {activeTab === 1 && <div>Tab 2 contents</div>}
-  </React.Fragment>
-}
-
-export default {
-  title: 'VwcTabBar',
-  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/VwcTag/VwcTag.stories.jsx

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

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

@@ -1,24 +0,0 @@
-import React from 'react'
-import VwcTextarea from '../../dist/VwcTextarea'
-
-export const Default = () => (
-  <VwcTextarea
-    onFocus={x => console.log(x)}
-    onInput={x => console.log(x)}
-    onBlur={x => console.log(x)}
-  />
-)
-export default {
-  title: 'VwcTextarea',
-  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/VwcTextfield/VwcTextfield.stories.jsx

@@ -1,47 +0,0 @@
-import React, { useState } from 'react'
-import VwcTextfield from '../../dist/VwcTextfield/index'
-import { action } from '@storybook/addon-actions'
-
-export const Default = () => (
-  <VwcTextfield
-    onBlur={x => console.log(x)}
-    onFocus={x => console.log(x)}
-    onInput={x => console.log(x)}
-  />
-)
-
-export const Validation = () => {
-  const [errorMessage, setErrorMessage] = useState('')
-
-  return (
-    <VwcTextfield
-      style={{ width: '100%' }}
-      pattern='[a-zA-Z0-9 ]*'
-      required
-      validationMessage={errorMessage}
-      validityTransform={(newValue, nativeValidity) => {
-        action('validity')(newValue, nativeValidity)
-        if (nativeValidity.patternMismatch) {
-          setErrorMessage('You can only use letters and numbers')
-        } else if (nativeValidity.valueMissing) {
-          setErrorMessage('Field is required')
-        }
-      }}
-    />
-  )
-}
-
-export default {
-  title: 'VwcTextfield',
-  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/VwcThemeSwitch/VwcThemeSwitch.stories.jsx

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

@@ -1,41 +0,0 @@
-import React from 'react'
-import VwcTooltip from '../../dist/VwcTooltip'
-import VwcButton from '../../dist/VwcButton'
-import { vwcTooltipShowOnHoverDecorator } from '../../src/patches/vwcTooltip'
-
-export const Default = () => {
-  return (
-    <>
-      <VwcTooltip anchor='btn' id='tooltip' text='Tooltip text' open />
-      <VwcButton
-        label='Button'
-        disabled={true}
-        aria-describedby='tooltip'
-        id='btn'
-      />
-    </>
-  )
-}
-
-export const ShowHideOnADisabledControl = () => {
-  return (
-    <>
-      <VwcTooltip
-        ref={vwcTooltipShowOnHoverDecorator()}
-        anchor='btn'
-        id='tooltip'
-        text='Tooltip text'
-      />
-      <VwcButton
-        label='Button'
-        disabled={true}
-        aria-describedby='tooltip'
-        id='btn'
-      />
-    </>
-  )
-}
-
-export default {
-  title: 'VwcTooltip'
-}

package/stories/VwcTopAppBar/VwcTopAppBar.stories.jsx

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

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