fix(docs): remove typography-block applied globally (#3594)

packages/docs/components/layout/Sidebar.vue

@@ -39,9 +39,9 @@
           <va-sidebar-item
             :to="childRoute.path ? childRoute.path : `/${route.name}/${childRoute.name}`"
             :active="isActiveChildRoute(childRoute, route)"
-            :active-color="activeColor"
             :hover-color="hoverColor"
-            border-color="primary"
+            :border-color="activeColor"
+            active-color="#ffffff00"
             @click="onSidebarItemClick"
           >
             <va-sidebar-item-content>
@@ -144,7 +144,7 @@ export default defineComponent({
       }
     }
 
-    watch(() => route, setActiveExpand, { immediate: true })
+    watch(() => route.fullPath, setActiveExpand, { immediate: true })
 
     return {
       navigationRoutes: getSortedNavigationRoutes(navigationRoutes),
@@ -181,6 +181,7 @@ export default defineComponent({
     font-size: 16px;
     line-height: 20px;
     cursor: pointer;
+    font-weight: bold;
 
     &:hover {
       ::before {
@@ -195,7 +196,7 @@ export default defineComponent({
     }
 
     &--active {
-      color: var(--va-primary);
+      color: var(--va-primary) !important;
     }
   }
 
@@ -215,6 +216,10 @@ export default defineComponent({
 
     .va-sidebar-item {
       cursor: pointer;
+
+      &--active {
+        color: var(--va-primary) !important;
+      }
     }
 
     .va-sidebar-item-title {
@@ -232,6 +237,7 @@ export default defineComponent({
 
     .va-sidebar-item-content {
       padding-left: 3rem;
+      min-height: 52px;
     }
 
     &:first-child {

packages/docs/layouts/default.vue

@@ -21,7 +21,7 @@
         />
       </aside>
       <main class="docs-layout__main-content">
-        <article class="docs-layout__page-content va-typography-block">
+        <article class="docs-layout__page-content">
           <slot />
         </article>
       </main>

packages/docs/modules/page-config/blocks/example/example-footer.vue

@@ -19,7 +19,7 @@
     <va-button
       preset="secondary"
       size="small"
-      class="docs-navigation__button mobile-hidden"
+      class="docs-navigation__button"
       color="secondary"
       @click="copy"
     >
@@ -50,7 +50,6 @@
       :action="sandboxDefineUrl"
       method="POST"
       target="_blank"
-      class="mobile-hidden"
     >
       <input
         type="hidden"
@@ -186,14 +185,17 @@ const sandboxParams = computed(() => createCodeSandbox(props.code, props.config)
     &__icon {
       font-style: normal !important;
       margin-right: 0.5rem;
+
+      @include sm(margin-left, 0.75rem);
+      @include sm(margin-right, 0.75rem);
     }
   }
 
   form {
     display: inline-flex;
   }
 
-  .mobile-hidden {
+  .docs-navigation__button__text {
     @include sm(display, none);
   }
 }

packages/docs/modules/page-config/blocks/example/index.ts

@@ -10,7 +10,11 @@ type Options = Partial<{
   forceShowCode: boolean,
   description: string,
   title: string;
-  codesandboxConfig: CodeSandboxConfig
+  codesandboxConfig: CodeSandboxConfig,
+  customCode: {
+    source: string,
+    lang: string,
+  },
 }>
 
 const setup = (component: DefineComponent, source: string, path: string, options: Options) => {

packages/docs/modules/page-config/blocks/example/index.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { DefineComponent, PropType, ref } from 'vue';
-import { type CodeSandboxConfig } from '../../../../composables/code-sandbox';
+import { DefineComponent, PropType, ref } from "vue";
+import { type CodeSandboxConfig } from "../../../../composables/code-sandbox";
 import { CodeView } from "../shared/code";
-import ExampleFooter from './example-footer.vue';
-import Headline from '../headline/index.vue'
-import Paragraph from '../paragraph/index.vue'
+import ExampleFooter from "./example-footer.vue";
+import Headline from "../headline/index.vue";
+import Paragraph from "../paragraph/index.vue";
 
 const props = defineProps({
   component: {
@@ -21,36 +21,48 @@ const props = defineProps({
   },
   title: {
     type: String as PropType<string>,
-    default: '',
+    default: "",
   },
   description: {
     type: String as PropType<string>,
-    default: '',
+    default: "",
   },
-  hideCode: { type: Boolean, default: false, },
-  hideTitle: { type: Boolean, default: false, },
-  hideTemplate: { type: Boolean, default: false, },
+  hideCode: { type: Boolean, default: false },
+  hideTitle: { type: Boolean, default: false },
+  hideTemplate: { type: Boolean, default: false },
   forceShowCode: { type: Boolean, default: false },
-  codesandboxConfig: { type: Object as PropType<CodeSandboxConfig>, default: () => ({}) },
+  codesandboxConfig: {
+    type: Object as PropType<CodeSandboxConfig>,
+    default: () => ({}),
+  },
+  customCode: {
+    type: Object as PropType<{
+      source: string;
+      lang: string;
+    }>,
+  },
 });
 
-const showCode = ref(false)
+const showCode = ref(false);
 
 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] || ''
+  const string = `(<${target}(.*)?>[\\w\\W]*<\\/${target}>)`;
+  const regex = new RegExp(string, "g");
+  const parsed = regex.exec(template) || [];
+  return parsed[1] || "";
 }
 
-const template = computed(() => parseTemplate('template', props.source))
-const script = computed(() => parseTemplate('script', props.source))
-const style = computed(() => parseTemplate('style', props.source))
+const template = computed(() => parseTemplate("template", props.source));
+const script = computed(() => parseTemplate("script", props.source));
+const style = computed(() => parseTemplate("style", props.source));
 
 // TODO: double check if path correct after release
 const gitLink = computed(
-  () => `https://github.com/epicmaxco/vuestic-ui/tree/develop/packages/docs/${props.path}`,
-)
+  () =>
+    `https://github.com/epicmaxco/vuestic-ui/tree/develop/packages/docs/${props.path}`
+);
+
+const sourceComputed = computed(() => props.customCode?.source || props.source);
 </script>
 
 <template>
@@ -78,28 +90,36 @@ const gitLink = computed(
     <ExampleFooter
       v-model:show-code="showCode"
       class="-mt-1"
-      :code="source"
+      :code="sourceComputed"
       :git-link="gitLink"
       :hide-show-code-button="forceShowCode || hideCode"
     />
 
-    <div v-if="(showCode && !hideCode) || forceShowCode">
-      <CodeView
-        v-if="template && !hideTemplate"
-        language="html"
-        :code="template"
-      />
-      <CodeView
-        v-if="script"
-        :code="script"
-        language="html"
-      />
-      <CodeView
-        v-if="style"
-        :code="style"
-        language="html"
-      />
-    </div>
+    <template v-if="(showCode && !hideCode) || forceShowCode">
+      <div v-if="customCode">
+        <CodeView
+          :code="customCode.source"
+          :language="customCode.lang"
+        />
+      </div>
+      <div v-else>
+        <CodeView
+          v-if="template && !hideTemplate"
+          language="html"
+          :code="template"
+        />
+        <CodeView
+          v-if="script"
+          :code="script"
+          language="html"
+        />
+        <CodeView
+          v-if="style"
+          :code="style"
+          language="html"
+        />
+      </div>
+    </template>
   </div>
 </template>
 

packages/docs/modules/page-config/blocks/headline/index.vue

@@ -12,7 +12,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <h3 class="page-config-headline flex">
+  <h3 class="page-config-headline flex items-center va-h3">
     <MarkdownView
       :content="text"
       text

packages/docs/modules/page-config/blocks/link/index.vue

@@ -28,7 +28,7 @@ const externalLink = computed(() => {
 </script>
 
 <template>
-  <p class="docs-link">
+  <p class="docs-link va-link">
     <MarkdownView
       v-if="preText"
       class="docs-link__pre"

packages/docs/modules/page-config/blocks/list/index.vue

@@ -17,5 +17,8 @@ const mark = (strings: string[]): string => {
 </script>
 
 <template>
-  <MarkdownView :content="mark(props.text)" />
+  <MarkdownView
+    :content="mark(props.text)"
+    class="va-unordered"
+  />
 </template>

packages/docs/modules/page-config/blocks/markdown/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <MarkdownView :content="text" />
+  <MarkdownView
+    class="va-typography-block"
+    :content="text"
+  />
 </template>
 
 <script setup lang="ts">

packages/docs/modules/page-config/blocks/paragraph/index.vue

@@ -12,6 +12,6 @@ const props = defineProps({
 
 <template>
   <va-content>
-    <MarkdownView :content="text" />
+    <MarkdownView class="va-text" :content="text" />
   </va-content>
 </template>

packages/docs/modules/page-config/blocks/shared/anchor/Anchor.vue

@@ -4,7 +4,7 @@
     ref="el"
     :to="`#${anchor}`"
     :class="{ 'page-config-anchor--force-show': forceShow }"
-    class="page-config-anchor"
+    class="page-config-anchor va-link"
   >
     #
   </NuxtLink>

packages/docs/modules/page-config/blocks/shared/code/CodeView.vue

@@ -17,7 +17,7 @@
     <code-highlight-wrapper
       :code="escapeVuesticImport(contents[index])"
       :lang="$props.language"
-      class="DocsCode"
+      class="DocsCode va-typography-block"
     />
   </div>
 </template>

packages/docs/modules/page-config/blocks/shared/markdown/MarkdownView.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="MarkdownView"
+    class="MarkdownView va-typography-block"
     :class="{ 'MarkdownView--inline': inline || text }"
     v-html="text"
   />

packages/docs/modules/page-config/blocks/subtitle/index.vue

@@ -12,7 +12,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <h2 class="page-config-subtitle flex">
+  <h2 class="page-config-subtitle va-h2 flex items-center">
     <MarkdownView
       :content="text"
       text

packages/docs/modules/page-config/blocks/table/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="DocsTable">
-    <table class="DocsTable__table">
+  <div class="DocsTable va-typography-block">
+    <table class="DocsTable__table va-table">
       <thead>
         <tr>
           <th

packages/docs/modules/page-config/blocks/title/index.vue

@@ -12,7 +12,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <h1 class="page-config-title flex">
+  <h1 class="page-config-title flex items-center va-h1">
     <MarkdownView
       :content="text"
       text

packages/docs/page-config/contribution/documentation-page/examples/Alert.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+  import Code from '../../../../modules/page-config/blocks/alert/index.vue'
+</script>
+
+<template>
+  <Code :text="`Alert (example)`" color="danger" />
+</template>

packages/docs/page-config/contribution/documentation-page/examples/Code.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+  import Code from '../../../../modules/page-config/blocks/code/index.vue'
+</script>
+
+<template>
+  <Code :content="`<div>Code string</div>`" />
+</template>

packages/docs/page-config/contribution/documentation-page/examples/Headline.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+  import Headline from '../../../../modules/page-config/blocks/headline/index.vue'
+</script>
+
+<template>
+  <Headline text="Headline (example)" />
+</template>

packages/docs/page-config/contribution/documentation-page/examples/Link.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+  import Link from '../../../../modules/page-config/blocks/link/index.vue'
+</script>
+
+<template>
+  <Link :text="`Link (example)`" href="/getting-started/configuration-guide#components-config" />
+</template>