@veracity/vui 1.0.0 → 1.1.0

package/src/header/headerAccountUserInfo.tsx

@@ -10,42 +10,40 @@ import { HeaderAccountUserInfoProps } from './headerAccount.types'
 
 /** Displays user information, like username and company name, within HeaderAccount part. */
 export const HeaderAccountUserInfo = vui<'div', HeaderAccountUserInfoProps>((props, ref) => {
-	const { children, className, companyName, displayName, ...rest } = props
-	const styles = useStyleConfig('Header', useHeaderContext())
+  const { children, className, companyName, displayName, ...rest } = props
+  const styles = useStyleConfig('Header', useHeaderContext())
 
-	return (
-		<Box
-			className={cs('vui-headerAccountUserInfo', className)}
-			p={2}
-			pb={1}
-			ref={ref}
-			spaceX={2}
-			{...styles.accountUserInfo}
-			{...rest}
-		>
-			{children ?? (
-				<>
-					<Avatar
-						className="vui-headerAccountUserInfoAvatar"
-						colorScheme="prussian"
-						name={displayName}
-						size="lg"
-						variant="solid"
-					/>
-					<Box column>
-						{displayName && (
-							<T mb={0.5} weight="demi">
-								{displayName}
-							</T>
-						)}
-						{companyName && <T>{companyName}</T>}
-					</Box>
-				</>
-			)}
-		</Box>
-	)
+  return (
+    <Box
+      className={cs('vui-headerAccountUserInfo', className)}
+      p={2}
+      pb={1}
+      ref={ref}
+      spaceX={2}
+      {...styles.accountUserInfo}
+      {...rest}
+    >
+      {children ?? (
+        <>
+          <Avatar
+            className="vui-headerAccountUserInfoAvatar"
+            colorScheme="prussian"
+            name={displayName}
+            size="lg"
+            variant="solid"
+          />
+          <Box column>
+            {displayName && (
+              <T mb={0.5} weight="demi">
+                {displayName}
+              </T>
+            )}
+            {companyName && <T>{companyName}</T>}
+          </Box>
+        </>
+      )}
+    </Box>
+  )
 })
 
-HeaderAccountUserInfo.displayName = 'HeaderAccountUserInfo'
-
 export default HeaderAccountUserInfo

package/src/header/headerContent.tsx

@@ -8,23 +8,21 @@ import { HeaderContentProps } from './header.types'
 
 /** Controls max-width of the content and centers itself horizontally. */
 export const HeaderContent = vui<'div', HeaderContentProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Header', useHeaderContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Header', useHeaderContext())
 
-	return (
-		<Box
-			centerV
-			className={cs('vui-headerContent', className)}
-			h={1}
-			mx="auto"
-			ref={ref}
-			w={1}
-			{...styles.content}
-			{...rest}
-		/>
-	)
+  return (
+    <Box
+      centerV
+      className={cs('vui-headerContent', className)}
+      h={1}
+      mx="auto"
+      ref={ref}
+      w={1}
+      {...styles.content}
+      {...rest}
+    />
+  )
 })
 
-HeaderContent.displayName = 'HeaderContent'
-
 export default HeaderContent

package/src/header/headerCreateAccount.tsx

@@ -10,37 +10,35 @@ import { HeaderCreateAccountProps } from './header.types'
 
 /** Text inviting to create an account when logged out. */
 export const HeaderCreateAccount = vui<'div', HeaderCreateAccountProps>((props, ref) => {
-	const { children, className, url, ...rest } = props
-	const { isMobile, links } = useHeaderContext() ?? {}
-	const styles = useStyleConfig('Header', useHeaderContext()).createAccount
+  const { children, className, url, ...rest } = props
+  const { isMobile, links } = useHeaderContext() ?? {}
+  const styles = useStyleConfig('Header', useHeaderContext()).createAccount
 
-	const screenProps = isMobile ? { borderBottom: '1px solid grey.40', p: 2 } : { ml: 3 }
+  const screenProps = isMobile ? { borderBottom: '1px solid grey.40', p: 2 } : { ml: 3 }
 
-	return (
-		<Box
-			className={cs('vui-headerCreateAccount', className)}
-			column
-			flexShrink={0}
-			ref={ref}
-			{...styles.container}
-			{...screenProps}
-			{...rest}
-		>
-			{children ?? (
-				<>
-					<T size="sm" {...styles.text}>
-						New to Veracity?
-					</T>
+  return (
+    <Box
+      className={cs('vui-headerCreateAccount', className)}
+      column
+      flexShrink={0}
+      ref={ref}
+      {...styles.container}
+      {...screenProps}
+      {...rest}
+    >
+      {children ?? (
+        <>
+          <T size="sm" {...styles.text}>
+            New to Veracity?
+          </T>
 
-					<Link fontWeight="medium" href={url ?? links.signUp} isUnderlined size="sm" {...styles.link}>
-						Create account
-					</Link>
-				</>
-			)}
-		</Box>
-	)
+          <Link fontWeight="medium" href={url ?? links.signUp} isUnderlined size="sm" {...styles.link}>
+            Create account
+          </Link>
+        </>
+      )}
+    </Box>
+  )
 })
 
-HeaderCreateAccount.displayName = 'HeaderCreateAccount'
-
 export default HeaderCreateAccount

package/src/header/headerDivider.tsx

@@ -7,22 +7,20 @@ import { useHeaderContext } from './context'
 
 /** Vertical line dividing some of the Header content. */
 export const HeaderDivider = vui<'hr', DividerProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Header', useHeaderContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Header', useHeaderContext())
 
-	return (
-		<Divider
-			borderColor="prussian.80"
-			className={cs('vui-headerDivider', className)}
-			h={40}
-			isVertical
-			ref={ref}
-			{...styles.divider}
-			{...rest}
-		/>
-	)
+  return (
+    <Divider
+      borderColor="prussian.80"
+      className={cs('vui-headerDivider', className)}
+      h={40}
+      isVertical
+      ref={ref}
+      {...styles.divider}
+      {...rest}
+    />
+  )
 })
 
-HeaderDivider.displayName = 'HeaderDivider'
-
 export default HeaderDivider

package/src/header/headerLinkItem.tsx

@@ -8,46 +8,44 @@ import { HeaderLinkItemProps } from './header.types'
 
 /** Individual link item of the Header. */
 export const HeaderLinkItem = vui<'li', HeaderLinkItemProps>((props, ref) => {
-	const { className, icon, isActive, linkProps, onClick: onClickProp, url, ...rest } = props
-	const { isMobile, setIsMobileOpen } = useHeaderContext() ?? {}
-	const styles = useStyleConfig('Header', useHeaderContext()).linkItem
-
-	const onClick = useCallbackRef((e: MouseEvent<HTMLLIElement>) => {
-		setIsMobileOpen(false)
-		onClickProp?.(e)
-	})
-
-	const linkActiveProps = isActive
-		? isMobile
-			? { bg: 'blue.10', borderLeftWidth: 6, hoverBg: 'blue.20', pl: '10px' }
-			: { borderBottomWidth: 4, pt: '4px' }
-		: {}
-
-	const itemScreenProps = isMobile ? {} : { display: 'inline-flex', fontWeight: 'medium', h: '100%' }
-
-	return (
-		<List.Item
-			className={cs('vui-headerLinkItem', className)}
-			iconLeft={icon}
-			linkProps={{
-				...linkActiveProps,
-				borderColor: 'prussian.80',
-				href: url,
-				ringInset: true,
-				transition: 'all 0.1s, border-width 0s, padding 0s',
-				w: { xs: '100%', md: 'max-content' },
-				...styles.link,
-				...linkProps
-			}}
-			onClick={onClick}
-			ref={ref}
-			{...itemScreenProps}
-			{...styles.container}
-			{...rest}
-		/>
-	)
+  const { className, icon, isActive, linkProps, onClick: onClickProp, url, ...rest } = props
+  const { isMobile, setIsMobileOpen } = useHeaderContext() ?? {}
+  const styles = useStyleConfig('Header', useHeaderContext()).linkItem
+
+  const onClick = useCallbackRef((e: MouseEvent<HTMLLIElement>) => {
+    setIsMobileOpen(false)
+    onClickProp?.(e)
+  })
+
+  const linkActiveProps = isActive
+    ? isMobile
+      ? { bg: 'blue.10', borderLeftWidth: 6, hoverBg: 'blue.20', pl: '10px' }
+      : { borderBottomWidth: 4, pt: '4px' }
+    : {}
+
+  const itemScreenProps = isMobile ? {} : { display: 'inline-flex', fontWeight: 'medium', h: '100%' }
+
+  return (
+    <List.Item
+      className={cs('vui-headerLinkItem', className)}
+      iconLeft={icon}
+      linkProps={{
+        ...linkActiveProps,
+        borderColor: 'prussian.80',
+        href: url,
+        ringInset: true,
+        transition: 'all 0.1s, border-width 0s, padding 0s',
+        w: { xs: '100%', md: 'max-content' },
+        ...styles.link,
+        ...linkProps
+      }}
+      onClick={onClick}
+      ref={ref}
+      {...itemScreenProps}
+      {...styles.container}
+      {...rest}
+    />
+  )
 })
 
-HeaderLinkItem.displayName = 'HeaderLinkItem'
-
 export default HeaderLinkItem

package/src/header/headerLogo.tsx

@@ -11,30 +11,28 @@ const defaultLogo = `${cdnUrl}/common/icons/logos/veracity-logo.svg`
 
 /** Logo displayed in the left corner of the Header. By default Veracity logo is used. */
 export const HeaderLogo = vui<'div', HeaderLogoProps>((props, ref) => {
-	const { children, className, src = defaultLogo, url, ...rest } = props
-	const { links } = useHeaderContext() ?? {}
-	const styles = useStyleConfig('Header', useHeaderContext()).logo
+  const { children, className, src = defaultLogo, url, ...rest } = props
+  const { links } = useHeaderContext() ?? {}
+  const styles = useStyleConfig('Header', useHeaderContext()).logo
 
-	const logoUrl = url ?? links.home
-	const linkProps = logoUrl ? { as: 'a', href: logoUrl, outline: 'none', focusRing: 2 } : {}
+  const logoUrl = url ?? links.home
+  const linkProps = logoUrl ? { as: 'a', href: logoUrl, outline: 'none', focusRing: 2 } : {}
 
-	return (
-		<Box
-			centerV
-			className={cs('vui-headerLogo', className)}
-			flexShrink={0}
-			h={40}
-			mr={2}
-			ref={ref}
-			{...styles.container}
-			{...linkProps}
-			{...rest}
-		>
-			{children ?? <Svg aria-label="logo" h="100%" src={src} {...styles.svg} />}
-		</Box>
-	)
+  return (
+    <Box
+      centerV
+      className={cs('vui-headerLogo', className)}
+      flexShrink={0}
+      h={40}
+      mr={2}
+      ref={ref}
+      {...styles.container}
+      {...linkProps}
+      {...rest}
+    >
+      {children ?? <Svg aria-label="logo" h="100%" src={src} {...styles.svg} />}
+    </Box>
+  )
 })
 
-HeaderLogo.displayName = 'HeaderLogo'
-
 export default HeaderLogo

package/src/header/headerMainLinks.tsx

@@ -9,26 +9,24 @@ import HeaderLinkItem from './headerLinkItem'
 
 /** List of Header Links. */
 export const HeaderMainLinks = vui<'ul', HeaderMainLinksProps>((props, ref) => {
-	const { children, className, links, ...rest } = props
-	const { isMobile } = useHeaderContext() ?? {}
-	const styles = useStyleConfig('Header', useHeaderContext())
+  const { children, className, links, ...rest } = props
+  const { isMobile } = useHeaderContext() ?? {}
+  const styles = useStyleConfig('Header', useHeaderContext())
 
-	const screenStyles = isMobile ? { borderBottom: '1px solid grey.40', flexDirection: 'column', mb: 1 } : { h: '100%' }
+  const screenStyles = isMobile ? { borderBottom: '1px solid grey.40', flexDirection: 'column', mb: 1 } : { h: '100%' }
 
-	return (
-		<List
-			className={cs('vui-headerMainLinks', className)}
-			display="flex"
-			ref={ref}
-			{...styles.mainLinks}
-			{...screenStyles}
-			{...rest}
-		>
-			{children ?? links?.map((link, index) => <HeaderLinkItem key={index} {...link} />)}
-		</List>
-	)
+  return (
+    <List
+      className={cs('vui-headerMainLinks', className)}
+      display="flex"
+      ref={ref}
+      {...styles.mainLinks}
+      {...screenStyles}
+      {...rest}
+    >
+      {children ?? links?.map((link, index) => <HeaderLinkItem key={index} {...link} />)}
+    </List>
+  )
 })
 
-HeaderMainLinks.displayName = 'HeaderMainLinks'
-
 export default HeaderMainLinks

package/src/header/headerMobileContent.tsx

@@ -7,30 +7,28 @@ import { useHeaderContext } from './context'
 
 /** Displays some of the Header content when on a mobile screen. */
 export const HeaderMobileContent = vui<'div', BoxProps>((props, ref) => {
-	const { className, ...rest } = props
-	const { isMobileOpen, mobileContentRef } = useHeaderContext() ?? {}
-	const styles = useStyleConfig('Header', useHeaderContext())
+  const { className, ...rest } = props
+  const { isMobileOpen, mobileContentRef } = useHeaderContext() ?? {}
+  const styles = useStyleConfig('Header', useHeaderContext())
 
-	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}
-			top="calc(100% + 1px)"
-			zIndex="100"
-			{...styles.mobileContent}
-			{...rest}
-		/>
-	) : null
+  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}
+      top="calc(100% + 1px)"
+      zIndex="100"
+      {...styles.mobileContent}
+      {...rest}
+    />
+  ) : null
 })
 
-HeaderMobileContent.displayName = 'HeaderMobileContent'
-
 export default HeaderMobileContent

package/src/header/headerMobileToggle.tsx

@@ -8,27 +8,25 @@ import { useHeaderContext } from './context'
 
 /** Button that toggles display of the mobile content. */
 export const HeaderMobileToggle = vui<'button', ButtonProps>((props, ref) => {
-	const { className, ...rest } = props
-	const { isMobileOpen, mobileToggleRef, setIsMobileOpen } = useHeaderContext() ?? {}
-	const styles = useStyleConfig('Header', useHeaderContext())
+  const { className, ...rest } = props
+  const { isMobileOpen, mobileToggleRef, setIsMobileOpen } = useHeaderContext() ?? {}
+  const styles = useStyleConfig('Header', useHeaderContext())
 
-	const iconName = isMobileOpen ? 'falTimes' : 'falBars'
+  const iconName = isMobileOpen ? 'falTimes' : 'falBars'
 
-	return (
-		<IconButton
-			className={cs('vui-headerMobileToggle', className)}
-			colorScheme="prussian"
-			icon={<Icon name={iconName} scale={2} />}
-			ml={2}
-			onClick={() => setIsMobileOpen(s => !s)}
-			p="3px"
-			ref={mergeRefs(ref, mobileToggleRef)}
-			{...styles.mobileToggle}
-			{...rest}
-		/>
-	)
+  return (
+    <IconButton
+      className={cs('vui-headerMobileToggle', className)}
+      colorScheme="prussian"
+      icon={<Icon name={iconName} scale={2} />}
+      ml={2}
+      onClick={() => setIsMobileOpen(s => !s)}
+      p="3px"
+      ref={mergeRefs(ref, mobileToggleRef)}
+      {...styles.mobileToggle}
+      {...rest}
+    />
+  )
 })
 
-HeaderMobileToggle.displayName = 'HeaderMobileToggle'
-
 export default HeaderMobileToggle

package/src/header/headerNotifications.tsx

@@ -7,53 +7,51 @@ import { useHeaderContext } from './context'
 import { HeaderNotificationsProps } from './header.types'
 
 const Badge = styled.spanBox`
-	align-items: center;
-	background-color: red.70;
-	border-radius: round;
-	color: white;
-	display: flex;
-	font-size: 8px;
-	font-weight: medium;
-	height: 16px;
-	justify-content: center;
-	position: absolute;
-	right: 1px;
-	top: 1px;
-	width: 16px;
+  align-items: center;
+  background-color: red.70;
+  border-radius: round;
+  color: white;
+  display: flex;
+  font-size: 8px;
+  font-weight: medium;
+  height: 16px;
+  justify-content: center;
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  width: 16px;
 `
 
 /** Icon link to Veracity notifications engine with an optional number of new notifications. */
 export const HeaderNotifications = vui<'a', HeaderNotificationsProps>((props, ref) => {
-	const { children, className, count = 0, url, ...rest } = props
-	const { links } = useHeaderContext() ?? {}
-	const styles = useStyleConfig('Header', useHeaderContext()).notifications
+  const { children, className, count = 0, url, ...rest } = props
+  const { links } = useHeaderContext() ?? {}
+  const styles = useStyleConfig('Header', useHeaderContext()).notifications
 
-	return (
-		<Button
-			as="a"
-			className={cs('vui-headerNotifications', className)}
-			href={url ?? links.notifications}
-			minW={0}
-			ml={1}
-			position="relative"
-			px="7px"
-			ref={ref}
-			title="Notifications"
-			variant="text"
-			{...styles.container}
-			{...rest}
-		>
-			{children ?? (
-				<>
-					<Button.Icon name="falBell" />
+  return (
+    <Button
+      as="a"
+      className={cs('vui-headerNotifications', className)}
+      href={url ?? links.notifications}
+      minW={0}
+      ml={1}
+      position="relative"
+      px="7px"
+      ref={ref}
+      title="Notifications"
+      variant="text"
+      {...styles.container}
+      {...rest}
+    >
+      {children ?? (
+        <>
+          <Button.Icon name="falBell" />
 
-					{count > 0 && <Badge>{count < 100 ? count : '99+'}</Badge>}
-				</>
-			)}
-		</Button>
-	)
+          {count > 0 && <Badge>{count < 100 ? count : '99+'}</Badge>}
+        </>
+      )}
+    </Button>
+  )
 })
 
-HeaderNotifications.displayName = 'HeaderNotifications'
-
 export default HeaderNotifications