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

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

@@ -1,7 +1,7 @@
 import { getArgTypes } from '../../docs/config/utils';
 import { html } from 'lit-html';
 import tableDocs from './table.docs.mdx';
-import { ContentAlignment, TableRowgroupTypes, TableSizes } from './types';
+import { ContentAlignment, TableRowgroupTypes, TableSizes, } from '../../utils/types/table.types';
 import { sampleData, smallSampleData, longSampleData, userSampleData, } from './stories.data';
 import { useArgs } from '@storybook/client-api';
 const Template = ({ data, parentWidth, firstColumnWidth, firstRowHeight, size, textWrap, align, highlight, withDividers, color, }) => {
@@ -191,11 +191,11 @@ const TemplateSorting = ({ data, firstColumnWidth, size, textWrap, align, highli
 export const story110Sorting = TemplateSorting.bind({});
 story110Sorting.args = Object.assign(Object.assign({}, defaultArgs), { withDividers: true, size: 'expand', data: userSampleData });
 story110Sorting.storyName = 'Table with Sorting';
-const TemplateAccordion = ({ data, firstColumnWidth, size, textWrap, align, highlight, withDividers, color, }) => {
+const TemplateAccordion = ({ data, firstColumnWidth, size, textWrap, align, highlight, withDividers, color, selectable, }) => {
   return html `
     <div>
       <b2b-table size="${size}">
-        <b2b-table-rowgroup type="header" accordion>
+        <b2b-table-rowgroup type="header" accordion selectable="${selectable}">
           <b2b-table-row>
             ${data.columns.map((columnName, index) => {
     return html ` <b2b-table-header
@@ -206,11 +206,12 @@ const TemplateAccordion = ({ data, firstColumnWidth, size, textWrap, align, high
   })}
           </b2b-table-row>
         </b2b-table-rowgroup>
-        <b2b-table-rowgroup type="body" accordion>
+        <b2b-table-rowgroup type="body" accordion selectable="${selectable}">
           ${data.rows.map((row, index) => {
     return html `<b2b-table-row
               highlight="${highlight}"
-              color=${index === 0 ? color : 'default'}>
+              color=${index === 0 ? color : 'default'}
+              value="${row[0]}">
               ${row.map(data => html `<b2b-table-cell
                     ?divider=${withDividers}
                     align="${align}"
@@ -220,11 +221,16 @@ const TemplateAccordion = ({ data, firstColumnWidth, size, textWrap, align, high
             </b2b-table-row>`;
   })}
         </b2b-table-rowgroup>
-        <b2b-table-rowgroup type="body" accordion opened>
+        <b2b-table-rowgroup
+          type="body"
+          accordion
+          opened
+          selectable="${selectable}">
           ${data.rows.map((row, index) => {
     return html `<b2b-table-row
               highlight="${highlight}"
-              color=${index === 0 ? color : 'default'}>
+              color=${index === 0 ? color : 'default'}
+              value="${row[0]}">
               ${row.map(data => html `<b2b-table-cell
                     ?divider=${withDividers}
                     align="${align}"
@@ -239,8 +245,11 @@ const TemplateAccordion = ({ data, firstColumnWidth, size, textWrap, align, high
   `;
 };
 export const story120Accordion = TemplateAccordion.bind({});
-story120Accordion.args = Object.assign(Object.assign({}, defaultArgs), { data: sampleData });
+story120Accordion.args = Object.assign(Object.assign({}, defaultArgs), { data: sampleData, selectable: false });
 story120Accordion.storyName = 'Accordion Table';
+export const story130Selectable = TemplateAccordion.bind({});
+story130Selectable.args = Object.assign(Object.assign({}, defaultArgs), { data: sampleData, selectable: true });
+story130Selectable.storyName = 'Selectable Table';
 const tableArgs = getArgTypes('b2b-table');
 const rowGroupArgs = getArgTypes('b2b-table-rowgroup');
 const rowArgs = getArgTypes('b2b-table-row');

package/dist/collection/components/table/utils.js

@@ -0,0 +1,18 @@
+export function updateCheckboxState(rows, header) {
+  let someSelected = rows.some(item => item.checked === true);
+  let everySelected = rows.every(item => item.checked === true);
+  header.checked = everySelected;
+  header.indeterminate = someSelected && !everySelected;
+}
+export function getAllRows(hostEl) {
+  return Array.from(hostEl.querySelectorAll('b2b-table-row'));
+}
+export function getRemainingRows(hostEl) {
+  return Array.from(hostEl.querySelectorAll('b2b-table-row')).slice(1);
+}
+export function getFirstRow(hostEl) {
+  const firstRow = hostEl.querySelector('b2b-table-row');
+  if (firstRow != null) {
+    return firstRow;
+  }
+}

package/dist/collection/components/textarea/textarea.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --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-copy-50: var(--b2b-size-30);
   --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);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -249,7 +248,7 @@
 }
 :host(.b2b-textarea) span {
   display: block;
-  font-size: var(--b2b-size-copy-75);
+  font-size: var(--b2b-size-copy-50);
   line-height: var(--b2b-size-copy-line-height-75);
   color: var(--b2b-color-grey-300);
 }

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

@@ -0,0 +1,91 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Textarea', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-textarea label="Test"></b2b-textarea>`);
+  });
+  it('should render the textarea component', async () => {
+    const element = await page.find('b2b-textarea');
+    expect(element).not.toBeNull();
+  });
+  it('should render the label', async () => {
+    const label = await page.find({ text: 'Test' });
+    expect(label).not.toBeNull();
+  });
+  it('should emit when the user types', async () => {
+    const element = await page.find('b2b-textarea >>> textarea');
+    const inputSpy = await page.spyOnEvent('b2b-input');
+    await element.type('ABC');
+    page.waitForChanges();
+    expect(inputSpy).toHaveReceivedEvent();
+  });
+  it('should not allow typing when disabled', async () => {
+    const textarea = `<b2b-textarea label="Test" disabled></b2b-textarea>`;
+    page = await newE2EPage();
+    await page.setContent(textarea);
+    const element = await page.find('b2b-textarea >>> textarea');
+    const inputSpy = await page.spyOnEvent('b2b-input');
+    await element.type('ABC');
+    expect(inputSpy).not.toHaveReceivedEvent();
+  });
+  it('should autofocus', async () => {
+    const textarea = `<b2b-textarea label="Test" autofocus></b2b-textarea>`;
+    page = await newE2EPage();
+    await page.setContent(textarea);
+    const element = await page.find('b2b-textarea');
+    expect(element).toHaveAttribute('autofocus');
+  });
+  it('should display a hint text', async () => {
+    const textarea = `<b2b-textarea label="Test" hint="A test hint"></b2b-textarea>`;
+    page = await newE2EPage();
+    await page.setContent(textarea);
+    const hint = await page.find('b2b-textarea >>> span');
+    expect(hint).toEqualText('A test hint');
+  });
+  it('should display an error text when the textarea is invalid', async () => {
+    const textarea = `<b2b-textarea label="Test" error="A test error" invalid></b2b-textarea>`;
+    page = await newE2EPage();
+    await page.setContent(textarea);
+    const error = await page.find('b2b-textarea >>> span');
+    expect(error).toEqualText('A test error');
+  });
+  it('should not display a hint when an error message is present and the textarea is invalid', async () => {
+    const textarea = `<b2b-textarea label="Test" error="A test error" hint="A test hint" invalid></b2b-textarea>`;
+    page = await newE2EPage();
+    await page.setContent(textarea);
+    const error = await page.find('b2b-textarea >>> span');
+    expect(error).toEqualText('A test error');
+  });
+  it('should not display an error if the textarea is invalid and disabled', async () => {
+    const textarea = `<b2b-textarea label="Test" error="A test error" hint="A test hint" invalid disabled></b2b-textarea>`;
+    page = await newE2EPage();
+    await page.setContent(textarea);
+    const hint = await page.find('b2b-textarea >>> span');
+    expect(hint).toEqualText('A test hint');
+  });
+  it('should accept a maximum length', async () => {
+    const textarea = `<b2b-textarea label="Test" max-length="10"></b2b-textarea>`;
+    const input = 'An input with 27 characters';
+    page = await newE2EPage();
+    await page.setContent(textarea);
+    const element = await page.find('b2b-textarea >>> textarea');
+    await element.type(input);
+    const value = await element.getProperty('value');
+    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>
+    </form>`;
+    page = await newE2EPage();
+    await page.setContent(form);
+    const handleFormData = jest.fn();
+    const formdataEventSpy = await page.spyOnEvent('formdata', handleFormData);
+    await page.evaluate(() => {
+      document.querySelector('button').click();
+    });
+    expect(formdataEventSpy).toHaveReceivedEvent();
+  });
+});

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --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-copy-50: var(--b2b-size-30);
   --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);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -223,7 +222,7 @@
   position: relative;
   margin: 0;
 }
-:host .b2b-toggle-button-input {
+:host .b2b-toggle-button__input {
   border: 0;
   clip: rect(0, 0, 0, 0);
   height: 1px;
@@ -231,7 +230,7 @@
   position: absolute !important;
   width: 1px;
 }
-:host .b2b-toggle-button-label {
+:host .b2b-toggle-button__label {
   display: inline-block;
   position: relative;
   box-sizing: border-box;
@@ -247,23 +246,23 @@
   text-decoration: none;
   padding: 0 var(--b2b-size-20);
 }
-:host .b2b-toggle-button-label:hover {
+:host .b2b-toggle-button__label:hover {
   background-color: var(--b2b-color-grey-200);
 }
-:host .b2b-toggle-button-input:focus + label {
+:host .b2b-toggle-button__input:focus + label {
   outline: 2px solid -webkit-focus-ring-color;
   z-index: 1;
   transition: none;
 }
-:host .b2b-toggle-button-input--disabled:focus + label {
+:host .b2b-toggle-button__input--disabled:focus + label {
   outline: none;
 }
-:host .b2b-toggle-button-label--checked, :host .b2b-toggle-button-label--checked:hover {
+:host .b2b-toggle-button__label--checked, :host .b2b-toggle-button__label--checked:hover {
   color: var(--b2b-color-white-100);
   background-color: var(--b2b-color-black-50);
   border-color: var(--b2b-color-black-50);
 }
-:host .b2b-toggle-button-label--disabled, :host .b2b-toggle-button-label--disabled:hover {
+:host .b2b-toggle-button__label--disabled, :host .b2b-toggle-button__label--disabled:hover {
   pointer-events: none;
   color: var(--b2b-color-grey-250);
   border-color: var(--b2b-color-grey-100);

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

@@ -0,0 +1,44 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('b2b-toggle-button', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-toggle-button checked="false" name="toggle-1" label="Unselected" value="1"></b2b-toggle-button>`);
+  });
+  it('renders', async () => {
+    const element = await page.find('b2b-toggle-button');
+    expect(element).not.toBeNull();
+  });
+  it('checks the button when selected', async () => {
+    const element = await page.find('b2b-toggle-button');
+    await element.click();
+    await page.waitForChanges();
+    const check = await element.getProperty('checked');
+    expect(check).toBe(true);
+  });
+  it('emits its value when selected', async () => {
+    const element = await page.find('b2b-toggle-button');
+    const spy = await page.spyOnEvent('b2b-change');
+    await element.click();
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEvent();
+    expect(spy).toHaveReceivedEventDetail({ value: '1' });
+  });
+  it('should not emit when a button is disabled', async () => {
+    const element = await page.find('b2b-toggle-button');
+    await element.setProperty('disabled', true);
+    await page.waitForChanges();
+    const spy = await page.spyOnEvent('b2b-change');
+    await element.click();
+    await page.waitForChanges();
+    expect(spy).not.toHaveReceivedEvent();
+  });
+  it('should not emit when a button is already selected', async () => {
+    const element = await page.find('b2b-toggle-button');
+    const spy = await page.spyOnEvent('b2b-change');
+    await element.click();
+    await element.click();
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEventTimes(1);
+  });
+});

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

@@ -35,12 +35,12 @@ export class B2bToggleButtonComponent {
         'b2b-toggle-button': true,
         'b2b-toggle-button--disabled': this.disabled,
       } }, h("input", { tabindex: 0, class: {
-        'b2b-toggle-button-input': true,
-        'b2b-toggle-button-input--disabled': this.disabled,
+        'b2b-toggle-button__input': true,
+        'b2b-toggle-button__input--disabled': this.disabled,
       }, "aria-labelledby": this.name, type: "radio", checked: this.checked && !this.disabled, disabled: this.disabled, name: this.name, value: this.value }), h("label", { id: this.name, tabindex: -1, class: {
-        'b2b-toggle-button-label': true,
-        'b2b-toggle-button-label--disabled': this.disabled,
-        'b2b-toggle-button-label--checked': this.checked && !this.disabled,
+        'b2b-toggle-button__label': true,
+        'b2b-toggle-button__label--disabled': this.disabled,
+        'b2b-toggle-button__label--checked': this.checked && !this.disabled,
       } }, this.label))));
   }
   static get is() { return "b2b-toggle-button"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --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-copy-50: var(--b2b-size-30);
   --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);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -240,6 +239,6 @@
 ::slotted(b2b-toggle-button[disabled]:first-child) {
   --b2b-border-left: 1px solid var(--b2b-color-grey-100);
 }
-.b2b-toggle-group-disabled ::slotted(b2b-toggle-button[disabled]) {
+.b2b-toggle-group--disabled ::slotted(b2b-toggle-button[disabled]) {
   --b2b-border-left: 1px solid var(--b2b-color-grey-100);
 }

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

@@ -0,0 +1,65 @@
+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>
+        </b2b-toggle-group>`);
+  });
+  it('should render the toggle group', async () => {
+    const element = await page.find('b2b-toggle-group');
+    expect(element).not.toBeNull();
+  });
+  it('should emit an event when a button is checked', async () => {
+    const firstButton = await page.find({ text: 'Two' });
+    const changeSpy = await page.spyOnEvent('b2b-group-change');
+    await firstButton.click();
+    await page.waitForChanges();
+    expect(changeSpy).toHaveReceivedEvent();
+    expect(changeSpy).toHaveReceivedEventDetail({ value: '2' });
+  });
+  it('should not emit an event when the checked button is already selected', async () => {
+    const firstButton = await page.find({ text: 'Two' });
+    const changeSpy = await page.spyOnEvent('b2b-group-change');
+    await firstButton.click();
+    await firstButton.click();
+    await page.waitForChanges();
+    expect(changeSpy).toHaveReceivedEventTimes(1);
+  });
+  it('should not select any buttons if the group is disabled', async () => {
+    const element = await page.find('b2b-toggle-group');
+    const changeSpy = await page.spyOnEvent('b2b-group-change');
+    await element.setProperty('disabled', true);
+    await page.waitForChanges();
+    const button = await page.find({ text: 'One' });
+    await button.click();
+    await page.waitForChanges();
+    expect(changeSpy).not.toHaveReceivedEvent();
+  });
+  it('should navigate and select a button by using a keyboard', async () => {
+    await page.keyboard.press('Tab');
+    await page.waitForChanges();
+    await page.keyboard.press('Space');
+    await page.waitForChanges();
+    const element = await page.find('b2b-toggle-button');
+    const checked = await element.getProperty('checked');
+    expect(checked).toBe(true);
+  });
+  it('should select first element if none other is pre-selected ', async () => {
+    const firstButton = await page.find('b2b-toggle-button');
+    const isSelected = await firstButton.getProperty('checked');
+    expect(isSelected).toBe(true);
+  });
+  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>
+        </b2b-toggle-group>`);
+    const firstButton = await page.find('b2b-toggle-button');
+    const isSelected = await firstButton.getProperty('checked');
+    expect(isSelected).toBe(false);
+  });
+});

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

@@ -47,7 +47,7 @@ export class B2BToggleGroup {
   render() {
     return (h(Host, null, h("div", { class: {
         'b2b-toggle-group': true,
-        'b2b-toggle-group-disabled': this.disabled,
+        'b2b-toggle-group--disabled': this.disabled,
       } }, h("fieldset", null, h("slot", null)))));
   }
   static get is() { return "b2b-toggle-group"; }

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -76,8 +76,7 @@
   --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-copy-50: var(--b2b-size-30);
   --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);
@@ -123,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Tue, 13 Jun 2023 14:44:02 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -214,15 +213,15 @@
   font-family: ObcIcons;
   src: url("https://pattern-library.portal.otto.market/static/assets/fonts/obc-icons.woff");
 }
-.b2b-tooltip--trigger {
+.b2b-tooltip__trigger {
   position: relative;
 }
-.b2b-tooltip--visible.b2b-tooltip--content, .b2b-tooltip--visible.b2b-tooltip--content::before {
+.b2b-tooltip--visible.b2b-tooltip__content, .b2b-tooltip--visible.b2b-tooltip__content::before {
   opacity: 1;
   visibility: visible;
   transition-delay: 100ms;
 }
-.b2b-tooltip--content {
+.b2b-tooltip__content {
   background-color: var(--b2b-color-black-100);
   white-space: pre-wrap;
   color: var(--b2b-color-white-100);
@@ -230,7 +229,7 @@
   border-radius: var(--b2b-size-7);
   position: absolute;
   line-height: var(--b2b-size-copy-line-height-75);
-  font-size: var(--b2b-size-copy-75);
+  font-size: var(--b2b-size-copy-50);
   box-sizing: border-box;
   text-align: start;
   width: max-content;
@@ -240,7 +239,7 @@
   z-index: 1000001;
   transition: opacity 0.4s ease;
 }
-.b2b-tooltip--content::before {
+.b2b-tooltip__content::before {
   content: "";
   position: absolute;
   z-index: 1000001;
@@ -252,40 +251,40 @@
   visibility: hidden;
   transition: opacity 0.4s ease;
 }
-.b2b-tooltip--left .b2b-tooltip--content {
+.b2b-tooltip--left .b2b-tooltip__content {
   inset: 50% calc(100% + 8px) auto auto;
   transform: translateY(-50%);
 }
-.b2b-tooltip--left .b2b-tooltip--content::before {
+.b2b-tooltip--left .b2b-tooltip__content::before {
   top: calc(50% - 0.375rem);
   transform: rotate(270deg);
   left: 100%;
   margin-right: -0.75rem;
 }
-.b2b-tooltip--right .b2b-tooltip--content {
+.b2b-tooltip--right .b2b-tooltip__content {
   inset: 50% auto auto calc(100% + 8px);
   transform: translateY(-50%);
 }
-.b2b-tooltip--right .b2b-tooltip--content::before {
+.b2b-tooltip--right .b2b-tooltip__content::before {
   top: calc(50% - 0.375rem);
   transform: rotate(90deg);
   margin-left: -0.75rem;
   right: 100%;
 }
-.b2b-tooltip--bottom .b2b-tooltip--content {
+.b2b-tooltip--bottom .b2b-tooltip__content {
   inset: calc(150% + 0.375rem) auto auto 50%;
   transform: translateX(-50%) translateY(-0.5rem);
 }
-.b2b-tooltip--bottom .b2b-tooltip--content::before {
+.b2b-tooltip--bottom .b2b-tooltip__content::before {
   left: calc(50% - 0.375rem);
   margin-top: -0.7rem;
   transform: rotate(180deg) translateY(0.35rem);
 }
-.b2b-tooltip--top .b2b-tooltip--content {
+.b2b-tooltip--top .b2b-tooltip__content {
   inset: auto auto 100% 50%;
   transform: translateX(-50%) translateY(-0.5rem);
 }
-.b2b-tooltip--top .b2b-tooltip--content::before {
+.b2b-tooltip--top .b2b-tooltip__content::before {
   left: calc(50% - 0.375rem);
   margin-bottom: -0.75rem;
   top: 100%;

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

@@ -0,0 +1,64 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B Tooltip', () => {
+  const expectToBeVisibleAfterTransition = async (page, tooltipDiv) => {
+    await page.$eval('b2b-tooltip', el => {
+      const tooltipElm = el.shadowRoot.querySelector('div');
+      tooltipElm.addEventListener('transitionend', () => {
+        expect(tooltipDiv.isVisible()).toBe(true);
+      });
+    });
+  };
+  it('renders', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-tooltip content="I am a tooltip">trigger</b2b-tooltip>');
+    const element = await page.find('b2b-tooltip');
+    expect(element).toHaveClass('hydrated');
+    const tooltipDiv = await page.find('b2b-tooltip >>> div');
+    expect(await tooltipDiv.isVisible()).toBe(false);
+  });
+  it('appears on hover when no trigger is specified', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-tooltip content="I am a tooltip">trigger</b2b-tooltip>');
+    const trigger = await page.find('b2b-tooltip >>> span');
+    await trigger.hover();
+    await page.waitForChanges();
+    const tooltipDiv = await page.find('b2b-tooltip >>> div');
+    expect(await tooltipDiv.isVisible()).toBe(true);
+  });
+  it('appears on focus when a focusable element is slotted and the trigger is set to focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="focus"><button>Focus me</button></b2b-tooltip>');
+    const tooltipDiv = await page.find('b2b-tooltip >>> div');
+    expect(await tooltipDiv.isVisible()).toBe(false);
+    await page.keyboard.press('Tab');
+    await page.waitForChanges();
+    await expectToBeVisibleAfterTransition(page, tooltipDiv);
+  });
+  it('does not appear on hover when the trigger is set to focus', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="focus"><button>Focus me</button></b2b-tooltip>');
+    const tooltipDiv = await page.find('b2b-tooltip >>> div');
+    const trigger = await page.find('b2b-tooltip >>> span');
+    await trigger.hover();
+    await page.waitForChanges();
+    expect(await tooltipDiv.isVisible()).toBe(false);
+  });
+  it('does not appear on hover when the trigger is set to custom', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="custom"><button>Focus me</button></b2b-tooltip>');
+    const tooltipDiv = await page.find('b2b-tooltip >>> div');
+    const trigger = await page.find('b2b-tooltip >>> span');
+    await trigger.hover();
+    await page.waitForChanges();
+    expect(await tooltipDiv.isVisible()).toBe(false);
+  });
+  it('appears when the trigger is set to custom and the opened property changes', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<b2b-tooltip content="I am a tooltip" trigger="custom" opened="false"><button>Focus me</button></b2b-tooltip>');
+    const element = await page.find('b2b-tooltip');
+    const tooltipDiv = await page.find('b2b-tooltip >>> div');
+    element.setAttribute('opened', true);
+    await page.waitForChanges();
+    await expectToBeVisibleAfterTransition(page, tooltipDiv);
+  });
+});

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

@@ -61,9 +61,9 @@ export class B2BTooltipComponent {
   render() {
     return (h(Host, { onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave }, h("span", { class: {
         [`b2b-tooltip--${this.position}`]: true,
-        'b2b-tooltip--trigger': true,
+        'b2b-tooltip__trigger': true,
       } }, h("slot", null), h("div", { class: {
-        'b2b-tooltip--content': true,
+        'b2b-tooltip__content': true,
         'b2b-tooltip--visible': this.opened,
       } }, h("slot", { name: "content" }, this.content)))));
   }