@veracity/vui 1.4.0-rc.0 → 1.5.0-beta.0

package/src/accordion/theme.ts

@@ -0,0 +1,14 @@
+const baseStyle = {}
+
+const defaultProps = {}
+
+const sizes = {}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
+}

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from './accordion'
 export * from './avatar'
 export * from './box'
 export * from './button'

package/src/select/select.types.ts

@@ -29,7 +29,7 @@ export type SelectProps = ThemingProps<'Select'> &
     /** Name of the input. Used in custom change event to support form library integration. */
     name?: string
     /** Data prop to display an array of options in the popover. */
-    options: SelectOptionData[]
+    options?: SelectOptionData[]
     /** Displayed inside the trigger when no value is selected. */
     placeholder?: string
     /** Select cannot be opened and is styled accordingly. */

package/src/theme/components.ts

@@ -1,3 +1,4 @@
+import Accordion from '../accordion/theme'
 import Avatar from '../avatar/theme'
 import Box from '../box/theme'
 import Button from '../button/theme'
@@ -35,6 +36,7 @@ import Tag from '../tag/theme'
 import Textarea from '../textarea/theme'
 
 export default {
+  Accordion,
   Avatar,
   Box,
   Button,

package/src/toast/toast.tsx

@@ -5,6 +5,8 @@ import { useVuiContext } from '../core'
 import { zIndices } from '../theme'
 import { ToastListItem } from './toast.types'
 
+export const toasterWidth = 420
+
 const Toaster = () => {
   const { toasts } = useVuiContext()
 
@@ -12,8 +14,8 @@ const Toaster = () => {
     <Box
       bottom="1rem"
       display="block"
-      maxW="100%"
-      minW={{ md: 600, sm: 600, xs: '100%' }}
+      maxW={{ md: toasterWidth, sm: toasterWidth, xs: '100%' }}
+      minW={{ md: toasterWidth, sm: toasterWidth, xs: '100%' }}
       p={{ md: '16px', sm: '4px', xs: '2px' }}
       position="fixed"
       right={{ md: '1rem', sm: 0, xs: 0 }}

package/src/toast/toast.types.ts

@@ -2,6 +2,8 @@ import { ReactNode } from 'react'
 
 import { NotificationProps } from '../notification'
 
+export type ToastDuration = 'fast' | 'slow' | 'sticky'
+
 export interface ToastListItem {
   id: string
   component?: ReactNode
@@ -14,6 +16,7 @@ export interface ToastSetup {
 
 export interface ToastOptions extends NotificationProps {
   id?: string
-  duration?: number
+  duration?: ToastDuration
+  /** @deprecated According to new UX requirements all toasts should be dismissible */
   dismissible?: boolean
 }

package/src/toast/useToast.tsx

@@ -3,16 +3,21 @@ import React, { ReactNode } from 'react'
 import { useVuiContext } from '../core'
 import { Notification, NotificationStatus } from '../notification'
 import { uid } from '../utils'
-import { ToastOptions, ToastSetup } from './toast.types'
+import { ToastDuration, ToastOptions, ToastSetup } from './toast.types'
+
+export const defaultDuration = 'fast'
+export const fastToastDuration = 4000
+export const slowToastDuration = 8000
 
 const setup: ToastSetup = {
   options: {
-    duration: 5000,
-    dismissible: true
+    duration: defaultDuration
   },
   componentList: []
 }
 
+const getDurationTime = (duration: ToastDuration) => (duration === 'fast' ? fastToastDuration : slowToastDuration)
+
 export const useToast = () => {
   const { addToast, removeToast } = useVuiContext()
 
@@ -21,7 +26,6 @@ export const useToast = () => {
   const showToast = (options?: ToastOptions): void => {
     const id = options?.id ? options.id : uid('toast')
     const { duration = setup.options.duration } = options || {}
-    const { dismissible = setup.options.dismissible } = options || {}
     const { status = setup.options.duration } = options || {}
     const { action } = options || {}
     const { icon } = options || {}
@@ -38,7 +42,7 @@ export const useToast = () => {
           animation="fadeDown"
           icon={icon}
           mt={{ md: 1, sm: '4px', xs: '4px' }}
-          onClose={dismissible ? onClose : undefined}
+          onClose={onClose}
           shadow={1}
           status={status as NotificationStatus}
           text={text}
@@ -50,14 +54,19 @@ export const useToast = () => {
 
     addToast(toast)
 
-    if (duration !== 0) window.setTimeout(() => hideToast(id), duration)
+    if (duration && duration !== 'sticky') window.setTimeout(() => hideToast(id), getDurationTime(duration))
   }
 
-  const showInfo = (text: ReactNode) => showToast({ text, status: 'info' })
-  const showSuccess = (text: ReactNode) => showToast({ text, status: 'success' })
-  const showWarning = (text: ReactNode) => showToast({ text, status: 'warning' })
-  const showError = (text: ReactNode) => showToast({ text, status: 'error' })
-  const showLoading = (text: ReactNode) => showToast({ text, status: 'loading' })
+  const showInfo = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
+    showToast({ text, status: 'info', duration })
+  const showSuccess = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
+    showToast({ text, status: 'success', duration })
+  const showWarning = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
+    showToast({ text, status: 'warning', duration })
+  const showError = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
+    showToast({ text, status: 'error', duration })
+  const showLoading = (text: ReactNode, duration: ToastDuration = defaultDuration) =>
+    showToast({ text, status: 'loading', duration })
 
   return { showToast, hideToast, showInfo, showSuccess, showWarning, showError, showLoading }
 }