@otto-de/b2b-core-components 1.30.0 → 1.31.1

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

@@ -0,0 +1,257 @@
+import { newE2EPage } from "@stencil/core/testing";
+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: "\u2039" /* PaginationConstants.BACK */,
+        });
+        await backButton.click();
+    };
+    const clickNext = async (pagination) => {
+        const nextButton = await pagination.find({
+            text: "\u203A" /* 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: "\u2039" /* PaginationConstants.BACK */ });
+        expect(backButton).not.toBeNull();
+        let firstPage = await pagination.find({ text: '1' });
+        await firstPage.click();
+        backButton = await pagination.find({ text: "\u2039" /* 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: "\u203A" /* PaginationConstants.NEXT */ });
+        expect(nextButton).not.toBeNull();
+        let lastPage = await pagination.find({ text: '5' });
+        await lastPage.click();
+        nextButton = await pagination.find({ text: "\u203A" /* 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();
+        let element = await page.find('b2b-pagination');
+        expect(element.getAttribute('active-page')).toBe('10');
+        await element.setAttribute('total-pages', 5);
+        await page.waitForChanges();
+        element = await page.find('b2b-pagination');
+        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();
+        let element = await page.find('b2b-pagination');
+        expect(element.getAttribute('active-page')).toBe('2');
+        await element.setAttribute('active-page', 20);
+        await page.waitForChanges();
+        element = await page.find('b2b-pagination');
+        expect(element.getAttribute('active-page')).toBe('5');
+    });
+});

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

@@ -1,14 +1,6 @@
 import { h } from "@stencil/core";
 export class PaginationComponent {
     constructor() {
-        /** The total number of pages to calculate the length of pagination component */
-        this.totalPages = 1;
-        /** Use this property to set programmatically the active page */
-        this.activePage = 1;
-        /** (optional) translation to 'Go to next page'  */
-        this.ariaLabelNextPage = 'Go to next page';
-        /** (optional) translation to 'Go to previous page'  */
-        this.ariaLabelPreviousPage = 'Go to previous page';
         this.firstPageIndex = 1;
         this.navItems = [];
         this.selectNextPage = () => {
@@ -30,6 +22,10 @@ export class PaginationComponent {
             }
             this.updateState(nextActivePage);
         };
+        this.totalPages = 1;
+        this.activePage = 1;
+        this.ariaLabelNextPage = 'Go to next page';
+        this.ariaLabelPreviousPage = 'Go to previous page';
     }
     connectedCallback() {
         this.navItems = this.getNavItems();
@@ -95,10 +91,10 @@ export class PaginationComponent {
         };
     }
     render() {
-        return (h("nav", { key: '835425d2783456b55de3948c7054da6f489a9738' }, h("ol", { key: '94eeec219c9b67f58a3600eee1bb6d8fb598d24e', class: "b2b-pagination" }, this.activePage !== 1 && (h("li", { key: '931523b89b3f71d95a5c0f15cb5a174532e49815', class: "b2b-pagination--previous" }, h("b2b-button", { key: 'a67fbe9830e29ece2833e829d3c4d5640432f41c', onClick: this.selectPreviousPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelPreviousPage }, "\u2039" /* PaginationConstants.BACK */))), this.navItems.map((navItem, index) => {
+        return (h("nav", { key: '24405723ea4d2d6427911f1546c4edfabbf98ca0' }, h("ol", { key: 'a1af6ca952107fde2f97c26d3d152ef191142bea', class: "b2b-pagination" }, this.activePage !== 1 && (h("li", { class: "b2b-pagination--previous" }, h("b2b-button", { onClick: this.selectPreviousPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelPreviousPage }, "\u2039" /* PaginationConstants.BACK */))), this.navItems.map((navItem, index) => {
             const isItemActive = this.activePage === navItem;
             return (h("li", { class: this.getItemClass(navItem) }, h("b2b-button", { onClick: () => this.setSelectedPage(navItem, index), active: isItemActive, disabled: isItemActive, size: "50", variant: "secondary" }, navItem)));
-        }), this.activePage !== this.totalPages && (h("li", { key: '139a57f16558f969ed99a8ab683ebe87e20d2e8f', class: "b2b-pagination--next" }, h("b2b-button", { key: 'c1f63c39953d2e26ee602696566bd586ff8d0807', onClick: this.selectNextPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelNextPage }, "\u203A" /* PaginationConstants.NEXT */))))));
+        }), this.activePage !== this.totalPages && (h("li", { class: "b2b-pagination--next" }, h("b2b-button", { onClick: this.selectNextPage, size: "50", variant: "secondary", "aria-label": this.ariaLabelNextPage }, "\u203A" /* PaginationConstants.NEXT */))))));
     }
     static get is() { return "b2b-pagination"; }
     static get encapsulation() { return "shadow"; }
@@ -116,7 +112,6 @@ export class PaginationComponent {
         return {
             "totalPages": {
                 "type": "number",
-                "attribute": "total-pages",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -129,14 +124,12 @@ export class PaginationComponent {
                     "tags": [],
                     "text": "The total number of pages to calculate the length of pagination component"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "total-pages",
                 "reflect": false,
                 "defaultValue": "1"
             },
             "activePage": {
                 "type": "number",
-                "attribute": "active-page",
                 "mutable": true,
                 "complexType": {
                     "original": "number",
@@ -149,14 +142,12 @@ export class PaginationComponent {
                     "tags": [],
                     "text": "Use this property to set programmatically the active page"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "active-page",
                 "reflect": true,
                 "defaultValue": "1"
             },
             "ariaLabelNextPage": {
                 "type": "string",
-                "attribute": "aria-label-next-page",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -169,14 +160,12 @@ export class PaginationComponent {
                     "tags": [],
                     "text": "(optional) translation to 'Go to next page'"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "aria-label-next-page",
                 "reflect": false,
                 "defaultValue": "'Go to next page'"
             },
             "ariaLabelPreviousPage": {
                 "type": "string",
-                "attribute": "aria-label-previous-page",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -189,8 +178,7 @@ export class PaginationComponent {
                     "tags": [],
                     "text": "(optional) translation to 'Go to previous page'"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "aria-label-previous-page",
                 "reflect": false,
                 "defaultValue": "'Go to previous page'"
             }

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

@@ -0,0 +1,103 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { PaginationComponent } from "./pagination";
+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.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

@@ -5,21 +5,15 @@ import { h } from "@stencil/core";
  */
 export class ParagraphComponent {
     constructor() {
-        /** The weight of the text. */
         this.weight = 'normal';
-        /** The size of the text. */
         this.size = '100';
-        /** The alignment of the text. */
         this.align = 'left';
-        /** Whether or not the paragraph has a bottom margin. Defaults to true. */
         this.margin = true;
-        /** The color of the paragraph. Defaults to black. */
         this.variant = 'black-100';
-        /** The positioning of the paragraph in the page flow. Defaults to native block behavior. */
         this.display = 'block';
     }
     render() {
-        return (h("p", { key: '91514bcdd1fa6711dc19ad07768e36173619e5a6', style: {
+        return (h("p", { key: 'c3781dc7215762d8dd038791943a541231731653', style: {
                 display: this.display,
             }, class: {
                 'b2b-paragraph': true,
@@ -28,7 +22,7 @@ export class ParagraphComponent {
                 ['b2b-paragraph--align-' + this.align]: true,
                 ['b2b-paragraph--no-margin']: !this.margin,
                 ['b2b-paragraph--variant-' + this.variant]: true,
-            } }, h("slot", { key: '00391f373395897a99412e5f2095ec0c10fa24d1' })));
+            } }, h("slot", { key: '5afb431d2d782751f50741a6c10a210df7b1e3e4' })));
     }
     static get is() { return "b2b-paragraph"; }
     static get encapsulation() { return "shadow"; }
@@ -46,7 +40,6 @@ export class ParagraphComponent {
         return {
             "weight": {
                 "type": "string",
-                "attribute": "weight",
                 "mutable": false,
                 "complexType": {
                     "original": "'bold' | 'normal'",
@@ -59,14 +52,12 @@ export class ParagraphComponent {
                     "tags": [],
                     "text": "The weight of the text."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "weight",
                 "reflect": false,
                 "defaultValue": "'normal'"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "'50' | '100'",
@@ -79,14 +70,12 @@ export class ParagraphComponent {
                     "tags": [],
                     "text": "The size of the text."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "size",
                 "reflect": false,
                 "defaultValue": "'100'"
             },
             "align": {
                 "type": "string",
-                "attribute": "align",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'right' | 'center'",
@@ -99,14 +88,12 @@ export class ParagraphComponent {
                     "tags": [],
                     "text": "The alignment of the text."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "align",
                 "reflect": false,
                 "defaultValue": "'left'"
             },
             "margin": {
                 "type": "boolean",
-                "attribute": "margin",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -119,14 +106,12 @@ export class ParagraphComponent {
                     "tags": [],
                     "text": "Whether or not the paragraph has a bottom margin. Defaults to true."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "true"
             },
             "variant": {
                 "type": "string",
-                "attribute": "variant",
                 "mutable": false,
                 "complexType": {
                     "original": "'black-100' | 'grey-400'",
@@ -139,14 +124,12 @@ export class ParagraphComponent {
                     "tags": [],
                     "text": "The color of the paragraph. Defaults to black."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "variant",
                 "reflect": false,
                 "defaultValue": "'black-100'"
             },
             "display": {
                 "type": "string",
-                "attribute": "display",
                 "mutable": false,
                 "complexType": {
                     "original": "'inline' | 'inline-block' | 'block'",
@@ -159,8 +142,7 @@ export class ParagraphComponent {
                     "tags": [],
                     "text": "The positioning of the paragraph in the page flow. Defaults to native block behavior."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "display",
                 "reflect": false,
                 "defaultValue": "'block'"
             }

package/dist/collection/components/progress-bar/progress-bar.e2e.js

@@ -0,0 +1,43 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe('B2B-Progress-bar', () => {
+    it('should render b2b progress bar', async () => {
+        const page = await newE2EPage();
+        await page.setContent("<b2b-progress-bar progress='80' />");
+        const element = await page.find('b2b-progress-bar');
+        expect(element).not.toBeNull();
+        const label = await page.find('b2b-progress-bar >>> .b2b-progress-bar__label-none');
+        expect(label).not.toBeNull();
+    });
+    it('should render b2b progress bar with label on bottom left', async () => {
+        const page = await newE2EPage();
+        await page.setContent("<b2b-progress-bar progress='70' label='Label below to the left' label-type='below' label-position='left' />");
+        const element = await page.find('b2b-progress-bar');
+        expect(element).not.toBeNull();
+        const label = await page.find('b2b-progress-bar >>> .b2b-progress-bar__label__left-below');
+        expect(label.textContent).toBe('Label below to the left');
+    });
+    it('should render b2b progress bar with label on bottom right', async () => {
+        const page = await newE2EPage();
+        await page.setContent("<b2b-progress-bar progress='70' label='Label below to the right' label-type='below' label-position='right' />");
+        const element = await page.find('b2b-progress-bar');
+        expect(element).not.toBeNull();
+        const label = await page.find('b2b-progress-bar >>> .b2b-progress-bar__label__right-below');
+        expect(label.textContent).toBe('Label below to the right');
+    });
+    it('should render b2b progress bar with label on left side', async () => {
+        const page = await newE2EPage();
+        await page.setContent("<b2b-progress-bar progress='70' label='Label on the left side' label-type='side' label-position='left' />");
+        const element = await page.find('b2b-progress-bar');
+        expect(element).not.toBeNull();
+        const label = await page.find('b2b-progress-bar >>> .b2b-progress-bar__label__left-side');
+        expect(label.textContent).toBe('Label on the left side');
+    });
+    it('should render b2b progress bar with label on right side', async () => {
+        const page = await newE2EPage();
+        await page.setContent("<b2b-progress-bar progress='70' label='Label on the right side' label-type='side' label-position='right' />");
+        const element = await page.find('b2b-progress-bar');
+        expect(element).not.toBeNull();
+        const label = await page.find('b2b-progress-bar >>> .b2b-progress-bar__label__right-side');
+        expect(label.textContent).toBe('Label on the right side');
+    });
+});