Merge pull request #7 from flyntwp/accordion-adjustments

Accordion Adjustments
flyntwp · Apr 4, 2019 · 2b2e6ae · 2b2e6ae
2 parents a1af0d5 + b430a77
commit 2b2e6ae
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 40 deletions.
diff --git a/Components/AccordionDefault/index.twig b/Components/AccordionDefault/index.twig
@@ -1,15 +1,16 @@
 <div class="flyntComponent" is="flynt-accordion-default">
   <div class="container">
     <div class="content">
-      <ul class="accordion" aria-label="Accordion Panel">
+      <ul class="accordion">
         {% for panel in accordionPanels %}
           <li class="panel">
             <button class="panel-trigger h3" type="button" aria-expanded="false" aria-controls="content-{{ loop.index }}">
-              {{ panel.panelTitle }}
-              <span class="panel-arrow"></span>
+              {{ panel.panelTitle|e }}
             </button>
             <div class="panel-content" aria-hidden="true" id="content-{{ loop.index }}">
-              {{ panel.panelContent }}
+              <div class="panel-inner">
+                {{ panel.panelContent|e('wp_kses_post') }}
+              </div>
             </div>
           </li>
         {% endfor %}

diff --git a/Components/AccordionDefault/script.js b/Components/AccordionDefault/script.js
@@ -4,26 +4,21 @@ class AccordionDefault extends window.HTMLDivElement {
   constructor (self) {
     self = super(self)
     self.$ = $(self)
-    self.resolveElements()
     return self
   }
 
-  resolveElements () {
-    this.$accordionTriggers = $('[aria-controls]', this)
-  }
-
   connectedCallback () {
-    this.$.on('click', this.$accordionTriggers.selector, this.togglePanel)
+    this.$.on('click', '[aria-controls]', this.togglePanel)
   }
 
   togglePanel () {
-    let $this = $(this)
-    if ($this.attr('aria-expanded') === 'true') {
-      $this.attr('aria-expanded', 'false')
-      $this.next().attr('aria-hidden', 'true').slideUp()
+    const $panel = $(this)
+    if ($panel.attr('aria-expanded') === 'true') {
+      $panel.attr('aria-expanded', 'false')
+      $panel.next().attr('aria-hidden', 'true').slideUp()
     } else {
-      $this.attr('aria-expanded', 'true')
-      $this.next().attr('aria-hidden', 'false').slideDown()
+      $panel.attr('aria-expanded', 'true')
+      $panel.next().attr('aria-hidden', 'false').slideDown()
     }
   }
 }

diff --git a/Components/AccordionDefault/style.scss b/Components/AccordionDefault/style.scss
@@ -30,35 +30,41 @@
       padding: 15px 30px 15px 0;
       position: relative;
       width: 100%;
-    }
 
-    &-arrow {
-      $colorTextRgb: red($color-contrast), green($color-contrast), blue($color-contrast);
+      &::after {
+        $colorTextRgb: red($color-contrast), green($color-contrast), blue($color-contrast);
 
-      background-image: url("data:image/svg+xml;utf8,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><polyline fill='none' stroke='rgb(#{$colorTextRgb})' stroke-width='2'  points='2,9 16,25 30,9 '/></svg>");
-      background-position: center center;
-      background-repeat: no-repeat;
-      background-size: 100%;
-      display: block;
-      height: 20px;
-      position: absolute;
-      right: 0;
-      top: 50%;
-      transform: translateY(-50%);
-      transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
-      width: 30px;
-    }
-  }
+        background-image: url("data:image/svg+xml;utf8,<svg width='32' height='32' xmlns='http://www.w3.org/2000/svg'><polyline fill='none' stroke='rgb(#{$colorTextRgb})' stroke-width='2' points='2,9 16,25 30,9 '/></svg>");
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 100%;
+        content: '';
+        display: block;
+        height: 100%;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transition: transform 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+        width: 30px;
+      }
 
-  [aria-expanded="true"] {
-    .panel-arrow {
-      transform: translateY(-50%) rotateX(180deg);
+      &[aria-expanded="true"] {
+        &::after {
+          transform: rotateX(180deg);
+        }
+      }
     }
-  }
 
-  .panel-content {
-    @include resetContentMargins;
+    // do not add margins or padding to this, it will break the layout
+    &-content {
+      display: none;
+      margin: 0;
+      padding: 0;
+    }
 
-    display: none;
+    // add custom paddings here
+    &-inner {
+      padding: 0;
+    }
   }
 }