feat: create breadcrumb component

Author: codebender828

components.d.ts

@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2021-07-27T08:11:47.550Z
+ * This file was generated on 2021-07-27T09:42:08.546Z
  */
 
 import { ChakraProps } from '@chakra-ui/vue-system'

packages/c-breadcrumb/examples/index.tsx

@@ -0,0 +1 @@
+export * as SimpleBreadcrumb from './simple-breadcrumb.vue'

packages/c-breadcrumb/examples/base-c-breadcrumb.vue renamed to packages/c-breadcrumb/examples/simple-breadcrumb.vue

@@ -8,7 +8,7 @@
  * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2
  */
 
-import { h, defineComponent, PropType, ConcreteComponent, Component, computed, cloneVNode, VNode, VNodeProps, mergeProps } from 'vue'
+import { defineComponent, PropType, computed, cloneVNode, VNode, h } from 'vue'
 import {
   chakra,
   HTMLChakraProps,
@@ -17,22 +17,23 @@ import {
   StylesProvider,
   useMultiStyleConfig,
   useStyles,
-  SystemStyleObject
+  SystemStyleObject,
+  ChakraProps
 } from '@chakra-ui/vue-system'
 import { filterUndefined } from '@chakra-ui/utils'
 import { getValidChildren, SNA, SNAO } from '@chakra-ui/vue-utils'
+import { DOMElements } from '@chakra-ui/vue-system'
 
 /**
  * CBreadcrumb (root)
  */
 
-
 export interface BreadcrumbOptions {
   /**
    * The visual separator between each breadcrumb item
    * @type string | ConcreteComponent | Component
    */
-  separator?: string | ConcreteComponent | Component
+  separator?: string | object
   /**
    * The left and right margin applied to the separator
    * @type SystemProps["mx"]
@@ -41,7 +42,7 @@ export interface BreadcrumbOptions {
 }
 
 export interface BreadcrumbProps
-  extends HTMLChakraProps<'nav'>,
+  extends ChakraProps,
     BreadcrumbOptions,
     ThemingProps<'Breadcrumb'> {}
 
@@ -81,11 +82,12 @@ export const CBreadcrumb = defineComponent(
       return (
         <chakra.nav
           as={props.as}
+          __label="breadcrumb"
           aria-label="breadcrumb"
           __css={styles.value.container}
           {...attrs}
         >
-          <chakra.ol __label="chakra-breadcrumb__list">
+          <chakra.ol __label="breadcrumb__list">
             {() => children}
           </chakra.ol>
         </chakra.nav>
@@ -106,7 +108,7 @@ CBreadcrumb.props = {
     default: '0.5rem'
   },
   as: {
-    type: [String, Object] as PropType<DOMElements | Component | string>,
+    type: [String, Object] as PropType<DOMElements | object | string>,
     default: 'nav',
   },
 }
@@ -138,7 +140,7 @@ export const CBreadcrumbSeparator = defineComponent((props: BreadcrumbSeparatorP
   return () => (
     <chakra.span
       role="presentation"
-      __label="chakra-breadcrumb__separator"
+      __label="breadcrumb__separator"
       {...attrs}
       __css={separatorStyles.value}
     >
@@ -167,7 +169,7 @@ interface BreadcrumbItemOptions extends BreadcrumbOptions {
 
 export interface BreadcrumbItemProps
   extends BreadcrumbItemOptions,
-    HTMLChakraProps<"li"> {}
+    ChakraProps {}
 
 export const CBreadcrumbItem = defineComponent((props: BreadcrumbItemProps, { attrs, slots }) => {
   const styles = useStyles()
@@ -199,7 +201,7 @@ export const CBreadcrumbItem = defineComponent((props: BreadcrumbItemProps, { at
     })
 
     return (
-      <chakra.li __label="chakra-breadcrumb__list-it" __css={itemStyles.value}>
+      <chakra.li __label="breadcrumb__list-item" __css={itemStyles.value}>
         {children}
         {!props.isLastChild && (
           // @ts-expect-error
@@ -224,8 +226,9 @@ CBreadcrumbItem.props = {
  * CBreadcrumbLink
  */
 
-export interface BreadcrumbLinkProps extends HTMLChakraProps<"a"> {
-  isCurrentPage?: boolean
+export interface BreadcrumbLinkProps extends ChakraProps {
+  isCurrentPage?: boolean,
+  href?: string
 }
 
 /**
@@ -240,14 +243,14 @@ export const CBreadcrumbLink = defineComponent((props: BreadcrumbLinkProps, { at
   return () => {
     if (props.isCurrentPage) {
       return (
-        <chakra.span __label="chakra-breadcrumb__link" aria-current="page" __css={styles.value.link} as={props.as} {...attrs}>
+        <chakra.span __label="breadcrumb__link" aria-current="page" __css={styles.value.link} as={props.as} {...attrs}>
           {slots}
         </chakra.span>
       )
     }
 
     return (
-      <chakra.a __label="chakra-breadcrumb__link" as={props.as} __css={styles.value.link} {...attrs}>
+      <chakra.a __label="breadcrumb__link" as={props.as} __css={styles.value.link} {...attrs}>
         {slots}
       </chakra.a>
     )

packages/c-breadcrumb/src/c-breadcrumb.tsx

@@ -0,0 +1,50 @@
+import * as Examples from '../examples'
+import { h } from 'vue'
+// import { cy } from 'local-cypress'
+import { CBreadcrumb, CBreadcrumbItem, CBreadcrumbLink } from '../src'
+
+describe('Breadcrumb Examples', () => {
+  Object.entries(Examples).map(([name, example]: any) => {
+    it(`renders ${name} successfully`, () => {
+      cy.mount(h(() => <example.default></example.default>)).checkA11y()
+    })
+  })
+})
+
+const render = (props: any = {}) => {
+  return cy.mount(
+    h(() => (
+      <CBreadcrumb data-testid="breadcrumb" separator="-" {...props}>
+        <CBreadcrumbItem>
+          <CBreadcrumbLink href="/">Home</CBreadcrumbLink>
+        </CBreadcrumbItem>
+
+        <CBreadcrumbItem>
+          <CBreadcrumbLink href="/about">About</CBreadcrumbLink>
+        </CBreadcrumbItem>
+
+        <CBreadcrumbItem data-testid="current-page" isCurrentPage>
+          <CBreadcrumbLink href="/contact">Contact</CBreadcrumbLink>
+        </CBreadcrumbItem>
+      </CBreadcrumb>
+    ))
+  )
+}
+
+it('contains the correct role', () => {
+  cy.mount(Examples.SimpleBreadcrumb.default).get('[aria-label=breadcrumb]').should('exist')
+})
+
+it('renders its children', () => {
+  render()
+    .get('[data-testid=breadcrumb]')
+    .should('contain', 'Home')
+    .should('contain', 'About')
+    .should('contain', 'Contact')  
+})
+
+it('current page should have `aria-current="page"` attribute', () => {
+  render()
+    .get('[data-testid=current-page] > span')
+    .should('have.attr', 'aria-current', 'page') 
+})

packages/c-breadcrumb/tests/c-breadcrumb.cy.tsx

@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+/// <reference types="local-cypress" />
 /// <reference types="cypress-plugin-tab" />
 
 import { ChakraProps, HTMLChakraProps } from '@chakra-ui/vue-system'