normalize tree-view stories

packages/web-components/fast-foundation/src/tree-view/stories/tree-view.stories.ts

@@ -1,12 +1,28 @@
 import { html } from "@microsoft/fast-element";
-import type { Args, Meta } from "@storybook/html";
+import type { Meta, Story, StoryArgs } from "../../__test__/helpers.js";
+import { renderComponent } from "../../__test__/helpers.js";
 import type { FASTTreeView } from "../tree-view.js";
 
-type TreeViewStoryArgs = Args & FASTTreeView;
-type TreeViewStoryMeta = Meta<TreeViewStoryArgs>;
+const storyTemplate = html<StoryArgs<FASTTreeView>>`
+    <fast-tree-view render-collapsed-nodes="${x => x.renderCollapsedNodes}">
+        ${x => x.storyContent}
+    </fast-tree-view>
+`;
+
+export default {
+    title: "Tree view",
+    args: {
+        renderCollapsedNodes: true,
+    },
+    argTypes: {
+        renderCollapsedNodes: { control: "boolean" },
+        storyContent: { table: { disable: true } },
+    },
+} as Meta<FASTTreeView>;
 
-const storyTemplate = html<TreeViewStoryArgs>`
-    <fast-tree-view :renderCollapsedNodes="${x => x.renderCollapsedNodes}">
+export const TreeView: Story<FASTTreeView> = renderComponent(storyTemplate).bind({});
+TreeView.args = {
+    storyContent: html`
         <fast-divider></fast-divider>
         <fast-tree-item>
             Root item 1
@@ -41,27 +57,5 @@ const storyTemplate = html<TreeViewStoryArgs>`
         <fast-tree-item>
             Root item 3
         </fast-tree-item>
-    </fast-tree-view>
-`;
-
-export default {
-    title: "Tree view",
-    argTypes: {
-        args: {
-            content: "You got a fast tree item",
-            expanded: false,
-            disabled: false,
-            selected: false,
-            renderCollapsedNodes: true,
-        },
-        renderCollapsedNodes: {
-            control: { type: "boolean" },
-        },
-    },
-} as TreeViewStoryMeta;
-
-export const TreeView = (args: TreeViewStoryArgs) => {
-    const storyFragment = new DocumentFragment();
-    storyTemplate.render(args, storyFragment);
-    return storyFragment.firstElementChild;
+    `,
 };