docs(storybook): update stories to import their README files

Author: iOvergaard

packages/uui-action-bar/lib/uui-action-bar.story.ts

@@ -6,6 +6,8 @@ import '@umbraco-ui/uui-icon-registry-essential/lib';
 
 import { html } from 'lit';
 
+import readme from '../README.md?raw';
+
 export default {
   id: 'uui-action-bar',
   title: 'Buttons/Action Bar',
@@ -28,6 +30,11 @@ export default {
       options: ['default', 'positive', 'warning', 'danger'],
     },
   },
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 const buttons = ['copy', 'remove', 'delete'];

packages/uui-avatar-group/lib/uui-avatar-group.story.ts

@@ -2,6 +2,7 @@ import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Displays/Avatar/Avatar Group',
@@ -10,6 +11,11 @@ export default {
   args: {
     limit: 0,
   },
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 export const AAAOverview: Story = props => html`

packages/uui-avatar/lib/uui-avatar.story.ts

@@ -2,6 +2,7 @@ import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Displays/Avatar/Avatar',
@@ -14,6 +15,11 @@ export default {
   argTypes: {
     slot: { control: { type: 'text' } },
   },
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
   // argTypes: {
   //   'img-src': { table: { disable: true } },
   //   'img-srcset': { table: { disable: true } },

packages/uui-badge/lib/uui-badge.story.ts

@@ -2,6 +2,7 @@ import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Displays/Badge',
@@ -30,6 +31,11 @@ export default {
       control: { type: 'text' },
     },
   },
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 const Template: Story = props => html` <uui-icon-registry-essential>

packages/uui-box/lib/uui-box.story.ts

@@ -2,11 +2,17 @@ import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Layout/Box',
   component: 'uui-box',
   id: 'uui-box',
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 const Template: Story = () => html`

packages/uui-breadcrumbs/lib/uui-breadcrumbs.story.ts

@@ -2,11 +2,17 @@ import '.';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Buttons/Breadcrumbs',
   id: 'uui-breadcrumbs',
   component: 'uui-breadcrumbs',
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 const links = [

packages/uui-button-group/lib/uui-button-group.story.ts

@@ -1,6 +1,7 @@
 import '.';
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Buttons/Button Group',
@@ -24,6 +25,11 @@ export default {
       options: ['default', 'positive', 'warning', 'danger'],
     },
   },
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];

packages/uui-button-inline-create/lib/uui-button-inline-create.story.ts

@@ -4,12 +4,16 @@ import { Story } from '@storybook/web-components';
 import { html, TemplateResult } from 'lit';
 
 import { GetRandomUmbracoWord } from '../../../storyhelpers/UmbracoWordGenerator';
+import readme from '../README.md?raw';
 
 export default {
   id: 'uui-button-inline-create',
   title: 'Buttons/Button Inline Create',
   component: 'uui-button-inline-create',
   parameters: {
+    readme: {
+      markdown: readme,
+    },
     docs: {
       source: {
         code: `<uui-button-inline-create></uui-button-inline-create>`,

packages/uui-button/lib/uui-button.story.ts

@@ -1,11 +1,14 @@
 import '.';
 import '@umbraco-ui/uui-badge/lib';
 import '@umbraco-ui/uui-icon/lib';
+import '@umbraco-ui/uui-loader-circle/lib';
 
 import { Meta, Story } from '@storybook/web-components';
 import { html } from 'lit';
 import { UUIButtonElement } from './uui-button.element';
 
+import readme from '../README.md?raw';
+
 export default {
   title: 'Buttons/Button',
   component: 'uui-button',
@@ -55,6 +58,11 @@ export default {
     '--uui-button-background-color-disabled': { control: { type: 'color' } },
     '--uui-button-contrast-disabled': { control: { type: 'color' } },
   },
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 } as Meta<UUIButtonElement>;
 
 const cssProps = [

packages/uui-card-content-node/lib/uui-card-content-node.story.ts

@@ -3,6 +3,7 @@ import '@umbraco-ui/uui-icon-registry-essential/lib';
 
 import { Story } from '@storybook/web-components';
 import { html } from 'lit';
+import readme from '../README.md?raw';
 
 export default {
   title: 'Displays/Cards/Content Node',
@@ -18,6 +19,11 @@ export default {
   decorators: [
     (Story: any) => html`<div style="width: 300px;">${Story()}</div>`,
   ],
+  parameters: {
+    readme: {
+      markdown: readme,
+    },
+  },
 };
 
 /* TODO: we should make some kind of component for this data layout */