@veracity/vui 1.7.0 → 1.8.0-beta.0

package/src/breadcrumbs/breadcrumbsItem.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { Link as RouterLink } from 'react-router-dom'
+
+import { Box } from '../box'
+import { omitThemingProps, useStyleConfig } from '../core'
+import { Icon } from '../icon'
+import { Link } from '../link'
+import { cs } from '../utils'
+import { BreadcrumbsItemProps } from './breadcrumbs.types'
+import { useBreadcrumbsContext } from './context'
+
+/** A Breadcrumbs item. */
+export const BreadcrumbsItem = (props: BreadcrumbsItemProps) => {
+  const { className, children, content, icon, path, ...rest } = omitThemingProps(props)
+
+  const styles = useStyleConfig('Breadcrumbs', useBreadcrumbsContext())
+
+  const innerContent = (
+    <>
+      {!!icon && <Icon name={icon} size="sm" />}
+      {content || children}
+    </>
+  )
+
+  return (
+    <Box alignItems="center" className={cs('vui-breadcrumbs-item', className)} p={0} {...rest} {...styles.item}>
+      {path ? (
+        <Link as={RouterLink} to={path}>
+          {innerContent}
+        </Link>
+      ) : (
+        innerContent
+      )}
+    </Box>
+  )
+}
+
+export default BreadcrumbsItem

package/src/breadcrumbs/breadcrumbsSeparator.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import { Box } from '../box'
+import { Icon } from '../icon'
+import { cs } from '../utils'
+import { BreadcrumbsSeparatorProps } from './breadcrumbs.types'
+
+/** Breadcrumbs separator. */
+export const BreadcrumbsSeparator = ({ className, children, content, ...rest }: BreadcrumbsSeparatorProps) => (
+  <Box alignItems="center" className={cs('vui-breadcrumbs-separator', className)} p={0} {...rest}>
+    {content || children || <Icon name="falAngleRight" />}
+  </Box>
+)
+
+export default BreadcrumbsSeparator

package/src/breadcrumbs/context.ts

@@ -0,0 +1,5 @@
+import { createContext, Dict } from '../utils'
+
+const [BreadcrumbsProvider, useBreadcrumbsContext] = createContext<Dict>({ isOptional: true })
+
+export { BreadcrumbsProvider, useBreadcrumbsContext }

package/src/breadcrumbs/index.ts

@@ -0,0 +1,3 @@
+export * from './breadcrumbs'
+export { default } from './breadcrumbs'
+export * from './breadcrumbs.types'

package/src/breadcrumbs/theme.ts

@@ -0,0 +1,26 @@
+const baseStyle = {}
+
+const defaultProps = {
+  size: 'md'
+}
+
+const sizes = {
+  sm: {
+    item: {}
+  },
+  md: {
+    item: {}
+  },
+  lg: {
+    item: {}
+  }
+}
+
+const variants = {}
+
+export default {
+  baseStyle,
+  defaultProps,
+  sizes,
+  variants
+}

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from './accordion'
 export * from './avatar'
 export * from './box'
+export * from './breadcrumbs'
 export * from './button'
 export * from './buttonGroup'
 export * from './buttonToggleGroup'

package/src/theme/components.ts

@@ -1,6 +1,7 @@
 import Accordion from '../accordion/theme'
 import Avatar from '../avatar/theme'
 import Box from '../box/theme'
+import Breadcrumbs from '../breadcrumbs/theme'
 import Button from '../button/theme'
 import Card from '../card/theme'
 import Checkbox from '../checkbox/theme'
@@ -39,6 +40,7 @@ export default {
   Accordion,
   Avatar,
   Box,
+  Breadcrumbs,
   Button,
   Card,
   Checkbox,