update headline usages in docs

SchwarzIT · Jan 23, 2025 · c470112 · c470112
1 parent 8a4ff78
commit c470112
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 4 deletions.
diff --git a/apps/docs/src/.vitepress/components/ComponentCard.vue b/apps/docs/src/.vitepress/components/ComponentCard.vue
@@ -33,7 +33,7 @@ const props = defineProps<ComponentCardProps>();
     :href="props.href"
     :target="props.href?.startsWith('http') ? '_blank' : '_self'"
   >
-    <OnyxHeadline is="h2">{{ props.name }}</OnyxHeadline>
+    <OnyxHeadline is="h3" visual-size="h2">{{ props.name }}</OnyxHeadline>
     <ComponentStatusBadge :status="props.status" class="card__status" />
   </component>
 </template>

diff --git a/apps/docs/src/.vitepress/components/OnyxTypography.vue b/apps/docs/src/.vitepress/components/OnyxTypography.vue
@@ -67,7 +67,7 @@ const getTextSizeClass = (fontSize?: TextSize) => {
             {{ previewText }}
           </OnyxLink>
 
-          <OnyxHeadline :is="variable.htmlTag" v-else :monospace="isMonospace">
+          <OnyxHeadline is="h3" v-else :visual-size="variable.htmlTag" :monospace="isMonospace">
             {{ previewText }}
           </OnyxHeadline>
         </template>
@@ -95,6 +95,9 @@ const getTextSizeClass = (fontSize?: TextSize) => {
     padding: 0;
     border: none;
     letter-spacing: normal;
+    font-size: revert-layer;
+    line-height: revert-layer;
+    font-weight: revert-layer;
   }
 }
 

diff --git a/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.ct.tsx b/packages/sit-onyx/src/components/OnyxHeadline/OnyxHeadline.ct.tsx
@@ -19,7 +19,7 @@ test.describe("Screenshot tests", () => {
 test.describe("Screenshot tests (visual size)", () => {
   executeMatrixScreenshotTest({
     name: "Headline (visual sizes)",
-    columns: ["h1", "h2", "h3", "h4"],
+    columns: HEADLINE_TYPES,
     rows: HEADLINE_TYPES,
     component: (column, row) => (
       <OnyxHeadline is={row} visualSize={column}>

diff --git a/packages/sit-onyx/src/components/OnyxHeadline/types.ts b/packages/sit-onyx/src/components/OnyxHeadline/types.ts
@@ -9,7 +9,7 @@ export type OnyxHeadlineProps = {
    * Visual size of the headline (h1-h6). Will default to but can be different from the semantical `is` property.
    * Please note that only h1-h4 are intended to be used from UX perspective, h5 and h6 will have the same styles as h4.
    */
-  visualSize?: Exclude<HeadlineType, "h5" | "h6">;
+  visualSize?: HeadlineType;
   /**
    * Unique headline hash/ID (without "#") that is used to show a "#" icon on hover. Makes the headline clickable and a URL that points to this headline
    * is copied to the users clipboard. Will be automatically normalized when containing non URL-safe characters.