@otto-de/b2b-core-components 1.0.0

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

@@ -0,0 +1,107 @@
+import { h, Host, } from '@stencil/core';
+export class SearchComponent {
+  constructor() {
+    this.onSearchClicked = () => {
+      this.b2bSearch.emit({ searchTerm: this.value });
+    };
+    this.onInput = event => {
+      this.value = event.detail.value;
+    };
+    this.onOptionSelected = event => {
+      this.value = event.detail.selectedOption;
+    };
+    this.placeholder = undefined;
+    this.optionsList = [];
+    this.value = null;
+    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" })))));
+  }
+  static get is() { return "b2b-search"; }
+  static get encapsulation() { return "shadow"; }
+  static get properties() {
+    return {
+      "placeholder": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The placeholder shown in the input field."
+        },
+        "attribute": "placeholder",
+        "reflect": false
+      },
+      "optionsList": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "string[]",
+          "resolved": "string[]",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The list of options passed into the search dropdown. Can be static or dynamic, i.e. updated when the b2b-search or b2b-input emitters fire."
+        },
+        "defaultValue": "[]"
+      },
+      "value": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The default value of the search input field. If defined, it will prefill the input."
+        },
+        "attribute": "value",
+        "reflect": true,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "closed": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "b2bSearch",
+        "name": "b2b-search",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emits whenever the user clicks the search button. Will emit the search string."
+        },
+        "complexType": {
+          "original": "SearchClickEventDetail",
+          "resolved": "SearchClickEventDetail<any>",
+          "references": {
+            "SearchClickEventDetail": {
+              "location": "import",
+              "path": "../../utils/interfaces/form.interface"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+}

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

@@ -0,0 +1,91 @@
+import { getArgTypes } from '../../docs/config/utils';
+import { html } from 'lit-html';
+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 [_, updateArgs] = useArgs();
+  const onInput = event => {
+    var _a;
+    // Read user input
+    const userInput = (_a = event.detail.value) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+    // update result list
+    if (userInput) {
+      // Filter results based on input
+      const filteredList = fruits.filter(fruit => fruit.toLowerCase().indexOf(userInput) > -1);
+      updateArgs({ optionsList: filteredList });
+    }
+    else {
+      updateArgs({ optionsList: [] });
+    }
+  };
+  // contenteditable is needed so that storybook won't interpret the key inputs as shortcuts
+  // it also works when the component has the word 'input' in its name
+  return html `<div style="width: 300px; display: block">
+    <b2b-search
+      contenteditable
+      data-testid="search-element"
+      placeholder="${placeholder}"
+      .optionsList=${optionsList}
+      @b2b-input=${onInput}></b2b-search>
+  </div>`;
+};
+const defaultArgs = {
+  placeholder: 'Search here',
+  optionsList: [],
+};
+export const story010Search = Template.bind({});
+story010Search.args = Object.assign({}, defaultArgs);
+story010Search.storyName = 'Search';
+story010Search.parameters = {
+  docs: {
+    source: {
+      code: dedent `
+      <b2b-search 
+        placeholder="Search here"
+        optionsList={[]} 
+        onB2b-input={onInput}
+        onB2b-search={onSearch}
+        onB2b-option-selected={onOptionSelected}>
+      </b2b-search>`,
+    },
+  },
+};
+const CustomSearchTemplate = ({ placeholder, optionsList }) => {
+  return html `<div style="width: 500px; height: 130px;">
+    <b2b-input-group>
+      <b2b-input-list
+        slot="start"
+        placeholder="${placeholder}"
+        .optionsList=${optionsList}></b2b-input-list>
+      <b2b-dropdown style="width: 50%" invalid error="an error">
+        <option value="one">Option 1</option>
+        <option value="one">Option 2</option>
+      </b2b-dropdown>
+      <b2b-button slot="end" variant="primary">
+        <b2b-icon icon="b2b_icon-search"></b2b-icon>
+      </b2b-button>
+    </b2b-input-group>
+  </div>`;
+};
+export const story020CustomSearch = CustomSearchTemplate.bind({});
+story020CustomSearch.storyName = 'Custom Search';
+story020CustomSearch.args = {
+  placeholder: 'Input List Component',
+  optionsList: ['result A', 'result B'],
+};
+const controls = {};
+const searchArgs = getArgTypes('b2b-search', controls);
+// this removes the long list but still show the description for the prop
+searchArgs.optionsList = Object.assign(Object.assign({}, searchArgs.optionsList), { control: false });
+export default {
+  title: 'Components/Form/Search',
+  argTypes: Object.assign({}, searchArgs),
+  viewmode: 'docs',
+  parameters: {
+    docs: {
+      page: searchDocs,
+    },
+  },
+};

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

@@ -0,0 +1,226 @@
+/**
+ * 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 .b2b-separator--horizontal {
+  display: block;
+  border-top: solid 1px var(--b2b-color-grey-200);
+  width: 100%;
+}
+:host .b2b-separator--vertical {
+  display: inline-flex;
+  height: 100%;
+  border-left: solid 1px var(--b2b-color-grey-200);
+}

package/dist/collection/components/separator/separator.js

@@ -0,0 +1,45 @@
+import { h, Host } from '@stencil/core';
+export class B2bSeparatorComponent {
+  constructor() {
+    this.alignment = 'horizontal';
+  }
+  render() {
+    return (h(Host, null, h("div", { class: {
+        [`b2b-separator--${this.alignment}`]: true,
+      } })));
+  }
+  static get is() { return "b2b-separator"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["separator.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["separator.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "alignment": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "'vertical' | 'horizontal'",
+          "resolved": "\"horizontal\" | \"vertical\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The alignment of the separator. Per default it is horizontal."
+        },
+        "attribute": "alignment",
+        "reflect": false,
+        "defaultValue": "'horizontal'"
+      }
+    };
+  }
+}

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

@@ -0,0 +1,42 @@
+import { html } from 'lit-html';
+import docs from './separator.docs.mdx';
+import { getArgTypes } from '../../docs/config/utils';
+const Template = ({ alignment }) => {
+  const content = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse massa urna, accumsan id viverra et, mollis sit amet sem.`;
+  const styles = alignment === 'vertical'
+    ? {
+      display: `display: flex;`,
+      margin: `margin: 0 10px;`,
+      width: `width: 12rem;`,
+    }
+    : {
+      display: null,
+      margin: `margin: 10px 0;`,
+      width: null,
+    };
+  return html `<div style="${styles.display}">
+    <p style="${styles.margin} ${styles.width}">${content}</p>
+    <b2b-separator alignment="${alignment}"></b2b-separator>
+    <p style="${styles.margin} ${styles.width}">${content}</p>
+  </div>`;
+};
+const defaultArgs = {
+  alignment: 'horizontal',
+};
+export const story010Horizontal = Template.bind({});
+story010Horizontal.args = Object.assign({}, defaultArgs);
+story010Horizontal.storyName = 'Horizontal';
+export const story020Vertical = Template.bind({});
+story020Vertical.args = Object.assign(Object.assign({}, defaultArgs), { alignment: 'vertical' });
+story020Vertical.storyName = 'Vertical';
+const argTypes = getArgTypes('b2b-separator');
+export default {
+  title: 'Components/Utilities/Separator',
+  argTypes: argTypes,
+  viewMode: 'docs',
+  parameters: {
+    docs: {
+      page: docs,
+    },
+  },
+};