@veracity/vui 2.30.1-beta.1 → 2.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.30.1-beta.1",
+  "version": "2.31.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",
@@ -54,4 +54,4 @@
     "dist",
     "src"
   ]
-}
+}

package/src/button/theme.ts

@@ -279,7 +279,6 @@ const variants: Record<string, Record<string, Record<string, string>>> = {
       bg: '#ffffff',
       hoverBg: '#D3EEF8',
       activeBg: '#E9F7FC',
-      hoverActiveBg: '#D3EEF8',
       disabledBg: '#F8F7F7',
       borderColor: 'transparent',
       hoverBorderColor: '#003591',
@@ -297,7 +296,6 @@ const variants: Record<string, Record<string, Record<string, string>>> = {
       bg: '#0F204B',
       hoverBg: '#003591',
       activeBg: '#0041B2',
-      hoverActiveBg: '#003591',
       disabledBg: '#0F204B',
       borderColor: 'transparent',
       hoverBorderColor: '#91FFB4',

package/src/sidemenuV2/sidemenuItemV2.tsx

@@ -6,7 +6,7 @@ import type { BadgeProps } from '../badge/badge.types'
 import Box from '../box'
 import Button from '../button'
 import type { VuiComponent } from '../core'
-import { omitThemingProps, vui } from '../core'
+import { omitThemingProps, styled, th, vui } from '../core'
 import Icon from '../icon'
 import type { IconProp } from '../icon'
 import Popover from '../popover'
@@ -21,19 +21,42 @@ interface SidemenuItemContentProps {
   icon?: IconProp
   iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
   title: string
-  isMenuExpanded: boolean
+  isMenuExpanded?: boolean
+  isInPopover?: boolean
   badge?: Pick<BadgeProps, 'text' | 'variant'>
   badgeLinkUrl?: string
 }
 
 const SidemenuItemContent = memo<SidemenuItemContentProps>(
-  ({ icon, iconSize = 'sm', title, isMenuExpanded, badge, badgeLinkUrl }) => {
+  ({ icon, iconSize = 'sm', title, isMenuExpanded, isInPopover, badge, badgeLinkUrl }) => {
     // Calculate dynamic margins based on menu state
     const iconBaseMarginLeft = 13 / 8 // 1.625rem (13px)
     const iconMarginRight = isMenuExpanded
       ? 10 / 8 // 1.25rem (10px) when expanded
       : 20 / 8 // 2.5rem (20px) when collapsed
 
+    if (isInPopover)
+      return (
+        <>
+          <T isTruncated size="sm" display="inline-block" fontWeight="500" ml={iconBaseMarginLeft}>
+            {title}
+          </T>
+          {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (
+            <Badge
+              {...badge}
+              data-link={btoa(badgeLinkUrl ?? '#')}
+              variant={badge.variant ?? 'subtleGreen'}
+              size="sm"
+              minW="32px"
+              fontSize="12px"
+              lineHeight="16px"
+              ml="10px"
+              mr="10px"
+            />
+          )}
+        </>
+      )
+
     return (
       <>
         {/* Icon container with responsive margins */}
@@ -65,6 +88,15 @@ const SidemenuItemContent = memo<SidemenuItemContentProps>(
 
 SidemenuItemContent.displayName = 'SidemenuItemContent'
 
+export const PopoverHovered = styled.div<{ hoverColor: string }>`
+  &:hover .vui-sidemenu-item-popover .vui-button.vui-button {
+    background: ${p => th.color(p.hoverColor)};
+  }
+  &:hover div:last-child .tippy-content .vui-sidemenu-item-content > .vui-box > .vui-button.vui-button {
+    background: ${p => th.color(p.hoverColor)};
+  }
+`
+
 /** A menu item. */
 export const SidemenuItemV2 = vui<'button', SidemenuItemV2Props>((props, ref) => {
   const {
@@ -218,7 +250,6 @@ export const SidemenuItemV2 = vui<'button', SidemenuItemV2Props>((props, ref) =>
       bg: 'transparent',
       hoverBg: 'transparent',
       activeBg: 'transparent',
-      hoverActiveBg: 'transparent',
     }
   }, [isSubmenuOpen, themeValues.buttonVariant])
 
@@ -226,21 +257,37 @@ export const SidemenuItemV2 = vui<'button', SidemenuItemV2Props>((props, ref) =>
     <Box flexDirection="column" ref={ref} w="100%" mt={onBottom ? 'auto' : 0} id={computedItemId}>
       {!isMenuExpanded && children ? (
         <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement="right-start" trigger="mouseenter">
-          <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>
-            <Box {...buttonStyles} borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}>
-              <SidemenuItemContent
-                icon={icon}
-                iconSize={buttonStyles.iconSize}
-                title={title}
-                isMenuExpanded={isMenuExpanded}
-              />
-            </Box>
-          </Popover.Trigger>
-          <Popover.Content elevation="none">
-            <Box flexDirection="column" justifyContent="start" w="100%">
-              {children}
-            </Box>
-          </Popover.Content>
+          {({ isOpen }) => (
+            <PopoverHovered hoverColor={isDark ?'#003591' : '#d3eef8'}>
+              <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>
+                <Button
+                  {...buttonStyles}
+                  borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}
+                  isActive={isExactlyActive}
+                >
+                  <SidemenuItemContent
+                    icon={icon}
+                    iconSize={buttonStyles.iconSize}
+                    title={title}
+                    isMenuExpanded={isMenuExpanded}
+                  />
+                </Button>
+              </Popover.Trigger>
+              <Popover.Content elevation="none" className={cs('vui-sidemenu-item-content', className)}>
+                <Box flexDirection="column" justifyContent="start" w="100%">
+                  <Button
+                    {...buttonStyles}
+                    borderLeftColor={'transparent!important'}
+                    minW={'240px'}
+                    isActive={isOpen && isExactlyActive}
+                  >
+                    <SidemenuItemContent title={title} isInPopover={true} />
+                  </Button>
+                  {children}
+                </Box>
+              </Popover.Content>
+            </PopoverHovered>
+          )}
         </Popover>
       ) : (
         <Button

package/src/sidemenuV2/sidemenuV2.tsx

@@ -56,7 +56,7 @@ const SidemenuInner = vui<'div', SidemenuV2Props>((props, ref) => {
 
   // Get state from context
   const context = useSidemenuContext()
-  const { isMenuExpanded = true, setIsExpanded } = context || {}
+  const { isMenuExpanded = false, setIsExpanded } = context || {}
 
   // Get styles configuration early
   const styles = useStyleConfig('SidemenuV2', props)

package/src/tutorial/tutorialCard.tsx

@@ -47,8 +47,8 @@ export function TutorialCard({
       column
       justifyContent="space-between"
       minH={400}
-      p={2}
-      pt={1}
+      px={3}
+      py={2}
       w={580}
     >
       <Box