fix(core): renamed Structure to ContentContainer

ThornWalli · ThornWalli · commit 88cb0be5c268 · 2022-05-16T12:44:51.000+02:00
diff --git a/.stylelintrc b/.stylelintrc
@@ -22,6 +22,7 @@
         ]
       }
     ],
+    "selector-class-pattern": null,
     "block-closing-brace-empty-line-before": null,
     "max-empty-lines": null,
     "no-descending-specificity": null,
@@ -41,4 +42,4 @@
       }
     ]
   }
-}
+}
diff --git a/packages/core/ContentContainer/index.vue b/packages/core/ContentContainer/index.vue
@@ -49,7 +49,11 @@ export default {
       }
     }
   },
-
+  data () {
+    return {
+      headline: false
+    };
+  },
   computed: {
     debug () {
       return 'debug-structure' in this.$route.query;
@@ -127,9 +131,8 @@ export default {
   --tag-color-bg: var(--color-structure-2-bg);
 
   &::after {
-    top: auto;
+    top: 0;
     right: 0;
-    bottom: 0;
   }
 }
 
@@ -138,9 +141,9 @@ export default {
   --tag-color-bg: var(--color-structure-3-bg);
 
   &::after {
-    top: auto;
-    bottom: 0;
-    left: 0;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
   }
 }
 
@@ -149,7 +152,7 @@ export default {
   --tag-color-bg: var(--color-structure-1-bg);
 
   &::after {
-    top: 0;
+    bottom: 0;
     left: 0;
   }
 }
diff --git a/packages/core/Headline/index.vue b/packages/core/Headline/index.vue
@@ -40,6 +40,18 @@ export default {
     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);
   }
 
 };
diff --git a/packages/core/Slider/index.vue b/packages/core/Slider/index.vue
@@ -136,3 +136,22 @@ export default {
 };
 
 </script>
+
+<style lang="postcss" scoped>
+.splide:not(.is-initialized) {
+  & .splide__list {
+    overflow: hidden;
+
+    & >>> .splide__slide:not(:first-child) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+    }
+
+  }
+}
+</style>
+
diff --git a/packages/sample/src/components/molecules/Accordeon.vue b/packages/sample/src/components/molecules/Accordeon.vue
@@ -32,7 +32,7 @@ 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';
-import LayoutStructure from '@foundation/core/Structure';
+import LayoutStructure from '@foundation/core/ContentContainer';
 import AtomIcon from '@/components/atoms/Icon';
 
 const CONTENT_COMPONENTS = {
diff --git a/packages/sample/src/components/organisms/Accordeon.vue b/packages/sample/src/components/organisms/Accordeon.vue
@@ -17,7 +17,7 @@
 
 <script>
 
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 import AtomHeadline from '@/components/atoms/Headline';
 import MoleculeAccordeon from '@/components/molecules/Accordeon';
 import LayoutLostContainer from '@/components/layouts/LostContainer';
diff --git a/packages/sample/src/components/organisms/Gallery.vue b/packages/sample/src/components/organisms/Gallery.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 import AtomHeadline from '@/components/atoms/Headline';
 import MoleculeSlider from '@/components/molecules/Slider';
 import LayoutLostContainer from '@/components/layouts/LostContainer';
diff --git a/packages/sample/src/components/organisms/Infos.vue b/packages/sample/src/components/organisms/Infos.vue
@@ -28,7 +28,7 @@
 
 <script>
 
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 import LayoutLostContainer from '@/components/layouts/LostContainer';
 import AtomHeadline from '@/components/atoms/Headline';
 import AtomRichText from '@/components/atoms/RichText';
diff --git a/packages/sample/src/components/organisms/Stage.vue b/packages/sample/src/components/organisms/Stage.vue
@@ -12,7 +12,7 @@
 
 <script>
 import SpeedkitPicture from 'nuxt-speedkit/components/SpeedkitPicture';
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 import Headline from '@/components/atoms/Headline';
 
 export default {
diff --git a/packages/sample/src/components/organisms/TeaserWall.vue b/packages/sample/src/components/organisms/TeaserWall.vue
@@ -17,7 +17,7 @@
   </core-structure>
 </template>
 <script>
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 import LayoutLostContainer from '@/components/layouts/LostContainer';
 
 import AtomHeadline from '@/components/atoms/Headline';
diff --git a/packages/sample/src/components/organisms/Text.vue b/packages/sample/src/components/organisms/Text.vue
@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 import LayoutLostContainer from '@/components/layouts/LostContainer';
 import AtomHeadline from '@/components/atoms/Headline';
 import AtomRichText from '@/components/atoms/RichText';
diff --git a/packages/sample/src/components/organisms/TextImage.vue b/packages/sample/src/components/organisms/TextImage.vue
@@ -19,7 +19,7 @@
 
 <script>
 import SpeedkitPicture from 'nuxt-speedkit/components/SpeedkitPicture';
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 import LayoutLostContainer from '@/components/layouts/LostContainer';
 import AtomHeadline from '@/components/atoms/Headline';
 import AtomRichText from '@/components/atoms/RichText';
diff --git a/packages/sample/src/layouts/default.vue b/packages/sample/src/layouts/default.vue
@@ -18,7 +18,7 @@ import Dataset from '@foundation/core/CollapsibleContainer/classes/Dataset';
 import Model from '@foundation/core/CollapsibleContainer/classes/Model';
 
 import speedkitHydrate from 'nuxt-speedkit/hydrate';
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 
 export default {
   components: {
diff --git a/packages/sample/src/pages/content-page.vue b/packages/sample/src/pages/content-page.vue
@@ -15,7 +15,7 @@
 <script>
 
 import speedkitHydrate from 'nuxt-speedkit/hydrate';
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 
 export default {
   components: {
diff --git a/packages/sample/src/pages/content-structure.vue b/packages/sample/src/pages/content-structure.vue
@@ -29,7 +29,7 @@
 
 <script>
 
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 import AtomHeadline from '@/components/atoms/Headline';
 
 export default {
diff --git a/packages/sample/src/pages/content.vue b/packages/sample/src/pages/content.vue
@@ -24,7 +24,7 @@
 
 <script>
 
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 
 export default {
   components: {
diff --git a/packages/sample/src/pages/headline.vue b/packages/sample/src/pages/headline.vue
@@ -62,7 +62,7 @@
 
 <script>
 
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 
 import BaseHeadline from '@foundation/core/Headline';
 import DefaultHeadline from '@foundation/core/Headline/default';
diff --git a/packages/sample/src/pages/index.vue b/packages/sample/src/pages/index.vue
@@ -23,7 +23,7 @@
 <script>
 
 import speedkitHydrate from 'nuxt-speedkit/hydrate';
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 
 export default {
   components: {
diff --git a/packages/sample/src/pages/test.vue b/packages/sample/src/pages/test.vue
@@ -1,38 +1,40 @@
 
 <template>
   <core-structure id="layout">
-    <core-structure id="page">
+    <core-headline>Core Headline</core-headline>
+    <!-- <core-structure id="page">
+      <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(0,1)"
+          v-for="({component, props}, index) in content.slice(1)"
           :key="index"
           v-bind="props"
-          critical
+          :critical="index < 1"
         />
-        <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> -->
   </core-structure>
 </template>
 
 <script>
+/* eslint-disable vue/no-unused-components */
 
 import speedkitHydrate from 'nuxt-speedkit/hydrate';
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
+import CoreHeadline from '@foundation/core/Headline';
 
 export default {
   layout: 'test',
   components: {
     CoreStructure,
+    CoreHeadline,
     OrganismStage: speedkitHydrate(() => import('@/components/organisms/Stage')),
     OrganismText: speedkitHydrate(() => import('@/components/organisms/Text')),
     OrganismGallery: speedkitHydrate(() => import('@/components/organisms/Gallery')),
@@ -47,12 +49,13 @@ export default {
 
       content: [
         {
-          component: 'OrganismGallery',
+          component: 'OrganismText',
           props: {
             headline: {
               overline: null,
-              text: 'Gallery'
-            }
+              text: 'Text 1'
+            },
+            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>'
           }
         }
       ]
diff --git a/packages/sample/src/pages/tests/content-container.vue b/packages/sample/src/pages/tests/content-container.vue
@@ -75,7 +75,7 @@
 
 <script>
 import CoreHeadline from '@foundation/core/Headline';
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 export default {
   components: {
     CoreStructure,
diff --git a/packages/sample/src/pages/tests/headline.vue b/packages/sample/src/pages/tests/headline.vue
@@ -111,7 +111,7 @@
 
 <script>
 import CoreHeadline from '@foundation/core/Headline';
-import CoreStructure from '@foundation/core/Structure';
+import CoreStructure from '@foundation/core/ContentContainer';
 export default {
   components: {
     CoreStructure,
diff --git a/packages/sample/test/default.test.js b/packages/sample/test/default.test.js
@@ -24,7 +24,7 @@ beforeAll(async () => {
 
 describe('🧐 inspect generated html', () => {
   const paths = [
-    '/structure',
+    '/content-container',
     '/headline'
   ];
 
@@ -37,7 +37,6 @@ describe('🧐 inspect generated html', () => {
         data: await promises.readFile(joinURL(process.cwd(), './test/.test/dist', path, 'index.html'), 'utf8')
       };
       const result = await validator(options);
-      console.log(`"${result}"`);
       if (!result.startsWith('The document validates according to the specified schema(s).')) {
         throw new Error(`Url: ${url}\n${result}`);
       }
@@ -49,8 +48,8 @@ describe('🧐 inspect generated html', () => {
 
 function markupTests () {
   let html, dom;
-  it('Test Structure (/structure)', async () => {
-    html = await getHTML(join(distDir, 'structure'));
+  it('Test Structure (/content-container)', async () => {
+    html = await getHTML(join(distDir, '/content-container'));
     dom = getDom(html);
 
     // layout

Original file line number	Diff line number	Diff line change
`@@ -22,6 +22,7 @@`
`22`	`22`	`]`
`23`	`23`	`}`
`24`	`24`	`],`
	`25`	`+ "selector-class-pattern": null,`
`25`	`26`	`"block-closing-brace-empty-line-before": null,`
`26`	`27`	`"max-empty-lines": null,`
`27`	`28`	`"no-descending-specificity": null,`
`@@ -41,4 +42,4 @@`
`41`	`42`	`}`
`42`	`43`	`]`
`43`	`44`	`}`
`44`		`-}`
	`45`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -49,7 +49,11 @@ export default {`
`49`	`49`	`}`
`50`	`50`	`}`
`51`	`51`	`},`
`52`		`-`
	`52`	`+ data () {`
	`53`	`+ return {`
	`54`	`+ headline: false`
	`55`	`+ };`
	`56`	`+ },`
`53`	`57`	`computed: {`
`54`	`58`	`debug () {`
`55`	`59`	`return 'debug-structure' in this.$route.query;`
`@@ -127,9 +131,8 @@ export default {`
`127`	`131`	`--tag-color-bg: var(--color-structure-2-bg);`
`128`	`132`
`129`	`133`	`&::after {`
`130`		`- top: auto;`
	`134`	`+ top: 0;`
`131`	`135`	`right: 0;`
`132`		`- bottom: 0;`
`133`	`136`	`}`
`134`	`137`	`}`
`135`	`138`
`@@ -138,9 +141,9 @@ export default {`
`138`	`141`	`--tag-color-bg: var(--color-structure-3-bg);`
`139`	`142`
`140`	`143`	`&::after {`
`141`		`- top: auto;`
`142`		`- bottom: 0;`
`143`		`- left: 0;`
	`144`	`+ top: 0;`
	`145`	`+ left: 50%;`
	`146`	`+ transform: translateX(-50%);`
`144`	`147`	`}`
`145`	`148`	`}`
`146`	`149`
`@@ -149,7 +152,7 @@ export default {`
`149`	`152`	`--tag-color-bg: var(--color-structure-1-bg);`
`150`	`153`
`151`	`154`	`&::after {`
`152`		`- top: 0;`
	`155`	`+ bottom: 0;`
`153`	`156`	`left: 0;`
`154`	`157`	`}`
`155`	`158`	`}`