@veracity/vui 2.6.3 → 2.8.0-rc.0

package/src/breadcrumbs/breadcrumbs.types.ts

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react'
 
 import { BoxProps } from '../box'
-import { IconProp } from '../icon'
 import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
@@ -12,8 +11,6 @@ export type BreadcrumbsItemProps = BoxProps & {
   className?: string
   /** Content */
   children?: ReactNode
-  /** Icon */
-  icon?: IconProp
 }
 
 export type BreadcrumbsSeparatorProps = BoxProps & {

package/src/breadcrumbs/breadcrumbsItem.tsx

@@ -2,27 +2,23 @@ import React from 'react'
 
 import { Box } from '../box'
 import { omitThemingProps, useStyleConfig, vui, VuiComponent } from '../core'
-import { Icon } from '../icon'
 import { cs } from '../utils'
 import { BreadcrumbsItemProps } from './breadcrumbs.types'
 import { useBreadcrumbsContext } from './context'
 
 /** A Breadcrumb item. */
 export const BreadcrumbsItem = vui<'div', BreadcrumbsItemProps>((props, ref) => {
-  const { className, children, icon, ...rest } = omitThemingProps(props)
-
+  const { className, children, ...rest } = omitThemingProps(props)
   const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext())
-
   return (
     <Box
       alignItems="center"
       className={cs('vui-breadcrumbs-item', className)}
       p={0}
       ref={ref}
-      {...rest}
       {...styles.item}
+      {...rest}
     >
-      {!!icon && <Icon name={icon} size="sm" />}
       {children}
     </Box>
   )

package/src/breadcrumbs/breadcrumbsSeparator.tsx

@@ -1,15 +1,21 @@
 import React from 'react'
 
 import { Box } from '../box'
+import { useStyleConfig } from '../core'
 import { Icon } from '../icon'
 import { cs } from '../utils'
 import { BreadcrumbsSeparatorProps } from './breadcrumbs.types'
+import { useBreadcrumbsContext } from './context'
 
 /** Breadcrumbs separator. */
-export const BreadcrumbsSeparator = ({ className, children, content, ...rest }: BreadcrumbsSeparatorProps) => (
-  <Box alignItems="center" className={cs('vui-breadcrumbs-separator', className)} p={0} {...rest}>
-    {content || children || <Icon name="falAngleRight" />}
-  </Box>
-)
+export const BreadcrumbsSeparator = ({ className, children, content, ...rest }: BreadcrumbsSeparatorProps) => {
+  const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext())
+
+  return (
+    <Box alignItems="center" className={cs('vui-breadcrumbs-separator', className)} p={0} {...rest}>
+      {content || children || <Icon name="falAngleRight" {...styles.separator} />}
+    </Box>
+  )
+}
 
 export default BreadcrumbsSeparator

package/src/breadcrumbs/theme.ts

@@ -1,22 +1,78 @@
 const baseStyle = {}
 
 const defaultProps = {
-  size: 'md'
+  size: 'md',
+  variant: 'dark'
 }
 
 const sizes = {
+  xs: {
+    item: {
+      fontSize: 12,
+      lineHeight: '18px'
+    },
+    separator: {
+      size: 'xs'
+    }
+  },
   sm: {
-    item: {}
+    item: {
+      fontSize: 14,
+      lineHeight: '22px'
+    },
+    separator: {
+      size: 'sm'
+    }
   },
   md: {
-    item: {}
+    item: { fontSize: 16, lineHeight: '26px' },
+    separator: {
+      size: 'md'
+    }
   },
   lg: {
-    item: {}
+    item: { fontSize: 18, lineHeight: '32px' },
+    separator: {
+      size: 'lg'
+    }
   }
 }
 
-const variants = {}
+const variants = {
+  dark: {
+    item: {
+      color: 'seaBlue.main'
+    },
+    main: {
+      bg: 'transparent'
+    },
+    separator: {
+      pathFill: 'sandstone.10'
+    }
+  },
+  white: {
+    item: {
+      color: 'white'
+    },
+    main: {
+      bg: 'darkBlue.main'
+    },
+    separator: {
+      pathFill: 'white'
+    }
+  },
+  light: {
+    item: {
+      color: 'digiGreen.main'
+    },
+    main: {
+      bg: 'darkBlue.main'
+    },
+    separator: {
+      pathFill: 'white'
+    }
+  }
+}
 
 export default {
   baseStyle,

package/src/button/theme.ts

@@ -170,7 +170,6 @@ const variants = {
       disabledColor: 'darkBlue.75',
       hoverBg: 'skyBlue.85',
       hoverBorderColor: 'seaBlue.35',
-      // focusBg: 'white',
       activeBg: 'skyBlue.90',
       activeBorderColor: 'seaBlue.35'
     }

package/src/card/card.tsx

@@ -11,14 +11,14 @@ import { CardProps } from './card.types'
  */
 export const Card = vui<'div', CardProps>((props, ref) => {
   const { className, isInteractive = props.onClick !== undefined, ...rest } = omitThemingProps(props)
+
   const styles = useStyleConfig('Card', props)
 
   const interactiveProps: Dict = isInteractive
     ? {
         cursor: 'pointer',
         focusRing: 2,
-        focusRingColor: 'blue.50',
-        hoverRingColor: 'prussian.80',
+        hoverRingColor: 'seaBlue.main',
         hoverShadow: '4',
         outline: 'none',
         tabIndex: 0,
@@ -26,20 +26,7 @@ export const Card = vui<'div', CardProps>((props, ref) => {
       }
     : {}
 
-  return (
-    <Box
-      bg="white"
-      borderRadius="md"
-      className={cs('vui-card', className)}
-      ref={ref}
-      ring={1}
-      ringColor="transparent"
-      shadow="2"
-      {...styles}
-      {...interactiveProps}
-      {...rest}
-    />
-  )
+  return <Box className={cs('vui-card', className)} ref={ref} {...styles} {...interactiveProps} {...rest} />
 })
 
 export default Card

package/src/card/theme.ts

@@ -1,4 +1,10 @@
-const baseStyle = {}
+const baseStyle = {
+  bg: 'white',
+  borderRadius: '1px',
+  ring: 1,
+  ringColor: 'transparent',
+  shadow: '2'
+}
 
 const defaultProps = {}
 

package/src/footer/footer.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { Box } from '../box'
 import { styled, useDown, useStyleConfig, vui, VuiComponent } from '../core'
 import { Divider } from '../divider'
 import { Link } from '../link'
@@ -26,12 +27,30 @@ export const FooterBase = styled.divBox`
 
 /** Branded Veracity Footer with trademark and links sections. Controls max-width of the content. */
 export const Footer = vui<'div', FooterProps>((props, ref) => {
-  const { children, className, columns, linkedIn, size, variant, isSlim, ...rest } = props
+  const {
+    applicationLinks,
+    applicationStaticItems = [],
+    children,
+    className,
+    columns,
+    isApplication = false,
+    linkedIn,
+    size,
+    variant,
+    isSlim,
+    ...rest
+  } = props
 
   const context = { size, variant }
 
   const styles = useStyleConfig('Footer', props)
 
+  if (isApplication) {
+    if (!applicationLinks) {
+      console.error('Footer: isApplication is true but applicationLinks is not set.')
+    }
+  }
+
   const slimLinks: FooterLinkData[] = [
     {
       id: 'home',
@@ -58,13 +77,61 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
   return (
     <FooterProvider value={context}>
       <FooterBase
-        className={cs('vui-footer', className)}
+        className={cs('vui-footer', isApplication ? 'vui-footer-app' : '', className)}
+        px={isApplication ? '40px' : 3}
         py={isSlim ? (downMd ? '16px' : '9px') : 5}
         {...styles.container}
         ref={ref}
         {...rest}
       >
-        {isSlim && (
+        {isApplication && (
+          <FooterContent alignContent="center" alignItems="center" maxW="100%">
+            <FooterRow alignContent="space-between" w={1}>
+              <Box
+                alignItems="self-start"
+                columnGap={3}
+                flex={{ xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }}
+                py={{ xs: 1, sm: 1, md: 1.25, lg: 1.5 }}
+                wrap
+              >
+                {applicationLinks?.map((link, index) => (
+                  <Box flex={{ xs: '0 0 50%', sm: '0 0 auto' }} key={index} minW={70}>
+                    <FooterLink {...link} />
+                  </Box>
+                ))}
+              </Box>
+              {downLg && <Divider borderColor="sandstone.main" mb={0.5} mt={1} w={1} />}
+              <Box
+                centerV
+                columnGap={3}
+                flex={{ xs: '0 0 100%', sm: '0 0 100%', md: '0 0 100%', lg: '0 0 50%' }}
+                justifyContent={{ sm: 'center', lg: 'flex-end' }}
+                py={{ xs: 1, sm: 1, md: 1.25, lg: 1.5 }}
+                wrap
+              >
+                {applicationStaticItems?.map((text, index) => (
+                  <Box key={index}>
+                    <T size="sm">{text}</T>
+                  </Box>
+                ))}
+                <Box>
+                  <Link
+                    fontWeight="demi"
+                    href={linkedIn ?? defaultLinkedInUrl}
+                    iconLeft={<Link.Icon mr={1} name="cubCircleLinkedIn" radius="50%" size="xs" />}
+                    isExternal
+                    size={{ _: 'sm', md: 'md' }}
+                    {...styles.link}
+                  >
+                    <FooterHeading fontSize="16px" mb={0} text="Follow us" />
+                  </Link>
+                </Box>
+              </Box>
+            </FooterRow>
+          </FooterContent>
+        )}
+
+        {!isApplication && isSlim && (
           <FooterContent alignContent="center" alignItems="center" maxW={{ xs: 343, sm: 305, md: 720, lg: 975 }}>
             <FooterRow>
               {slimLinks.map((link, index) => {
@@ -104,7 +171,7 @@ export const Footer = vui<'div', FooterProps>((props, ref) => {
           </FooterContent>
         )}
 
-        {!isSlim && (
+        {!isApplication && !isSlim && (
           <FooterContent>
             {children ??
               (columns && (

package/src/footer/footer.types.ts

@@ -24,8 +24,11 @@ export type FooterLinkData = {
 export type FooterProps = Omit<BoxProps, 'size' | 'variant'> &
   ThemingProps<'Footer'> &
   Pick<FooterTrademarkProps, 'linkedIn'> & {
+    applicationLinks?: FooterLinkData[]
+    applicationStaticItems?: string[]
     /** Data defining content of multiple columns. */
     columns?: FooterColumnData[]
+    isApplication?: boolean
     isSlim?: boolean
   }
 

package/src/header/header.tsx

@@ -6,6 +6,7 @@ import { HeaderProvider } from './context'
 import { HeaderProps } from './header.types'
 import HeaderAccount from './headerAccount'
 import HeaderAccountUserInfo from './headerAccountUserInfo'
+import HeaderApplicationName from './headerApplicationName'
 import HeaderContent from './headerContent'
 import HeaderCreateAccount from './headerCreateAccount'
 import HeaderDivider from './headerDivider'
@@ -18,23 +19,28 @@ import HeaderNotifications from './headerNotifications'
 import HeaderServices from './headerServices'
 import HeaderServicesMessage from './headerServicesMessage'
 import HeaderSignIn from './headerSignIn'
+import HeaderSupport from './headerSupport'
 
+/*@formatter:off*/
 export const HeaderBase = styled.headerBox`
   align-items: center;
   background-color: white;
-  border-bottom: 1px solid prussian.80;
+  border-bottom: 1px solid darkBlue.main;
   display: flex;
   position: relative;
 `
+/*@formatter:on*/
 
 /** Branded Veracity Header with logo, links, services, account and other data. Controls max-width of the content. */
 export const Header = vui<'header', HeaderProps>((props, ref) => {
-  const { className, headerHeight = 72, size, variant, ...rest } = props
+  const { className, size, variant, ...rest } = props
   const [isMobileOpen, setIsMobileOpen] = useState(false)
   const mobileContentRef = useRef(null)
   const mobileToggleRef = useRef(null)
   const styles = useStyleConfig('Header', props)
 
+  const headerHeight = 72
+
   const [links] = useLinks()
 
   useClickOutside([mobileContentRef, mobileToggleRef], () => {
@@ -72,6 +78,8 @@ export const Header = vui<'header', HeaderProps>((props, ref) => {
 }) as VuiComponent<'header', HeaderProps> & {
   Account: typeof HeaderAccount
   AccountUserInfo: typeof HeaderAccountUserInfo
+  Support: typeof HeaderSupport
+  ApplicationName: typeof HeaderApplicationName
   Content: typeof HeaderContent
   CreateAccount: typeof HeaderCreateAccount
   Divider: typeof HeaderDivider
@@ -88,6 +96,8 @@ export const Header = vui<'header', HeaderProps>((props, ref) => {
 
 Header.Account = HeaderAccount
 Header.AccountUserInfo = HeaderAccountUserInfo
+Header.Support = HeaderSupport
+Header.ApplicationName = HeaderApplicationName
 Header.Content = HeaderContent
 Header.CreateAccount = HeaderCreateAccount
 Header.Divider = HeaderDivider

package/src/header/header.types.ts

@@ -61,7 +61,7 @@ export type HeaderNotificationsProps = ButtonProps & HeaderNotificationsData
 
 export type HeaderProps = SystemProps &
   ThemingProps<'Header'> & {
-    /** Sets the height of the Header and is used by internal parts for positioning and sizing. */
+    /** Sets the height of the Header and is used by internal parts for positioning and sizing. @deprecated; header should always be 72 px.*/
     headerHeight?: number
   }
 
@@ -76,10 +76,15 @@ export type HeaderServicesProps = MenuProps &
     buttonProps?: ButtonProps
     /** Children are disabled for this component. */
     children?: never
+    isApplication?: boolean
     /** Props object passed to the MenuList component. */
     listProps?: ListProps
+    /** Props object passed to the MenuItem component; introduced for app MD */
+    showTopBorder?: boolean
   }
 
+export type HeaderSupportProps = MenuProps & HeaderServicesData & {}
+
 export type HeaderSignInData = {
   /** Provides href to the button link. */
   url?: string
@@ -90,6 +95,31 @@ export type HeaderSignInProps = ButtonProps & HeaderSignInData
 export type LoggedInHeaderProps = HeaderProps & {
   /** Socket for account popover icon on the right side. */
   account?: HeaderAccountData | JSX.Element
+  supportLinks?: HeaderServicesData
+  /** Socket for the app name on the left side. */
+  applicationName?: string
+  isApplication?: boolean
+  /** Socket for logo on the left side. */
+  logo?: LogoData | JSX.Element
+  /** Socket for main links in the middle-right. */
+  mainLinks?: HeaderLinkData[] | JSX.Element
+  /** Socket for notifications icon on the right side. */
+  notifications?: HeaderNotificationsData | JSX.Element
+  /** Socket for services menu icon on the right side. */
+  services?: HeaderServicesData | JSX.Element
+  /** Socket for showing the alt user Info with role; introduced for APP; by default it is displayed. */
+  showAltUserInfo?: boolean
+  /** Socket for showing the services trigger up front; introduced for APP; by default it is displayed. */
+  showServices?: boolean
+  /** Socket for showing the main Links up front in case of APP. by default they are folded into the hamburger menu. */
+  showMainLinks?: boolean
+}
+
+export type LoggedInAppHeaderProps = HeaderProps & {
+  /** Socket for account popover icon on the right side. */
+  account?: HeaderAccountData | JSX.Element
+  /** Socket for the app name on the left side. */
+  applicationName: string
   /** Socket for logo on the left side. */
   logo?: LogoData | JSX.Element
   /** Socket for main links in the middle-right. */
@@ -98,6 +128,8 @@ export type LoggedInHeaderProps = HeaderProps & {
   notifications?: HeaderNotificationsData | JSX.Element
   /** Socket for services menu icon on the right side. */
   services?: HeaderServicesData | JSX.Element
+  /** Socket for showing the main Links up front. by default they are folded into the hamburger menu. */
+  showMainLinks?: boolean
 }
 
 export type LoggedOutHeaderProps = HeaderProps & {

package/src/header/headerAccount.tsx

@@ -4,48 +4,43 @@ import Avatar from '../avatar'
 import { useStyleConfig } from '../core'
 import List from '../list'
 import Popover from '../popover'
-import { isJsx, isObject, merge } from '../utils'
+import { isJsx, isObject } from '../utils'
 import { useHeaderContext } from './context'
 import { HeaderAccountProps, HeaderAccountUserInfoData } from './headerAccount.types'
 import HeaderAccountUserInfo from './headerAccountUserInfo'
 
 /** Disables popper's dynamic re-positioning */
-const mobilePopoverOptions = { popperOptions: { modifiers: [{ name: 'computeStyles', enabled: false }] } }
 
 /** Displays user account information and helpful links, like settings or logout. */
 export function HeaderAccount(props: HeaderAccountProps) {
   const { contentProps, options = {}, sections, triggerProps, userInfo, ...rest } = props
-  const { headerHeight, isMobile } = useHeaderContext()
+  const { isMobile } = useHeaderContext()
   const styles = useStyleConfig('Header', useHeaderContext()).account
-
-  // Render content in full view on mobile
-  const popoverOptions = isMobile ? merge(options, mobilePopoverOptions) : options
-
-  const contentScreenProps = isMobile
-    ? { h: `calc(100vh - ${headerHeight}px)`, left: 0, position: 'fixed', top: headerHeight, w: '100vw' }
-    : { maxH: 360, py: 1, minW: 320, w: 'auto' }
-
   const name = isObject<HeaderAccountUserInfoData>(userInfo) ? userInfo.displayName : ''
+  const variant = styles?.trigger?.variant ?? 'solidDarkBlue'
+  const offsetX = isMobile ? 64 : 39
 
   return (
-    <Popover isLazy={false} offset={[0, 8]} options={popoverOptions} placement="bottom-end" {...rest}>
+    <Popover isLazy={false} offset={[offsetX, 16]} placement="bottom-end" {...rest}>
       <Popover.Trigger
         as={Avatar}
         className="vui-headerAccountTrigger"
         isInteractive
-        ml={2}
+        ml={1}
         name={name}
+        size="lg"
         title="Account"
-        variant="solidDarkBlue"
+        variant={variant}
         {...styles.trigger}
         {...triggerProps}
       />
 
       <Popover.Content
+        borderRadius={0}
         className="vui-headerAccountContent"
         column
         {...styles.content}
-        {...contentScreenProps}
+        w={isMobile ? 280 : 320}
         {...contentProps}
       >
         {isJsx(userInfo) ? userInfo : userInfo && <HeaderAccountUserInfo {...userInfo} />}

package/src/header/headerAccount.types.ts

@@ -34,6 +34,8 @@ export type HeaderAccountUserInfoData = {
   companyName?: string
   /** Displays user name in account user info section. */
   displayName?: string
+  isApplication?: boolean
+  role?: string
 }
 
 export type HeaderAccountUserInfoProps = BoxProps & HeaderAccountUserInfoData

package/src/header/headerAccountUserInfo.tsx

@@ -10,7 +10,7 @@ import { HeaderAccountUserInfoProps } from './headerAccount.types'
 
 /** Displays user information, like username and company name, within HeaderAccount part. */
 export const HeaderAccountUserInfo = vui<'div', HeaderAccountUserInfoProps>((props, ref) => {
-  const { children, className, companyName, displayName, ...rest } = props
+  const { children, className, companyName, displayName, isApplication, role, ...rest } = props
   const styles = useStyleConfig('Header', useHeaderContext())
 
   return (
@@ -22,17 +22,27 @@ export const HeaderAccountUserInfo = vui<'div', HeaderAccountUserInfoProps>((pro
       spaceX={2}
       {...styles.accountUserInfo}
       {...rest}
+      lineHeight={isApplication ? '18px' : 'inherit'}
+      pr={isApplication ? 0 : 'inherit'}
+      textAlign={isApplication ? 'right' : 'inherit'}
     >
       {children ?? (
         <>
-          <Avatar className="vui-headerAccountUserInfoAvatar" name={displayName} size="lg" variant="solidDarkBlue" />
-          <Box column>
+          {!isApplication && (
+            <Avatar className="vui-headerAccountUserInfoAvatar" name={displayName} size="xl" variant="solidDarkBlue" />
+          )}
+          <Box column rowGap={role ? 0 : 0.5}>
             {displayName && (
-              <T mb={0.5} weight="demi">
+              <T fontSize={isApplication ? '12px' : 'inherit'} weight="demi">
                 {displayName}
               </T>
             )}
-            {companyName && <T>{companyName}</T>}
+            {companyName && <T fontSize={isApplication ? '12px' : 'inherit'}>{companyName}</T>}
+            {role && (
+              <T color="sandstone.55" fontSize={isApplication ? '12px' : 'inherit'}>
+                {role}
+              </T>
+            )}
           </Box>
         </>
       )}

package/src/header/headerApplicationName.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import { useUp, vui } from '../core'
+import { Heading } from '../heading'
+import { HeadingProps } from '../heading/heading.types'
+import { cs } from '../utils'
+
+/** Logo displayed in the left corner of the Header. */
+export const HeaderApplicationName = vui<'div', HeadingProps>((props, ref) => {
+  const { title, ...rest } = props
+
+  const isTablet = useUp('md')
+
+  const additionalClassName = isTablet ? 'vui-headerApplicationNameTablet' : 'vui-headerApplicationNameMobile'
+
+  const mobileProps = isTablet
+    ? {
+        fontSize: 18,
+        mt: 0
+      }
+    : {
+        fontSize: 16,
+        mt: '112px',
+        position: 'absolute',
+        mx: '-16px',
+        w: '100%',
+        bg: 'skyBlue.97',
+        py: '8px',
+        px: '16px',
+        lineHeight: '24px',
+        borderBottom: '1px solid darkBlue.main',
+        borderTop: '1px solid darkBlue.main'
+      }
+
+  return (
+    <Heading
+      className={cs('vui-headerApplicationName', additionalClassName)}
+      size="title"
+      {...rest}
+      {...(mobileProps as any)}
+    >
+      {title}
+    </Heading>
+  )
+})
+
+export default HeaderApplicationName

package/src/header/headerCreateAccount.tsx

@@ -14,7 +14,9 @@ export const HeaderCreateAccount = vui<'div', HeaderCreateAccountProps>((props,
   const { isMobile, links } = useHeaderContext() ?? {}
   const styles = useStyleConfig('Header', useHeaderContext()).createAccount
 
-  const screenProps = isMobile ? { borderBottom: '1px solid grey.40', p: 2 } : { ml: 3 }
+  const screenProps = isMobile ? { borderBottom: '1px solid sandstone.main', p: 2 } : { ml: 3 }
+
+  const linkVariant = isMobile ? 'dark' : styles?.link?.variant ?? 'dark'
 
   return (
     <Box
@@ -28,11 +30,11 @@ export const HeaderCreateAccount = vui<'div', HeaderCreateAccountProps>((props,
     >
       {children ?? (
         <>
-          <T size="sm" {...styles.text}>
+          <T size="sm" {...styles.text} color={isMobile ? 'darkBlue.main' : styles?.text?.color ?? 'darkBlue.main'}>
             New to Veracity?
           </T>
 
-          <Link fontWeight="medium" href={url ?? links.signUp} isUnderlined size="sm" {...styles.link}>
+          <Link fontWeight="medium" href={url ?? links.signUp} isUnderlined size="sm" variant={linkVariant}>
             Create account
           </Link>
         </>

package/src/header/headerDivider.tsx

@@ -5,7 +5,7 @@ import Divider, { DividerProps } from '../divider'
 import { cs } from '../utils'
 import { useHeaderContext } from './context'
 
-/** Vertical line dividing some of the Header content. */
+/** Vertical line dividing part of the Header content. */
 export const HeaderDivider = vui<'hr', DividerProps>((props, ref) => {
   const { className, ...rest } = props
   const styles = useStyleConfig('Header', useHeaderContext())