@veracity/vui 2.30.0 → 2.31.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.30.0",
+  "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",

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/sidemenuV2/theme.ts

@@ -1,5 +1,3 @@
-import { colors } from '../theme'
-
 const baseStyle = {
   container: {
     display: 'flex',
@@ -85,10 +83,10 @@ const variants = {
     },
     toggleButton: {
       variant: 'tertiaryDark',
-      hoverBg: colors.sandstone[95],
+      hoverBg: 'sandstone.95',
     },
     item: {
-      color: colors.darkBlue.main,
+      color: 'darkBlue.main',
     },
   },
   dark: {

package/src/tutorial/index.ts

@@ -2,4 +2,3 @@ export * from './tutorial'
 export type * from './tutorial.types'
 export * from './tutorialCard'
 export * from './tutorialStep'
-export * from './useTutorial'

package/src/tutorial/tutorial.tsx

@@ -4,7 +4,6 @@ import type { JSXElementConstructor, ReactElement } from 'react'
 import { cs } from '../utils'
 import type { CloseEvent, TutorialProps } from './tutorial.types'
 import { TutorialCard } from './tutorialCard'
-import { useTutorial } from './useTutorial'
 
 /** Popover Tutorial is used to display information about a new, or existing feature. */
 export function Tutorial({
@@ -16,17 +15,15 @@ export function Tutorial({
   onFinish,
   steps,
   title,
-  id,
   placement = 'right',
   showSkipButton,
+  isVisible = true,
+  includeFinalPage = true,
+  useContentTitle = false,
 }: TutorialProps) {
-  const { isVisible, setIsVisible, saveDisplayed } = useTutorial(id)
-
   const onClose = (e: CloseEvent) => {
-    setIsVisible(false)
     if (e === 'dismissed') onDismiss?.()
     if (e === 'finished') onFinish?.()
-    saveDisplayed(e)
   }
 
   return (
@@ -41,6 +38,8 @@ export function Tutorial({
           showSkipButton={showSkipButton}
           steps={steps}
           title={title}
+          includeFinalPage={includeFinalPage}
+          useContentTitle={useContentTitle}
         />
       }
       interactive

package/src/tutorial/tutorial.types.ts

@@ -5,7 +5,7 @@ export type TutorialDataStep = {
   /** title of step */
   title: string
   /** Content */
-  content?: string
+  content?: string | React.ReactNode
   /** Link to page where they can read more */
   readMoreLink?: string
 }
@@ -35,6 +35,12 @@ export type TutorialProps = {
   title: string
   /** Link to page where they can read more */
   readMoreLink?: string
+  /** Decides if should show or hide tooltip  */
+  isVisible?: boolean
+  /** Should include last thank you page  */
+  includeFinalPage?: boolean
+  /** Should use dynamic header based on content  */
+  useContentTitle?: boolean
 }
 
 export type TutorialCardProps = {
@@ -56,6 +62,10 @@ export type TutorialCardProps = {
   readMoreLink?: string
   /** Show the Skip button */
   showSkipButton?: boolean
+  /** Include the final page */
+  includeFinalPage?: boolean
+  /** Should use dynamic header based on content  */
+  useContentTitle?: boolean
 }
 
 export type TutorialStepProps = {
@@ -64,9 +74,11 @@ export type TutorialStepProps = {
   /** Title of step */
   title: string
   /** Step content */
-  content?: string
+  content?: string | React.ReactNode
   /** Link to page where user can read more */
   readMoreLink?: string
+  /** Should use dynamic header based on content  */
+  useContentTitle?: boolean
 }
 
 export type TutorialStepWrapper = {

package/src/tutorial/tutorialCard.tsx

@@ -15,6 +15,8 @@ export function TutorialCard({
   onAction,
   onDismiss,
   onFinish,
+  includeFinalPage,
+  useContentTitle,
 }: TutorialCardProps) {
   const [steps, setSteps] = useState<TutorialStepWrapper[]>([])
   const [activeStep, setActiveStep] = useState<number>(0)
@@ -30,12 +32,12 @@ export function TutorialCard({
 
       if (readMoreLink) finalStep.readMoreLink = readMoreLink
 
-      setSteps([...s, { step: finalStep, key: propsSteps.length }])
+      includeFinalPage ? setSteps([...s, { step: finalStep, key: propsSteps.length }]) : setSteps([...s])
     }
   }, [title, propsSteps])
 
   const isStartStep = activeStep === 0
-  const isFinalStep = activeStep === propsSteps.length
+  const isFinalStep = includeFinalPage ? activeStep === propsSteps.length : activeStep === propsSteps.length - 1
 
   return (
     <Card
@@ -45,8 +47,8 @@ export function TutorialCard({
       column
       justifyContent="space-between"
       minH={400}
-      p={2}
-      pt={1}
+      px={3}
+      py={2}
       w={580}
     >
       <Box
@@ -60,7 +62,7 @@ export function TutorialCard({
         row
         style={{ WebkitFlexGrow: '0' }}
       >
-        <H4 color={tutorialColors.color}>{title}</H4>
+        <H4 color={tutorialColors.color}>{useContentTitle ? steps[activeStep]?.step?.title : title}</H4>
         {!isFinalStep && (
           <Button aria-label="close" icon="uiTimes" onClick={onDismiss} scale={2} variant="tertiaryLight" />
         )}
@@ -73,6 +75,7 @@ export function TutorialCard({
             key={s.step.title}
             readMoreLink={s.step.readMoreLink}
             title={s.step.title}
+            useContentTitle={useContentTitle}
           />
         ))}
       </Box>
@@ -116,17 +119,17 @@ export function TutorialCard({
         {(showSkipButton || isFinalStep || !!onAction) && (
           <Box alignItems="center" justifyContent="space-between">
             {showSkipButton && !isFinalStep && (
-              <Button mr={2} onClick={onDismiss} variant="primaryLight">
+              <Button mx={1} onClick={onDismiss} variant="secondaryLight">
                 Skip
               </Button>
             )}
             {isFinalStep && (
-              <Button mr={2} onClick={onFinish} variant="primaryLight">
-                Finish
+              <Button mx={1} onClick={onFinish} variant="primaryLight">
+                I got it
               </Button>
             )}
             {!!onAction && (
-              <Button mr={9} onClick={onAction} variant="primaryLight">
+              <Button ml={1} mr={showSkipButton || isFinalStep ? 12 : 2} onClick={onAction} variant="primaryLight">
                 {actionLabel}
               </Button>
             )}

package/src/tutorial/tutorialStep.tsx

@@ -2,11 +2,13 @@ import { Box, H5, v } from '../index'
 import { tutorialColors } from './consts'
 import type { TutorialStepProps } from './tutorial.types'
 
-export const TutorialStep = ({ active, content, title }: TutorialStepProps) => (
+export const TutorialStep = ({ active, content, title, useContentTitle }: TutorialStepProps) => (
   <v.div className="vui-tutorialStep" hidden={!active} pb={2}>
-    <H5 color={tutorialColors.color} fontWeight="medium" mb={1}>
-      {title}
-    </H5>
+    {!useContentTitle && (
+      <H5 color={tutorialColors.color} fontWeight="medium" mb={1}>
+        {title}
+      </H5>
+    )}
     <Box>{content}</Box>
   </v.div>
 )

package/dist/cjs/tutorial/useTutorial.d.ts

@@ -1,7 +0,0 @@
-import type { CloseEvent } from './tutorial.types';
-export declare const useTutorial: (tutorialId: string) => {
-    isVisible: boolean;
-    setIsVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    saveDisplayed: (e: CloseEvent) => void;
-};
-//# sourceMappingURL=useTutorial.d.ts.map

package/dist/cjs/tutorial/useTutorial.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTutorial.d.ts","sourceRoot":"","sources":["../../../src/tutorial/useTutorial.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAElD,eAAO,MAAM,WAAW,GAAI,YAAY,MAAM;;;uBAQlB,UAAU;CAGrC,CAAA"}

package/dist/cjs/tutorial/useTutorial.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTutorial = void 0;
-const react_1 = require("react");
-const useTutorial = (tutorialId) => {
-    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
-    const localStorageId = `vuiTutorial-${tutorialId}`;
-    (0, react_1.useEffect)(() => {
-        setIsVisible(!window.localStorage.getItem(localStorageId));
-    }, []);
-    const saveDisplayed = (e) => window.localStorage.setItem(localStorageId, e);
-    return { isVisible, setIsVisible, saveDisplayed };
-};
-exports.useTutorial = useTutorial;
-//# sourceMappingURL=useTutorial.js.map

package/dist/cjs/tutorial/useTutorial.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTutorial.js","sourceRoot":"","sources":["../../../src/tutorial/useTutorial.ts"],"names":[],"mappings":";;;AAAA,iCAA2C;AAIpC,MAAM,WAAW,GAAG,CAAC,UAAkB,EAAE,EAAE;IAChD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAA;IAC1D,MAAM,cAAc,GAAG,eAAe,UAAU,EAAE,CAAA;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,YAAY,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAA;IAC5D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;IAEvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,CAAA;AACnD,CAAC,CAAA;AAXY,QAAA,WAAW,eAWvB"}

package/dist/esm/tutorial/useTutorial.d.ts

@@ -1,7 +0,0 @@
-import type { CloseEvent } from './tutorial.types';
-export declare const useTutorial: (tutorialId: string) => {
-    isVisible: boolean;
-    setIsVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    saveDisplayed: (e: CloseEvent) => void;
-};
-//# sourceMappingURL=useTutorial.d.ts.map

package/dist/esm/tutorial/useTutorial.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTutorial.d.ts","sourceRoot":"","sources":["../../../src/tutorial/useTutorial.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAElD,eAAO,MAAM,WAAW,GAAI,YAAY,MAAM;;;uBAQlB,UAAU;CAGrC,CAAA"}

package/dist/esm/tutorial/useTutorial.js

@@ -1,11 +0,0 @@
-import { useEffect, useState } from 'react';
-export const useTutorial = (tutorialId) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const localStorageId = `vuiTutorial-${tutorialId}`;
-    useEffect(() => {
-        setIsVisible(!window.localStorage.getItem(localStorageId));
-    }, []);
-    const saveDisplayed = (e) => window.localStorage.setItem(localStorageId, e);
-    return { isVisible, setIsVisible, saveDisplayed };
-};
-//# sourceMappingURL=useTutorial.js.map

package/dist/esm/tutorial/useTutorial.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTutorial.js","sourceRoot":"","sources":["../../../src/tutorial/useTutorial.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAI3C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,UAAkB,EAAE,EAAE;IAChD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAC1D,MAAM,cAAc,GAAG,eAAe,UAAU,EAAE,CAAA;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAA;IAC5D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;IAEvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,CAAA;AACnD,CAAC,CAAA"}

package/src/tutorial/useTutorial.ts

@@ -1,16 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import type { CloseEvent } from './tutorial.types'
-
-export const useTutorial = (tutorialId: string) => {
-  const [isVisible, setIsVisible] = useState<boolean>(false)
-  const localStorageId = `vuiTutorial-${tutorialId}`
-
-  useEffect(() => {
-    setIsVisible(!window.localStorage.getItem(localStorageId))
-  }, [])
-
-  const saveDisplayed = (e: CloseEvent) => window.localStorage.setItem(localStorageId, e)
-
-  return { isVisible, setIsVisible, saveDisplayed }
-}