@otto-de/b2b-core-components 1.6.0 → 1.7.0

package/dist/collection/components/table/table.stories.js

@@ -1,298 +1,357 @@
+var __rest = (this && this.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
 import { getArgTypes } from '../../docs/config/utils';
+import { userEvent } from '@storybook/testing-library';
 import { html } from 'lit-html';
-import tableDocs from './table.docs.mdx';
-import { ContentAlignment, TableRowgroupTypes, TableSizes, } from '../../utils/types/table.types';
+import { repeat } from 'lit/directives/repeat.js';
 import { sampleData, smallSampleData, longSampleData, userSampleData, } from './stories.data';
-import { useArgs } from '@storybook/client-api';
-const Template = ({ data, parentWidth, firstColumnWidth, firstRowHeight, size, textWrap, align, highlight, withDividers, color, }) => {
-  return html `
-    <div style="width: ${parentWidth}">
-      <b2b-table size="${size}">
+import { useArgs } from '@storybook/preview-api';
+const tableArgs = getArgTypes('b2b-table');
+const cellArgs = getArgTypes('b2b-table-cell');
+const rowArgs = getArgTypes('b2b-table-row');
+const headerArgs = getArgTypes('b2b-table-header');
+const meta = {
+  title: 'Components/Content/Table',
+  component: 'b2b-table',
+  parameters: {
+    backgrounds: {
+      default: 'docsBackground',
+      values: [{ name: 'docsBackground', value: '#ffffff' }],
+    },
+  },
+  args: {
+    size: 'expand',
+    textWrap: false,
+    align: 'left',
+    highlight: true,
+    withDividers: false,
+    color: 'default',
+    data: sampleData,
+    parentWidth: '600px',
+    firstColumnWidth: 'auto',
+    firstRowHeight: 'auto',
+    contentAlign: 'left',
+  },
+  argTypes: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, tableArgs), cellArgs), rowArgs), headerArgs), { data: { table: { disable: true } }, parentWidth: { table: { disable: true } }, firstColumnWidth: { table: { disable: true } }, firstRowHeight: { table: { disable: true } } }),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<div style="width: ${args.parentWidth}"><b2b-table size="${args.size}">
         <b2b-table-rowgroup type="header">
           <b2b-table-row>
-            ${data.columns.map((columnName, index) => {
-    return html ` <b2b-table-header
-                ?divider=${withDividers && index !== data.columns.length - 1}
-                style=${index === 0 ? `width: ${firstColumnWidth}` : ''}
+            ${args.data.columns.map((columnName, index) => {
+      return html `<b2b-table-header
+                ?divider=${args.withDividers &&
+        index !== args.data.columns.length - 1}
+                style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
                 >${columnName}</b2b-table-header
               >`;
-  })}
+    })}
+    </b2b-table-rowgroup>
+    <b2b-table-rowgroup type="body">
+      ${repeat(args.data.rows, (row, index) => html `
+          <b2b-table-row
+            highlight="${args.highlight}"
+            color=${index === 0 ? args.color : 'default'}>
+            ${repeat(
+    // @ts-ignore
+    row, (cell, index) => html `<b2b-table-cell
+                ?divider=${args.withDividers && index === 0}
+                align="${args.align}"
+                text-wrap="${args.textWrap}"
+                >${cell}</b2b-table-cell
+              >`)}<b2b-table-cell
+              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+            >
           </b2b-table-row>
-        </b2b-table-rowgroup>
-        <b2b-table-rowgroup type="body">
-          ${data.rows.map((row, index) => {
-    return html `<b2b-table-row
-              highlight="${highlight}"
-              style=${index === 0 ? `height: ${firstRowHeight}` : ''}
-              color=${index === 0 ? color : 'default'}>
-              ${row.map((data, index) => html `<b2b-table-cell
-                    ?divider=${withDividers && index === 0}
-                    align="${align}"
-                    text-wrap="${textWrap}"
-                    >${data}</b2b-table-cell
-                  >`)}
-            </b2b-table-row>`;
-  })}
-        </b2b-table-rowgroup>
-      </b2b-table>
-    </div>
-  `;
+        `)}
+    </b2b-table-rowgroup>
+  </b2b-table></div>`;
+  },
 };
-const defaultArgs = {
-  data: sampleData,
-  parentWidth: '600px',
-  firstColumnWidth: 'auto',
-  firstRowHeight: 'auto',
-  size: 'expand',
-  textWrap: false,
-  align: 'left',
-  highlight: true,
-  withDividers: false,
-  color: 'default',
+export default meta;
+export const SizeExpand = {
+  args: Object.assign({}, meta.args),
 };
-export const story010TableExpand = Template.bind({});
-story010TableExpand.args = Object.assign({}, defaultArgs);
-story010TableExpand.storyName = 'Size Expand';
-export const story020TableEqual = Template.bind({});
-story020TableEqual.args = Object.assign(Object.assign({}, defaultArgs), { size: 'equal' });
-story020TableEqual.storyName = 'Size Equal';
-export const story030TableExpand = Template.bind({});
-story030TableExpand.args = Object.assign(Object.assign({}, defaultArgs), { parentWidth: '100%' });
-story030TableExpand.storyName = 'Size Expand Full width';
-export const story040TableExpand = Template.bind({});
-story040TableExpand.args = Object.assign(Object.assign({}, defaultArgs), { data: smallSampleData, parentWidth: '450px' });
-story040TableExpand.storyName = 'Small Table Expand';
-export const story050TableEqual = Template.bind({});
-story050TableEqual.args = Object.assign(Object.assign({}, defaultArgs), { data: smallSampleData, parentWidth: '450px', size: 'equal' });
-story050TableEqual.storyName = 'Small Table Equal';
-export const story060TableFixedCellSize = Template.bind({});
-story060TableFixedCellSize.args = Object.assign(Object.assign({}, defaultArgs), { data: smallSampleData, size: 'equal', firstColumnWidth: '50%', withDividers: true });
-story060TableFixedCellSize.storyName = 'Fixed Cell Width';
-export const story070TableFixedRowHeight = Template.bind({});
-story070TableFixedRowHeight.args = Object.assign(Object.assign({}, defaultArgs), { data: smallSampleData, size: 'expand', firstRowHeight: '120px' });
-story070TableFixedRowHeight.storyName = 'Fixed Row Height';
-export const story080TableWithDividers = Template.bind({});
-story080TableWithDividers.args = Object.assign(Object.assign({}, defaultArgs), { withDividers: true });
-story080TableWithDividers.storyName = 'With dividers';
-export const story090TableColor = Template.bind({});
-story090TableColor.args = Object.assign(Object.assign({}, defaultArgs), { data: smallSampleData, color: 'group' });
-story090TableColor.storyName = 'Colored row';
-const TemplateScrollable = ({ data, parentWidth, parentHeight, columnsWidth, size, textWrap, align, withDividers, }) => {
-  return html `
-    <b2b-scrollable-container
-      style="width: ${parentWidth}; height: ${parentHeight};">
-      <b2b-table size="${size}">
-        <b2b-table-rowgroup type="header">
-          <b2b-table-row>
-            ${data.columns.map((columnName, index) => {
-    return html ` <b2b-table-header
-                ?divider=${withDividers && index !== data.columns.length - 1}
-                style=${`min-width: ${columnsWidth}`}
-                >${columnName}</b2b-table-header
-              >`;
-  })}
-          </b2b-table-row>
-        </b2b-table-rowgroup>
-        <b2b-table-rowgroup type="body">
-          ${data.rows.map(row => {
-    return html `<b2b-table-row>
-              ${row.map((data, index) => html `<b2b-table-cell
-                    ?divider=${withDividers && index === 0}
-                    align="${align}"
-                    text-wrap="${textWrap}"
-                    >${data}</b2b-table-cell
-                  >`)}
-            </b2b-table-row>`;
-  })}
-        </b2b-table-rowgroup>
-      </b2b-table>
-    </b2b-scrollable-container>
-  `;
+export const SizeEqual = {
+  args: Object.assign(Object.assign({}, meta.args), { size: 'equal' }),
 };
-export const story100ScrollableTable = TemplateScrollable.bind({});
-story100ScrollableTable.args = {
-  parentWidth: '600px',
-  parentHeight: '250px',
-  columnsWidth: '80px',
-  data: longSampleData,
-  size: 'expand',
-  withDividers: true,
-  textWrap: false,
-  align: 'left',
+export const SizeExpandFullWidth = {
+  args: Object.assign(Object.assign({}, meta.args), { parentWidth: '100%' }),
 };
-story100ScrollableTable.storyName = 'Scrollable table';
-const TemplateSorting = ({ data, firstColumnWidth, size, textWrap, align, highlight, withDividers, color, }) => {
-  const [_, updateArgs] = useArgs();
-  const onSort = (event, index) => {
-    switch (event.detail) {
-      case 'ascending':
-        data.rows.sort((a, b) => {
-          if (a[index] < b[index]) {
-            return -1;
-          }
-          else if (a[index] > b[index]) {
-            return 1;
-          }
-          else {
-            return 0;
-          }
-        });
-        break;
-      case 'descending':
-        data.rows.sort((a, b) => {
-          if (a[index] < b[index]) {
-            return 1;
-          }
-          else if (a[index] > b[index]) {
-            return -1;
-          }
-          else {
-            return 0;
-          }
-        });
-        break;
-    }
-    updateArgs({ data: data });
-  };
-  return html `
-    <div>
-      <b2b-table size="${size}">
-        <b2b-table-rowgroup type="header">
-          <b2b-table-row>
-            ${data.columns.map(column => {
-    return html ` <b2b-table-header
-                sort-direction="not-sorted"
-                @b2b-change=${event => onSort(event, column.id)}
-                ?divider=${withDividers}
-                style=${column.id === 0 ? `width: ${firstColumnWidth}` : ''}
-                >${column.name}</b2b-table-header
-              >`;
-  })}
-          </b2b-table-row>
-        </b2b-table-rowgroup>
-        <b2b-table-rowgroup type="body">
-          ${data.rows.map((row, index) => {
-    return html `<b2b-table-row
-              highlight="${highlight}"
-              color=${index === 0 ? color : 'default'}>
-              ${row.map(data => html `<b2b-table-cell
-                    ?divider=${withDividers}
-                    align="${align}"
-                    text-wrap="${textWrap}"
-                    >${data}</b2b-table-cell
-                  >`)}
-            </b2b-table-row>`;
-  })}
-        </b2b-table-rowgroup>
-      </b2b-table>
-    </div>
-  `;
+export const SmallTableExpand = {
+  args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, parentWidth: '450px' }),
+};
+export const SmallTableEqual = {
+  args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, size: 'equal', parentWidth: '450px' }),
+};
+export const FixedCellSize = {
+  args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, size: 'equal', firstColumnWidth: '50%', withDividers: true }),
+};
+export const FixedRowHeight = {
+  args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, size: 'expand', firstRowHeight: '120px' }),
+};
+export const WithDividers = {
+  args: Object.assign(Object.assign({}, meta.args), { withDividers: true }),
+};
+export const ColoredRow = {
+  args: Object.assign(Object.assign({}, meta.args), { data: smallSampleData, color: 'group' }),
 };
-export const story110Sorting = TemplateSorting.bind({});
-story110Sorting.args = Object.assign(Object.assign({}, defaultArgs), { withDividers: true, size: 'expand', data: userSampleData });
-story110Sorting.storyName = 'Table with Sorting';
-const TemplateAccordion = ({ data, firstColumnWidth, size, textWrap, align, highlight, withDividers, color, selectable, }) => {
+export const ScrollableTable = {
+  args: Object.assign(Object.assign({}, meta.args), { parentWidth: '600px', parentHeight: '250px', columnsWidth: '80px', data: longSampleData, size: 'expand', withDividers: true, textWrap: false, align: 'left' }),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<b2b-scrollable-container
+    style="width: ${args.parentWidth}; height: ${args.parentHeight};">
+    <b2b-table size="${args.size}">
+      <b2b-table-rowgroup type="header">
+        <b2b-table-row>
+          ${args.data.columns.map((columnName, index) => {
+      return html ` <b2b-table-header
+              ?divider=${args.withDividers &&
+        index !== args.data.columns.length - 1}
+              style=${`min-width: ${args.columnsWidth}`}
+              >${columnName}</b2b-table-header
+            >`;
+    })}
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body">
+        ${args.data.rows.map((row, index) => {
+      return html `<b2b-table-row
+            highlight="${args.highlight}"
+            color=${index === 0 ? args.color : 'default'}>
+            ${row.map((data, index) => html `<b2b-table-cell
+                  ?divider=${args.withDividers && index === 0}
+                  align="${args.align}"
+                  text-wrap="${args.textWrap}"
+                  >${data}</b2b-table-cell
+                >`)}
+          </b2b-table-row>`;
+    })}
+      </b2b-table-rowgroup>
+    </b2b-table>
+  </b2b-scrollable-container>`;
+  },
+};
+const RenderSortableTable = (_a) => {
+  var args = __rest(_a, []);
   return html `
-    <div>
-      <b2b-table size="${size}">
-        <b2b-table-rowgroup type="header" accordion selectable="${selectable}">
-          <b2b-table-row>
-            ${data.columns.map((columnName, index) => {
-    return html ` <b2b-table-header
-                ?divider=${withDividers && index !== data.columns.length - 1}
-                style=${index === 0 ? `width: ${firstColumnWidth}` : ''}
-                >${columnName}</b2b-table-header
-              >`;
-  })}
-          </b2b-table-row>
-        </b2b-table-rowgroup>
-        <b2b-table-rowgroup type="body" accordion selectable="${selectable}">
-          ${data.rows.map((row, index) => {
-    return html `<b2b-table-row
-              highlight="${highlight}"
-              color=${index === 0 ? color : 'default'}
-              value="${row[0]}">
-              ${row.map(data => html `<b2b-table-cell
-                    ?divider=${withDividers}
-                    align="${align}"
-                    text-wrap="${textWrap}"
-                    >${data}</b2b-table-cell
-                  >`)}
-            </b2b-table-row>`;
-  })}
-        </b2b-table-rowgroup>
-        <b2b-table-rowgroup
-          type="body"
-          accordion
-          opened
-          selectable="${selectable}">
-          ${data.rows.map((row, index) => {
+      <b2b-table-rowgroup type="body">
+        ${args.data.rows.map((row, index) => {
     return html `<b2b-table-row
-              highlight="${highlight}"
-              color=${index === 0 ? color : 'default'}
-              value="${row[0]}">
-              ${row.map(data => html `<b2b-table-cell
-                    ?divider=${withDividers}
-                    align="${align}"
-                    text-wrap="${textWrap}"
-                    >${data}</b2b-table-cell
-                  >`)}
-            </b2b-table-row>`;
+            highlight="${args.highlight}"
+            color=${index === 0 ? args.color : 'default'}>
+            ${row.map(data => html `<b2b-table-cell
+                  ?divider=${args.withDividers}
+                  align="${args.align}"
+                  text-wrap="${args.textWrap}"
+                  >${data}</b2b-table-cell
+                >`)}
+          </b2b-table-row>`;
   })}
-        </b2b-table-rowgroup>
-      </b2b-table>
-    </div>
-  `;
-};
-export const story120Accordion = TemplateAccordion.bind({});
-story120Accordion.args = Object.assign(Object.assign({}, defaultArgs), { data: sampleData, selectable: false });
-story120Accordion.storyName = 'Accordion Table';
-export const story130Selectable = TemplateAccordion.bind({});
-story130Selectable.args = Object.assign(Object.assign({}, defaultArgs), { data: sampleData, selectable: true });
-story130Selectable.storyName = 'Selectable Table';
-const tableArgs = getArgTypes('b2b-table');
-const rowGroupArgs = getArgTypes('b2b-table-rowgroup');
-const rowArgs = getArgTypes('b2b-table-row');
-const headerArgs = getArgTypes('b2b-table-header');
-const cellArgs = getArgTypes('b2b-table-cell');
-// Override defaults
-tableArgs.size = Object.assign(Object.assign({}, tableArgs.size), { name: 'size (b2b-table)' });
-tableArgs.size.table.defaultValue = { summary: TableSizes.EXPAND };
-rowGroupArgs.type = Object.assign(Object.assign({}, rowGroupArgs.type), { name: 'type (b2b-table-rowgroup)', options: [] });
-rowGroupArgs.type.table.defaultValue = { summary: TableRowgroupTypes.HEADER };
-rowArgs.highlight = Object.assign(Object.assign({}, rowArgs.highlight), { name: 'highlight (b2b-table-row)' });
-cellArgs.align = Object.assign(Object.assign({}, cellArgs.align), { name: 'align (b2b-table-cell)' });
-cellArgs.align = Object.assign(Object.assign({}, cellArgs.align), { name: 'align (b2b-table-cell)' });
-cellArgs.align.table.defaultValue = { summary: ContentAlignment.LEFT };
-cellArgs.textWrap = Object.assign(Object.assign({}, cellArgs.textWrap), { name: 'textWrap (b2b-table-cell)' });
-const argsTableData = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, rowGroupArgs), rowArgs), headerArgs), cellArgs), tableArgs);
-argsTableData.parentWidth = {
-  description: 'This is not a component prop. It is the width of the container the table in this example.',
+      </b2b-table-rowgroup>
+    </b2b-table>
+  </div>`;
 };
-argsTableData.parentHeight = {
-  description: 'This is not a component prop. It is the height of the container the table in this example.',
+const SortableTableMeta = {
+  args: Object.assign({}, meta.args),
+  decorators: [
+    story => {
+      const [args, updateArgs] = useArgs();
+      const onSort = (event, index, data) => {
+        switch (event.detail) {
+          case 'ascending':
+            data.rows.sort((a, b) => {
+              if (a[index] < b[index]) {
+                return -1;
+              }
+              else if (a[index] > b[index]) {
+                return 1;
+              }
+              else {
+                return 0;
+              }
+            });
+            break;
+          case 'descending':
+            data.rows.sort((a, b) => {
+              if (a[index] < b[index]) {
+                return 1;
+              }
+              else if (a[index] > b[index]) {
+                return -1;
+              }
+              else {
+                return 0;
+              }
+            });
+            break;
+        }
+        updateArgs({ data: data });
+      };
+      return html `<div>
+        <b2b-table size="expand">
+          <b2b-table-rowgroup type="header">
+            <b2b-table-row>
+              ${userSampleData.columns.map(column => {
+        return html ` <b2b-table-header
+                  sort-direction="not-sorted"
+                  content-align=${args.contentAlign}
+                  @b2b-change=${event => onSort(event, column.id, userSampleData)}
+                  ?divider="false"
+                  >${column.name}</b2b-table-header
+                >`;
+      })}
+            </b2b-table-row> </b2b-table-rowgroup
+          >${story()}</b2b-table
+        >
+      </div>`;
+    },
+  ],
 };
-argsTableData.columnsWidth = {
-  description: 'This is not a component prop. It is an example of a way to handle fixed width for table columns.',
+export const SortableTable = {
+  args: Object.assign(Object.assign({}, SortableTableMeta.args), { contentAlign: 'left', align: 'left', data: userSampleData }),
+  decorators: SortableTableMeta.decorators,
+  render: RenderSortableTable,
+  play: async ({ canvasElement }) => {
+    setTimeout(async () => {
+      const header = await canvasElement.querySelector('b2b-table-header');
+      const sortArrow = header.shadowRoot.querySelector('div');
+      await userEvent.click(sortArrow);
+    }, 2000);
+  },
 };
-argsTableData.firstColumnWidth = {
-  description: 'This is not a component prop. It is an example of a way to handle fixed width for a table column.',
+export const SortableTableRightAlign = {
+  args: Object.assign(Object.assign({}, SortableTableMeta.args), { contentAlign: 'right', align: 'right', data: userSampleData }),
+  decorators: SortableTableMeta.decorators,
+  render: RenderSortableTable,
+  play: async ({ canvasElement }) => {
+    setTimeout(async () => {
+      const header = await canvasElement.querySelector('b2b-table-header');
+      const sortArrow = header.shadowRoot.querySelector('div');
+      await userEvent.click(sortArrow);
+    }, 1000);
+  },
 };
-argsTableData.data = {
-  table: { disable: true },
+export const AccordionTable = {
+  args: Object.assign({}, meta.args),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<div>
+    <b2b-table size="${args.size}">
+      <b2b-table-rowgroup type="header" accordion>
+        <b2b-table-row>
+          ${args.data.columns.map((columnName, index) => {
+      return html ` <b2b-table-header
+              ?divider=${args.withDividers &&
+        index !== args.data.columns.length - 1}
+              style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
+              >${columnName}</b2b-table-header
+            >`;
+    })}
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion>
+        ${args.data.rows.map((row, index) => {
+      return html `<b2b-table-row
+            highlight="${args.highlight}"
+            color=${index === 0 ? args.color : 'default'}>
+            ${row.map(data => html `<b2b-table-cell
+                  ?divider=${args.withDividers}
+                  align="${args.align}"
+                  text-wrap="${args.textWrap}"
+                  >${data}</b2b-table-cell
+                >`)}
+            <b2b-table-cell
+              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+            >
+          </b2b-table-row>`;
+    })}
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion opened>
+        ${args.data.rows.map((row, index) => {
+      return html `<b2b-table-row
+            highlight="${args.highlight}"
+            color=${index === 0 ? args.color : 'default'}>
+            ${row.map(data => html `<b2b-table-cell
+                  ?divider=${args.withDividers}
+                  align="${args.align}"
+                  text-wrap="${args.textWrap}"
+                  >${data}</b2b-table-cell
+                >`)}
+            <b2b-table-cell
+              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+            >
+          </b2b-table-row>`;
+    })}
+      </b2b-table-rowgroup>
+    </b2b-table>
+  </div>`;
+  },
 };
-export default {
-  title: 'Components/Content/Table',
-  argTypes: Object.assign(Object.assign({}, argsTableData), { sortDirection: false, type: false }),
-  viewmode: 'docs',
-  parameters: {
-    controls: { expanded: true },
-    docs: {
-      page: tableDocs,
-    },
-    backgrounds: {
-      default: 'docsBackground',
-      values: [{ name: 'docsBackground', value: '#fff' }],
-    },
+export const Selectable = {
+  args: Object.assign({}, meta.args),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<div>
+    <b2b-table size="${args.size}">
+      <b2b-table-rowgroup type="header" accordion selectable>
+        <b2b-table-row>
+          ${args.data.columns.map((columnName, index) => {
+      return html ` <b2b-table-header
+              ?divider=${args.withDividers &&
+        index !== args.data.columns.length - 1}
+              style=${index === 0 ? `width: ${args.firstColumnWidth}` : ''}
+              >${columnName}</b2b-table-header
+            >`;
+    })}
+        </b2b-table-row>
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion selectable>
+        ${args.data.rows.map((row, index) => {
+      return html `<b2b-table-row
+            highlight="${args.highlight}"
+            color=${index === 0 ? args.color : 'default'}>
+            ${row.map(data => html `<b2b-table-cell
+                  ?divider=${args.withDividers}
+                  align="${args.align}"
+                  text-wrap="${args.textWrap}"
+                  >${data}</b2b-table-cell
+                >`)}
+            <b2b-table-cell
+              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+            >
+          </b2b-table-row>`;
+    })}
+      </b2b-table-rowgroup>
+      <b2b-table-rowgroup type="body" accordion opened selectable>
+        ${args.data.rows.map((row, index) => {
+      return html `<b2b-table-row
+            highlight="${args.highlight}"
+            color=${index === 0 ? args.color : 'default'}>
+            ${row.map(data => html `<b2b-table-cell
+                  ?divider=${args.withDividers}
+                  align="${args.align}"
+                  text-wrap="${args.textWrap}"
+                  >${data}</b2b-table-cell
+                >`)}
+            <b2b-table-cell
+              ><b2b-button size="50">Action</b2b-button></b2b-table-cell
+            >
+          </b2b-table-row>`;
+    })}
+      </b2b-table-rowgroup>
+    </b2b-table>
+  </div>`;
   },
 };

package/dist/collection/components/textarea/textarea.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:21 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 11:28:34 GMT
+ * Generated on Thu, 26 Oct 2023 14:16:22 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */