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

package/dist/collection/components/card/card.js

@@ -0,0 +1,138 @@
+import { h, Host, } from '@stencil/core';
+export class CardComponent {
+  constructor() {
+    this.disabled = false;
+    this.href = '';
+    this.target = 'blank';
+  }
+  onClick() {
+    this.b2bChange.emit();
+  }
+  onKeyDown(event) {
+    if (event.key === 'Enter') {
+      this.b2bChange.emit();
+    }
+  }
+  getTabIndex() {
+    // not focusable
+    if (this.disabled)
+      return -1;
+    // <a> element has native focus so using 0 makes it focusable twice
+    // returning an empty string lets user agent decide if is focusable
+    else if (this.href != '')
+      return '';
+    // makes card focusable without <a> element
+    else
+      return 0;
+  }
+  render() {
+    return (h(Host, { tabIndex: this.getTabIndex(), "aria-disabled": this.disabled ? 'true' : null, class: {
+        'b2b-card': true,
+        'b2b-card--disabled': this.disabled,
+      } }, this.href != '' && h("a", { href: this.href, target: `_${this.target}` }), this.disabled && h("div", { class: "b2b-card--disabled-overlay" }), h("slot", null)));
+  }
+  static get is() { return "b2b-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["card.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["card.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Disables the card. Per default, it is false"
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "An optional href in case the card is used to redirect on click."
+        },
+        "attribute": "href",
+        "reflect": false,
+        "defaultValue": "''"
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'blank' | 'self'",
+          "resolved": "\"blank\" | \"self\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The target of the card if used with an href. Blank per default."
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "'blank'"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bChange",
+        "name": "b2b-selected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits whenever the card is clicked on or enter is pressed while the card has focus."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "onClick",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "keydown",
+        "method": "onKeyDown",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,41 @@
+import { html } from 'lit-html';
+import cardDocs from './card.docs.mdx';
+import { getArgTypes } from '../../docs/config/utils';
+const Template = ({ disabled, href, target }) => {
+  return html `<b2b-card disabled="${disabled}" href=${href} target="${target}">
+    <b2b-headline size="100">An Interactive Card</b2b-headline>
+    <b2b-paragraph
+      >You can hover over me or press tab on your keyboard to see me pop out. I
+      fill up to 100% of my parent element, so you can use me in a
+      grid.</b2b-paragraph
+    >
+  </b2b-card>`;
+};
+const defaultArgs = {
+  disabled: false,
+  href: '',
+  target: 'blank',
+};
+export const story010Card = Template.bind({});
+story010Card.args = Object.assign({}, defaultArgs);
+story010Card.storyName = 'Default Card';
+export const story020DisabledCard = Template.bind({});
+story020DisabledCard.args = Object.assign(Object.assign({}, defaultArgs), { disabled: true });
+story020DisabledCard.storyName = 'Disabled';
+export const story030LinkCard = Template.bind({});
+story030LinkCard.args = Object.assign(Object.assign({}, defaultArgs), { href: 'https://www.otto.de' });
+story030LinkCard.storyName = 'Card with Link';
+const controls = {
+  href: 'string',
+};
+const cardArgs = getArgTypes('b2b-card', controls);
+export default {
+  title: 'Components/Interaction/Card',
+  argTypes: Object.assign({}, cardArgs),
+  viewMode: 'docs',
+  parameters: {
+    docs: {
+      page: cardDocs,
+    },
+  },
+};

package/dist/collection/components/checkbox/checkbox.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/checkbox-group/checkbox-group.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/dropdown/dropdown.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/headline/headline.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/icon/icon.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 */
@@ -224,6 +224,9 @@
   line-height: var(--b2b-icon-line-height);
   cursor: var(--b2b-icon-cursor);
 }
+:host .b2b-icon--clickable {
+  cursor: pointer;
+}
 :host .b2b-icon.icon-50 {
   width: var(--b2b-size-40);
   height: var(--b2b-size-40);

package/dist/collection/components/icon/icon.js

@@ -9,6 +9,7 @@ export class B2bIcon {
     this.icon = undefined;
     this.color = 'inherit';
     this.size = '100';
+    this.clickable = false;
     this.pathData = null;
   }
   connectedCallback() {
@@ -21,6 +22,7 @@ export class B2bIcon {
         'b2b-icon': true,
         [`icon-${this.size}`]: true,
         [this.color]: true,
+        'b2b-icon--clickable': this.clickable,
       }, innerHTML: this.pathData })));
   }
   loadIconPathData() {
@@ -113,6 +115,24 @@ export class B2bIcon {
         "attribute": "size",
         "reflect": false,
         "defaultValue": "'100'"
+      },
+      "clickable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Will display a pointer cursor when hovering the icon"
+        },
+        "attribute": "clickable",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

package/dist/collection/components/input/input.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/input-group/input-group.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/input-group/input-group.stories.js

@@ -3,26 +3,26 @@ import inputGroupDocs from './input-group.docs.mdx';
 import { getArgTypes } from '../../docs/config/utils';
 const Template = ({ invalid, disabled, error, hint, additionalSlot, }) => {
   return additionalSlot
-    ? html `<div style="width: 480px">
+    ? html ` <div style="width: 380px">
         <b2b-input-group
           invalid="${invalid}"
           disabled="${disabled}"
           error="${error}"
           hint="${hint}">
           <b2b-input slot="start" label="Search Term"></b2b-input>
-          <b2b-dropdown>
+          <b2b-dropdown style="width: 90px;">
             <option value="one">€</option>
             <option value="two">$</option>
           </b2b-dropdown>
-          <b2b-button slot="end" variant="primary"
-            ><b2b-icon icon="b2b_icon-search"></b2b-icon
-          ></b2b-button>
+          <b2b-button slot="end" variant="primary">
+            <b2b-icon icon="b2b_icon-search"></b2b-icon>
+          </b2b-button>
         </b2b-input-group>
       </div>`
-    : html `<div style="width: 480px">
+    : html `<div style="width: 280px">
         <b2b-input-group invalid="${invalid}" disabled="${disabled}" error="${error}" hint="${hint}">
           <b2b-input slot="start" label="Search Term"></b2b-input>
-          <b2b-dropdown slot="end">
+          <b2b-dropdown slot="end" style="width: fit-content;">
             <option value="one">€</option>
             <option value="two">$</option>
           </b2b-dropdown>

package/dist/collection/components/input-list/input-list.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/input-list/input-list.js

@@ -83,6 +83,7 @@ export class InputListComponent {
     this.placeholder = undefined;
     this.optionsList = [];
     this.value = null;
+    this.disabled = false;
     this.hasOptionList = this.optionsList.length > 0;
     this.isElementFocused = false;
   }
@@ -146,7 +147,7 @@ export class InputListComponent {
           this.isElementFocused &&
           Boolean(this.value),
         [groupOrderClass]: true,
-      } }, h("b2b-input", { type: "text", label: this.label, value: this.value, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, Boolean(this.value) && (h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
+      } }, h("b2b-input", { type: "text", label: this.label, value: this.value, disabled: this.disabled, "onb2b-input": this.handleInput, placeholder: this.placeholder, required: this.required }, Boolean(this.value) && (h("b2b-icon", { icon: "b2b_icon-close", "aria-label": "reset", slot: "end", tabIndex: 0, onMouseDown: this.resetInput, onKeyDown: this.resetInput }))), this.isElementFocused && Boolean(this.value) ? (h("div", { class: "b2b-input-list__options-container" }, this.hasOptionList ? (h("div", { class: "b2b-input-list__options", role: "listbox" }, this.optionsList.map(option => (h("b2b-input-list-option", { option: option, tabIndex: -1, "onb2b-option-selected": this.onOptionSelected }))))) : (h("slot", null)))) : null)));
   }
   static get is() { return "b2b-input-list"; }
   static get encapsulation() { return "shadow"; }
@@ -247,6 +248,24 @@ export class InputListComponent {
         "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"
       }
     };
   }
@@ -265,7 +284,7 @@ export class InputListComponent {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emits when the user clicks the clear button."
         },
         "complexType": {
           "original": "InputClear",

package/dist/collection/components/input-list/input-list.stories.js

@@ -2,13 +2,14 @@ import { getArgTypes } from '../../docs/config/utils';
 import { html } from 'lit-html';
 import inputListDocs from './input-list.docs.mdx';
 import { userEvent } from '@storybook/testing-library';
-const Template = ({ label, required, placeholder, optionsList, customMarkup, }) => {
+const Template = ({ label, required, placeholder, optionsList, customMarkup, disabled, }) => {
   return html `<div style="height: 130px; width: 300px">
     <b2b-input-list
       data-testid="element"
       label="${label}"
       required="${required}"
       placeholder="${placeholder}"
+      disabled="${disabled}"
       .optionsList=${optionsList}
       >${customMarkup}</b2b-input-list
     >
@@ -19,6 +20,7 @@ const defaultArgs = {
   required: false,
   placeholder: 'Search here',
   optionsList: ['option1', 'option2', 'option3'],
+  disabled: false,
 };
 export const story010InputList = Template.bind({});
 story010InputList.args = Object.assign({}, defaultArgs);
@@ -26,6 +28,9 @@ story010InputList.storyName = 'Input List';
 export const story020InputListFocused = Template.bind({});
 story020InputListFocused.args = Object.assign({}, defaultArgs);
 story020InputListFocused.storyName = 'Focused';
+export const story025InputListDisabled = Template.bind({});
+story025InputListDisabled.args = Object.assign(Object.assign({}, defaultArgs), { disabled: true });
+story025InputListDisabled.storyName = 'Disabled';
 export const story030CustomList = Template.bind({});
 const list = html `<ul>
   <li>Option 1</li>

package/dist/collection/components/label/label.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/modal/modal.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 */
@@ -225,7 +225,7 @@
   left: 0;
   bottom: 0;
   width: 100%;
-  z-index: 100;
+  z-index: 1000;
   display: none;
   position: fixed;
   background-color: var(--b2b-color-background-overlay-transparent-80);
@@ -265,9 +265,14 @@
   background: transparent;
   padding: 0;
   border: none;
+  /* this is a workaround to force purgecss to include the overwrites of the variable --b2b-icon-cursor */
 }
-:host .b2b-modal-dialog--close .b2b-icon {
+:host .b2b-modal-dialog--close b2b-icon {
   transition: all 0.3s ease;
+  --b2b-icon-cursor: pointer;
+}
+:host .b2b-modal-dialog--close .purge-css-include-variables {
+  cursor: var(--b2b-icon-cursor);
 }
 :host .b2b-modal-dialog--footer {
   display: flex;

package/dist/collection/components/pagination/pagination.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/paragraph/paragraph.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/radio/radio.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/radio-group/radio-group.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/required-separator/required-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/scrollable-container/scrollable-container.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 */