Add support for @Small directive

src/components/ContentNode.vue

@@ -20,6 +20,7 @@ import InlineImage from './ContentNode/InlineImage.vue';
 import Reference from './ContentNode/Reference.vue';
 import Table from './ContentNode/Table.vue';
 import StrikeThrough from './ContentNode/StrikeThrough.vue';
+import Small from './ContentNode/Small.vue';
 
 const BlockType = {
   aside: 'aside',
@@ -32,6 +33,7 @@ const BlockType = {
   termList: 'termList',
   unorderedList: 'unorderedList',
   dictionaryExample: 'dictionaryExample',
+  small: 'small',
 };
 
 const InlineType = {
@@ -275,6 +277,11 @@ function renderNode(createElement, references) {
       };
       return createElement(DictionaryExample, { props }, renderChildren(node.summary || []));
     }
+    case BlockType.small: {
+      return createElement('p', {}, [
+        createElement(Small, {}, renderChildren(node.inlineContent)),
+      ]);
+    }
     case InlineType.codeVoice:
       return createElement(CodeVoice, {}, (
         node.code
@@ -310,7 +317,7 @@ function renderNode(createElement, references) {
       const reference = references[node.identifier];
       if (!reference) return null;
       const titleInlineContent = node.overridingTitleInlineContent
-          || reference.titleInlineContent;
+        || reference.titleInlineContent;
       const titlePlainText = node.overridingTitle || reference.title;
       return createElement(Reference, {
         props: {

src/components/ContentNode/Small.vue

@@ -0,0 +1,30 @@
+<!--
+  This source file is part of the Swift.org open source project
+
+  Copyright (c) 2022 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>
+  <small>
+    <slot />
+  </small>
+</template>
+
+<script>
+export default {
+  name: 'Small',
+};
+</script>
+
+<style scoped lang='scss'>
+@import 'docc-render/styles/_core.scss';
+
+small {
+  @include font-styles(body-reduced-tight);
+  color: var(--color-figure-gray);
+}
+</style>

src/styles/core/typography/_font-styles.scss

@@ -194,5 +194,5 @@ $font-styles: (
   ),
   nav-menu-collapsible: (
     large: (nav_14_14, nav)
-  )
+  ),
 ) !default;

tests/unit/components/ContentNode.spec.js

@@ -21,6 +21,7 @@ import InlineImage from 'docc-render/components/ContentNode/InlineImage.vue';
 import Reference from 'docc-render/components/ContentNode/Reference.vue';
 import Table from 'docc-render/components/ContentNode/Table.vue';
 import StrikeThrough from 'docc-render/components/ContentNode/StrikeThrough.vue';
+import Small from '@/components/ContentNode/Small.vue';
 
 const { TableHeaderStyle } = ContentNode.constants;
 
@@ -320,6 +321,24 @@ describe('ContentNode', () => {
     });
   });
 
+  describe('with type="small"', () => {
+    it('renders a `<Small>`', () => {
+      const wrapper = mountWithItem({
+        type: 'small',
+        inlineContent: [
+          {
+            type: 'text',
+            text: 'foo',
+          },
+        ],
+      });
+      const paragraph = wrapper.find('p');
+      const small = paragraph.find(Small);
+      expect(small.exists()).toBe(true);
+      expect(small.text()).toBe('foo');
+    });
+  });
+
   describe('with type="codeVoice"', () => {
     it('renders a `CodeVoice`', () => {
       const wrapper = mountWithItem({