@veracity/vui 1.0.0 → 1.1.0

package/src/dialog/dialogIcon.tsx

@@ -9,14 +9,12 @@ import { DialogIconProps } from './dialog.types'
 
 /** Shows an icon based on a given status. Optionally, can be a custom icon. */
 export const DialogIcon = vui<'svg', DialogIconProps>((props, ref) => {
-	const { className, ...rest } = props
-	const { status = '' } = useDialogContext() ?? {}
-	const styles = useStyleConfig('Dialog', useDialogContext())
-	const { iconProps } = dialogStatusMapping[status] ?? {}
+  const { className, ...rest } = props
+  const { status = '' } = useDialogContext() ?? {}
+  const styles = useStyleConfig('Dialog', useDialogContext())
+  const { iconProps } = dialogStatusMapping[status] ?? {}
 
-	return <Icon className={cs('vui-dialogIcon', className)} mr={2} ref={ref} {...styles.icon} {...iconProps} {...rest} />
+  return <Icon className={cs('vui-dialogIcon', className)} mr={2} ref={ref} {...styles.icon} {...iconProps} {...rest} />
 })
 
-DialogIcon.displayName = 'DialogIcon'
-
 export default DialogIcon

package/src/dialog/dialogSubmitButton.tsx

@@ -8,21 +8,19 @@ import { DialogSubmitButtonProps } from './dialog.types'
 
 /** Shows a button in the Dialog Footer, which triggers the main action of the Dialog. */
 export const DialogSubmitButton = vui<'button', DialogSubmitButtonProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Dialog', useDialogContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Dialog', useDialogContext())
 
-	return (
-		<Button
-			className={cs('vui-dialogSubmitButton', className)}
-			ml={2}
-			ref={ref}
-			text="Submit"
-			{...styles.submitButton}
-			{...rest}
-		/>
-	)
+  return (
+    <Button
+      className={cs('vui-dialogSubmitButton', className)}
+      ml={2}
+      ref={ref}
+      text="Submit"
+      {...styles.submitButton}
+      {...rest}
+    />
+  )
 })
 
-DialogSubmitButton.displayName = 'DialogSubmitButton'
-
 export default DialogSubmitButton

package/src/dialog/dialogTitle.tsx

@@ -8,13 +8,11 @@ import { DialogTitleProps } from './dialog.types'
 
 /** Shows a title in the Dialog Header. Receives id linked to aria-labelledby on the Dialog for accessibility. */
 export const DialogTitle = vui<'h4', DialogTitleProps>((props, ref) => {
-	const { className, ...rest } = props
-	const { titleId } = useDialogContext() ?? {}
-	const styles = useStyleConfig('Dialog', useDialogContext())
+  const { className, ...rest } = props
+  const { titleId } = useDialogContext() ?? {}
+  const styles = useStyleConfig('Dialog', useDialogContext())
 
-	return <H4 className={cs('vui-dialogTitle', className)} id={titleId} ref={ref} {...styles.title} {...rest} />
+  return <H4 className={cs('vui-dialogTitle', className)} id={titleId} ref={ref} {...styles.title} {...rest} />
 })
 
-DialogTitle.displayName = 'DialogTitle'
-
 export default DialogTitle

package/src/dialog/theme.ts

@@ -1,31 +1,31 @@
 const baseStyle = {}
 
 const defaultProps = {
-	size: 'md'
+  size: 'md'
 }
 
 const parts = ['container', 'body', 'cancelButton', 'closeButton', 'footer', 'header', 'icon', 'submitButton', 'title']
 
 const sizes = {
-	md: {
-		container: {
-			maxW: 520
-		}
-	},
-	lg: {
-		container: {
-			maxW: 640
-		}
-	},
-	fullWidth: {}
+  md: {
+    container: {
+      maxW: 520
+    }
+  },
+  lg: {
+    container: {
+      maxW: 640
+    }
+  },
+  fullWidth: {}
 }
 
 const variants = {}
 
 export default {
-	baseStyle,
-	defaultProps,
-	parts,
-	sizes,
-	variants
+  baseStyle,
+  defaultProps,
+  parts,
+  sizes,
+  variants
 }

package/src/divider/divider.tsx

@@ -5,34 +5,32 @@ import { cs, filterUndefined } from '../utils'
 import { DividerProps } from './divider.types'
 
 export const DividerBase = styled.hrBox`
-	border-color: grey.30;
+  border-color: grey.30;
 `
 
 /** Visually separates content with a horizontal or vertical line. */
 export const Divider = vui<'hr', DividerProps>((props, ref) => {
-	const { className, isVertical, width, ...rest } = omitThemingProps(props)
-	const styles = useStyleConfig('Divider', props)
-
-	const borderSide = isVertical ? 'Right' : 'Bottom'
-	const borderWidth = `border${borderSide}Width`
-	const height = isVertical ? '100%' : ''
-
-	const aliasedProps = filterUndefined({
-		[borderWidth]: width ?? 1
-	})
-
-	return (
-		<DividerBase
-			className={cs('vui-divider', className)}
-			h={height}
-			ref={ref}
-			{...styles}
-			{...aliasedProps}
-			{...rest}
-		/>
-	)
+  const { className, isVertical, width, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('Divider', props)
+
+  const borderSide = isVertical ? 'Right' : 'Bottom'
+  const borderWidth = `border${borderSide}Width`
+  const height = isVertical ? '100%' : ''
+
+  const aliasedProps = filterUndefined({
+    [borderWidth]: width ?? 1
+  })
+
+  return (
+    <DividerBase
+      className={cs('vui-divider', className)}
+      h={height}
+      ref={ref}
+      {...styles}
+      {...aliasedProps}
+      {...rest}
+    />
+  )
 })
 
-Divider.displayName = 'Divider'
-
 export default Divider

package/src/divider/divider.types.ts

@@ -2,11 +2,11 @@ import { BordersProps, SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type DividerProps = SystemProps &
-	ThemingProps<'Divider'> & {
-		/** Children are disabled for this component. */
-		children?: never
-		/** Renders the line vertically using 100% height. */
-		isVertical?: boolean
-		/** Defines thickness of the line. */
-		width?: BordersProps['borderWidth']
-	}
+  ThemingProps<'Divider'> & {
+    /** Children are disabled for this component. */
+    children?: never
+    /** Renders the line vertically using 100% height. */
+    isVertical?: boolean
+    /** Defines thickness of the line. */
+    width?: BordersProps['borderWidth']
+  }

package/src/divider/theme.ts

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

package/src/footer/footer.tsx

@@ -14,50 +14,48 @@ import FooterSection from './footerSection'
 import FooterTrademark from './footerTrademark'
 
 export const FooterBase = styled.divBox`
-	background-color: prussian.80;
-	color: white;
-	padding: 5 3;
+  background-color: prussian.80;
+  color: white;
+  padding: 5 3;
 `
 
 /** Branded Veracity Footer with trademark and links sections. Controls max-width of the content. */
 export const Footer = vui<'div', FooterProps>((props, ref) => {
-	const { children, className, columns, linkedIn, size, variant, ...rest } = props
+  const { children, className, columns, linkedIn, size, variant, ...rest } = props
 
-	const context = { size, variant }
+  const context = { size, variant }
 
-	return (
-		<FooterProvider value={context}>
-			<FooterBase className={cs('vui-footer', className)} ref={ref} {...rest}>
-				<FooterContent>
-					{children ??
-						(columns && (
-							<FooterRow>
-								{columns.map((sections, index) => (
-									<FooterColumn key={index} sections={sections} />
-								))}
-							</FooterRow>
-						))}
+  return (
+    <FooterProvider value={context}>
+      <FooterBase className={cs('vui-footer', className)} ref={ref} {...rest}>
+        <FooterContent>
+          {children ??
+            (columns && (
+              <FooterRow>
+                {columns.map((sections, index) => (
+                  <FooterColumn key={index} sections={sections} />
+                ))}
+              </FooterRow>
+            ))}
 
-					{children || columns ? <Divider borderColor="grey.60" my={4} /> : null}
+          {children || columns ? <Divider borderColor="grey.60" my={4} /> : null}
 
-					<FooterRow>
-						<FooterTrademark linkedIn={linkedIn} />
-					</FooterRow>
-				</FooterContent>
-			</FooterBase>
-		</FooterProvider>
-	)
+          <FooterRow>
+            <FooterTrademark linkedIn={linkedIn} />
+          </FooterRow>
+        </FooterContent>
+      </FooterBase>
+    </FooterProvider>
+  )
 }) as VuiComponent<'div', FooterProps> & {
-	Column: typeof FooterColumn
-	Content: typeof FooterContent
-	Heading: typeof FooterHeading
-	Link: typeof FooterLink
-	Row: typeof FooterRow
-	Section: typeof FooterSection
+  Column: typeof FooterColumn
+  Content: typeof FooterContent
+  Heading: typeof FooterHeading
+  Link: typeof FooterLink
+  Row: typeof FooterRow
+  Section: typeof FooterSection
 }
 
-Footer.displayName = 'Footer'
-
 Footer.Column = FooterColumn
 Footer.Content = FooterContent
 Footer.Heading = FooterHeading

package/src/footer/footer.types.ts

@@ -5,8 +5,8 @@ import { ThemingProps } from '../theme'
 export type FooterColumnData = FooterSectionData[]
 
 export type FooterColumnProps = BoxProps & {
-	/** Data structure for sections and links */
-	sections?: FooterSectionData[]
+  /** Data structure for sections and links */
+  sections?: FooterSectionData[]
 }
 
 export type FooterContentProps = BoxProps
@@ -15,34 +15,34 @@ export type FooterContext = Pick<FooterProps, 'size' | 'variant'>
 
 /** Link includes the label text and URL address. */
 export type FooterLinkData = {
-	/** Unique name that identifies a link in the links dictionary. */
-	id?: string
-	text: string
-	url: string
+  /** Unique name that identifies a link in the links dictionary. */
+  id?: string
+  text: string
+  url: string
 }
 
 export type FooterProps = Omit<BoxProps, 'size' | 'variant'> &
-	ThemingProps<'Footer'> &
-	Pick<FooterTrademarkProps, 'linkedIn'> & {
-		/** Data defining content of multiple columns. */
-		columns?: FooterColumnData[]
-	}
+  ThemingProps<'Footer'> &
+  Pick<FooterTrademarkProps, 'linkedIn'> & {
+    /** Data defining content of multiple columns. */
+    columns?: FooterColumnData[]
+  }
 
 /** Section consists of multiple links with text (label) and url */
 export type FooterSectionData = {
-	heading?: string
-	/** Array of objects defining each link. */
-	links?: FooterLinkData[]
+  heading?: string
+  /** Array of objects defining each link. */
+  links?: FooterLinkData[]
 }
 
 export type FooterSectionProps = BoxProps & {
-	/** Socket for a heading on top of the section. */
-	heading?: FooterSectionData['heading'] | JSX.Element
-	/** Socket for a list of links below the heading. */
-	links?: FooterSectionData['links'] | JSX.Element
+  /** Socket for a heading on top of the section. */
+  heading?: FooterSectionData['heading'] | JSX.Element
+  /** Socket for a list of links below the heading. */
+  links?: FooterSectionData['links'] | JSX.Element
 }
 
 export type FooterTrademarkProps = BoxProps & {
-	/** Url provided to the LinkedIn icon in the Trademark section. */
-	linkedIn?: string
+  /** Url provided to the LinkedIn icon in the Trademark section. */
+  linkedIn?: string
 }

package/src/footer/footerColumn.tsx

@@ -9,23 +9,23 @@ import FooterSection from './footerSection'
 
 /** Organizes sections with links into a single column. Different width per breakpoint. */
 const FooterColumn = vui<'div', FooterColumnProps>((props, ref) => {
-	const { children, className, sections, ...rest } = props
-	const styles = useStyleConfig('Footer', useFooterContext())
+  const { children, className, sections, ...rest } = props
+  const styles = useStyleConfig('Footer', useFooterContext())
 
-	return (
-		<Box
-			className={cs('vui-footerColumn', className)}
-			column
-			flex={{ xs: '0 0 100%', sm: '0 0 50%', md: '0 0 25%' }}
-			p={1.5}
-			ref={ref}
-			spaceY={4}
-			{...styles.column}
-			{...rest}
-		>
-			{children ?? sections?.map((section, index) => <FooterSection key={index} {...section} />)}
-		</Box>
-	)
+  return (
+    <Box
+      className={cs('vui-footerColumn', className)}
+      column
+      flex={{ xs: '0 0 100%', sm: '0 0 50%', md: '0 0 25%' }}
+      p={1.5}
+      ref={ref}
+      spaceY={4}
+      {...styles.column}
+      {...rest}
+    >
+      {children ?? sections?.map((section, index) => <FooterSection key={index} {...section} />)}
+    </Box>
+  )
 })
 
 export default FooterColumn

package/src/footer/footerContent.tsx

@@ -8,23 +8,21 @@ import { FooterContentProps } from './footer.types'
 
 /** Controls max-width of the content and centers itself horizontally. */
 export const FooterContent = vui<'div', FooterContentProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Footer', useFooterContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Footer', useFooterContext())
 
-	return (
-		<Box
-			className={cs('vui-footerContent', className)}
-			column
-			maxW={1200}
-			mx="auto"
-			ref={ref}
-			w="100%"
-			{...styles.content}
-			{...rest}
-		/>
-	)
+  return (
+    <Box
+      className={cs('vui-footerContent', className)}
+      column
+      maxW={1200}
+      mx="auto"
+      ref={ref}
+      w="100%"
+      {...styles.content}
+      {...rest}
+    />
+  )
 })
 
-FooterContent.displayName = 'FooterContent'
-
 export default FooterContent

package/src/footer/footerHeading.tsx

@@ -7,14 +7,12 @@ import { useFooterContext } from './context'
 
 /** Heading of a links section. */
 export const FooterHeading = vui<'h5', HeadingProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Footer', useFooterContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Footer', useFooterContext())
 
-	return (
-		<Heading className={cs('vui-footerHeading', className)} mb={1} ref={ref} size="h5" {...styles.heading} {...rest} />
-	)
+  return (
+    <Heading className={cs('vui-footerHeading', className)} mb={1} ref={ref} size="h5" {...styles.heading} {...rest} />
+  )
 })
 
-FooterHeading.displayName = 'FooterHeading'
-
 export default FooterHeading

package/src/footer/footerLink.tsx

@@ -7,22 +7,20 @@ import { useFooterContext } from './context'
 
 /** Individual link item of the Footer. */
 export const FooterLink = vui<'a', LinkProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Footer', useFooterContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Footer', useFooterContext())
 
-	return (
-		<Link
-			className={cs('vui-footerLink', className)}
-			colorScheme="white"
-			py={0.5}
-			ref={ref}
-			size="sm"
-			{...styles.link}
-			{...rest}
-		/>
-	)
+  return (
+    <Link
+      className={cs('vui-footerLink', className)}
+      colorScheme="white"
+      py={0.5}
+      ref={ref}
+      size="sm"
+      {...styles.link}
+      {...rest}
+    />
+  )
 })
 
-FooterLink.displayName = 'FooterLink'
-
 export default FooterLink

package/src/footer/footerRow.tsx

@@ -7,10 +7,10 @@ import { useFooterContext } from './context'
 
 /** Organizes Footer content into a row of multuple columns. */
 const FooterRow = vui<'div', BoxProps>((props, ref) => {
-	const { className, ...rest } = props
-	const styles = useStyleConfig('Footer', useFooterContext())
+  const { className, ...rest } = props
+  const styles = useStyleConfig('Footer', useFooterContext())
 
-	return <Box className={cs('vui-footerRow', className)} m={-1.5} ref={ref} wrap {...styles.row} {...rest} />
+  return <Box className={cs('vui-footerRow', className)} m={-1.5} ref={ref} wrap {...styles.row} {...rest} />
 })
 
 export default FooterRow

package/src/footer/footerSection.tsx

@@ -10,29 +10,27 @@ import FooterLink from './footerLink'
 
 /** Section includes a heading and a set of links. */
 export const FooterSection = vui<'div', FooterSectionProps>((props, ref) => {
-	const { children, className, heading, links, ...rest } = props
-	const styles = useStyleConfig('Footer', useFooterContext())
+  const { children, className, heading, links, ...rest } = props
+  const styles = useStyleConfig('Footer', useFooterContext())
 
-	return (
-		<Box className={cs('vui-footerSection', className)} column ref={ref} {...styles.section} {...rest}>
-			{isJsx(heading) ? heading : <FooterHeading text={heading} />}
+  return (
+    <Box className={cs('vui-footerSection', className)} column ref={ref} {...styles.section} {...rest}>
+      {isJsx(heading) ? heading : <FooterHeading text={heading} />}
 
-			{children ??
-				(isJsx(links) ? (
-					links
-				) : (
-					<v.ul>
-						{links?.map(({ text, url }, index) => (
-							<v.li key={index}>
-								<FooterLink href={url} text={text} />
-							</v.li>
-						))}
-					</v.ul>
-				))}
-		</Box>
-	)
+      {children ??
+        (isJsx(links) ? (
+          links
+        ) : (
+          <v.ul>
+            {links?.map(({ text, url }, index) => (
+              <v.li key={index}>
+                <FooterLink href={url} text={text} />
+              </v.li>
+            ))}
+          </v.ul>
+        ))}
+    </Box>
+  )
 })
 
-FooterSection.displayName = 'FooterSection'
-
 export default FooterSection

package/src/footer/footerTrademark.tsx

@@ -13,33 +13,33 @@ const defaultLinkedInUrl = 'https://www.linkedin.com/showcase/veracity-data-plat
 
 /** Section includes a heading and a set of links. */
 export const FooterTrademark = vui<'div', FooterTrademarkProps>((props, ref) => {
-	const { className, linkedIn, ...rest } = props
-	const styles = useStyleConfig('Footer', useFooterContext())
+  const { className, linkedIn, ...rest } = props
+  const styles = useStyleConfig('Footer', useFooterContext())
 
-	return (
-		<Box className={cs('vui-footerTrademark', className)} ref={ref} w="100%" wrap {...styles.trademark} {...rest}>
-			<FooterColumn centerV flex={{ xs: '0 0 100%', md: '0 0 25%' }}>
-				<Link
-					colorScheme="white"
-					fontWeight="demi"
-					href={linkedIn ?? defaultLinkedInUrl}
-					iconLeft={<Link.Icon mr={1} name="fabLinkedin" size="sm" />}
-					isExternal
-				>
-					Follow us
-				</Link>
-			</FooterColumn>
+  return (
+    <Box className={cs('vui-footerTrademark', className)} ref={ref} w="100%" wrap {...styles.trademark} {...rest}>
+      <FooterColumn centerV flex={{ xs: '0 0 100%', md: '0 0 25%' }}>
+        <Link
+          colorScheme="white"
+          fontWeight="demi"
+          href={linkedIn ?? defaultLinkedInUrl}
+          iconLeft={<Link.Icon mr={1} name="fabLinkedin" size="sm" />}
+          isExternal
+        >
+          Follow us
+        </Link>
+      </FooterColumn>
 
-			<FooterColumn centerV flex={{ xs: '0 0 100%', md: '0 0 75%' }}>
-				<T size="xs">
-					<T size="xs" weight="demi">
-						Veracity by DNV
-					</T>
-					, DNV AS, NO-1322 Høvik, Norway
-				</T>
-			</FooterColumn>
-		</Box>
-	)
+      <FooterColumn centerV flex={{ xs: '0 0 100%', md: '0 0 75%' }}>
+        <T size="xs">
+          <T size="xs" weight="demi">
+            Veracity by DNV
+          </T>
+          , DNV AS, NO-1322 Høvik, Norway
+        </T>
+      </FooterColumn>
+    </Box>
+  )
 })
 
 export default FooterTrademark