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

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

@@ -1,10 +1,6 @@
 import { h, Host } from "@stencil/core";
 export class ProgressBarComponent {
     constructor() {
-        /** Whether the label should be displayed below or on the side of the progress bar. */
-        this.labelType = 'below';
-        /** Whether the label should be displayed on the right or left of the progress bar. */
-        this.labelPosition = 'left';
         this.getProgress = () => {
             if (isNaN(this.progress) || this.progress < 0) {
                 return 0;
@@ -14,14 +10,18 @@ export class ProgressBarComponent {
             }
             return this.progress;
         };
+        this.progress = undefined;
+        this.label = undefined;
+        this.labelType = 'below';
+        this.labelPosition = 'left';
     }
     render() {
         const labelExists = this.label !== undefined && this.label !== '';
-        return (h(Host, { key: 'b0060404440e78b3a2331df11a2d56d4071c7e19' }, h("div", { key: '031bd2160763920981cd6491bc1099636f3c21fd', class: {
+        return (h(Host, { key: '2c21a98038eb5f9139de509825204d5536b28186' }, h("div", { key: '53b8271100890ccbf94e6452f6811f10edbbe268', class: {
                 [`b2b-progress-bar__${this.labelPosition}-${this.labelType}`]: true,
-            } }, h("div", { key: '945e5c7bf601cd8d34b0cd095245a8cc6b801cea', class: "b2b-progress-bar__wrapper" }, h("div", { key: '93086dd441221a8ff681d9de2da8ff2f2d4ae0b5', class: "b2b-progress-bar__progress", style: {
+            } }, h("div", { key: '2925cf1b343596249f110944f946ecfc01258556', class: "b2b-progress-bar__wrapper" }, h("div", { key: '32a8f9c88a507c697c45513037a4473736585efa', class: "b2b-progress-bar__progress", style: {
                 width: `${this.getProgress()}%`,
-            } })), h("div", { key: '82ce3cabe0897878d2715ca96a07ba8347f42590', class: {
+            } })), h("div", { key: 'e91835897125808aedeaed4cc4b7eda49eab2383', class: {
                 'b2b-progress-bar__label': labelExists,
                 'b2b-progress-bar__label-none': !labelExists,
                 [`b2b-progress-bar__label__${this.labelPosition}-${this.labelType}`]: labelExists,
@@ -43,7 +43,6 @@ export class ProgressBarComponent {
         return {
             "progress": {
                 "type": "number",
-                "attribute": "progress",
                 "mutable": false,
                 "complexType": {
                     "original": "number",
@@ -56,13 +55,11 @@ export class ProgressBarComponent {
                     "tags": [],
                     "text": "The percentage of progress from 0 to 100."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "progress",
                 "reflect": false
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -75,13 +72,11 @@ export class ProgressBarComponent {
                     "tags": [],
                     "text": "The label of the progress bar."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "labelType": {
                 "type": "string",
-                "attribute": "label-type",
                 "mutable": false,
                 "complexType": {
                     "original": "'below' | 'side'",
@@ -94,14 +89,12 @@ export class ProgressBarComponent {
                     "tags": [],
                     "text": "Whether the label should be displayed below or on the side of the progress bar."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label-type",
                 "reflect": false,
                 "defaultValue": "'below'"
             },
             "labelPosition": {
                 "type": "string",
-                "attribute": "label-position",
                 "mutable": false,
                 "complexType": {
                     "original": "'left' | 'right'",
@@ -114,8 +107,7 @@ export class ProgressBarComponent {
                     "tags": [],
                     "text": "Whether the label should be displayed on the right or left of the progress bar."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label-position",
                 "reflect": false,
                 "defaultValue": "'left'"
             }

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

@@ -0,0 +1,45 @@
+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();
+    });
+    it('should use label slot if provided', async () => {
+        const slotPage = await newE2EPage();
+        await slotPage.setContent(`
+      <b2b-radio-button value="one">
+        <span slot="label">Custom label</span>
+      </b2b-radio-button>`);
+        const element = await slotPage.find('span');
+        expect(element).toEqualText('Custom label');
+    });
+});

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

@@ -1,14 +1,6 @@
 import { h, Host, } from "@stencil/core";
 export class B2bRadioButtonComponent {
     constructor() {
-        /** Adds an asterisk at the end of the label to signify that the field is required. */
-        this.required = false;
-        /** Whether or not the radio button is currently checked. Per default it is false. */
-        this.checked = false;
-        /** Whether or not the radio button is currently disabled. Per default it is false. */
-        this.disabled = false;
-        /** Whether or not the radio button should be rendered with error styles. Per default it is false. */
-        this.invalid = false;
         this.handleFormData = (event) => {
             if (this.name != undefined && this.checked) {
                 const value = this.value || '';
@@ -41,6 +33,15 @@ export class B2bRadioButtonComponent {
         this.onFocus = () => {
             this.b2bFocus.emit();
         };
+        this.label = undefined;
+        this.required = false;
+        this.name = undefined;
+        this.checked = false;
+        this.disabled = false;
+        this.invalid = false;
+        this.value = undefined;
+        this.hint = undefined;
+        this.error = undefined;
     }
     connectedCallback() {
         const form = this.host.closest('form');
@@ -52,11 +53,11 @@ export class B2bRadioButtonComponent {
         return Array.from(document.querySelectorAll(`b2b-radio-button[name="${this.name}"]`)).filter((radio) => radio.value !== this.value);
     }
     render() {
-        return (h(Host, { key: 'fd1084fd2df24d7de2727441f69c03f9aa497f22', onClick: this.onClick }, h("div", { key: 'a4d0e872905049f686a1d70a883aba37bc7b3823', class: {
+        return (h(Host, { key: '28bb8bc8c3741839657f687abed7314c8cdcf7bf', onClick: this.onClick }, h("div", { key: '6d865dff87760dcaef8be42268e73f6d90ddb1c6', class: {
                 'b2b-radio': true,
                 'b2b-radio--error': this.invalid && !this.disabled,
                 'b2b-radio--disabled': this.disabled,
-            } }, h("div", { key: 'e334d57a546380ae10aad7bd6c8c1688650d5107', class: "b2b-radio-items" }, h("input", { key: '20b59620275ef3c93ecec45c4c84fd8098ce47dc', class: "b2b-radio-input", "aria-labelledby": this.name, type: "radio", checked: this.checked, disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, value: this.value }), h("b2b-input-label", { key: '71e1468f0d8046d9c80cb0bb159081a772e2b871', id: this.name, required: this.required, disabled: this.disabled }, h("slot", { key: '00b2e6022ff3cc78ef450d7a7611f08e6a5d0adb', name: "label" }, this.label))), (this.hint !== undefined && !this.invalid) ||
+            } }, h("div", { key: '6c5ca53c8d308e381d26c8802cb8521d6e987256', class: "b2b-radio-items" }, h("input", { key: 'a3ed2ab8d4defc593bcc69b5058e9d6fb674a626', class: "b2b-radio-input", "aria-labelledby": this.name, type: "radio", checked: this.checked, disabled: this.disabled, name: this.name, onBlur: this.onBlur, onFocus: this.onFocus, value: this.value }), h("b2b-input-label", { key: '69cb16d121d9283cc95ffbb0642a18d9744deece', id: this.name, required: this.required, disabled: this.disabled }, h("slot", { key: 'db1e57a9e65a52df671fa3ff35f1a9f372eca47b', name: "label" }, this.label))), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
     }
     static get is() { return "b2b-radio-button"; }
@@ -75,7 +76,6 @@ export class B2bRadioButtonComponent {
         return {
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -88,13 +88,11 @@ export class B2bRadioButtonComponent {
                     "tags": [],
                     "text": "The label of the radio button. This is required"
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -107,14 +105,12 @@ export class B2bRadioButtonComponent {
                     "tags": [],
                     "text": "Adds an asterisk at the end of the label to signify that the field is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "required",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -127,13 +123,11 @@ export class B2bRadioButtonComponent {
                     "tags": [],
                     "text": "The name of the radio button. Use it to group radio buttons together and assign the label to the input element for better accessibility. This is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "name",
                 "reflect": true
             },
             "checked": {
                 "type": "boolean",
-                "attribute": "checked",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -146,14 +140,12 @@ export class B2bRadioButtonComponent {
                     "tags": [],
                     "text": "Whether or not the radio button is currently checked. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "checked",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -166,14 +158,12 @@ export class B2bRadioButtonComponent {
                     "tags": [],
                     "text": "Whether or not the radio button is currently disabled. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -186,14 +176,12 @@ export class B2bRadioButtonComponent {
                     "tags": [],
                     "text": "Whether or not the radio button should be rendered with error styles. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "invalid",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "value": {
                 "type": "string",
-                "attribute": "value",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -206,13 +194,11 @@ export class B2bRadioButtonComponent {
                     "tags": [],
                     "text": "The value of the radio button. This will be emitted when the radio button is clicked."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "value",
                 "reflect": true
             },
             "hint": {
                 "type": "string",
-                "attribute": "hint",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -225,13 +211,11 @@ export class B2bRadioButtonComponent {
                     "tags": [],
                     "text": "A hint to give additional information on the radio button."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "hint",
                 "reflect": false
             },
             "error": {
                 "type": "string",
-                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -244,8 +228,7 @@ export class B2bRadioButtonComponent {
                     "tags": [],
                     "text": "An error text. It will only show if invalid is set to true."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "error",
                 "reflect": false
             }
         };

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.e2e.js

@@ -0,0 +1,86 @@
+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 () => {
+        let element = await page.find('b2b-radio-button');
+        expect(element).not.toHaveAttribute('checked');
+        element.setAttribute('checked', true);
+        await page.waitForChanges();
+        element = await page.find('b2b-radio-button');
+        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('b2b-radio-button[label="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');
+        let element = await page.find('b2b-radio-button >>> .b2b-radio');
+        expect(element).not.toHaveClass('b2b-radio--disabled');
+        parentElement.setProperty('disabled', true);
+        await page.waitForChanges();
+        element = await page.find('b2b-radio-button >>> .b2b-radio');
+        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');
+        let element = await page.find('b2b-radio-button >>> .b2b-radio');
+        expect(element).not.toHaveClass('b2b-radio--error');
+        parentElement.setProperty('invalid', true);
+        await page.waitForChanges();
+        element = await page.find('b2b-radio-button >>> .b2b-radio');
+        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;
+    });
+    it('should use label slot if provided ', async () => {
+        const slotPage = await newE2EPage();
+        await slotPage.setContent(`
+      <b2b-radio-group name="test-group">
+          <span slot="label">Custom label</span>
+          <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>
+  `);
+        const element = await slotPage.find('span');
+        expect(element).toEqualText('Custom label');
+    });
+});

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

@@ -1,14 +1,6 @@
 import { h, Host, } from "@stencil/core";
 export class RadioButtonGroupComponent {
     constructor() {
-        /** Adds an asterisk at the end of the label to signify that the field is required. */
-        this.required = false;
-        /** The alignment of the radio group. Can be vertical or horizontal, per default it is vertical. */
-        this.alignment = 'vertical';
-        /** Whether or not the radio group is disabled as a whole. Per default it is false. */
-        this.disabled = false;
-        /** Whether or not the radio group is invalid and should be rendered with error styles as a whole. Per default it is false. */
-        this.invalid = false;
         this.toggleAllDisabled = () => {
             let nodes = this.getChildNodes();
             if (this.disabled) {
@@ -45,6 +37,15 @@ export class RadioButtonGroupComponent {
                 node.hint = undefined;
             });
         };
+        this.name = undefined;
+        this.label = undefined;
+        this.required = false;
+        this.alignment = 'vertical';
+        this.disabled = false;
+        this.invalid = false;
+        this.hint = undefined;
+        this.error = undefined;
+        this.currentValue = undefined;
     }
     handleRadioButtonChange(ev) {
         this.currentValue = ev.detail.value;
@@ -68,11 +69,11 @@ export class RadioButtonGroupComponent {
         this.removeChildText();
     }
     render() {
-        return (h(Host, { key: '20f0ae38a1b1553824ee2fc1ecd7a1da9e5cbe4a' }, h("div", { key: 'fa144bdedfa0ee88597c6861f6deb9374360c452', class: {
+        return (h(Host, { key: '5b36240943436717e043f0c25483eef6f90229f0' }, h("div", { key: 'b9d174d04e5a280beed928e37f4355d8c1edf1aa', class: {
                 'b2b-radio-group': true,
                 'b2b-radio-group--error': this.invalid && !this.disabled,
                 [`b2b-radio-group--${this.alignment}`]: true,
-            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { key: 'd251e0b0520b3d09c855b89dec4b66f71a33e177', id: this.name, required: this.required }, h("slot", { key: 'ce19d3cc6b1318cfc078134459d25f1ecd8ddf2e', name: "label" }, this.label))), h("fieldset", { key: '49de8c71340df43099ea826deed7c4f2fd114a13' }, h("div", { key: 'e906cab5ab8c6c051406671ba1c21fa968f2fe73', class: "b2b-radio-group-options" }, h("slot", { key: '5d9b85f3290e2eb9305ad82e462a644b8f4b475b' }))), (this.hint !== undefined && !this.invalid) ||
+            } }, (this.label || this.labelSlot) && (h("b2b-input-label", { id: this.name, required: this.required }, h("slot", { name: "label" }, this.label))), h("fieldset", { key: 'd4e428dda283b88ed29f4259c3c7ad71d484648d' }, h("div", { key: '4ac819b081787a2dc468ebc3c0c84d8d182c7353', class: "b2b-radio-group-options" }, h("slot", { key: '4c8ee699036c8b3b672fbedbffc8efbbdaf86fa3' }))), (this.hint !== undefined && !this.invalid) ||
             (this.hint !== undefined && this.disabled) ? (h("span", null, this.hint)) : (''), this.error !== undefined && this.invalid && !this.disabled ? (h("span", null, this.error)) : (''))));
     }
     static get is() { return "b2b-radio-group"; }
@@ -91,7 +92,6 @@ export class RadioButtonGroupComponent {
         return {
             "name": {
                 "type": "string",
-                "attribute": "name",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -104,13 +104,11 @@ export class RadioButtonGroupComponent {
                     "tags": [],
                     "text": "The radio group name used to group them together programmatically. This is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "name",
                 "reflect": false
             },
             "label": {
                 "type": "string",
-                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -123,13 +121,11 @@ export class RadioButtonGroupComponent {
                     "tags": [],
                     "text": "The radio group label. This is optional."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "label",
                 "reflect": false
             },
             "required": {
                 "type": "boolean",
-                "attribute": "required",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -142,14 +138,12 @@ export class RadioButtonGroupComponent {
                     "tags": [],
                     "text": "Adds an asterisk at the end of the label to signify that the field is required."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "alignment": {
                 "type": "string",
-                "attribute": "alignment",
                 "mutable": false,
                 "complexType": {
                     "original": "'vertical' | 'horizontal'",
@@ -162,14 +156,12 @@ export class RadioButtonGroupComponent {
                     "tags": [],
                     "text": "The alignment of the radio group. Can be vertical or horizontal, per default it is vertical."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "alignment",
                 "reflect": false,
                 "defaultValue": "'vertical'"
             },
             "disabled": {
                 "type": "boolean",
-                "attribute": "disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -182,14 +174,12 @@ export class RadioButtonGroupComponent {
                     "tags": [],
                     "text": "Whether or not the radio group is disabled as a whole. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "invalid": {
                 "type": "boolean",
-                "attribute": "invalid",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -202,14 +192,12 @@ export class RadioButtonGroupComponent {
                     "tags": [],
                     "text": "Whether or not the radio group is invalid and should be rendered with error styles as a whole. Per default it is false."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "invalid",
                 "reflect": true,
                 "defaultValue": "false"
             },
             "hint": {
                 "type": "string",
-                "attribute": "hint",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -222,13 +210,11 @@ export class RadioButtonGroupComponent {
                     "tags": [],
                     "text": "A group hint text."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "hint",
                 "reflect": false
             },
             "error": {
                 "type": "string",
-                "attribute": "error",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -241,8 +227,7 @@ export class RadioButtonGroupComponent {
                     "tags": [],
                     "text": "A group error text. It will only show if invalid is set to true."
                 },
-                "getter": false,
-                "setter": false,
+                "attribute": "error",
                 "reflect": false
             }
         };

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();
+});