@otto-de/b2b-core-components 1.36.0 → 1.37.1

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

@@ -1,21 +1,24 @@
 import { userEvent } from "@storybook/test";
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
-const Template = ({ label = 'Favorite Fruit', required, name, disabled, invalid, hint, error, search, selected = false, }) => {
+const Template = ({ label = 'Favorite Fruit', required, name, disabled, invalid, hint, error, search, clear, selected = false, }) => {
     return html `<b2b-dropdown
-    label="${label}"
-    name="${name}"
-    error="${error}"
-    hint="${hint}"
-    disabled="${disabled}"
-    invalid="${invalid}"
-    required="${required}"
-    search="${search}">
+    label=${label}
+    name=${name}
+    error=${error}
+    hint=${hint}
+    disabled=${disabled}
+    invalid=${invalid}
+    required=${required}
+    search=${search}
+    clear=${clear}>
     <option value="strawberry">Strawberry</option>
     <option value="orange">Orange</option>
     <option value="banana">Banana</option>
     ${selected
-        ? html `<option value="pineapple" selected="true">Pineapple</option>`
+        ? html `<option value="pineapple" selected="true" clear="true">
+          Pineapple
+        </option>`
         : html `<option value="pineapple">Pineapple</option>`}
     <option value="grapes">Grapes</option>
     <option value="watermelon">Watermelon</option>
@@ -35,6 +38,7 @@ const defaultArgs = {
     hint: 'Pick one',
     error: 'Not that one!',
     search: false,
+    clear: false,
 };
 export const story010Default = Template.bind({});
 story010Default.args = Object.assign({}, defaultArgs);
@@ -62,6 +66,9 @@ story050Selected.play = async ({ canvasElement }) => {
 export const story060Search = Template.bind({});
 story060Search.args = Object.assign(Object.assign({}, defaultArgs), { search: true });
 story060Search.storyName = 'Search';
+export const story070Clear = Template.bind({});
+story070Clear.args = Object.assign(Object.assign({}, defaultArgs), { selected: true, clear: true });
+story070Clear.storyName = 'Clear';
 const dropdownArgs = getArgTypes('b2b-dropdown');
 export default {
     title: 'Components/Form/Dropdown',

package/dist/collection/components/flyout-menu/flyout-menu.css

@@ -232,9 +232,6 @@
 .b2b-flyout-menu {
   position: relative;
   display: inline !important;
-  /* this is a workaround to force purgecss to include the overwrites of
-   the variables --b2b-border-right and --b2b-border-radius
-  */
 }
 .b2b-flyout-menu__trigger {
   cursor: pointer;
@@ -282,6 +279,11 @@
   transform: translateX(3px) translateY(3px) rotate(45deg);
   width: 0.875rem;
 }
+.b2b-flyout-menu {
+  /* this is a workaround to force purgecss to include the overwrites of
+   the variables --b2b-border-right and --b2b-border-radius
+  */
+}
 .b2b-flyout-menu .purge-css-include-variables {
   border-radius: var(--b2b-border-radius);
   border-right: var(--b2b-border-right);

package/dist/collection/components/flyout-menu/flyout-menu.stories.js

@@ -29,12 +29,12 @@ const meta = {
         <b2b-flyout-menu-option
           slot="option"
           option="Delete"
-          disabled="${args.disabled}">
+          disabled=${args.disabled}>
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option
           slot="option"
           option="Pause"
-          separator="${args.separator}">
+          separator=${args.separator}>
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option slot="option" option="Copy">
         </b2b-flyout-menu-option>
@@ -72,12 +72,12 @@ export const AllStates = {
         <b2b-flyout-menu-option
           slot="option"
           option="Delete"
-          disabled="${args.disabled}">
+          disabled=${args.disabled}>
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option
           slot="option"
           option="Pause"
-          separator="${args.separator}">
+          separator=${args.separator}>
         </b2b-flyout-menu-option>
         <b2b-flyout-menu-option slot="option" option="Copy">
         </b2b-flyout-menu-option>

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

@@ -33,13 +33,13 @@ export const story010Grid = {
     },
     render: (_a) => {
         var args = __rest(_a, []);
-        return html ` <b2b-grid margin="${args.margin}">
+        return html ` <b2b-grid margin=${args.margin}>
       <b2b-grid-row
-        justify="${args.justify}"
-        row-gap="${args.rowGap}"
-        column-gap="${args.columnGap}">
-        <b2b-grid-col span="6" text-align="${args.textAlign}"
-          ><div style="${gridBoxStyles}">
+        justify=${args.justify}
+        row-gap=${args.rowGap}
+        column-gap=${args.columnGap}>
+        <b2b-grid-col span="6" text-align=${args.textAlign}
+          ><div style=${gridBoxStyles}>
             <h4>Column 1-6 of 12</h4>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -53,25 +53,25 @@ export const story010Grid = {
           </div></b2b-grid-col
         >
         <b2b-grid-col
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 7 of 12</h4>
             <p>I grow to fill up all available space</p>
           </div></b2b-grid-col
         >
         <b2b-grid-col
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 8 of 12</h4>
             <p>I grow to fill up all available space</p>
           </div></b2b-grid-col
         >
         <b2b-grid-col
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 9 of 12</h4>
             <p>I grow to fill up all available space</p>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="3"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 10-12 of 12</h4>
             <p>Resize me by changing the span attribute in the args table.</p>
           </div></b2b-grid-col
@@ -94,37 +94,37 @@ export const story020AlignItems = {
         var args = __rest(_a, []);
         return html `<b2b-grid
       ><b2b-grid-row
-        align-items="${args.alignItems}"
-        justify="${args.justify}"
-        row-gap="${args.rowGap}"
-        column-gap="${args.columnGap}">
+        align-items=${args.alignItems}
+        justify=${args.justify}
+        row-gap=${args.rowGap}
+        column-gap=${args.columnGap}>
         <b2b-grid-col span="2"
-          ><div style="${gridBoxSmallStyles}">
+          ><div style=${gridBoxSmallStyles}>
             <h4>Column 1-2 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 3-4 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxSmallStyles}">
+          ><div style=${gridBoxSmallStyles}>
             <h4>Column 5-6 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 7-8 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxSmallStyles}">
+          ><div style=${gridBoxSmallStyles}>
             <h4>Column 9-10 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 11-12 of 12</h4>
           </div></b2b-grid-col
         >
@@ -144,13 +144,13 @@ export const story030TextAlign = {
     },
     render: (_a) => {
         var args = __rest(_a, []);
-        return html `<b2b-grid margin="${args.margin}">
+        return html `<b2b-grid margin=${args.margin}>
       <b2b-grid-row
-        justify="${args.justify}"
-        row-gap="${args.rowGap}"
-        column-gap="${args.columnGap}">
-        <b2b-grid-col span="6" text-align="${args.textAlign}"
-          ><div style="${gridBoxStyles}">
+        justify=${args.justify}
+        row-gap=${args.rowGap}
+        column-gap=${args.columnGap}>
+        <b2b-grid-col span="6" text-align=${args.textAlign}
+          ><div style=${gridBoxStyles}>
             <h4>Column 1-6 of 12</h4>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -164,17 +164,17 @@ export const story030TextAlign = {
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 7-8 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 9-10 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 11-12 of 12</h4>
           </div></b2b-grid-col
         ></b2b-grid-row
@@ -194,13 +194,13 @@ export const story040Justify = {
     },
     render: (_a) => {
         var args = __rest(_a, []);
-        return html `<b2b-grid margin="${args.margin}">
+        return html `<b2b-grid margin=${args.margin}>
       <b2b-grid-row
-        justify="${args.justify}"
-        row-gap="${args.rowGap}"
-        column-gap="${args.columnGap}">
-        <b2b-grid-col span="6" text-align="${args.textAlign}"
-          ><div style="${gridBoxStyles}">
+        justify=${args.justify}
+        row-gap=${args.rowGap}
+        column-gap=${args.columnGap}>
+        <b2b-grid-col span="6" text-align=${args.textAlign}
+          ><div style=${gridBoxStyles}>
             <h4>Column 1-6 of 12</h4>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -214,17 +214,17 @@ export const story040Justify = {
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 7-8 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 9-10 of 12</h4>
           </div></b2b-grid-col
         >
         <b2b-grid-col span="2"
-          ><div style="${gridBoxStyles}">
+          ><div style=${gridBoxStyles}>
             <h4>Column 11-12 of 12</h4>
           </div></b2b-grid-col
         ></b2b-grid-row

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

@@ -1,10 +1,7 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const template = ({ size, align, slot, noMargin }) => {
-    return html `<b2b-headline
-    size="${size}"
-    align="${align}"
-    no-margin="${noMargin}">
+    return html `<b2b-headline size=${size} align=${align} no-margin=${noMargin}>
     ${slot}
   </b2b-headline>`;
 };

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

@@ -3,10 +3,7 @@ import { getArgTypes } from "../../docs/config/utils";
 import { iconTypes } from "./types";
 import "./../../global/icon.stories.scss";
 const Template = ({ icon, color, variant }) => {
-    return html `<b2b-icon
-    icon="${icon}"
-    color="${color}"
-    variant="${variant}" />`;
+    return html `<b2b-icon icon=${icon} color=${color} variant=${variant} />`;
 };
 const defaultArgs = {
     icon: 'b2b_icon-edit',
@@ -29,7 +26,7 @@ story030Inverse.parameters = {
 };
 export const story035Inherit = ({ icon, color, variant }) => {
     return html ` <div style="color: red;">
-    <b2b-icon icon="${icon}" color="${color}" variant="${variant}" />
+    <b2b-icon icon=${icon} color=${color} variant=${variant} />
   </div>`;
 };
 story035Inherit.args = Object.assign(Object.assign({}, defaultArgs), { color: 'inherit' });
@@ -46,9 +43,9 @@ export const story070AllIcons = ({ color, variant }) => {
         return html `
       <div class="icon-container">
         <b2b-icon
-          icon="${icon}"
-          color="${color || defaultArgs.color}"
-          variant="${variant || 100}"></b2b-icon>
+          icon=${icon}
+          color=${color || defaultArgs.color}
+          variant=${variant || 100}></b2b-icon>
         <p>${icon}</p>
       </div>
     `;

package/dist/collection/components/icon-100/icon-100.stories.js

@@ -33,11 +33,11 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-icon-100
-      icon="${args.icon}"
-      color="${args.color}"
-      size="${args.size}"
-      clickable="${args.clickable}"
-      focusable="${args.focusable}"></b2b-icon-100>`;
+      icon=${args.icon}
+      color=${args.color}
+      size=${args.size}
+      clickable=${args.clickable}
+      focusable=${args.focusable}></b2b-icon-100>`;
     },
 };
 export default meta;
@@ -62,11 +62,11 @@ export const Inherit = {
     render: ({ icon, color, size, clickable, focusable }) => {
         return html ` <div style="color: red;">
       <b2b-icon-100
-        icon="${icon}"
-        color="${color}"
-        size="${size}"
-        clickable="${clickable}"
-        focusable="${focusable}">
+        icon=${icon}
+        color=${color}
+        size=${size}
+        clickable=${clickable}
+        focusable=${focusable}>
       </b2b-icon-100>
     </div>`;
     },
@@ -75,7 +75,7 @@ export const Inherit = {
 const renderAllIcons = () => {
     const icons = iconTypes.map(icon => {
         return html ` <div class="icon-container">
-      <b2b-icon-100 icon="${icon}"></b2b-icon-100>
+      <b2b-icon-100 icon=${icon}></b2b-icon-100>
       <p>${icon}</p>
     </div>`;
     });

package/dist/collection/components/icon-50/icon-50.stories.js

@@ -32,10 +32,10 @@ const meta = {
     render: (_a) => {
         var args = __rest(_a, []);
         return html `<b2b-icon-50
-      icon="${args.icon}"
-      color="${args.color}"
-      clickable="${args.clickable}"
-      focusable="${args.focusable}"></b2b-icon-50>`;
+      icon=${args.icon}
+      color=${args.color}
+      clickable=${args.clickable}
+      focusable=${args.focusable}></b2b-icon-50>`;
     },
 };
 export default meta;
@@ -57,10 +57,10 @@ export const Inherit = {
     render: ({ icon, color, clickable, focusable }) => {
         return html ` <div style="color: red;">
       <b2b-icon-50
-        icon="${icon}"
-        color="${color}"
-        clickable="${clickable}"
-        focusable="${focusable}">
+        icon=${icon}
+        color=${color}
+        clickable=${clickable}
+        focusable=${focusable}>
       </b2b-icon-50>
     </div>`;
     },
@@ -69,7 +69,7 @@ export const Inherit = {
 const renderAllIcons = () => {
     const icons = iconTypes.map(icon => {
         return html ` <div class="icon-container">
-      <b2b-icon-50 icon="${icon}"></b2b-icon-50>
+      <b2b-icon-50 icon=${icon}></b2b-icon-50>
       <p>${icon}</p>
     </div>`;
     });

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

@@ -33,17 +33,17 @@ const meta = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        label="${args.label}"
-        required="${args.required}"
-        type="${args.defaultType}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        hint="${args.hint}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        label=${args.label}
+        required=${args.required}
+        type=${args.defaultType}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        hint=${args.hint}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}
-        input-text-align="${args.inputTextAlign}"></b2b-input>
+        input-text-align=${args.inputTextAlign}></b2b-input>
     </div>`;
     },
 };
@@ -72,15 +72,15 @@ export const Prefix = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        label="${args.label}"
-        required="${args.required}"
-        type="${args.type}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        hint="${args.hint}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        label=${args.label}
+        required=${args.required}
+        type=${args.type}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        hint=${args.hint}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}
         ><span slot="start">Registration Number</span></b2b-input
       >
@@ -114,15 +114,15 @@ export const PrefixAndSuffix = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        label="${args.label}"
-        required="${args.required}"
-        type="${args.type}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        hint="${args.hint}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        label=${args.label}
+        required=${args.required}
+        type=${args.type}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        hint=${args.hint}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}>
         <b2b-icon-100 icon="b2b_icon-search" slot="start"></b2b-icon-100
         ><span slot="end">Registration Number</span></b2b-input
@@ -136,14 +136,14 @@ export const Label = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        required="${args.required}"
-        type="${args.type}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        hint="${args.hint}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        required=${args.required}
+        type=${args.type}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        hint=${args.hint}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}
         ><span slot="label">Custom label</span></b2b-input
       >
@@ -156,14 +156,14 @@ export const HintSlot = {
         var args = __rest(_a, []);
         return html `<div style="width: 400px;">
       <b2b-input
-        label="${args.label}"
-        required="${args.required}"
-        type="${args.type}"
-        disabled="${args.disabled}"
-        placeholder="${args.placeholder}"
-        value="${args.value}"
-        error="${args.error}"
-        autofocus="${args.autofocus}"
+        label=${args.label}
+        required=${args.required}
+        type=${args.type}
+        disabled=${args.disabled}
+        placeholder=${args.placeholder}
+        value=${args.value}
+        error=${args.error}
+        autofocus=${args.autofocus}
         invalid=${args.invalid}
         ><span slot="hint">Custom hint</span></b2b-input
       >

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

@@ -4,10 +4,10 @@ const Template = ({ invalid, disabled, error, hint, additionalSlot, }) => {
     return additionalSlot
         ? html ` <div style="width: 380px">
         <b2b-input-group
-          invalid="${invalid}"
-          disabled="${disabled}"
-          error="${error}"
-          hint="${hint}">
+          invalid=${invalid}
+          disabled=${disabled}
+          error=${error}
+          hint=${hint}>
           <b2b-input slot="start" label="Search Term"></b2b-input>
           <b2b-dropdown style="width: 90px;">
             <option value="one">€</option>

package/dist/collection/components/input-list/input-list.css

@@ -237,9 +237,6 @@
   display: flex;
   flex-direction: column;
   min-width: 7rem;
-  /* this is a workaround to force purgecss to include the overwrites of
-   the variables --b2b-border-right and --b2b-border-radius
-  */
 }
 .b2b-input-list.b2b-input-list__options-on b2b-input {
   --b2b-border-radius: var(--b2b-size-border-no-radius-bottom);
@@ -300,6 +297,11 @@
 .b2b-input-list b2b-icon-100 {
   --b2b-icon-cursor: pointer;
 }
+.b2b-input-list {
+  /* this is a workaround to force purgecss to include the overwrites of
+   the variables --b2b-border-right and --b2b-border-radius
+  */
+}
 .b2b-input-list .purge-css-include-variables {
   border-radius: var(--b2b-border-radius);
   border-right: var(--b2b-border-right);

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

@@ -29,10 +29,10 @@ const meta = {
         return html `<div style="height: 130px; width: 300px">
       <b2b-input-list
         data-testid="element"
-        label="${args.label}"
-        required="${args.required}"
-        placeholder="${args.placeholder}"
-        disabled="${args.disabled}"
+        label=${args.label}
+        required=${args.required}
+        placeholder=${args.placeholder}
+        disabled=${args.disabled}
         .optionsList=${args.optionsList}></b2b-input-list>
     </div>`;
     },
@@ -60,10 +60,10 @@ export const CustomList = {
         return html `<div style="height: 130px; width: 300px">
       <b2b-input-list
         data-testid="element"
-        label="${args.label}"
-        required="${args.required}"
-        placeholder="${args.placeholder}"
-        disabled="${args.disabled}"
+        label=${args.label}
+        required=${args.required}
+        placeholder=${args.placeholder}
+        disabled=${args.disabled}
         .optionsList=${args.optionsList}
         ><ul>
           <li>Option 1</li>
@@ -90,11 +90,11 @@ export const disabledWithSelectedOption = {
         return html `<div style="height: 130px; width: 300px">
       <b2b-input-list
         data-testid="element"
-        label="${args.label}"
-        value="${args.optionsList[0]}"
-        required="${args.required}"
-        placeholder="${args.placeholder}"
-        disabled="${args.disabled}"
+        label=${args.label}
+        value=${args.optionsList[0]}
+        required=${args.required}
+        placeholder=${args.placeholder}
+        disabled=${args.disabled}
         .optionsList=${args.optionsList}
         ><ul>
           <li>Option 1</li>

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

@@ -1,7 +1,7 @@
 import { html } from "lit-html";
 import { getArgTypes } from "../../docs/config/utils";
 const Template = ({ type }) => {
-    return html `<b2b-label type="${type}">Label</b2b-label>`;
+    return html `<b2b-label type=${type}>Label</b2b-label>`;
 };
 const defaultArgs = {
     type: 'neutral',

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

@@ -22,11 +22,11 @@ const Template = ({ opened, variant, heading, backdropDismiss, escDismiss, conte
     <b2b-modal
       @b2b-close=${closeModal}
       id="modal"
-      opened="${opened}"
-      variant="${variant}"
-      heading="${heading}"
-      backdrop-dismiss="${backdropDismiss}"
-      esc-dismiss="${escDismiss}">
+      opened=${opened}
+      variant=${variant}
+      heading=${heading}
+      backdrop-dismiss=${backdropDismiss}
+      esc-dismiss=${escDismiss}>
       <b2b-icon-100 slot="header-icon" icon="b2b_icon-info"></b2b-icon-100>
       <div>${content}</div>
       <b2b-paragraph slot="footer-left">* Left Slot</b2b-paragraph>