segmentio · jedrzejchalubek · Oct 10, 2019 · Oct 9, 2019 · Oct 10, 2019 · Oct 10, 2019
diff --git a/js/accordion-group/index.js b/js/accordion-group/index.js
@@ -0,0 +1,23 @@
+const COMPONENT_NAME = 'data-accordion-group'
+const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]`
+const ACCORDION_SELECTOR = `[data-accordion]`
+
+export default function () {
+  const components = document.querySelectorAll(COMPONENT_SELECTOR)
+
+  components.forEach(component => {
+    const accordions = component.querySelectorAll(ACCORDION_SELECTOR)
+
+    accordions.forEach(currentAccordion => {
+      currentAccordion.addEventListener('accordion.triggered', () => {
+        accordions.forEach(accordion => {
+          let activeClass = accordion.getAttribute('data-class-active') || 'active'
+
+          if (accordion.classList.contains(activeClass) && accordion != currentAccordion) {
+            accordion.classList.remove(activeClass)
+          }
+        })
+      })
+    })
+  })
+}
diff --git a/js/accordion/events.js b/js/accordion/events.js
@@ -0,0 +1,29 @@
+/**
+ * Creates a custom DOM event.
+ *
+ * @param  {String} name
+ * @return {Event}
+ */
+function createEvent (name) {
+  const event = document.createEvent('Event')
+
+  event.initEvent(name, true, true)
+
+  return event
+}
+
+/**
+ * First visit
+ *
+ * Example:
+ *   el.addEventListener('cookies.firstVisit', () => { ... })
+ *
+ * @type {Event}
+ */
+const accordionTriggered = createEvent('accordion.triggered')
+
+
+
+export {
+  accordionTriggered
+}
diff --git a/js/accordion/index.js b/js/accordion/index.js
@@ -1,3 +1,5 @@
+import { accordionTriggered } from './events'
+
 const COMPONENT_NAME = 'data-accordion'
 const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]`
 const TRIGGER_SELECTOR = `[data-ref="accordion[trigger]"]`
@@ -17,6 +19,7 @@ export default function () {
         trigger.addEventListener('click', (event) => {
           event.preventDefault()
 
+          components[i].dispatchEvent(accordionTriggered)
           components[i].classList.toggle(activeClass)
         })
       }

diff --git a/js/index.js b/js/index.js
@@ -2,13 +2,15 @@
 
 import feedback from './feedback'
 import accordion from './accordion'
+import accordionGroup from './accordion-group'
 import searchNavbar from './search-navbar'
 import menuMobile from './menu-mobile'
 import headingsAnchors from './headings-anchors'
 import dropdownMenu from './dropdown-menu'
 
 feedback()
 accordion()
+accordionGroup()
 searchNavbar()
 menuMobile()
 headingsAnchors()

diff --git a/src/_includes/components/faq.html b/src/_includes/components/faq.html
@@ -0,0 +1,20 @@
+<div class="faq">
+  {% for item in include.items %}
+    <div class="accordion" data-accordion-group>
+
+      <h3>{{ item[0] }}</h3>
+
+      {% for itemEl in item[1] %}
+      <div class="accordion__item" data-accordion data-class-active="accordion--active">
+        <div class="accordion__heading" data-ref="accordion[trigger]">
+          {{ itemEl.title }}
+          <div class="accordion__icon">
+            {% include icons/symbols/chevron-down.svg %}
+          </div>
+        </div>
+        <div class="accordion__body" data-ref="accordion[body]">{{ itemEl.content }}</div>
+      </div>
+      {% endfor %}
+    </div>
+  {% endfor %}
+</div>
diff --git a/src/_sass/components/_accordion.scss b/src/_sass/components/_accordion.scss
@@ -0,0 +1,50 @@
+.accordion {
+  $this: &;
+
+  &__item {
+    margin-top: 25px;
+
+    & + & {
+      border-top: 1px solid rgba(color(secondary), 0.16);
+      margin-top: 0;
+    }
+  }
+
+  &__heading {
+    font-size: 15px;
+    font-weight: 500;
+    color: color(secondary);
+    line-height: 1.71;
+    position: relative;
+    margin: 17px 0;
+    cursor: pointer;
+  }
+
+  &__body {
+    display: none;
+    padding-bottom: 20px;
+  }
+
+  &__icon {
+    width: 8px;
+    color: rgba(color(secondary-dark), 0.5);
+    position: absolute;
+    top: 50%;
+    right: 20px;
+    transform: translateY(-50%);
+  }
+
+  &--active {
+    #{$this}__icon {
+      transform: translateY(-50%) rotate(180deg);
+    }
+
+    #{$this}__heading {
+      margin-bottom: 12px;
+    }
+
+    #{$this}__body {
+      display: block;
+    }
+  }
+}
diff --git a/src/_sass/components/_faq.scss b/src/_sass/components/_faq.scss
@@ -0,0 +1,5 @@
+.faq {
+  > * + * {
+    margin-top: 50px;
+  }
+}
diff --git a/src/_sass/segment.scss b/src/_sass/segment.scss
@@ -79,6 +79,8 @@
 @import "components/feedback-box";
 @import "components/media-icon";
 @import "components/media-thumbnail";
+@import "components/accordion";
+@import "components/faq";
 @import "components/avatar";
 
 // Pages

diff --git a/src/styleguide.md b/src/styleguide.md
@@ -3,6 +3,17 @@ title: Styleguide
 description: The styleguide of front-end components
 hidden: true
 layout: page
+faq:
+  Source:
+    - title : "Should I track client or server-side?"
+      content : "One of the most common questions we receive is: “Should I use one of your client-side libraries or one of your server-side libraries?” This is such an important topic that we’ve written up an in-depth article in our Analytics Academy: When to Track on the Client vs Server. It’s worth a read!"
+    - title : "What are best practices in identifying users?"
+      content : "One of the most common questions we receive is: “Should I use one of your client-side libraries or one of your server-side libraries?” This is such an important topic that we’ve written up an in-depth article in our Analytics Academy: When to Track on the Client vs Server. It’s worth a read!"
+  Cloud Sources:
+    - title : "What are cloud sources?"
+      content : "One of the most common questions we receive is: “Should I use one of your client-side libraries or one of your server-side libraries?” This is such an important topic that we’ve written up an in-depth article in our Analytics Academy: When to Track on the Client vs Server. It’s worth a read!"
+    - title : "How do cloud sources work?"
+      content : "One of the most common questions we receive is: “Should I use one of your client-side libraries or one of your server-side libraries?” This is such an important topic that we’ve written up an in-depth article in our Analytics Academy: When to Track on the Client vs Server. It’s worth a read!"
 contributors:
   - name: Paul Mccall
     position: Lead Developer
@@ -124,3 +135,9 @@ analytics.identify('025pikachu025', {
 ## Callout
 
 {% include components/callout.html title="Get started with Segment" content="Segment is the easiest way to integrate your websites & mobile apps data to 250+ analytics and growth tools." %}
+
+---
+
+## FAQ
+
+{% include components/faq.html items=page.faq %}