@veracity/vui 2.14.8-beta.2 → 2.15.2

package/src/header/loggedInHeader.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 
 import Box from '../box'
+import Button from '../button'
 import { RenderOnScreen, useDown, useStyleConfig, vui } from '../core'
 import List from '../list'
 import { cs, isJsx } from '../utils'
@@ -20,6 +21,7 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
     children,
     className,
     isApplication = false,
+    isCleanLayout = false,
     logo,
     mainLinks,
     services,
@@ -27,6 +29,7 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
     showMainLinks = isApplication ? false : true,
     showServices = true,
     notifications,
+    url,
     ...rest
   } = props
 
@@ -47,7 +50,7 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
 
   return (
     <Header
-      className={cs('vui-loggedInHeader', isApplication ? 'vui-loggedInAppHeader' : '', className)}
+      className={cs('vui-loggedInHeader', isApplication ? 'vui-loggedInAppHeader' : undefined, className)}
       mb={isApplication && isSmallScreen ? '41px' : 'inherited'}
       ref={ref}
       {...rest}
@@ -64,106 +67,125 @@ export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
         )}
         {!isApplication && <RenderOnScreen minWidth="lg">{children}</RenderOnScreen>}
         <Box ml="auto" />
-        {isApplication && (
+        {isCleanLayout ? (
           <>
-            <RenderOnScreen minWidth="lg">
-              {showMainLinks && mainLinks !== undefined && (
-                <>
-                  {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
-                  <Header.Divider mx={1} />
-                </>
-              )}
+            {!!url && (
+              <Box>
+                <Button as="a" className={cs('vui-headerSignOut')} href={url} size="lg" variant="secondaryDark">
+                  Sign out
+                </Button>
+              </Box>
+            )}
+          </>
+        ) : (
+          <>
+            {isApplication && (
+              <>
+                <RenderOnScreen minWidth="lg">
+                  {showMainLinks && mainLinks !== undefined && (
+                    <>
+                      {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
+                      <Header.Divider mx={1} />
+                    </>
+                  )}
 
-              {/* the main-links are folded into the hamburger menu by default */}
-              {!showMainLinks && mainLinks && (
-                <>
-                  <Header.MobileToggle ml={0} />
-                  <Header.MobileContent>
+                  {/* the main-links are folded into the hamburger menu by default */}
+                  {!showMainLinks && mainLinks && (
                     <>
-                      {isJsx(mainLinks) ? (
-                        mainLinks
-                      ) : (
-                        <Box column w={1}>
-                          <List py={1}>
-                            {mainLinks?.map(({ icon, url, ...rest }, index) => (
-                              <List.Item iconLeft={icon} key={index} linkProps={{ href: url }} {...rest} />
-                            ))}
-                          </List>
-                        </Box>
-                      )}
-
-                      {!showServices && servicesLinks && (
-                        <Box column w={1}>
-                          <List
-                            className="vui-headerHiddenServicesLargeScreen"
-                            heading="My Services"
-                            maxH={295}
-                            right={0}
-                            w={320}
-                            {...styles.services.list}
-                            borderTop={1}
-                            borderTopColor="sandstone.main"
-                            pt={1}
-                          >
-                            {servicesLinks.length > 0 ? (
-                              servicesLinks?.map(({ url, ...rest }, index: number) => (
-                                <List.Item key={index} linkProps={{ href: url }} {...rest} />
-                              ))
-                            ) : (
-                              <HeaderServicesMessage />
-                            )}
-                          </List>
-                        </Box>
-                      )}
+                      <Header.MobileToggle ml={0} />
+                      <Header.MobileContent>
+                        <>
+                          {isJsx(mainLinks) ? (
+                            mainLinks
+                          ) : (
+                            <Box column w={1}>
+                              <List py={1}>
+                                {mainLinks?.map(({ icon, url, ...rest }, index) => (
+                                  <List.Item iconLeft={icon} key={index} linkProps={{ href: url }} {...rest} />
+                                ))}
+                              </List>
+                            </Box>
+                          )}
+
+                          {!showServices && servicesLinks && (
+                            <Box column w={1}>
+                              <List
+                                className="vui-headerHiddenServicesLargeScreen"
+                                heading="My Services"
+                                maxH={295}
+                                right={0}
+                                w={320}
+                                {...styles.services.list}
+                                borderTop={1}
+                                borderTopColor="sandstone.main"
+                                pt={1}
+                              >
+                                {servicesLinks.length > 0 ? (
+                                  servicesLinks?.map(({ url, ...rest }, index: number) => (
+                                    <List.Item key={index} linkProps={{ href: url }} {...rest} />
+                                  ))
+                                ) : (
+                                  <HeaderServicesMessage />
+                                )}
+                              </List>
+                            </Box>
+                          )}
+                        </>
+                      </Header.MobileContent>
                     </>
-                  </Header.MobileContent>
+                  )}
+                  {showServices && services && (
+                    <>{isJsx(services) ? services : <Header.Services isApplication={isApplication} {...services} />}</>
+                  )}
+                </RenderOnScreen>
+
+                <Header.Support {...supportLinks} />
+              </>
+            )}
+            {!isApplication && (
+              <RenderOnScreen minWidth="lg">
+                {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
+
+                {mainLinks !== undefined && <Header.Divider mx={1} />}
+
+                {isJsx(services) ? services : <Header.Services {...services} />}
+              </RenderOnScreen>
+            )}
+            {isJsx(notifications) ? notifications : <Header.Notifications {...notifications} />}
+            {!showMainLinks &&
+              showAltUserInfo &&
+              (isJsx(userInfo) ? (
+                userInfo
+              ) : (
+                <>
+                  <Header.Divider ml={2} />
+                  <HeaderAccountUserInfo
+                    className="vui-altUserInfo"
+                    color={localTextColor}
+                    isApplication
+                    {...userInfo}
+                  />
                 </>
-              )}
-              {showServices && services && (
-                <>{isJsx(services) ? services : <Header.Services isApplication={isApplication} {...services} />}</>
-              )}
+              ))}
+            {isJsx(account) ? account : <Header.Account {...account} />}
+            <RenderOnScreen maxWidth="lg">
+              {isApplication && <Header.Divider ml={1} />}
+              {!isApplication && (account !== undefined || notifications !== undefined) && <Header.Divider ml={1} />}
+
+              <Header.MobileToggle />
+
+              <Header.MobileContent>
+                {!isApplication && children}
+                {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
+                {isJsx(services) ? (
+                  services
+                ) : (
+                  <Header.Services {...services} showTopBorder={mainLinks ? true : false} />
+                )}
+              </Header.MobileContent>
             </RenderOnScreen>
-
-            <Header.Support {...supportLinks} />
           </>
         )}
-        {!isApplication && (
-          <RenderOnScreen minWidth="lg">
-            {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
-
-            {mainLinks !== undefined && <Header.Divider mx={1} />}
-
-            {isJsx(services) ? services : <Header.Services {...services} />}
-          </RenderOnScreen>
-        )}
-        {isJsx(notifications) ? notifications : <Header.Notifications {...notifications} />}
-
-        {!showMainLinks &&
-          showAltUserInfo &&
-          (isJsx(userInfo) ? (
-            userInfo
-          ) : (
-            <>
-              <Header.Divider ml={2} />
-              <HeaderAccountUserInfo className="vui-altUserInfo" color={localTextColor} isApplication {...userInfo} />
-            </>
-          ))}
-
-        {isJsx(account) ? account : <Header.Account {...account} />}
-        <RenderOnScreen maxWidth="lg">
-          {isApplication && <Header.Divider ml={1} />}
-          {!isApplication && (account !== undefined || notifications !== undefined) && <Header.Divider ml={1} />}
-
-          <Header.MobileToggle />
-
-          <Header.MobileContent>
-            {!isApplication && children}
-
-            {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
-
-            {isJsx(services) ? services : <Header.Services {...services} showTopBorder={mainLinks ? true : false} />}
-          </Header.MobileContent>
-        </RenderOnScreen>
       </Header.Content>
     </Header>
   )

package/src/header/loggedOutHeader.tsx

@@ -1,19 +1,54 @@
 import React from 'react'
 
 import Box from '../box'
-import { RenderOnScreen, vui } from '../core'
+import { RenderOnScreen, useDown, vui } from '../core'
 import { cs, isJsx } from '../utils'
 import Header from './header'
 import { LoggedOutHeaderProps } from './header.types'
 
 /** Displays Header content appropriate for logged out users, such as sign in button or create account prompt. */
 export const LoggedOutHeader = vui<'div', LoggedOutHeaderProps>((props, ref) => {
-  const { children, className, createAccount, logo, mainLinks, signIn, ...rest } = props
+  const {
+    applicationName,
+    applicationUrl,
+    children,
+    className,
+    isApplication = false,
+    createAccount,
+    logo,
+    mainLinks,
+    signIn,
+    ...rest
+  } = props
+
+  if (isApplication) {
+    if (!applicationName) {
+      console.error('Header: isApplication is true but applicationName is not set.')
+    }
+  }
+
+  const isSmallScreen = useDown('md')
+  const isLessThanMD = useDown('sm')
+
+  const localTextColor = rest?.variant === 'dark' ? 'white' : 'darkBlue.main'
 
   return (
-    <Header className={cs('vui-loggedOutHeader', className)} ref={ref} {...rest}>
+    <Header
+      className={cs('vui-loggedOutHeader', isApplication ? 'vui-loggedOutAppHeader' : undefined, className)}
+      mb={isApplication && isSmallScreen ? '41px' : 'inherited'}
+      ref={ref}
+      {...rest}
+    >
       <Header.Content>
-        {isJsx(logo) ? logo : <Header.Logo {...logo} />}
+        {(!isApplication || !isLessThanMD) && <> {isJsx(logo) ? logo : <Header.Logo {...logo} />}</>}
+        {isApplication && (
+          <>
+            <RenderOnScreen minWidth="sm">
+              <Header.Divider mr={2} />
+            </RenderOnScreen>
+            <Header.ApplicationName color={localTextColor} title={applicationName} url={applicationUrl || '/'} />
+          </>
+        )}
 
         <RenderOnScreen minWidth="lg">{children}</RenderOnScreen>
 

package/src/input/consts.ts

@@ -54,6 +54,6 @@ export const displayValueOnlyTextSize = {
 export const clearIconSize = {
   sm: 'sm',
   md: 'sm',
-  lg: 'md',
-  xl: 'lg'
+  lg: 'sm',
+  xl: 'md'
 }

package/src/menu/menu.types.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react'
+import { ReactNode, RefObject } from 'react'
 
 import { ListProps } from '../list'
 import { PopoverContentProps, PopoverProps } from '../popover'
@@ -9,6 +9,10 @@ export type MenuListProps = ListProps & {
   contentProps?: PopoverContentProps
   /** Ref passed to the inner PopoverContent. */
   contentRef?: RefObject<HTMLDivElement>
+  /** Custom content displayed at the bottom of the panel */
+  slotBottom?: ReactNode
+  /** Custom content displayed at the top of the panel */
+  slotTop?: ReactNode
 }
 
 export type MenuProps = ThemingProps<'Menu'> &

package/src/menu/menuList.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { Box } from '../box'
 import { useStyleConfig, vui, VuiComponent } from '../core'
 import List from '../list'
 import { PopoverContent } from '../popover'
@@ -10,11 +11,24 @@ import { MenuListProps } from './menu.types'
 /** Displays a list of menu items in a popover content element. */
 export const MenuList = vui<'ul', MenuListProps>((props, ref) => {
   const { className, contentProps, contentRef, ...rest } = props
+  const { slotTop, slotBottom } = props
   const styles = useStyleConfig('Menu', useMenuContext())
 
   return (
     <PopoverContent borderRadius={0} ref={contentRef} {...contentProps}>
-      <List className={cs('vui-menuList', className)} py={1} ref={ref} w="100%" {...styles.list} {...rest} maxH={295} />
+      <Box flexDirection="column">
+        {slotTop}
+        <List
+          className={cs('vui-menuList', className)}
+          py={1}
+          ref={ref}
+          w="100%"
+          {...styles.list}
+          {...rest}
+          maxH={295}
+        />
+        {slotBottom}
+      </Box>
     </PopoverContent>
   )
 }) as VuiComponent<'ul', MenuListProps> & {

package/src/utils/images.ts

@@ -0,0 +1,20 @@
+const loadImagePromises = new Map<string, Promise<boolean>>()
+
+/** Attempts to load the image and returns a boolean indicating success or not. */
+export function loadImageUrl(url: string) {
+  let promise = loadImagePromises.get(url)
+  if (promise) return promise
+  promise = new Promise(resolve => {
+    const img = new Image()
+    img.onload = () => {
+      // After this event occurs, you can use the url in the DOM. The browser will not make another request for the image; there will be no delay.
+      resolve(true)
+    }
+    img.onerror = () => {
+      resolve(false)
+    }
+    img.src = url
+  })
+  loadImagePromises.set(url, promise)
+  return promise
+}