feat: format and lint

telekom · Aug 2, 2021 · 90f97c7 · 90f97c7
1 parent 7550b77
commit 90f97c7
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git a/packages/components/src/components/toggle-button/toggle-button.tsx b/packages/components/src/components/toggle-button/toggle-button.tsx
@@ -62,7 +62,8 @@ export class ToggleButton {
   /** (optional) position within group */
   @Prop() position?: number;
   /** a11y text for getting meaningful value. `$buttonNumber` and `$selected` are template variables and will be replaces by their corresponding properties.  */
-  @Prop() ariaDescriptionTranslation = 'button at position $position; selected: $selected';
+  @Prop() ariaDescriptionTranslation =
+    'button at position $position; selected: $selected';
   /** Emitted when button is clicked */
   @Event() scaleClick!: EventEmitter<{ id: string; selected: boolean }>;
 

diff --git a/packages/components/src/components/toggle-group/toggle-group.spec.ts b/packages/components/src/components/toggle-group/toggle-group.spec.ts
@@ -77,7 +77,7 @@ describe('Toggle Group', () => {
   });
   describe('emitter', () => {
     it('state changes with event listened to (multi)', async () => {
-      const page = await newSpecPage({
+      page = await newSpecPage({
         components: [ToggleGroup],
         html: `<scale-toggle-group multi>
           <scale-toggle-button toggle-button-id="toggle-button-1">Click Me!</scale-toggle-button>
@@ -90,14 +90,18 @@ describe('Toggle Group', () => {
         { id: 'toggle-button-2', selected: false },
         { id: 'toggle-button-3', selected: true },
       ]);
-      page.rootInstance.scaleClickHandler({detail: { id: 'toggle-button-1', selected: true }});
+      page.rootInstance.scaleClickHandler({
+        detail: { id: 'toggle-button-1', selected: true },
+      });
       await page.waitForChanges();
       expect(page.rootInstance.status).toEqual([
         { id: 'toggle-button-1', selected: true },
         { id: 'toggle-button-2', selected: false },
         { id: 'toggle-button-3', selected: true },
       ]);
-      page.rootInstance.scaleClickHandler({detail: { id: 'toggle-button-2', selected: true }});
+      page.rootInstance.scaleClickHandler({
+        detail: { id: 'toggle-button-2', selected: true },
+      });
       await page.waitForChanges();
       expect(page.rootInstance.status).toEqual([
         { id: 'toggle-button-1', selected: true },
@@ -106,7 +110,7 @@ describe('Toggle Group', () => {
       ]);
     });
     it('state changes with event listened to (non-multi)', async () => {
-      const page = await newSpecPage({
+      page = await newSpecPage({
         components: [ToggleGroup],
         html: `<scale-toggle-group multi="false">
           <scale-toggle-button toggle-button-id="toggle-button-1">Click Me!</scale-toggle-button>
@@ -119,21 +123,27 @@ describe('Toggle Group', () => {
         { id: 'toggle-button-2', selected: false },
         { id: 'toggle-button-3', selected: true },
       ]);
-      page.rootInstance.scaleClickHandler({detail: { id: 'toggle-button-3', selected: false }});
+      page.rootInstance.scaleClickHandler({
+        detail: { id: 'toggle-button-3', selected: false },
+      });
       await page.waitForChanges();
       expect(page.rootInstance.status).toEqual([
         { id: 'toggle-button-1', selected: false },
         { id: 'toggle-button-2', selected: false },
         { id: 'toggle-button-3', selected: false },
       ]);
-      page.rootInstance.scaleClickHandler({detail: { id: 'toggle-button-2', selected: true }});
+      page.rootInstance.scaleClickHandler({
+        detail: { id: 'toggle-button-2', selected: true },
+      });
       await page.waitForChanges();
       expect(page.rootInstance.status).toEqual([
         { id: 'toggle-button-1', selected: false },
         { id: 'toggle-button-2', selected: true },
         { id: 'toggle-button-3', selected: false },
       ]);
-      page.rootInstance.scaleClickHandler({detail: { id: 'toggle-button-1', selected: true }});
+      page.rootInstance.scaleClickHandler({
+        detail: { id: 'toggle-button-1', selected: true },
+      });
       await page.waitForChanges();
       expect(page.rootInstance.status).toEqual([
         { id: 'toggle-button-1', selected: true },

diff --git a/packages/components/src/components/toggle-group/toggle-group.tsx b/packages/components/src/components/toggle-group/toggle-group.tsx
@@ -54,13 +54,13 @@ export class ToggleGroup {
   /** (optional) more than one button selected possible */
   @Prop() multi: boolean = true;
   /** (optional) aria-label attribute needed for icon-only buttons */
-  @Prop() ariaLabelTranslation =  `toggle button group with $slottedButtons buttons`;
+  @Prop()
+  ariaLabelTranslation = `toggle button group with $slottedButtons buttons`;
   /** (optional) Injected CSS styles */
   @Prop() styles?: string;
   /** Emitted when button is clicked */
   @Event() scaleClickGroup!: EventEmitter;
 
-
   @Listen('scaleClick')
   scaleClickHandler(ev) {
     let tempState: ButtonStatus[];
@@ -98,15 +98,17 @@ export class ToggleGroup {
       toggleButton.setAttribute('size', this.size);
       toggleButton.setAttribute('variant', this.variant);
       toggleButton.setAttribute('disabled', this.disabled && 'disabled');
-      toggleButton.setAttribute('position', (this.position).toString());
+      toggleButton.setAttribute('position', this.position.toString());
     });
     this.position = 0;
     this.status = tempState;
   }
 
   getAriaLabelTranslation() {
-    const filledText = this.ariaLabelTranslation
-      .replace(/\$slottedButtons/g, `${this.slottedButtons}`)
+    const filledText = this.ariaLabelTranslation.replace(
+      /\$slottedButtons/g,
+      `${this.slottedButtons}`
+    );
     return filledText;
   }
 
@@ -151,11 +153,12 @@ export class ToggleGroup {
     return (
       <Host>
         {this.styles && <style>{this.styles}</style>}
-        <div 
-          class={this.getCssClassMap()} 
-          part={this.getBasePartMap()} 
+        <div
+          class={this.getCssClassMap()}
+          part={this.getBasePartMap()}
           aria-label={this.getAriaLabelTranslation()}
-          role="group">
+          role="group"
+        >
           <slot />
         </div>
       </Host>