docs: update stories to test input fields in tables

Author: iOvergaard

packages/uui-table/lib/uui-table-cell.story.ts

@@ -1,18 +1,21 @@
-import '.';
-
-import { Story } from '@storybook/web-components';
+import type { Meta, StoryFn } from '@storybook/web-components';
 import { html } from 'lit';
 
-import { UUITableCellElement } from './uui-table-cell.element';
+import type { UUITableCellElement } from './uui-table-cell.element';
+
+import '@umbraco-ui/uui-input/lib';
+import './uui-table-cell.element';
 
-export default {
+const meta: Meta<typeof UUITableCellElement> = {
   title: 'Layout/Table/Table Cell',
   component: 'uui-table-cell',
   id: 'uui-table-cell',
 };
 
-export const AAAOverview: Story<UUITableCellElement> = props =>
-  html`
+export default meta;
+
+const Template: StoryFn<UUITableCellElement> = props => {
+  return html`
     <uui-table
       aria-label="Random Umbraco Words"
       aria-describedby="table-description">
@@ -29,6 +32,12 @@ export const AAAOverview: Story<UUITableCellElement> = props =>
           ?clip-text=${props.clipText}>
           Rocks
         </uui-table-cell>
+        <uui-table-cell
+          ?disable-child-interaction=${props.disableChildInteraction}
+          ?no-padding=${props.noPadding}
+          ?clip-text=${props.clipText}>
+          <uui-input placeholder="Type your own thing"></uui-input>
+        </uui-table-cell>
         <uui-table-cell
           ?disable-child-interaction=${props.disableChildInteraction}
           ?no-padding=${props.noPadding}
@@ -38,6 +47,9 @@ export const AAAOverview: Story<UUITableCellElement> = props =>
       </uui-table-row>
     </uui-table>
   `;
+};
+
+export const AAAOverview = Template.bind({});
 AAAOverview.storyName = 'Overview';
 AAAOverview.args = {
   slot: 'Very very very Very very very Very very very Very very very Very very very long sentence',

packages/uui-table/lib/uui-table-row.story.ts

@@ -1,28 +1,45 @@
-import '.';
-
-import { Story } from '@storybook/web-components';
+import { Meta, StoryFn } from '@storybook/web-components';
 import { html } from 'lit';
 
 import { ArrayOfUmbracoWords } from '../../../storyhelpers/UmbracoWordGenerator';
+import type { UUITableRowElement } from './uui-table-row.element';
+
+import '@umbraco-ui/uui-input/lib';
+import './uui-table-row.element';
 
-export default {
+const meta: Meta<typeof UUITableRowElement> = {
   title: 'Layout/Table/Table Row',
   component: 'uui-table-row',
   id: 'uui-table-row',
 };
 
-export const AAAOverview: Story = () =>
-  html`
-    <uui-table
-      aria-label="Random Umbraco Words"
-      aria-describedby="table-description">
-      <uui-table-row>
-        ${ArrayOfUmbracoWords(3).map(
+export default meta;
+
+const Template: StoryFn<UUITableRowElement> = props => {
+  return html`
+    <uui-table>
+      <uui-table-row
+        ?selectable=${props.selectable}
+        ?selectOnly=${props.selectOnly}>
+        ${ArrayOfUmbracoWords(5).map(
+          el => html`<uui-table-cell>${el}</uui-table-cell>`
+        )}
+      </uui-table-row>
+      <uui-table-row
+        ?selectable=${props.selectable}
+        ?selectOnly=${props.selectOnly}>
+        <uui-table-cell>
+          <uui-input placeholder="Type your own thing"></uui-input>
+        </uui-table-cell>
+        ${ArrayOfUmbracoWords(5).map(
           el => html`<uui-table-cell>${el}</uui-table-cell>`
         )}
       </uui-table-row>
     </uui-table>
   `;
+};
+
+export const AAAOverview = Template.bind({});
 AAAOverview.storyName = 'Overview';
 
 AAAOverview.parameters = {
@@ -43,24 +60,10 @@ AAAOverview.parameters = {
   },
 };
 
-export const SelectableRows: Story = () =>
-  html`
-    <div style="width: 100%;">
-      <uui-table>
-        <uui-table-row selectable>
-          ${ArrayOfUmbracoWords(5).map(
-            el => html`<uui-table-cell>${el}</uui-table-cell>`
-          )}
-        </uui-table-row>
-        <uui-table-row selectable>
-          ${ArrayOfUmbracoWords(5).map(
-            el => html`<uui-table-cell>${el}</uui-table-cell>`
-          )}
-        </uui-table-row>
-      </uui-table>
-    </div>
-  `;
-
+export const SelectableRows = Template.bind({});
+SelectableRows.args = {
+  selectable: true,
+};
 SelectableRows.parameters = {
   docs: {
     source: {