@otto-de/b2b-core-components 1.6.1 → 1.8.0

package/dist/collection/components/textarea/textarea.e2e.js

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B-Textarea', () => {
   let page;
   beforeEach(async () => {
@@ -75,9 +75,9 @@ describe('B2B-Textarea', () => {
     expect(value).toEqual('An input w');
   });
   it('should support form building from the shadow DOM', async () => {
-    const form = `<form>
-        <b2b-textarea label="Test"></textarea>
-        <button type="submit">Submit</button>
+    const form = `<form>
+        <b2b-textarea label="Test"></textarea>
+        <button type="submit">Submit</button>
     </form>`;
     page = await newE2EPage();
     await page.setContent(form);

package/dist/collection/components/textarea/textarea.js

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 /** Text Area Component
  * Initial story: https://otto-eg.atlassian.net/browse/B2BDS-96
  */
@@ -36,6 +36,7 @@ export class B2BTextareaComponent {
     this.value = null;
     this.name = undefined;
     this.maxLength = undefined;
+    this.height = undefined;
   }
   connectedCallback() {
     const form = this.hostElement.closest('form');
@@ -47,7 +48,7 @@ export class B2BTextareaComponent {
     return (h(Host, { class: {
         'b2b-textarea': true,
         'b2b-textarea--error': this.invalid && !this.disabled,
-      } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { class: "textarea-input", "aria-labelledby": this.name, style: Boolean(this.resize) && { resize: this.resize }, value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (this.hint !== undefined && !this.invalid) ||
+      } }, this.label && (h("b2b-input-label", { id: this.name, required: this.required }, this.label)), h("textarea", { class: "textarea-input", "aria-labelledby": this.name, style: Object.assign({ height: this.height }, (Boolean(this.resize) && { resize: this.resize })), value: this.value, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autoFocus: this.autofocus, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, maxLength: this.maxLength }), (this.hint !== undefined && !this.invalid) ||
       (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : ('')));
   }
   static get is() { return "b2b-textarea"; }
@@ -174,7 +175,7 @@ export class B2BTextareaComponent {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "| 'unset'\n    | 'none'\n    | 'vertical'\n    | 'horizontal'",
+          "original": "| 'unset'\r\n    | 'none'\r\n    | 'vertical'\r\n    | 'horizontal'",
           "resolved": "\"horizontal\" | \"none\" | \"unset\" | \"vertical\"",
           "references": {}
         },
@@ -272,6 +273,23 @@ export class B2BTextareaComponent {
         },
         "attribute": "max-length",
         "reflect": true
+      },
+      "height": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The height of the text area"
+        },
+        "attribute": "height",
+        "reflect": false
       }
     };
   }
@@ -291,7 +309,8 @@ export class B2BTextareaComponent {
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
@@ -310,7 +329,8 @@ export class B2BTextareaComponent {
           "resolved": "FocusEvent",
           "references": {
             "FocusEvent": {
-              "location": "global"
+              "location": "global",
+              "id": "global::FocusEvent"
             }
           }
         }
@@ -330,7 +350,8 @@ export class B2BTextareaComponent {
           "references": {
             "InputChangeEvent": {
               "location": "import",
-              "path": "../../utils/interfaces/form.interface"
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::InputChangeEvent"
             }
           }
         }

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

@@ -1,18 +1,18 @@
-import { html } from 'lit-html';
-import { getArgTypes } from '../../docs/config/utils';
-import textareaDocs from './textarea.docs.mdx';
-const Template = ({ label, required, placeholder, disabled, value, invalid, hint, error, autofocus, name, resize, }) => {
-  return html `<b2b-textarea
-    label="${label}"
-    required="${required}"
-    placeholder="${placeholder}"
-    disabled="${disabled}"
-    value="${value}"
-    invalid="${invalid}"
-    hint="${hint}"
-    error="${error}"
-    autofocus="${autofocus}"
-    name="${name}"
+import { html } from "lit-html";
+import { getArgTypes } from "../../docs/config/utils";
+const Template = ({ label, required, placeholder, disabled, value, invalid, hint, error, autofocus, name, resize, height, }) => {
+  return html `<b2b-textarea
+    label="${label}"
+    required="${required}"
+    placeholder="${placeholder}"
+    disabled="${disabled}"
+    value="${value}"
+    invalid="${invalid}"
+    hint="${hint}"
+    error="${error}"
+    autofocus="${autofocus}"
+    name="${name}"
+    height="${height}"
     resize="${resize}"></b2b-textarea>`;
 };
 const defaultArgs = {
@@ -49,14 +49,12 @@ story055Required.storyName = 'Required';
 export const story060AllArgs = Template.bind({});
 story060AllArgs.args = Object.assign(Object.assign({}, defaultArgs), { label: 'Textarea with all arguments', required: true, placeholder: 'All arguments placeholder', value: 'an initial value', hint: 'A textarea hint', error: 'A textarea error', name: 'textarea-example', disabled: false, autofocus: false });
 story060AllArgs.storyName = 'All Arguments';
+export const story070Height = Template.bind({});
+story070Height.args = Object.assign(Object.assign({}, defaultArgs), { height: '100px' });
+story070Height.storyName = 'With Height';
 const textareaArgs = getArgTypes('b2b-textarea');
 export default {
   title: 'Components/Form/Textarea',
   argTypes: textareaArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: textareaDocs,
-    },
-  },
 };

package/dist/collection/components/toggle-button/toggle-button.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/toggle-button/toggle-button.e2e.js

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('b2b-toggle-button', () => {
   let page;
   beforeEach(async () => {

package/dist/collection/components/toggle-button/toggle-button.js

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class B2bToggleButtonComponent {
   constructor() {
     this.onClick = (ev) => {
@@ -163,7 +163,8 @@ export class B2bToggleButtonComponent {
           "references": {
             "ToggleButtonEventDetail": {
               "location": "import",
-              "path": "../../utils/interfaces/form.interface"
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::ToggleButtonEventDetail"
             }
           }
         }

package/dist/collection/components/toggle-group/toggle-group.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/toggle-group/toggle-group.e2e.js

@@ -1,11 +1,11 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('b2b-toggle-group', () => {
   let page;
   beforeEach(async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-toggle-group name="toggle-group-1">
-          <b2b-toggle-button name="toggle-group-1" value="1" label="One"></b2b-toggle-button>
-          <b2b-toggle-button name="toggle-group-1" value="2" label="Two"></b2b-toggle-button>
+    await page.setContent(`<b2b-toggle-group name="toggle-group-1">
+          <b2b-toggle-button name="toggle-group-1" value="1" label="One"></b2b-toggle-button>
+          <b2b-toggle-button name="toggle-group-1" value="2" label="Two"></b2b-toggle-button>
         </b2b-toggle-group>`);
   });
   it('should render the toggle group', async () => {
@@ -54,9 +54,9 @@ describe('b2b-toggle-group', () => {
   });
   it('should not select first element if any element is pre-selected ', async () => {
     page = await newE2EPage();
-    await page.setContent(`<b2b-toggle-group name="toggle-group-1">
-          <b2b-toggle-button name="toggle-group-1" value="1" label="One"></b2b-toggle-button>
-          <b2b-toggle-button checked name="toggle-group-1" value="2" label="Two"></b2b-toggle-button>
+    await page.setContent(`<b2b-toggle-group name="toggle-group-1">
+          <b2b-toggle-button name="toggle-group-1" value="1" label="One"></b2b-toggle-button>
+          <b2b-toggle-button checked name="toggle-group-1" value="2" label="Two"></b2b-toggle-button>
         </b2b-toggle-group>`);
     const firstButton = await page.find('b2b-toggle-button');
     const isSelected = await firstButton.getProperty('checked');

package/dist/collection/components/toggle-group/toggle-group.js

@@ -1,4 +1,4 @@
-import { h, Host, } from '@stencil/core';
+import { h, Host, } from "@stencil/core";
 export class B2BToggleGroup {
   constructor() {
     this.toggleAllDisabled = () => {
@@ -123,7 +123,8 @@ export class B2BToggleGroup {
           "references": {
             "ToggleButtonEventDetail": {
               "location": "import",
-              "path": "../../utils/interfaces/form.interface"
+              "path": "../../utils/interfaces/form.interface",
+              "id": "src/utils/interfaces/form.interface.d.ts::ToggleButtonEventDetail"
             }
           }
         }

package/dist/collection/components/toggle-group/toggle-group.stories.js

@@ -1,27 +1,26 @@
-import { getArgTypes } from '../../docs/config/utils';
-import { html } from 'lit-html';
-import toggleDocs from './toggle-group.docs.mdx';
+import { getArgTypes } from "../../docs/config/utils";
+import { html } from "lit-html";
 const Template = ({ name, disabled, singleDisabled }) => {
-  return html `
-    <b2b-toggle-group name="${name}" disabled="${disabled}">
-      <b2b-toggle-button
-        name="${name}"
-        value="abcd"
-        label="ABCD"></b2b-toggle-button>
-      <b2b-toggle-button
-        name="${name}"
-        value="efgh"
-        label="EFGH"></b2b-toggle-button>
-      <b2b-toggle-button
-        name="${name}"
-        value="ijkl"
-        label="IJKL"></b2b-toggle-button>
-      <b2b-toggle-button
-        name="${name}"
-        value="mnop"
-        disabled="${singleDisabled}"
-        label="MNOP"></b2b-toggle-button>
-    </b2b-toggle-group>
+  return html `
+    <b2b-toggle-group name="${name}" disabled="${disabled}">
+      <b2b-toggle-button
+        name="${name}"
+        value="abcd"
+        label="ABCD"></b2b-toggle-button>
+      <b2b-toggle-button
+        name="${name}"
+        value="efgh"
+        label="EFGH"></b2b-toggle-button>
+      <b2b-toggle-button
+        name="${name}"
+        value="ijkl"
+        label="IJKL"></b2b-toggle-button>
+      <b2b-toggle-button
+        name="${name}"
+        value="mnop"
+        disabled="${singleDisabled}"
+        label="MNOP"></b2b-toggle-button>
+    </b2b-toggle-group>
   `;
 };
 const defaultArgs = {
@@ -43,9 +42,4 @@ export default {
   title: 'Components/Interaction/Toggle Button Group',
   argTypes: toggleGroupArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: toggleDocs,
-    },
-  },
 };

package/dist/collection/components/tooltip/tooltip.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

package/dist/collection/components/tooltip/tooltip.e2e.js

@@ -1,4 +1,4 @@
-import { newE2EPage } from '@stencil/core/testing';
+import { newE2EPage } from "@stencil/core/testing";
 describe('B2B Tooltip', () => {
   const expectToBeVisibleAfterTransition = async (page, tooltipDiv) => {
     await page.$eval('b2b-tooltip', el => {

package/dist/collection/components/tooltip/tooltip.js

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { h, Host } from "@stencil/core";
 /**
  * The tooltip can display additional information, and will be visible based on
  * a specific trigger.

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

@@ -1,8 +1,7 @@
-import { html } from 'lit-html';
-import tooltipDocs from './tooltip.docs.mdx';
-import { getArgTypes, hideAllControls } from '../../docs/config/utils';
-import { useArgs } from '@storybook/client-api';
-import dedent from 'ts-dedent';
+import { html } from "lit-html";
+import { getArgTypes, hideAllControls } from "../../docs/config/utils";
+import { useArgs } from "@storybook/preview-api";
+import dedent from "ts-dedent";
 const tooltipArgs = getArgTypes('b2b-tooltip');
 const Template = ({ position, trigger, content, triggerMarkup, buttons, opened, }) => {
   const markup = triggerMarkup ? triggerMarkup : 'trigger.';
@@ -15,21 +14,21 @@ const Template = ({ position, trigger, content, triggerMarkup, buttons, opened,
     updateArgs({ opened: false });
   };
   const buttonMarkup = buttons
-    ? html `<b2b-button @click=${showToolTip} variant="primary"
-          >Show Tooltip</b2b-button
+    ? html `<b2b-button @click=${showToolTip} variant="primary"
+          >Show Tooltip</b2b-button
         ><b2b-button @click=${hideToolTip}>Hide Tooltip</b2b-button>`
     : null;
-  return html `${filler}<b2b-paragraph>
-      I am some text with a tooltip
-      <b2b-tooltip
-        position="${position}"
-        trigger="${trigger}"
-        content="${content}"
-        opened="${opened}"
-        data-testid="trigger"
-        >${markup}</b2b-tooltip
-      >
-    </b2b-paragraph>
+  return html `${filler}<b2b-paragraph>
+      I am some text with a tooltip
+      <b2b-tooltip
+        position="${position}"
+        trigger="${trigger}"
+        content="${content}"
+        opened="${opened}"
+        data-testid="trigger"
+        >${markup}</b2b-tooltip
+      >
+    </b2b-paragraph>
     ${buttonMarkup}`;
 };
 const defaultArgs = {
@@ -66,12 +65,12 @@ export const story080Right = Template.bind({});
 story080Right.args = Object.assign(Object.assign({}, defaultArgs), { position: 'top', opened: true, content: 'Topping halvah cake sugar plum marzipan jelly marshmallow lemon drops. Bonbon brownie powder sesame snaps fruitcake caramels toffee. Brownie pie cotton candy sesame snaps wafer sugar plum candy marzipan oat cake.' });
 story080Right.storyName = 'Tooltip with long text';
 const BlockTooltipTemplate = ({}) => {
-  return html `<b2b-tooltip
-    content="I am a tooltip"
-    position="right"
-    opened
-    style="display: inline-block"
-    ><b2b-input style="width: 300px"></b2b-input>
+  return html `<b2b-tooltip
+    content="I am a tooltip"
+    position="right"
+    opened
+    style="display: inline-block"
+    ><b2b-input style="width: 300px"></b2b-input>
   </b2b-tooltip> `;
 };
 export const story090BlockElement = BlockTooltipTemplate.bind({});
@@ -80,9 +79,9 @@ story090BlockElement.parameters = {
   controls: { hideNoControlsWarning: true },
   docs: {
     source: {
-      code: dedent `
-      <b2b-tooltip style="display: inline-block" content="I am a tooltip" position="right">
-        <b2b-input style="width: 300px"></b2b-input>
+      code: dedent `
+      <b2b-tooltip style="display: inline-block" content="I am a tooltip" position="right">
+        <b2b-input style="width: 300px"></b2b-input>
       </b2b-tooltip>`,
     },
   },
@@ -92,9 +91,4 @@ export default {
   title: 'Components/Interaction/Tooltip',
   argTypes: Object.assign(Object.assign({}, tooltipArgs), { triggerMarkup: { table: { disable: true } }, buttons: { table: { disable: true } } }),
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: tooltipDocs,
-    },
-  },
 };

package/dist/collection/components/wizard/wizard-step.js

@@ -1,5 +1,5 @@
-import { h, Host } from '@stencil/core';
-import { WizardStatus } from '../../utils/types/wizard.types';
+import { h, Host } from "@stencil/core";
+import { WizardStatus } from "../../utils/types/wizard.types";
 export class WizardStepComponent {
   constructor() {
     this.state = 'pending';
@@ -35,7 +35,8 @@ export class WizardStepComponent {
           "references": {
             "WizardStatus": {
               "location": "import",
-              "path": "../../utils/types/wizard.types"
+              "path": "../../utils/types/wizard.types",
+              "id": "src/utils/types/wizard.types.ts::WizardStatus"
             }
           }
         },
@@ -58,7 +59,8 @@ export class WizardStepComponent {
           "references": {
             "WizardSteps": {
               "location": "import",
-              "path": "../../utils/types/wizard.types"
+              "path": "../../utils/types/wizard.types",
+              "id": "src/utils/types/wizard.types.ts::WizardSteps"
             }
           }
         },
@@ -84,7 +86,7 @@ export class WizardStepComponent {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Defaults to true. It will show a checkmark icon when a step is completed.\nSet as false to show the step number"
+          "text": "Defaults to true. It will show a checkmark icon when a step is completed.\r\nSet as false to show the step number"
         },
         "attribute": "check-icon",
         "reflect": false,

package/dist/collection/components/wizard/wizard.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 22 Aug 2023 12:55:37 GMT
+ * Generated on Mon, 13 Nov 2023 12:54:56 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */