fix: update API docs and rem ove unsed property

demo/index.html

@@ -71,6 +71,14 @@ <h1>auro-checkbox</h1>
         </span>
       </p>
 
+      <p>Group only</p>
+      <demo-snippet>
+        <template>
+          <auro-checkbox-group>
+          </auro-checkbox-group>
+        </template>
+      </demo-snippet>
+
       <p>Default checkbox group</p>
       <demo-snippet>
         <template>
@@ -172,82 +180,73 @@ <h1>auro-checkbox</h1>
       <p>Checkbox group with option set to <code>checked</code></p>
       <demo-snippet>
         <template>
-          <auro-checkbox-group label="Form label goes here">
+          <auro-checkbox-group>
+            <span slot="legend">Form label goes here</span>
             <auro-checkbox
               id="computers"
-              label="Computers"
               name="checkboxDemo4"
               value="computers"
               checked
-            ></auro-checkbox>
+            >Computers</auro-checkbox>
             <auro-checkbox
               id="music"
-              label="Music"
               name="checkboxDemo4"
               value="music"
-            ></auro-checkbox>
+            >Music</auro-checkbox>
             <auro-checkbox
               id="arts"
-              label="Arts"
               name="checkboxDemo4"
               value="arts"
-            ></auro-checkbox>
+            >Arts</auro-checkbox>
           </auro-checkbox-group>
         </template>
       </demo-snippet>
 
       <p>Checkbox group set <code>disabled</code></p>
       <demo-snippet>
         <template>
-          <auro-checkbox-group label="Form label goes here" disabled>
+          <auro-checkbox-group disabled>
+            <span slot="legend">Form label goes here</span>
             <auro-checkbox
               id="computers"
-              label="Computers"
               name="checkboxDemo5"
               value="computers"
               checked
-            ></auro-checkbox>
+            >Computers</auro-checkbox>
             <auro-checkbox
               id="music"
-              label="Music"
               name="checkboxDemo5"
               value="music"
-            ></auro-checkbox>
+            >Music</auro-checkbox>
             <auro-checkbox
               id="arts"
-              label="Arts"
               name="checkboxDemo5"
               value="arts"
-            ></auro-checkbox>
+            >Arts</auro-checkbox>
           </auro-checkbox-group>
         </template>
       </demo-snippet>
 
       <p>Checkbox group with error</p>
       <demo-snippet>
         <template>
-          <auro-checkbox-group
-            label="Form label goes here"
-            error="Selection is required; please update."
-          >
+          <auro-checkbox-group error="Selection is required; please update.">
+            <span slot="legend">Form label goes here</span>
             <auro-checkbox
               id="computers"
-              label="Computers"
               name="checkboxDemo6"
               value="computers"
-            ></auro-checkbox>
+            >Computers</auro-checkbox>
             <auro-checkbox
               id="music"
-              label="Music"
               name="checkboxDemo6"
               value="music"
-            ></auro-checkbox>
+            >Music</auro-checkbox>
             <auro-checkbox
               id="arts"
-              label="Arts"
               name="checkboxDemo6"
               value="arts"
-            ></auro-checkbox>
+            >Arts</auro-checkbox>
           </auro-checkbox-group>
         </template>
       </demo-snippet>

docs/api.md

@@ -1,20 +1,20 @@
 ## Properties: auro-checkbox-group
 
 | Attribute | Value type | Description |
-|----|----|----|
+|----|----|----
 | disabled | boolean | enables disabled state of the element |
 | error | string | set error message for checkbox group |
 | horizontal | boolean | toggles layout direction, default is `vertical`, max 3 options |
-| label | string | sets content for checkbox group label |
+| required | boolean | defines element group as required|
 
 ## Properties: auro-checkbox
 
-| Attribute | Value type | Description |
-|----|----|----|
+| Attribute | Value type |Description |
+|----|----|----
 | checked | boolean | enables checked state of the element |
 | disabled | boolean | enables disabled state of the element |
-| error | string | set error state for checkbox |
+| required | boolean | defines element as required |
+| error | boolean | set error state for checkbox |
 | id | string | sets the individual `id` per element |
-| label | string | sets content for checkbox label |
 | name | string | Accepts any string, `DOMString` representing the value of the input |
 | value | string | sets the elements input value |

src/auro-checkbox-group.js

@@ -31,7 +31,7 @@ class AuroCheckboxGroup extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.items = Array.from(this.querySelectorAll('auro-checkbox')) || [];
+    this.items = Array.from(this.querySelectorAll('auro-checkbox'));
 
     this.items.forEach((el) => {
       el.disabled = this.disabled

src/auro-checkbox.js

@@ -39,7 +39,6 @@ class AuroCheckbox extends LitElement {
         reflect: true
       },
       id:       { type: String },
-      label:    { type: String },
       name:     { type: String },
       value:    { type: String }
     };

test/auro-checkbox.test.js

@@ -17,7 +17,7 @@ describe('auro-checkbox-group', () => {
         horizontal
         required
         error=${expectedError}
-      ></ods-inputoption-radio-group>
+      >Checkbox option</auro-checkbox-group>
     `);
 
     const root = el.shadowRoot;
@@ -26,6 +26,10 @@ describe('auro-checkbox-group', () => {
     expect(el.horizontal).to.be.true;
     expect(el.required).to.be.true;
     expect(error.textContent).be.equal(expectedError);
+    expect(el).dom.to.equal(`
+    <auro-checkbox-group horizontal required error="${expectedError}">
+      Checkbox option
+    </auro-checkbox-group>`);
   });
 });
 
@@ -43,8 +47,9 @@ describe('auro-checkbox', () => {
         value="${expectedValue}"
         checked
         disabled
+        required
         error="${expectedError}"
-      ></auro-checkbox>
+      >Checkbox option</auro-checkbox>
     `);
 
     const root = el.shadowRoot;
@@ -57,6 +62,10 @@ describe('auro-checkbox', () => {
     expect(input.name).to.equal(expectedName);
     expect(input.type).to.equal('checkbox');
     expect(errorBorder).to.not.be.undefined;
+    expect(el).dom.to.equal(`
+    <auro-checkbox id="${expectedId}" name="${expectedName}" value="${expectedValue}" error="${expectedError}" checked disabled required>
+      Checkbox option
+    </auro-checkbox>`);
   });
 
   it('should fire a input event with correct data', async () => {