Merge pull request #33 from GrabarzUndPartner/feature/sample-accordion

feat(components): sample accordion

Author: JanSzidat

packages/sample/src/components/molecules/Accordeon.vue

@@ -1,90 +1,153 @@
 <template>
-  <base-accordeon class="button" :class="classes" v-bind="$attrs" v-on="$listeners">
-    <icon v-if="icon || loading" :icon="loading? 'loading' : icon" />
-    <slot name="default" :label="label">
-      <span v-if="label" v-html="label" />
-    </slot>
-    <slot name="after" />
+  <base-accordeon
+    class="molecule-accordeon"
+    v-bind="$attrs"
+    :dataset="getDataset"
+    v-on="$listeners"
+  >
+    <template #label="{option}">
+      <span
+        v-font="$getFont('Poppins', 400)"
+      >
+        {{ option.label }}
+      </span>
+    </template>
+    <template #content="{show, option}">
+      <transition-expand>
+        <section v-show="show">
+          <div>
+            <slot name="content" v-bind="{show, option}">
+              <component :is="getContentComponent(component.type)" v-for="(component, index) in option.content" :key="index" v-bind="component.props" />
+            </slot>
+          </div>
+        </section>
+      </transition-expand>
+    </template>
   </base-accordeon>
 </template>
 
 <script>
-import BaseAccordeon from '@foundation/core/mutation/Accordeon';
-import Icon from '@/components/atoms/Icon';
+import BaseAccordeon from '@foundation/core/CollapsibleContainer/Accordeon';
+import TransitionExpand from '@foundation/core/CollapsibleContainer/transition/expand';
+import Dataset from '@foundation/core/CollapsibleContainer/classes/Dataset';
+import Model from '@foundation/core/CollapsibleContainer/classes/Model';
+
+const CONTENT_COMPONENTS = {
+  Headline: () => import('@/components/atoms/Headline'),
+  RichText: () => import('@/components/atoms/RichText'),
+  Link: () => import('@/components/atoms/Link'),
+  Button: () => import('@/components/atoms/Button')
+};
 
 export default {
-  components: {
-    BaseAccordeon,
-    Icon
-  },
+  components: { BaseAccordeon, TransitionExpand },
+  inheritAttrs: false,
+
   props: {
-    label: {
-      type: String,
-      default: null
-    },
-    icon: {
-      type: String,
-      default: null
-    },
-    loading: {
-      type: Boolean,
-      default: null
+    items: {
+      type: Array,
+      required: true,
+      default () {
+        return [
+          {
+            label: 'Item 1',
+            value: 'item1',
+            content: [
+              {
+                type: 'RichText',
+                props: {
+                  text: 'Lorem Ipsum item 1'
+                }
+              }
+            ]
+          }
+        ];
+      }
     }
   },
+
+  data () {
+    return { unsubscribe: null };
+  },
+
   computed: {
-    classes () {
-      return {
-        loading: this.loading
-      };
+    getDataset () {
+      return new Dataset(this.items, new Model('default-a', 'b'));
+    }
+
+  },
+
+  mounted () {
+    this.unsubscribe = this.$router.afterEach(() => {
+      const model = this.dataset.model;
+      model.value = null;
+    });
+  },
+
+  destroyed () {
+    this.unsubscribe();
+  },
+
+  methods: {
+    getContentComponent (type) {
+      return CONTENT_COMPONENTS[String(type)];
     }
   }
 };
+
 </script>
 
 <style lang="postcss" scoped>
-.button {
-  position: relative;
+.molecule-accordeon {
   display: flex;
-  align-items: center;
-  padding: calc(8 / 14 * 1em) calc(16 / 14 * 1em);
-  font-size: calc(14 / 16 * 1em);
-  line-height: 1;
-  cursor: pointer;
-  background: #fff;
-  border: solid #aaa calc(1 / 14 * 1em);
-  appearance: none;
-
-  &:not([disabled]):hover {
-    background: #eee;
-  }
-
-  &.loading {
-    pointer-events: none;
+  flex-wrap: wrap;
+  font-family: monospace;
 
-  }
-
-  &[disabled] {
-    cursor: not-allowed;
+  & >>> {
+    & input:checked + label {
+      & > .icon {
+        transform: rotate(180deg);
+      }
+    }
 
-    & >>> .icon {
-      opacity: 0.5;
+    & input:checked + label,
+    & input:focus + label,
+    & label:hover {
+      color: #fff;
+      background: #333;
     }
-  }
 
-  & >>> .icon {
-    width: 1em;
-    margin-right: calc(8 / 14 * 1em);
-  }
+    & label {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 8px;
+      cursor: pointer;
+      background: #eee;
 
-}
+      & .icon {
+        order: 0;
+        margin-right: 8px;
+        transition: transform 0.2s;
+      }
 
-@keyframes spin {
-  0% {
-    transform: translate(-50%, -50%) rotate(0deg);
+      & > span {
+        flex: 1;
+        order: 1;
+        font-size: 14px;
+        line-height: 1;
+      }
+    }
   }
 
-  100% {
-    transform: translate(-50%, -50%) rotate(360deg);
+  & > section {
+    width: 100%;
+
+    & > div {
+      padding: 8px;
+      border: solid #eee 1px;
+      border-top-width: 0;
+    }
   }
 }
 </style>

packages/sample/src/components/organisms/Accordeon.vue

@@ -1,26 +1,35 @@
 <template>
   <layout-lost-container class="organism-accordeon">
-    <molecule-accordeon />
+    <molecule-accordeon class="accordeon" :items="items" />
   </layout-lost-container>
 </template>
 
 <script>
 import MoleculeAccordeon from '@/components/molecules/Accordeon';
 import LayoutLostContainer from '@/components/layouts/LostContainer';
+
 export default {
   components: { MoleculeAccordeon, LayoutLostContainer },
   props: {
-    overline: {
-      type: String,
-      default: 'Overline'
-    },
-    headline: {
-      type: String,
-      default: 'Headline'
-    },
-    content: {
-      type: String,
-      default: '<p>Text</p>'
+    items: {
+      type: Array,
+      required: true,
+      default () {
+        return [
+          {
+            label: 'Item 1',
+            value: 'item1',
+            content: [
+              {
+                type: 'RichText',
+                props: {
+                  text: 'Lorem Ipsum item 1'
+                }
+              }
+            ]
+          }
+        ];
+      }
     }
   }
 };
@@ -33,6 +42,11 @@ export default {
   @media (--sm) {
     margin: em(48) 0;
   }
+
+  & .accordeon {
+    lost-offset: 1 / 12;
+    lost-column: 10 / 12;
+  }
 }
 
 </style>

packages/sample/src/pages/index.vue

@@ -15,7 +15,8 @@ export default {
     OrganismText: speedkitHydrate(() => import('@/components/organisms/Text')),
     OrganismGallery: speedkitHydrate(() => import('@/components/organisms/Gallery')),
     OrganismTextImage: speedkitHydrate(() => import('@/components/organisms/TextImage')),
-    OrganismTeaserWall: speedkitHydrate(() => import('@/components/organisms/TeaserWall'))
+    OrganismTeaserWall: speedkitHydrate(() => import('@/components/organisms/TeaserWall')),
+    OrganismAccordeon: speedkitHydrate(() => import('@/components/organisms/Accordeon'))
 
   },
   data () {
@@ -91,6 +92,71 @@ export default {
             headline: 'Sample Headline',
             content: '<p>Lorem ipsum dolor sit amet, <strong>consetetur sadipscing elitr</strong>, <em>sed diam nonumy eirmod tempor invidunt</em> <strong><em>ut labore et dolore magna aliquyam erat</em></strong>, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, <strong>consetetur sadipscing elitr</strong>, sed diam</p> <p>Lorem ipsum dolor sit amet, <strong>consetetur sadipscing elitr</strong>, <em>sed diam nonumy eirmod tempor invidunt</em></p> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> <ol> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ol>'
           }
+        },
+        {
+          component: 'OrganismAccordeon',
+          props: {
+            items: [
+              {
+                label: 'Item 1',
+                value: 'item1',
+                content: [
+                  {
+                    type: 'Headline',
+                    props: {
+                      overline: 'This is an overline',
+                      text: 'This is the headline.'
+                    }
+                  },
+                  {
+                    type: 'RichText',
+                    props: {
+                      value: '<p>RichText Lorem Ipsum item 1</p>'
+                    }
+                  },
+                  {
+                    type: 'Link',
+                    props: {
+                      title: 'Sample Link',
+                      to: {
+                        hash: 'sample'
+                      }
+                    }
+                  }
+                ]
+              },
+              {
+                label: 'Item 2',
+                value: 'item2',
+                content: [
+                  {
+                    type: 'RichText',
+                    props: {
+                      value: '<p>RichText Lorem Ipsum item 2</p>'
+                    }
+                  },
+                  {
+                    type: 'Button',
+                    props: {
+                      label: 'Sample Button'
+                    }
+                  }
+                ]
+              },
+              {
+                label: 'Item 3',
+                value: 'item3',
+                content: [
+                  {
+                    type: 'RichText',
+                    props: {
+                      value: '<p>RichText Lorem Ipsum item 3</p>'
+                    }
+                  }
+                ]
+              }
+            ]
+          }
         }
       ],