feat(#106): add collapsible component

src/components/Collapsible.stories.js

@@ -0,0 +1,27 @@
+import CTCollapsible from './Collapsible.vue'
+
+export default {
+  title: 'CivicTheme/Base/Collapsible',
+  component: CTCollapsible,
+  parameters: {
+    status: {
+      type: 'beta',
+    }
+  }
+}
+
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    template: `<CTCollapsible v-bind="$props" v-on="$props">
+  <template v-if="$props.default">{{ $props.default }}</template>
+</CTCollapsible`,
+  }
+}
+
+export const Default = Template.bind({})
+Default.storyName = 'Collapsible'
+Default.args = {
+  default: 'Collapsible demo panel 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.',
+  trigger: 'TRIGGER (click me)'
+}

src/components/Collapsible.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    data-collapsible="1"
+    v-bind="{
+      'data-collapsible-collapsed': collapsed
+    }"
+  >
+    <div data-collapsible-trigger="">
+      <slot name="trigger">{{ trigger }}</slot>
+    </div>
+    <div data-collapsible-panel="">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    collapsed: {
+      type: Boolean,
+      default: undefined
+    },
+    trigger: {
+      type: String,
+      default: 'Click me'
+    }
+  },
+
+  mounted() {
+    try {
+      if (this.$el) {
+        delete require.cache[require.resolve('civictheme/components/00-base/collapsible/collapsible')]
+        require('civictheme/components/00-base/collapsible/collapsible')
+      }
+    }
+    catch(e) {
+      // eslint-disable-next-line
+      console.error(e)
+    }
+  },
+
+  beforeDestroy() {
+    delete require.cache[require.resolve('civictheme/components/00-base/collapsible/collapsible')]
+  }
+}
+</script>