feat: selected state - first draft

telekom · Aug 2, 2021 · a5c4b8a · a5c4b8a
1 parent c194375
commit a5c4b8a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/packages/components/src/components/toggle-button/toggle-button.css b/packages/components/src/components/toggle-button/toggle-button.css
@@ -154,4 +154,19 @@
 
 .toggle-button:disabled.toggle-button--primary {
   background: var(--color-primary-background-disabled);
-}
+}
+
+.toggle-button--selected {
+  color: white;
+  background: var( --scl-color-primary);
+}
+
+.toggle-button--selected:not(.button--disabled):hover {
+  color: white;
+  background: var(--color-primary-hover);
+}
+
+.toggle-button--selected:not(.button--disabled):active {
+  color: white;
+  background: var(--scl-color-primary-active);
+}
diff --git a/packages/components/src/components/toggle-button/toggle-button.tsx b/packages/components/src/components/toggle-button/toggle-button.tsx
@@ -26,7 +26,7 @@ export class ToggleButton {
   /** (optional) If `true`, the button is disabled */
   @Prop() disabled?: boolean = false;
   /** (optional) If `true`, the button is selected */
-  @Prop() selected?: boolean = false;
+  @Prop({ mutable: true }) selected?: boolean = true;
   /** (optional) Button type */
   @Prop() iconOnly?: boolean = false;
   /** (optional) Icon position related to the label */
@@ -41,7 +41,11 @@ export class ToggleButton {
     this.setIconPositionProp();
   }
 
-  handleClick() {}
+  handleClick(event: MouseEvent) {
+    event.preventDefault();
+    this.selected = !this.selected;
+    // console.log(this.selected)
+  }
 
   /**
    * Detect whether the last node is an element (not text).
@@ -64,6 +68,7 @@ export class ToggleButton {
   }
 
   render() {
+    console.log('render called!')
     return (
       <Host>
         {this.styles && <style>{this.styles}</style>}
@@ -99,7 +104,9 @@ export class ToggleButton {
       !this.iconOnly &&
         this.iconPosition &&
         `toggle-button--icon-${this.iconPosition}`,
-      this.iconOnly && `${prefix}icon-only`
+      this.iconOnly && `${prefix}icon-only`,
+      !this.disabled &&
+        this.selected && `${prefix}selected`,
     );
   }
 }