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

package/dist/collection/components/breadcrumb/breadcrumb.js

@@ -0,0 +1,66 @@
+import { Host, h, } from '@stencil/core';
+export class B2bBreadCrumbComponent {
+  constructor() {
+    this.getBreadcrumbItems = () => {
+      return Array.from(this.host.querySelectorAll('b2b-breadcrumb-item'));
+    };
+    this.updateActiveItem = (newItem) => {
+      this.getBreadcrumbItems()
+        .filter(x => x.value != newItem.value)
+        .forEach(x => (x.active = false));
+    };
+  }
+  onSelectedChange(event) {
+    const item = event.target;
+    this.updateActiveItem(item);
+    this.b2bSelected.emit({ value: item.value });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "b2b-breadcrumb-nav" }, h("slot", null))));
+  }
+  static get is() { return "b2b-breadcrumb"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["breadcrumb.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["breadcrumb.css"]
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bSelected",
+        "name": "b2b-selected",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits the value of the currently selected item whenever an item is selected."
+        },
+        "complexType": {
+          "original": "BreadCrumbChangeEventDetail",
+          "resolved": "BreadCrumbChangeEventDetail<any>",
+          "references": {
+            "BreadCrumbChangeEventDetail": {
+              "location": "import",
+              "path": "../../utils/interfaces/interaction.interface"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+  static get listeners() {
+    return [{
+        "name": "b2b-change",
+        "method": "onSelectedChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,22 @@
+import { html } from 'lit-html';
+import { getArgTypes } from '../../docs/config/utils';
+const Template = ({ href, active }) => {
+  return html ` <b2b-breadcrumb>
+    <b2b-breadcrumb-item href="${href}">Start</b2b-breadcrumb-item>
+    <b2b-breadcrumb-item>Weiter</b2b-breadcrumb-item>
+    <b2b-breadcrumb-item active="${active}">Ende</b2b-breadcrumb-item>
+  </b2b-breadcrumb>`;
+};
+const defaultArgs = {
+  href: 'https://www.otto.de',
+  active: true,
+};
+export const story010Default = Template.bind({});
+story010Default.args = Object.assign({}, defaultArgs);
+story010Default.storyName = 'Default Breadcrumb';
+const breadcrumbArgs = getArgTypes('b2b-breadcrumb');
+export default {
+  title: 'Components/Interaction/Breadcrumb',
+  argTypes: breadcrumbArgs,
+  viewMode: 'docs',
+};

package/dist/collection/components/button/button.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 */
@@ -284,8 +284,9 @@
   border: 0.125rem solid rgba(51, 51, 51, 0.2);
   border-top: 0.125rem solid var(--b2b-color-copy-default);
 }
-:host button:disabled,
-:host a:disabled {
+:host button:disabled, :host button.disabled,
+:host a:disabled,
+:host a.disabled {
   cursor: default;
   pointer-events: none;
   background-color: var(--b2b-color-grey-50);
@@ -294,9 +295,12 @@
   color: var(--b2b-color-grey-250);
 }
 :host button:disabled [slot=start],
-:host button:disabled [slot=end],
+:host button:disabled [slot=end], :host button.disabled [slot=start],
+:host button.disabled [slot=end],
 :host a:disabled [slot=start],
-:host a:disabled [slot=end] {
+:host a:disabled [slot=end],
+:host a.disabled [slot=start],
+:host a.disabled [slot=end] {
   fill: var(--b2b-color-grey-250);
 }
 :host button:focus,

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

@@ -1,88 +1,144 @@
+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 { html } from 'lit-html';
-import buttonDocs from './button.docs.mdx';
 import { getArgTypes } from '../../docs/config/utils';
-const Template = ({ variant, size, disabled, loading, content, type, href, download, target, }) => {
-  const label = content ? content : 'Details';
-  return html `<b2b-button
-    variant="${variant}"
-    size="${size}"
-    disabled="${disabled}"
-    loading="${loading}"
-    type="${type}"
-    .href="${href}"
-    download="${download}"
-    target="${target}">
-    ${label}
+const meta = {
+  title: 'Components/Interaction/Button',
+  component: 'b2b-button',
+  args: {
+    variant: 'secondary',
+    type: 'button',
+    size: '100',
+    disabled: false,
+    loading: false,
+    active: false,
+    target: 'self',
+    label: 'B2B Button',
+  },
+  argTypes: getArgTypes('b2b-button'),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<b2b-button
+    variant="${args.variant}"
+    size="${args.size}"
+    disabled="${args.disabled}"
+    loading="${args.loading}"
+    type="${args.type}">
+    ${args.label}
   </b2b-button>`;
+  },
 };
-const defaultArgs = {
-  variant: 'secondary',
-  size: '100',
-  disabled: false,
-  loading: false,
-  type: 'button',
-  href: undefined,
-  target: 'blank',
-  download: null,
+export default meta;
+export const Primary = {
+  args: Object.assign(Object.assign({}, meta.args), { variant: 'primary', label: 'Primary' }),
 };
-export const story010Secondary = Template.bind({});
-story010Secondary.args = Object.assign({}, defaultArgs);
-story010Secondary.storyName = 'Secondary';
-export const story020Primary = Template.bind({});
-story020Primary.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'primary', content: 'Primary' });
-story020Primary.storyName = 'Primary';
-export const story030Loading = Template.bind({});
-story030Loading.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'primary', loading: true, content: 'Primary' });
-story030Loading.storyName = 'Loading';
-export const story040IconStart = Template.bind({});
-const iconStartContent = html `<b2b-icon
-    slot="start"
-    icon="b2b_icon-check"
-    size="100"
-    color="inherit"></b2b-icon>
-  Text`;
-story040IconStart.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'primary', content: iconStartContent });
-story040IconStart.storyName = 'Button With Icon Start';
-export const story050IconEnd = Template.bind({});
-const iconEndContent = html `Text
-  <b2b-icon
-    slot="end"
-    icon="b2b_icon-check"
-    size="100"
-    color="inherit"></b2b-icon>`;
-story050IconEnd.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'primary', content: iconEndContent });
-story050IconEnd.storyName = 'Button With Icon End';
-export const story055IconStartPali = Template.bind({});
-const iconStartPaliContent = html `<i class="obc_icon-check obc_mr-1"></i> Icon
-  Button`;
-story055IconStartPali.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'primary', content: iconStartPaliContent });
-story055IconStartPali.storyName = 'Button With Pali Icon';
-export const story060IconSearch = Template.bind({});
-const iconSearchContent = html `<b2b-icon
-  icon="b2b_icon-check"
-  size="100"
-  color="primary"></b2b-icon>`;
-story060IconSearch.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'secondary', content: iconSearchContent });
-story060IconSearch.storyName = 'Icon Only Button';
-export const story070Disabled = Template.bind({});
-story070Disabled.args = Object.assign(Object.assign({}, defaultArgs), { variant: 'primary', disabled: true, content: 'Primary has grey color when disabled' });
-story070Disabled.storyName = 'Disabled';
-export const story080Anchor = Template.bind({});
-story080Anchor.args = Object.assign(Object.assign({}, defaultArgs), { href: 'https://www.otto.de', content: 'Anchor Button' });
-story080Anchor.storyName = 'Anchor Button';
-const controls = {
-  variant: 'radio',
+export const Secondary = {
+  args: Object.assign(Object.assign({}, meta.args), { label: 'Secondary' }),
 };
-const buttonArgs = getArgTypes('b2b-button', controls);
-export default {
-  title: 'Components/Interaction/Button',
-  argTypes: Object.assign(Object.assign({}, buttonArgs), { content: {
-      control: false,
-    } }),
-  viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: buttonDocs,
-    },
+export const Loading = {
+  args: Object.assign(Object.assign({}, meta.args), { loading: true, label: 'Loading' }),
+};
+export const IconStart = {
+  args: Object.assign(Object.assign({}, meta.args), { label: 'Icon Start' }),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<b2b-button
+    variant="${args.variant}"
+    size="${args.size}"
+    disabled="${args.disabled}"
+    loading="${args.loading}"
+    type="${args.type}">
+    <b2b-icon slot="start" icon="b2b_icon-check" size="100"></b2b-icon>
+    ${args.label}
+  </b2b-button>`;
+  },
+};
+export const IconEnd = {
+  args: Object.assign(Object.assign({}, meta.args), { label: 'Icon End' }),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<b2b-button
+    variant="${args.variant}"
+    size="${args.size}"
+    disabled="${args.disabled}"
+    loading="${args.loading}"
+    type="${args.type}">
+    ${args.label}
+    <b2b-icon slot="end" icon="b2b_icon-check" size="100"></b2b-icon>
+  </b2b-button>`;
+  },
+};
+export const PaliIcon = {
+  args: Object.assign(Object.assign({}, meta.args), { label: 'Icon from PaLi' }),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<b2b-button
+    variant="${args.variant}"
+    size="${args.size}"
+    disabled="${args.disabled}"
+    loading="${args.loading}"
+    type="${args.type}">
+    <i slot="start" class="obc_icon-info"></i>
+    ${args.label}
+  </b2b-button>`;
+  },
+};
+export const IconOnly = {
+  args: Object.assign({}, meta.args),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<b2b-button
+    variant="${args.variant}"
+    size="${args.size}"
+    disabled="${args.disabled}"
+    loading="${args.loading}"
+    type="${args.type}">
+    <b2b-icon slot="end" icon="b2b_icon-search" size="100"></b2b-icon>
+  </b2b-button>`;
+  },
+};
+export const Disabled = {
+  args: Object.assign(Object.assign({}, meta.args), { disabled: true, label: 'Disabled' }),
+};
+export const Anchor = {
+  args: Object.assign({}, meta.args),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<b2b-button
+    variant="${args.variant}"
+    size="${args.size}"
+    disabled="${args.disabled}"
+    loading="${args.loading}"
+    href="www.otto.de"
+    target="blank"
+    type="${args.type}">
+    Go to otto.de
+  </b2b-button>`;
+  },
+};
+export const DisabledAnchor = {
+  args: Object.assign(Object.assign({}, meta.args), { disabled: true }),
+  render: (_a) => {
+    var args = __rest(_a, []);
+    return html `<b2b-button
+    variant="${args.variant}"
+    size="${args.size}"
+    disabled="${args.disabled}"
+    loading="${args.loading}"
+    href="www.otto.de"
+    target="blank"
+    type="${args.type}">
+    Go to otto.de
+  </b2b-button>`;
   },
 };

package/dist/collection/components/card/card.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 */

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

@@ -1,5 +1,4 @@
 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}">
@@ -33,9 +32,4 @@ 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 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 */
@@ -305,12 +305,12 @@
   background-color: var(--b2b-color-black-100);
 }
 .b2b-checkbox--indeterminate .b2b-checkbox__icon {
-  margin-top: var(--b2b-size-5);
-  margin-left: var(--b2b-size-5);
+  margin-top: 9px;
+  margin-left: var(--b2b-size-7);
   display: inline-block;
 }
 .b2b-checkbox--indeterminate.b2b-checkbox--standalone .b2b-checkbox__icon {
-  margin-top: var(--b2b-size-1);
+  margin-top: 7px;
 }
 /* stylelint-disable selector-class-pattern */
 .b2b-checkbox.b2b-checkbox--disabled.b2b-checkbox--checked .b2b-checkbox__input {

package/dist/collection/components/checkbox/checkbox.js

@@ -39,7 +39,7 @@ export class CheckboxComponent {
     };
     this.renderIcon = () => {
       if (this.indeterminate) {
-        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 11 1", class: "b2b-checkbox__icon" }, h("path", { d: "M8.5 0H0.5C0.223633 0 0 0.223633 0 0.5C0 0.776367 0.223633 1 0.5 1H8.5C8.77637 1 9 0.776367 9 0.5C9 0.223633 8.77637 0 8.5 0Z", fill: "white" })));
+        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 12 12", class: "b2b-checkbox__icon" }, h("path", { d: "M8.5 0H0.5C0.223633 0 0 0.223633 0 0.5C0 0.776367 0.223633 1 0.5 1H8.5C8.77637 1 9 0.776367 9 0.5C9 0.223633 8.77637 0 8.5 0Z", fill: "white" })));
       }
       if (this.checked) {
         return (h("svg", { class: "b2b-checkbox__icon", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32" }, h("path", { d: "M11.798 25.082c-.341 0-.681-.13-.942-.389l-7.132-7.115a1.334 1.334 0 0 1 1.884-1.888l6.19 6.175L26.391 7.307a1.334 1.334 0 0 1 1.884 1.888L12.74 24.693c-.26.259-.601.389-.942.389z" })));

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

@@ -1,5 +1,4 @@
 import { html } from 'lit-html';
-import inputCheckboxDocs from './checkbox.docs.mdx';
 import { getArgTypes } from '../../docs/config/utils';
 const Template = ({ label, required, checked, disabled, hint, error, name, value, invalid, }) => {
   return html `<b2b-checkbox
@@ -48,9 +47,4 @@ export default {
   title: 'Components/Form/Checkbox',
   argTypes: inputCheckboxArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: inputCheckboxDocs,
-    },
-  },
 };

package/dist/collection/components/checkbox-group/checkbox-group.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 */

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

@@ -1,5 +1,4 @@
 import { html } from 'lit-html';
-import inputCheckboxGroupDocs from './checkbox-group.docs.mdx';
 import { getArgTypes } from '../../docs/config/utils';
 const Template = ({ label, required, disabled, invalid, hint, error, alignment, }) => {
   const firstLabel = 'One';
@@ -49,9 +48,4 @@ export default {
   title: 'Components/Form/Checkbox Group',
   argTypes: checkboxGroupArgs,
   viewMode: 'docs',
-  parameters: {
-    docs: {
-      page: inputCheckboxGroupDocs,
-    },
-  },
 };