chore(sample): update structure and content

GrabarzUndPartner · May 12, 2022 · 294f7c0 · 294f7c0
1 parent 2d1bc3a
commit 294f7c0
Show file tree

Hide file tree

Showing 15 changed files with 652 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/core/Headline/index.vue b/packages/core/Headline/index.vue
@@ -41,6 +41,7 @@ export default {
       return getMax((this.parentLevel - (this.parentLevel % 2)) / 2);
     }
   }
+
 };
 
 function getMax (number) {

diff --git a/packages/core/Slider/index.vue b/packages/core/Slider/index.vue
@@ -88,12 +88,15 @@ export default {
     sliderIndex++;
   },
 
+  updated () {
+    console.log('test updated');
+  },
+
   async mounted () {
     const { Splide, STATES, extensions } = await getSplide();
     const { Intersection } = extensions;
     this.states = STATES;
-
-    this.splide = new Splide(this.$refs.slider, {
+    this.splide = new Splide(this.$el.querySelector('.splide'), {
       ...this.options,
       pagination: false,
       arrows: false,
@@ -122,7 +125,7 @@ export default {
   },
 
   destroyed () {
-    this.splide.destroy();
+    this.splide?.destroy();
   },
 
   methods: {

diff --git a/packages/core/Structure.vue b/packages/core/Structure.vue
@@ -60,7 +60,7 @@ export default {
     },
 
     currentTag () {
-      return ['div', 'main'][this.parentLevel] || this.tags[this.currentLevel % this.tags.length];
+      return ['div', 'main', 'div'][this.parentLevel] || this.tags[this.currentLevel % this.tags.length];
     }
   }
 

diff --git a/packages/sample/package.json b/packages/sample/package.json
@@ -38,13 +38,14 @@
     "postcss-functions": "4.0.2",
     "postcss-momentum-scrolling": "3.14.22",
     "postcss-normalize": "10.0.1",
+    "postcss-preset-env": "6.7.0",
     "rucksack-css": "1.0.2",
-    "vue-svg-loader": "0.16.0",
-    "postcss-preset-env": "6.7.0"
+    "vue-svg-loader": "0.16.0"
   },
   "devDependencies": {
     "get-port-please": "2.5.0",
     "h3": "0.7.8",
+    "html-validator": "^6.0.0",
     "jsdom": "19.0.0",
     "listhen": "0.2.11",
     "playwright": "1.21.1",

diff --git a/packages/sample/src/components/organisms/Gallery.vue b/packages/sample/src/components/organisms/Gallery.vue
@@ -1,6 +1,6 @@
 <template>
   <core-structure class="organism-gallery" v-bind="$attrs" v-on="$listeners">
-    <template v-if="headline" #header>
+    <template #header>
       <layout-lost-container>
         <atom-headline class="headline" v-bind="headline" />
       </layout-lost-container>
@@ -25,6 +25,7 @@ export default {
   props: {
     headline: {
       type: Object,
+      required: true,
       default () {
         return null;
       }

diff --git a/packages/sample/src/components/organisms/Infos.vue b/packages/sample/src/components/organisms/Infos.vue
@@ -9,6 +9,9 @@
       <layout-lost-container>
         <atom-rich-text class="content" :value="content" />
         <core-structure>
+          <template #header>
+            <atom-headline class="sub-headline" v-bind="subHeadline" />
+          </template>
           <core-structure v-for="({overline, headline, content}, index) in infos" :key="index">
             <template #header>
               <atom-headline class="sub-content" :text="headline" :overline="overline" />
@@ -48,6 +51,15 @@ export default {
         };
       }
     },
+    subHeadline: {
+      type: Object,
+      default () {
+        return {
+          overline: 'Overline',
+          content: 'SubHeadline'
+        };
+      }
+    },
     content: {
       type: String,
       default: '<p>Text</p>'
@@ -86,6 +98,7 @@ export default {
     }
   }
 
+  & .sub-headline,
   & .sub-content {
     lost-offset: 1 / 12;
     lost-column: 10 / 12;

diff --git a/packages/sample/src/components/organisms/Stage.vue b/packages/sample/src/components/organisms/Stage.vue
@@ -9,6 +9,7 @@
     </template>
   </core-structure>
 </template>
+
 <script>
 import SpeedkitPicture from 'nuxt-speedkit/components/SpeedkitPicture';
 import CoreStructure from '@foundation/core/Structure';

diff --git a/packages/sample/src/components/organisms/TeaserWall.vue b/packages/sample/src/components/organisms/TeaserWall.vue
@@ -1,6 +1,6 @@
 <template>
   <core-structure class="organism-teaser-wall">
-    <template v-if="headline" #header>
+    <template #header>
       <layout-lost-container>
         <div class="headline">
           <atom-headline v-bind="headline" />
@@ -9,9 +9,9 @@
     </template>
     <template #default>
       <layout-lost-container>
-        <div class="teasers">
+        <core-structure class="teasers">
           <molecule-teaser v-for="(teaser, index) in teasers" v-bind="teaser" :key="index" />
-        </div>
+        </core-structure>
       </layout-lost-container>
     </template>
   </core-structure>
@@ -27,6 +27,7 @@ export default {
   props: {
     headline: {
       type: Object,
+      required: true,
       default () {
         return null;
       }

diff --git a/packages/sample/src/components/organisms/TextImage.vue b/packages/sample/src/components/organisms/TextImage.vue
@@ -5,19 +5,13 @@
         <speedkit-picture v-bind="image" />
       </div>
       <div class="text">
-        <core-structure>
-          <template #header>
-            <atom-headline v-bind="headline" />
-          </template>
-          <template #default>
-            <atom-rich-text :value="content" />
-            <ul class="buttons">
-              <li v-for="(button, index) in buttons" :key="index">
-                <atom-button v-bind="button" />
-              </li>
-            </ul>
-          </template>
-        </core-structure>
+        <atom-headline v-bind="headline" />
+        <atom-rich-text :value="content" />
+        <ul class="buttons">
+          <li v-for="(button, index) in buttons" :key="index">
+            <atom-button v-bind="button" />
+          </li>
+        </ul>
       </div>
     </layout-lost-container>
   </core-structure>

diff --git a/packages/sample/src/pages/index.vue b/packages/sample/src/pages/index.vue
@@ -77,10 +77,10 @@ export default {
             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: 'OrganismGallery',
-          props: {}
-        },
+        // {
+        //   component: 'OrganismGallery',
+        //   props: {}
+        // },
         {
           component: 'OrganismGallery',
           props: {
@@ -132,10 +132,6 @@ export default {
             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: 'OrganismTeaserWall',
-          props: {}
-        },
         {
           component: 'OrganismTeaserWall',
           props: {

diff --git a/packages/sample/src/pages/test.vue b/packages/sample/src/pages/test.vue
@@ -0,0 +1,64 @@
+
+<template>
+  <core-structure id="layout">
+    <core-structure id="page">
+      <core-structure>
+        <component
+          :is="component"
+          v-for="({component, props}, index) in content.slice(0,1)"
+          :key="index"
+          v-bind="props"
+          critical
+        />
+        <core-structure>
+          <component
+            :is="component"
+            v-for="({component, props}, index) in content.slice(1)"
+            :key="index"
+            v-bind="props"
+            :critical="index < 1"
+          />
+        </core-structure>
+      </core-structure>
+    </core-structure>
+  </core-structure>
+</template>
+
+<script>
+
+import speedkitHydrate from 'nuxt-speedkit/hydrate';
+import CoreStructure from '@foundation/core/Structure';
+
+export default {
+  layout: 'test',
+  components: {
+    CoreStructure,
+    OrganismStage: speedkitHydrate(() => import('@/components/organisms/Stage')),
+    OrganismText: speedkitHydrate(() => import('@/components/organisms/Text')),
+    OrganismGallery: speedkitHydrate(() => import('@/components/organisms/Gallery')),
+    OrganismTextImage: speedkitHydrate(() => import('@/components/organisms/TextImage')),
+    OrganismTeaserWall: speedkitHydrate(() => import('@/components/organisms/TeaserWall')),
+    OrganismAccordeon: speedkitHydrate(() => import('@/components/organisms/Accordeon')),
+    OrganismInfos: speedkitHydrate(() => import('@/components/organisms/Infos'))
+
+  },
+  data () {
+    return {
+
+      content: [
+        {
+          component: 'OrganismGallery',
+          props: {
+            headline: {
+              overline: null,
+              text: 'Gallery'
+            }
+          }
+        }
+      ]
+
+    };
+  }
+};
+
+</script>
diff --git a/packages/sample/src/pages/tests/headline.vue b/packages/sample/src/pages/tests/headline.vue
@@ -7,47 +7,92 @@
             Headline (H1)
           </core-headline>
         </template>
+        <p>…</p>
         <core-structure>
           <template #header>
-            <core-headline id="headline2">
-              Headline (h2)
+            <core-headline id="headline2_1">
+              Headline (H2)
             </core-headline>
           </template>
+          <p>…</p>
           <core-structure>
+            <template #header>
+              <core-headline id="headline2_2">
+                Headline (H2)
+              </core-headline>
+            </template>
+            <p>…</p>
             <core-structure>
               <template #header>
-                <core-headline id="headline3">
-                  Headline (h3)
+                <core-headline id="headline3_1">
+                  Headline (H3)
                 </core-headline>
               </template>
+              <p>…</p>
               <core-structure>
+                <template #header>
+                  <core-headline id="headline3_2">
+                    Headline (H3)
+                  </core-headline>
+                </template>
+                <p>…</p>
                 <core-structure>
                   <template #header>
-                    <core-headline id="headline4">
-                      Headline (h4)
+                    <core-headline id="headline4_1">
+                      Headline (H4)
                     </core-headline>
                   </template>
+                  <p>…</p>
                   <core-structure>
+                    <template #header>
+                      <core-headline id="headline4_2">
+                        Headline (H4)
+                      </core-headline>
+                    </template>
+                    <p>…</p>
                     <core-structure>
                       <template #header>
-                        <core-headline id="headline5">
-                          Headline (h5)
+                        <core-headline id="headline5_1">
+                          Headline (H5)
                         </core-headline>
                       </template>
+                      <p>…</p>
                       <core-structure>
+                        <template #header>
+                          <core-headline id="headline5_2">
+                            Headline (H5)
+                          </core-headline>
+                        </template>
+                        <p>…</p>
                         <core-structure>
                           <template #header>
-                            <core-headline id="headline6">
-                              Headline (h6)
+                            <core-headline id="headline6_1">
+                              Headline (H6)
                             </core-headline>
                           </template>
+                          <p>…</p>
                           <core-structure>
+                            <template #header>
+                              <core-headline id="headline6_2">
+                                Headline (H6)
+                              </core-headline>
+                            </template>
+                            <p>…</p>
                             <core-structure>
                               <template #header>
-                                <core-headline id="headline7">
-                                  Headline (h6)
+                                <core-headline id="headline7_1">
+                                  Headline (H6)
                                 </core-headline>
                               </template>
+                              <p>…</p>
+                              <core-structure>
+                                <template #header>
+                                  <core-headline id="headline7_2">
+                                    Headline (H6)
+                                  </core-headline>
+                                </template>
+                                <p>…</p>
+                              </core-structure>
                             </core-structure>
                           </core-structure>
                         </core-structure>

diff --git a/packages/sample/src/pages/tests/structure.vue b/packages/sample/src/pages/tests/structure.vue
@@ -27,9 +27,12 @@
 
           <!-- Second Content Component -->
           <core-structure id="secondaryContentComponent">
+            <template #header>
+              <core-headline>Content Component With Content Section</core-headline>
+            </template>
             <core-structure>
               <template #header>
-                <core-headline>Content Component With Content Section</core-headline>
+                <core-headline>Content Section</core-headline>
               </template>
               <p>Lorem ipsum…</p>
             </core-structure>
@@ -42,6 +45,9 @@
             </template>
             <p>Lorem ipsum…</p>
             <core-structure>
+              <template #header>
+                <core-headline>Inner Articles</core-headline>
+              </template>
               <!-- Inner Component 1 -->
               <core-structure>
                 <template #header>