From 541b30a1930b17fcdaf1d12d062498630e829ff9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan-Niklas=20Vo=C3=9F?= <jan-niklas.voss@inovex.de>
Date: Mon, 4 Nov 2024 17:46:45 +0100
Subject: [PATCH] simplify css names to reduce overhead

---
 .../src/components/ino-meetup/ino-meetup.scss | 75 ++++++++-----------
 .../src/components/ino-meetup/ino-meetup.tsx  | 17 ++---
 2 files changed, 37 insertions(+), 55 deletions(-)

diff --git a/packages/elements/src/components/ino-meetup/ino-meetup.scss b/packages/elements/src/components/ino-meetup/ino-meetup.scss
index de3097d7c..f66a522c4 100644
--- a/packages/elements/src/components/ino-meetup/ino-meetup.scss
+++ b/packages/elements/src/components/ino-meetup/ino-meetup.scss
@@ -1,54 +1,51 @@
 @use '../base/typography-new' as typography;
 @use '../base/new-theme' as theme;
 
-.ino-meetup-accordion {
+.accordion {
   border: 1px solid theme.$n-3;
   border-radius: 8px;
   margin-bottom: 16px;
   overflow: hidden;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
-  &__header {
-    cursor: pointer;
-    padding: 16px;
-    @include typography.typo(title-s);
-    background-color: theme.$p-1;
-    transition: background-color 0.3s ease;
+  &--expanded {
+    background-color: #e8e8e8;
 
-    &:hover {
-      background-color: theme.$p-3;
+    .question::after {
+        transform: rotate(180deg);
     }
 
-    button {
-      width: 100%;
-      text-align: left;
-      background: none;
-      border: none;
-      padding: 0;
-      font: inherit;
-      cursor: pointer;
-      outline: inherit;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      &::after {
-        content: '\25BC';
-        font-size: 0.8em;
-        transition: transform 0.3s ease;
-      }
+    .answer {
+      max-height: 300px;
     }
   }
+}
 
-  &__content-wrapper {
-    max-height: 0;
-    overflow: hidden;
-    transition: max-height 0.3s ease;
+.question {
+  @include typography.typo(title-s);
+  padding: 16px;
+  background-color: theme.$p-1;
+  transition: background-color 0.3s ease;
+  width: 100%;
+  border: none;
+  display: flex;
+  justify-content: space-between;
+
+  &:hover {
+    background-color: theme.$p-3;
+  }
 
-    &--expanded {
-      max-height: 300px;
-    }
+  &::after {
+    content: '\25BC';
+    font-size: 0.8em;
+    transition: transform 0.3s ease;
   }
+}
+
+.answer {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
 
   &__content {
     padding: 16px;
@@ -56,14 +53,4 @@
     @include typography.typo(body-m);
     color: theme.$n-10;
   }
-
-  &--expanded {
-    .ino-meetup-accordion__header {
-      background-color: #e8e8e8;
-
-      button::after {
-        transform: rotate(180deg);
-      }
-    }
-  }
 }
diff --git a/packages/elements/src/components/ino-meetup/ino-meetup.tsx b/packages/elements/src/components/ino-meetup/ino-meetup.tsx
index 24bbaf074..7c074cc8c 100644
--- a/packages/elements/src/components/ino-meetup/ino-meetup.tsx
+++ b/packages/elements/src/components/ino-meetup/ino-meetup.tsx
@@ -38,17 +38,12 @@ export class MeetupAccordion implements ComponentInterface {
 
   render() {
     return (
-      <div class={{ 'ino-meetup-accordion': true, 'ino-meetup-accordion--expanded': this.expanded }}>
-        <div class="ino-meetup-accordion__header" onClick={() => this.toggleAccordion()}>
-          <button aria-expanded={this.expanded}>{this.accordionTitle}</button>
-        </div>
-        <div
-          class={{
-            'ino-meetup-accordion__content-wrapper': true,
-            'ino-meetup-accordion__content-wrapper--expanded': this.expanded,
-          }}
-        >
-          <div class="ino-meetup-accordion__content">
+      <div class={{ accordion: true, 'accordion--expanded': this.expanded }}>
+        <button class="question" onClick={() => this.toggleAccordion()}>
+          {this.accordionTitle}
+        </button>
+        <div class="answer">
+          <div class="answer__content">
             <slot />
           </div>
         </div>