feat(#138): accordion (#142)

* chore(#138): accordion template

* chore(#138): update accordion and related

---------

Co-authored-by: Brian Gilbert <[email protected]>

Author: Decipher

src/components/Accordion.stories.js

@@ -0,0 +1,38 @@
+import CTAccordion from './Accordion.vue'
+
+export default {
+  title: 'CivicTheme/Molecules/Accordion',
+  component: CTAccordion,
+  argTypes: {
+    theme: {
+      options: ['dark', 'light'],
+      control: 'select'
+    },
+  },
+  parameters: {
+    status: {
+      type: 'beta',
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    template: `<CTAccordion v-bind="$props" v-on="$props">
+  <template v-if="$props.default">{{ $props.default }}</template>
+</CTAccordion>`,
+  }
+}
+
+export const Default = Template.bind({})
+Default.storyName = 'Accordion'
+Default.args = {
+  background: false,
+  expandAll: true,
+  panels: [
+    { title: 'Accordion title 1', content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur harum magnam modi obcaecati vitae voluptatibus! Accusamus atque deleniti, distinctio esse facere, nam odio officiis omnis porro quibusdam quis repudiandae veritatis.', id: 0 },
+    { title: 'Accordion title 2', content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur harum magnam modi obcaecati vitae voluptatibus! Accusamus atque deleniti, distinctio esse facere, nam odio officiis omnis porro quibusdam quis repudiandae veritatis.', id: 1 },
+    { title: 'Accordion title 3', content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur harum magnam modi obcaecati vitae voluptatibus! Accusamus atque deleniti, distinctio esse facere, nam odio officiis omnis porro quibusdam quis repudiandae veritatis.', id: 2 },
+  ]
+}

src/components/Accordion.vue

@@ -0,0 +1,79 @@
+<template>
+  <div
+    class="ct-accordion"
+    :class="{
+      [themeClass]: true,
+      'ct-accordion--with-background': background
+    }"
+  >
+    <div class="container">
+      <div class="row">
+        <div class="col-xxs-12">
+          <!-- Slot: Content Top -->
+          <div v-if="$slots['content_top']" class="ct-accordion__content-top">
+            {{ content_top }}
+          </div>
+
+          <div class="ct-accordion__content">
+            <ul class="ct-accordion__panels">
+              <CTCollapsible
+                v-for="(panel, delta) of panels"
+                :collapsed="!expandAll && !panel.expanded"
+                class="ct-accordion__panels__panel"
+                data-collapsible-duration="250"
+                data-collapsible-trigger-wide=""
+                :key="`panel-${delta}`"
+                panel-class="ct-accordion__panels__panel__content"
+                tag="li"
+              >
+                <template #trigger>
+                  <div class="ct-accordion__panels__panel__header">
+                    <CTButton
+                      class="ct-accordion__panels__panel__header__button"
+                      data-collapsible-trigger=""
+                      :text="panel.title"
+                    />
+                  </div>
+                </template>
+
+                <CTParagraph class="ct-accordion__panels__panel__content__inner">
+                  <slot name="panel" :panel="{ panel }">
+                    {{ panel.content }}
+                  </slot>
+                </CTParagraph>
+              </CTCollapsible>
+            </ul>
+          </div>
+
+          <!-- Slot: Content Top -->
+          <div v-if="$slots['content_bottom']" class="ct-accordion__content-bottom">
+            {{ content_bottom }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ThemeMixin from '../mixins/theme'
+
+export default {
+  mixins: [ThemeMixin],
+
+  props: {
+    background: {
+      type: Boolean,
+      default: false,
+    },
+    expandAll: {
+      type: Boolean,
+      default: false,
+    },
+    panels: {
+      type: Array,
+      default: () => ([])
+    }
+  }
+}
+</script>

src/components/Button.vue

@@ -15,7 +15,7 @@
   >
     <CTIcon
       v-if="icon && iconPosition === 'before'"
-      class="ct-button__icon"
+      :class="iconClass"
       :size="iconSize"
       :symbol="icon"
     />
@@ -27,11 +27,10 @@
 
     <CTIcon
       v-if="icon && iconPosition === 'after'"
-      class="ct-button__icon"
+      :class="iconClass"
       :size="iconSize"
       :symbol="icon"
     />
-
   </component>
 </template>
 
@@ -50,6 +49,10 @@ export default {
       type: String,
       default: undefined
     },
+    iconClass: {
+      type: String,
+      default: 'ct-button__icon'
+    },
     iconPosition: {
       type: String,
       default: 'after'

src/components/Collapsible.vue

@@ -1,17 +1,20 @@
 <template>
-  <div
+  <component :is="tag"
     data-collapsible="1"
     v-bind="{
       'data-collapsible-collapsed': collapsed
     }"
   >
-    <div data-collapsible-trigger="" @click="onClick">
-      <slot name="trigger">{{ trigger }}</slot>
-    </div>
-    <div data-collapsible-panel="">
+    <slot name="trigger" :trigger="{ onClick, trigger, triggerClass }">
+      <div :class="triggerClass" data-collapsible-trigger="" @click="onClick">
+        {{ trigger }}
+      </div>
+    </slot>
+
+    <div :class="panelClass" data-collapsible-panel="">
       <slot />
     </div>
-  </div>
+  </component>
 </template>
 
 <script>
@@ -21,9 +24,21 @@ export default {
       type: Boolean,
       default: undefined
     },
+    panelClass: {
+      type: String,
+      default: undefined
+    },
+    tag: {
+      type: String,
+      default: 'div'
+    },
     trigger: {
       type: String,
       default: 'Click me'
+    },
+    triggerClass: {
+      type: String,
+      default: undefined
     }
   },