Merge pull request #48 from GrabarzUndPartner/feature/update

Feature/update

Author: ThornWalli

.github/workflows/main.yml

@@ -27,6 +27,8 @@ jobs:
         with:
           path: |
             node_modules
+            ~/.cache/ms-playwright/
+            ~\AppData\Local\ms-playwright\
           key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/package-lock.json')) }}
       - name: Install Dependencies
         if: steps.cache.outputs.cache-hit != 'true'
@@ -78,6 +80,8 @@ jobs:
         with:
           path: |
             node_modules
+            ~/.cache/ms-playwright/
+            ~\AppData\Local\ms-playwright\
           key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/package-lock.json')) }}
       - name: Build
         run: |

.github/workflows/test.yml

@@ -27,6 +27,8 @@ jobs:
         with:
           path: |
             node_modules
+            ~/.cache/ms-playwright/
+            ~\AppData\Local\ms-playwright\
           key: ${{ matrix.os }}-node-v${{ matrix.node }}-deps-${{ hashFiles(format('{0}{1}', github.workspace, '/package-lock.json')) }}
 
       - name: Install Dependencies

package-lock.json

@@ -1,14 +1,16 @@
 <template>
-  <article class="article" v-bind="$attrs" v-on="$listeners">
+  <content-container class="article" v-bind="$attrs" v-on="$listeners">
     <header v-if="$slots.header">
       <slot name="header" />
     </header>
     <slot name="default" />
-  </article>
+  </content-container>
 </template>
 
 <script>
+import ContentContainer from '../ContentContainer';
 export default {
+  components: { ContentContainer },
   inheritAttrs: false
 };
 </script>

packages/core/Article/index.vue

@@ -51,13 +51,11 @@ export default {
   },
   data () {
     return {
-      headline: false
+      debug: false
     };
   },
+
   computed: {
-    debug () {
-      return 'debug-structure' in this.$route.query;
-    },
 
     currentLevel () {
       return this.parentLevel + 1;
@@ -66,6 +64,10 @@ export default {
     currentTag () {
       return ['div', 'main', 'div'][this.parentLevel] || this.tags[this.currentLevel % this.tags.length];
     }
+  },
+
+  mounted () {
+    this.debug = 'debug-structure' in this.$route.query;
   }
 
 };

packages/core/ContentContainer/index.vue

@@ -33,25 +33,18 @@ export default {
     }
   },
 
+  data () {
+    return { debug: false };
+  },
+
   computed: {
-    debug () {
-      return 'debug-headline' in this.$route.query;
-    },
     contextLevel () {
       return getMax((this.parentLevel - (this.parentLevel % 2)) / 2);
     }
   },
 
-  created () {
-    const getContentContainer = (component) => {
-      if (component.tags) {
-        return component;
-      }
-      return (component && getContentContainer(component.$parent)) || null;
-    };
-
-    const contentContainer = getContentContainer(this);
-    contentContainer && (contentContainer.headline = true);
+  mounted () {
+    this.debug = 'debug-headline' in this.$route.query;
   }
 
 };
@@ -74,6 +67,8 @@ function getMax (number) {
     left: 0;
     z-index: 10000;
     margin: 0;
+    font-family: monospace;
+    font-weight: normal;
 
     &::before {
       position: absolute;
@@ -89,12 +84,13 @@ function getMax (number) {
 
     &::after {
       position: absolute;
-      top: 0;
       right: 0;
+      bottom: 0;
       z-index: 10000;
-      padding: 10px 5px;
-      font-size: 12px;
+      padding: 5px;
+      font-size: 13px;
       color: white;
+      letter-spacing: 0.1em;
       content: "H" attr(data-debug-context-level);
       background: #333;
     }

packages/core/Headline/index.vue

@@ -1,18 +1,19 @@
 <template>
-  <base-teaser class="molecule-teaser" v-bind="$attrs" v-on="$listeners">
-    <template #default>
-      <speedkit-picture v-bind="image" />
-      <span v-font="$getFont('Poppins', 500)">{{ caption }}</span>
-    </template>
-  </base-teaser>
+  <figure class="molecule-tile" v-bind="$attrs" v-on="$listeners">
+    <speedkit-picture v-bind="image" />
+    <figcaption v-font="$getFont('Poppins', 500)">
+      {{ caption }}
+    </figcaption>
+  </figure>
 </template>
 
 <script>
+
 import SpeedkitPicture from 'nuxt-speedkit/components/SpeedkitPicture';
-import BaseTeaser from '@foundation/core/Article/Teaser';
+
 export default {
   components: {
-    SpeedkitPicture, BaseTeaser
+    SpeedkitPicture
   },
   inheritAttrs: false,
   props: {
@@ -22,17 +23,19 @@ export default {
     },
     caption: {
       type: String,
-      default: 'Teaser Caption'
+      default: 'Tile Caption'
     }
   }
 };
+
 </script>
 
 <style lang="postcss" scoped>
-.molecule-teaser {
+.molecule-tile {
+  margin: 0;
   text-decoration: none;
 
-  & span {
+  & figcaption {
     display: block;
     margin: em(10, 16);
     font-size: em(16);

…mple/src/components/molecules/Teaser.vue …sample/src/components/molecules/Tile.vuepackages/sample/src/components/molecules/Teaser.vue renamed to packages/sample/src/components/molecules/Tile.vue packages/sample/src/components/molecules/Teaser.vue renamed to packages/sample/src/components/molecules/Tile.vue

@@ -1,16 +1,18 @@
 <template>
   <core-structure class="organism-accordeon">
     <template v-if="headline" #header>
-      <layout-lost-container>
+      <layout-lost-container v-show="!hideHeadline">
         <div class="headline">
           <atom-headline v-bind="headline" />
         </div>
       </layout-lost-container>
     </template>
     <template #default>
-      <layout-lost-container>
-        <molecule-accordeon class="content" :items="items" />
-      </layout-lost-container>
+      <core-structure>
+        <layout-lost-container>
+          <molecule-accordeon class="content" :items="items" />
+        </layout-lost-container>
+      </core-structure>
     </template>
   </core-structure>
 </template>
@@ -29,13 +31,21 @@ export default {
     LayoutLostContainer,
     CoreStructure
   },
+
   props: {
+
     headline: {
       type: Object,
       default () {
         return null;
       }
     },
+
+    hideHeadline: {
+      type: Boolean,
+      default: false
+    },
+
     items: {
       type: Array,
       required: true,
@@ -57,6 +67,7 @@ export default {
       }
     }
   }
+
 };
 </script>
 

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

@@ -1,7 +1,7 @@
 <template>
   <core-structure class="organism-gallery" v-bind="$attrs" v-on="$listeners">
-    <template #header>
-      <layout-lost-container>
+    <template v-if="headline" #header>
+      <layout-lost-container v-show="!hideHeadline">
         <atom-headline class="headline" v-bind="headline" />
       </layout-lost-container>
     </template>
@@ -22,14 +22,22 @@ import LayoutLostContainer from '@/components/layouts/LostContainer';
 export default {
   components: { AtomHeadline, MoleculeSlider, LayoutLostContainer, CoreStructure },
   inheritAttrs: false,
+
   props: {
+
     headline: {
       type: Object,
       required: true,
       default () {
         return null;
       }
+    },
+
+    hideHeadline: {
+      type: Boolean,
+      default: false
     }
+
   }
 };
 </script>

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

@@ -1,7 +1,7 @@
 <template>
   <core-structure class="organism-infos">
-    <template #header>
-      <layout-lost-container>
+    <template v-if="headline" #header>
+      <layout-lost-container v-show="!hideHeadline">
         <atom-headline class="headline" v-bind="headline" />
       </layout-lost-container>
     </template>
@@ -51,6 +51,12 @@ export default {
         };
       }
     },
+
+    hideHeadline: {
+      type: Boolean,
+      default: false
+    },
+
     subHeadline: {
       type: Object,
       default () {