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

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

@@ -0,0 +1,256 @@
+import { newE2EPage } from '@stencil/core/testing';
+import { PaginationConstants } from './pagination.constants';
+describe('B2B-Pagination', () => {
+  let page;
+  const getPaginationElement = async (page) => await page.find('b2b-pagination >>> nav');
+  const clickBack = async (pagination) => {
+    const backButton = await pagination.find({
+      text: PaginationConstants.BACK,
+    });
+    await backButton.click();
+  };
+  const clickNext = async (pagination) => {
+    const nextButton = await pagination.find({
+      text: PaginationConstants.NEXT,
+    });
+    await nextButton.click();
+  };
+  const navigationItemsSelector = 'b2b-pagination >>> li.b2b-pagination--item';
+  it('should set next page to active when click on next button', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='1'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    let firstItem = await pagination.find({ text: '1' });
+    expect(firstItem).toHaveAttribute('active');
+    await clickNext(pagination);
+    await page.waitForChanges();
+    firstItem = await pagination.find({ text: '1' });
+    expect(firstItem).not.toHaveAttribute('active');
+    const secondItem = await pagination.find({ text: '2' });
+    expect(secondItem).toHaveAttribute('active');
+  });
+  it('should set previous page to active when click on previous button', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='5'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    let lastItem = await pagination.find({ text: '5' });
+    expect(lastItem).toHaveAttribute('active');
+    await clickBack(pagination);
+    await page.waitForChanges();
+    lastItem = await pagination.find({ text: '5' });
+    expect(lastItem).not.toHaveAttribute('active');
+    const secondItem = await pagination.find({ text: '4' });
+    expect(secondItem).toHaveAttribute('active');
+  });
+  it('should update the items collection when navigating forward', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='7' active-page='3'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    let items = await page.findAll(navigationItemsSelector);
+    const startingItemsCollection = ['1', '2', '3', '...', '7'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(startingItemsCollection[index]);
+    });
+    await clickNext(pagination);
+    await page.waitForChanges();
+    items = await page.findAll(navigationItemsSelector);
+    const expectedNextItemCollection = ['1', '...', '3', '4', '5', '...', '7'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedNextItemCollection[index]);
+    });
+    const nextActiveItem = await pagination.find({ text: '4' });
+    expect(nextActiveItem).toHaveAttribute('active');
+  });
+  it('should update the items collection when navigating back', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='7' active-page='5'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    let items = await page.findAll(navigationItemsSelector);
+    const startingItemsCollection = ['1', '...', '5', '6', '7'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(startingItemsCollection[index]);
+    });
+    await clickBack(pagination);
+    await page.waitForChanges();
+    items = await page.findAll(navigationItemsSelector);
+    const expectedBackItemCollection = ['1', '...', '3', '4', '5', '...', '7'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedBackItemCollection[index]);
+    });
+    const nextActiveItem = await pagination.find({ text: '4' });
+    expect(nextActiveItem).toHaveAttribute('active');
+  });
+  it('should navigate to the selected item', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='7' active-page='1'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    let nextSelectedItem = await pagination.find({ text: '2' });
+    expect(nextSelectedItem).not.toHaveAttribute('active');
+    await nextSelectedItem.click();
+    await page.waitForChanges();
+    nextSelectedItem = await pagination.find({ text: '2' });
+    expect(nextSelectedItem).toHaveAttribute('active');
+  });
+  it('should jump 2 steps forward when clicking right DOTS', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='10' active-page='3'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    // only one DOTS element in this example - right DOTS
+    let dotsItem = await pagination.find({ text: PaginationConstants.DOTS });
+    await dotsItem.click();
+    await page.waitForChanges();
+    const nextItem = await pagination.find({ text: '5' });
+    expect(nextItem).toHaveAttribute('active');
+    const items = await page.findAll(navigationItemsSelector);
+    const expectedBackItemCollection = ['1', '...', '4', '5', '6', '...', '10'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedBackItemCollection[index]);
+    });
+  });
+  it('should jump 2 steps back when clicking left DOTS', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='10' active-page='8'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    // only one DOTS element in this example - left DOTS
+    let dotsItem = await pagination.find({ text: PaginationConstants.DOTS });
+    await dotsItem.click();
+    await page.waitForChanges();
+    const nextItem = await pagination.find({ text: '6' });
+    expect(nextItem).toHaveAttribute('active');
+    const items = await page.findAll(navigationItemsSelector);
+    const expectedBackItemCollection = ['1', '...', '5', '6', '7', '...', '10'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedBackItemCollection[index]);
+    });
+  });
+  it('back button should disappear when first page is selected ', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='2'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    let backButton = await pagination.find({ text: PaginationConstants.BACK });
+    expect(backButton).not.toBeNull();
+    let firstPage = await pagination.find({ text: '1' });
+    await firstPage.click();
+    backButton = await pagination.find({ text: PaginationConstants.BACK });
+    expect(backButton).toBeNull();
+  });
+  it('next button should disappear when last page is selected ', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='4'></b2b-pagination>`);
+    await page.waitForChanges();
+    const pagination = await getPaginationElement(page);
+    let nextButton = await pagination.find({ text: PaginationConstants.NEXT });
+    expect(nextButton).not.toBeNull();
+    let lastPage = await pagination.find({ text: '5' });
+    await lastPage.click();
+    nextButton = await pagination.find({ text: PaginationConstants.NEXT });
+    expect(nextButton).toBeNull();
+  });
+  it('should emit event with details when click on next button', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='1'></b2b-pagination>`);
+    await page.waitForChanges();
+    const paginationEvent = await page.spyOnEvent('b2b-page-change');
+    const pagination = await getPaginationElement(page);
+    await clickNext(pagination);
+    expect(paginationEvent).toHaveReceivedEvent();
+    expect(paginationEvent).toHaveFirstReceivedEventDetail({
+      lastSelectedPage: 1,
+      currentPage: 2,
+      direction: 'NEXT',
+    });
+  });
+  it('should emit event with details when click on back button', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='5'></b2b-pagination>`);
+    await page.waitForChanges();
+    const paginationEvent = await page.spyOnEvent('b2b-page-change');
+    const pagination = await getPaginationElement(page);
+    await clickBack(pagination);
+    expect(paginationEvent).toHaveReceivedEvent();
+    expect(paginationEvent).toHaveFirstReceivedEventDetail({
+      lastSelectedPage: 5,
+      currentPage: 4,
+      direction: 'PREVIOUS',
+    });
+  });
+  it('should emit event with details when click on an item', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='1'></b2b-pagination>`);
+    await page.waitForChanges();
+    const paginationEvent = await page.spyOnEvent('b2b-page-change');
+    const pagination = await getPaginationElement(page);
+    let nextItem = await pagination.find({ text: '4' });
+    await nextItem.click();
+    await page.waitForChanges();
+    expect(paginationEvent).toHaveReceivedEvent();
+    expect(paginationEvent).toHaveFirstReceivedEventDetail({
+      lastSelectedPage: 1,
+      currentPage: 4,
+    });
+  });
+  it('should refresh items when total items changes dynamically', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='1'></b2b-pagination>`);
+    await page.waitForChanges();
+    let items = await page.findAll(navigationItemsSelector);
+    const expectedInitialCollection = ['1', '2', '3', '4', '5'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedInitialCollection[index]);
+    });
+    const element = await page.find('b2b-pagination');
+    await element.setAttribute('total-pages', 20);
+    await page.waitForChanges();
+    items = await page.findAll(navigationItemsSelector);
+    const expectedUpdatedCollection = ['1', '2', '3', '...', '20'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedUpdatedCollection[index]);
+    });
+  });
+  it('should set selected page to total pages when total items changes dynamically and is lower than selected page', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='20' active-page='10'></b2b-pagination>`);
+    await page.waitForChanges();
+    const element = await page.find('b2b-pagination');
+    expect(element.getAttribute('active-page')).toBe('10');
+    await element.setAttribute('total-pages', 5);
+    await page.waitForChanges();
+    expect(element.getAttribute('active-page')).toBe('5');
+  });
+  it('should refresh items when active page changes dynamically', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='10' active-page='1'></b2b-pagination>`);
+    await page.waitForChanges();
+    let items = await page.findAll(navigationItemsSelector);
+    const expectedInitialCollection = ['1', '2', '3', '...', '10'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedInitialCollection[index]);
+    });
+    const element = await page.find('b2b-pagination');
+    await element.setAttribute('active-page', 5);
+    await page.waitForChanges();
+    items = await page.findAll(navigationItemsSelector);
+    const expectedUpdatedCollection = ['1', '...', '4', '5', '6', '...', '10'];
+    items.forEach((item, index) => {
+      expect(item.textContent).toBe(expectedUpdatedCollection[index]);
+    });
+  });
+  it('should set selected page to total pages when selected page changes dynamically and is higher than total pages', async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-pagination total-pages='5' active-page='2'></b2b-pagination>`);
+    await page.waitForChanges();
+    const element = await page.find('b2b-pagination');
+    expect(element.getAttribute('active-page')).toBe('2');
+    await element.setAttribute('active-page', 20);
+    await page.waitForChanges();
+    expect(element.getAttribute('active-page')).toBe('5');
+  });
+});

package/dist/collection/components/pagination/pagination.js

@@ -86,9 +86,9 @@ export class PaginationComponent {
   }
   getItemClass(navItem) {
     return {
-      'b2b-pagination--first-item': navItem === this.firstPageIndex,
-      'b2b-pagination--last-item': navItem === this.totalPages,
-      'b2b-pagination--item': true,
+      'b2b-pagination__first-item': navItem === this.firstPageIndex,
+      'b2b-pagination__last-item': navItem === this.totalPages,
+      'b2b-pagination__item': true,
     };
   }
   render() {

package/dist/collection/components/pagination/pagination.spec.js

@@ -0,0 +1,104 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { PaginationComponent } from './pagination';
+import { PaginationConstants } from './pagination.constants';
+describe('B2B-Pagination', () => {
+  const backAndForwardItems = 2;
+  const getItem = (page, itemText) => {
+    const allItemElements = page.root.shadowRoot.querySelectorAll('li.b2b-pagination__item b2b-button');
+    const allItems = Array.from(allItemElements);
+    return allItems.find(item => item.textContent === itemText);
+  };
+  it('active page should be 1 by default', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination></b2b-pagination>`,
+    });
+    expect(page.rootInstance.activePage).toBe(1);
+  });
+  it('total pages should be 1 by default', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination></b2b-pagination>`,
+    });
+    expect(page.rootInstance.totalPages).toBe(1);
+  });
+  it('selected element must render button as active', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination total-pages='5' active-page='1'></b2b-pagination>`,
+    });
+    await page.waitForChanges();
+    const firstItem = getItem(page, '1');
+    const isSelectedButtonActive = firstItem.getAttribute('active');
+    expect(isSelectedButtonActive).not.toBeNull();
+    const secondItem = getItem(page, '2');
+    const isSecondButtonActive = secondItem.getAttribute('active');
+    expect(isSecondButtonActive).toBeNull();
+  });
+  it('should show at most 5 items', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination total-pages='10' active-page='2'></b2b-pagination>`,
+    });
+    await page.waitForChanges();
+    const listElements = page.root.shadowRoot.querySelectorAll('li');
+    expect(listElements.length).toBe(5 + backAndForwardItems);
+  });
+  it('should show total number of pages in the last item', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination total-pages='10'></b2b-pagination>`,
+    });
+    await page.waitForChanges();
+    const lastItemNPosition = 2;
+    const lastItemSelector = `li.b2b-pagination__item:nth-last-of-type(${lastItemNPosition})`;
+    const lastItem = page.root.shadowRoot.querySelector(lastItemSelector);
+    expect(lastItem.textContent).toBe('10');
+  });
+  it('should show dots on the second to last item when initial items active and total pages greater than 5', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination total-pages='10' active-page='1'></b2b-pagination>`,
+    });
+    await page.waitForChanges();
+    const secondToLastItemSelector = `li.b2b-pagination__item:nth-last-of-type(3)`;
+    const lastItem = page.root.shadowRoot.querySelector(secondToLastItemSelector);
+    expect(lastItem.textContent).toBe(PaginationConstants.DOTS);
+  });
+  it('should show dots on the second item when any of last items are active', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination total-pages='10' active-page='8'></b2b-pagination>`,
+    });
+    await page.waitForChanges();
+    const secondItemSelector = `li.b2b-pagination__item:nth-of-type(3)`;
+    const secondItem = page.root.shadowRoot.querySelector(secondItemSelector);
+    expect(secondItem.textContent).toBe(PaginationConstants.DOTS);
+  });
+  it('should show dots on the second and second to last items when middle item is active', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination total-pages='10' active-page='5'></b2b-pagination>`,
+    });
+    await page.waitForChanges();
+    const secondItemSelector = `li.b2b-pagination__item:nth-of-type(3)`;
+    const secondItem = page.root.shadowRoot.querySelector(secondItemSelector);
+    expect(secondItem.textContent).toBe(PaginationConstants.DOTS);
+    const secondToLastItemSelector = `li.b2b-pagination__item:nth-last-of-type(3)`;
+    const lastItem = page.root.shadowRoot.querySelector(secondToLastItemSelector);
+    expect(lastItem.textContent).toBe(PaginationConstants.DOTS);
+  });
+  it('should not show dots when 5 items or less', async () => {
+    const page = await newSpecPage({
+      components: [PaginationComponent],
+      html: `<b2b-pagination total-pages='5' active-page='2'></b2b-pagination>`,
+    });
+    await page.waitForChanges();
+    const secondItemSelector = `li.b2b-pagination__item:nth-of-type(3)`;
+    const secondItem = page.root.shadowRoot.querySelector(secondItemSelector);
+    expect(secondItem.textContent).toBe('2');
+    const secondToLastItemSelector = `li.b2b-pagination__item:nth-last-of-type(3)`;
+    const lastItem = page.root.shadowRoot.querySelector(secondToLastItemSelector);
+    expect(lastItem.textContent).toBe('4');
+  });
+});

package/dist/collection/components/paragraph/paragraph.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */
@@ -218,26 +218,26 @@
   color: var(--b2b-color-copy-default);
   margin: 0 0 var(--b2b-size-30);
 }
-.b2b-paragraph.size-50 {
+.b2b-paragraph--size-50 {
   font-size: var(--b2b-size-copy-50);
   line-height: var(--b2b-size-copy-line-height-75);
 }
-.b2b-paragraph.size-100 {
+.b2b-paragraph--size-100 {
   font-size: var(--b2b-size-copy-100);
   line-height: var(--b2b-size-copy-line-height-100);
 }
-.b2b-paragraph.weight-normal {
+.b2b-paragraph--weight-normal {
   font-weight: var(--b2b-font-weight-normal);
 }
-.b2b-paragraph.weight-bold {
+.b2b-paragraph--weight-bold {
   font-weight: var(--b2b-font-weight-bold);
 }
-.b2b-paragraph.align-left {
+.b2b-paragraph--align-left {
   text-align: left;
 }
-.b2b-paragraph.align-right {
+.b2b-paragraph--align-right {
   text-align: right;
 }
-.b2b-paragraph.align-center {
+.b2b-paragraph--align-center {
   text-align: center;
 }

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

@@ -0,0 +1,13 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Paragraph', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`<b2b-paragraph>Paragraph</b2b-paragraph>`);
+  });
+  it('should render paragraph component', async () => {
+    const element = await page.find('b2b-paragraph');
+    expect(element).not.toBeNull();
+    expect(element).toEqualText('Paragraph');
+  });
+});

package/dist/collection/components/paragraph/paragraph.js

@@ -12,9 +12,9 @@ export class ParagraphComponent {
   render() {
     return (h("p", { class: {
         'b2b-paragraph': true,
-        ['size-' + this.size]: true,
-        ['weight-' + this.weight]: true,
-        ['align-' + this.align]: true,
+        ['b2b-paragraph--size-' + this.size]: true,
+        ['b2b-paragraph--weight-' + this.weight]: true,
+        ['b2b-paragraph--align-' + this.align]: true,
       } }, h("slot", null)));
   }
   static get is() { return "b2b-paragraph"; }

package/dist/collection/components/radio/radio.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -0,0 +1,36 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('b2b-radio', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent('<b2b-radio-button label="test" value="one"></b2b-radio-button>');
+  });
+  it('renders', async () => {
+    const element = await page.find('b2b-radio-button');
+    expect(element).toBeDefined();
+  });
+  it('emits when clicked', async () => {
+    const spy = await page.spyOnEvent('b2b-change');
+    const element = await page.find('b2b-radio-button');
+    await element.click();
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEvent();
+  });
+  it('should not emit when radio is already selected', async () => {
+    const spy = await page.spyOnEvent('b2b-change');
+    const element = await page.find('b2b-radio-button');
+    await element.click();
+    await element.click();
+    await page.waitForChanges();
+    expect(spy).toHaveReceivedEventTimes(1);
+  });
+  it('should not emit when radio is disabled', async () => {
+    const spy = await page.spyOnEvent('b2b-change');
+    const element = await page.find('b2b-radio-button');
+    await element.setProperty('disabled', true);
+    await page.waitForChanges();
+    await element.click();
+    await page.waitForChanges();
+    expect(spy).not.toHaveReceivedEvent();
+  });
+});

package/dist/collection/components/radio/radio.spec.js

@@ -0,0 +1,38 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { B2bRadioButtonComponent } from './radio';
+it('should render the radio button', async () => {
+  const page = await newSpecPage({
+    components: [B2bRadioButtonComponent],
+    template: () => (h("b2b-radio-button", { label: "test", name: "radio-test" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should disable the radio button', async () => {
+  const page = await newSpecPage({
+    components: [B2bRadioButtonComponent],
+    template: () => (h("b2b-radio-button", { label: "test", name: "radio-test", disabled: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a hint message if a hint string is specified', async () => {
+  const page = await newSpecPage({
+    components: [B2bRadioButtonComponent],
+    template: () => (h("b2b-radio-button", { label: "test", name: "radio-test", hint: "this is a hint" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should apply an error style if it is marked as invalid.', async () => {
+  const page = await newSpecPage({
+    components: [B2bRadioButtonComponent],
+    template: () => (h("b2b-radio-button", { label: "test", name: "radio-test", error: "this is an error", invalid: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render an error message if an error is specified and it is marked as invalid', async () => {
+  const page = await newSpecPage({
+    components: [B2bRadioButtonComponent],
+    template: () => (h("b2b-radio-button", { label: "test", name: "radio-test", error: "this is an error", invalid: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root, :host {
   --b2b-size-200: 5rem; /* 80px */
@@ -122,7 +122,7 @@
 }
 /**
  * Do not edit directly
- * Generated on Mon, 03 Jul 2023 11:38:27 GMT
+ * Generated on Tue, 22 Aug 2023 11:28:34 GMT
  */
 :root [data-theme="dark"] {
   --b2b-size-200: 5rem; /* 80px */

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

@@ -0,0 +1,71 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('B2B-Radio-Group', () => {
+  let page;
+  beforeEach(async () => {
+    page = await newE2EPage();
+    await page.setContent(`
+            <b2b-radio-group label="test label" name="test-group">
+                <b2b-radio-button label="one" value="one" name="test-group" id="one" hint="test" error="test"></b2b-radio-button>
+                <b2b-radio-button label="two" value="two" name="test-group" id="two"</b2b-radio-button>
+            </b2b-radio-group>
+        `);
+  });
+  it('should render the radio group component', async () => {
+    const element = await page.find('b2b-radio-group');
+    expect(element).not.toBeNull();
+  });
+  it('should have all radio buttons unchecked by default and check a radio button', async () => {
+    const element = await page.find('b2b-radio-button');
+    expect(element).not.toHaveAttribute('checked');
+    element.setAttribute('checked', true);
+    await page.waitForChanges();
+    expect(element).toHaveAttribute('checked');
+  });
+  it('should receive a custom event', async () => {
+    const element = await page.find('b2b-radio-button >>> div > input');
+    expect(element).not.toBeNull();
+    const b2bChange = await page.spyOnEvent('b2b-change');
+    await element.click();
+    await page.waitForChanges();
+    expect(b2bChange).toHaveReceivedEvent();
+  });
+  it('should emit a custom event when a radio button is checked', async () => {
+    const element = await page.find('b2b-radio-button');
+    expect(element).not.toBeNull();
+    const b2bGroupChange = await page.spyOnEvent('b2b-group-change');
+    await element.click();
+    await page.waitForChanges();
+    expect(b2bGroupChange).toHaveReceivedEvent();
+  });
+  it('should not emit an event when the checked radio is already selected', async () => {
+    const firstRadio = await page.find({ text: 'one' });
+    const changeSpy = await page.spyOnEvent('b2b-group-change');
+    await firstRadio.click();
+    await firstRadio.click();
+    await page.waitForChanges();
+    expect(changeSpy).toHaveReceivedEventTimes(1);
+  });
+  it('should disable all radio when the property is specified', async () => {
+    const parentElement = await page.find('b2b-radio-group');
+    const element = await page.find('b2b-radio-button >>> .b2b-radio');
+    expect(element).not.toHaveClass('b2b-radio--disabled');
+    parentElement.setProperty('disabled', true);
+    await page.waitForChanges();
+    expect(element).toHaveClass('b2b-radio--disabled');
+  });
+  it('should set all radio buttons to invalid when the property is specified', async () => {
+    const parentElement = await page.find('b2b-radio-group');
+    const element = await page.find('b2b-radio-button >>> .b2b-radio');
+    expect(element).not.toHaveClass('b2b-radio--error');
+    parentElement.setProperty('invalid', true);
+    await page.waitForChanges();
+    expect(element).toHaveClass('b2b-radio--error');
+  });
+  it('should remove all children hint texts when the component is rendered', async () => {
+    const element = await page.find('b2b-radio-button');
+    const error = element.error;
+    const hint = element.hint;
+    expect(hint).not.toBeDefined;
+    expect(error).not.toBeDefined;
+  });
+});

package/dist/collection/components/radio-group/radio-group.spec.js

@@ -0,0 +1,31 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { h } from '@stencil/core';
+import { RadioButtonGroupComponent } from './radio-group';
+it('should render the checkbox group and not show a hint or an error unless specified', async () => {
+  const page = await newSpecPage({
+    components: [RadioButtonGroupComponent],
+    template: () => (h("b2b-radio-group", { label: "test", name: "radio-test" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a group hint if a hint string is specified', async () => {
+  const page = await newSpecPage({
+    components: [RadioButtonGroupComponent],
+    template: () => (h("b2b-radio-group", { label: "test", hint: "this is a test hint", name: "radio-test" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should render a group error if a hint string and an error are specified and the group is set to invalid', async () => {
+  const page = await newSpecPage({
+    components: [RadioButtonGroupComponent],
+    template: () => (h("b2b-radio-group", { label: "test", name: "radio-test", hint: "this is a test hint", error: "this is a test error", invalid: true })),
+  });
+  expect(page.root).toMatchSnapshot();
+});
+it('should switch to horizontal alignment if specified', async () => {
+  const page = await newSpecPage({
+    components: [RadioButtonGroupComponent],
+    template: () => (h("b2b-radio-group", { label: "test", name: "radio-test", alignment: "horizontal" })),
+  });
+  expect(page.root).toMatchSnapshot();
+});