Support thematic breaks (#791)

Add support for "thematic breaks" using `<hr>`.

Resolves: rdar://125507297

Author: mportiz08

src/components/ContentNode.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
@@ -30,6 +30,7 @@ import TabNavigator from './ContentNode/TabNavigator.vue';
 import TaskList from './ContentNode/TaskList.vue';
 import LinksBlock from './ContentNode/LinksBlock.vue';
 import DeviceFrame from './ContentNode/DeviceFrame.vue';
+import ThematicBreak from './ContentNode/ThematicBreak.vue';
 
 const { CaptionPosition, CaptionTag } = Caption.constants;
 
@@ -49,6 +50,7 @@ export const BlockType = {
   row: 'row',
   tabNavigator: 'tabNavigator',
   links: 'links',
+  thematicBreak: 'thematicBreak',
 };
 
 const InlineType = {
@@ -421,6 +423,8 @@ function renderNode(createElement, references) {
         },
       });
     }
+    case BlockType.thematicBreak:
+      return createElement(ThematicBreak);
     case InlineType.codeVoice:
       return createElement(CodeVoice, {}, (
         node.code

src/components/ContentNode/ThematicBreak.vue

@@ -0,0 +1,23 @@
+<!--
+  This source file is part of the Swift.org open source project
+
+  Copyright (c) 2024 Apple Inc. and the Swift project authors
+  Licensed under Apache License v2.0 with Runtime Library Exception
+
+  See https://swift.org/LICENSE.txt for license information
+  See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+-->
+<template>
+  <hr class="thematic-break" />
+</template>
+
+<style scoped lang="scss">
+@import 'docc-render/styles/_core.scss';
+
+.thematic-break {
+  @include space-out-between-siblings(var(--spacing-stacked-margin-xlarge));
+  border-top-color: var(--color-grid, currentColor);
+  border-top-style: solid;
+  border-width: 1px 0 0 0;
+}
+</style>

tests/unit/components/ContentNode.spec.js

@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
@@ -31,6 +31,7 @@ import TaskList from 'docc-render/components/ContentNode/TaskList.vue';
 import { TopicSectionsStyle } from '@/constants/TopicSectionsStyle';
 import LinksBlock from '@/components/ContentNode/LinksBlock.vue';
 import DeviceFrame from '@/components/ContentNode/DeviceFrame.vue';
+import ThematicBreak from 'docc-render/components/ContentNode/ThematicBreak.vue';
 
 const { TableHeaderStyle, TableColumnAlignments } = ContentNode.constants;
 
@@ -1820,6 +1821,14 @@ describe('ContentNode', () => {
     });
   });
 
+  describe('with type="thematicBreak"', () => {
+    it('renders a `ThematicBreak`', () => {
+      const wrapper = mountWithItem({ type: ContentNode.BlockType.thematicBreak });
+      const tbreak = wrapper.find(ThematicBreak);
+      expect(tbreak.exists()).toBe(true);
+    });
+  });
+
   describe('with type="superscript"', () => {
     it('renders superscript tag', () => {
       const wrapper = mountWithItem({

tests/unit/components/ContentNode/ThematicBreak.spec.js

@@ -0,0 +1,20 @@
+/**
+ * This source file is part of the Swift.org open source project
+ *
+ * Copyright (c) 2024 Apple Inc. and the Swift project authors
+ * Licensed under Apache License v2.0 with Runtime Library Exception
+ *
+ * See https://swift.org/LICENSE.txt for license information
+ * See https://swift.org/CONTRIBUTORS.txt for Swift project authors
+*/
+import { shallowMount } from '@vue/test-utils';
+import ThematicBreak from 'docc-render/components/ContentNode/ThematicBreak.vue';
+
+describe('ThematicBreak', () => {
+  it('renders an <hr> element', () => {
+    const wrapper = shallowMount(ThematicBreak);
+    const hr = wrapper.find('hr');
+    expect(hr.exists()).toBe(true);
+    expect(hr.classes('thematic-break')).toBe(true);
+  });
+});