docs/typography

packages/docs/src/components/DocsContent.vue

@@ -28,6 +28,7 @@
       />
       <MarkdownView
         v-else-if="block.type === BlockType.TITLE"
+        class="docs-title"
         :key="block.type + index"
         :value="`# ${$t(block.translationString)}`"
       />
@@ -126,15 +127,3 @@ export default defineComponent({
   },
 })
 </script>
-
-<style lang="scss">
-.va-content h5 {
-  margin-top: 4rem;
-  line-height: 1.25;
-
-  &:first-of-type {
-    margin-top: 1.25rem;
-    margin-bottom: 0.75rem;
-  }
-}
-</style>

packages/docs/src/components/DocsExample.vue

@@ -1,25 +1,23 @@
 <template>
   <div class="mb-3">
-    <component :is="component" />
-    <template v-if="!exampleOptions.hideCode">
-      <va-button
-        v-if="!exampleOptions.forceShowCode"
-        class="mt-2 d-block docs-example__show-code-button"
-        flat
-        size="small"
-        color="primary"
-        @click="showCode = !showCode"
-      >
-        {{ showCode ? $t('docsExample.hideCode') : $t('docsExample.showCode') }}
-      </va-button>
-      <va-content v-if="showCode || exampleOptions.forceShowCode">
-        <DocsNavigation
-          v-if="componentTemplate"
-          :code="componentTemplate"
-          :config="exampleOptions.codesandboxConfig"
-          :git-url="path"
-          :git-component="file"
-        />
+    <va-card outlined class="docs-example-card">
+      <va-card-content>
+        <component :is="component" />
+      </va-card-content>
+    </va-card>
+
+    <va-content v-if="!exampleOptions.hideCode">
+      <DocsNavigation
+        v-if="componentTemplate"
+        :code="componentTemplate"
+        :config="exampleOptions.codesandboxConfig"
+        :git-url="path"
+        :git-component="file"
+        :hide-show-code-button="exampleOptions.forceShowCode"
+        v-model:show-code="showCode"
+      />
+
+      <template v-if="showCode || exampleOptions.forceShowCode">
         <DocsCode
           v-if="!exampleOptions.hideTemplate"
           language="markup"
@@ -35,84 +33,73 @@
           :code="parsed.style"
           language="markup"
         />
-      </va-content>
-    </template>
+      </template>
+    </va-content>
   </div>
 </template>
 
-<script>
-// Manually forked from https://github.com/vuetifyjs/vuetify/blob/master/packages/docs/src/components/doc/Example.vue
-// import VaContent from '../../ui/src/components/va-content/VaContent'
-import { ref, reactive, computed, shallowRef } from 'vue'
-import DocsCode from './DocsCode'
-import DocsNavigation from './DocsNavigation'
+<script setup lang="ts">
+import { ref, reactive, computed, shallowRef, defineProps, PropType } from 'vue'
+import DocsCode from './DocsCode.vue'
+import DocsNavigation from './DocsNavigation.vue'
 import { readComponent, readTemplate } from '../helpers/ReadHelper'
+import type { ExampleOptions } from '../types/configTypes'
 
-export default {
-  name: 'DocsExample',
-  components: { DocsCode, DocsNavigation },
-  props: {
-    value: {
-      type: [Object, String],
-      default: undefined,
-    },
-    path: {
-      type: String,
-      default: undefined,
-    },
-    exampleOptions: {
-      type: Object,
-      default: () => ({}),
-    },
+const props = defineProps({
+  value: {
+    type: [Object, String],
+    default: undefined,
   },
-  setup (props) {
-    const showCode = ref(false)
-    const parsed = reactive({
-      template: '',
-      style: '',
-      script: '',
-    })
-    const file = computed(() => {
-      if (props.value === Object(props.value)) {
-        return props.value.file
-      }
+  path: {
+    type: String,
+    required: true,
+  },
+  exampleOptions: {
+    type: Object as PropType<ExampleOptions>,
+    default: () => ({}),
+  },
+})
+const showCode = ref(false)
+const parsed = reactive({
+  template: '',
+  style: '',
+  script: '',
+})
 
-      return props.value
-    })
-    const path = ref(props.path)
-    const component = shallowRef(null)
-    const componentTemplate = shallowRef(null)
+const file = computed(() => {
+  if (typeof props.value === 'object') {
+    return props.value.file
+  }
 
-    importComponent()
-    importTemplate()
+  return props.value
+})
+const path = ref(props.path)
+const component = shallowRef(null)
+const componentTemplate = shallowRef<string | null>(null)
 
-    async function importComponent () {
-      component.value = (await readComponent(path.value, file.value)).default
-    }
-    async function importTemplate () {
-      componentTemplate.value = (await readTemplate(path.value, file.value)).default
-      parse(componentTemplate.value)
-    }
-    function parse (res) {
-      parsed.template = parseTemplate('template', res)
-      parsed.style = parseTemplate('style', res)
-      parsed.script = parseTemplate('script', res)
-    }
-    function parseTemplate (target, template) {
-      const string = `(<${target}(.*)?>[\\w\\W]*<\\/${target}>)`
-      const regex = new RegExp(string, 'g')
-      const parsed = regex.exec(template) || []
-      return parsed[1] || ''
-    }
+importComponent()
+importTemplate()
 
-    return {
-      showCode,
-      parsed,
-      component,
-      componentTemplate,
-      file,
-    }
-  },
+async function importComponent () {
+  component.value = (await readComponent(path.value, file.value)).default
+}
+async function importTemplate () {
+  componentTemplate.value = (await readTemplate(path.value, file.value)).default
+  if (componentTemplate.value) {
+    parse(componentTemplate.value)
+  }
+}
+
+function parse (res: string) {
+  parsed.template = parseTemplate('template', res)
+  parsed.style = parseTemplate('style', res)
+  parsed.script = parseTemplate('script', res)
+}
+function parseTemplate (target: string, template: string) {
+  const string = `(<${target}(.*)?>[\\w\\W]*<\\/${target}>)`
+  const regex = new RegExp(string, 'g')
+  const parsed = regex.exec(template) || []
+  return parsed[1] || ''
 }
 </script>
 
@@ -125,3 +112,27 @@ export default {
   }
 }
 </style>
+
+<style lang="scss" scoped>
+  .docs-example-card {
+    --va-card-outlined-border: 3px solid var(--va-background);
+    --va-card-border-radius: 0.25rem;
+
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    position: relative;
+    z-index: 1;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: var(--va-background);
+      opacity: 0.3;
+      z-index: -1;
+    }
+  }
+</style>

packages/docs/src/components/DocsHeadline.vue

@@ -29,8 +29,15 @@ export default defineComponent({
 })
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
   .docs-headline {
+    margin-top: 4rem;
+
+    .docs-subtitle + &,
+    .docs-title + & {
+      margin-top: 1.25rem;
+    }
+
     a,
     a:visited {
       color: var(--va-primary);