@veracity/vui 2.7.0 → 2.8.0-rc.1

package/src/header/header.tsx

@@ -19,6 +19,7 @@ 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`
@@ -77,6 +78,7 @@ 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
@@ -94,6 +96,7 @@ 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

package/src/header/header.types.ts

@@ -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,10 @@ 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. */
@@ -98,6 +107,12 @@ 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 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 & {

package/src/header/headerAccount.tsx

@@ -4,33 +4,24 @@ 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"
@@ -45,10 +36,11 @@ export function HeaderAccount(props: HeaderAccountProps) {
       />
 
       <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/headerAccountUserInfo.tsx

@@ -31,9 +31,9 @@ export const HeaderAccountUserInfo = vui<'div', HeaderAccountUserInfoProps>((pro
           {!isApplication && (
             <Avatar className="vui-headerAccountUserInfoAvatar" name={displayName} size="xl" variant="solidDarkBlue" />
           )}
-          <Box column>
+          <Box column rowGap={role ? 0 : 0.5}>
             {displayName && (
-              <T fontSize={isApplication ? '12px' : 'inherit'} mb={isApplication ? 0 : 0.5} weight="demi">
+              <T fontSize={isApplication ? '12px' : 'inherit'} weight="demi">
                 {displayName}
               </T>
             )}

package/src/header/headerLinkItem.tsx

@@ -22,7 +22,7 @@ export const HeaderLinkItem = vui<'li', HeaderLinkItemProps>((props, ref) => {
       ? {
           bg: 'skyBlue.95',
           borderColor: 'seaBlue.main',
-          borderLeftWidth: 6,
+          borderLeftWidth: 3,
           hoverBg: 'skyBlue.90',
           pl: '10px',
           activeBorderBottomWidth: 0,
@@ -36,7 +36,7 @@ export const HeaderLinkItem = vui<'li', HeaderLinkItemProps>((props, ref) => {
         color: 'darkBlue.main',
         hoverBg: 'skyBlue.90',
         activeBorderColor: 'seaBlue.main',
-        activeBorderLeftWidth: 6,
+        activeBorderLeftWidth: 3,
         pt: '0'
       }
     : { activeBorderBottomWidth: 4, pt: '0px', activePt: '4px' }

package/src/header/headerMainLinks.tsx

@@ -15,7 +15,6 @@ export const HeaderMainLinks = vui<'ul', HeaderMainLinksProps>((props, ref) => {
 
   const screenStyles = isMobile
     ? {
-        borderBottom: '1px solid sandstone.main',
         flexDirection: 'column',
         mb: 1
       }

package/src/header/headerMobileContent.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Box, { BoxProps } from '../box'
-import { useStyleConfig, vui } from '../core'
+import { useDown, useStyleConfig, vui } from '../core'
 import { cs, mergeRefs } from '../utils'
 import { useHeaderContext } from './context'
 
@@ -10,20 +10,21 @@ export const HeaderMobileContent = vui<'div', BoxProps>((props, ref) => {
   const { className, ...rest } = props
   const { isMobileOpen, mobileContentRef } = useHeaderContext() ?? {}
   const styles = useStyleConfig('Header', useHeaderContext())
+  const isTablet = useDown('lg')
 
   return isMobileOpen ? (
     <Box
       bg="white"
       className={cs('vui-headerMobileContent', className)}
       column
-      h={`calc(100vh - 100% - 1px)`}
-      left={0}
       overflowX="hidden"
       overflowY="auto"
       position="absolute"
       ref={mergeRefs(ref, mobileContentRef)}
       right={0}
+      shadow={2}
       top="calc(100% + 1px)"
+      w={isTablet ? 280 : 320}
       zIndex="100"
       {...styles.mobileContent}
       {...rest}

package/src/header/headerServices.tsx

@@ -26,13 +26,15 @@ function ListContent({ links = [] }: Pick<HeaderServicesProps, 'links'>) {
 
 /** Displays a list of services available to the user. */
 export function HeaderServices(props: HeaderServicesProps) {
-  const { buttonProps, links = [], ...rest } = props
+  const { buttonProps, isApplication = false, links = [], showTopBorder = false, ...rest } = props
   const styles = useStyleConfig('Header', useHeaderContext()).services
 
+  const offsetX = isApplication ? 183 : 135
+
   return (
     <>
       <RenderOnScreen minWidth="lg">
-        <Menu isLazy={false} offset={[0, 8]} placement="bottom-end" size="lg" {...rest}>
+        <Menu isLazy={false} offset={[offsetX, 20]} placement="bottom-end" size="lg" {...rest}>
           <Menu.Button
             className="vui-services-trigger"
             icon="falTh"
@@ -41,14 +43,20 @@ export function HeaderServices(props: HeaderServicesProps) {
             {...buttonProps}
           />
 
-          <Menu.List heading="My Services" maxH={400} w={320} {...styles.list}>
+          <Menu.List heading="My Services" maxH={400} right={0} w={320} {...styles.list}>
             <ListContent links={links} />
           </Menu.List>
         </Menu>
       </RenderOnScreen>
 
       <RenderOnScreen maxWidth="lg">
-        <List borderBottom="1px solid sandstone.main" heading="My Services" {...styles.list}>
+        <List
+          heading="My Services"
+          {...styles.list}
+          borderTop={showTopBorder ? 1 : 0}
+          borderTopColor="sandstone.main"
+          pt={1}
+        >
           <ListContent links={links} />
         </List>
       </RenderOnScreen>

package/src/header/headerSupport.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+
+import { useDown, useStyleConfig } from '../core'
+import Menu from '../menu'
+import { useHeaderContext } from './context'
+import { HeaderSupportProps } from './header.types'
+
+/** Supporting internal component to avoid code duplication. */
+function ListContent({ links = [] }: Pick<HeaderSupportProps, 'links'>) {
+  const styles = useStyleConfig('Header', useHeaderContext()).services
+
+  return (
+    <>
+      <Menu.Item
+        isTruncated
+        key="veracity-support"
+        linkProps={{ href: 'https://support.veracity.com/' }}
+        text="Veracity support"
+        title="Veracity support"
+        {...styles.item}
+      />
+      <Menu.Item
+        isTruncated
+        key="veracity-terms"
+        linkProps={{ href: 'https://id.veracity.com/terms-of-use' }}
+        text="Veracity terms"
+        title="Veracity terms"
+        {...styles.item}
+      />
+      <Menu.Item
+        isTruncated
+        key="privacy"
+        linkProps={{ href: 'https://services.veracity.com/PrivacyStatement' }}
+        text="Privacy"
+        title="Privacy"
+        {...styles.item}
+      />
+
+      {links.length > 0 &&
+        links.map(({ text, url }, index) => (
+          <Menu.Item isTruncated key={index} linkProps={{ href: url }} text={text} title={text} {...styles.item} />
+        ))}
+    </>
+  )
+}
+
+/** Displays a list of services available to the user. */
+export function HeaderSupport(props: HeaderSupportProps) {
+  const { links = [], ...rest } = props
+  const styles = useStyleConfig('Header', useHeaderContext()).services
+
+  const isTablet = useDown('lg')
+  const offsetX = isTablet ? 162 : 135
+
+  return (
+    <>
+      <Menu isLazy={false} offset={[offsetX, 16]} placement="bottom-end" size="lg" {...rest}>
+        <Menu.Button
+          className="vui-app-info-trigger"
+          color={styles.button.color}
+          icon="falQuestionCircle"
+          ml={1}
+          size="lg"
+          title="My services"
+          {...styles.button}
+        />
+
+        <Menu.List maxH={400} right={0} w={isTablet ? 280 : 320} {...styles.list}>
+          <ListContent links={links} />
+        </Menu.List>
+      </Menu>
+    </>
+  )
+}
+
+export default HeaderSupport

package/src/header/loggedInHeader.tsx

@@ -1,47 +1,164 @@
 import React from 'react'
 
 import Box from '../box'
-import { RenderOnScreen, vui } from '../core'
+import { RenderOnScreen, useDown, useStyleConfig, vui } from '../core'
+import List from '../list'
 import { cs, isJsx } from '../utils'
+import { useHeaderContext } from './context'
 import Header from './header'
-import { LoggedInHeaderProps } from './header.types'
+import { HeaderLinkData, LoggedInHeaderProps } from './header.types'
+import HeaderAccountUserInfo from './headerAccountUserInfo'
 
 /** Displays Header content appropriate for logged-in users, such as services, notifications or account information. */
 export const LoggedInHeader = vui<'div', LoggedInHeaderProps>((props, ref) => {
-  const { account, children, className, logo, mainLinks, services, notifications, ...rest } = props
+  const {
+    account,
+    supportLinks,
+    applicationName,
+    children,
+    className,
+    isApplication = false,
+    logo,
+    mainLinks,
+    services,
+    showAltUserInfo = true,
+    showMainLinks = isApplication ? false : true,
+    showServices = true,
+    notifications,
+    ...rest
+  } = props
+
+  if (isApplication) {
+    if (!applicationName) {
+      console.error('Header: isApplication is true but applicationName is not set.')
+    }
+  }
+
+  const userInfo = !isJsx(account) ? account?.userInfo || {} : {}
+  const isSmallScreen = useDown('md')
+
+  const servicesLinks: HeaderLinkData[] = isJsx(services) ? [] : services?.links || []
+  const styles = useStyleConfig('Header', useHeaderContext())
 
   return (
-    <Header className={cs('vui-loggedInHeader', className)} ref={ref} {...rest}>
+    <Header
+      className={cs('vui-loggedInHeader', isApplication ? 'vui-loggedInAppHeader' : '', className)}
+      mb={isApplication && isSmallScreen ? '41px' : 'inherited'}
+      ref={ref}
+      {...rest}
+    >
       <Header.Content>
         {isJsx(logo) ? logo : <Header.Logo {...logo} />}
 
-        <RenderOnScreen minWidth="lg">{children}</RenderOnScreen>
+        {isApplication && (
+          <>
+            <RenderOnScreen minWidth="md">
+              <Header.Divider mr={2} />
+            </RenderOnScreen>
+
+            <Header.ApplicationName title={applicationName} />
+          </>
+        )}
+
+        {!isApplication && <RenderOnScreen minWidth="lg">{children}</RenderOnScreen>}
 
         <Box ml="auto" />
 
-        <RenderOnScreen minWidth="lg">
-          {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
+        {isApplication && (
+          <>
+            <RenderOnScreen minWidth="lg">
+              {showMainLinks && mainLinks !== undefined && (
+                <>
+                  {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
+                  <Header.Divider mx={1} />
+                </>
+              )}
+              {!showMainLinks &&
+                showAltUserInfo &&
+                (isJsx(userInfo) ? (
+                  userInfo
+                ) : (
+                  <>
+                    <HeaderAccountUserInfo className="vui-altUserInfo" isApplication {...userInfo} />
+                    <Header.Divider mx={1} />
+                  </>
+                ))}
+
+              {/* the main-links are folded into the hamburger menu by default */}
+              {!showMainLinks && mainLinks && (
+                <>
+                  <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
+                            heading="My Services"
+                            maxH={400}
+                            right={0}
+                            w={320}
+                            {...styles.services.list}
+                            borderTop={1}
+                            borderTopColor="sandstone.main"
+                            pt={1}
+                          >
+                            {servicesLinks?.map(({ url, ...rest }, index: number) => (
+                              <List.Item key={index} linkProps={{ href: url }} {...rest} />
+                            ))}
+                          </List>
+                        </Box>
+                      )}
+                    </>
+                  </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} />}
+            {mainLinks !== undefined && <Header.Divider mx={1} />}
 
-          {isJsx(services) ? services : <Header.Services {...services} />}
-        </RenderOnScreen>
+            {isJsx(services) ? services : <Header.Services {...services} />}
+          </RenderOnScreen>
+        )}
 
         {isJsx(notifications) ? notifications : <Header.Notifications {...notifications} />}
 
         {isJsx(account) ? account : <Header.Account {...account} />}
 
         <RenderOnScreen maxWidth="lg">
-          {(account !== undefined || notifications !== undefined) && <Header.Divider ml={2} />}
+          {isApplication && <Header.Divider ml={1} />}
+          {!isApplication && (account !== undefined || notifications !== undefined) && <Header.Divider ml={1} />}
 
           <Header.MobileToggle />
 
           <Header.MobileContent>
-            {children}
+            {!isApplication && children}
 
             {isJsx(mainLinks) ? mainLinks : <Header.MainLinks links={mainLinks} />}
 
-            {isJsx(services) ? services : <Header.Services {...services} />}
+            {isJsx(services) ? services : <Header.Services {...services} showTopBorder={mainLinks ? true : false} />}
           </Header.MobileContent>
         </RenderOnScreen>
       </Header.Content>

package/src/icons/baseIcons/cul/culDatasetAlt.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', 'M16 16.6C16 16.2686 16.2686 16 16.6 16H18.4C18.7314 16 19 16.2686 19 16.6V18.4C19 18.7314 18.7314 19 18.4 19H16.6C16.2686 19 16 18.7314 16 18.4V16.6Z M16 24.6C16 24.2686 16.2686 24 16.6 24H18.4C18.7314 24 19 24.2686 19 24.6V26.4C19 26.7314 18.7314 27 18.4 27H16.6C16.2686 27 16 26.7314 16 26.4V24.6Z M24.6 16C24.2686 16 24 16.2686 24 16.6V18.4C24 18.7314 24.2686 19 24.6 19H26.4C26.7314 19 27 18.7314 27 18.4V16.6C27 16.2686 26.7314 16 26.4 16H24.6Z M24 24.6C24 24.2686 24.2686 24 24.6 24H26.4C26.7314 24 27 24.2686 27 24.6V26.4C27 26.7314 26.7314 27 26.4 27H24.6C24.2686 27 24 26.7314 24 26.4V24.6Z M5.60001 16C5.26863 16 5 16.2686 5 16.6V18.4C5 18.7314 5.26863 19 5.60001 19H7.39999C7.73137 19 8 18.7314 8 18.4V16.6C8 16.2686 7.73137 16 7.39999 16H5.60001Z M5.60001 24C5.26863 24 5 24.2686 5 24.6V26.4C5 26.7314 5.26863 27 5.60001 27H7.39999C7.73137 27 8 26.7314 8 26.4V24.6C8 24.2686 7.73137 24 7.39999 24H5.60001Z M16.6 5C16.2686 5 16 5.26862 16 5.60001V7.39999C16 7.73138 16.2686 8 16.6 8H18.4C18.7314 8 19 7.73138 19 7.39999V5.60001C19 5.26862 18.7314 5 18.4 5H16.6Z M24.6 5C24.2686 5 24 5.26862 24 5.60001V7.39999C24 7.73138 24.2686 8 24.6 8H26.4C26.7314 8 27 7.73138 27 7.39999V5.60001C27 5.26862 26.7314 5 26.4 5H24.6Z M32 4C32 1.79086 30.2091 0 28 0H4C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H28C30.2091 32 32 30.2091 32 28V4ZM2 11V4C2 2.89542 2.89543 2 4 2H11V11H2ZM28 30H13V13H30V28C30 29.1046 29.1046 30 28 30ZM11 30V13H2V28C2 29.1046 2.89543 30 4 30H11ZM30 11H13V2H28C29.1046 2 30 2.89542 30 4V11Z'],
+  name: 'culDatasetAlt',
+  pathProps: { fillRule: 'evenodd', clipRule: 'evenodd' }
+} as IconDefinition

package/src/icons/baseIcons/icons.ts

@@ -45,6 +45,7 @@ export { default as culCovid } from './cul/culCovid'
 export { default as culCreateReport } from './cul/culCreateReport'
 export { default as culDatacatalogue } from './cul/culDatacatalogue'
 export { default as culDataset } from './cul/culDataset'
+export { default as culDatasetAlt } from './cul/culDatasetAlt'
 export { default as culDeepSearch } from './cul/culDeepSearch'
 export { default as culDotsMenu } from './cul/culDotsMenu'
 export { default as culEyeAssess } from './cul/culEyeAssess'

package/src/icons/baseIcons/types.ts

@@ -46,6 +46,7 @@ export type BaseIcon =
   | 'culCreateReport'
   | 'culDatacatalogue'
   | 'culDataset'
+  | 'culDatasetAlt'
   | 'culDeepSearch'
   | 'culDotsMenu'
   | 'culEyeAssess'

package/src/tree/theme.ts

@@ -1,72 +1,73 @@
-import { Dict } from '../utils'
-
-function variantDefault(props: Dict) {
-  const item: Dict = {
-    activeBg: 'skyBlue.30',
-    hoverBg: 'skyBlue.20',
-    selectedBg: 'skyBlue.10',
-    px: 2
-  }
-
-  return { item }
-}
-
 const baseStyle = {}
 
 const defaultProps = {
-  size: 'md',
+  size: 'xl',
   variant: 'default'
 }
 
-const parts = ['container', 'icon', 'item', 'text']
+const parts = ['container', 'icon', 'firstLevelItem', 'item', 'text']
 
 const sizes = {
-  sm: {
-    icon: {
-      size: 'xs'
-    },
+  xl: {
     item: {
-      fontSize: 'md',
-      h: 32,
-      py: '3px'
-    }
-  },
-  md: {
+      fontSize: 'md', // 16px
+      height: 48,
+      lineHeight: '24px',
+      py: '12px'
+    },
     icon: {
-      size: 'sm'
+      height: 18,
+      width: 18
+    }
+  }
+}
+
+const variants = {
+  default: {
+    container: {
+      bg: 'white'
+    },
+    firstLevelItem: {
+      bg: 'white',
+      color: 'seaBlue.main',
+      activeColor: 'seaBlue.main',
+      activeBg: 'skyBlue.85',
+      hoverBg: 'skyBlue.80' // '#A6DEF2'
     },
     item: {
-      fontSize: 'md',
-      h: 40,
-      py: '5px'
+      bg: 'white',
+      color: 'seaBlue.main',
+      activeColor: 'seaBlue.main',
+      activeBg: 'skyBlue.85',
+      hoverBg: 'skyBlue.80',
+      selectedBg: 'skyBlue.10',
+      px: 2
     }
   },
-  lg: {
-    item: {
-      fontSize: 'md',
-      h: 48,
-      py: '7px'
+  dark: {
+    container: {
+      bg: 'darkBlue.main',
+      color: 'white'
     },
-    icon: {
-      size: 'md'
-    }
-  },
-  xl: {
-    item: {
-      fontSize: 'lg',
-      h: 56,
-      py: '9px'
+    firstLevelItem: {
+      bg: 'darkBlue.main',
+      color: 'white',
+      activeBg: 'darkBlue.25',
+      activeColor: 'seaBlue.main',
+      hoverBg: 'darkBlue.25', //'#152D6A'
+      hoverColor: 'white'
     },
-    icon: {
-      scale: 2
+    item: {
+      bg: 'skyBlue.97',
+      color: 'seaBlue.main',
+      activeBg: 'skyBlue.85',
+      activeColor: 'seaBlue.main',
+      hoverBg: 'skyBlue.80',
+      hoverColor: 'seaBlue.main'
     }
   }
 }
 
-const variants = {
-  default: variantDefault
-}
-
 export default {
   baseStyle,
   defaultProps,