@veracity/vui 2.10.0 → 2.11.0

package/src/definition/definition.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+
+import { styled, useStyleConfig, vui } from '../core'
+import { DefinitionProps } from './definition.types'
+import { DefinitionContent } from './definitionContent'
+
+/**
+ * Properties are definition lists
+ * */
+// @formatter:off
+export const DefinitionVerticalBase = styled.dlBox`
+  display: grid;
+  gap: 1em;
+  grid-template-columns: repeat(auto-fit, minmax(10em, 20em));
+
+  .vui-definitionItemWrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  dt,
+  dd {
+    display: inline-flex;
+  }
+`
+
+export const DefinitionHorizontalBase = styled.dlBox`
+  padding: 10px;
+  display: grid;
+  gap: 0;
+
+  .vui-definitionItemWrapper {
+    display: flex;
+    flex-direction: column;
+    @media (min-width: 1024px) {
+      flex-direction: row;
+    }
+  }
+
+  dt,
+  dd {
+    display: inline-flex;
+    padding-left: 5px;
+  }
+
+  dd {
+    ::after {
+      content: '';
+    }
+    @media (min-width: 1024px) {
+      ::after {
+        content: ',';
+      }
+    }
+  }
+
+  dt {
+    width: 20%;
+    min-width: 130px;
+  }
+`
+// @formatter:on
+
+export const Definition = vui<'dl', DefinitionProps>((props, ref) => {
+  const { orientation = 'horizontal', ...rest } = props as DefinitionProps
+  const styles = useStyleConfig('Definition', props)
+
+  console.log('orientation', orientation)
+
+  return (
+    <>
+      {orientation === 'horizontal' && (
+        <DefinitionHorizontalBase className="vui-definition" {...styles.container} {...rest}>
+          <DefinitionContent {...rest} />
+        </DefinitionHorizontalBase>
+      )}
+      {orientation === 'vertical' && (
+        <DefinitionVerticalBase className="vui-definition" {...styles.container} {...rest}>
+          <DefinitionContent {...rest} />
+        </DefinitionVerticalBase>
+      )}
+    </>
+  )
+})
+
+export default Definition

package/src/definition/definition.types.ts

@@ -0,0 +1,24 @@
+import { IconProp } from '../icon'
+import { SystemProps } from '../system'
+import { ThemingProps } from '../theme'
+
+export type DefinitionItemProps = SystemProps & {
+  key: string
+  keyHasIcon?: boolean
+  value: string | number | string[] | number[]
+  valueHasIcon?: boolean
+}
+export type DefinitionProps = SystemProps &
+  ThemingProps<'Definition'> & {
+    /** Socket displaying icon on the left side. */
+    iconLeft?: IconProp | JSX.Element
+    /** Socket displaying icon on the right side. */
+    iconRight?: IconProp | JSX.Element
+    isLabelBold?: boolean
+    isValueBold?: boolean
+    items?: DefinitionItemProps[]
+    /** Socket defining orientation. */
+    orientation?: 'horizontal' | 'vertical'
+    size?: 'sm' | 'md'
+    variant?: 'light' | 'dark'
+  }

package/src/definition/definitionContent.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+
+import Box from '../box'
+import { styled, useStyleConfig, vui } from '../core'
+import Icon from '../icon'
+import { cs, isArray } from '../utils'
+import { DefinitionItemProps, DefinitionProps } from './definition.types'
+
+export const DefinitionItemKey = styled.dtBox``
+export const DefinitionItemValue = styled.ddBox``
+
+export const DefinitionContent = vui<'dl', DefinitionProps>(props => {
+  const { iconLeft, iconRight, isLabelBold, isValueBold, items } = props as DefinitionProps
+
+  const styles = useStyleConfig('Definition', props)
+
+  return (
+    <>
+      {isArray<DefinitionItemProps>(items)
+        ? items.map(({ key, value, ...props }, index) => (
+            <Box className="vui-definitionItemWrapper" key={index}>
+              <DefinitionItemKey fontWeight={isLabelBold ? 'demi' : 'default'} {...styles.dt}>
+                {props.keyHasIcon && iconLeft && (
+                  <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />
+                )}
+                {key}
+                {props.keyHasIcon && iconRight && (
+                  <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />
+                )}
+              </DefinitionItemKey>
+              {isArray(value) ? (
+                value.map((value, index) => (
+                  <DefinitionItemValue fontWeight={isValueBold ? 'demi' : 'default'} {...styles.dd} key={index}>
+                    {props.valueHasIcon && iconLeft && (
+                      <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />
+                    )}
+                    {value}
+                    {props.valueHasIcon && iconRight && (
+                      <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />
+                    )}
+                  </DefinitionItemValue>
+                ))
+              ) : (
+                <DefinitionItemValue fontWeight={isValueBold ? 'demi' : 'default'} {...styles.dd}>
+                  {props.valueHasIcon && iconLeft && (
+                    <Icon className={cs('vui-definitionIcon')} name={iconLeft} {...styles.icon} />
+                  )}
+                  {value}
+                  {props.valueHasIcon && iconRight && (
+                    <Icon className={cs('vui-definitionIcon')} name={iconRight} {...styles.icon} />
+                  )}
+                </DefinitionItemValue>
+              )}
+            </Box>
+          ))
+        : items}
+    </>
+  )
+})
+
+export default DefinitionContent

package/src/definition/index.ts

@@ -0,0 +1,2 @@
+export * from './definition'
+export { default } from './definition'

package/src/definition/theme.ts

@@ -0,0 +1,73 @@
+const baseStyle = {}
+
+const defaultProps = {
+  size: 'md',
+  variant: 'light'
+}
+
+const parts = ['container', 'icon', 'dt', 'dd']
+
+const sizes = {
+  sm: {
+    container: {
+      fontSize: 'sm',
+      lineHeight: '22px'
+    },
+    dt: {
+      fontSize: 'sm',
+      spaceX: 4
+    },
+    dd: {
+      fontSize: 'sm',
+      spaceX: 4
+    },
+    icon: {
+      size: 'sm',
+      mx: 0.5,
+      my: 'auto'
+    }
+  },
+  md: {
+    container: {
+      fontSize: 'md',
+      lineHeight: '30px'
+    },
+    dt: {
+      fontSize: 'md',
+      spaceX: 6
+    },
+    dd: {
+      fontSize: 'md',
+      spaceX: 6
+    },
+    icon: {
+      size: 'md',
+      mx: 0.5,
+      my: 'auto'
+    }
+  }
+}
+
+const variants = {
+  light: {
+    container: {
+      bg: 'white',
+      color: 'sandstone.20',
+      borderColor: 'transparent'
+    }
+  },
+  dark: {
+    container: {
+      bg: 'darkBlue.main',
+      color: 'white'
+    }
+  }
+}
+
+export default {
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
+}

package/src/header/headerAccountUserInfo.tsx

@@ -33,13 +33,17 @@ export const HeaderAccountUserInfo = vui<'div', HeaderAccountUserInfoProps>((pro
           )}
           <Box column rowGap={role ? 0 : 0.5}>
             {displayName && (
-              <T fontSize={isApplication ? '12px' : 'inherit'} weight="demi">
+              <T fontSize={isApplication ? '12px' : 'inherit'} isTruncated pr={1} title={displayName} weight="demi">
                 {displayName}
               </T>
             )}
-            {companyName && <T fontSize={isApplication ? '12px' : 'inherit'}>{companyName}</T>}
+            {companyName && (
+              <T fontSize={isApplication ? '12px' : 'inherit'} isTruncated pr={1} title={companyName}>
+                {companyName}
+              </T>
+            )}
             {role && (
-              <T color="sandstone.45" fontSize={isApplication ? '12px' : 'inherit'}>
+              <T color="sandstone.45" fontSize={isApplication ? '12px' : 'inherit'} isTruncated pr={1} title={role}>
                 {role}
               </T>
             )}

package/src/header/headerLinkItem.tsx

@@ -34,12 +34,16 @@ export const HeaderLinkItem = vui<'li', HeaderLinkItemProps>((props, ref) => {
   const linkMobileProps = isMobile
     ? {
         color: 'darkBlue.main',
+        hoverColor: 'darkBlue.main',
         hoverBg: 'skyBlue.90',
+        activeColor: 'darkBlue.main',
+        activeBg: 'transparent',
         activeBorderColor: 'seaBlue.main',
-        activeBorderLeftWidth: 3,
-        pt: '0'
+        activeBorderLeftWidth: 0,
+        pt: '0',
+        activePl: isActive ? '13px' : '16px'
       }
-    : { activeBorderBottomWidth: 4, pt: '0px', activePt: '4px' }
+    : { activeBorderBottomWidth: 0, pt: '0px', activePt: isActive ? '1px' : '0' }
 
   const itemScreenProps = isMobile ? {} : { display: 'inline-flex', fontWeight: 'medium', h: '100%' }
 

package/src/header/headerNotifications.tsx

@@ -9,7 +9,7 @@ import { HeaderNotificationsProps } from './header.types'
 /*@formatter:off*/
 const Badge = styled.spanBox`
   align-items: center;
-  background-color: energyRed.main;
+  background-color: energyRed.45;
   border-radius: round;
   color: white;
   display: flex;
@@ -20,7 +20,7 @@ const Badge = styled.spanBox`
   position: absolute;
   right: 1px;
   top: 1px;
-  width: 20px;
+  min-width: 20px;
 `
 /*@formatter:on*/
 
@@ -49,7 +49,11 @@ export const HeaderNotifications = vui<'a', HeaderNotificationsProps>((props, re
         <>
           <Button.Icon name="falBell" />
 
-          {count > 0 && <Badge>{count < 100 ? count : '99+'}</Badge>}
+          {count > 0 && (
+            <Badge px={count < 9 ? '0' : '4px'} right={count < 9 ? 1 : 0}>
+              {count < 100 ? count : '99+'}
+            </Badge>
+          )}
         </>
       )}
     </Button>

package/src/header/headerSignIn.tsx

@@ -20,6 +20,7 @@ export const HeaderSignIn = vui<'button', HeaderSignInProps>((props, ref) => {
       className={cs('vui-headerSignIn', className)}
       href={url ?? links.signIn}
       ref={ref}
+      size="lg"
       variant={buttonVariant}
       {...styles.signIn}
       {...rest}

package/src/header/theme.ts

@@ -41,6 +41,7 @@ const variants = {
         activeBorderColor: 'darkBlue.main'
       },
       link: {
+        size: 'lg',
         color: 'darkBlue.main',
         borderColor: 'darkBlue.main',
         hoverColor: 'darkBlue.main',
@@ -108,6 +109,7 @@ const variants = {
         activeBorderColor: 'digiGreen.main'
       },
       link: {
+        size: 'lg',
         color: 'white',
         borderColor: 'digiGreen.main',
         hoverBg: 'seaBlue.25',

package/src/icons/baseIcons/conc/conCard.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+import { IconDefinition } from "../../types";
+
+export default {
+  details: [64, 64, [], "", "M7 8C5.34315 8 4 9.34315 4 11V41C4 42.6569 5.34314 44 7 44H10V23C10 20.2386 12.2386 18 15 18H52V11C52 9.34315 50.6569 8 49 8H7ZM7 46H10V53C10 55.7614 12.2386 58 15 58H57C59.7614 58 62 55.7614 62 53V23C62 20.2386 59.7614 18 57 18H54V11C54 8.23858 51.7614 6 49 6H7C4.23858 6 2 8.23858 2 11V41C2 43.7614 4.23858 46 7 46ZM12 53V46V34H60V53C60 54.6569 58.6569 56 57 56H15C13.3431 56 12 54.6569 12 53ZM60 26V23C60 21.3431 58.6569 20 57 20H54H15C13.3431 20 12 21.3431 12 23V26H60ZM21 46C20.4477 46 20 46.4477 20 47C20 47.5523 20.4477 48 21 48H26C26.5523 48 27 47.5523 27 47C27 46.4477 26.5523 46 26 46H21ZM30 47C30 46.4477 30.4477 46 31 46H44C44.5523 46 45 46.4477 45 47C45 47.5523 44.5523 48 44 48H31C30.4477 48 30 47.5523 30 47Z"],
+  name: "conCard",
+  pathProps: { fillRule: "evenodd", clipRule: "evenodd" }
+} as IconDefinition;

package/src/icons/baseIcons/conc/conEmptyBox.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [64, 64, [], '', 'M59.4263 11.2699C59.036 9.71542 57.4927 8.74227 55.9217 9.06007L31.6293 13.9744L7.74635 9.06237C6.18953 8.74218 4.65317 9.69176 4.2434 11.2274L2.10183 19.2534C1.72138 20.6792 2.43437 22.17 3.78312 22.7687L19.8329 29.8941C21.1643 30.4852 22.728 30.0344 23.5404 28.8252L31.6346 16.7778L39.8352 28.7837C40.6816 30.0227 42.3133 30.4459 43.6552 29.7743L59.6397 21.7744C60.8978 21.1448 61.5493 19.7255 61.2067 18.3611L59.4263 11.2699ZM56.3183 11.0204C56.8419 10.9144 57.3564 11.2388 57.4865 11.757L59.2669 18.8481C59.3811 19.3029 59.1639 19.776 58.7446 19.9859L42.76 27.9858C42.3128 28.2097 41.7689 28.0686 41.4867 27.6556L33.3041 15.6761L56.3183 11.0204ZM6.17579 11.7431C6.31238 11.2312 6.82451 10.9146 7.34344 11.0214L29.9665 15.6743L21.8803 27.7099C21.6095 28.1129 21.0882 28.2632 20.6444 28.0662L4.59465 20.9408C4.14507 20.7412 3.90741 20.2443 4.03422 19.769L6.17579 11.7431ZM32.6277 24.6616C32.6277 24.1093 32.18 23.6616 31.6277 23.6616C31.0754 23.6616 30.6277 24.1093 30.6277 24.6616V52.3252L9.28119 46.0468C8.00444 45.6713 7.12769 44.4996 7.12769 43.1687V27.4775L5.12769 26.6354V43.1687C5.12769 45.3868 6.58894 47.3397 8.71685 47.9656L30.2169 54.2891C31.1379 54.56 32.1175 54.56 33.0385 54.2891L54.5385 47.9656C56.6664 47.3397 58.1277 45.3868 58.1277 43.1687V25.8459L56.1277 26.6881V43.1687C56.1277 44.4996 55.2509 45.6713 53.9742 46.0468L32.6277 52.3252V24.6616Z'],
+  name: 'conEmptyBox'
+} as IconDefinition

package/src/icons/baseIcons/icons.ts

@@ -1,4 +1,5 @@
 export { default as conAPI } from './conc/conAPI'
+export { default as conCard } from './conc/conCard'
 export { default as conClock } from './conc/conClock'
 export { default as conSaveTimeAndMoney } from './conc/conSaveTimeAndMoney'
 export { default as conVesselConnect } from './conc/conVesselConnect'
@@ -9,6 +10,7 @@ export { default as conDatabasePlus } from './conc/conDatabasePlus'
 export { default as conDataSearchAlt } from './conc/conDataSearchAlt'
 export { default as conDataSearchPlus } from './conc/conDataSearchPlus'
 export { default as conDataset } from './conc/conDataset'
+export { default as conEmptyBox } from './conc/conEmptyBox'
 export { default as conFolderPlus } from './conc/conFolderPlus'
 export { default as conInsightSearchAlt } from './conc/conInsightSearchAlt'
 export { default as conLNGBunkering } from './conc/conLNGBunkering'

package/src/icons/baseIcons/types.ts

@@ -1,5 +1,6 @@
 export type BaseIcon =
   | 'conAPI'
+  | 'conCard'
   | 'conClock'
   | 'conSaveTimeAndMoney'
   | 'conVesselConnect'
@@ -10,6 +11,7 @@ export type BaseIcon =
   | 'conDataSearchAlt'
   | 'conDataSearchPlus'
   | 'conDataset'
+  | 'conEmptyBox'
   | 'conFolderPlus'
   | 'conInsightSearchAlt'
   | 'conLNGBunkering'

package/src/index.ts

@@ -10,6 +10,7 @@ export * from './card'
 export * from './checkbox'
 export * from './copyToClipboard'
 export * from './core'
+export * from './definition'
 export * from './dialog'
 export * from './divider'
 export * from './dragAndDrop'

package/src/onedesign-tokens/dist/js/rem/button.js

@@ -0,0 +1,85 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 22 Mar 2023 12:31:05 GMT
+ */
+
+export const buttonSizeLargeFontSize = "1.125rem";
+export const buttonSizeLargeLineHeight = "1.75rem";
+export const buttonSizeLargePadding = "0.5rem 1rem";
+export const buttonSizeMediumFontSize = "1rem";
+export const buttonSizeMediumLineHeight = "1.5rem";
+export const buttonSizeMediumPadding = "0.25rem calc(0.25rem * 3)";
+export const buttonSizeSmallFontSize = "0.875rem";
+export const buttonSizeSmallLineHeight = "1.25rem";
+export const buttonSizeSmallPadding = "calc(0.25rem / 2) 0.5rem";
+export const buttonSizeDefaultFontSize = "1rem";
+export const buttonSizeDefaultLineHeight = "1.5rem";
+export const buttonSizeDefaultPadding = "0.25rem calc(0.25rem * 3)";
+export const buttonTypePrimaryDefaultBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryDefaultBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryDefaultBackgroundColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypePrimaryDefaultBackgroundColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypePrimaryDefaultTextColorDark = "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryDefaultTextColorLight = "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryHoverBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryHoverBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryHoverBackgroundColorDark = "hsla(218, 100%, 20%, 1)";
+export const buttonTypePrimaryHoverBackgroundColorLight = "hsla(139, 100%, 70%, 1)";
+export const buttonTypePrimaryHoverTextColorDark = "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryHoverTextColorLight = "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryActiveBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryActiveBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypePrimaryActiveBackgroundColorDark = "hsla(218, 100%, 35%, 1)";
+export const buttonTypePrimaryActiveBackgroundColorLight = "hsla(139, 100%, 85%, 1)";
+export const buttonTypePrimaryActiveTextColorDark = "hsla(40, 3%, 100%, 1)";
+export const buttonTypePrimaryActiveTextColorLight = "hsla(223, 67%, 18%, 1)";
+export const buttonTypePrimaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonTypeSecondaryDefaultBorderColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryDefaultBorderColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryDefaultBackgroundColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeSecondaryDefaultBackgroundColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeSecondaryDefaultTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryDefaultTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryHoverBorderColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryHoverBorderColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryHoverBackgroundColorDark = "hsla(196, 74%, 80%, 1)";
+export const buttonTypeSecondaryHoverBackgroundColorLight = "hsla(218, 100%, 25%, 1)";
+export const buttonTypeSecondaryHoverTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryHoverTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryActiveBorderColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryActiveBorderColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryActiveBackgroundColorDark = "hsla(196, 74%, 85%, 1)";
+export const buttonTypeSecondaryActiveBackgroundColorLight = "hsla(218, 100%, 35%, 1)";
+export const buttonTypeSecondaryActiveTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeSecondaryActiveTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeSecondaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonTypeTertiaryDefaultBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBackgroundColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultBackgroundColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryDefaultTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryDefaultTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryHoverBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryHoverBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryHoverBackgroundColorDark = "hsla(196, 74%, 80%, 1)";
+export const buttonTypeTertiaryHoverBackgroundColorLight = "hsla(218, 100%, 25%, 1)";
+export const buttonTypeTertiaryHoverTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryHoverTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryActiveBorderColorDark = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryActiveBorderColorLight = "hsla(0, 0%, 0%, 0)";
+export const buttonTypeTertiaryActiveBackgroundColorDark = "hsla(196, 74%, 85%, 1)";
+export const buttonTypeTertiaryActiveBackgroundColorLight = "hsla(218, 100%, 35%, 1)";
+export const buttonTypeTertiaryActiveTextColorDark = "hsla(218, 100%, 28%, 1)";
+export const buttonTypeTertiaryActiveTextColorLight = "hsla(139, 100%, 78%, 1)";
+export const buttonTypeTertiaryFocusOutline = "0.25rem solid hsla(196, 100%, 43%, 1)";
+export const buttonDisabledCursor = "default";
+export const buttonDisabledOpacity = "0.5";
+export const buttonBorderStyle = "solid";
+export const buttonBorderWidth = "calc(0.125rem / 2)";
+export const buttonFontFamily = "'Avenir Next', Arial, sans-serif";
+export const buttonFontSize = "1rem";
+export const buttonLineHeight = "1.5rem";
+export const buttonFontWeight = "500";
+export const buttonPadding = "calc(0.25rem * 1.5) calc(0.25rem * 3)";
+export const buttonTransition = "all 0.15s ease-in-out";
+export const buttonCursor = "pointer";

package/src/sidemenu/sidemenuItem.tsx

@@ -4,6 +4,7 @@ import Box from '../box'
 import Button from '../button'
 import { omitThemingProps, useStyleConfig, vui, VuiComponent } from '../core'
 import Icon from '../icon'
+import { Popover } from '../popover'
 import T from '../t'
 import { cs } from '../utils'
 import { useSidemenuContext } from './context'
@@ -19,17 +20,13 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
   const isDark = variant === 'dark'
   const hasChildrenExpanded = !!children && isExpandedInternal
 
-  const innerContent = isExpandedInternal ? (
+  const innerContent = (
     <Box centerV px={2} py={1} w="100%" whiteSpace="pre">
       <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />
       <T isTruncated ml={2}>
         {title}
       </T>
     </Box>
-  ) : (
-    <Box centerV px={2} py={1} w="100%">
-      <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />
-    </Box>
   )
 
   const toggle = (e: MouseEvent<HTMLButtonElement>) => {
@@ -38,39 +35,53 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     setDisplayChildren(!displayChildren)
   }
 
+  const buttonStyles = {
+    alignItems: 'center',
+    border: 'none',
+    borderRadius: 0,
+    borderLeft: '3px solid transparent',
+    borderLeftColor: isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined,
+    color: hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10',
+    h: 'auto',
+    justifyContent: 'space-between',
+    onClick: () => onClick?.(),
+    p: 0,
+    variant: isDark ? 'tertiaryLight' : 'tertiaryDark',
+    w: '100%',
+    ...styles.item,
+    minH: size === 'lg' ? '56px' : '40px',
+    ...rest
+  }
+
   return (
     <Box flexDirection="column" ref={ref} w="100%">
-      <Button
-        alignItems="center"
-        border="none"
-        borderLeft="3px solid transparent"
-        borderLeftColor={isActive ? (isDark ? 'digiGreen.main' : 'seaBlue.main') : undefined}
-        borderRadius={0}
-        className={cs('vui-sidemenu-item', className)}
-        color={hasChildrenExpanded ? 'seaBlue.main' : isDark ? 'digiGreen.main' : 'sandstone.10'}
-        h="auto"
-        justifyContent="space-between"
-        onClick={() => onClick?.()}
-        p={0}
-        variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}
-        w="100%"
-        {...styles.item}
-        minH={size === 'lg' ? '56px' : '40px'}
-        {...rest}
-      >
-        {innerContent}
-        {hasChildrenExpanded && (
-          <Button
-            className="vui-sidemenu-item-expand"
-            icon={displayChildren ? 'falChevronUp' : 'falChevronDown'}
-            mr={1}
-            onClick={toggle}
-            size="sm"
-            variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}
-          />
-        )}
-      </Button>
-      {!!children && displayChildren && (
+      {!hasChildrenExpanded && children ? (
+        <Popover offset={[0, 0]} placement="right-start" trigger="mouseenter">
+          <Popover.Trigger className={cs('vui-sidemenu-item-popover', className)} {...buttonStyles}>
+            <Box borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}>{innerContent}</Box>
+          </Popover.Trigger>
+          <Popover.Content shadow={'none'}>
+            <Box flexDirection="column" justifyContent="start" w="100%">
+              {children}
+            </Box>
+          </Popover.Content>
+        </Popover>
+      ) : (
+        <Button className={cs('vui-sidemenu-item', className)} {...buttonStyles}>
+          {innerContent}
+          {hasChildrenExpanded && (
+            <Button
+              className="vui-sidemenu-item-expand"
+              icon={displayChildren ? 'falChevronUp' : 'falChevronDown'}
+              mr={1}
+              onClick={toggle}
+              size="sm"
+              variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}
+            />
+          )}
+        </Button>
+      )}
+      {!!children && hasChildrenExpanded && displayChildren && (
         <Box flexDirection="column" justifyContent="start" w="100%">
           {children}
         </Box>

package/src/spinner/spinner.tsx

@@ -29,8 +29,8 @@ export const Spinner = vui<'div', SpinnerProps>((props, ref) => {
     thickness,
     ...rest
   } = props
-  const styles = useStyleConfig('Spinner', props)
 
+  const styles = useStyleConfig('Spinner', props)
   const isCustomSize = typeof size === 'number'
   const positionProps = spinnerPositionMapping[textPosition]
   const speed = spinnerSpeedMapping[speedProp] ?? speedProp
@@ -49,8 +49,8 @@ export const Spinner = vui<'div', SpinnerProps>((props, ref) => {
       gap={1}
       ref={ref}
       transitionDuration="fast"
-      {...styles.container}
       {...positionProps.container}
+      {...styles.container}
       {...rest}
     >
       <SpinnerCircle
@@ -59,8 +59,7 @@ export const Spinner = vui<'div', SpinnerProps>((props, ref) => {
         {...styles.circle}
         {...circleProps}
       />
-
-      {text && (
+      {!!text && (
         <T className="vui-spinnerText" {...styles.text}>
           {text}
         </T>

package/src/spinner/spinner.types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react'
+
 import { BoxProps } from '../box'
 import { ThemingProps } from '../theme'
 
@@ -14,7 +16,7 @@ export type SpinnerProps = Omit<BoxProps, 'size' | 'variant'> &
     /** Theme size or a number defining height and width. */
     size?: ThemingProps<'Spinner'>['size'] | number
     /** Displays given text next to the spinner. */
-    text?: string
+    text?: ReactNode
     /** Text placement relative to the spinner. */
     textPosition?: 'bottom' | 'left' | 'right' | 'top'
     /** Thickness of the spinner circle in pixels. */