@vonage/vivid-react 2.10.47 → 2.10.56

package/stories/VwcLayout/VwcLayout.stories.jsx

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

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

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

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

package/stories/VwcListItem/VwcListItem.stories.jsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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: '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

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

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

@@ -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: '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

@@ -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: '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

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