@otto-de/b2b-core-components 1.0.0

package/dist/collection/components/table/table.css

@@ -0,0 +1,227 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 26 Apr 2023 14:13:51 GMT
+ */
+:root, :host {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-table-expand-hover: #e6f4ff;
+  --b2b-color-table-selected-hover: #e6f4ff;
+  --b2b-color-table-selected-default: #cce9ff;
+  --b2b-color-table-hover: #e6f4ff;
+  --b2b-color-background-overlay-transparent-40: rgba(34, 34, 34, 0.25);
+  --b2b-color-background-overlay-transparent-80: rgba(34, 34, 34, 0.5);
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-size-headline-line-height-400: var(--b2b-size-60);
+  --b2b-size-headline-line-height-200: var(--b2b-size-45);
+  --b2b-size-headline-line-height-100: var(--b2b-size-40);
+  --b2b-size-headline-400: var(--b2b-size-60);
+  --b2b-size-headline-200: var(--b2b-size-45);
+  --b2b-size-headline-100: var(--b2b-size-40);
+  --b2b-size-copy-line-height-300: var(--b2b-size-90);
+  --b2b-size-copy-line-height-200: var(--b2b-size-60);
+  --b2b-size-copy-line-height-125: var(--b2b-size-60);
+  --b2b-size-copy-line-height-100: var(--b2b-size-53); /* Will use 21px until design facelift */
+  --b2b-size-copy-line-height-75: var(--b2b-size-45); /* Will use 18px until design facelift */
+  --b2b-size-copy-line-height-50: var(--b2b-size-40);
+  --b2b-size-copy-300: var(--b2b-size-60);
+  --b2b-size-copy-200: var(--b2b-size-45);
+  --b2b-size-copy-125: var(--b2b-size-40);
+  --b2b-size-copy-100: var(--b2b-size-35);
+  --b2b-size-copy-75: var(--b2b-size-30);
+  --b2b-size-copy-50: var(--b2b-size-25);
+  --b2b-size-border-no-radius-bottom: var(--b2b-size-7) var(--b2b-size-7) 0 0;
+  --b2b-size-border-no-radius-top: 0 0 var(--b2b-size-7) var(--b2b-size-7);
+  --b2b-size-border-no-radius-right: var(--b2b-size-7) 0 0 var(--b2b-size-7);
+  --b2b-size-border-no-radius-left: 0 var(--b2b-size-7) var(--b2b-size-7) 0;
+  --b2b-size-border-radius-100: var(--b2b-size-7);
+  --b2b-size-border-width-150: var(--b2b-size-10);
+  --b2b-size-border-width-100: var(--b2b-size-5);
+  --b2b-size-border-width-50: var(--b2b-size-1);
+  --b2b-size-padding-175: var(--b2b-size-80);
+  --b2b-size-padding-150: var(--b2b-size-60);
+  --b2b-size-padding-100: var(--b2b-size-40);
+  --b2b-size-padding-50: var(--b2b-size-20);
+  --b2b-size-space-300: var(--b2b-size-200);
+  --b2b-size-space-250: var(--b2b-size-160);
+  --b2b-size-space-200: var(--b2b-size-100);
+  --b2b-size-space-175: var(--b2b-size-80);
+  --b2b-size-space-150: var(--b2b-size-60);
+  --b2b-size-space-100: var(--b2b-size-40);
+  --b2b-size-space-75: var(--b2b-size-30);
+  --b2b-size-space-50: var(--b2b-size-20);
+  --b2b-size-space-25: var(--b2b-size-10);
+  --b2b-size-icon-400: var(--b2b-size-120);
+  --b2b-size-icon-200: var(--b2b-size-80);
+  --b2b-size-icon-100: var(--b2b-size-60);
+  --b2b-size-icon-50: var(--b2b-size-40);
+  --b2b-color-table-expand-default: var(--b2b-color-grey-25);
+  --b2b-color-icon-inverted: var(--b2b-color-white-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-black-100);
+  --b2b-color-headline-inverted: var(--b2b-color-white-100);
+  --b2b-color-headline-default: var(--b2b-color-black-100);
+  --b2b-color-headline-title: var(--b2b-color-red-100);
+  --b2b-color-copy-overlay: var(--b2b-color-white-100);
+  --b2b-color-copy-inverted: var(--b2b-color-white-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-400);
+  --b2b-color-copy-default: var(--b2b-color-black-100);
+  --b2b-color-border-100: var(--b2b-color-grey-200);
+  --b2b-color-background-overlay: var(--b2b-color-black-100);
+  --b2b-color-background-card: var(--b2b-color-white-100);
+  --b2b-color-background-box: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-25);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+/**
+ * Do not edit directly
+ * Generated on Wed, 26 Apr 2023 14:13:51 GMT
+ */
+:root [data-theme="dark"] {
+  --b2b-size-200: 5rem; /* 80px */
+  --b2b-size-160: 4rem; /* 64px */
+  --b2b-size-150: 3.75rem; /* 60px */
+  --b2b-size-140: 3.5rem; /* 56px */
+  --b2b-size-120: 3rem; /* 48px */
+  --b2b-size-100: 2.5rem; /* 40px */
+  --b2b-size-90: 2.25rem; /* 36px */
+  --b2b-size-80: 2rem; /* 32px */
+  --b2b-size-70: 1.75rem; /* 28px */
+  --b2b-size-60: 1.5rem; /* 24px */
+  --b2b-size-55: 1.375rem; /* 22px */
+  --b2b-size-53: 1.3125rem; /* 21px */
+  --b2b-size-50: 1.25rem; /* 20px */
+  --b2b-size-45: 1.125rem; /* 18px */
+  --b2b-size-40: 1rem; /* 16px */
+  --b2b-size-35: 0.875rem; /* 14px */
+  --b2b-size-30: 0.75rem; /* 12px */
+  --b2b-size-25: 0.625rem; /* 10px */
+  --b2b-size-20: 0.5rem; /* 8px */
+  --b2b-size-15: 0.375rem; /* 6px */
+  --b2b-size-10: 0.25rem; /* 4px */
+  --b2b-size-7: 0.1875rem; /* 3px */
+  --b2b-size-5: 0.125rem; /* 2px */
+  --b2b-size-1: 0.0625rem; /* 1px */
+  --b2b-font-weight-bold: 700;
+  --b2b-font-weight-normal: 400;
+  --b2b-font-weight-thin: 100;
+  --b2b-font-family-default: OttoSans, Arial, Helvetica, sans-serif;
+  --b2b-color-info-100: #003264;
+  --b2b-color-info-50: #ccd6e0;
+  --b2b-color-success-100: #326400;
+  --b2b-color-success-50: #d6e0cc;
+  --b2b-color-warning-100: #ffb432;
+  --b2b-color-warning-50: #ffd998;
+  --b2b-color-error-100: #e6344b;
+  --b2b-color-primary: #d4021d;
+  --b2b-color-red-200: #bb0004;
+  --b2b-color-red-150: #e6344b;
+  --b2b-color-red-100: #d4021d;
+  --b2b-color-red-50: #ffdde3;
+  --b2b-color-grey-400: #777777;
+  --b2b-color-grey-300: #9e9e9e;
+  --b2b-color-grey-250: #b1b1b1;
+  --b2b-color-grey-200: #c4c4c4;
+  --b2b-color-grey-150: #d5d5d5;
+  --b2b-color-grey-100: #e6e6e6;
+  --b2b-color-grey-50: #eeeeee;
+  --b2b-color-grey-25: #f6f6f6;
+  --b2b-color-white-100: #ffffff;
+  --b2b-color-black-100: #222222;
+  --b2b-color-black-50: #333333;
+  --b2b-color-icon-inverted: var(--b2b-color-black-100);
+  --b2b-color-icon-secondary: var(--b2b-color-grey-400);
+  --b2b-color-icon-default: var(--b2b-color-white-100);
+  --b2b-color-headline-inverted: var(--b2b-color-black-100);
+  --b2b-color-headline-default: var(--b2b-color-white-100);
+  --b2b-color-headline-title: var(--b2b-color-red-50);
+  --b2b-color-copy-inverted: var(--b2b-color-black-100);
+  --b2b-color-copy-secondary: var(--b2b-color-grey-100);
+  --b2b-color-copy-default: var(--b2b-color-white-100);
+  --b2b-color-border-100: var(--b2b-color-white-100);
+  --b2b-color-background-page: var(--b2b-color-grey-100);
+  --b2b-color-background-card: var(--b2b-color-black-50);
+  --b2b-color-background-box: var(--b2b-color-black-50);
+  --b2b-color-error-50: var(--b2b-color-red-50);
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans.ttf");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-bold.ttf") format("truetype");
+  font-weight: bold;
+  font-style: normal;
+}
+@font-face {
+  font-family: OttoSans;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.woff") format("woff"), url("https://pattern-library.portal.otto.market/static/assets/fonts/otto-sans-thin.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: ObcIcons;
+  src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
+}
+:host {
+  text-align: left;
+  display: table;
+}
+:host(.b2b-table--expand) {
+  width: 100%;
+}
+:host(.b2b-table--equal) {
+  width: 100%;
+  table-layout: fixed;
+}

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

@@ -0,0 +1,118 @@
+import { h, Host, } from '@stencil/core';
+import { TableSizes, TableSortDirections } from './types';
+export class TableComponent {
+  constructor() {
+    this.size = TableSizes.EXPAND;
+  }
+  setCellSize() {
+    const allCells = this.host.querySelectorAll('b2b-table-cell');
+    [...allCells].map(cell => cell.setAttribute('size', this.size));
+  }
+  setFixedHeaders() {
+    const isScrollable = this.host.closest('b2b-scrollable-container') !== null;
+    if (isScrollable) {
+      const allHeaders = this.host.querySelectorAll('b2b-table-header');
+      [...allHeaders].map(cell => cell.setAttribute('fixed', 'true'));
+    }
+  }
+  componentDidRender() {
+    this.setCellSize();
+    this.setFixedHeaders();
+  }
+  componentDidLoad() {
+    const tableHeaders = this.host.querySelectorAll('b2b-table-header');
+    const sortedHeaders = Array.from(tableHeaders).filter(header => {
+      return (header.sortDirection !== TableSortDirections.NOT &&
+        header.sortDirection !== undefined);
+    });
+    if (sortedHeaders.length > 1) {
+      console.warn(`<b2b-table> warning: Only one header can be sorted at the time. The others should be defined as 'not-sorted'. This issue was found in this table element:`);
+      console.log(this.host);
+    }
+  }
+  onColumnSelected(event) {
+    if (event.target.nodeName === 'B2B-TABLE-HEADER') {
+      this.b2bSortChange.emit({
+        sortedColumn: event.target.sortId || event.target.textContent.trim(),
+        sortDirection: event.detail,
+      });
+    }
+  }
+  render() {
+    return (h(Host, { class: {
+        ['b2b-table--' + this.size]: true,
+      }, role: "table" }, h("slot", null)));
+  }
+  static get is() { return "b2b-table"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["table.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["table.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "size": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TableSizes",
+          "resolved": "\"equal\" | \"expand\"",
+          "references": {
+            "TableSizes": {
+              "location": "import",
+              "path": "./types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The size of the table. Both will expand to 100% of parent size.\nExpand cells will use as much space as content needs and text will wrap.\nEqual will keep all column sizes proportional to the number of columns."
+        },
+        "attribute": "size",
+        "reflect": false,
+        "defaultValue": "TableSizes.EXPAND"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bSortChange",
+        "name": "b2b-sort-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits whenever the sort direction of any column in the table changes."
+        },
+        "complexType": {
+          "original": "ColumnSortChangeEventDetail",
+          "resolved": "ColumnSortChangeEventDetail",
+          "references": {
+            "ColumnSortChangeEventDetail": {
+              "location": "import",
+              "path": "../../utils/interfaces/interaction.interface"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "b2b-change",
+        "method": "onColumnSelected",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,239 @@
+import { getArgTypes } from '../../docs/config/utils';
+import { html } from 'lit-html';
+import tableDocs from './table.docs.mdx';
+import { ContentAlignment, TableRowgroupTypes, TableSizes } from './types';
+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}">
+        <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}` : ''}
+                >${columnName}</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}"
+              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>
+  `;
+};
+const defaultArgs = {
+  data: sampleData,
+  parentWidth: '600px',
+  firstColumnWidth: 'auto',
+  firstRowHeight: 'auto',
+  size: 'expand',
+  textWrap: false,
+  align: 'left',
+  highlight: true,
+  withDividers: false,
+  color: 'default',
+};
+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 story100ScrollableTable = TemplateScrollable.bind({});
+story100ScrollableTable.args = {
+  parentWidth: '600px',
+  parentHeight: '250px',
+  columnsWidth: '80px',
+  data: longSampleData,
+  size: 'expand',
+  withDividers: true,
+  textWrap: false,
+  align: 'left',
+};
+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 story110Sorting = TemplateSorting.bind({});
+story110Sorting.args = Object.assign(Object.assign({}, defaultArgs), { withDividers: true, size: 'expand', data: userSampleData });
+story110Sorting.storyName = 'Table with Sorting';
+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.',
+};
+argsTableData.parentHeight = {
+  description: 'This is not a component prop. It is the height of the container the table in this example.',
+};
+argsTableData.columnsWidth = {
+  description: 'This is not a component prop. It is an example of a way to handle fixed width for table columns.',
+};
+argsTableData.firstColumnWidth = {
+  description: 'This is not a component prop. It is an example of a way to handle fixed width for a table column.',
+};
+argsTableData.data = {
+  table: { disable: true },
+};
+export default {
+  title: 'Components/Content/Table',
+  argTypes: Object.assign(Object.assign({}, argsTableData), { sortDirection: false }),
+  viewmode: 'docs',
+  parameters: {
+    controls: { expanded: true },
+    docs: {
+      page: tableDocs,
+    },
+    backgrounds: {
+      default: 'docsBackground',
+      values: [{ name: 'docsBackground', value: '#fff' }],
+    },
+  },
+};

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

@@ -0,0 +1,19 @@
+export const TableSizes = {
+  EQUAL: 'equal',
+  EXPAND: 'expand',
+};
+export const TableRowgroupTypes = {
+  HEADER: 'header',
+  BODY: 'body',
+  FOOTER: 'footer',
+};
+export const ContentAlignment = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  CENTER: 'center',
+};
+export const TableSortDirections = {
+  NOT: 'not-sorted',
+  ASC: 'ascending',
+  DESC: 'descending',
+};