fix(update): update samples; update tests

GrabarzUndPartner · May 16, 2022 · 312c3d5 · 312c3d5
1 parent 88cb0be
commit 312c3d5
Show file tree

Hide file tree

Showing 13 changed files with 273 additions and 113 deletions.
diff --git a/packages/core/Article/index.vue b/packages/core/Article/index.vue
@@ -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>
diff --git a/packages/core/Headline/index.vue b/packages/core/Headline/index.vue
@@ -74,6 +74,8 @@ function getMax (number) {
     left: 0;
     z-index: 10000;
     margin: 0;
+    font-family: monospace;
+    font-weight: normal;
 
     &::before {
       position: absolute;
@@ -89,12 +91,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;
     }

diff --git a/packages/sample/src/components/molecules/Teaser.vue b/packages/sample/src/components/molecules/Teaser.vue
@@ -2,17 +2,20 @@
   <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>
+      <core-headline v-font="$getFont('Poppins', 500)">
+        {{ caption }}
+      </core-headline>
     </template>
   </base-teaser>
 </template>
 
 <script>
+import CoreHeadline from '@foundation/core/Headline';
 import SpeedkitPicture from 'nuxt-speedkit/components/SpeedkitPicture';
 import BaseTeaser from '@foundation/core/Article/Teaser';
 export default {
   components: {
-    SpeedkitPicture, BaseTeaser
+    CoreHeadline, SpeedkitPicture, BaseTeaser
   },
   inheritAttrs: false,
   props: {
@@ -32,7 +35,7 @@ export default {
 .molecule-teaser {
   text-decoration: none;
 
-  & span {
+  & picture + * {
     display: block;
     margin: em(10, 16);
     font-size: em(16);

diff --git a/packages/sample/src/components/organisms/Accordeon.vue b/packages/sample/src/components/organisms/Accordeon.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>
 

diff --git a/packages/sample/src/components/organisms/Gallery.vue b/packages/sample/src/components/organisms/Gallery.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>

diff --git a/packages/sample/src/components/organisms/Infos.vue b/packages/sample/src/components/organisms/Infos.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 () {

diff --git a/packages/sample/src/components/organisms/TeaserWall.vue b/packages/sample/src/components/organisms/TeaserWall.vue
@@ -1,7 +1,7 @@
 <template>
   <core-structure class="organism-teaser-wall">
-    <template #header>
-      <layout-lost-container>
+    <template v-if="headline" #header>
+      <layout-lost-container v-show="!hideHeadline">
         <div class="headline">
           <atom-headline v-bind="headline" />
         </div>
@@ -23,15 +23,24 @@ import LayoutLostContainer from '@/components/layouts/LostContainer';
 import AtomHeadline from '@/components/atoms/Headline';
 import MoleculeTeaser from '@/components/molecules/Teaser';
 export default {
+
   components: { LayoutLostContainer, CoreStructure, MoleculeTeaser, AtomHeadline },
+
   props: {
+
     headline: {
       type: Object,
       required: true,
       default () {
         return null;
       }
     },
+
+    hideHeadline: {
+      type: Boolean,
+      default: false
+    },
+
     teasers: {
       type: Array,
       default () {
@@ -40,6 +49,7 @@ export default {
         });
       }
     }
+
   }
 };
 

diff --git a/packages/sample/src/components/organisms/Text.vue b/packages/sample/src/components/organisms/Text.vue
@@ -1,7 +1,7 @@
 <template>
   <core-structure class="organism-text">
-    <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>
@@ -20,8 +20,11 @@ import AtomHeadline from '@/components/atoms/Headline';
 import AtomRichText from '@/components/atoms/RichText';
 
 export default {
+
   components: { CoreStructure, LayoutLostContainer, AtomHeadline, AtomRichText },
+
   props: {
+
     headline: {
       type: Object,
       default () {
@@ -31,10 +34,17 @@ export default {
         };
       }
     },
+
+    hideHeadline: {
+      type: Boolean,
+      default: false
+    },
+
     content: {
       type: String,
       default: '<p>Text</p>'
     }
+
   }
 };
 </script>

diff --git a/packages/sample/src/pages/index.vue b/packages/sample/src/pages/index.vue
@@ -77,10 +77,16 @@ 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: {
+            hideHeadline: true,
+            headline: {
+              overline: null,
+              text: 'Gallery hidden Headline'
+            }
+          }
+        },
         {
           component: 'OrganismGallery',
           props: {
@@ -144,6 +150,11 @@ export default {
         {
           component: 'OrganismAccordeon',
           props: {
+            hideHeadline: true,
+            headline: {
+              overline: null,
+              text: 'Accordeon hidden Headline'
+            },
             items: [
               {
                 label: 'Item 1',
@@ -211,7 +222,7 @@ export default {
           props: {
             headline: {
               overline: null,
-              text: 'Sample Headline'
+              text: 'Accordeon'
             },
             items: [
               {

diff --git a/packages/sample/src/pages/tests/collapsible-container.vue b/packages/sample/src/pages/tests/collapsible-container.vue
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <collapsible-container
+      :dataset="dataset"
+      collapsible
+    />
+  </div>
+</template>
+
+<script>
+
+import CollapsibleContainer from '@foundation/core/CollapsibleContainer';
+import Dataset from '@foundation/core/CollapsibleContainer/classes/Dataset';
+import Model from '@foundation/core/CollapsibleContainer/classes/Model';
+
+export default {
+
+  components: { CollapsibleContainer },
+
+  layout: 'test',
+
+  props: {
+    dataset: {
+      type: Dataset,
+      default () {
+        return new Dataset([
+          { label: 'Label A', value: 'a', content: 'Content A' },
+          { label: 'Label B', value: 'b', content: 'Content B' },
+          { label: 'Label C', value: 'c', content: 'Content C' }
+        ], new Model('collapsible--container-test', 'a'));
+      }
+    }
+  }
+};
+
+</script>