feat: make checkboxes slots

telekom · Jul 19, 2021 · dbacb8a · dbacb8a
1 parent d7c95cc
commit dbacb8a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 57 deletions.
diff --git a/packages/components/src/components/checkbox-group/checkbox-group.css b/packages/components/src/components/checkbox-group/checkbox-group.css
@@ -1,7 +1,6 @@
 .checkbox-group {
   display: inline-flex;
   flex-direction: column;
-  width: 300px;
 }
 
 .checkbox-group__container {

diff --git a/packages/components/src/components/checkbox-group/checkbox-group.tsx b/packages/components/src/components/checkbox-group/checkbox-group.tsx
@@ -20,7 +20,6 @@ export class CheckboxGroup {
   @Element() hostElement: HTMLElement;
   @Listen('scaleChange')
   scaleChangeHandler(event: CustomEvent<any>) {
-    // console.log('Received the scaleChange event: ', event.detail);
     this.handleCheckboxChange(event);
   }
 
@@ -34,15 +33,14 @@ export class CheckboxGroup {
 
   handleCheckboxGroupStatus(event?: CustomEvent<any>) {
     const checkboxes = Array.from(
-      this.hostElement.shadowRoot.querySelectorAll('scale-checkbox')
+      this.hostElement.querySelectorAll('scale-checkbox')
     );
     const labelBox = checkboxes[0];
     let countChecked = 0;
     let countUnchecked = 0;
     if (event) {
-      if (event.detail.id === 'checkbox1') {
+      if (event.detail.id === 'input-checkbox-0') {
         const checked = labelBox.checked;
-        console.log('checkbox1 clicked; checked = ', checked);
         labelBox.removeAttribute('indeterminate');
         checkboxes.forEach((checkbox) => {
           checkbox.checked = checked;
@@ -81,7 +79,6 @@ export class CheckboxGroup {
       labelBox.checked = false;
       return;
     }
-    console.log('indeterminated state');
     labelBox.setAttribute('indeterminate', 'true');
     labelBox.removeAttribute('checked');
   }
@@ -91,48 +88,10 @@ export class CheckboxGroup {
       <Host>
         <div class="checkbox-group">
           <div class="checkbox-group__label">
-            <scale-checkbox
-              input-id="checkbox1"
-              value="1"
-              label="checkbox"
-              name="nameOfCheckbox"
-              helper-text="helperText"
-            ></scale-checkbox>
+            <slot name="checkbox-header" />
           </div>
           <div class="checkbox-group__container">
-            <div class="checkbox-group__checkbox">
-              <scale-checkbox
-                input-id="checkbox2"
-                value="2"
-                label="checkbox"
-                name="nameOfCheckbox"
-              ></scale-checkbox>
-            </div>
-            <div class="checkbox-group__checkbox">
-              <scale-checkbox
-                input-id="checkbox3"
-                value="3"
-                name="nameOfCheckbox"
-				checked
-              >Checkbox Slot</scale-checkbox>
-            </div>
-            <div class="checkbox-group__checkbox">
-              <scale-checkbox
-                input-id="checkbox4"
-                value="4"
-                label="checkbox"
-                name="nameOfCheckbox"
-              ></scale-checkbox>
-            </div>
-			<div class="checkbox-group__checkbox">
-              <scale-checkbox
-                input-id="checkbox5"
-                value="5"
-                label="checkbox"
-                name="nameOfCheckbox"
-                checked
-              ></scale-checkbox>
-            </div>
+            <slot name="checkbox-list" />
           </div>
         </div>
       </Host>

diff --git a/packages/components/src/components/checkbox/checkbox.css b/packages/components/src/components/checkbox/checkbox.css
@@ -128,7 +128,7 @@ scale-checkbox {
   background: var(--color-disabled);
 }
 .checkbox--disabled.checkbox--checked
-  .checkbox__control-wrapper 
+  .checkbox__control-wrapper
   .checkbox__icon {
   color: var(--color-icon-checked-disabled);
 }
@@ -139,7 +139,7 @@ scale-checkbox {
 .checkbox
   input:checked:not([disabled])
   ~ .checkbox__control-wrapper:hover
-  .checkbox__control  */{
+  .checkbox__control  */ {
   box-shadow: none;
   border-color: var(--color-primary-hover);
   background: var(--color-primary-hover);
@@ -159,7 +159,7 @@ scale-checkbox {
 .checkbox
   input:checked:not([disabled])
   ~ .checkbox__control-wrapper:active
-  .checkbox__control  */{
+  .checkbox__control  */ {
   border-color: var(--color-primary-active);
   background: var(--color-primary-active);
 }
@@ -170,7 +170,7 @@ scale-checkbox {
 .checkbox
   input:checked:not([disabled])
   ~ .checkbox__control-wrapper:active
-  .checkbox__control  */{
+  .checkbox__control  */ {
   border-color: var(--color-primary-active);
   background: var(--color-primary-active);
 }
@@ -186,14 +186,14 @@ scale-checkbox {
 }
 
 .checkbox--enabled.checkbox--checked
-.checkbox__control-wrapper
-.checkbox__control {
+  .checkbox__control-wrapper
+  .checkbox__control {
   border: var(--scl-spacing-1) solid var(--color-primary);
   background: var(--color-primary);
 }
 .checkbox--enabled.checkbox--indeterminate
-.checkbox__control-wrapper
-.checkbox__control {
+  .checkbox__control-wrapper
+  .checkbox__control {
   border: var(--scl-spacing-1) solid var(--color-primary);
   background: var(--color-primary);
 }
@@ -221,7 +221,7 @@ scale-checkbox {
 .checkbox
   input:not([disabled])
   ~ .checkbox__control-wrapper:hover
-  ~ .checkbox__label  */{
+  ~ .checkbox__label  */ {
   color: var(--color-primary-hover);
 }
 .checkbox.checkbox--enabled
@@ -231,7 +231,7 @@ scale-checkbox {
 .checkbox
   input:not([disabled])
   ~ .checkbox__control-wrapper:active
-  .checkbox__control  */{
+  .checkbox__control  */ {
   border-color: var(--color-primary-active);
   background: var(--color-primary-active);
 }

diff --git a/packages/components/src/components/checkbox/checkbox.tsx b/packages/components/src/components/checkbox/checkbox.tsx
@@ -122,7 +122,7 @@ export class Checkbox {
   getCssClassMap() {
     return classNames(
       'checkbox',
-      this.checked ?  `checkbox--checked` : `checkbox--not-checked`,
+      this.checked ? `checkbox--checked` : `checkbox--not-checked`,
       this.indeterminate && `checkbox--indeterminate`,
       this.disabled ? `checkbox--disabled` : `checkbox--enabled`,
       this.status && `checkbox--status-${this.status}`