@veracity/vui 2.5.0 → 2.6.0

package/src/sidemenu/sidemenu.tsx

@@ -5,7 +5,7 @@ import Button from '../button'
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import Icon from '../icon'
 import { cs, filterUndefined } from '../utils'
-import { border, expandedWidth, right } from './consts'
+import { border, expandedWidth } from './consts'
 import { SidemenuProvider } from './context'
 import { SidemenuItemProps, SidemenuProps } from './sidemenu.types'
 import SidemenuItem from './sidemenuItem'
@@ -32,13 +32,11 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
     setIsExpandedInternal(isExpanded)
   }, [isExpanded])
 
-  const toggle = () => {
-    setIsExpandedInternal(!isExpandedInternal)
-  }
+  const onToggle = () => setIsExpandedInternal(!isExpandedInternal)
 
   const w = isExpandedInternal ? width : expandedWidth
-  const icon = isExpandedInternal ? 'falArrowLeft' : 'falArrowRight'
-  const iconRight = isExpandedInternal ? right.expanded : right.collapsed
+  const icon = `falArrow${isExpandedInternal ? 'Left' : 'Right'}`
+  const justifyContent = isExpandedInternal ? 'flex-end' : 'center'
 
   return (
     <SidemenuProvider value={context}>
@@ -49,8 +47,8 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
             : children}
         </Box>
         <Box borderTop={border} className="vui-sidemenu-bottom" w="100%">
-          <Button borderRadius={0} onClick={toggle} variant="tertiaryDark" w="100%">
-            <Icon name={icon} position="absolute" right={iconRight} />
+          <Button borderRadius={0} justifyContent={justifyContent} onClick={onToggle} variant="tertiaryDark" w="100%">
+            <Icon name={icon} />
           </Button>
         </Box>
       </SidemenuBase>

package/src/system/effects.ts

@@ -15,6 +15,7 @@ export type OpacityProps = {
 type BoxShadowProp = SystemProp<ShadowGetter | AnyString, VuiTheme>
 export type BoxShadowProps = {
   boxShadow?: BoxShadowProp
+  elevation?: BoxShadowProp
   hoverBoxShadow?: BoxShadowProp
 }
 

package/src/tabs/consts.ts

@@ -0,0 +1,17 @@
+import { Dict } from '../utils'
+
+export const tabsColors = {
+  activeBg: 'skyBlue.main',
+  border: 'sandstone.main',
+  color: 'sandstone.10',
+  hover: 'skyBlue.hover',
+  main: 'seaBlue.main'
+}
+
+export const iconSizeMapper: Dict = {
+  sm: 'xs',
+  md: 'sm',
+  lg: 'md',
+  xl: 'lg',
+  xxl: 'xl'
+}

package/src/tabs/tab.tsx

@@ -11,13 +11,10 @@ export const TabBase = styled.divBox`
 /**
  * Implements a Tab component
  */
-export const Tab = vui<'div', TabProps>((props, ref) => {
-  const { children, className } = props
-  return (
-    <TabBase className={cs('vui-tab', className)} ref={ref}>
-      {children}
-    </TabBase>
-  )
-})
+export const Tab = vui<'div', TabProps>(({ children, className }, ref) => (
+  <TabBase className={cs('vui-tab', className)} ref={ref}>
+    {children}
+  </TabBase>
+))
 
 export default Tab

package/src/tabs/tabs.tsx

@@ -13,7 +13,7 @@ export const TabsBase = styled.divBox<TabsProps>`
 `
 
 /**
- * Implements Tabs navigation to switch between views.
+ * Implements Tabs navigation to switch between views. Implements Tabs navigation to switch between views. **Do not use as a top menu in a page!**
  */
 export const Tabs = vui<'div', TabsProps>((props, ref) => {
   const { activeTabId, showBorder = true, children, className, size, onTabClick, ...rest } = props

package/src/tabs/tabs.types.ts

@@ -24,6 +24,7 @@ export type TabProps = SystemProps &
     id?: number
     title: ReactNode
     disabled?: boolean
+    className?: string
     onClick?: () => void
   }
 

package/src/tabs/tabsNavBar.tsx

@@ -5,16 +5,11 @@ import { vui } from '../core'
 import { Icon } from '../icon'
 import { List, ListItem } from '../list'
 import { cs, Dict } from '../utils'
-import { NavBarIconSize, TabNavBarProps } from './tabs.types'
+import { iconSizeMapper, tabsColors } from './consts'
+import { NavBarIconSize, TabNavBarProps, TabProps } from './tabs.types'
 import theme from './theme'
 
-const iconSizeMapper: Dict = {
-  sm: 'xs',
-  md: 'sm',
-  lg: 'md',
-  xl: 'lg',
-  xxl: 'xl'
-}
+const { activeBg, border, color, hover, main } = tabsColors
 
 export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
   const { tabs, onNavItemClick, activeNavItem, animationDirection, showBorder, size = 'md' } = props
@@ -28,9 +23,11 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
   const py = sizes[size ?? 'md'].tabsNavBar.py
   const iconMarginRight = size === 'xxl' ? '16px' : '8px'
 
+  const isActive = (tab: TabProps) => !tab.disabled && tab.id === activeNavItem
+
   return (
     <List
-      borderBottom={showBorder ? '1px solid sandstone.79' : 'none'}
+      borderBottom={showBorder ? `1px solid ${border}` : 'none'}
       className={cs('vui-tabsNavBar')}
       display="flex"
       isInteractive
@@ -40,14 +37,16 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
     >
       {tabs?.map?.(tab => (
         <ListItem
-          activeBg="skyBlue.90"
+          activeBg={tab.disabled ? undefined : activeBg}
+          bg="white"
           className={`vui-tabsNavBarItem vui-tabsNavBarItem-${tab?.id}`}
-          color="seaBlue.main"
+          color={isActive(tab) ? main : color}
           disabled={tab.disabled}
           display="inline-flex"
           fontSize={fontSize}
+          fontWeight={500}
           h={h}
-          hoverBg="skyBlue.85"
+          hoverBg={tab.disabled ? undefined : hover}
           key={tab.id}
           onClick={() => onNavItemClick?.(tab.id || 0)}
           position="relative"
@@ -58,10 +57,10 @@ export const TabsNavBar = vui<'div', TabNavBarProps>((props, ref) => {
             {!!tab.icon && <Icon mr={iconMarginRight} name={tab.icon} size={iconSize} />}
             {tab.title}
           </Box>
-          {!tab.disabled && tab.id === activeNavItem && (
+          {isActive(tab) && (
             <Box
               animation={animationDirection}
-              bg="seaBlue.main"
+              bg={main}
               bottom="-1px"
               h={borderWidth}
               left={0}

package/src/theme/types.ts

@@ -4,6 +4,7 @@ export type Animation = keyof VuiTheme['animations']
 export type Border = keyof VuiTheme['borders']
 export type Color = keyof VuiTheme['colors']
 export type Component = keyof VuiTheme['components']
+export type Elevation = keyof VuiTheme['shadows']
 export type Font = keyof VuiTheme['fonts']
 export type FontSize = keyof VuiTheme['fontSizes']
 export type FontWeight = keyof VuiTheme['fontWeights']

package/src/utils/styles.ts

@@ -5,6 +5,17 @@ export function cs(...classNames: any[]) {
   return classNames.filter(Boolean).join(' ')
 }
 
+/** Parses HSL color code. */
+export function parseHSL(color: string) {
+  const regexp = /hsl\((\d+),\s*([\d.]+)%,\s*([\d.]+)%\)/g
+  const res = regexp?.exec?.(color)?.slice?.(1)
+  return { h: Number(res?.[0]) || 0, s: Number(res?.[1]) || 0, l: Number(res?.[2]) || 0 }
+}
+
+/** Builds RGBA string. */
+export const buildRGBA = (r: number, g: number, b: number, alpha?: number) =>
+  alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`
+
 /** Converts hex color value to rgb with optional alpha property. */
 export function hexToRGBA(hex: string, alpha?: number) {
   let hexStr = hex
@@ -21,7 +32,52 @@ export function hexToRGBA(hex: string, alpha?: number) {
   const g = parseInt(hexStr.slice(2, 4), 16)
   const b = parseInt(hexStr.slice(4, 6), 16)
 
-  return alpha !== undefined ? `rgba(${r}, ${g}, ${b}, ${alpha})` : `rgb(${r}, ${g}, ${b})`
+  return buildRGBA(r, g, b, alpha)
+}
+
+/** Converts hsl color value to rgb with optional alpha property. */
+export function HSLToRGBA(h: number, s: number, l: number, alpha?: number) {
+  s /= 100
+  l /= 100
+
+  const c = (1 - Math.abs(2 * l - 1)) * s,
+    x = c * (1 - Math.abs(((h / 60) % 2) - 1)),
+    m = l - c / 2
+
+  let r = 0,
+    g = 0,
+    b = 0
+
+  if (0 <= h && h < 60) {
+    r = c
+    g = x
+    b = 0
+  } else if (60 <= h && h < 120) {
+    r = x
+    g = c
+    b = 0
+  } else if (120 <= h && h < 180) {
+    r = 0
+    g = c
+    b = x
+  } else if (180 <= h && h < 240) {
+    r = 0
+    g = x
+    b = c
+  } else if (240 <= h && h < 300) {
+    r = x
+    g = 0
+    b = c
+  } else if (300 <= h && h < 360) {
+    r = c
+    g = 0
+    b = x
+  }
+  r = Math.round((r + m) * 255)
+  g = Math.round((g + m) * 255)
+  b = Math.round((b + m) * 255)
+
+  return buildRGBA(r, g, b, alpha)
 }
 
 /** Styling to add ellipsis for long texts. */