fix: add component classes to breadcrumbs (#19)

components/breadcrumbs/w-breadcrumbs.vue

@@ -1,35 +1,40 @@
 <template>
   <nav :aria-label="ariaLabel">
     <h2 class="sr-only">{{ ariaLabel }} </h2>
-    <div class="flex space-x-8">
+    <div :class="ccBreadcrumbs.wrapper">
       <breadcrumbify>
         <slot />
       </breadcrumbify>
     </div>
   </nav>
 </template>
 
-<script>
+<script setup>
 import { h, Fragment } from 'vue'
-import { interleave } from '@fabric-ds/core/breadcrumbs'
+import { interleave } from '@warp-ds/core/breadcrumbs'
+import { breadcrumbs as ccBreadcrumbs } from "@warp-ds/component-classes"
+
+const props = defineProps({
+  ariaLabel: { type: String, default: 'Her er du' }
+});
 
-export const wBreadcrumbSeparator = h('span', { ariaHidden: true, class: 'select-none' }, '/')
 const isFragment = vnode => vnode.type === Fragment
 const collectElements = (vnodes = []) => vnodes?.map(vnode => isFragment(vnode) ? collectElements(vnode.children) : vnode)
 const Breadcrumbify = (_, context) => {
   const slot = context.slots.default()
   const vnodes = slot[0].children
   const elements = collectElements(vnodes).flat(Infinity)
-  return interleave(elements, wBreadcrumbSeparator)
-}
+  const styledElements = elements.map(el => {
+    const ccClasses = el.type === "a" ? ccBreadcrumbs.link : ccBreadcrumbs.text
+    el.props.class = el.props.class ? `${el.props.class} ${ccClasses}` : ccClasses
 
-// because most of the logic is in Breadcrumbify
-// there's no reason to script-setup this component
-export default {
-  name: 'wBreadcrumbs',
-  components: { Breadcrumbify },
-  props: {
-    ariaLabel: { type: String, default: 'Her er du' }
-  }
+    return el
+  })
+  return interleave(styledElements, wBreadcrumbSeparator)
 }
 </script>
+
+<script>
+  export const wBreadcrumbSeparator = h('span', { ariaHidden: true, class: ccBreadcrumbs.separator }, '/')
+  export default { name: 'wBreadcrumbs' }
+</script>

dev/pages/Breadcrumbs.vue

@@ -1,7 +1,5 @@
 <script setup>
-import { wBreadcrumbs } from '#components'
-
-// const crumbs = ['foo', 'bar', null]
+  import { wBreadcrumbs } from '#components'
 </script>
 
 <template>
@@ -10,17 +8,10 @@ import { wBreadcrumbs } from '#components'
 
     <token>
       <w-breadcrumbs>
-        <a href="#/foo">Foo</a>
-        <a href="#/bar">Bar</a>
-        <span aria-current="page">Baz</span>
+        <a href="#/foo">Page 1</a>
+        <a href="#/bar">Page 2</a>
+        <span aria-current="page">Current Page</span>
       </w-breadcrumbs>
     </token>
-
-    <!-- <w-breadcrumbs>
-      <template v-for="crumb in crumbs">
-        <a v-if="crumb" :href="`#/${crumb}`">{{ crumb }}</a>
-        <span v-else aria-current="page">Baz</span>
-      </template>
-    </w-breadcrumbs> -->
   </div>
 </template>

package.json

@@ -47,8 +47,9 @@
     "@vitejs/plugin-vue": "^4.1.0",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",
+    "@warp-ds/core": "^1.0.0",
+    "@warp-ds/component-classes": "^1.0.0-alpha.42",
     "@warp-ds/uno": "1.0.0-alpha.8",
-    "@warp-ds/component-classes": "^1.0.0-alpha.40",
     "cleave-lite": "^1.0.0",
     "cz-conventional-changelog": "^3.3.0",
     "drnm": "^0.9.0",