fix(update): add component; add styling; add postcss functions

.stylelintrc

@@ -26,4 +26,4 @@
     "max-empty-lines": null,
     "no-descending-specificity": null
   }
-}
+}

packages/core/Article/Teaser/default.vue

@@ -0,0 +1,23 @@
+<template>
+  <base-teaser v-bind="$attrs" v-on="$listeners">
+    <template #default>
+      <speedkit-picture v-bind="image" />
+      <span>{{ image.title }}</span>
+    </template>
+  </base-teaser>
+</template>
+
+<script>
+import SpeedkitPicture from 'nuxt-speedkit/components/SpeedkitPicture';
+import BaseTeaser from './index';
+export default {
+  components: { SpeedkitPicture, BaseTeaser },
+  inheritAttrs: false,
+  props: {
+    image: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>

packages/core/Article/Teaser/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <base-link v-bind="$attrs" v-on="$listeners">
+    <base-article>
+      <slot />
+    </base-article>
+  </base-link>
+</template>
+
+<script>
+import BaseLink from '../../Link';
+import BaseArticle from '../index';
+export default {
+  components: {
+    BaseLink,
+    BaseArticle
+  },
+  inheritAttrs: false
+};
+</script>

packages/core/Article/default.vue

@@ -1,27 +1,41 @@
 <template>
-  <base-article v-bind="$attrs" class="article-design-default">
-    <template #category>
-      <slot name="category" />
-    </template>
-    <template #headline>
-      <slot name="headline" />
-    </template>
-    <template #subline>
-      <slot name="subline" />
+  <base-article v-bind="$attrs" class="design-default" v-on="$listeners">
+    <template #header>
+      <slot name="header" :level="level">
+        <default-headline :level="level">
+          <slot name="headline" />
+        </default-headline>
+      </slot>
     </template>
     <template #default>
-      <slot name="default" />
+      <default-rich-text :value="content">
+        <slot />
+      </default-rich-text>
     </template>
   </base-article>
 </template>
 
 <script>
 import BaseArticle from '@foundation/core/Article';
+import DefaultHeadline from '@foundation/core/Headline/default';
+import DefaultRichText from '@foundation/core/RichText/default';
 
 export default {
   components: {
-    BaseArticle
+    BaseArticle,
+    DefaultHeadline,
+    DefaultRichText
   },
-  inheritAttrs: false
+  inheritAttrs: false,
+  props: {
+    level: {
+      type: Number,
+      default: 2
+    },
+    content: {
+      type: String,
+      default: null
+    }
+  }
 };
 </script>

packages/core/Article/index.vue

@@ -1,35 +1,14 @@
 <template>
   <article class="article" v-bind="$attrs" v-on="$listeners">
-    <header>
-      <nav v-if="$slots.category" class="category" aria-label="secondary">
-        <slot name="category" />
-      </nav>
-      <component :is="sectionLevel" v-if="$slots.headline" v-bind="$attrs" v-on="$listeners">
-        <slot name="headline" />
-      </component>
-      <p v-if="$slots.subline" class="subline" role="doc-subtitle">
-        <slot name="subline" />
-      </p>
+    <header v-if="$slots.header">
+      <slot name="header" />
     </header>
     <slot name="default" />
   </article>
 </template>
 
 <script>
 export default {
-  inheritAttrs: false,
-
-  props: {
-    level: {
-      type: Number,
-      required: true
-    }
-  },
-
-  computed: {
-    sectionLevel () {
-      return `h${this.level}`;
-    }
-  }
+  inheritAttrs: false
 };
 </script>

packages/core/Button/default.vue

@@ -1,5 +1,9 @@
 <template>
-  <button-base class="design-default" v-bind="$attrs" v-on="$listeners" />
+  <button-base class="design-default" v-bind="$attrs" v-on="$listeners">
+    <template #default="{label}">
+      <slot>{{ label }}</slot>
+    </template>
+  </button-base>
 </template>
 
 <script>
@@ -17,6 +21,7 @@ export default {
 <style lang="postcss" scoped>
 .design-default {
   position: relative;
+  font-family: monospace;
 
   &.loading {
     pointer-events: none;