fix(breadcrumbs): fix story configuration of BreadcrumbItem (#1246)

* fix: href on link

* fix(breadcrumbs): fix story configuration of BreadcrumbItem

* fix whitespace

* correct url -> href

* Revert "fix: href on link"

This reverts commit 5db2f406db0ffb7160151c320f8b096607ce4390.

* fix markdown lint

---------

Co-authored-by: Sanjeev Suresh <ssuresh@dialpad.com>

components/breadcrumbs/breadcrumb_item.stories.js

@@ -0,0 +1,44 @@
+import { createTemplateFromVueFile } from '@/common/storybook_utils';
+import DtBreadcrumbItem from './breadcrumb_item.vue';
+
+import DtBreadcrumbItemDefaultTemplate from './breadcrumb_item_default.story.vue';
+
+// Default Prop Values
+export const argsData = {
+  href: '#',
+  label: 'Breadcrumb Item',
+  selected: false,
+};
+
+export const argTypesData = {
+};
+
+// Story Collection
+export default {
+  title: 'Components/Breadcrumbs',
+  component: DtBreadcrumbItem,
+  args: argsData,
+  argTypes: argTypesData,
+  excludeStories: /.*Data$/,
+};
+
+// Templates
+const DefaultTemplate = (args, { argTypes }) =>
+  createTemplateFromVueFile(args, argTypes, DtBreadcrumbItemDefaultTemplate);
+
+export const BreadcrumbItem = {
+  render: DefaultTemplate,
+  args: {},
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          {
+            id: 'listitem',
+            enabled: false,
+          },
+        ],
+      },
+    },
+  },
+};

components/breadcrumbs/breadcrumb_item_default.story.vue

@@ -0,0 +1,17 @@
+<template>
+  <dt-breadcrumb-item
+    :inverted="inverted"
+    :selected="selected"
+    :label="label"
+    :href="href"
+  />
+</template>
+
+<script>
+import DtBreadcrumbItem from './breadcrumb_item.vue';
+
+export default {
+  name: 'DtBreadcrumbItemDefault',
+  components: { DtBreadcrumbItem },
+};
+</script>

components/breadcrumbs/breadcrumbs.mdx

@@ -2,6 +2,8 @@ import { Canvas, Story, Subtitle, Controls, Meta } from '@storybook/blocks';
 
 import * as BreadcrumbsStories from './breadcrumbs.stories';
 
+import * as BreadcrumbItemStories from './breadcrumb_item.stories';
+
 <Meta of={BreadcrumbsStories}/>
 
 # Breadcrumbs
@@ -54,7 +56,7 @@ These breadcrumbs styles are provided in two visual styles:
 
 Breadcrumb items include [Link component](?path=/story/components-link--default).
 
-<Controls of={BreadcrumbsStories.BreadcrumbItem} />
+<Controls of={BreadcrumbItemStories.BreadcrumbItem} />
 
 ## Accessibility
 

components/breadcrumbs/breadcrumbs.stories.js

@@ -1,6 +1,5 @@
 import { createTemplateFromVueFile } from '@/common/storybook_utils';
 import DtBreadcrumbs from './breadcrumbs.vue';
-import DtBreadcrumbItem from './breadcrumb_item.vue';
 
 import DtBreadcrumbsDefaultTemplate from './breadcrumbs_default.story.vue';
 import DtBreadcrumbsVariantsTemplate from './breadcrumbs_variants.story.vue';
@@ -48,7 +47,7 @@ export const argTypesData = {
     control: 'object',
     table: {
       defaultValue: {
-        summary: '{ url: string, label: string }[]',
+        summary: '{ href: string, label: string }[]',
       },
     },
   },
@@ -69,9 +68,6 @@ const DefaultTemplate = (args, { argTypes }) =>
 const VariantsTemplate = (args, { argTypes }) =>
   createTemplateFromVueFile(args, argTypes, DtBreadcrumbsVariantsTemplate);
 
-const BreadcrumbItemTemplate = (args, { argTypes }) =>
-  createTemplateFromVueFile(args, argTypes, DtBreadcrumbItem);
-
 export const Default = {
   render: DefaultTemplate,
   args: {},
@@ -97,20 +93,3 @@ export const Variants = {
     },
   },
 };
-
-export const BreadcrumbItem = {
-  render: BreadcrumbItemTemplate,
-  args: {},
-  parameters: {
-    a11y: {
-      config: {
-        rules: [
-          {
-            id: 'listitem',
-            enabled: false,
-          },
-        ],
-      },
-    },
-  },
-};