@veracity/vui 1.0.0 → 1.1.0

package/src/footer/helpers.ts

@@ -5,38 +5,38 @@ import { Environment, isObject } from '../utils'
 import { FooterColumnData } from './footer.types'
 
 type FooterLinksTemplates = {
-	columns?: FooterColumnData[]
-	linkedIn?: string
+  columns?: FooterColumnData[]
+  linkedIn?: string
 }
 
 /** Loads templates for Footer links and enriches them with urls from LinksContext. */
 export function useFooterLinks(env: Environment) {
-	const [templates, setTemplates] = useState<FooterLinksTemplates>({})
-	const [links] = useLinks()
-
-	useEffect(() => {
-		loadFooterlinks()
-
-		async function loadFooterlinks() {
-			try {
-				const response = await fetch(`${cdnUrls[env]}/common/data/links/footer.json`)
-				if (!response.ok) return
-
-				const data = await response.json()
-
-				if (isObject(data)) setTemplates(data)
-			} catch {
-				console.error('Failed to retrieve footer data.')
-			}
-		}
-	}, [env])
-
-	const columns: FooterColumnData[] | undefined = templates.columns?.map(column =>
-		column.map(section => ({
-			...section,
-			links: section.links?.map(link => ({ ...link, url: links?.[link?.id ?? ''] }))
-		}))
-	)
-
-	return { columns, linkedIn: templates.linkedIn }
+  const [templates, setTemplates] = useState<FooterLinksTemplates>({})
+  const [links] = useLinks()
+
+  useEffect(() => {
+    loadFooterlinks()
+
+    async function loadFooterlinks() {
+      try {
+        const response = await fetch(`${cdnUrls[env]}/common/data/links/footer.json`)
+        if (!response.ok) return
+
+        const data = await response.json()
+
+        if (isObject(data)) setTemplates(data)
+      } catch {
+        console.error('Failed to retrieve footer data.')
+      }
+    }
+  }, [env])
+
+  const columns: FooterColumnData[] | undefined = templates.columns?.map(column =>
+    column.map(section => ({
+      ...section,
+      links: section.links?.map(link => ({ ...link, url: links?.[link?.id ?? ''] }))
+    }))
+  )
+
+  return { columns, linkedIn: templates.linkedIn }
 }

package/src/footer/theme.ts

@@ -9,9 +9,9 @@ const sizes = {}
 const variants = {}
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/grid/grid.tsx

@@ -5,17 +5,15 @@ import { cs } from '../utils'
 import { GridProps } from './grid.types'
 
 export const GridBase = styled.divBox`
-	display: grid;
+  display: grid;
 `
 
 /** Displays a basic grid wrapper. */
 export const Grid = vui<'span', GridProps>((props, ref) => {
-	const { className, ...rest } = omitThemingProps(props)
-	const styles = useStyleConfig('Grid', props)
+  const { className, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('Grid', props)
 
-	return <GridBase className={cs('vui-grid', className)} ref={ref} {...styles} {...rest} />
+  return <GridBase className={cs('vui-grid', className)} ref={ref} {...styles} {...rest} />
 })
 
-Grid.displayName = 'Grid'
-
 export default Grid

package/src/grid/theme.ts

@@ -7,8 +7,8 @@ const sizes = {}
 const variants = {}
 
 export default {
-	baseStyle,
-	defaultProps,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
 }

package/src/header/header.tsx

@@ -20,74 +20,72 @@ import HeaderServicesMessage from './headerServicesMessage'
 import HeaderSignIn from './headerSignIn'
 
 export const HeaderBase = styled.headerBox`
-	align-items: center;
-	background-color: white;
-	border-bottom: 1px solid prussian.80;
-	display: flex;
-	position: relative;
+  align-items: center;
+  background-color: white;
+  border-bottom: 1px solid prussian.80;
+  display: flex;
+  position: relative;
 `
 
 /** Branded Veracity Header with logo, links, services, account and other data. Controls max-width of the content. */
 export const Header = vui<'header', HeaderProps>((props, ref) => {
-	const { className, headerHeight = 72, size, variant, ...rest } = props
-	const [isMobileOpen, setIsMobileOpen] = useState(false)
-	const mobileContentRef = useRef(null)
-	const mobileToggleRef = useRef(null)
-	const styles = useStyleConfig('Header', props)
+  const { className, headerHeight = 72, size, variant, ...rest } = props
+  const [isMobileOpen, setIsMobileOpen] = useState(false)
+  const mobileContentRef = useRef(null)
+  const mobileToggleRef = useRef(null)
+  const styles = useStyleConfig('Header', props)
 
-	const [links] = useLinks()
+  const [links] = useLinks()
 
-	useClickOutside([mobileContentRef, mobileToggleRef], () => {
-		setIsMobileOpen(false)
-	})
+  useClickOutside([mobileContentRef, mobileToggleRef], () => {
+    setIsMobileOpen(false)
+  })
 
-	const isDesktop = useUp('md')
-	const isMobile = useDown('md')
+  const isDesktop = useUp('md')
+  const isMobile = useDown('md')
 
-	const context = {
-		headerHeight,
-		isDesktop,
-		isMobile,
-		isMobileOpen,
-		links,
-		mobileContentRef,
-		mobileToggleRef,
-		setIsMobileOpen,
-		size,
-		variant
-	}
+  const context = {
+    headerHeight,
+    isDesktop,
+    isMobile,
+    isMobileOpen,
+    links,
+    mobileContentRef,
+    mobileToggleRef,
+    setIsMobileOpen,
+    size,
+    variant
+  }
 
-	return (
-		<HeaderProvider value={context}>
-			<HeaderBase
-				className={cs('vui-header', className)}
-				h={headerHeight}
-				px={{ xs: 2, lg: 5 }}
-				ref={ref}
-				{...styles.container}
-				{...rest}
-			/>
-		</HeaderProvider>
-	)
+  return (
+    <HeaderProvider value={context}>
+      <HeaderBase
+        className={cs('vui-header', className)}
+        h={headerHeight}
+        px={{ xs: 2, lg: 5 }}
+        ref={ref}
+        {...styles.container}
+        {...rest}
+      />
+    </HeaderProvider>
+  )
 }) as VuiComponent<'header', HeaderProps> & {
-	Account: typeof HeaderAccount
-	AccountUserInfo: typeof HeaderAccountUserInfo
-	Content: typeof HeaderContent
-	CreateAccount: typeof HeaderCreateAccount
-	Divider: typeof HeaderDivider
-	LinkItem: typeof HeaderLinkItem
-	Logo: typeof HeaderLogo
-	MainLinks: typeof HeaderMainLinks
-	MobileContent: typeof HeaderMobileContent
-	MobileToggle: typeof HeaderMobileToggle
-	Notifications: typeof HeaderNotifications
-	Services: typeof HeaderServices
-	ServicesMessage: typeof HeaderServicesMessage
-	SignIn: typeof HeaderSignIn
+  Account: typeof HeaderAccount
+  AccountUserInfo: typeof HeaderAccountUserInfo
+  Content: typeof HeaderContent
+  CreateAccount: typeof HeaderCreateAccount
+  Divider: typeof HeaderDivider
+  LinkItem: typeof HeaderLinkItem
+  Logo: typeof HeaderLogo
+  MainLinks: typeof HeaderMainLinks
+  MobileContent: typeof HeaderMobileContent
+  MobileToggle: typeof HeaderMobileToggle
+  Notifications: typeof HeaderNotifications
+  Services: typeof HeaderServices
+  ServicesMessage: typeof HeaderServicesMessage
+  SignIn: typeof HeaderSignIn
 }
 
-Header.displayName = 'Header'
-
 Header.Account = HeaderAccount
 Header.AccountUserInfo = HeaderAccountUserInfo
 Header.Content = HeaderContent

package/src/header/header.types.ts

@@ -13,108 +13,108 @@ import { HeaderAccountData } from './headerAccount.types'
 export type HeaderContentProps = BoxProps
 
 export type HeaderContext = Pick<HeaderProps, 'headerHeight'> & {
-	isDesktop: boolean
-	isMobile: boolean
-	isMobileOpen: boolean
-	links: LinksDict
-	mobileContentRef: RefObject<HTMLElement | null>
-	mobileToggleRef: RefObject<HTMLElement | null>
-	setIsMobileOpen: Dispatch<SetStateAction<boolean>>
+  isDesktop: boolean
+  isMobile: boolean
+  isMobileOpen: boolean
+  links: LinksDict
+  mobileContentRef: RefObject<HTMLElement | null>
+  mobileToggleRef: RefObject<HTMLElement | null>
+  setIsMobileOpen: Dispatch<SetStateAction<boolean>>
 }
 
 export type HeaderCreateAccountData = {
-	/** Provides URL to create account link. */
-	url?: string
+  /** Provides URL to create account link. */
+  url?: string
 }
 
 export type HeaderCreateAccountProps = BoxProps & HeaderCreateAccountData
 
 export type HeaderLinkData = {
-	/** Displays and icon on the left side of the link. */
-	icon?: IconProp
-	/** Unique name that identifies a link in the links dictionary. */
-	id?: string
-	/** Adds styling for currently active link. */
-	isActive?: boolean
-	/** Provides text content to the list item. */
-	text?: string
-	/** Provides href attribute to the internal link element. */
-	url?: string
+  /** Displays and icon on the left side of the link. */
+  icon?: IconProp
+  /** Unique name that identifies a link in the links dictionary. */
+  id?: string
+  /** Adds styling for currently active link. */
+  isActive?: boolean
+  /** Provides text content to the list item. */
+  text?: string
+  /** Provides href attribute to the internal link element. */
+  url?: string
 }
 
 export type HeaderLinkItemProps = ListItemProps & HeaderLinkData
 
 export type HeaderLogoData = {
-	/** Loads logo svg from the given source. */
-	src?: string
-	/** Renders logo wrapper as a link with given url as href. */
-	url?: string
+  /** Loads logo svg from the given source. */
+  src?: string
+  /** Renders logo wrapper as a link with given url as href. */
+  url?: string
 }
 
 export type HeaderLogoProps = BoxProps & HeaderLogoData
 
 export type HeaderMainLinksProps = ListProps & {
-	/** Array of objects with data for each link. */
-	links?: HeaderLinkData[]
+  /** Array of objects with data for each link. */
+  links?: HeaderLinkData[]
 }
 
 export type HeaderNotificationsData = {
-	/** Displays a badge with given number of notifications. */
-	count?: number
-	/** Provides href to the icon link. */
-	url?: string
+  /** Displays a badge with given number of notifications. */
+  count?: number
+  /** Provides href to the icon link. */
+  url?: string
 }
 
 export type HeaderNotificationsProps = ButtonProps & HeaderNotificationsData
 
 export type HeaderProps = SystemProps &
-	ThemingProps<'Header'> & {
-		/** Sets the height of the Header and is used by internal parts for positioning and sizing. */
-		headerHeight?: number
-	}
+  ThemingProps<'Header'> & {
+    /** Sets the height of the Header and is used by internal parts for positioning and sizing. */
+    headerHeight?: number
+  }
 
 export type HeaderServicesData = {
-	/** Array of objects with data for each service link. */
-	links?: HeaderLinkData[]
+  /** Array of objects with data for each service link. */
+  links?: HeaderLinkData[]
 }
 
 export type HeaderServicesProps = MenuProps &
-	HeaderServicesData & {
-		/** Props object passed to the MenuButton component. */
-		buttonProps?: ButtonProps
-		/** Children are disabled for this component. */
-		children?: never
-		/** Props object passed to the MenuList component. */
-		listProps?: ListProps
-	}
+  HeaderServicesData & {
+    /** Props object passed to the MenuButton component. */
+    buttonProps?: ButtonProps
+    /** Children are disabled for this component. */
+    children?: never
+    /** Props object passed to the MenuList component. */
+    listProps?: ListProps
+  }
 
 export type HeaderSignInData = {
-	/** Provides href to the button link. */
-	url?: string
+  /** Provides href to the button link. */
+  url?: string
 }
 
 export type HeaderSignInProps = ButtonProps & HeaderSignInData
 
 export type LoggedInHeaderProps = HeaderProps & {
-	/** Socket for account popover icon on the right side. */
-	account?: HeaderAccountData | JSX.Element
-	/** Socket for logo on the left side. */
-	logo?: HeaderLogoData | JSX.Element
-	/** Socket for main links in the middle-right. */
-	mainLinks?: HeaderLinkData[] | JSX.Element
-	/** Socket for notifications icon on the right side. */
-	notifications?: HeaderNotificationsData | JSX.Element
-	/** Socket for services menu icon on the right side. */
-	services?: HeaderServicesData | JSX.Element
+  /** Socket for account popover icon on the right side. */
+  account?: HeaderAccountData | JSX.Element
+  /** Socket for logo on the left side. */
+  logo?: HeaderLogoData | JSX.Element
+  /** Socket for main links in the middle-right. */
+  mainLinks?: HeaderLinkData[] | JSX.Element
+  /** Socket for notifications icon on the right side. */
+  notifications?: HeaderNotificationsData | JSX.Element
+  /** Socket for services menu icon on the right side. */
+  services?: HeaderServicesData | JSX.Element
 }
 
 export type LoggedOutHeaderProps = HeaderProps & {
-	/** Socket for create account prompt on the right side. */
-	createAccount?: HeaderCreateAccountData | JSX.Element
-	/** Socket for logo on the left side. */
-	logo?: HeaderLogoData | JSX.Element
-	/** Socket for links in the middle-right section. */
-	mainLinks?: HeaderLinkData[] | JSX.Element
-	/** Socket for sign in button on the right side. */
-	signIn?: HeaderSignInData | JSX.Element
+  /** Socket for create account prompt on the right side. */
+  createAccount?: HeaderCreateAccountData | JSX.Element
+  /** Socket for logo on the left side. */
+  logo?: HeaderLogoData | JSX.Element
+  /** Socket for links in the middle-right section. */
+  mainLinks?: HeaderLinkData[] | JSX.Element
+  /** Socket for sign in button on the right side. */
+  signIn?: HeaderSignInData | JSX.Element
 }

package/src/header/headerAccount.tsx

@@ -14,65 +14,63 @@ const mobilePopoverOptions = { popperOptions: { modifiers: [{ name: 'computeStyl
 
 /** Displays user account information and helpful links, like settings or logout. */
 export function HeaderAccount(props: HeaderAccountProps) {
-	const { contentProps, options = {}, sections, triggerProps, userInfo, ...rest } = props
-	const { headerHeight, isMobile } = useHeaderContext()
-	const styles = useStyleConfig('Header', useHeaderContext()).account
+  const { contentProps, options = {}, sections, triggerProps, userInfo, ...rest } = props
+  const { headerHeight, isMobile } = useHeaderContext()
+  const styles = useStyleConfig('Header', useHeaderContext()).account
 
-	// Render content in full view on mobile
-	const popoverOptions = isMobile ? merge(options, mobilePopoverOptions) : options
+  // Render content in full view on mobile
+  const popoverOptions = isMobile ? merge(options, mobilePopoverOptions) : options
 
-	const contentScreenProps = isMobile
-		? { h: `calc(100vh - ${headerHeight}px)`, left: 0, position: 'fixed', top: headerHeight, w: '100vw' }
-		: { maxH: 360, py: 1, w: 320 }
+  const contentScreenProps = isMobile
+    ? { h: `calc(100vh - ${headerHeight}px)`, left: 0, position: 'fixed', top: headerHeight, w: '100vw' }
+    : { maxH: 360, py: 1, w: 320 }
 
-	const name = isObject<HeaderAccountUserInfoData>(userInfo) ? userInfo.displayName : ''
+  const name = isObject<HeaderAccountUserInfoData>(userInfo) ? userInfo.displayName : ''
 
-	return (
-		<Popover isLazy={false} offset={[0, 8]} options={popoverOptions} placement="bottom-end" {...rest}>
-			<Popover.Trigger
-				as={Avatar}
-				className="vui-headerAccountTrigger"
-				colorScheme="prussian"
-				isInteractive
-				ml={2}
-				name={name}
-				title="Account"
-				variant="solid"
-				{...styles.trigger}
-				{...triggerProps}
-			/>
+  return (
+    <Popover isLazy={false} offset={[0, 8]} options={popoverOptions} placement="bottom-end" {...rest}>
+      <Popover.Trigger
+        as={Avatar}
+        className="vui-headerAccountTrigger"
+        colorScheme="prussian"
+        isInteractive
+        ml={2}
+        name={name}
+        title="Account"
+        variant="solid"
+        {...styles.trigger}
+        {...triggerProps}
+      />
 
-			<Popover.Content
-				className="vui-headerAccountContent"
-				column
-				{...styles.content}
-				{...contentScreenProps}
-				{...contentProps}
-			>
-				{isJsx(userInfo) ? userInfo : userInfo && <HeaderAccountUserInfo {...userInfo} />}
+      <Popover.Content
+        className="vui-headerAccountContent"
+        column
+        {...styles.content}
+        {...contentScreenProps}
+        {...contentProps}
+      >
+        {isJsx(userInfo) ? userInfo : userInfo && <HeaderAccountUserInfo {...userInfo} />}
 
-				{isJsx(sections)
-					? sections
-					: sections && (
-							<List className="vui-headerAccountList">
-								{sections.map(({ heading, links }, index) => (
-									<Fragment key={index}>
-										<List.Divider />
+        {isJsx(sections)
+          ? sections
+          : sections && (
+              <List className="vui-headerAccountList">
+                {sections.map(({ heading, links }, index) => (
+                  <Fragment key={index}>
+                    <List.Divider />
 
-										{heading && <List.Heading text={heading} />}
+                    {heading && <List.Heading text={heading} />}
 
-										{links?.map(({ icon, url, ...rest }, index) => (
-											<List.Item iconLeft={icon} key={index} linkProps={{ href: url }} {...rest} />
-										))}
-									</Fragment>
-								))}
-							</List>
-					  )}
-			</Popover.Content>
-		</Popover>
-	)
+                    {links?.map(({ icon, url, ...rest }, index) => (
+                      <List.Item iconLeft={icon} key={index} linkProps={{ href: url }} {...rest} />
+                    ))}
+                  </Fragment>
+                ))}
+              </List>
+            )}
+      </Popover.Content>
+    </Popover>
+  )
 }
 
-HeaderAccount.displayName = 'HeaderAccount'
-
 export default HeaderAccount

package/src/header/headerAccount.types.ts

@@ -6,34 +6,34 @@ import { HeaderLinkData } from './header.types'
 
 /** Defines account link sections and user information. */
 export type HeaderAccountData = {
-	sections?: HeaderAccountSectionData[]
-	userInfo?: HeaderAccountUserInfoData
+  sections?: HeaderAccountSectionData[]
+  userInfo?: HeaderAccountUserInfoData
 }
 
 export type HeaderAccountProps = PopoverProps & {
-	/** Children are disabled for this component. */
-	children?: never
-	/** Props object passed to the PopoverContent component. */
-	contentProps?: PopoverContentProps
-	/** Socket for a set of link sections below user information. */
-	sections?: HeaderAccountData['sections'] | JSX.Element
-	/** Props object passed to the PopoverTrigger component. */
-	triggerProps?: RightJoinProps<PopoverTriggerProps, AvatarProps>
-	/** Socket for user information on top of the account popover. */
-	userInfo?: HeaderAccountData['userInfo'] | JSX.Element
+  /** Children are disabled for this component. */
+  children?: never
+  /** Props object passed to the PopoverContent component. */
+  contentProps?: PopoverContentProps
+  /** Socket for a set of link sections below user information. */
+  sections?: HeaderAccountData['sections'] | JSX.Element
+  /** Props object passed to the PopoverTrigger component. */
+  triggerProps?: RightJoinProps<PopoverTriggerProps, AvatarProps>
+  /** Socket for user information on top of the account popover. */
+  userInfo?: HeaderAccountData['userInfo'] | JSX.Element
 }
 
 /** Defines heading and an array of links within one section. */
 export type HeaderAccountSectionData = {
-	heading?: string
-	links?: HeaderLinkData[]
+  heading?: string
+  links?: HeaderLinkData[]
 }
 
 export type HeaderAccountUserInfoData = {
-	/** Displays company name in account user info section. */
-	companyName?: string
-	/** Displays user name in account user info section. */
-	displayName?: string
+  /** Displays company name in account user info section. */
+  companyName?: string
+  /** Displays user name in account user info section. */
+  displayName?: string
 }
 
 export type HeaderAccountUserInfoProps = BoxProps & HeaderAccountUserInfoData