@otto-de/b2b-core-components 1.2.0 → 1.3.2

package/dist/collection/components/search/search.js

@@ -13,10 +13,11 @@ export class SearchComponent {
     this.placeholder = undefined;
     this.optionsList = [];
     this.value = null;
+    this.disabled = false;
     this.closed = undefined;
   }
   render() {
-    return (h(Host, null, h("b2b-input-group", null, h("b2b-input-list", { slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", null)), h("b2b-button", { slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon", { icon: "b2b_icon-search" })))));
+    return (h(Host, null, h("b2b-input-group", { disabled: this.disabled }, h("b2b-input-list", { slot: "start", value: this.value, placeholder: this.placeholder, optionsList: this.optionsList, "onb2b-input": this.onInput, "onb2b-option-selected": this.onOptionSelected }, h("slot", null)), h("b2b-button", { slot: "end", variant: "primary", onClick: this.onSearchClicked }, h("b2b-icon", { icon: "b2b_icon-search" })))));
   }
   static get is() { return "b2b-search"; }
   static get encapsulation() { return "shadow"; }
@@ -72,6 +73,24 @@ export class SearchComponent {
         "attribute": "value",
         "reflect": true,
         "defaultValue": "null"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Whether or not the input is disabled. Default is false."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -4,7 +4,7 @@ import { useArgs } from '@storybook/client-api';
 import dedent from 'ts-dedent';
 import searchDocs from './search.docs.mdx';
 import fruits from './stories.data.json';
-const Template = ({ placeholder, optionsList }) => {
+const Template = ({ placeholder, optionsList, disabled }) => {
   const [_, updateArgs] = useArgs();
   const onInput = event => {
     var _a;
@@ -26,6 +26,7 @@ const Template = ({ placeholder, optionsList }) => {
     <b2b-search
       contenteditable
       data-testid="search-element"
+      disabled=${disabled}
       placeholder="${placeholder}"
       .optionsList=${optionsList}
       @b2b-input=${onInput}></b2b-search>
@@ -34,6 +35,7 @@ const Template = ({ placeholder, optionsList }) => {
 const defaultArgs = {
   placeholder: 'Search here',
   optionsList: [],
+  disabled: false,
 };
 export const story010Search = Template.bind({});
 story010Search.args = Object.assign({}, defaultArgs);
@@ -52,6 +54,12 @@ story010Search.parameters = {
     },
   },
 };
+export const story020SearchDisabled = Template.bind({});
+story020SearchDisabled.storyName = 'Disabled';
+story020SearchDisabled.args = {
+  placeholder: 'Input List Component',
+  disabled: true,
+};
 const CustomSearchTemplate = ({ placeholder, optionsList }) => {
   return html `<div style="width: 500px; height: 130px;">
     <b2b-input-group>
@@ -69,9 +77,9 @@ const CustomSearchTemplate = ({ placeholder, optionsList }) => {
     </b2b-input-group>
   </div>`;
 };
-export const story020CustomSearch = CustomSearchTemplate.bind({});
-story020CustomSearch.storyName = 'Custom Search';
-story020CustomSearch.args = {
+export const story030CustomSearch = CustomSearchTemplate.bind({});
+story030CustomSearch.storyName = 'Custom Search';
+story030CustomSearch.args = {
   placeholder: 'Input List Component',
   optionsList: ['result A', 'result B'],
 };

package/dist/collection/components/separator/separator.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/spinner/spinner.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/tab/tab.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/tab-panel/tab-panel.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -63,7 +63,7 @@ export class TableCellComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Weather text should wrap or truncate.\nIt will only truncate when table size is equal\n*"
+          "text": "Whether text should wrap or truncate.\nIt will only truncate when table size is equal\n*"
         },
         "attribute": "text-wrap",
         "reflect": true,
@@ -137,12 +137,12 @@ export class TableCellComponent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "B2BTableColourOptions",
+          "original": "TableColourOptions",
           "resolved": "\"default\" | \"group\" | \"selected\"",
           "references": {
-            "B2BTableColourOptions": {
+            "TableColourOptions": {
               "location": "import",
-              "path": "../table-row/table-row"
+              "path": "../types"
             }
           }
         },

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -218,33 +218,47 @@
   border-bottom: 1px solid var(--b2b-color-grey-200);
   display: table-row;
 }
-:host(.b2b-table-row-color-default) {
+:host .b2b-table-row__accordion-icon {
+  transform: rotate(0);
+  transition: transform 0.2s ease-in-out;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+}
+:host .b2b-table-row__accordion-icon--open {
+  transform: rotate(90deg);
+  transition: transform 0.2s ease-in-out;
+}
+:host(.b2b-table-row--color-default) {
   background-color: inherit;
 }
-:host(.b2b-table-row-color-selected) {
+:host(.b2b-table-row--color-selected) {
   background-color: var(--b2b-color-table-selected-default);
 }
-:host(.b2b-table-row-color-group) {
+:host(.b2b-table-row--color-group) {
   background-color: var(--b2b-color-table-expand-default);
 }
-:host(.b2b-table-row-color-default:hover) {
+:host(.b2b-table-row--color-default:hover) {
   background-color: inherit;
 }
-:host(.b2b-table-row-highlight:hover) {
+:host(.b2b-table-row__accordion-parent) {
+  background-color: var(--b2b-color-grey-50);
+}
+:host(.b2b-table-row--highlight:hover) {
   background-color: var(--b2b-color-table-hover);
 }
-:host(.b2b-table-row-highlight:hover) ::slotted(*) {
+:host(.b2b-table-row--highlight:hover) ::slotted(*) {
   --b2b-table-cell-text-expand-bg: var(--b2b-color-table-hover);
 }
-:host(.b2b-table-row-color-selected:hover) {
+:host(.b2b-table-row--color-selected:hover) {
   background-color: var(--b2b-color-red-100);
 }
-:host(.b2b-table-row-color-selected:hover) ::slotted(*) {
+:host(.b2b-table-row--color-selected:hover) ::slotted(*) {
   --b2b-table-cell-text-expand-bg: var(--b2b-color-red-100);
 }
-:host(.b2b-table-row-color-group:hover) {
+:host(.b2b-table-row--color-group:hover) {
   background-color: var(--b2b-color-table-expand-hover);
 }
-:host(.b2b-table-row-color-group:hover) ::slotted(*) {
+:host(.b2b-table-row--color-group:hover) ::slotted(*) {
   --b2b-table-cell-text-expand-bg: var(--b2b-color-table-expand-hover);
 }

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

@@ -1,15 +1,31 @@
-import { h, Host } from '@stencil/core';
+import { h, Host, } from '@stencil/core';
+import { TableRowTypes } from '../types';
 export class TableRowComponent {
   constructor() {
+    this.toggleOpen = () => {
+      this.isOpen = !this.isOpen;
+      this.b2bOpen.emit(this.isOpen);
+    };
     this.highlight = true;
     this.color = 'default';
+    this.type = undefined;
+    this.isOpen = false;
+  }
+  /** Will toggle the accordion opened or closed. */
+  async toggleAccordion(isOpen) {
+    this.isOpen = isOpen;
+    this.b2bOpen.emit(isOpen);
   }
   render() {
     return (h(Host, { class: {
         'b2b-table-row': true,
-        ['b2b-table-row-highlight']: this.highlight,
-        [`b2b-table-row-color-${this.color}`]: true,
-      }, role: "row" }, h("slot", null)));
+        'b2b-table-row__accordion-parent': this.type === TableRowTypes.PARENT,
+        ['b2b-table-row--highlight']: this.highlight,
+        [`b2b-table-row--color-${this.color}`]: true,
+      }, role: "row" }, this.type === TableRowTypes.PARENT && (h("b2b-table-cell", null, h("button", { onClick: this.toggleOpen, class: {
+        'b2b-table-row__accordion-icon': true,
+        'b2b-table-row__accordion-icon--open': this.isOpen,
+      } }, h("b2b-icon", { icon: "b2b_icon-arrow-right", clickable: true })))), this.type === TableRowTypes.CHILD && h("b2b-table-cell", null), this.type === TableRowTypes.HEADER && (h("b2b-table-header", null)), h("slot", null)));
   }
   static get is() { return "b2b-table-row"; }
   static get encapsulation() { return "shadow"; }
@@ -47,12 +63,12 @@ export class TableRowComponent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "B2BTableColourOptions",
+          "original": "TableColourOptions",
           "resolved": "\"default\" | \"group\" | \"selected\"",
           "references": {
-            "B2BTableColourOptions": {
-              "location": "local",
-              "path": "/home/runner/work/b2b-design-system/b2b-design-system/packages/core-components/src/components/table/table-row/table-row.tsx"
+            "TableColourOptions": {
+              "location": "import",
+              "path": "../types"
             }
           }
         },
@@ -65,6 +81,74 @@ export class TableRowComponent {
         "attribute": "color",
         "reflect": false,
         "defaultValue": "'default'"
+      },
+      "type": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "TableRowTypes",
+          "resolved": "\"child\" | \"header\" | \"parent\"",
+          "references": {
+            "TableRowTypes": {
+              "location": "import",
+              "path": "../types"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Determined by the parent rowgroup for accordion rowgroups. Do not set manually."
+        },
+        "attribute": "type",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isOpen": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bOpen",
+        "name": "b2b-open",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits if the parent rowgroup is an accordion and the row is a top-level accordion row. Determines if the child rows will be shown."
+        },
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        }
+      }];
+  }
+  static get methods() {
+    return {
+      "toggleAccordion": {
+        "complexType": {
+          "signature": "(isOpen: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Will toggle the accordion opened or closed.",
+          "tags": []
+        }
       }
     };
   }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -2,14 +2,68 @@ import { h, Host } from '@stencil/core';
 import { TableRowgroupTypes } from '../types';
 export class TableRowgroupComponent {
   constructor() {
+    this.getFirstRow = () => {
+      const firstRow = this.host.querySelector('b2b-table-row');
+      if (firstRow != null) {
+        return firstRow;
+      }
+    };
+    this.getRemainingRows = () => {
+      const children = Array.from(this.host.querySelectorAll('b2b-table-row'));
+      return Array.from(children.slice(1));
+    };
+    this.addAccordionControlColumn = () => {
+      const children = this.getRemainingRows();
+      children &&
+        children.forEach(child => {
+          child.setAttribute('type', 'child');
+        });
+      const firstRow = this.getFirstRow();
+      if (this.type === 'header') {
+        firstRow && firstRow.setAttribute('type', 'header');
+      }
+      else {
+        firstRow && firstRow.setAttribute('type', 'parent');
+      }
+    };
+    this.toggleInitialVisibility = () => {
+      const firstRow = this.getFirstRow();
+      (async () => {
+        firstRow && (await firstRow.toggleAccordion(this.opened));
+      })();
+    };
+    this.toggleChildRowVisibility = (isOpen) => {
+      const children = this.getRemainingRows();
+      if (isOpen) {
+        children.forEach(child => {
+          child.style.visibility = 'visible';
+        });
+      }
+      else {
+        children.forEach(child => {
+          child.style.visibility = 'collapse';
+        });
+      }
+    };
     this.type = TableRowgroupTypes.HEADER;
+    this.accordion = false;
+    this.opened = false;
+  }
+  handleOpenChange(event) {
+    this.toggleChildRowVisibility(event.detail);
   }
   makeHeaderRowNotSelectable() {
-    const firstRow = this.host.querySelector('b2b-table-row');
-    if (firstRow != null && this.type === TableRowgroupTypes.HEADER) {
+    const firstRow = this.getFirstRow();
+    if (this.type === TableRowgroupTypes.HEADER) {
       firstRow.setAttribute('highlight', 'false');
     }
   }
+  componentWillLoad() {
+    if (this.accordion) {
+      this.addAccordionControlColumn();
+      this.toggleInitialVisibility();
+    }
+  }
   componentDidRender() {
     this.makeHeaderRowNotSelectable();
   }
@@ -54,8 +108,53 @@ export class TableRowgroupComponent {
         "attribute": "type",
         "reflect": false,
         "defaultValue": "TableRowgroupTypes.HEADER"
+      },
+      "accordion": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Renders the rowgroup as an accordion. Both header and body must have accordion set to true.\nOne table can contain multiple rowgroups of type body, each of which represents an accordion row with children."
+        },
+        "attribute": "accordion",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "opened": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Only use when accordion property is true.\nWill render the accordion opened if set to true. By default, is false."
+        },
+        "attribute": "opened",
+        "reflect": true,
+        "defaultValue": "false"
       }
     };
   }
   static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "b2b-open",
+        "method": "handleOpenChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -123,7 +123,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Thu, 25 May 2023 12:11:57 GMT
+ * Generated on Wed, 07 Jun 2023 20:04:52 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -191,6 +191,56 @@ const TemplateSorting = ({ data, firstColumnWidth, size, textWrap, align, highli
 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, }) => {
+  return html `
+    <div>
+      <b2b-table size="${size}">
+        <b2b-table-rowgroup type="header" accordion>
+          <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>
+          ${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-rowgroup type="body" accordion opened>
+          ${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 story120Accordion = TemplateAccordion.bind({});
+story120Accordion.args = Object.assign(Object.assign({}, defaultArgs), { data: sampleData });
+story120Accordion.storyName = 'Accordion Table';
 const tableArgs = getArgTypes('b2b-table');
 const rowGroupArgs = getArgTypes('b2b-table-rowgroup');
 const rowArgs = getArgTypes('b2b-table-row');
@@ -224,7 +274,7 @@ argsTableData.data = {
 };
 export default {
   title: 'Components/Content/Table',
-  argTypes: Object.assign(Object.assign({}, argsTableData), { sortDirection: false }),
+  argTypes: Object.assign(Object.assign({}, argsTableData), { sortDirection: false, type: false }),
   viewmode: 'docs',
   parameters: {
     controls: { expanded: true },

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

@@ -17,3 +17,8 @@ export const TableSortDirections = {
   ASC: 'ascending',
   DESC: 'descending',
 };
+export const TableRowTypes = {
+  PARENT: 'parent',
+  CHILD: 'child',
+  HEADER: 'header'
+};