@vonage/vivid-react 2.10.47 → 2.10.58

package/stories/v2/VwcPagination/VwcPagination.stories.jsx

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,63 @@
+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: 'V2/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/v2/VwcTag/VwcTag.stories.jsx

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

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

@@ -0,0 +1,24 @@
+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: 'V2/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/v2/VwcTextfield/VwcTextfield.stories.jsx

@@ -0,0 +1,47 @@
+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: 'V2/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/v2/VwcThemeSwitch/VwcThemeSwitch.stories.jsx

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

@@ -0,0 +1,41 @@
+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: 'V2/VwcTooltip'
+}

package/stories/v2/VwcTopAppBar/VwcTopAppBar.stories.jsx

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

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

package/stories/v2/patches/patches.stories.jsx

@@ -0,0 +1,94 @@
+import React from 'react'
+import VwcDataGrid from '../../../dist/VwcDataGrid'
+import VwcSlider from '../../../dist/VwcSlider'
+import VwcDataGridColumn from '../../../dist/VwcDataGridColumn'
+import VwcTooltip from '../../../dist/VwcTooltip'
+import VwcButton from '../../../dist/VwcButton'
+import VwcNote from '../../../dist/VwcNote'
+import VwcSelect from '../../../dist/VwcSelect'
+import VwcListItem from '../../../dist/VwcListItem'
+import VwcSnackbar from '../../../dist/VwcSnackbar'
+import VwcIconButton from '../../../dist/VwcIconButton'
+
+import {
+  cellRendererFactory,
+  vwcDataGridElementCellOverflowDecorator,
+  vwcTooltipShowOnHoverDecorator
+} from '../../../src'
+import { vwcNoteContentOverflowDecorator } from '../../../src/patches/vwcNoteContentOverflow'
+import { vwcSnackBarHtmlMessageDecorator } from '../../../src/patches/vwcSnackBarHtmlMessage'
+import { vwcSetAttributeValue } from '../../../src/patches/vwcSetAttributeValue'
+
+export const VwcTooltipShowOnHover = () => (
+  <>
+    <VwcTooltip
+      ref={vwcTooltipShowOnHoverDecorator()}
+      anchor='btn'
+      id='tooltip'
+      text='Tooltip text'
+    />
+    <VwcButton label='Button' aria-describedby='tooltip' id='btn' />
+  </>
+)
+
+const sliderCellRenderer = (container, { grid }, { item }) =>
+  cellRendererFactory(
+    <VwcSlider pin step={1} value={5} min={1} max={10} />,
+    container
+  )
+
+const dataProvider = ({ page, pageSize }, callback) => {
+  callback([{}], 1)
+}
+
+export const DataGridCellOverflow = () => (
+  <VwcDataGrid
+    ref={vwcDataGridElementCellOverflowDecorator}
+    dataProvider={dataProvider}
+  >
+    <VwcDataGridColumn
+      header='Level'
+      resizable
+      cellRenderer={sliderCellRenderer}
+      footer=''
+    />
+  </VwcDataGrid>
+)
+
+export const AllowContentOverflow = () => (
+  <VwcNote
+    ref={vwcNoteContentOverflowDecorator}
+    header='Allow dropdown content overflow the Note card boundaries'
+  >
+    <VwcSelect>
+      <VwcListItem>Item 1</VwcListItem>
+      <VwcListItem>Item 1</VwcListItem>
+      <VwcListItem>Item 1</VwcListItem>
+      <VwcListItem>Item 1</VwcListItem>
+      <VwcListItem>Item 1</VwcListItem>
+    </VwcSelect>
+  </VwcNote>
+)
+
+export const SnackBarWithHTMLContent = () => (
+  <VwcSnackbar
+    ref={vwcSnackBarHtmlMessageDecorator(
+      'This is <i>truly</i> html <b>message</b>'
+    )}
+    onClosed={e => (e.target.open = true)}
+    legacy
+    header='html message demo'
+    dismissible
+    icon='info'
+    open
+    timeoutMs={9000}
+  ></VwcSnackbar>
+)
+
+export const VwcIconButtonValue = () => (
+  <VwcIconButton ref={vwcSetAttributeValue('value', 'v')}></VwcIconButton>
+)
+
+export default {
+  title: 'V2/Patches'
+}

package/stories/v3/v3.stories.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import VwcBadge from '../../dist/v3/VwcBadge'
+import VwcButton from '../../dist/v3/VwcButton'
+import { initVivid } from '../../src/initialization/initVivid'
+
+export const VwcBadge_ = () =>
+  <>
+    <VwcBadge connotation={'alert'} text={'Badge'} />
+    <VwcButton connotation={'info'} label='Button' onClick={(e) => console.log(e)} ></VwcButton>
+  </>
+
+export default {
+  title: 'V3',
+  decorators: [
+    (story) => {
+      const InitVivid = ({ children }) => <div ref={x => {
+        if (!x) {
+          return
+        }
+        initVivid(x, () => { }, {
+          font: 'proprietary',
+          theme: 'light'
+        })
+      }} >{children}</div>
+      return <InitVivid>{story()}</InitVivid>
+    }
+  ]
+}